@antv/l7-map 2.9.32-alpha.2 → 2.9.33

package/es/handler/shim/drag_pan.js

@@ -0,0 +1,96 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { isMini } from '@antv/l7-utils';
+
+/**
+ * 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);
+
+    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",
+    value: function enable(options) {
+      this.inertiaOptions = options || {};
+      this.mousePan.enable();
+      this.touchPan.enable();
+
+      if (!isMini) {
+        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();
+
+      if (!isMini) {
+        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;
+}();
+
+export { DragPanHandler as default };

package/es/handler/shim/drag_rotate.d.ts

@@ -0,0 +1,46 @@
+import { MousePitchHandler, MouseRotateHandler } from '../mouse';
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ */
+export default class DragRotateHandler {
+    private mouseRotate;
+    private mousePitch;
+    private pitchWithRotate;
+    /**
+     * @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
+     */
+    constructor(options: {
+        pitchWithRotate: boolean;
+    }, mouseRotate: MouseRotateHandler, mousePitch: MousePitchHandler);
+    /**
+     * Enables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.enable();
+     */
+    enable(): void;
+    /**
+     * Disables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.disable();
+     */
+    disable(): void;
+    /**
+     * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "drag to rotate" interaction is enabled.
+     */
+    isEnabled(): boolean;
+    /**
+     * 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.
+     */
+    isActive(): boolean;
+}

package/es/handler/shim/drag_rotate.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@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) {
+    _classCallCheck(this, DragRotateHandler);
+
+    this.pitchWithRotate = options.pitchWithRotate;
+    this.mouseRotate = mouseRotate;
+    this.mousePitch = mousePitch;
+  }
+  /**
+   * Enables the "drag to rotate" interaction.
+   *
+   * @example
+   * map.dragRotate.enable();
+   */
+
+
+  _createClass(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;
+}();
+
+export { DragRotateHandler as default };

package/es/handler/shim/touch_zoom_rotate.d.ts

@@ -0,0 +1,70 @@
+import TapDragZoomHandler from '../tap/tap_drag_zoom';
+import { TouchRotateHandler, TouchZoomHandler } from '../touch';
+/**
+ * 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.
+ */
+export default class TouchZoomRotateHandler {
+    private el;
+    private touchZoom;
+    private touchRotate;
+    private tapDragZoom;
+    private rotationDisabled;
+    private enabled;
+    /**
+     * @private
+     */
+    constructor(el: HTMLElement, touchZoom: TouchZoomHandler, touchRotate: TouchRotateHandler, tapDragZoom: TapDragZoomHandler);
+    /**
+     * 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' });
+     */
+    enable(options: {
+        around?: 'center';
+    }): void;
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.disable();
+     */
+    disable(): void;
+    /**
+     * 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.
+     */
+    isEnabled(): boolean;
+    /**
+     * Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
+     *
+     * @returns {boolean} //eslint-disable-line
+     */
+    isActive(): boolean;
+    /**
+     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
+     * interaction enabled.
+     *
+     * @example
+     *   map.touchZoomRotate.disableRotation();
+     */
+    disableRotation(): void;
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.enable();
+     *   map.touchZoomRotate.enableRotation();
+     */
+    enableRotation(): void;
+}

package/es/handler/shim/touch_zoom_rotate.js

@@ -0,0 +1,130 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { isMini } from '@antv/l7-utils';
+
+/**
+ * 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);
+
+    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' });
+   */
+
+
+  _createClass(TouchZoomRotateHandler, [{
+    key: "enable",
+    value: function enable(options) {
+      this.touchZoom.enable(options);
+
+      if (!this.rotationDisabled) {
+        this.touchRotate.enable(options);
+      }
+
+      this.tapDragZoom.enable();
+
+      if (!isMini) {
+        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();
+
+      if (!isMini) {
+        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;
+}();
+
+export { TouchZoomRotateHandler as default };

package/es/handler/tap/single_tap_recognizer.d.ts

@@ -0,0 +1,20 @@
+import Point from '../../geo/point';
+export declare const MAX_TAP_INTERVAL = 500;
+export declare const MAX_TOUCH_TIME = 500;
+export declare const MAX_DIST = 30;
+export default class SingleTapRecognizer {
+    numTouches: number;
+    centroid: Point;
+    startTime: number;
+    aborted: boolean;
+    touches: {
+        [key: string]: Point;
+    };
+    constructor(options: {
+        numTouches: number;
+    });
+    reset(): void;
+    touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]): void;
+    touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]): void;
+    touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]): Point | undefined;
+}

package/es/handler/tap/single_tap_recognizer.js

