From 409681b21714454d3d29bbfa9c53fef7c5f6c7b1 Mon Sep 17 00:00:00 2001
From: Florent Chehab <perso@floflo.ch>
Date: Mon, 11 May 2020 11:06:42 +0200
Subject: [PATCH] feat(front): creating throttling service

* ease throttling of events accross the frontend
---
 src/js/services/ThrottlingService.js | 41 +++++++++++++
 src/js/whiteboard.js                 | 91 +++++++++-------------------
 2 files changed, 70 insertions(+), 62 deletions(-)
 create mode 100644 src/js/services/ThrottlingService.js

diff --git a/src/js/services/ThrottlingService.js b/src/js/services/ThrottlingService.js
new file mode 100644
index 0000000..227e78d
--- /dev/null
+++ b/src/js/services/ThrottlingService.js
@@ -0,0 +1,41 @@
+import Point from "../classes/Point";
+import { getCurrentTimeMs } from "../utils";
+import ConfigService from "./ConfigService";
+
+class ThrottlingService {
+    /**
+     * @type {number}
+     * @private
+     */
+    _lastSuccessTime = 0;
+
+    /**
+     * @type {Point}
+     * @private
+     */
+    _lastPointPosition = new Point(0, 0);
+
+    /**
+     * Helper to throttle events based on the configuration.
+     * Only if checks are ok, the onSuccess callback will be called.
+     *
+     * @param {Point} newPosition New point position to base the throttling on
+     * @param {function()} onSuccess Callback called when the throttling is successful
+     */
+    throttle(newPosition, onSuccess) {
+        const newTime = getCurrentTimeMs();
+        const { _lastPointPosition, _lastSuccessTime } = this;
+        if (newTime - _lastSuccessTime > ConfigService.pointerEventsThresholdMinTimeDelta) {
+            if (
+                _lastPointPosition.distTo(newPosition) >
+                ConfigService.pointerEventsThresholdMinDistDelta
+            ) {
+                onSuccess();
+                this._lastPointPosition = newPosition;
+                this._lastSuccessTime = newTime;
+            }
+        }
+    }
+}
+
+export default new ThrottlingService();
diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index e27add6..353add6 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -1,9 +1,8 @@
 import { dom } from "@fortawesome/fontawesome-svg-core";
-import { getCurrentTimeMs } from "./utils";
 import Point from "./classes/Point";
 import ReadOnlyService from "./services/ReadOnlyService";
 import InfoService from "./services/InfoService";
-import ConfigService from "./services/ConfigService";
+import ThrottlingService from "./services/ThrottlingService";
 
 const RAD_TO_DEG = 180.0 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180.0;
@@ -209,25 +208,15 @@ const whiteboard = {
 
             const currentPos = Point.fromEvent(e);
 
-            const pointerSentTime = getCurrentTimeMs();
-            if (
-                pointerSentTime - _this.lastPointerSentTime >
-                ConfigService.pointerEventsThresholdMinTimeDelta
-            ) {
-                if (
-                    _this.lastPointerPosition.distTo(currentPos) >
-                    ConfigService.pointerEventsThresholdMinDistDelta
-                ) {
-                    _this.lastPointerSentTime = pointerSentTime;
-                    _this.lastPointerPosition = currentPos;
-                    _this.sendFunction({
-                        t: "cursor",
-                        event: "move",
-                        d: [currentPos.x, currentPos.y],
-                        username: _this.settings.username,
-                    });
-                }
-            }
+            ThrottlingService.throttle(currentPos, () => {
+                _this.lastPointerPosition = currentPos;
+                _this.sendFunction({
+                    t: "cursor",
+                    event: "move",
+                    d: [currentPos.x, currentPos.y],
+                    username: _this.settings.username,
+                });
+            });
         });
 
         _this.mouseOverlay.on("mousemove touchmove", function (e) {
@@ -541,26 +530,15 @@ const whiteboard = {
             _this.prevPos = currentPos;
         });
 
-        const pointerSentTime = getCurrentTimeMs();
-        if (
-            pointerSentTime - _this.lastPointerSentTime >
-            ConfigService.pointerEventsThresholdMinTimeDelta
-        ) {
-            const newPointerPosition = currentPos;
-            if (
-                _this.lastPointerPosition.distTo(newPointerPosition) >
-                ConfigService.pointerEventsThresholdMinDistDelta
-            ) {
-                _this.lastPointerSentTime = pointerSentTime;
-                _this.lastPointerPosition = newPointerPosition;
-                _this.sendFunction({
-                    t: "cursor",
-                    event: "move",
-                    d: [newPointerPosition.x, newPointerPosition.y],
-                    username: _this.settings.username,
-                });
-            }
-        }
+        ThrottlingService.throttle(currentPos, () => {
+            _this.lastPointerPosition = currentPos;
+            _this.sendFunction({
+                t: "cursor",
+                event: "move",
+                d: [currentPos.x, currentPos.y],
+                username: _this.settings.username,
+            });
+        });
     },
     triggerMouseOver: function () {
         var _this = this;
@@ -877,28 +855,17 @@ const whiteboard = {
                 currX += textBox.width() - 4;
             }
 
-            const pointerSentTime = getCurrentTimeMs();
             const newPointerPosition = new Point(currX, currY);
-            // At least 100 ms between messages to reduce server load
-            if (
-                pointerSentTime - _this.lastPointerSentTime >
-                ConfigService.pointerEventsThresholdMinTimeDelta
-            ) {
-                // Minimal distance between messages to reduce server load
-                if (
-                    _this.lastPointerPosition.distTo(newPointerPosition) >
-                    ConfigService.pointerEventsThresholdMinDistDelta
-                ) {
-                    _this.lastPointerSentTime = pointerSentTime;
-                    _this.lastPointerPosition = newPointerPosition;
-                    _this.sendFunction({
-                        t: "cursor",
-                        event: "move",
-                        d: [newPointerPosition.x, newPointerPosition.y],
-                        username: _this.settings.username,
-                    });
-                }
-            }
+
+            ThrottlingService.throttle(newPointerPosition, () => {
+                _this.lastPointerPosition = newPointerPosition;
+                _this.sendFunction({
+                    t: "cursor",
+                    event: "move",
+                    d: [newPointerPosition.x, newPointerPosition.y],
+                    username: _this.settings.username,
+                });
+            });
         });
         this.textContainer.append(textBox);
         textBox.draggable({