From 2bfc2f1bd31039e725d7c2b27bc0d11843b16774 Mon Sep 17 00:00:00 2001 From: Justin Holdstock Date: Mon, 22 Oct 2018 12:40:21 -0600 Subject: [PATCH] Chore: Reduce redundant point creation via buffering (#237) --- src/doc/DocDrawingThread.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/doc/DocDrawingThread.js b/src/doc/DocDrawingThread.js index d7bcaea88..7a6ee05e2 100644 --- a/src/doc/DocDrawingThread.js +++ b/src/doc/DocDrawingThread.js @@ -14,6 +14,9 @@ class DocDrawingThread extends DrawingThread { /** @property {HTMLElement} - Page element being observed */ pageEl; + /** @property {boolean} - Whether or not to wait until next frame to create another point in the drawing */ + isBuffering = false; + //-------------------------------------------------------------------------- // Public //-------------------------------------------------------------------------- @@ -31,6 +34,15 @@ class DocDrawingThread extends DrawingThread { this.reconstructBrowserCoordFromLocation = this.reconstructBrowserCoordFromLocation.bind(this); } + /** + * Toggles current buffering state. + * + * @return {void} + */ + toggleBufferingState = () => { + this.isBuffering = !this.isBuffering; + }; + /** * Handle a pointer movement * @@ -48,11 +60,15 @@ class DocDrawingThread extends DrawingThread { return; } - const [x, y] = getBrowserCoordinatesFromLocation(location, this.pageEl); - const browserLocation = createLocation(x, y); - - if (this.pendingPath) { + // If the current path is being buffered, don't create redundant points + if (!this.isBuffering && this.pendingPath) { + const [x, y] = getBrowserCoordinatesFromLocation(location, this.pageEl); + const browserLocation = createLocation(x, y); this.pendingPath.addCoordinate(location, browserLocation); + + // On next browser frame, reset to allow for another point to be added to the path + this.toggleBufferingState(); + window.requestAnimationFrame(this.toggleBufferingState); } }