@antv/l7-map 2.25.7 → 2.25.9

package/es/map/handler/shim/drag_pan.js

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * A {@link DragPanHandler} options object
+ */
+
+/**
+ * The `DragPanHandler` allows the user to pan the map by clicking and dragging
+ * the cursor.
+ *
+ * @group Handlers
+ */
+export class DragPanHandler {
+  /** @internal */
+  constructor(el, mousePan, touchPan) {
+    _defineProperty(this, "_el", void 0);
+    _defineProperty(this, "_mousePan", void 0);
+    _defineProperty(this, "_touchPan", void 0);
+    _defineProperty(this, "_inertiaOptions", void 0);
+    this._el = el;
+    this._mousePan = mousePan;
+    this._touchPan = touchPan;
+  }
+
+  /**
+   * Enables the "drag to pan" interaction.
+   *
+   * @param options - Options object
+   * @example
+   * ```ts
+   *   map.dragPan.enable();
+   *   map.dragPan.enable({
+   *      linearity: 0.3,
+   *      easing: bezier(0, 0, 0.3, 1),
+   *      maxSpeed: 1400,
+   *      deceleration: 2500,
+   *   });
+   * ```
+   */
+  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
+   * ```ts
+   * map.dragPan.disable();
+   * ```
+   */
+  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 `true` if the "drag to pan" interaction is enabled.
+   */
+  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 `true` if the "drag to pan" interaction is active.
+   */
+  isActive() {
+    return this._mousePan.isActive() || this._touchPan.isActive();
+  }
+}

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

@@ -0,0 +1,54 @@
+import type { MousePitchHandler, MouseRotateHandler } from '../mouse';
+/**
+ * Options object for `DragRotateHandler`.
+ */
+export type DragRotateHandlerOptions = {
+    /**
+     * Control the map pitch in addition to the bearing
+     * @defaultValue true
+     */
+    pitchWithRotate: boolean;
+};
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ *
+ * @group Handlers
+ */
+export declare class DragRotateHandler {
+    _mouseRotate: MouseRotateHandler;
+    _mousePitch: MousePitchHandler;
+    _pitchWithRotate: boolean;
+    /** @internal */
+    constructor(options: DragRotateHandlerOptions, mouseRotate: MouseRotateHandler, mousePitch: MousePitchHandler);
+    /**
+     * Enables the "drag to rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.dragRotate.enable();
+     * ```
+     */
+    enable(): void;
+    /**
+     * Disables the "drag to rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.dragRotate.disable();
+     * ```
+     */
+    disable(): void;
+    /**
+     * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
+     *
+     * @returns `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 `true` if the "drag to rotate" interaction is active.
+     */
+    isActive(): boolean;
+}

