From ce16a9d9999baa6e951b54980e5569b87b8e2651 Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Mon, 11 May 2020 15:12:37 +0200 Subject: [PATCH] refacto(frontend): clean ES2020 private field with getter --- src/js/classes/Point.js | 59 +++++++++--------- src/js/services/ConfigService.js | 48 +++++++++------ src/js/services/InfoService.js | 92 +++++++++++++++++----------- src/js/services/ReadOnlyService.js | 29 ++++----- src/js/services/ThrottlingService.js | 22 ++++--- 5 files changed, 142 insertions(+), 108 deletions(-) diff --git a/src/js/classes/Point.js b/src/js/classes/Point.js index 55f0717..4c8fd81 100644 --- a/src/js/classes/Point.js +++ b/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 * diff --git a/src/js/services/ConfigService.js b/src/js/services/ConfigService.js index 74f3967..8eee6a0 100644 --- a/src/js/services/ConfigService.js +++ b/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); } } diff --git a/src/js/services/InfoService.js b/src/js/services/InfoService.js index f9a37c9..56176f9 100644 --- a/src/js/services/InfoService.js +++ b/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(); diff --git a/src/js/services/ReadOnlyService.js b/src/js/services/ReadOnlyService.js index dd1568f..449c4c4 100644 --- a/src/js/services/ReadOnlyService.js +++ b/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(); } } diff --git a/src/js/services/ThrottlingService.js b/src/js/services/ThrottlingService.js index 2fa2408..b73921e 100644 --- a/src/js/services/ThrottlingService.js +++ b/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; } } }