WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve performance

Browse Source
This commit is contained in:
rofl256 2018-03-03 11:16:24 +01:00
parent 2d450af0ff
commit a5274dc03d
1 changed files with 109 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
public/js/whiteboard.js
View File

@ -16,6 +16,7 @@ var whiteboard = {
imgContainer : null, imgContainer : null,
svgContainer : null, //For draw prev svgContainer : null, //For draw prev
mouseOverlay : null, mouseOverlay : null,
ownCursor : null,
drawBuffer : [], drawBuffer : [],
drawId : 0, //Used for undo function drawId : 0, //Used for undo function
imgDragActive : false, imgDragActive : false,
@ -126,73 +127,75 @@ var whiteboard = {
return; return;
} }
var currX = (e.offsetX || e.pageX - $(e.target).offset().left); var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top); var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
if((!currX || !currY) && e.touches && e.touches[0]) { window.requestAnimationFrame(function() {
var touche= e.touches[0]; if((!currX || !currY) && e.touches && e.touches[0]) {
currX = touche.clientX - $(_this.mouseOverlay).offset().left; var touche= e.touches[0];
currY = touche.clientY - $(_this.mouseOverlay).offset().top; currX = touche.clientX - $(_this.mouseOverlay).offset().left;
latestTouchCoods = [currX, currY]; currY = touche.clientY - $(_this.mouseOverlay).offset().top;
} latestTouchCoods = [currX, currY];
if(_this.drawFlag) {
if(_this.tool==="pen") {
_this.drawPenLine(currX, currY, _this.prevX, _this.prevY, _this.drawcolor, _this.thickness);
_this.sendFunction({"t":_this.tool,"d":[currX, currY, _this.prevX, _this.prevY], "c":_this.drawcolor, "th":_this.thickness});
} else if(_this.tool=="eraser") {
_this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness);
_this.sendFunction({"t":_this.tool,"d":[currX, currY, _this.prevX, _this.prevY], "th":_this.thickness});
}
_this.prevX =currX;
_this.prevY =currY;
}
if(_this.tool==="eraser") {
var left = currX-_this.thickness;
var top = currY-_this.thickness;
_this.cursorContainer.find("#ownCursor").css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="pen") {
var left = currX-_this.thickness/2;
var top = currY-_this.thickness/2;
_this.cursorContainer.find("#ownCursor").css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="line") {
if(svgLine) {
if(shiftPressed) {
var angs = getRoundedAngles(currX, currY);
currX = angs.x;
currY = angs.y;
}
svgLine.setAttribute('x2',currX);
svgLine.setAttribute('y2',currY);
}
} else if(_this.tool==="rect" || (_this.tool==="recSelect" && _this.drawFlag)) {
if(svgRect) {
var width = Math.abs(currX-startCoords[0]);
var height = Math.abs(currY-startCoords[1]);
if(shiftPressed) {
height=width;
var x = currX<startCoords[0] ? startCoords[0]-width : startCoords[0];
var y = currY<startCoords[1] ? startCoords[1]-width : startCoords[1];
svgRect.setAttribute('x', x);
svgRect.setAttribute('y', y);
} else {
var x = currX<startCoords[0] ? currX : startCoords[0];
var y = currY<startCoords[1] ? currY : startCoords[1];
svgRect.setAttribute('x', x);
svgRect.setAttribute('y', y);
}
svgRect.setAttribute('width',width);
svgRect.setAttribute('height',height);
} }
} else if(_this.tool==="circle") {
var a = currX - startCoords[0]; if(_this.drawFlag) {
var b = currY - startCoords[1]; if(_this.tool==="pen") {
var r = Math.sqrt( a*a + b*b ); _this.drawPenLine(currX, currY, _this.prevX, _this.prevY, _this.drawcolor, _this.thickness);
if(svgCirle) { _this.sendFunction({"t":_this.tool,"d":[currX, currY, _this.prevX, _this.prevY], "c":_this.drawcolor, "th":_this.thickness});
svgCirle.setAttribute('r', r); } else if(_this.tool=="eraser") {
} _this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness);
} _this.sendFunction({"t":_this.tool,"d":[currX, currY, _this.prevX, _this.prevY], "th":_this.thickness});
_this.sendFunction({"t":"cursor","event":"move","d":[currX, currY], "username":_this.settings.username}); }
_this.prevX =currX;
_this.prevY =currY;
}
if(_this.tool==="eraser") {
var left = currX-_this.thickness;
var top = currY-_this.thickness;
_this.ownCursor.css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="pen") {
var left = currX-_this.thickness/2;
var top = currY-_this.thickness/2;
_this.ownCursor.css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="line") {
if(svgLine) {
if(shiftPressed) {
var angs = getRoundedAngles(currX, currY);
currX = angs.x;
currY = angs.y;
}
svgLine.setAttribute('x2',currX);
svgLine.setAttribute('y2',currY);
}
} else if(_this.tool==="rect" || (_this.tool==="recSelect" && _this.drawFlag)) {
if(svgRect) {
var width = Math.abs(currX-startCoords[0]);
var height = Math.abs(currY-startCoords[1]);
if(shiftPressed) {
height=width;
var x = currX<startCoords[0] ? startCoords[0]-width : startCoords[0];
var y = currY<startCoords[1] ? startCoords[1]-width : startCoords[1];
svgRect.setAttribute('x', x);
svgRect.setAttribute('y', y);
} else {
var x = currX<startCoords[0] ? currX : startCoords[0];
var y = currY<startCoords[1] ? currY : startCoords[1];
svgRect.setAttribute('x', x);
svgRect.setAttribute('y', y);
}
svgRect.setAttribute('width',width);
svgRect.setAttribute('height',height);
}
} else if(_this.tool==="circle") {
var a = currX - startCoords[0];
var b = currY - startCoords[1];
var r = Math.sqrt( a*a + b*b );
if(svgCirle) {
svgCirle.setAttribute('r', r);
}
}
});
_this.sendFunction({"t":"cursor","event":"move","d":[currX, currY], "username":_this.settings.username});
}); });
$(_this.mouseOverlay).on("mouseup touchend touchcancel", function(e) { $(_this.mouseOverlay).on("mouseup touchend touchcancel", function(e) {
@ -306,7 +309,7 @@ var whiteboard = {
_this.drawFlag=false; _this.drawFlag=false;
_this.mouseover = false; _this.mouseover = false;
_this.ctx.globalCompositeOperation = _this.oldGCO; _this.ctx.globalCompositeOperation = _this.oldGCO;
_this.cursorContainer.find("#ownCursor").remove(); _this.ownCursor.remove();
_this.svgContainer.find("line").remove(); _this.svgContainer.find("line").remove();
_this.svgContainer.find("rect").remove(); _this.svgContainer.find("rect").remove();
_this.svgContainer.find("circle").remove(); _this.svgContainer.find("circle").remove();
@ -325,7 +328,8 @@ var whiteboard = {
widthHeight = widthHeight * 2; widthHeight = widthHeight * 2;
} }
if(_this.tool==="eraser" || _this.tool==="pen") { if(_this.tool==="eraser" || _this.tool==="pen") {
_this.cursorContainer.append('<div id="ownCursor" style="background:'+color+'; border:1px solid gray; position:absolute; width:'+widthHeight+'px; height:'+widthHeight+'px; border-radius:50%;"></div>'); _this.ownCursor = $('<div id="ownCursor" style="background:'+color+'; border:1px solid gray; position:absolute; width:'+widthHeight+'px; height:'+widthHeight+'px; border-radius:50%;"></div>');
_this.cursorContainer.append(_this.ownCursor);
} }
} }
_this.mouseover = true; _this.mouseover = true;
@ -576,46 +580,46 @@ var whiteboard = {
var color = content["c"]; var color = content["c"];
var username = content["username"]; var username = content["username"];
var thickness = content["th"]; var thickness = content["th"];
window.requestAnimationFrame(function() {
if(tool==="line" || tool==="pen") { if(tool==="line" || tool==="pen") {
_this.drawPenLine(data[0], data[1], data[2], data[3], color, thickness); _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); _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); _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); _this.drawEraserLine(data[0], data[1], data[2], data[3], thickness);
} else if(tool==="eraseRec"){ } else if(tool==="eraseRec"){
_this.eraseRec(data[0], data[1],data[2],data[3]); _this.eraseRec(data[0], data[1],data[2],data[3]);
} else if(tool==="recSelect"){ } else if(tool==="recSelect"){
_this.dragCanvasRectContent(data[0], data[1],data[2],data[3],data[4],data[5]); _this.dragCanvasRectContent(data[0], data[1],data[2],data[3],data[4],data[5]);
} else if(tool==="addImgBG") { } else if(tool==="addImgBG") {
if(content["draw"]=="1") { if(content["draw"]=="1") {
_this.drawImgToCanvas(content["url"],data[0],data[1],data[2],data[3], doneCallback) _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]);
}
} else if(tool==="clear") {
_this.canvas.height = _this.canvas.height;
this.imgContainer.empty();
this.drawBuffer = [];
this.drawId = 0;
} else if(tool==="cursor") {
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 { } else {
_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="userbadge '+content["username"]+'">'+ _this.drawImgToBackground(content["url"],data[0],data[1],data[2],data[3]);
'<div style="width:4px; height:4px; background:gray; position:absolute; top:-2px; left:-2px; border-radius:50%;"></div>'+
content["username"]+'</div>');
} }
} else { } else if(tool==="clear") {
_this.cursorContainer.find("."+content["username"]).remove(); _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" });
} else {
_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:'+data[0]+'; top:'+data[1]+';" class="userbadge '+content["username"]+'">'+
'<div style="width:4px; height:4px; background:gray; position:absolute; top:-2px; left:-2px; border-radius:50%;"></div>'+
content["username"]+'</div>');
}
} else {
_this.cursorContainer.find("."+content["username"]).remove();
}
} else if(tool==="undo") {
_this.undoWhiteboard(username);
} }
});
} 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["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;