@@ -0,0 +1,120 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+// @ts-ignore
+import Point from "../../geo/point";
+import { indexTouches } from "../handler_util";
+
+function getCentroid(points) {
+  var sum = new Point(0, 0);
+
+  var _iterator = _createForOfIteratorHelper(points),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var point = _step.value;
+
+      sum._add(point);
+    } // @ts-ignore
+
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return sum.div(points.length);
+}
+
+export var MAX_TAP_INTERVAL = 500;
+export var MAX_TOUCH_TIME = 500;
+export var MAX_DIST = 30;
+
+var SingleTapRecognizer = /*#__PURE__*/function () {
+  function SingleTapRecognizer(options) {
+    _classCallCheck(this, SingleTapRecognizer);
+
+    this.reset();
+    this.numTouches = options.numTouches;
+  }
+
+  _createClass(SingleTapRecognizer, [{
+    key: "reset",
+    value: function reset() {
+      //@ts-ignore
+      delete this.centroid; //@ts-ignore
+
+      delete this.startTime; //@ts-ignore
+
+      delete this.touches;
+      this.aborted = false;
+    }
+  }, {
+    key: "touchstart",
+    value: function touchstart(e, points, mapTouches) {
+      if (this.centroid || mapTouches.length > this.numTouches) {
+        this.aborted = true;
+      }
+
+      if (this.aborted) {
+        return;
+      }
+
+      if (this.startTime === undefined) {
+        this.startTime = e.timeStamp;
+      }
+
+      if (mapTouches.length === this.numTouches) {
+        this.centroid = getCentroid(points);
+        this.touches = indexTouches(mapTouches, points);
+      }
+    }
+  }, {
+    key: "touchmove",
+    value: function touchmove(e, points, mapTouches) {
+      if (this.aborted || !this.centroid) {
+        return;
+      }
+
+      var newTouches = indexTouches(mapTouches, points);
+
+      for (var id in this.touches) {
+        if (this.touches[id]) {
+          var prevPos = this.touches[id];
+          var pos = newTouches[id];
+
+          if (!pos || pos.dist(prevPos) > MAX_DIST) {
+            this.aborted = true;
+          }
+        }
+      }
+    }
+  }, {
+    key: "touchend",
+    value: function touchend(e, points, mapTouches) {
+      if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) {
+        this.aborted = true;
+      }
+
+      if (mapTouches.length === 0) {
+        var centroid = !this.aborted && this.centroid;
+        this.reset();
+
+        if (centroid) {
+          return centroid;
+        }
+      }
+    }
+  }]);
+
+  return SingleTapRecognizer;
+}();
+
+export { SingleTapRecognizer as default };

package/es/handler/tap/tap_drag_zoom.d.ts

@@ -0,0 +1,22 @@
+import Point from '../../geo/point';
+import TapRecognizer from './tap_recognizer';
+export default class TapDragZoomHandler {
+    enabled: boolean;
+    active: boolean;
+    swipePoint: Point;
+    swipeTouch: number;
+    tapTime: number;
+    tap: TapRecognizer;
+    constructor();
+    reset(): void;
+    touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]): void;
+    touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]): {
+        zoomDelta: number;
+    } | undefined;
+    touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]): void;
+    touchcancel(): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}

package/es/handler/tap/tap_drag_zoom.js

@@ -0,0 +1,114 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+// @ts-ignore
+import { MAX_TAP_INTERVAL } from "./single_tap_recognizer";
+import TapRecognizer from "./tap_recognizer";
+
+var TapDragZoomHandler = /*#__PURE__*/function () {
+  function TapDragZoomHandler() {
+    _classCallCheck(this, TapDragZoomHandler);
+
+    this.tap = new TapRecognizer({
+      numTouches: 1,
+      numTaps: 1
+    });
+    this.reset();
+  }
+
+  _createClass(TapDragZoomHandler, [{
+    key: "reset",
+    value: function reset() {
+      this.active = false; //@ts-ignore
+
+      delete this.swipePoint; //@ts-ignore
+
+      delete this.swipeTouch; //@ts-ignore
+
+      delete this.tapTime;
+      this.tap.reset();
+    }
+  }, {
+    key: "touchstart",
+    value: function touchstart(e, points, mapTouches) {
+      if (this.swipePoint) {
+        return;
+      }
+
+      if (this.tapTime && e.timeStamp - this.tapTime > MAX_TAP_INTERVAL) {
+        this.reset();
+      }
+
+      if (!this.tapTime) {
+        this.tap.touchstart(e, points, mapTouches);
+      } else if (mapTouches.length > 0) {
+        this.swipePoint = points[0];
+        this.swipeTouch = mapTouches[0].identifier;
+      }
+    }
+  }, {
+    key: "touchmove",
+    value: function touchmove(e, points, mapTouches) {
+      if (!this.tapTime) {
+        this.tap.touchmove(e, points, mapTouches);
+      } else if (this.swipePoint) {
+        if (mapTouches[0].identifier !== this.swipeTouch) {
+          return;
+        }
+
+        var newSwipePoint = points[0];
+        var dist = newSwipePoint.y - this.swipePoint.y;
+        this.swipePoint = newSwipePoint;
+        e.preventDefault();
+        this.active = true;
+        return {
+          zoomDelta: dist / 128
+        };
+      }
+    }
+  }, {
+    key: "touchend",
+    value: function touchend(e, points, mapTouches) {
+      if (!this.tapTime) {
+        var point = this.tap.touchend(e, points, mapTouches);
+
+        if (point) {
+          this.tapTime = e.timeStamp;
+        }
+      } else if (this.swipePoint) {
+        if (mapTouches.length === 0) {
+          this.reset();
+        }
+      }
+    }
+  }, {
+    key: "touchcancel",
+    value: function touchcancel() {
+      this.reset();
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.enabled = true;
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.enabled = false;
+      this.reset();
+    }
+  }, {
+    key: "isEnabled",
+    value: function isEnabled() {
+      return this.enabled;
+    }
+  }, {
+    key: "isActive",
+    value: function isActive() {
+      return this.active;
+    }
+  }]);
+
+  return TapDragZoomHandler;
+}();
+
+export { TapDragZoomHandler as default };