@antv/l7-map 2.18.2 → 2.18.3

package/lib/handler/scroll_zoom.js

@@ -0,0 +1,333 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lng_lat = _interopRequireDefault(require("../geo/lng_lat"));
+var _util = require("../util");
+var _dom = _interopRequireDefault(require("../utils/dom"));
+// @ts-ignore
+
+// 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;
+
+// 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
+
+  /**
+   * @private
+   */
+  function ScrollZoomHandler(map, handler) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, ScrollZoomHandler);
+    (0, _defineProperty2.default)(this, "onScrollFrame", function () {
+      if (!_this.frameId) {
+        return;
+      }
+      _this.frameId = null;
+      if (!_this.isActive()) {
+        return;
+      }
+      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) {
+        // 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) {
+          scale = 1 / scale;
+        }
+        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)));
+
+        // 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;
+          _this.easing = _this.smoothOutEasing(200);
+        }
+        _this.delta = 0;
+      }
+      var targetZoom = typeof _this.targetZoom === 'number' ? _this.targetZoom : tr.zoom;
+      var startZoom = _this.startZoom;
+      var easing = _this.easing;
+      var finished = false;
+      var zoom;
+      if (_this.type === 'wheel' && startZoom && easing) {
+        var t = Math.min(((0, _util.now)() - _this.lastWheelEventTime) / 200, 1);
+        var k = easing(t);
+        zoom = (0, _util.interpolate)(startZoom, targetZoom, k);
+        if (t < 1) {
+          if (!_this.frameId) {
+            _this.frameId = true;
+          }
+        } else {
+          finished = true;
+        }
+      } else {
+        zoom = targetZoom;
+        finished = true;
+      }
+      _this.active = true;
+      if (finished) {
+        _this.active = false;
+        // @ts-ignore
+        _this.finishTimeout = setTimeout(function () {
+          _this.zooming = false;
+          _this.handler.triggerRenderFrame();
+          // @ts-ignore
+          delete _this.targetZoom;
+          // @ts-ignore
+          delete _this.finishTimeout;
+        }, 200);
+      }
+      return {
+        noInertia: true,
+        needsRenderFrame: !finished,
+        zoomDelta: zoom - tr.zoom,
+        around: _this.aroundPoint,
+        originalEvent: _this.lastWheelEvent
+      };
+    });
+    this.map = map;
+    this.el = map.getCanvasContainer();
+    this.handler = handler;
+    this.delta = 0;
+    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);
+   */
+  (0, _createClass2.default)(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() {
+      return !!this.active || this.finishTimeout !== undefined;
+    }
+  }, {
+    key: "isZooming",
+    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) {
+      if (this.isEnabled()) {
+        return;
+      }
+      this.enabled = true;
+      this.aroundCenter = options && options.around === 'center';
+    }
+
+    /**
+     * Disables the "scroll to zoom" interaction.
+     *
+     * @example
+     *   map.scrollZoom.disable();
+     */
+  }, {
+    key: "disable",
+    value: function disable() {
+      if (!this.isEnabled()) {
+        return;
+      }
+      this.enabled = false;
+    }
+  }, {
+    key: "wheel",
+    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 = (0, _util.now)();
+      var timeDelta = nowTime - (this.lastWheelEventTime || 0);
+      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;
+
+        // 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 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;
+        this.delta -= value;
+        if (!this.active) {
+          this.start(e);
+        }
+      }
+      e.preventDefault();
+    }
+  }, {
+    key: "renderFrame",
+    value: function renderFrame() {
+      return this.onScrollFrame();
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.active = false;
+    }
+  }, {
+    key: "onTimeout",
+    value: function onTimeout(initialEvent) {
+      this.type = 'wheel';
+      this.delta -= this.lastValue;
+      if (!this.active && this.start) {
+        this.start(initialEvent);
+      }
+    }
+  }, {
+    key: "start",
+    value: function start(e) {
+      if (!this.delta) {
+        return;
+      }
+      if (this.frameId) {
+        this.frameId = null;
+      }
+      this.active = true;
+      if (!this.isZooming()) {
+        this.zooming = true;
+      }
+      if (this.finishTimeout) {
+        clearTimeout(this.finishTimeout);
+        // @ts-ignore
+        delete this.finishTimeout;
+      }
+      var pos = _dom.default.mousePos(this.el, e);
+      this.around = _lng_lat.default.convert(this.aroundCenter ? this.map.getCenter() : this.map.unproject(pos));
+      this.aroundPoint = this.map.transform.locationPoint(this.around);
+      if (!this.frameId) {
+        this.frameId = true;
+        this.handler.triggerRenderFrame();
+      }
+    }
+  }, {
+    key: "smoothOutEasing",
+    value: function smoothOutEasing(duration) {
+      var easing = _util.ease;
+      if (this.prevEase) {
+        var preEase = this.prevEase;
+        var t = ((0, _util.now)() - preEase.start) / preEase.duration;
+        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 = (0, _util.bezier)(x, y, 0.25, 1);
+      }
+      this.prevEase = {
+        start: (0, _util.now)(),
+        duration: duration,
+        easing: easing
+      };
+      return easing;
+    }
+  }]);
+  return ScrollZoomHandler;
+}();
+var _default = ScrollZoomHandler;
+exports.default = _default;

