@antv/l7-map 2.9.20 → 2.9.22

package/es/handler/scroll_zoom.js

@@ -1,66 +1,35 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import LngLat from '../geo/lng_lat';
-import { bezier, ease, interpolate, now } from '../util';
-import DOM from '../utils/dom';
-var wheelZoomDelta = 4.000244140625;
+// @ts-ignore
+import LngLat from "../geo/lng_lat";
+import { bezier, ease, interpolate, now } from "../util";
+import DOM from "../utils/dom";
+// deltaY value for mouse scroll wheel identification
+var wheelZoomDelta = 4.000244140625; // These magic numbers control the rate of zoom. Trackpad events fire at a greater
+// frequency than mouse scroll wheel, so reduce the zoom rate per wheel tick
+
 var defaultZoomRate = 1 / 100;
-var wheelZoomRate = 1 / 450;
+var wheelZoomRate = 1 / 450; // upper bound on how much we scale the map in any single render frame; this
+// is used to limit zoom rate in the case of very fast scrolling
+
 var maxScalePerFrame = 2;
+/**
+ * The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
+ */
+
+var ScrollZoomHandler = /*#__PURE__*/function () {
+  // used for delayed-handling of a single wheel movement
+  // used to delay final '{move,zoom}end' events
 
-var ScrollZoomHandler = function () {
+  /**
+   * @private
+   */
   function ScrollZoomHandler(map, handler) {
     var _this = this;
 
     _classCallCheck(this, ScrollZoomHandler);
 
-    _defineProperty(this, "map", void 0);
-
-    _defineProperty(this, "el", void 0);
-
-    _defineProperty(this, "enabled", void 0);
-
-    _defineProperty(this, "active", void 0);
-
-    _defineProperty(this, "zooming", void 0);
-
-    _defineProperty(this, "aroundCenter", void 0);
-
-    _defineProperty(this, "around", void 0);
-
-    _defineProperty(this, "aroundPoint", void 0);
-
-    _defineProperty(this, "type", void 0);
-
-    _defineProperty(this, "lastValue", void 0);
-
-    _defineProperty(this, "timeout", void 0);
-
-    _defineProperty(this, "finishTimeout", void 0);
-
-    _defineProperty(this, "lastWheelEvent", void 0);
-
-    _defineProperty(this, "lastWheelEventTime", void 0);
-
-    _defineProperty(this, "startZoom", void 0);
-
-    _defineProperty(this, "targetZoom", void 0);
-
-    _defineProperty(this, "delta", void 0);
-
-    _defineProperty(this, "easing", void 0);
-
-    _defineProperty(this, "prevEase", void 0);
-
-    _defineProperty(this, "frameId", void 0);
-
-    _defineProperty(this, "handler", void 0);
-
-    _defineProperty(this, "defaultZoomRate", void 0);
-
-    _defineProperty(this, "wheelZoomRate", void 0);
-
     _defineProperty(this, "onScrollFrame", function () {
       if (!_this.frameId) {
         return;
@@ -72,10 +41,13 @@ var ScrollZoomHandler = function () {
         return;
       }
 
-      var tr = _this.map.transform;
+      var tr = _this.map.transform; // if we've had scroll events since the last render frame, consume the
+      // accumulated delta, and update the target zoom level accordingly
 
       if (_this.delta !== 0) {
-        var zoomRate = _this.type === 'wheel' && Math.abs(_this.delta) > wheelZoomDelta ? _this.wheelZoomRate : _this.defaultZoomRate;
+        // For trackpad events and single mouse wheel ticks, use the default zoom rate
+        var zoomRate = _this.type === 'wheel' && Math.abs(_this.delta) > wheelZoomDelta ? _this.wheelZoomRate : _this.defaultZoomRate; // Scale by sigmoid of scroll wheel delta.
+
         var scale = maxScalePerFrame / (1 + Math.exp(-Math.abs(_this.delta * zoomRate)));
 
         if (_this.delta < 0 && scale !== 0) {
@@ -83,7 +55,9 @@ var ScrollZoomHandler = function () {
         }
 
         var fromScale = typeof _this.targetZoom === 'number' ? tr.zoomScale(_this.targetZoom) : tr.scale;
-        _this.targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale)));
+        _this.targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale))); // if this is a mouse wheel, refresh the starting zoom and easing
+        // function we're using to smooth out the zooming between wheel
+        // events
 
         if (_this.type === 'wheel') {
           _this.startZoom = tr.zoom;
@@ -119,13 +93,16 @@ var ScrollZoomHandler = function () {
       _this.active = true;
 
       if (finished) {
-        _this.active = false;
+        _this.active = false; // @ts-ignore
+
         _this.finishTimeout = setTimeout(function () {
           _this.zooming = false;
 
-          _this.handler.triggerRenderFrame();
+          _this.handler.triggerRenderFrame(); // @ts-ignore
+
+
+          delete _this.targetZoom; // @ts-ignore
 
-          delete _this.targetZoom;
           delete _this.finishTimeout;
         }, 200);
       }
@@ -146,22 +123,50 @@ var ScrollZoomHandler = function () {
     this.defaultZoomRate = defaultZoomRate;
     this.wheelZoomRate = wheelZoomRate;
   }
+  /**
+   * Set the zoom rate of a trackpad
+   * @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value.
+   * @example
+   * // Speed up trackpad zoom
+   * map.scrollZoom.setZoomRate(1/25);
+   */
+
 
   _createClass(ScrollZoomHandler, [{
     key: "setZoomRate",
     value: function setZoomRate(zoomRate) {
       this.defaultZoomRate = zoomRate;
     }
+    /**
+     * Set the zoom rate of a mouse wheel
+     * @param {number} [wheelZoomRate=1/450] The rate used to scale mouse wheel movement to a zoom value.
+     * @example
+     * // Slow down zoom of mouse wheel
+     * map.scrollZoom.setWheelZoomRate(1/600);
+     */
+
   }, {
     key: "setWheelZoomRate",
     value: function setWheelZoomRate(zoomRate) {
       this.wheelZoomRate = zoomRate;
     }
+    /**
+     * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
+     */
+
   }, {
     key: "isEnabled",
     value: function isEnabled() {
       return !!this.enabled;
     }
+    /*
+     * Active state is turned on and off with every scroll wheel event and is set back to false before the map
+     * render is called, so _active is not a good candidate for determining if a scroll zoom animation is in
+     * progress.
+     */
+
   }, {
     key: "isActive",
     value: function isActive() {
@@ -172,6 +177,18 @@ var ScrollZoomHandler = function () {
     value: function isZooming() {
       return !!this.zooming;
     }
+    /**
+     * Enables the "scroll to zoom" interaction.
+     *
+     * @param {Object} [options] Options object.
+     * @param {string} [options.around] If "center" is passed, map will zoom around center of map
+     *
+     * @example
+     *   map.scrollZoom.enable();
+     * @example
+     *  map.scrollZoom.enable({ around: 'center' })
+     */
+
   }, {
     key: "enable",
     value: function enable(options) {
@@ -182,6 +199,13 @@ var ScrollZoomHandler = function () {
       this.enabled = true;
       this.aroundCenter = options && options.around === 'center';
     }
+    /**
+     * Disables the "scroll to zoom" interaction.
+     *
+     * @example
+     *   map.scrollZoom.disable();
+     */
+
   }, {
     key: "disable",
     value: function disable() {
@@ -196,7 +220,8 @@ var ScrollZoomHandler = function () {
     value: function wheel(e) {
       if (!this.isEnabled()) {
         return;
-      }
+      } // Remove `any` cast when https://github.com/facebook/flow/issues/4879 is fixed.
+
 
       var value = e.deltaMode === window.WheelEvent.DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY;
       var nowTime = now();
@@ -204,26 +229,36 @@ var ScrollZoomHandler = function () {
       this.lastWheelEventTime = nowTime;
 
       if (value !== 0 && value % wheelZoomDelta === 0) {
+        // This one is definitely a mouse wheel event.
         this.type = 'wheel';
       } else if (value !== 0 && Math.abs(value) < 4) {
+        // This one is definitely a trackpad event because it is so small.
         this.type = 'trackpad';
       } else if (timeDelta > 400) {
+        // This is likely a new scroll action.
         this.type = null;
-        this.lastValue = value;
+        this.lastValue = value; // Start a timeout in case this was a singular event, and dely it by up to 40ms.
+        // @ts-ignore
+
         this.timeout = setTimeout(this.onTimeout, 40, e);
       } else if (!this.type) {
-        this.type = Math.abs(timeDelta * value) < 200 ? 'trackpad' : 'wheel';
+        // This is a repeating event, but we don't know the type of event just yet.
+        // If the delta per time is small, we assume it's a fast trackpad; otherwise we switch into wheel mode.
+        this.type = Math.abs(timeDelta * value) < 200 ? 'trackpad' : 'wheel'; // Make sure our delayed event isn't fired again, because we accumulate
+        // the previous event (which was less than 40ms ago) into this event.
 
         if (this.timeout) {
           clearTimeout(this.timeout);
           this.timeout = null;
           value += this.lastValue;
         }
-      }
+      } // Slow down zoom if shift key is held for more precise zooming
+
 
       if (e.shiftKey && value) {
         value = value / 4;
-      }
+      } // Only fire the callback if we actually know what type of scrolling device the user uses.
+
 
       if (this.type) {
         this.lastWheelEvent = e;
@@ -274,7 +309,8 @@ var ScrollZoomHandler = function () {
       }
 
       if (this.finishTimeout) {
-        clearTimeout(this.finishTimeout);
+        clearTimeout(this.finishTimeout); // @ts-ignore
+
         delete this.finishTimeout;
       }
 
@@ -295,7 +331,8 @@ var ScrollZoomHandler = function () {
       if (this.prevEase) {
         var preEase = this.prevEase;
         var t = (now() - preEase.start) / preEase.duration;
-        var speed = preEase.easing(t + 0.01) - preEase.easing(t);
+        var speed = preEase.easing(t + 0.01) - preEase.easing(t); // Quick hack to make new bezier that is continuous with last
+
         var x = 0.27 / Math.sqrt(speed * speed + 0.0001) * 0.01;
         var y = Math.sqrt(0.27 * 0.27 - x * x);
         easing = bezier(x, y, 0.25, 1);
@@ -313,5 +350,4 @@ var ScrollZoomHandler = function () {
   return ScrollZoomHandler;
 }();
 
-export default ScrollZoomHandler;
-//# sourceMappingURL=scroll_zoom.js.map
+export default ScrollZoomHandler;

package/es/handler/shim/dblclick_zoom.js

@@ -1,18 +1,27 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var DoubleClickZoomHandler = function () {
+/**
+ * The `DoubleClickZoomHandler` allows the user to zoom the map at a point by
+ * double clicking or double tapping.
+ */
+var DoubleClickZoomHandler = /*#__PURE__*/function () {
+  /**
+   * @private
+   */
   function DoubleClickZoomHandler(clickZoom, TapZoom) {
     _classCallCheck(this, DoubleClickZoomHandler);
 
-    _defineProperty(this, "clickZoom", void 0);
-
-    _defineProperty(this, "tapZoom", void 0);
-
     this.clickZoom = clickZoom;
     this.tapZoom = TapZoom;
   }
+  /**
+   * Enables the "double click to zoom" interaction.
+   *
+   * @example
+   * map.doubleClickZoom.enable();
+   */
+
 
   _createClass(DoubleClickZoomHandler, [{
     key: "enable",
@@ -20,17 +29,36 @@ var DoubleClickZoomHandler = function () {
       this.clickZoom.enable();
       this.tapZoom.enable();
     }
+    /**
+     * Disables the "double click to zoom" interaction.
+     *
+     * @example
+     * map.doubleClickZoom.disable();
+     */
+
   }, {
     key: "disable",
     value: function disable() {
       this.clickZoom.disable();
       this.tapZoom.disable();
     }
+    /**
+     * Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "double click to zoom" interaction is enabled.
+     */
+
   }, {
     key: "isEnabled",
     value: function isEnabled() {
       return this.clickZoom.isEnabled() && this.tapZoom.isEnabled();
     }
+    /**
+     * Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used.
+     *
+     * @returns {boolean} `true` if the "double click to zoom" interaction is active.
+     */
+
   }, {
     key: "isActive",
     value: function isActive() {
@@ -41,5 +69,4 @@ var DoubleClickZoomHandler = function () {
   return DoubleClickZoomHandler;
 }();
 
-export { DoubleClickZoomHandler as default };
-//# sourceMappingURL=dblclick_zoom.js.map
+export { DoubleClickZoomHandler as default };

package/es/handler/shim/drag_pan.js

@@ -1,24 +1,42 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isMini } from '@antv/l7-utils';
 
-var DragPanHandler = function () {
+/**
+ * The `DragPanHandler` allows the user to pan the map by clicking and dragging
+ * the cursor.
+ */
+var DragPanHandler = /*#__PURE__*/function () {
+  /**
+   * @private
+   */
   function DragPanHandler(el, mousePan, touchPan) {
     _classCallCheck(this, DragPanHandler);
 
-    _defineProperty(this, "inertiaOptions", void 0);
-
-    _defineProperty(this, "el", void 0);
-
-    _defineProperty(this, "mousePan", void 0);
-
-    _defineProperty(this, "touchPan", void 0);
-
     this.el = el;
     this.mousePan = mousePan;
     this.touchPan = touchPan;
   }
+  /**
+   * Enables the "drag to pan" interaction.
+   *
+   * @param {Object} [options] Options object
+   * @param {number} [options.linearity=0] factor used to scale the drag velocity
+   * @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag.
+   * @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity.
+   * @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends.
+   *
+   * @example
+   *   map.dragPan.enable();
+   * @example
+   *   map.dragPan.enable({
+   *      linearity: 0.3,
+   *      easing: bezier(0, 0, 0.3, 1),
+   *      maxSpeed: 1400,
+   *      deceleration: 2500,
+   *   });
+   */
+
 
   _createClass(DragPanHandler, [{
     key: "enable",
@@ -31,6 +49,13 @@ var DragPanHandler = function () {
         this.el.classList.add('l7-touch-drag-pan');
       }
     }
+    /**
+     * Disables the "drag to pan" interaction.
+     *
+     * @example
+     * map.dragPan.disable();
+     */
+
   }, {
     key: "disable",
     value: function disable() {
@@ -41,11 +66,23 @@ var DragPanHandler = function () {
         this.el.classList.remove('l7-touch-drag-pan');
       }
     }
+    /**
+     * Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "drag to pan" interaction is enabled.
+     */
+
   }, {
     key: "isEnabled",
     value: function isEnabled() {
       return this.mousePan.isEnabled() && this.touchPan.isEnabled();
     }
+    /**
+     * Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.
+     *
+     * @returns {boolean} `true` if the "drag to pan" interaction is active.
+     */
+
   }, {
     key: "isActive",
     value: function isActive() {
@@ -56,5 +93,4 @@ var DragPanHandler = function () {
   return DragPanHandler;
 }();
 
-export { DragPanHandler as default };
-//# sourceMappingURL=drag_pan.js.map
+export { DragPanHandler as default };

package/es/handler/shim/drag_rotate.js

@@ -1,21 +1,32 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var DragRotateHandler = function () {
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ */
+var DragRotateHandler = /*#__PURE__*/function () {
+  /**
+   * @param {Object} [options]
+   * @param {number} [options.bearingSnap] The threshold, measured in degrees, that determines when the map's
+   *   bearing will snap to north.
+   * @param {bool} [options.pitchWithRotate=true] Control the map pitch in addition to the bearing
+   * @private
+   */
   function DragRotateHandler(options, mouseRotate, mousePitch) {
     _classCallCheck(this, DragRotateHandler);
 
-    _defineProperty(this, "mouseRotate", void 0);
-
-    _defineProperty(this, "mousePitch", void 0);
-
-    _defineProperty(this, "pitchWithRotate", void 0);
-
     this.pitchWithRotate = options.pitchWithRotate;
     this.mouseRotate = mouseRotate;
     this.mousePitch = mousePitch;
   }
+  /**
+   * Enables the "drag to rotate" interaction.
+   *
+   * @example
+   * map.dragRotate.enable();
+   */
+
 
   _createClass(DragRotateHandler, [{
     key: "enable",
@@ -26,17 +37,36 @@ var DragRotateHandler = function () {
         this.mousePitch.enable();
       }
     }
+    /**
+     * Disables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.disable();
+     */
+
   }, {
     key: "disable",
     value: function disable() {
       this.mouseRotate.disable();
       this.mousePitch.disable();
     }
+    /**
+     * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "drag to rotate" interaction is enabled.
+     */
+
   }, {
     key: "isEnabled",
     value: function isEnabled() {
       return this.mouseRotate.isEnabled() && (!this.pitchWithRotate || this.mousePitch.isEnabled());
     }
+    /**
+     * Returns a Boolean indicating whether the "drag to rotate" interaction is active, i.e. currently being used.
+     *
+     * @returns {boolean} `true` if the "drag to rotate" interaction is active.
+     */
+
   }, {
     key: "isActive",
     value: function isActive() {
@@ -47,5 +77,4 @@ var DragRotateHandler = function () {
   return DragRotateHandler;
 }();
 
-export { DragRotateHandler as default };
-//# sourceMappingURL=drag_rotate.js.map
+export { DragRotateHandler as default };

package/es/handler/shim/touch_zoom_rotate.js

@@ -1,24 +1,21 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isMini } from '@antv/l7-utils';
 
-var TouchZoomRotateHandler = function () {
+/**
+ * The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by
+ * pinching on a touchscreen.
+ *
+ * They can zoom with one finger by double tapping and dragging. On the second tap,
+ * hold the finger down and drag up or down to zoom in or out.
+ */
+var TouchZoomRotateHandler = /*#__PURE__*/function () {
+  /**
+   * @private
+   */
   function TouchZoomRotateHandler(el, touchZoom, touchRotate, tapDragZoom) {
     _classCallCheck(this, TouchZoomRotateHandler);
 
-    _defineProperty(this, "el", void 0);
-
-    _defineProperty(this, "touchZoom", void 0);
-
-    _defineProperty(this, "touchRotate", void 0);
-
-    _defineProperty(this, "tapDragZoom", void 0);
-
-    _defineProperty(this, "rotationDisabled", void 0);
-
-    _defineProperty(this, "enabled", void 0);
-
     this.el = el;
     this.touchZoom = touchZoom;
     this.touchRotate = touchRotate;
@@ -26,6 +23,18 @@ var TouchZoomRotateHandler = function () {
     this.rotationDisabled = false;
     this.enabled = true;
   }
+  /**
+   * Enables the "pinch to rotate and zoom" interaction.
+   *
+   * @param {Object} [options] Options object.
+   * @param {string} [options.around] If "center" is passed, map will zoom around the center
+   *
+   * @example
+   *   map.touchZoomRotate.enable();
+   * @example
+   *   map.touchZoomRotate.enable({ around: 'center' });
+   */
+
 
   _createClass(TouchZoomRotateHandler, [{
     key: "enable",
@@ -42,6 +51,13 @@ var TouchZoomRotateHandler = function () {
         this.el.classList.add('l7-touch-zoom-rotate');
       }
     }
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.disable();
+     */
+
   }, {
     key: "disable",
     value: function disable() {
@@ -53,22 +69,50 @@ var TouchZoomRotateHandler = function () {
         this.el.classList.remove('l7-touch-zoom-rotate');
       }
     }
+    /**
+     * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "pinch to rotate and zoom" interaction is enabled.
+     */
+
   }, {
     key: "isEnabled",
     value: function isEnabled() {
       return this.touchZoom.isEnabled() && (this.rotationDisabled || this.touchRotate.isEnabled()) && this.tapDragZoom.isEnabled();
     }
+    /**
+     * Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
+     *
+     * @returns {boolean} //eslint-disable-line
+     */
+
   }, {
     key: "isActive",
     value: function isActive() {
       return this.touchZoom.isActive() || this.touchRotate.isActive() || this.tapDragZoom.isActive();
     }
+    /**
+     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
+     * interaction enabled.
+     *
+     * @example
+     *   map.touchZoomRotate.disableRotation();
+     */
+
   }, {
     key: "disableRotation",
     value: function disableRotation() {
       this.rotationDisabled = true;
       this.touchRotate.disable();
     }
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.enable();
+     *   map.touchZoomRotate.enableRotation();
+     */
+
   }, {
     key: "enableRotation",
     value: function enableRotation() {
@@ -83,5 +127,4 @@ var TouchZoomRotateHandler = function () {
   return TouchZoomRotateHandler;
 }();
 
-export { TouchZoomRotateHandler as default };
-//# sourceMappingURL=touch_zoom_rotate.js.map
+export { TouchZoomRotateHandler as default };