react-map-gl - npm Package Compare versions

Comparing version 4.1.7 to 4.1.8

CHANGELOG.md

@@ -5,2 +5,5 @@ # CHANGELOG
 
+## 4.1.8 (July 8, 2019)
+- Fix interaction state when using mouse wheel (#840)
+
 ## 4.1.7 (June 6, 2019)
@@ -7,0 +10,0 @@ - Fix popup styling (#818)

dist/es5/utils/map-controller.js

@@ -26,2 +26,4 @@ "use strict";
 
+var _debounce = _interopRequireDefault(require("./debounce"));
+
 var NO_TRANSITION_PROPS = {
@@ -81,2 +83,3 @@ transitionDuration: 0
     this.handleEvent = this.handleEvent.bind(this);
+    this._onWheelEnd = (0, _debounce["default"])(this._onWheelEnd, 100);
   }
@@ -343,6 +346,13 @@
       });
+
+      this._onWheelEnd();
+
+      return true;
+    }
+  }, {
+    key: "_onWheelEnd",
+    value: function _onWheelEnd() {
       this.setState({
         isZooming: false
       });
-      return true;
     }
@@ -349,0 +359,0 @@ }, {

dist/es6/utils/map-controller.js

@@ -6,2 +6,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import TransitionManager, { TRANSITION_EVENTS } from './transition-manager';
+import debounce from './debounce';
 const NO_TRANSITION_PROPS = {
@@ -71,2 +72,3 @@ transitionDuration: 0
     this.handleEvent = this.handleEvent.bind(this);
+    this._onWheelEnd = debounce(this._onWheelEnd, 100);
   }
@@ -315,6 +317,12 @@
     });
+
+    this._onWheelEnd();
+
+    return true;
+  }
+
+  _onWheelEnd() {
     this.setState({
       isZooming: false
     });
-    return true;
   }
@@ -321,0 +329,0 @@

dist/esm/utils/map-controller.js

@@ -8,2 +8,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import TransitionManager, { TRANSITION_EVENTS } from './transition-manager';
+import debounce from './debounce';
 var NO_TRANSITION_PROPS = {
@@ -80,2 +81,3 @@ transitionDuration: 0
     this.handleEvent = this.handleEvent.bind(this);
+    this._onWheelEnd = debounce(this._onWheelEnd, 100);
   }
@@ -342,6 +344,13 @@
       });
+
+      this._onWheelEnd();
+
+      return true;
+    }
+  }, {
+    key: "_onWheelEnd",
+    value: function _onWheelEnd() {
       this.setState({
         isZooming: false
       });
-      return true;
     }
@@ -348,0 +357,0 @@ }, {

package.json

 {
   "name": "react-map-gl",
   "description": "A React wrapper for MapboxGL-js and overlay API.",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "keywords": [
@@ -6,0 +6,0 @@ "mapbox",

src/utils/map-controller.js

@@ -25,2 +25,3 @@ // @flow
 import TransitionManager, {TRANSITION_EVENTS} from './transition-manager';
+import debounce from './debounce';
 
@@ -79,2 +80,3 @@ import type {MjolnirEvent} from 'mjolnir.js';
     (this: any).handleEvent = this.handleEvent.bind(this);
+    (this: any)._onWheelEnd = debounce(this._onWheelEnd, 100);
   }
@@ -321,7 +323,11 @@
     this.updateViewport(newMapState, NO_TRANSITION_PROPS, {isZooming: true});
-    // This is a one-off event, state should not persist
-    this.setState({isZooming: false});
+    // Wheel events are discrete, let's wait a little before resetting isZooming
+    this._onWheelEnd();
     return true;
   }
 
+  _onWheelEnd() {
+    this.setState({isZooming: false});
+  }
+
   // Default handler for the `pinchstart` event.
@@ -328,0 +334,0 @@ _onPinchStart(event: MjolnirEvent) {

No alert changes

Improved metrics

Total package byte prevSize

1341039

increased by0.53%

Number of package files

245

increased by2.94%

Lines of code

14628

increased by0.68%

No dependency changes