smithmicro#64 & mapbox/smithmicro-collab#1 6 ms trailing debounce of …

…circle-animating 'mousemove' events
Krizz · Dec 9, 2017 · 84445dd · 84445dd
1 parent 6ae951d
commit 84445dd
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/lib/main.js b/lib/main.js
@@ -239,6 +239,7 @@ 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.
@@ -283,6 +284,27 @@ 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) {
+        this._debouncedHandlers[handler] = _.debounce(handler, 6, {leading: false, trailing: 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
@@ -471,7 +493,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);
@@ -510,7 +532,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;
@@ -610,7 +632,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);
@@ -649,7 +671,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;