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

feat(frontend): reduce the number of cursor messages sent 

* require a minimum position / time variation between emitions
This commit is contained in:
Florent Chehab 2020-05-02 13:02:16 +02:00
parent db89dd819b
commit 8a1f1b4210
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/js/whiteboard.js
View File

@ -39,6 +39,9 @@ const whiteboard = {
sendFunction: null, sendFunction: null,
backgroundGridUrl: './images/KtEBa2.png' backgroundGridUrl: './images/KtEBa2.png'
}, },
lastPointerSentTime: 0,
lastPointerX: 0,
lastPointerY: 0,
loadWhiteboard: function (whiteboardContainer, newSettings) { loadWhiteboard: function (whiteboardContainer, newSettings) {
var svgns = "http://www.w3.org/2000/svg"; var svgns = "http://www.w3.org/2000/svg";
var _this = this; var _this = this;
@ -157,9 +160,19 @@ const whiteboard = {
return; return;
} }
_this.currX = (e.offsetX || e.pageX - $(e.target).offset().left); var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
_this.currY = (e.offsetY || e.pageY - $(e.target).offset().top); var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
_this.sendFunction({ "t": "cursor", "event": "move", "d": [_this.currX, _this.currY], "username": _this.settings.username });
var pointerSentTime = (new Date()).getTime();
if (pointerSentTime - _this.lastPointerSentTime > 100) {
var dist = Math.pow(_this.lastPointerX-currX,2)+Math.pow(_this.lastPointerY-currY,2);
if (dist>100) {
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerX = currX;
_this.lastPointerY = currY;
_this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
}
}
}) })
_this.mouseOverlay.on("mousemove touchmove", function (e) { _this.mouseOverlay.on("mousemove touchmove", function (e) {
@ -384,7 +397,16 @@ const whiteboard = {
_this.prevX = currX; _this.prevX = currX;
_this.prevY = currY; _this.prevY = currY;
}); });
var pointerSentTime = (new Date()).getTime();
if (pointerSentTime - _this.lastPointerSentTime > 100) {
var dist = Math.pow(_this.lastPointerX-currX,2)+Math.pow(_this.lastPointerY-currY,2);
if (dist>100) {
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerX = currX;
_this.lastPointerY = currY;
_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 });
}
}
}, },
triggerMouseOver: function () { triggerMouseOver: function () {
var _this = this; var _this = this;
@ -638,7 +660,16 @@ const whiteboard = {
if ($(e.target).hasClass("removeIcon")) { if ($(e.target).hasClass("removeIcon")) {
currX += textBox.width() - 4; currX += textBox.width() - 4;
} }
var pointerSentTime = (new Date()).getTime();
if (pointerSentTime - _this.lastPointerSentTime > 100) {
var dist = Math.pow(_this.lastPointerX-currX,2)+Math.pow(_this.lastPointerY-currY,2);
if (dist>100) {
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerX = currX;
_this.lastPointerY = currY;
_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 });
}
}
}) })
this.textContainer.append(textBox); this.textContainer.append(textBox);
textBox.draggable({ textBox.draggable({