From 8a1f1b42101fdac810b096122a6fd43cc1ab45c8 Mon Sep 17 00:00:00 2001
From: Florent Chehab <perso@floflo.ch>
Date: Sat, 2 May 2020 13:02:16 +0200
Subject: [PATCH] feat(frontend): reduce the number of cursor messages sent

* require a minimum position / time variation between emitions
---
 src/js/whiteboard.js | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index 735a516..4942af1 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -39,6 +39,9 @@ const whiteboard = {
         sendFunction: null,
         backgroundGridUrl: './images/KtEBa2.png'
     },
+    lastPointerSentTime: 0,
+    lastPointerX: 0,
+    lastPointerY: 0,
     loadWhiteboard: function (whiteboardContainer, newSettings) {
         var svgns = "http://www.w3.org/2000/svg";
         var _this = this;
@@ -157,9 +160,19 @@ const whiteboard = {
                 return;
             }
 
-            _this.currX = (e.offsetX || e.pageX - $(e.target).offset().left);
-            _this.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 currX = (e.offsetX || e.pageX - $(e.target).offset().left);
+            var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
+
+            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) {
@@ -384,7 +397,16 @@ const whiteboard = {
             _this.prevX = currX;
             _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 });
+            }
+        }
     },
     triggerMouseOver: function () {
         var _this = this;
@@ -638,7 +660,16 @@ const whiteboard = {
             if ($(e.target).hasClass("removeIcon")) {
                 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.textContainer.append(textBox);
         textBox.draggable({