Chore: Reduce redundant point creation via buffering (#237)

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);
         }
     }