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

18
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,
@ -127,6 +128,7 @@ var whiteboard = {
} }
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);
window.requestAnimationFrame(function() {
if((!currX || !currY) && e.touches && e.touches[0]) { if((!currX || !currY) && e.touches && e.touches[0]) {
var touche= e.touches[0]; var touche= e.touches[0];
currX = touche.clientX - $(_this.mouseOverlay).offset().left; currX = touche.clientX - $(_this.mouseOverlay).offset().left;
@ -149,11 +151,11 @@ var whiteboard = {
if(_this.tool==="eraser") { if(_this.tool==="eraser") {
var left = currX-_this.thickness; var left = currX-_this.thickness;
var top = currY-_this.thickness; var top = currY-_this.thickness;
_this.cursorContainer.find("#ownCursor").css({"top":top+"px", "left":left+"px"}); _this.ownCursor.css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="pen") { } else if(_this.tool==="pen") {
var left = currX-_this.thickness/2; var left = currX-_this.thickness/2;
var top = currY-_this.thickness/2; var top = currY-_this.thickness/2;
_this.cursorContainer.find("#ownCursor").css({"top":top+"px", "left":left+"px"}); _this.ownCursor.css({"top":top+"px", "left":left+"px"});
} else if(_this.tool==="line") { } else if(_this.tool==="line") {
if(svgLine) { if(svgLine) {
if(shiftPressed) { if(shiftPressed) {
@ -192,6 +194,7 @@ var whiteboard = {
svgCirle.setAttribute('r', r); svgCirle.setAttribute('r', r);
} }
} }
});
_this.sendFunction({"t":"cursor","event":"move","d":[currX, currY], "username":_this.settings.username}); _this.sendFunction({"t":"cursor","event":"move","d":[currX, currY], "username":_this.settings.username});
}); });
@ -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,7 +580,7 @@ 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"){
@ -600,7 +604,7 @@ var whiteboard = {
this.imgContainer.empty(); this.imgContainer.empty();
this.drawBuffer = []; this.drawBuffer = [];
this.drawId = 0; this.drawId = 0;
} else if(tool==="cursor") { } else if(tool==="cursor" && _this.settings) {
if(content["event"]==="move") { if(content["event"]==="move") {
if(_this.cursorContainer.find("."+content["username"]).length>=1) { if(_this.cursorContainer.find("."+content["username"]).length>=1) {
_this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" }); _this.cursorContainer.find("."+content["username"]).css({"left":data[0]+"px","top":data[1]+"px" });
@ -612,10 +616,10 @@ var whiteboard = {
} else { } else {
_this.cursorContainer.find("."+content["username"]).remove(); _this.cursorContainer.find("."+content["username"]).remove();
} }
} else if(tool==="undo") { } else if(tool==="undo") {
_this.undoWhiteboard(username); _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;