package/es/map/handler/shim/drag_rotate.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * Options object for `DragRotateHandler`.
+ */
+
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ *
+ * @group Handlers
+ */
+export class DragRotateHandler {
+  /** @internal */
+  constructor(options, mouseRotate, mousePitch) {
+    _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
+   * ```ts
+   * map.dragRotate.enable();
+   * ```
+   */
+  enable() {
+    this._mouseRotate.enable();
+    if (this._pitchWithRotate) this._mousePitch.enable();
+  }
+
+  /**
+   * Disables the "drag to rotate" interaction.
+   *
+   * @example
+   * ```ts
+   * map.dragRotate.disable();
+   * ```
+   */
+  disable() {
+    this._mouseRotate.disable();
+    this._mousePitch.disable();
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
+   *
+   * @returns `true` if the "drag to rotate" interaction is enabled.
+   */
+  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 `true` if the "drag to rotate" interaction is active.
+   */
+  isActive() {
+    return this._mouseRotate.isActive() || this._mousePitch.isActive();
+  }
+}

package/es/map/handler/shim/two_fingers_touch.d.ts

@@ -0,0 +1,74 @@
+import type { TapDragZoomHandler } from '../tap_drag_zoom';
+import type { AroundCenterOptions, TwoFingersTouchRotateHandler, TwoFingersTouchZoomHandler } from '../two_fingers_touch';
+/**
+ * The `TwoFingersTouchZoomRotateHandler` 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.
+ *
+ * @group Handlers
+ */
+export declare class TwoFingersTouchZoomRotateHandler {
+    _el: HTMLElement;
+    _touchZoom: TwoFingersTouchZoomHandler;
+    _touchRotate: TwoFingersTouchRotateHandler;
+    _tapDragZoom: TapDragZoomHandler;
+    _rotationDisabled: boolean;
+    _enabled: boolean;
+    /** @internal */
+    constructor(el: HTMLElement, touchZoom: TwoFingersTouchZoomHandler, touchRotate: TwoFingersTouchRotateHandler, tapDragZoom: TapDragZoomHandler);
+    /**
+     * Enables the "pinch to rotate and zoom" interaction.
+     *
+     * @param options - Options object.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.enable();
+     * map.touchZoomRotate.enable({ around: 'center' });
+     * ```
+     */
+    enable(options?: AroundCenterOptions | boolean | null): void;
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.disable();
+     * ```
+     */
+    disable(): void;
+    /**
+     * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
+     *
+     * @returns `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 `true` if the handler is active, `false` otherwise
+     */
+    isActive(): boolean;
+    /**
+     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
+     * interaction enabled.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.disableRotation();
+     * ```
+     */
+    disableRotation(): void;
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.enable();
+     * map.touchZoomRotate.enableRotation();
+     * ```
+     */
+    enableRotation(): void;
+}

package/es/map/handler/shim/two_fingers_touch.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * The `TwoFingersTouchZoomRotateHandler` 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.
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchZoomRotateHandler {
+  /** @internal */
+  constructor(el, touchZoom, touchRotate, tapDragZoom) {
+    _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;
+    this._tapDragZoom = tapDragZoom;
+    this._rotationDisabled = false;
+    this._enabled = true;
+  }
+
+  /**
+   * Enables the "pinch to rotate and zoom" interaction.
+   *
+   * @param options - Options object.
+   *
+   * @example
+   * ```ts
+   * map.touchZoomRotate.enable();
+   * map.touchZoomRotate.enable({ around: 'center' });
+   * ```
+   */
+  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
+   * ```ts
+   * map.touchZoomRotate.disable();
+   * ```
+   */
+  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 `true` if the "pinch to rotate and zoom" interaction is enabled.
+   */
+  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 `true` if the handler is active, `false` otherwise
+   */
+  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
+   * ```ts
+   * map.touchZoomRotate.disableRotation();
+   * ```
+   */
+  disableRotation() {
+    this._rotationDisabled = true;
+    this._touchRotate.disable();
+  }
+
+  /**
+   * Enables the "pinch to rotate" interaction.
+   *
+   * @example
+   * ```ts
+   * map.touchZoomRotate.enable();
+   * map.touchZoomRotate.enableRotation();
+   * ```
+   */
+  enableRotation() {
+    this._rotationDisabled = false;
+    if (this._touchZoom.isEnabled()) this._touchRotate.enable();
+  }
+}

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

@@ -0,0 +1,28 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import { TapRecognizer } from './tap_recognizer';
+/**
+ * A `TapDragZoomHandler` allows the user to zoom the map at a point by double tapping. It also allows the user pan the map by dragging.
+ */
+export declare class TapDragZoomHandler implements Handler {
+    _enabled: boolean;
+    _active: boolean;
+    _swipePoint: Point;
+    _swipeTouch: number;
+    _tapTime: number;
+    _tapPoint: Point;
+    _tap: TapRecognizer;
+    constructor();
+    reset(): void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): {
+        zoomDelta: number;
+    };
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchcancel(): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}

package/es/map/handler/tap_drag_zoom.js

@@ -0,0 +1,92 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { MAX_DIST, MAX_TAP_INTERVAL, TapRecognizer } from "./tap_recognizer";
+
+/**
+ * A `TapDragZoomHandler` allows the user to zoom the map at a point by double tapping. It also allows the user pan the map by dragging.
+ */
+export class TapDragZoomHandler {
+  constructor() {
+    _defineProperty(this, "_enabled", void 0);
+    _defineProperty(this, "_active", void 0);
+    _defineProperty(this, "_swipePoint", void 0);
+    _defineProperty(this, "_swipeTouch", void 0);
+    _defineProperty(this, "_tapTime", void 0);
+    _defineProperty(this, "_tapPoint", void 0);
+    _defineProperty(this, "_tap", void 0);
+    this._tap = new TapRecognizer({
+      numTouches: 1,
+      numTaps: 1
+    });
+    this.reset();
+  }
+  reset() {
+    this._active = false;
+    delete this._swipePoint;
+    delete this._swipeTouch;
+    delete this._tapTime;
+    delete this._tapPoint;
+    this._tap.reset();
+  }
+  touchstart(e, points, mapTouches) {
+    if (this._swipePoint) return;
+    if (!this._tapTime) {
+      this._tap.touchstart(e, points, mapTouches);
+    } else {
+      const swipePoint = points[0];
+      const soonEnough = e.timeStamp - this._tapTime < MAX_TAP_INTERVAL;
+      const closeEnough = this._tapPoint.dist(swipePoint) < MAX_DIST;
+      if (!soonEnough || !closeEnough) {
+        this.reset();
+      } else if (mapTouches.length > 0) {
+        this._swipePoint = swipePoint;
+        this._swipeTouch = mapTouches[0].identifier;
+      }
+    }
+  }
+  touchmove(e, points, mapTouches) {
+    if (!this._tapTime) {
+      this._tap.touchmove(e, points, mapTouches);
+    } else if (this._swipePoint) {
+      if (mapTouches[0].identifier !== this._swipeTouch) {
+        return;
+      }
+      const newSwipePoint = points[0];
+      const dist = newSwipePoint.y - this._swipePoint.y;
+      this._swipePoint = newSwipePoint;
+      e.preventDefault();
+      this._active = true;
+      return {
+        zoomDelta: dist / 128
+      };
+    }
+  }
+  touchend(e, points, mapTouches) {
+    if (!this._tapTime) {
+      const point = this._tap.touchend(e, points, mapTouches);
+      if (point) {
+        this._tapTime = e.timeStamp;
+        this._tapPoint = point;
+      }
+    } else if (this._swipePoint) {
+      if (mapTouches.length === 0) {
+        this.reset();
+      }
+    }
+  }
+  touchcancel() {
+    this.reset();
+  }
+  enable() {
+    this._enabled = true;
+  }
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+  isEnabled() {
+    return this._enabled;
+  }
+  isActive() {
+    return this._active;
+  }
+}

package/es/map/handler/tap_recognizer.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="mapbox__point-geometry" />
+import Point from '@mapbox/point-geometry';
+export declare const MAX_TAP_INTERVAL = 500;
+export declare const MAX_DIST = 30;
+export declare class SingleTapRecognizer {
+    numTouches: number;
+    centroid: Point;
+    startTime: number;
+    aborted: boolean;
+    touches: {
+        [k in number | string]: Point;
+    };
+    constructor(options: {
+        numTouches: number;
+    });
+    reset(): void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): Point;
+}
+export declare class TapRecognizer {
+    singleTap: SingleTapRecognizer;
+    numTaps: number;
+    lastTime: number;
+    lastTap: Point;
+    count: number;
+    constructor(options: {
+        numTaps: number;
+        numTouches: number;
+    });
+    reset(): void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): Point;
+}

package/es/map/handler/tap_recognizer.js

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Point from '@mapbox/point-geometry';
+import { indexTouches } from "./handler_util";
+function getCentroid(points) {
+  const sum = new Point(0, 0);
+  for (const point of points) {
+    sum._add(point);
+  }
+  return sum.div(points.length);
+}
+export const MAX_TAP_INTERVAL = 500;
+const MAX_TOUCH_TIME = 500;
+export const MAX_DIST = 30;
+export class SingleTapRecognizer {
+  constructor(options) {
+    _defineProperty(this, "numTouches", void 0);
+    _defineProperty(this, "centroid", void 0);
+    _defineProperty(this, "startTime", void 0);
+    _defineProperty(this, "aborted", void 0);
+    _defineProperty(this, "touches", void 0);
+    this.reset();
+    this.numTouches = options.numTouches;
+  }
+  reset() {
+    delete this.centroid;
+    delete this.startTime;
+    delete this.touches;
+    this.aborted = false;
+  }
+  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);
+    }
+  }
+  touchmove(e, points, mapTouches) {
+    if (this.aborted || !this.centroid) return;
+    const newTouches = indexTouches(mapTouches, points);
+    for (const id in this.touches) {
+      const prevPos = this.touches[id];
+      const pos = newTouches[id];
+      if (!pos || pos.dist(prevPos) > MAX_DIST) {
+        this.aborted = true;
+      }
+    }
+  }
+  touchend(e, points, mapTouches) {
+    if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) {
+      this.aborted = true;
+    }
+    if (mapTouches.length === 0) {
+      const centroid = !this.aborted && this.centroid;
+      this.reset();
+      if (centroid) return centroid;
+    }
+  }
+}
+export class TapRecognizer {
+  constructor(options) {
+    _defineProperty(this, "singleTap", void 0);
+    _defineProperty(this, "numTaps", void 0);
+    _defineProperty(this, "lastTime", void 0);
+    _defineProperty(this, "lastTap", void 0);
+    _defineProperty(this, "count", void 0);
+    this.singleTap = new SingleTapRecognizer(options);
+    this.numTaps = options.numTaps;
+    this.reset();
+  }
+  reset() {
+    this.lastTime = Infinity;
+    delete this.lastTap;
+    this.count = 0;
+    this.singleTap.reset();
+  }
+  touchstart(e, points, mapTouches) {
+    this.singleTap.touchstart(e, points, mapTouches);
+  }
+  touchmove(e, points, mapTouches) {
+    this.singleTap.touchmove(e, points, mapTouches);
+  }
+  touchend(e, points, mapTouches) {
+    const tap = this.singleTap.touchend(e, points, mapTouches);
+    if (tap) {
+      const soonEnough = e.timeStamp - this.lastTime < MAX_TAP_INTERVAL;
+      const closeEnough = !this.lastTap || this.lastTap.dist(tap) < MAX_DIST;
+      if (!soonEnough || !closeEnough) {
+        this.reset();
+      }
+      this.count++;
+      this.lastTime = e.timeStamp;
+      this.lastTap = tap;
+      if (this.count === this.numTaps) {
+        this.reset();
+        return tap;
+      }
+    }
+  }
+}

package/es/map/handler/tap_zoom.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+import { TapRecognizer } from './tap_recognizer';
+import { TransformProvider } from './transform-provider';
+/**
+ * A `TapZoomHandler` allows the user to zoom the map at a point by double tapping
+ */
+export declare class TapZoomHandler implements Handler {
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+    _zoomIn: TapRecognizer;
+    _zoomOut: TapRecognizer;
+    constructor(map: Map);
+    reset(): void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): {
+        cameraAnimation: (map: Map) => Map;
+    };
+    touchcancel(): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}