package/lib/handler/shim/dblclick_zoom.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+/**
+ * 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) {
+    (0, _classCallCheck2.default)(this, DoubleClickZoomHandler);
+    this.clickZoom = clickZoom;
+    this.tapZoom = TapZoom;
+  }
+
+  /**
+   * Enables the "double click to zoom" interaction.
+   *
+   * @example
+   * map.doubleClickZoom.enable();
+   */
+  (0, _createClass2.default)(DoubleClickZoomHandler, [{
+    key: "enable",
+    value: function enable() {
+      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() {
+      return this.clickZoom.isActive() || this.tapZoom.isActive();
+    }
+  }]);
+  return DoubleClickZoomHandler;
+}();
+exports.default = DoubleClickZoomHandler;

package/lib/handler/shim/drag_pan.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+/**
+ * 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) {
+    (0, _classCallCheck2.default)(this, DragPanHandler);
+    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,
+   *   });
+   */
+  (0, _createClass2.default)(DragPanHandler, [{
+    key: "enable",
+    value: function enable(options) {
+      this.inertiaOptions = options || {};
+      this.mousePan.enable();
+      this.touchPan.enable();
+      this.el.classList.add('l7-touch-drag-pan');
+    }
+
+    /**
+     * Disables the "drag to pan" interaction.
+     *
+     * @example
+     * map.dragPan.disable();
+     */
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.mousePan.disable();
+      this.touchPan.disable();
+      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() {
+      return this.mousePan.isActive() || this.touchPan.isActive();
+    }
+  }]);
+  return DragPanHandler;
+}();
+exports.default = DragPanHandler;

package/lib/handler/shim/drag_rotate.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+/**
+ * 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) {
+    (0, _classCallCheck2.default)(this, DragRotateHandler);
+    this.pitchWithRotate = options.pitchWithRotate;
+    this.mouseRotate = mouseRotate;
+    this.mousePitch = mousePitch;
+  }
+
+  /**
+   * Enables the "drag to rotate" interaction.
+   *
+   * @example
+   * map.dragRotate.enable();
+   */
+  (0, _createClass2.default)(DragRotateHandler, [{
+    key: "enable",
+    value: function enable() {
+      this.mouseRotate.enable();
+      if (this.pitchWithRotate) {
+        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() {
+      return this.mouseRotate.isActive() || this.mousePitch.isActive();
+    }
+  }]);
+  return DragRotateHandler;
+}();
+exports.default = DragRotateHandler;

package/lib/handler/shim/touch_zoom_rotate.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+/**
+ * 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) {
+    (0, _classCallCheck2.default)(this, TouchZoomRotateHandler);
+    this.el = el;
+    this.touchZoom = touchZoom;
+    this.touchRotate = touchRotate;
+    this.tapDragZoom = tapDragZoom;
+    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' });
+   */
+  (0, _createClass2.default)(TouchZoomRotateHandler, [{
+    key: "enable",
+    value: function enable(options) {
+      this.touchZoom.enable(options);
+      if (!this.rotationDisabled) {
+        this.touchRotate.enable(options);
+      }
+      this.tapDragZoom.enable();
+      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() {
+      this.touchZoom.disable();
+      this.touchRotate.disable();
+      this.tapDragZoom.disable();
+      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() {
+      this.rotationDisabled = false;
+      if (this.touchZoom.isEnabled()) {
+        this.touchRotate.enable();
+      }
+    }
+  }]);
+  return TouchZoomRotateHandler;
+}();
+exports.default = TouchZoomRotateHandler;