'+
- '
'+
- '
'+
- ' '+
- ' '+
- ''+
- '
'+
- '
'+
+ _this.mouseOverlay.css({ "cursor": "default" });
+ var imgDiv = $('
' +
+ '
' +
+ '
' +
+ ' ' +
+ ' ' +
+ '' +
+ '
' +
+ '
' +
'
');
- imgDiv.find(".xCanvasBtn").click(function() {
+ imgDiv.find(".xCanvasBtn").click(function () {
_this.imgDragActive = false;
- if(_this.tool==="pen") {
- _this.mouseOverlay.css({"cursor":"none"});
- } else if(_this.tool==="mouse") {
- _this.mouseOverlay.css({"cursor":"auto"});
+ if (_this.tool === "pen") {
+ _this.mouseOverlay.css({ "cursor": "none" });
+ } else if (_this.tool === "mouse") {
+ _this.mouseOverlay.css({ "cursor": "auto" });
} else {
- _this.mouseOverlay.css({"cursor":"crosshair"});
+ _this.mouseOverlay.css({ "cursor": "crosshair" });
}
imgDiv.remove();
});
- imgDiv.find(".addToCanvasBtn").click(function() {
+ imgDiv.find(".addToCanvasBtn").click(function () {
var draw = $(this).attr("draw");
_this.imgDragActive = false;
- if(_this.tool==="pen") {
- _this.mouseOverlay.css({"cursor":"none"});
- } else if(_this.tool==="mouse") {
- _this.mouseOverlay.css({"cursor":"auto"});
+ if (_this.tool === "pen") {
+ _this.mouseOverlay.css({ "cursor": "none" });
+ } else if (_this.tool === "mouse") {
+ _this.mouseOverlay.css({ "cursor": "auto" });
} else {
- _this.mouseOverlay.css({"cursor":"crosshair"});
+ _this.mouseOverlay.css({ "cursor": "crosshair" });
}
var width = imgDiv.width();
var height = imgDiv.height();
var p = imgDiv.position();
- var left = Math.round(p.left*100)/100;
- var top = Math.round(p.top*100)/100;
- if(draw=="1") { //draw image to canvas
- _this.drawImgToCanvas(url,width,height,left,top);
+ var left = Math.round(p.left * 100) / 100;
+ var top = Math.round(p.top * 100) / 100;
+ if (draw == "1") { //draw image to canvas
+ _this.drawImgToCanvas(url, width, height, left, top);
} else { //Add image to background
- _this.drawImgToBackground(url,width,height,left,top);
+ _this.drawImgToBackground(url, width, height, left, top);
}
- _this.sendFunction({"t":"addImgBG", "draw":draw, "url":url, "d":[width,height,left,top]});
+ _this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] });
_this.drawId++;
imgDiv.remove();
});
@@ -521,30 +522,30 @@ var whiteboard = {
imgDiv.draggable();
imgDiv.resizable();
},
- drawImgToBackground(url,width,height,left,top) {
- this.imgContainer.append('
')
+ drawImgToBackground(url, width, height, left, top) {
+ this.imgContainer.append('
')
},
- drawImgToCanvas(url,width,height,left,top, doneCallback) {
+ drawImgToCanvas(url, width, height, left, top, doneCallback) {
var _this = this;
var img = document.createElement('img');
- img.onload=function(){
- _this.ctx.drawImage(img,left,top,width,height);
- if(doneCallback) {
+ img.onload = function () {
+ _this.ctx.drawImage(img, left, top, width, height);
+ if (doneCallback) {
doneCallback();
}
}
img.src = url;
},
- undoWhiteboard : function(username) { //Not call this directly because you will get out of sync whit others...
+ undoWhiteboard: function (username) { //Not call this directly because you will get out of sync whit others...
var _this = this;
- if(!username) {
+ if (!username) {
username = _this.settings.username;
}
- for(var i=_this.drawBuffer.length-1;i>=0;i--){
- if(_this.drawBuffer[i]["username"]==username) {
+ for (var i = _this.drawBuffer.length - 1; i >= 0; i--) {
+ if (_this.drawBuffer[i]["username"] == username) {
var drawId = _this.drawBuffer[i]["drawId"];
- for(var i=_this.drawBuffer.length-1;i>=0;i--){
- if(_this.drawBuffer[i]["drawId"]==drawId && _this.drawBuffer[i]["username"]==username) {
+ for (var i = _this.drawBuffer.length - 1; i >= 0; i--) {
+ if (_this.drawBuffer[i]["drawId"] == drawId && _this.drawBuffer[i]["username"] == username) {
_this.drawBuffer.splice(i, 1);
}
}
@@ -554,81 +555,81 @@ var whiteboard = {
_this.canvas.height = _this.canvas.height;
_this.imgContainer.empty();
console.log(_this.drawBuffer)
- _this.loadDataInSteps(_this.drawBuffer,false, function(stepData) {
+ _this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
//Nothing to do
});
},
- undoWhiteboardClick : function() {
- this.sendFunction({"t":"undo"});
+ undoWhiteboardClick: function () {
+ this.sendFunction({ "t": "undo" });
this.undoWhiteboard();
},
- setTool : function(tool) {
+ setTool: function (tool) {
this.tool = tool;
- if(tool==="pen" || tool==="eraser") {
- this.mouseOverlay.css({"cursor":"none"});
- } else if(tool==="mouse"){
- this.mouseOverlay.css({"cursor":"default"});
+ if (tool === "pen" || tool === "eraser") {
+ this.mouseOverlay.css({ "cursor": "none" });
+ } else if (tool === "mouse") {
+ this.mouseOverlay.css({ "cursor": "default" });
} else {
- this.mouseOverlay.css({"cursor":"crosshair"});
+ this.mouseOverlay.css({ "cursor": "crosshair" });
}
this.mouseOverlay.find(".xCanvasBtn").click();
},
- handleEventsAndData : function(content, isNewData, doneCallback) {
+ handleEventsAndData: function (content, isNewData, doneCallback) {
var _this = this;
var tool = content["t"];
var data = content["d"];
var color = content["c"];
var username = content["username"];
var thickness = content["th"];
- window.requestAnimationFrame(function() {
- if(tool==="line" || tool==="pen") {
+ window.requestAnimationFrame(function () {
+ if (tool === "line" || tool === "pen") {
_this.drawPenLine(data[0], data[1], data[2], data[3], color, thickness);
- } else if(tool==="rect"){
+ } else if (tool === "rect") {
_this.drawRec(data[0], data[1], data[2], data[3], color, thickness);
- } else if(tool==="circle"){
+ } else if (tool === "circle") {
_this.drawCircle(data[0], data[1], data[2], color, thickness);
- } else if(tool==="eraser"){
+ } else if (tool === "eraser") {
_this.drawEraserLine(data[0], data[1], data[2], data[3], thickness);
- } else if(tool==="eraseRec"){
- _this.eraseRec(data[0], data[1],data[2],data[3]);
- } else if(tool==="recSelect"){
- _this.dragCanvasRectContent(data[0], data[1],data[2],data[3],data[4],data[5]);
- } else if(tool==="addImgBG") {
- if(content["draw"]=="1") {
- _this.drawImgToCanvas(content["url"],data[0],data[1],data[2],data[3], doneCallback)
+ } else if (tool === "eraseRec") {
+ _this.eraseRec(data[0], data[1], data[2], data[3]);
+ } else if (tool === "recSelect") {
+ _this.dragCanvasRectContent(data[0], data[1], data[2], data[3], data[4], data[5]);
+ } else if (tool === "addImgBG") {
+ if (content["draw"] == "1") {
+ _this.drawImgToCanvas(content["url"], data[0], data[1], data[2], data[3], doneCallback)
} else {
- _this.drawImgToBackground(content["url"],data[0],data[1],data[2],data[3]);
+ _this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]);
}
- } else if(tool==="clear") {
+ } else if (tool === "clear") {
_this.canvas.height = _this.canvas.height;
this.imgContainer.empty();
this.drawBuffer = [];
- this.drawId = 0;
- } else if(tool==="cursor" && _this.settings) {
- if(content["event"]==="move") {
- if(_this.cursorContainer.find("."+content["username"]).length>=1) {
- _this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" });
+ this.drawId = 0;
+ } else if (tool === "cursor" && _this.settings) {
+ if (content["event"] === "move") {
+ if (_this.cursorContainer.find("." + content["username"]).length >= 1) {
+ _this.cursorContainer.find("." + content["username"]).css({ "left": data[0] + "px", "top": data[1] + "px" });
} else {
- _this.cursorContainer.append('
'+
- '
'+
- content["username"]+'
');
+ _this.cursorContainer.append('
' +
+ '
' +
+ content["username"] + '
');
}
} else {
- _this.cursorContainer.find("."+content["username"]).remove();
+ _this.cursorContainer.find("." + content["username"]).remove();
}
- } else if(tool==="undo") {
+ } else if (tool === "undo") {
_this.undoWhiteboard(username);
}
});
- if(isNewData && (tool==="line" || tool==="pen" || tool==="rect" || tool==="circle" || tool==="eraser" || tool==="addImgBG" || tool==="recSelect" || tool==="eraseRec")) {
+ if (isNewData && (tool === "line" || tool === "pen" || tool === "rect" || tool === "circle" || tool === "eraser" || tool === "addImgBG" || tool === "recSelect" || tool === "eraseRec")) {
content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
content["username"] = content["username"] ? content["username"] : _this.settings.username;
_this.drawBuffer.push(content);
}
},
userLeftWhiteboard(username) {
- this.cursorContainer.find("."+username).remove();
+ this.cursorContainer.find("." + username).remove();
},
refreshUserBadges() {
this.cursorContainer.find(".userbadge").remove();
@@ -636,29 +637,29 @@ var whiteboard = {
getImageDataBase64() {
_this = this;
var width = this.mouseOverlay.width();
- var height = this.mouseOverlay.height();
- var copyCanvas = document.createElement('canvas');
- copyCanvas.width = width;
- copyCanvas.height = height;
- var ctx = copyCanvas.getContext("2d");
+ var height = this.mouseOverlay.height();
+ var copyCanvas = document.createElement('canvas');
+ copyCanvas.width = width;
+ copyCanvas.height = height;
+ var ctx = copyCanvas.getContext("2d");
- $.each(_this.imgContainer.find("img"), function() {
- var width = $(this).width();
+ $.each(_this.imgContainer.find("img"), function () {
+ var width = $(this).width();
var height = $(this).height();
var p = $(this).position();
- var left = Math.round(p.left*100)/100;
- var top = Math.round(p.top*100)/100;
- ctx.drawImage(this,left,top,width,height);
- });
+ var left = Math.round(p.left * 100) / 100;
+ var top = Math.round(p.top * 100) / 100;
+ ctx.drawImage(this, left, top, width, height);
+ });
- var destCtx = copyCanvas.getContext('2d');
- destCtx.drawImage(this.canvas, 0, 0);
- var url = copyCanvas.toDataURL();
- return url;
+ var destCtx = copyCanvas.getContext('2d');
+ destCtx.drawImage(this.canvas, 0, 0);
+ var url = copyCanvas.toDataURL();
+ return url;
},
getImageDataJson() {
var sendObj = [];
- for(var i=0;i
=content.length-1) { //Done with all data
+ if (index >= content.length - 1) { //Done with all data
_this.drawId++;
}
});
},
- sendFunction : function(content) { //Sends every draw to server
+ sendFunction: function (content) { //Sends every draw to server
var _this = this;
content["wid"] = _this.settings.whiteboardId;
content["username"] = _this.settings.username;
content["drawId"] = _this.drawId;
var tool = content["t"];
- if(_this.settings.sendFunction) {
+ if (_this.settings.sendFunction) {
_this.settings.sendFunction(content);
}
- if(tool==="line" || tool==="pen" || tool==="rect" || tool==="circle" || tool==="eraser" || tool==="addImgBG" || tool==="recSelect" || tool==="eraseRec") {
+ if (tool === "line" || tool === "pen" || tool === "rect" || tool === "circle" || tool === "eraser" || tool === "addImgBG" || tool === "recSelect" || tool === "eraseRec") {
_this.drawBuffer.push(content);
}
},
- isRecRecCollision : function(rx1,ry1,rw1,rh1,rx2,ry2,rw2,rh2) {
- return rx1 < rx2 + rw2 && rx1 + rw1 > rx2 && ry1 < ry2 + rh2 && rh1 + ry1 > ry2;
+ isRecRecCollision: function (rx1, ry1, rw1, rh1, rx2, ry2, rw2, rh2) {
+ return rx1 < rx2 + rw2 && rx1 + rw1 > rx2 && ry1 < ry2 + rh2 && rh1 + ry1 > ry2;
},
- isRecPointCollision : function(rx, ry, rw, rh, px, py) {
+ isRecPointCollision: function (rx, ry, rw, rh, px, py) {
return rx <= px && px <= rx + rw && ry <= py && py <= ry + rh;
}
}
\ No newline at end of file
-
-
+
+