refacto(frontend): clean ES2020 private field with getter

src/js/classes/Point.js

@@ -1,34 +1,41 @@
 import { computeDist } from "../utils";
 
 class Point {
+    /**
+     * @type {number}
+     */
+    #x;
+    get x() {
+        return this.#x;
+    }
+
+    /**
+     * @type {number}
+     */
+    #y;
+    get y() {
+        return this.#y;
+    }
+
+    /**
+     * @type {Point}
+     */
+    static #lastKnownPos = new Point(0, 0);
+    static get lastKnownPos() {
+        return Point.#lastKnownPos;
+    }
+
     /**
      * @param {number} x
      * @param {number} y
      */
     constructor(x, y) {
-        /**
-         * @type {number}
-         * @private
-         */
-        this._x = x;
-
-        /**
-         * @type {number}
-         * @private
-         */
-        this._y = y;
-    }
-
-    get x() {
-        return this._x;
-    }
-
-    get y() {
-        return this._y;
+        this.#x = x;
+        this.#y = y;
     }
 
     get isZeroZero() {
-        return this._x === 0 && this._y === 0;
+        return this.#x === 0 && this.#y === 0;
     }
 
     /**
@@ -50,20 +57,14 @@ class Point {
                 y = touch.clientY - $("#mouseOverlay").offset().top;
             } else {
                 // if it's a touchend event
-                return Point._lastKnownPos;
+                return Point.#lastKnownPos;
             }
         }
 
-        Point._lastKnownPos = new Point(x - epsilon, y - epsilon);
-        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
      *

src/js/services/ConfigService.js

@@ -3,33 +3,43 @@ import { getThrottling } from "./ConfigService.utils";
 class ConfigService {
     /**
      * @type {object}
-     * @private
      */
-    _configFromServer = {};
+    #configFromServer = {};
+    get configFromServer() {
+        return this.#configFromServer;
+    }
 
     /**
-     * @readonly
      * @type {boolean}
      */
-    readOnlyOnWhiteboardLoad = false;
+    #readOnlyOnWhiteboardLoad = false;
+    get readOnlyOnWhiteboardLoad() {
+        return this.#readOnlyOnWhiteboardLoad;
+    }
 
     /**
-     * @readonly
      * @type {boolean}
      */
-    showSmallestScreenIndicator = true;
+    #showSmallestScreenIndicator = true;
+    get showSmallestScreenIndicator() {
+        return this.#showSmallestScreenIndicator;
+    }
 
     /**
-     * @readonly
      * @type {{minDistDelta: number, minTimeDelta: number}}
      */
-    pointerEventsThrottling = { minDistDelta: 0, minTimeDelta: 0 };
+    #pointerEventsThrottling = { minDistDelta: 0, minTimeDelta: 0 };
+    get pointerEventsThrottling() {
+        return this.#pointerEventsThrottling;
+    }
 
     /**
-     * @readonly
      * @type {number}
      */
-    refreshInfoInterval = 1000;
+    #refreshInfoInterval = 1000;
+    get refreshInfoInterval() {
+        return this.#refreshInfoInterval;
+    }
 
     /**
      * Init the service from the config sent by the server
@@ -37,28 +47,30 @@ class ConfigService {
      * @param {object} configFromServer
      */
     initFromServer(configFromServer) {
-        this._configFromServer = configFromServer;
+        this.#configFromServer = configFromServer;
 
         const { common } = configFromServer;
         const { readOnlyOnWhiteboardLoad, showSmallestScreenIndicator, performance } = common;
 
-        this.readOnlyOnWhiteboardLoad = readOnlyOnWhiteboardLoad;
-        this.showSmallestScreenIndicator = showSmallestScreenIndicator;
-        this.refreshInfoInterval = 1000 / performance.refreshInfoFreq;
+        this.#readOnlyOnWhiteboardLoad = readOnlyOnWhiteboardLoad;
+        this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
+        this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
 
         console.log("Whiteboard config from server:", configFromServer, "parsed:", this);
     }
 
     /**
-     * TODO
+     * Refresh config that depends on the number of user connected to whiteboard
+     *
+     * @param {number} nbUser
      */
     refreshNbUserDependant(nbUser) {
-        const { _configFromServer } = this;
-        const { common } = _configFromServer;
+        const { configFromServer } = this;
+        const { common } = configFromServer;
         const { performance } = common;
         const { pointerEventsThrottling } = performance;
 
-        this.pointerEventsThrottling = getThrottling(pointerEventsThrottling, nbUser);
+        this.#pointerEventsThrottling = getThrottling(pointerEventsThrottling, nbUser);
     }
 }
 

