From 5dca96cbd301e11a9a9982cd727a9151cdc47d2d Mon Sep 17 00:00:00 2001 From: cracker0dks Date: Tue, 18 Feb 2020 19:46:03 +0100 Subject: [PATCH] fix touch bugs on mobile devices --- public/index.html | 12 +++++++++++- public/js/whiteboard.js | 33 ++++++++++++++++++--------------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index 8a5f926..f1d3a19 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,8 @@ Whiteboard - + + @@ -22,6 +23,15 @@ + diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index 77415ee..ee55812 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -6,6 +6,7 @@ var whiteboard = { thickness: 4, prevX: null, prevY: null, + latestTouchCoods: [], drawFlag: false, oldGCO: null, mouseover: false, @@ -43,7 +44,6 @@ var whiteboard = { var svgLine = null; var svgRect = null; var svgCirle = null; - var latestTouchCoods = null; //background grid (repeating image) and smallest screen indication _this.backgroundGrid = $('
'); // container for background images @@ -76,16 +76,17 @@ var whiteboard = { this.oldGCO = this.ctx.globalCompositeOperation; $(_this.mouseOverlay).on("mousedown touchstart", function (e) { - if (_this.imgDragActive) { + if (_this.imgDragActive || _this.drawFlag) { return; } + _this.drawFlag = true; - _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left)+1; - _this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top)+1; - if (!_this.prevX || !_this.prevY) { + _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1; + _this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top) + 1; + if (!_this.prevX || !_this.prevY || (_this.prevX == 1 && _this.prevY == 1)) { var touche = e.touches[0]; - _this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left+1; - _this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top+1; + _this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1; + _this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1; latestTouchCoods = [_this.prevX, _this.prevY]; } @@ -132,6 +133,7 @@ var whiteboard = { _this.textContainer.on("mousemove touchmove", function (e) { e.preventDefault(); + if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) { return; } @@ -153,8 +155,8 @@ var whiteboard = { var touche = e.touches[0]; currX = touche.clientX - $(_this.mouseOverlay).offset().left; currY = touche.clientY - $(_this.mouseOverlay).offset().top; - latestTouchCoods = [currX, currY]; } + _this.latestTouchCoods = [currX, currY]; if (_this.drawFlag) { if (_this.tool === "pen") { @@ -171,11 +173,11 @@ var whiteboard = { if (_this.tool === "eraser") { var left = currX - _this.thickness; var top = currY - _this.thickness; - _this.ownCursor.css({ "top": top + "px", "left": left + "px" }); + if(_this.ownCursor) _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" }); + if(_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" }); } else if (_this.tool === "line") { if (svgLine) { if (_this.pressedKeys.shift) { @@ -227,9 +229,10 @@ var whiteboard = { _this.ctx.globalCompositeOperation = _this.oldGCO; var currX = (e.offsetX || e.pageX - $(e.target).offset().left); var currY = (e.offsetY || e.pageY - $(e.target).offset().top); - if ((!currX || !currY) && e.touches[0]) { - currX = latestTouchCoods[0]; - currY = latestTouchCoods[1]; + + if (!currX || !currY) { + currX = _this.latestTouchCoods[0]; + currY = _this.latestTouchCoods[1]; _this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username }); } @@ -319,7 +322,7 @@ var whiteboard = { _this.drawFlag = false; _this.mouseover = false; _this.ctx.globalCompositeOperation = _this.oldGCO; - _this.ownCursor.remove(); + if(_this.ownCursor) _this.ownCursor.remove(); _this.svgContainer.find("line").remove(); _this.svgContainer.find("rect").remove(); _this.svgContainer.find("circle").remove(); @@ -821,7 +824,7 @@ var whiteboard = { _this.sendFunction(stepData); if (index >= content.length - 1) { //Done with all data _this.drawId++; - if(doneCallback) { + if (doneCallback) { doneCallback(); } }