From dde88ae2fb42b64aca5e89b317184ce7b1d04da8 Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Sat, 2 May 2020 23:44:42 +0200 Subject: [PATCH] refacto(frontend): use new Point class * standardized pos from event * Also transformed some vars into const --- src/js/classes/Point.js | 59 ++++++++- src/js/utils.js | 2 +- src/js/whiteboard.js | 281 +++++++++++++++++++--------------------- 3 files changed, 194 insertions(+), 148 deletions(-) diff --git a/src/js/classes/Point.js b/src/js/classes/Point.js index 1140f1c..c7ec8cf 100644 --- a/src/js/classes/Point.js +++ b/src/js/classes/Point.js @@ -6,11 +6,66 @@ class Point { * @param {number} y */ constructor(x, y) { - this.x = x; - this.y = y; + /** + * @type {number} + * @private + */ + this._x = x; + + /** + * @type {number} + * @private + */ + this._y = y; + } + + get x() { + return this._x; + } + + get y() { + return this._y; + } + + get isZeroZero() { + return this._x === 0 && this._y === 0; } /** + * Get a Point object from an event + * @param {event} e + * @returns {Point} + */ + static fromEvent(e) { + // the epsilon hack is required to detect touches + const epsilon = 0.0001; + let x = (e.offsetX || e.pageX - $(e.target).offset().left) + epsilon; + let y = (e.offsetY || e.pageY - $(e.target).offset().top) + epsilon; + + if (Number.isNaN(x) || Number.isNaN(y) || (x === epsilon && y === epsilon)) { // if it's a touch actually + if (e.touches && e.touches.length && e.touches.length > 0) { + const touch = e.touches[0]; + x = touch.clientX - $("#mouseOverlay").offset().left; + y = touch.clientY - $("#mouseOverlay").offset().top; + } else { + // if it's a touchend event + return Point._lastKnownPos; + } + } + + Point._lastKnownPos = new Point(x - epsilon, y - epsilon); + return Point._lastKnownPos; + } + + /** + * @type {Point} + * @private + */ + static _lastKnownPos = new Point(0, 0); + + /** + * Compute euclidean distance between points + * * @param {Point} otherPoint * @returns {number} */ diff --git a/src/js/utils.js b/src/js/utils.js index 6bb1bd4..f08aed0 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -1,5 +1,5 @@ /** - * Compute the distance between two points + * Compute the euclidean distance between two points * @param {Point} p1 * @param {Point} p2 */ diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js index 57bac41..1ba3f0d 100644 --- a/src/js/whiteboard.js +++ b/src/js/whiteboard.js @@ -1,5 +1,5 @@ -import { dom } from "@fortawesome/fontawesome-svg-core"; -import {computeDist, getCurrentTimeMs} from "./utils"; +import {dom} from "@fortawesome/fontawesome-svg-core"; +import {getCurrentTimeMs} from "./utils"; import Point from "./classes/Point"; import {POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA, POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA} from "./const"; import ReadOnlyService from "./services/ReadOnlyService"; @@ -11,11 +11,14 @@ const whiteboard = { previousToolHtmlElem: null, // useful for handling read-only mode tool: "mouse", thickness: 4, - prevX: null, //prev Mouse position - prevY: null, - currX : null, //current Mouse position - currY : null, - latestTouchCoods: [], + /** + * @type Point + */ + prevPos: new Point(0, 0), + /** + * @type Point + */ + startCoords: new Point(0, 0), drawFlag: false, oldGCO: null, mouseover: false, @@ -27,7 +30,6 @@ const whiteboard = { svgContainer: null, //For draw prev mouseOverlay: null, ownCursor: null, - startCoords: [], penSmoothLastCoords: [], svgLine: null, svgRect: null, @@ -50,9 +52,9 @@ const whiteboard = { */ lastPointerPosition: new Point(0, 0), loadWhiteboard: function (whiteboardContainer, newSettings) { - var svgns = "http://www.w3.org/2000/svg"; - var _this = this; - for (var i in newSettings) { + const svgns = "http://www.w3.org/2000/svg"; + const _this = this; + for (const i in newSettings) { this.settings[i] = newSettings[i]; } this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, ''); @@ -73,7 +75,7 @@ const whiteboard = { // container for texts by users _this.textContainer = $('
'); // mouse overlay for draw callbacks - _this.mouseOverlay = $('
'); + _this.mouseOverlay = $('
'); $(whiteboardContainer).append(_this.backgroundGrid) .append(_this.imgContainer) @@ -93,12 +95,12 @@ const whiteboard = { this.ctx = this.canvas.getContext("2d"); this.oldGCO = this.ctx.globalCompositeOperation; - $(window).resize(function () { //Handel resize - var dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); //Copy the buffer + $(window).resize(function () { // Handel resize + const dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); // Copy the buffer _this.canvas.width = $(window).width(); - _this.canvas.height = $(window).height(); //Set new canvas height + _this.canvas.height = $(window).height(); // Set new canvas height _this.drawBuffer = []; - _this.loadData(dbCp); //draw old content in + _this.loadData(dbCp); // draw old content in }); $(_this.mouseOverlay).on("mousedown touchstart", function (e) { @@ -112,29 +114,23 @@ const whiteboard = { if (ReadOnlyService.readOnlyActive) 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 == 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.latestTouchCoods = [_this.prevX, _this.prevY]; - } + + const currentPos = Point.fromEvent(e); if (_this.tool === "pen") { - _this.penSmoothLastCoords = [_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.prevX, _this.prevY] + _this.penSmoothLastCoords = [currentPos.x, currentPos.y, currentPos.x, currentPos.y, currentPos.x, currentPos.y] } else if (_this.tool === "eraser") { - _this.drawEraserLine(_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.thickness); - _this.sendFunction({ "t": _this.tool, "d": [_this.prevX, _this.prevY, _this.prevX, _this.prevY], "th": _this.thickness }); + _this.drawEraserLine(currentPos.x, currentPos.y, currentPos.x, currentPos.y, _this.thickness); + _this.sendFunction({ "t": _this.tool, "d": [currentPos.x, currentPos.y, currentPos.x, currentPos.y], "th": _this.thickness }); } else if (_this.tool === "line") { - _this.startCoords = [_this.prevX, _this.prevY]; + _this.startCoords = currentPos; _this.svgLine = document.createElementNS(svgns, 'line'); _this.svgLine.setAttribute('stroke', 'gray'); _this.svgLine.setAttribute('stroke-dasharray', '5, 5'); - _this.svgLine.setAttribute('x1', _this.prevX); - _this.svgLine.setAttribute('y1', _this.prevY); - _this.svgLine.setAttribute('x2', _this.prevX); - _this.svgLine.setAttribute('y2', _this.prevY); + _this.svgLine.setAttribute('x1', currentPos.x); + _this.svgLine.setAttribute('y1', currentPos.y); + _this.svgLine.setAttribute('x2', currentPos.x); + _this.svgLine.setAttribute('y2', currentPos.y); _this.svgContainer.append(_this.svgLine); } else if (_this.tool === "rect" || _this.tool === "recSelect") { _this.svgContainer.find("rect").remove(); @@ -142,24 +138,26 @@ const whiteboard = { _this.svgRect.setAttribute('stroke', 'gray'); _this.svgRect.setAttribute('stroke-dasharray', '5, 5'); _this.svgRect.setAttribute('style', 'fill-opacity:0.0;'); - _this.svgRect.setAttribute('x', _this.prevX); - _this.svgRect.setAttribute('y', _this.prevY); + _this.svgRect.setAttribute('x', currentPos.x); + _this.svgRect.setAttribute('y', currentPos.y); _this.svgRect.setAttribute('width', 0); _this.svgRect.setAttribute('height', 0); _this.svgContainer.append(_this.svgRect); - _this.startCoords = [_this.prevX, _this.prevY]; + _this.startCoords = currentPos; } else if (_this.tool === "circle") { _this.svgCirle = document.createElementNS(svgns, 'circle'); _this.svgCirle.setAttribute('stroke', 'gray'); _this.svgCirle.setAttribute('stroke-dasharray', '5, 5'); _this.svgCirle.setAttribute('style', 'fill-opacity:0.0;'); - _this.svgCirle.setAttribute('cx', _this.prevX); - _this.svgCirle.setAttribute('cy', _this.prevY); + _this.svgCirle.setAttribute('cx', currentPos.x); + _this.svgCirle.setAttribute('cy', currentPos.y); _this.svgCirle.setAttribute('r', 0); _this.svgContainer.append(_this.svgCirle); - _this.startCoords = [_this.prevX, _this.prevY]; + _this.startCoords = currentPos; } - } + + _this.prevPos = currentPos; + }; _this.textContainer.on("mousemove touchmove", function (e) { e.preventDefault(); @@ -169,16 +167,14 @@ const whiteboard = { } if (ReadOnlyService.readOnlyActive) return; - const currX = (e.offsetX || e.pageX - $(e.target).offset().left); - const currY = (e.offsetY || e.pageY - $(e.target).offset().top); - const newPointerPosition = new Point(currX, currY); + const currentPos = Point.fromEvent(e); const pointerSentTime = getCurrentTimeMs(); if (pointerSentTime - _this.lastPointerSentTime > POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA) { - if (_this.lastPointerPosition.distTo(newPointerPosition) > POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA) { + if (_this.lastPointerPosition.distTo(currentPos) > POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA) { _this.lastPointerSentTime = pointerSentTime; - _this.lastPointerPosition = newPointerPosition; - _this.sendFunction({ "t": "cursor", "event": "move", "d": [newPointerPosition.x, newPointerPosition.y], "username": _this.settings.username }); + _this.lastPointerPosition = currentPos; + _this.sendFunction({ "t": "cursor", "event": "move", "d": [currentPos.x, currentPos.y], "username": _this.settings.username }); } } }) @@ -201,74 +197,68 @@ const whiteboard = { _this.drawFlag = false; _this.drawId++; _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) { - currX = _this.latestTouchCoods[0]; - currY = _this.latestTouchCoods[1]; + let currentPos = Point.fromEvent(e); + + if (currentPos.isZeroZero) { _this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username }); } if (_this.tool === "line") { if (_this.pressedKeys.shift) { - var angs = _this.getRoundedAngles(currX, currY); - currX = angs.x; - currY = angs.y; + currentPos = _this.getRoundedAngles(currentPos); } - _this.drawPenLine(currX, currY, _this.startCoords[0], _this.startCoords[1], _this.drawcolor, _this.thickness); - _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.startCoords[0], _this.startCoords[1]], "c": _this.drawcolor, "th": _this.thickness }); + _this.drawPenLine(currentPos.x, currentPos.y, _this.startCoords.x, _this.startCoords.y, _this.drawcolor, _this.thickness); + _this.sendFunction({ "t": _this.tool, "d": [currentPos.x, currentPos.y, _this.startCoords.x, _this.startCoords.y], "c": _this.drawcolor, "th": _this.thickness }); _this.svgContainer.find("line").remove(); } else if (_this.tool === "pen") { - _this.drawId--; - _this.pushPointSmoothPen(currX, currY); - _this.drawId++; + _this.drawId--; + _this.pushPointSmoothPen(currentPos.x, currentPos.y); + _this.drawId++; } else if (_this.tool === "rect") { if (_this.pressedKeys.shift) { - if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { - currY = _this.startCoords[1] + (currX - _this.startCoords[0]); + if ((currentPos.x - _this.startCoords.x) * (currentPos.y - _this.startCoords.y) > 0) { + currentPos = new Point(currentPos.x, _this.startCoords.y + (currentPos.x - _this.startCoords.x)); } else { - currY = _this.startCoords[1] - (currX - _this.startCoords[0]); + currentPos = new Point(currentPos.x, _this.startCoords.y - (currentPos.x - _this.startCoords.x)); } } - _this.drawRec(_this.startCoords[0], _this.startCoords[1], currX, currY, _this.drawcolor, _this.thickness); - _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], currX, currY], "c": _this.drawcolor, "th": _this.thickness }); + _this.drawRec(_this.startCoords.x, _this.startCoords.y, currentPos.x, currentPos.y, _this.drawcolor, _this.thickness); + _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords.x, _this.startCoords.y, currentPos.x, currentPos.y], "c": _this.drawcolor, "th": _this.thickness }); _this.svgContainer.find("rect").remove(); } else if (_this.tool === "circle") { - var a = currX - _this.startCoords[0]; - var b = currY - _this.startCoords[1]; - var r = Math.sqrt(a * a + b * b); - _this.drawCircle(_this.startCoords[0], _this.startCoords[1], r, _this.drawcolor, _this.thickness); - _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], r], "c": _this.drawcolor, "th": _this.thickness }); + const r = currentPos.distTo(_this.startCoords); + _this.drawCircle(_this.startCoords.x, _this.startCoords.y, r, _this.drawcolor, _this.thickness); + _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords.x, _this.startCoords.y, r], "c": _this.drawcolor, "th": _this.thickness }); _this.svgContainer.find("circle").remove(); } else if (_this.tool === "recSelect") { _this.imgDragActive = true; if (_this.pressedKeys.shift) { - if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { - currY = _this.startCoords[1] + (currX - _this.startCoords[0]); + if ((currentPos.x - _this.startCoords.x) * (currentPos.y - _this.startCoords.y) > 0) { + currentPos = new Point(currentPos.x, _this.startCoords.y + (currentPos.x - _this.startCoords.x)); } else { - currY = _this.startCoords[1] - (currX - _this.startCoords[0]); + currentPos = new Point(currentPos.x, _this.startCoords.y - (currentPos.x - _this.startCoords.x)); } } - var width = Math.abs(_this.startCoords[0] - currX); - var height = Math.abs(_this.startCoords[1] - currY); - var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX; - var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY; + const width = Math.abs(_this.startCoords.x - currentPos.x); + const height = Math.abs(_this.startCoords.y - currentPos.y); + const left = _this.startCoords.x < currentPos.x ? _this.startCoords.x : currentPos.x; + const top = _this.startCoords.y < currentPos.y ? _this.startCoords.y : currentPos.y; _this.mouseOverlay.css({ "cursor": "default" }); - var imgDiv = $('
' + - '' + - '
' + - ' ' + - '' + - '
' + - '
'); - var dragCanvas = $(imgDiv).find("canvas"); - var dragOutOverlay = $('
'); + const imgDiv = $(```
+ +
+ + +
+
```); + const dragCanvas = $(imgDiv).find("canvas"); + const dragOutOverlay = $(`
`); _this.mouseOverlay.append(dragOutOverlay); _this.mouseOverlay.append(imgDiv); - var destCanvasContext = dragCanvas[0].getContext('2d'); + const destCanvasContext = dragCanvas[0].getContext('2d'); destCanvasContext.drawImage(_this.canvas, left, top, width, height, 0, 0, width, height); imgDiv.find(".xCanvasBtn").click(function () { _this.imgDragActive = false; @@ -279,9 +269,9 @@ const whiteboard = { imgDiv.find(".addToCanvasBtn").click(function () { _this.imgDragActive = false; _this.refreshCursorAppearance(); - var p = imgDiv.position(); - var leftT = Math.round(p.left * 100) / 100; - var topT = Math.round(p.top * 100) / 100; + const p = imgDiv.position(); + const leftT = Math.round(p.left * 100) / 100; + const topT = Math.round(p.top * 100) / 100; _this.drawId++; _this.sendFunction({ "t": _this.tool, "d": [left, top, leftT, topT, width, height] }); _this.dragCanvasRectContent(left, top, leftT, topT, width, height); @@ -303,93 +293,96 @@ const whiteboard = { _this.triggerMouseOver(); }); - //On textcontainer click (Add a new textbox) + // On text container click (Add a new textbox) _this.textContainer.on("click", function (e) { - var currX = (e.offsetX || e.pageX - $(e.target).offset().left); - var currY = (e.offsetY || e.pageY - $(e.target).offset().top); - var fontsize = _this.thickness * 0.5; - var txId = 'tx' + (+new Date()); - _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] }); - _this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true); + const currentPos = Point.fromEvent(e); + const fontsize = _this.thickness * 0.5; + const txId = 'tx' + (+new Date()); + _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId] }); + _this.addTextBox(_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId, true); }); }, - getRoundedAngles: function (currX, currY) { //For drawing lines at 0,45,90° .... - var _this = this; - var x = currX - _this.startCoords[0]; - var y = currY - _this.startCoords[1]; - var angle = Math.atan2(x, y) * (180 / Math.PI); - var angle45 = Math.round(angle / 45) * 45; - if (angle45 % 90 == 0) { - if (Math.abs(currX - _this.startCoords[0]) > Math.abs(currY - _this.startCoords[1])) { - currY = _this.startCoords[1] + /** + * For drawing lines at 0,45,90° .... + * @param {Point} currentPos + * @returns {Point} + */ + getRoundedAngles: function (currentPos) { + const _this = this; + const x = currentPos.x - _this.startCoords.x; + const y = currentPos.y - _this.startCoords.y; + const angle = Math.atan2(x, y) * (180 / Math.PI); + const angle45 = Math.round(angle / 45) * 45; + + let outX = currentPos.x; + let outY = currentPos.y; + if (angle45 % 90 === 0) { + if (Math.abs(currentPos.x - _this.startCoords.x) > Math.abs(currentPos.y - _this.startCoords.y)) { + outY = _this.startCoords.y } else { - currX = _this.startCoords[0] + outX = _this.startCoords.x } } else { - if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { - currX = _this.startCoords[0] + (currY - _this.startCoords[1]); + if ((currentPos.y - _this.startCoords.y) * (currentPos.x - _this.startCoords.x) > 0) { + outX = _this.startCoords.x + (currentPos.y - _this.startCoords.y); } else { - currX = _this.startCoords[0] - (currY - _this.startCoords[1]); + outY = _this.startCoords.x - (currentPos.y - _this.startCoords.y); } } - return { "x": currX, "y": currY }; + + return new Point(outX, outY); }, triggerMouseMove: function (e) { - var _this = this; + const _this = this; if (_this.imgDragActive) { return; } - var currX = e.currX || (e.offsetX || e.pageX - $(e.target).offset().left); - var currY = e.currY || (e.offsetY || e.pageY - $(e.target).offset().top); + + let currentPos = Point.fromEvent(e); window.requestAnimationFrame(function () { - if ((!currX || !currY) && e.touches && e.touches[0]) { - var touche = e.touches[0]; - currX = touche.clientX - $(_this.mouseOverlay).offset().left; - currY = touche.clientY - $(_this.mouseOverlay).offset().top; - } - _this.latestTouchCoods = [currX, currY]; + // update position + currentPos = Point.fromEvent(e); if (_this.drawFlag) { if (_this.tool === "pen") { - _this.pushPointSmoothPen(currX, currY); - } 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.pushPointSmoothPen(currentPos.x, currentPos.y); + } else if (_this.tool === "eraser") { + _this.drawEraserLine(currentPos.x, currentPos.y, _this.prevPos.x, _this.prevPos.y, _this.thickness); + _this.sendFunction({ "t": _this.tool, "d": [currentPos.x, currentPos.y, _this.prevPos.x, _this.prevPos.y], "th": _this.thickness }); } } if (_this.tool === "eraser") { - var left = currX - _this.thickness; - var top = currY - _this.thickness; + const left = currentPos.x - _this.thickness; + const top = currentPos.y - _this.thickness; 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; + const left = currentPos.x - _this.thickness / 2; + const top = currentPos.y - _this.thickness / 2; if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" }); } else if (_this.tool === "line") { if (_this.svgLine) { + let posToUse = currentPos; if (_this.pressedKeys.shift) { - var angs = _this.getRoundedAngles(currX, currY); - currX = angs.x; - currY = angs.y; + posToUse = _this.getRoundedAngles(currentPos); } - _this.svgLine.setAttribute('x2', currX); - _this.svgLine.setAttribute('y2', currY); + _this.svgLine.setAttribute('x2', posToUse.x); + _this.svgLine.setAttribute('y2', posToUse.y); } } else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) { if (_this.svgRect) { - var width = Math.abs(currX - _this.startCoords[0]); - var height = Math.abs(currY - _this.startCoords[1]); + const width = Math.abs(currentPos.x - _this.startCoords.x); + let height = Math.abs(currentPos.y - _this.startCoords.y); if (_this.pressedKeys.shift) { height = width; - var x = currX < _this.startCoords[0] ? _this.startCoords[0] - width : _this.startCoords[0]; - var y = currY < _this.startCoords[1] ? _this.startCoords[1] - width : _this.startCoords[1]; + const x = currentPos.x < _this.startCoords.x ? _this.startCoords.x - width : _this.startCoords.x; + const y = currentPos.y < _this.startCoords.y ? _this.startCoords.y - width : _this.startCoords.y; _this.svgRect.setAttribute('x', x); _this.svgRect.setAttribute('y', y); } else { - var x = currX < _this.startCoords[0] ? currX : _this.startCoords[0]; - var y = currY < _this.startCoords[1] ? currY : _this.startCoords[1]; + const x = currentPos.x < _this.startCoords.x ? currentPos.x : _this.startCoords.x; + const y = currentPos.y < _this.startCoords.y ? currentPos.y : _this.startCoords.y; _this.svgRect.setAttribute('x', x); _this.svgRect.setAttribute('y', y); } @@ -398,20 +391,18 @@ const whiteboard = { _this.svgRect.setAttribute('height', height); } } else if (_this.tool === "circle") { - var a = currX - _this.startCoords[0]; - var b = currY - _this.startCoords[1]; - var r = Math.sqrt(a * a + b * b); + const r = currentPos.distTo(_this.startCoords); if (_this.svgCirle) { _this.svgCirle.setAttribute('r', r); } } - _this.prevX = currX; - _this.prevY = currY; + + _this.prevPos = currentPos; }); const pointerSentTime = getCurrentTimeMs(); if (pointerSentTime - _this.lastPointerSentTime > POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA) { - const newPointerPosition = new Point(currX, currY); + const newPointerPosition = currentPos; if (_this.lastPointerPosition.distTo(newPointerPosition) > POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA) { _this.lastPointerSentTime = pointerSentTime; _this.lastPointerPosition = newPointerPosition; @@ -453,10 +444,10 @@ const whiteboard = { _this.sendFunction({ "t": "cursor", "event": "out" }); }, redrawMouseCursor: function () { - var _this = this; + const _this = this; _this.triggerMouseOut(); _this.triggerMouseOver(); - _this.triggerMouseMove({ currX: whiteboard.prevX, currY: whiteboard.prevY }); + _this.triggerMouseMove({ offsetX: _this.prevPos.x, offsetY: _this.prevPos.y }); }, delKeyAction: function () { var _this = this;