Merge pull request #66 from mblomdahl/feature/debounce

Feature/DebounceAnimation -- fixes mapbox/smithmicro-collab#1, fixes #64 and fixes #59
smithmicro · Dec 10, 2017 · c48aab3 · c48aab3
2 parents ab04351 + 4152efc
commit c48aab3
Showing 1 changed file with 39 additions and 5 deletions.
diff --git a/lib/main.js b/lib/main.js
@@ -239,6 +239,8 @@ class MapboxCircle {
         /** @const {Array<Point>} */ this._handles = undefined;
         /** @const {boolean} */ this._centerDragActive = false;
         /** @const {boolean} */ this._radiusDragActive = false;
+        /** @const {Object} */ this._debouncedHandlers = {};
+        /** @const {number} */ this._updateCount = 0;
 
         [ // Bind all event handlers.
             '_onZoomEnd',
@@ -282,6 +284,36 @@ class MapboxCircle {
         return window.navigator.userAgent.indexOf('Chrome') === -1 && window.navigator.userAgent.indexOf('Safari') > -1;
     }
 
+    /**
+     * Add debounced event handler to map.
+     * @param {string} event Mapbox GL event name
+     * @param {Function} handler Event handler
+     * @private
+     */
+    _mapOnDebounced(event, handler) {
+        let ticking = false;
+        this._debouncedHandlers[handler] = (args) => {
+                if (!ticking) {
+                    requestAnimationFrame(() => {
+                        handler(args);
+                        ticking = false;
+                    });
+                }
+                ticking = true;
+            };
+        this.map.on(event, this._debouncedHandlers[handler]);
+    }
+
+    /**
+     * Remove debounced event handler from map.
+     * @param {string} event Mapbox GL event name
+     * @param {Function} handler Event handler
+     * @private
+     */
+    _mapOffDebounced(event, handler) {
+        this.map.off(event, this._debouncedHandlers[handler]);
+    }
+
     /**
      * Re-calculate/update circle polygon and handles.
      * @private
@@ -306,9 +338,11 @@ class MapboxCircle {
         }
 
         if (this.options.debugEl) {
+            this._updateCount += 1;
             this.options.debugEl.innerHTML = ('Center: ' + JSON.stringify(this.getCenter()) + ' / Radius: ' + radius +
                                               ' / Bounds: ' + JSON.stringify(this.getBounds()) + ' / Steps: ' + steps +
-                                              ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId);
+                                              ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId +
+                                              ' / #: ' + this._updateCount);
         }
     }
 
@@ -468,7 +502,7 @@ class MapboxCircle {
      */
     _onCenterHandleMouseDown() {
         this._centerDragActive = true;
-        this.map.on('mousemove', this._onCenterHandleMouseMove);
+        this._mapOnDebounced('mousemove', this._onCenterHandleMouseMove);
         this.map.addLayer(this._getCenterHandleStrokeLayer(), this._circleCenterHandleId);
         this._suspendHandleListeners('center');
         this.map.once('mouseup', this._onCenterHandleMouseUpOrMapMouseOut);
@@ -507,7 +541,7 @@ class MapboxCircle {
 
         const newCenter = this.center;
         this._centerDragActive = false;
-        this.map.off('mousemove', this._onCenterHandleMouseMove);
+        this._mapOffDebounced('mousemove', this._onCenterHandleMouseMove);
         switch (event.type) {
             case 'mouseup': this.map.off('mouseout', this._onCenterHandleMouseUpOrMapMouseOut); break;
             case 'mouseout': this.map.off('mouseup', this._onCenterHandleMouseUpOrMapMouseOut); break;
@@ -607,7 +641,7 @@ class MapboxCircle {
      */
     _onRadiusHandlesMouseDown(event) {
         this._radiusDragActive = true;
-        this.map.on('mousemove', this._onRadiusHandlesMouseMove);
+        this._mapOnDebounced('mousemove', this._onRadiusHandlesMouseMove);
         this.map.addLayer(this._getRadiusHandlesStrokeLayer(), this._circleRadiusHandlesId);
         this._suspendHandleListeners('radius');
         this.map.once('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut);
@@ -646,7 +680,7 @@ class MapboxCircle {
 
         const newRadius = this.radius;
         this._radiusDragActive = false;
-        this.map.off('mousemove', this._onRadiusHandlesMouseMove);
+        this._mapOffDebounced('mousemove', this._onRadiusHandlesMouseMove);
         this.map.removeLayer(this._circleRadiusHandlesStrokeId);
         switch (event.type) {
             case 'mouseup': this.map.off('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); break;