src/js/services/InfoService.js

@@ -6,107 +6,127 @@ import ConfigService from "./ConfigService";
 class InfoService {
     /**
      * @type {boolean}
-     * @private
      */
-    _infoAreDisplayed = false;
+    #infoAreDisplayed = false;
+    get infoAreDisplayed() {
+        return this.#infoAreDisplayed;
+    }
 
     /**
      * Holds the number of user connected to the server
      *
      * @type {number}
-     * @readonly
      */
-    nbConnectedUsers = -1;
+    #nbConnectedUsers = -1;
+    get nbConnectedUsers() {
+        return this.#nbConnectedUsers;
+    }
 
     /**
-     *
      * @type {{w: number, h: number}}
-     * @private
      */
-    _smallestScreenResolution = undefined;
+    #smallestScreenResolution = undefined;
+    get smallestScreenResolution() {
+        return this.#smallestScreenResolution;
+    }
 
     /**
      * @type {number}
-     * @private
      */
-    _nbMessagesSent = 0;
+    #nbMessagesSent = 0;
+    get nbMessagesSent() {
+        return this.#nbMessagesSent;
+    }
 
     /**
      * @type {number}
-     * @private
      */
-    _nbMessagesReceived = 0;
+    #nbMessagesReceived = 0;
+    get nbMessagesReceived() {
+        return this.#nbMessagesReceived;
+    }
 
     /**
      * Holds the interval Id
      * @type {number}
-     * @private
      */
-    _refreshInfoIntervalId = undefined;
+    #refreshInfoIntervalId = undefined;
+    get refreshInfoIntervalId() {
+        return this.#refreshInfoIntervalId;
+    }
 
     /**
      * @param {number} nbConnectedUsers
      * @param {{w: number, h: number}} smallestScreenResolution
      */
     updateInfoFromServer({ nbConnectedUsers, smallestScreenResolution = undefined }) {
-        if (this.nbConnectedUsers !== nbConnectedUsers) {
+        if (this.#nbConnectedUsers !== nbConnectedUsers) {
             // Refresh config service parameters on nb connected user change
             ConfigService.refreshNbUserDependant(nbConnectedUsers);
         }
-        this.nbConnectedUsers = nbConnectedUsers;
+        this.#nbConnectedUsers = nbConnectedUsers;
         if (smallestScreenResolution) {
-            this._smallestScreenResolution = smallestScreenResolution;
+            this.#smallestScreenResolution = smallestScreenResolution;
         }
     }
 
-    /**
-     * @returns {(undefined|{w: number, h: number})}
-     */
-    get smallestScreenResolution() {
-        return this._smallestScreenResolution;
-    }
-
     incrementNbMessagesReceived() {
-        this._nbMessagesReceived++;
+        this.#nbMessagesReceived++;
     }
 
     incrementNbMessagesSent() {
-        this._nbMessagesSent++;
+        this.#nbMessagesSent++;
     }
 
     refreshDisplayedInfo() {
-        $("#messageReceivedCount")[0].innerText = String(this._nbMessagesReceived);
-        $("#messageSentCount")[0].innerText = String(this._nbMessagesSent);
-        $("#connectedUsersCount")[0].innerText = String(this.nbConnectedUsers);
-        const { _smallestScreenResolution: ssr } = this;
+        const {
+            nbMessagesReceived,
+            nbMessagesSent,
+            nbConnectedUsers,
+            smallestScreenResolution: ssr,
+        } = this;
+        $("#messageReceivedCount")[0].innerText = String(nbMessagesReceived);
+        $("#messageSentCount")[0].innerText = String(nbMessagesSent);
+        $("#connectedUsersCount")[0].innerText = String(nbConnectedUsers);
         $("#smallestScreenResolution")[0].innerText = ssr ? `(${ssr.w}, ${ssr.h})` : "Unknown";
     }
 
+    /**
+     * Show the info div
+     */
     displayInfo() {
         $("#whiteboardInfoContainer").toggleClass("displayNone", false);
         $("#displayWhiteboardInfoBtn").toggleClass("active", true);
-        this._infoAreDisplayed = true;
+        this.#infoAreDisplayed = true;
 
         this.refreshDisplayedInfo();
-        this._refreshInfoIntervalId = setInterval(() => {
+        this.#refreshInfoIntervalId = setInterval(() => {
             // refresh only on a specific interval to reduce
             // refreshing cost
             this.refreshDisplayedInfo();
         }, ConfigService.refreshInfoInterval);
     }
 
+    /**
+     * Hide the info div
+     */
     hideInfo() {
         $("#whiteboardInfoContainer").toggleClass("displayNone", true);
         $("#displayWhiteboardInfoBtn").toggleClass("active", false);
-        this._infoAreDisplayed = false;
-        if (this._refreshInfoIntervalId) {
-            clearInterval(this._refreshInfoIntervalId);
-            this._refreshInfoIntervalId = undefined;
+        this.#infoAreDisplayed = false;
+        const { refreshInfoIntervalId } = this;
+        if (refreshInfoIntervalId) {
+            clearInterval(refreshInfoIntervalId);
+            this.#refreshInfoIntervalId = undefined;
         }
     }
 
+    /**
+     * Switch between hiding and showing the info div
+     */
     toggleDisplayInfo() {
-        if (this._infoAreDisplayed) {
+        const { infoAreDisplayed } = this;
+        if (infoAreDisplayed) {
             this.hideInfo();
         } else {
             this.displayInfo();

src/js/services/ReadOnlyService.js

@@ -4,23 +4,27 @@
 class ReadOnlyService {
     /**
      * @type {boolean}
-     * @private
      */
-    _readOnlyActive = true;
+    #readOnlyActive = true;
+    get readOnlyActive() {
+        return this.#readOnlyActive;
+    }
 
     /**
      * @type {object}
-     * @private
      */
-    _previousToolHtmlElem = null;
+    #previousToolHtmlElem = null;
+    get previousToolHtmlElem() {
+        return this.#previousToolHtmlElem;
+    }
 
     /**
      * Activate read-only mode
      */
     activateReadOnlyMode() {
-        this._readOnlyActive = true;
+        this.#readOnlyActive = true;
 
-        this._previousToolHtmlElem = $(".whiteboard-tool.active");
+        this.#previousToolHtmlElem = $(".whiteboard-tool.active");
 
         // switch to mouse tool to prevent the use of the
         // other tools
@@ -36,7 +40,7 @@ class ReadOnlyService {
      * Deactivate read-only mode
      */
     deactivateReadOnlyMode() {
-        this._readOnlyActive = false;
+        this.#readOnlyActive = false;
 
         $(".whiteboard-tool").prop("disabled", false);
         $(".whiteboard-edit-group > button").prop("disabled", false);
@@ -45,15 +49,8 @@ class ReadOnlyService {
         $("#whiteboardLockBtn").hide();
 
         // restore previously selected tool
-        if (this._previousToolHtmlElem) this._previousToolHtmlElem.click();
-    }
-
-    /**
-     * Get the read-only status
-     * @returns {boolean}
-     */
-    get readOnlyActive() {
-        return this._readOnlyActive;
+        const { previousToolHtmlElem } = this;
+        if (previousToolHtmlElem) previousToolHtmlElem.click();
     }
 }
 

src/js/services/ThrottlingService.js

@@ -5,15 +5,19 @@ import ConfigService from "./ConfigService";
 class ThrottlingService {
     /**
      * @type {number}
-     * @private
      */
-    _lastSuccessTime = 0;
+    #lastSuccessTime = 0;
+    get lastSuccessTime() {
+        return this.#lastSuccessTime;
+    }
 
     /**
      * @type {Point}
-     * @private
      */
-    _lastPointPosition = new Point(0, 0);
+    #lastPointPosition = new Point(0, 0);
+    get lastPointPosition() {
+        return this.#lastPointPosition;
+    }
 
     /**
      * Helper to throttle events based on the configuration.
@@ -24,15 +28,15 @@ class ThrottlingService {
      */
     throttle(newPosition, onSuccess) {
         const newTime = getCurrentTimeMs();
-        const { _lastPointPosition, _lastSuccessTime } = this;
-        if (newTime - _lastSuccessTime > ConfigService.pointerEventsThrottling.minTimeDelta) {
+        const { lastPointPosition, lastSuccessTime } = this;
+        if (newTime - lastSuccessTime > ConfigService.pointerEventsThrottling.minTimeDelta) {
             if (
-                _lastPointPosition.distTo(newPosition) >
+                lastPointPosition.distTo(newPosition) >
                 ConfigService.pointerEventsThrottling.minDistDelta
             ) {
                 onSuccess();
-                this._lastPointPosition = newPosition;
-                this._lastSuccessTime = newTime;
+                this.#lastPointPosition = newPosition;
+                this.#lastSuccessTime = newTime;
             }
         }
     }