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

refacto(frontend): use new Point class

Browse Source 
* standardized pos from event
* Also transformed some vars into const
This commit is contained in:
Florent Chehab 2020-05-02 23:44:42 +02:00
parent 9933930a73
commit dde88ae2fb
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
3 changed files with 194 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/js/classes/Point.js
View File

@ -6,11 +6,66 @@ class Point {
* @param {number} y * @param {number} y
*/ */
constructor(x, 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 * @param {Point} otherPoint
* @returns {number} * @returns {number}
*/ */

2
src/js/utils.js
View File

@ -1,5 +1,5 @@
/** /**
* Compute the distance between two points * Compute the euclidean distance between two points
* @param {Point} p1 * @param {Point} p1
* @param {Point} p2 * @param {Point} p2
*/ */

277
src/js/whiteboard.js
View File

@ -1,5 +1,5 @@
import { dom } from "@fortawesome/fontawesome-svg-core"; import {dom} from "@fortawesome/fontawesome-svg-core";
import {computeDist, getCurrentTimeMs} from "./utils"; import {getCurrentTimeMs} from "./utils";
import Point from "./classes/Point"; import Point from "./classes/Point";
import {POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA, POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA} from "./const"; import {POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA, POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA} from "./const";
import ReadOnlyService from "./services/ReadOnlyService"; import ReadOnlyService from "./services/ReadOnlyService";
@ -11,11 +11,14 @@ const whiteboard = {
previousToolHtmlElem: null, // useful for handling read-only mode previousToolHtmlElem: null, // useful for handling read-only mode
tool: "mouse", tool: "mouse",
thickness: 4, thickness: 4,
prevX: null, //prev Mouse position /**
prevY: null, * @type Point
currX : null, //current Mouse position */
currY : null, prevPos: new Point(0, 0),
latestTouchCoods: [], /**
* @type Point
*/
startCoords: new Point(0, 0),
drawFlag: false, drawFlag: false,
oldGCO: null, oldGCO: null,
mouseover: false, mouseover: false,
@ -27,7 +30,6 @@ const whiteboard = {
svgContainer: null, //For draw prev svgContainer: null, //For draw prev
mouseOverlay: null, mouseOverlay: null,
ownCursor: null, ownCursor: null,
startCoords: [],
penSmoothLastCoords: [], penSmoothLastCoords: [],
svgLine: null, svgLine: null,
svgRect: null, svgRect: null,
@ -50,9 +52,9 @@ const whiteboard = {
*/ */
lastPointerPosition: new Point(0, 0), lastPointerPosition: new Point(0, 0),
loadWhiteboard: function (whiteboardContainer, newSettings) { loadWhiteboard: function (whiteboardContainer, newSettings) {
var svgns = "http://www.w3.org/2000/svg"; const svgns = "http://www.w3.org/2000/svg";
var _this = this; const _this = this;
for (var i in newSettings) { for (const i in newSettings) {
this.settings[i] = newSettings[i]; this.settings[i] = newSettings[i];
} }
this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, ''); this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, '');
@ -73,7 +75,7 @@ const whiteboard = {
// container for texts by users // container for texts by users
_this.textContainer = $('<div class="textcontainer" style="position: absolute; left:0px; top:0; height: 100%; width: 100%; cursor:text;"></div>'); _this.textContainer = $('<div class="textcontainer" style="position: absolute; left:0px; top:0; height: 100%; width: 100%; cursor:text;"></div>');
// mouse overlay for draw callbacks // mouse overlay for draw callbacks
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>'); _this.mouseOverlay = $('<div id="mouseOverlay" style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
$(whiteboardContainer).append(_this.backgroundGrid) $(whiteboardContainer).append(_this.backgroundGrid)
.append(_this.imgContainer) .append(_this.imgContainer)
@ -93,12 +95,12 @@ const whiteboard = {
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.oldGCO = this.ctx.globalCompositeOperation; this.oldGCO = this.ctx.globalCompositeOperation;
$(window).resize(function () { //Handel resize $(window).resize(function () { // Handel resize
var dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); //Copy the buffer const dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); // Copy the buffer
_this.canvas.width = $(window).width(); _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.drawBuffer = [];
_this.loadData(dbCp); //draw old content in _this.loadData(dbCp); // draw old content in
}); });
$(_this.mouseOverlay).on("mousedown touchstart", function (e) { $(_this.mouseOverlay).on("mousedown touchstart", function (e) {
@ -112,29 +114,23 @@ const whiteboard = {
if (ReadOnlyService.readOnlyActive) return; if (ReadOnlyService.readOnlyActive) return;
_this.drawFlag = true; _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; const currentPos = Point.fromEvent(e);
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];
}
if (_this.tool === "pen") { 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") { } else if (_this.tool === "eraser") {
_this.drawEraserLine(_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.thickness); _this.drawEraserLine(currentPos.x, currentPos.y, currentPos.x, currentPos.y, _this.thickness);
_this.sendFunction({ "t": _this.tool, "d": [_this.prevX, _this.prevY, _this.prevX, _this.prevY], "th": _this.thickness }); _this.sendFunction({ "t": _this.tool, "d": [currentPos.x, currentPos.y, currentPos.x, currentPos.y], "th": _this.thickness });
} else if (_this.tool === "line") { } else if (_this.tool === "line") {
_this.startCoords = [_this.prevX, _this.prevY]; _this.startCoords = currentPos;
_this.svgLine = document.createElementNS(svgns, 'line'); _this.svgLine = document.createElementNS(svgns, 'line');
_this.svgLine.setAttribute('stroke', 'gray'); _this.svgLine.setAttribute('stroke', 'gray');
_this.svgLine.setAttribute('stroke-dasharray', '5, 5'); _this.svgLine.setAttribute('stroke-dasharray', '5, 5');
_this.svgLine.setAttribute('x1', _this.prevX); _this.svgLine.setAttribute('x1', currentPos.x);
_this.svgLine.setAttribute('y1', _this.prevY); _this.svgLine.setAttribute('y1', currentPos.y);
_this.svgLine.setAttribute('x2', _this.prevX); _this.svgLine.setAttribute('x2', currentPos.x);
_this.svgLine.setAttribute('y2', _this.prevY); _this.svgLine.setAttribute('y2', currentPos.y);
_this.svgContainer.append(_this.svgLine); _this.svgContainer.append(_this.svgLine);
} else if (_this.tool === "rect" || _this.tool === "recSelect") { } else if (_this.tool === "rect" || _this.tool === "recSelect") {
_this.svgContainer.find("rect").remove(); _this.svgContainer.find("rect").remove();
@ -142,25 +138,27 @@ const whiteboard = {
_this.svgRect.setAttribute('stroke', 'gray'); _this.svgRect.setAttribute('stroke', 'gray');
_this.svgRect.setAttribute('stroke-dasharray', '5, 5'); _this.svgRect.setAttribute('stroke-dasharray', '5, 5');
_this.svgRect.setAttribute('style', 'fill-opacity:0.0;'); _this.svgRect.setAttribute('style', 'fill-opacity:0.0;');
_this.svgRect.setAttribute('x', _this.prevX); _this.svgRect.setAttribute('x', currentPos.x);
_this.svgRect.setAttribute('y', _this.prevY); _this.svgRect.setAttribute('y', currentPos.y);
_this.svgRect.setAttribute('width', 0); _this.svgRect.setAttribute('width', 0);
_this.svgRect.setAttribute('height', 0); _this.svgRect.setAttribute('height', 0);
_this.svgContainer.append(_this.svgRect); _this.svgContainer.append(_this.svgRect);
_this.startCoords = [_this.prevX, _this.prevY]; _this.startCoords = currentPos;
} else if (_this.tool === "circle") { } else if (_this.tool === "circle") {
_this.svgCirle = document.createElementNS(svgns, 'circle'); _this.svgCirle = document.createElementNS(svgns, 'circle');
_this.svgCirle.setAttribute('stroke', 'gray'); _this.svgCirle.setAttribute('stroke', 'gray');
_this.svgCirle.setAttribute('stroke-dasharray', '5, 5'); _this.svgCirle.setAttribute('stroke-dasharray', '5, 5');
_this.svgCirle.setAttribute('style', 'fill-opacity:0.0;'); _this.svgCirle.setAttribute('style', 'fill-opacity:0.0;');
_this.svgCirle.setAttribute('cx', _this.prevX); _this.svgCirle.setAttribute('cx', currentPos.x);
_this.svgCirle.setAttribute('cy', _this.prevY); _this.svgCirle.setAttribute('cy', currentPos.y);
_this.svgCirle.setAttribute('r', 0); _this.svgCirle.setAttribute('r', 0);
_this.svgContainer.append(_this.svgCirle); _this.svgContainer.append(_this.svgCirle);
_this.startCoords = [_this.prevX, _this.prevY]; _this.startCoords = currentPos;
}
} }
_this.prevPos = currentPos;
};
_this.textContainer.on("mousemove touchmove", function (e) { _this.textContainer.on("mousemove touchmove", function (e) {
e.preventDefault(); e.preventDefault();
@ -169,16 +167,14 @@ const whiteboard = {
} }
if (ReadOnlyService.readOnlyActive) return; if (ReadOnlyService.readOnlyActive) return;
const currX = (e.offsetX || e.pageX - $(e.target).offset().left); const currentPos = Point.fromEvent(e);
const currY = (e.offsetY || e.pageY - $(e.target).offset().top);
const newPointerPosition = new Point(currX, currY);
const pointerSentTime = getCurrentTimeMs(); const pointerSentTime = getCurrentTimeMs();
if (pointerSentTime - _this.lastPointerSentTime > POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA) { 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.lastPointerSentTime = pointerSentTime;
_this.lastPointerPosition = newPointerPosition; _this.lastPointerPosition = currentPos;
_this.sendFunction({ "t": "cursor", "event": "move", "d": [newPointerPosition.x, newPointerPosition.y], "username": _this.settings.username }); _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.drawFlag = false;
_this.drawId++; _this.drawId++;
_this.ctx.globalCompositeOperation = _this.oldGCO; _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) { let currentPos = Point.fromEvent(e);
currX = _this.latestTouchCoods[0];
currY = _this.latestTouchCoods[1]; if (currentPos.isZeroZero) {
_this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username }); _this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username });
} }
if (_this.tool === "line") { if (_this.tool === "line") {
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
var angs = _this.getRoundedAngles(currX, currY); currentPos = _this.getRoundedAngles(currentPos);
currX = angs.x;
currY = angs.y;
} }
_this.drawPenLine(currX, currY, _this.startCoords[0], _this.startCoords[1], _this.drawcolor, _this.thickness); _this.drawPenLine(currentPos.x, currentPos.y, _this.startCoords.x, _this.startCoords.y, _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.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(); _this.svgContainer.find("line").remove();
} else if (_this.tool === "pen") { } else if (_this.tool === "pen") {
_this.drawId--; _this.drawId--;
_this.pushPointSmoothPen(currX, currY); _this.pushPointSmoothPen(currentPos.x, currentPos.y);
_this.drawId++; _this.drawId++;
} else if (_this.tool === "rect") { } else if (_this.tool === "rect") {
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { if ((currentPos.x - _this.startCoords.x) * (currentPos.y - _this.startCoords.y) > 0) {
currY = _this.startCoords[1] + (currX - _this.startCoords[0]); currentPos = new Point(currentPos.x, _this.startCoords.y + (currentPos.x - _this.startCoords.x));
} else { } 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.drawRec(_this.startCoords.x, _this.startCoords.y, currentPos.x, currentPos.y, _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.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(); _this.svgContainer.find("rect").remove();
} else if (_this.tool === "circle") { } else if (_this.tool === "circle") {
var a = currX - _this.startCoords[0]; const r = currentPos.distTo(_this.startCoords);
var b = currY - _this.startCoords[1]; _this.drawCircle(_this.startCoords.x, _this.startCoords.y, r, _this.drawcolor, _this.thickness);
var r = Math.sqrt(a * a + b * b); _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords.x, _this.startCoords.y, r], "c": _this.drawcolor, "th": _this.thickness });
_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 });
_this.svgContainer.find("circle").remove(); _this.svgContainer.find("circle").remove();
} else if (_this.tool === "recSelect") { } else if (_this.tool === "recSelect") {
_this.imgDragActive = true; _this.imgDragActive = true;
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { if ((currentPos.x - _this.startCoords.x) * (currentPos.y - _this.startCoords.y) > 0) {
currY = _this.startCoords[1] + (currX - _this.startCoords[0]); currentPos = new Point(currentPos.x, _this.startCoords.y + (currentPos.x - _this.startCoords.x));
} else { } 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); const width = Math.abs(_this.startCoords.x - currentPos.x);
var height = Math.abs(_this.startCoords[1] - currY); const height = Math.abs(_this.startCoords.y - currentPos.y);
var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX; const left = _this.startCoords.x < currentPos.x ? _this.startCoords.x : currentPos.x;
var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY; const top = _this.startCoords.y < currentPos.y ? _this.startCoords.y : currentPos.y;
_this.mouseOverlay.css({ "cursor": "default" }); _this.mouseOverlay.css({ "cursor": "default" });
var imgDiv = $('<div class="dragMe" style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; border: 2px dotted gray; overflow: hidden; height:' + height + 'px;" cursor:move;">' + const imgDiv = $(```<div class="dragMe" style="position:absolute; left: ${left}px; top: ${top}px; width: ${width}px; border: 2px dotted gray; overflow: hidden; height: ${height}px;" cursor:move;">
'<canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="' + width + '" height="' + height + '"/>' + <canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="${width}" height="${height}"/>
'<div style="position:absolute; right:5px; top:3px;">' + <div style="position:absolute; right:5px; top:3px;">
'<button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button> ' + <button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button>
'<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' + <button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>
'</div>' + </div>
'</div>'); </div>```);
var dragCanvas = $(imgDiv).find("canvas"); const dragCanvas = $(imgDiv).find("canvas");
var dragOutOverlay = $('<div class="dragOutOverlay" style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; background:white;"></div>'); const dragOutOverlay = $(`<div class="dragOutOverlay" style="position:absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; background:white;"></div>`);
_this.mouseOverlay.append(dragOutOverlay); _this.mouseOverlay.append(dragOutOverlay);
_this.mouseOverlay.append(imgDiv); _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); destCanvasContext.drawImage(_this.canvas, left, top, width, height, 0, 0, width, height);
imgDiv.find(".xCanvasBtn").click(function () { imgDiv.find(".xCanvasBtn").click(function () {
_this.imgDragActive = false; _this.imgDragActive = false;
@ -279,9 +269,9 @@ const whiteboard = {
imgDiv.find(".addToCanvasBtn").click(function () { imgDiv.find(".addToCanvasBtn").click(function () {
_this.imgDragActive = false; _this.imgDragActive = false;
_this.refreshCursorAppearance(); _this.refreshCursorAppearance();
var p = imgDiv.position(); const p = imgDiv.position();
var leftT = Math.round(p.left * 100) / 100; const leftT = Math.round(p.left * 100) / 100;
var topT = Math.round(p.top * 100) / 100; const topT = Math.round(p.top * 100) / 100;
_this.drawId++; _this.drawId++;
_this.sendFunction({ "t": _this.tool, "d": [left, top, leftT, topT, width, height] }); _this.sendFunction({ "t": _this.tool, "d": [left, top, leftT, topT, width, height] });
_this.dragCanvasRectContent(left, top, leftT, topT, width, height); _this.dragCanvasRectContent(left, top, leftT, topT, width, height);
@ -303,93 +293,96 @@ const whiteboard = {
_this.triggerMouseOver(); _this.triggerMouseOver();
}); });
//On textcontainer click (Add a new textbox) // On text container click (Add a new textbox)
_this.textContainer.on("click", function (e) { _this.textContainer.on("click", function (e) {
var currX = (e.offsetX || e.pageX - $(e.target).offset().left); const currentPos = Point.fromEvent(e);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top); const fontsize = _this.thickness * 0.5;
var fontsize = _this.thickness * 0.5; const txId = 'tx' + (+new Date());
var txId = 'tx' + (+new Date()); _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId] });
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] }); _this.addTextBox(_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId, true);
_this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
}); });
}, },
getRoundedAngles: function (currX, currY) { //For drawing lines at 0,45,90° .... /**
var _this = this; * For drawing lines at 0,45,90° ....
var x = currX - _this.startCoords[0]; * @param {Point} currentPos
var y = currY - _this.startCoords[1]; * @returns {Point}
var angle = Math.atan2(x, y) * (180 / Math.PI); */
var angle45 = Math.round(angle / 45) * 45; getRoundedAngles: function (currentPos) {
if (angle45 % 90 == 0) { const _this = this;
if (Math.abs(currX - _this.startCoords[0]) > Math.abs(currY - _this.startCoords[1])) { const x = currentPos.x - _this.startCoords.x;
currY = _this.startCoords[1] 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 { } else {
currX = _this.startCoords[0] outX = _this.startCoords.x
} }
} else { } else {
if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { if ((currentPos.y - _this.startCoords.y) * (currentPos.x - _this.startCoords.x) > 0) {
currX = _this.startCoords[0] + (currY - _this.startCoords[1]); outX = _this.startCoords.x + (currentPos.y - _this.startCoords.y);
} else { } 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) { triggerMouseMove: function (e) {
var _this = this; const _this = this;
if (_this.imgDragActive) { if (_this.imgDragActive) {
return; 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 () { window.requestAnimationFrame(function () {
if ((!currX || !currY) && e.touches && e.touches[0]) { // update position
var touche = e.touches[0]; currentPos = Point.fromEvent(e);
currX = touche.clientX - $(_this.mouseOverlay).offset().left;
currY = touche.clientY - $(_this.mouseOverlay).offset().top;
}
_this.latestTouchCoods = [currX, currY];
if (_this.drawFlag) { if (_this.drawFlag) {
if (_this.tool === "pen") { if (_this.tool === "pen") {
_this.pushPointSmoothPen(currX, currY); _this.pushPointSmoothPen(currentPos.x, currentPos.y);
} else if (_this.tool == "eraser") { } else if (_this.tool === "eraser") {
_this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness); _this.drawEraserLine(currentPos.x, currentPos.y, _this.prevPos.x, _this.prevPos.y, _this.thickness);
_this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "th": _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") { if (_this.tool === "eraser") {
var left = currX - _this.thickness; const left = currentPos.x - _this.thickness;
var top = currY - _this.thickness; const top = currentPos.y - _this.thickness;
if (_this.ownCursor) _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") { } else if (_this.tool === "pen") {
var left = currX - _this.thickness / 2; const left = currentPos.x - _this.thickness / 2;
var top = currY - _this.thickness / 2; const top = currentPos.y - _this.thickness / 2;
if (_this.ownCursor) _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") { } else if (_this.tool === "line") {
if (_this.svgLine) { if (_this.svgLine) {
let posToUse = currentPos;
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
var angs = _this.getRoundedAngles(currX, currY); posToUse = _this.getRoundedAngles(currentPos);
currX = angs.x;
currY = angs.y;
} }
_this.svgLine.setAttribute('x2', currX); _this.svgLine.setAttribute('x2', posToUse.x);
_this.svgLine.setAttribute('y2', currY); _this.svgLine.setAttribute('y2', posToUse.y);
} }
} else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) { } else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) {
if (_this.svgRect) { if (_this.svgRect) {
var width = Math.abs(currX - _this.startCoords[0]); const width = Math.abs(currentPos.x - _this.startCoords.x);
var height = Math.abs(currY - _this.startCoords[1]); let height = Math.abs(currentPos.y - _this.startCoords.y);
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
height = width; height = width;
var x = currX < _this.startCoords[0] ? _this.startCoords[0] - width : _this.startCoords[0]; const x = currentPos.x < _this.startCoords.x ? _this.startCoords.x - width : _this.startCoords.x;
var y = currY < _this.startCoords[1] ? _this.startCoords[1] - width : _this.startCoords[1]; const y = currentPos.y < _this.startCoords.y ? _this.startCoords.y - width : _this.startCoords.y;
_this.svgRect.setAttribute('x', x); _this.svgRect.setAttribute('x', x);
_this.svgRect.setAttribute('y', y); _this.svgRect.setAttribute('y', y);
} else { } else {
var x = currX < _this.startCoords[0] ? currX : _this.startCoords[0]; const x = currentPos.x < _this.startCoords.x ? currentPos.x : _this.startCoords.x;
var y = currY < _this.startCoords[1] ? currY : _this.startCoords[1]; const y = currentPos.y < _this.startCoords.y ? currentPos.y : _this.startCoords.y;
_this.svgRect.setAttribute('x', x); _this.svgRect.setAttribute('x', x);
_this.svgRect.setAttribute('y', y); _this.svgRect.setAttribute('y', y);
} }
@ -398,20 +391,18 @@ const whiteboard = {
_this.svgRect.setAttribute('height', height); _this.svgRect.setAttribute('height', height);
} }
} else if (_this.tool === "circle") { } else if (_this.tool === "circle") {
var a = currX - _this.startCoords[0]; const r = currentPos.distTo(_this.startCoords);
var b = currY - _this.startCoords[1];
var r = Math.sqrt(a * a + b * b);
if (_this.svgCirle) { if (_this.svgCirle) {
_this.svgCirle.setAttribute('r', r); _this.svgCirle.setAttribute('r', r);
} }
} }
_this.prevX = currX;
_this.prevY = currY; _this.prevPos = currentPos;
}); });
const pointerSentTime = getCurrentTimeMs(); const pointerSentTime = getCurrentTimeMs();
if (pointerSentTime - _this.lastPointerSentTime > POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA) { 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) { if (_this.lastPointerPosition.distTo(newPointerPosition) > POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA) {
_this.lastPointerSentTime = pointerSentTime; _this.lastPointerSentTime = pointerSentTime;
_this.lastPointerPosition = newPointerPosition; _this.lastPointerPosition = newPointerPosition;
@ -453,10 +444,10 @@ const whiteboard = {
_this.sendFunction({ "t": "cursor", "event": "out" }); _this.sendFunction({ "t": "cursor", "event": "out" });
}, },
redrawMouseCursor: function () { redrawMouseCursor: function () {
var _this = this; const _this = this;
_this.triggerMouseOut(); _this.triggerMouseOut();
_this.triggerMouseOver(); _this.triggerMouseOver();
_this.triggerMouseMove({ currX: whiteboard.prevX, currY: whiteboard.prevY }); _this.triggerMouseMove({ offsetX: _this.prevPos.x, offsetY: _this.prevPos.y });
}, },
delKeyAction: function () { delKeyAction: function () {
var _this = this; var _this = this;