@antv/l7-map 2.25.7 → 2.25.10

package/es/map/handler/tap_zoom.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 class TapZoomHandler {
+  constructor(map) {
+    _defineProperty(this, "_tr", void 0);
+    _defineProperty(this, "_enabled", void 0);
+    _defineProperty(this, "_active", void 0);
+    _defineProperty(this, "_zoomIn", void 0);
+    _defineProperty(this, "_zoomOut", void 0);
+    this._tr = new TransformProvider(map);
+    this._zoomIn = new TapRecognizer({
+      numTouches: 1,
+      numTaps: 2
+    });
+    this._zoomOut = new TapRecognizer({
+      numTouches: 2,
+      numTaps: 1
+    });
+    this.reset();
+  }
+  reset() {
+    this._active = false;
+    this._zoomIn.reset();
+    this._zoomOut.reset();
+  }
+  touchstart(e, points, mapTouches) {
+    this._zoomIn.touchstart(e, points, mapTouches);
+    this._zoomOut.touchstart(e, points, mapTouches);
+  }
+  touchmove(e, points, mapTouches) {
+    this._zoomIn.touchmove(e, points, mapTouches);
+    this._zoomOut.touchmove(e, points, mapTouches);
+  }
+  touchend(e, points, mapTouches) {
+    const zoomInPoint = this._zoomIn.touchend(e, points, mapTouches);
+    const zoomOutPoint = this._zoomOut.touchend(e, points, mapTouches);
+    const tr = this._tr;
+    if (zoomInPoint) {
+      this._active = true;
+      e.preventDefault();
+      setTimeout(() => this.reset(), 0);
+      return {
+        cameraAnimation: map => map.easeTo({
+          duration: 300,
+          zoom: tr.zoom + 1,
+          around: tr.unproject(zoomInPoint)
+        }, {
+          originalEvent: e
+        })
+      };
+    } else if (zoomOutPoint) {
+      this._active = true;
+      e.preventDefault();
+      setTimeout(() => this.reset(), 0);
+      return {
+        cameraAnimation: map => map.easeTo({
+          duration: 300,
+          zoom: tr.zoom - 1,
+          around: tr.unproject(zoomOutPoint)
+        }, {
+          originalEvent: e
+        })
+      };
+    }
+  }
+  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/touch_pan.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="mapbox__point-geometry" />
+import Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+/**
+ * A `TouchPanHandler` allows the user to pan the map using touch gestures.
+ */
+export declare class TouchPanHandler implements Handler {
+    _enabled: boolean;
+    _active: boolean;
+    _touches: {
+        [k in string | number]: Point;
+    };
+    _clickTolerance: number;
+    _sum: Point;
+    _map: Map;
+    constructor(options: {
+        clickTolerance: number;
+    }, map: Map);
+    reset(): void;
+    minTouchs(): 1 | 2;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): {
+        around: Point;
+        panDelta: Point;
+    };
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): {
+        around: Point;
+        panDelta: Point;
+    };
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchcancel(): void;
+    _calculateTransform(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): {
+        around: Point;
+        panDelta: Point;
+    };
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}

package/es/map/handler/touch_pan.js

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Point from '@mapbox/point-geometry';
+import { indexTouches } from "./handler_util";
+
+/**
+ * A `TouchPanHandler` allows the user to pan the map using touch gestures.
+ */
+export class TouchPanHandler {
+  constructor(options, map) {
+    _defineProperty(this, "_enabled", void 0);
+    _defineProperty(this, "_active", void 0);
+    _defineProperty(this, "_touches", void 0);
+    _defineProperty(this, "_clickTolerance", void 0);
+    _defineProperty(this, "_sum", void 0);
+    _defineProperty(this, "_map", void 0);
+    this._clickTolerance = options.clickTolerance || 1;
+    this._map = map;
+    this.reset();
+  }
+  reset() {
+    this._active = false;
+    this._touches = {};
+    this._sum = new Point(0, 0);
+  }
+  minTouchs() {
+    return this._map.cooperativeGestures.isEnabled() ? 2 : 1;
+  }
+  touchstart(e, points, mapTouches) {
+    return this._calculateTransform(e, points, mapTouches);
+  }
+  touchmove(e, points, mapTouches) {
+    if (!this._active || mapTouches.length < this.minTouchs()) return;
+    e.preventDefault();
+    return this._calculateTransform(e, points, mapTouches);
+  }
+  touchend(e, points, mapTouches) {
+    this._calculateTransform(e, points, mapTouches);
+    if (this._active && mapTouches.length < this.minTouchs()) {
+      this.reset();
+    }
+  }
+  touchcancel() {
+    this.reset();
+  }
+  _calculateTransform(e, points, mapTouches) {
+    if (mapTouches.length > 0) this._active = true;
+    const touches = indexTouches(mapTouches, points);
+    const touchPointSum = new Point(0, 0);
+    const touchDeltaSum = new Point(0, 0);
+    let touchDeltaCount = 0;
+    for (const identifier in touches) {
+      const point = touches[identifier];
+      const prevPoint = this._touches[identifier];
+      if (prevPoint) {
+        touchPointSum._add(point);
+        touchDeltaSum._add(point.sub(prevPoint));
+        touchDeltaCount++;
+        touches[identifier] = point;
+      }
+    }
+    this._touches = touches;
+    if (touchDeltaCount < this.minTouchs() || !touchDeltaSum.mag()) return;
+    const panDelta = touchDeltaSum.div(touchDeltaCount);
+    this._sum._add(panDelta);
+    if (this._sum.mag() < this._clickTolerance) return;
+    const around = touchPointSum.div(touchDeltaCount);
+    return {
+      around,
+      panDelta
+    };
+  }
+  enable() {
+    this._enabled = true;
+  }
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+  isEnabled() {
+    return this._enabled;
+  }
+  isActive() {
+    return this._active;
+  }
+}

package/es/map/handler/transform-provider.d.ts

@@ -0,0 +1,23 @@
+import type { PointLike } from '../camera';
+import type { LngLat } from '../geo/lng_lat';
+import type { Transform } from '../geo/transform';
+import type { Map } from '../map';
+/**
+ * @internal
+ * Shared utilities for the Handler classes to access the correct camera state.
+ * If Camera.transformCameraUpdate is specified, the "desired state" of camera may differ from the state used for rendering.
+ * The handlers need the "desired state" to track accumulated changes.
+ */
+export declare class TransformProvider {
+    _map: Map;
+    constructor(map: Map);
+    get transform(): Transform;
+    get center(): {
+        lng: number;
+        lat: number;
+    };
+    get zoom(): number;
+    get pitch(): number;
+    get bearing(): number;
+    unproject(point: PointLike): LngLat;
+}

package/es/map/handler/transform-provider.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Point from '@mapbox/point-geometry';
+/**
+ * @internal
+ * Shared utilities for the Handler classes to access the correct camera state.
+ * If Camera.transformCameraUpdate is specified, the "desired state" of camera may differ from the state used for rendering.
+ * The handlers need the "desired state" to track accumulated changes.
+ */
+export class TransformProvider {
+  constructor(map) {
+    _defineProperty(this, "_map", void 0);
+    this._map = map;
+  }
+  get transform() {
+    return this._map._requestedCameraState || this._map.transform;
+  }
+  get center() {
+    return {
+      lng: this.transform.center.lng,
+      lat: this.transform.center.lat
+    };
+  }
+  get zoom() {
+    return this.transform.zoom;
+  }
+  get pitch() {
+    return this.transform.pitch;
+  }
+  get bearing() {
+    return this.transform.bearing;
+  }
+  unproject(point) {
+    return this.transform.pointLocation(Point.convert(point));
+  }
+}

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

@@ -0,0 +1,107 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import type { Handler, HandlerResult } from '../handler_manager';
+import type { Map } from '../map';
+/**
+ * An options object sent to the enable function of some of the handlers
+ */
+export type AroundCenterOptions = {
+    /**
+     * If "center" is passed, map will zoom around the center of map
+     */
+    around: 'center';
+};
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom, pitch and rotate the map using two fingers
+ *
+ */
+declare abstract class TwoFingersTouchHandler implements Handler {
+    _enabled?: boolean;
+    _active?: boolean;
+    _firstTwoTouches?: [number, number];
+    _vector?: Point;
+    _startVector?: Point;
+    _aroundCenter?: boolean;
+    /** @internal */
+    constructor();
+    reset(): void;
+    abstract _start(points: [Point, Point]): void;
+    abstract _move(points: [Point, Point], pinchAround: Point | null, e: TouchEvent): HandlerResult | void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): HandlerResult | void;
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    touchcancel(): void;
+    /**
+     * Enables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.enable();
+     * ```
+     */
+    enable(options?: AroundCenterOptions | boolean | null): void;
+    /**
+     * Disables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.disable();
+     * ```
+     */
+    disable(): void;
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
+     *
+     * @returns  `true` if the "drag to pitch" interaction is enabled.
+     */
+    isEnabled(): boolean;
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
+     *
+     * @returns `true` if the "drag to pitch" interaction is active.
+     */
+    isActive(): boolean;
+}
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom the map two fingers
+ *
+ * @group Handlers
+ */
+export declare class TwoFingersTouchZoomHandler extends TwoFingersTouchHandler {
+    _distance?: number;
+    _startDistance?: number;
+    reset(): void;
+    _start(points: [Point, Point]): void;
+    _move(points: [Point, Point], pinchAround: Point | null): HandlerResult | void;
+}
+/**
+ * The `TwoFingersTouchHandler`s allows the user to rotate the map two fingers
+ *
+ * @group Handlers
+ */
+export declare class TwoFingersTouchRotateHandler extends TwoFingersTouchHandler {
+    _minDiameter?: number;
+    reset(): void;
+    _start(points: [Point, Point]): void;
+    _move(points: [Point, Point], pinchAround: Point | null, _e: TouchEvent): HandlerResult | void;
+    _isBelowThreshold(vector: Point): boolean;
+}
+/**
+ * The `TwoFingersTouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers.
+ *
+ * @group Handlers
+ */
+export declare class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
+    _valid?: boolean;
+    _firstMove?: number;
+    _lastPoints?: [Point, Point];
+    _map: Map;
+    _currentTouchCount: number;
+    constructor(map: Map);
+    reset(): void;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void;
+    _start(points: [Point, Point]): void;
+    _move(points: [Point, Point], center: Point | null, e: TouchEvent): HandlerResult | void;
+    gestureBeginsVertically(vectorA: Point, vectorB: Point, timeStamp: number): boolean | undefined;
+}
+export {};

package/es/map/handler/two_fingers_touch.js

@@ -0,0 +1,289 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { DOM } from "../util/dom";
+
+/**
+ * An options object sent to the enable function of some of the handlers
+ */
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom, pitch and rotate the map using two fingers
+ *
+ */
+class TwoFingersTouchHandler {
+  /** @internal */
+  constructor() {
+    _defineProperty(this, "_enabled", void 0);
+    _defineProperty(this, "_active", void 0);
+    _defineProperty(this, "_firstTwoTouches", void 0);
+    _defineProperty(this, "_vector", void 0);
+    _defineProperty(this, "_startVector", void 0);
+    _defineProperty(this, "_aroundCenter", void 0);
+    this.reset();
+  }
+  reset() {
+    this._active = false;
+    delete this._firstTwoTouches;
+  }
+  touchstart(e, points, mapTouches) {
+    //log('touchstart', points, e.target.innerHTML, e.targetTouches.length ? e.targetTouches[0].target.innerHTML: undefined);
+    if (this._firstTwoTouches || mapTouches.length < 2) return;
+    this._firstTwoTouches = [mapTouches[0].identifier, mapTouches[1].identifier];
+
+    // implemented by child classes
+    this._start([points[0], points[1]]);
+  }
+  touchmove(e, points, mapTouches) {
+    if (!this._firstTwoTouches) return;
+    e.preventDefault();
+    const [idA, idB] = this._firstTwoTouches;
+    const a = getTouchById(mapTouches, points, idA);
+    const b = getTouchById(mapTouches, points, idB);
+    if (!a || !b) return;
+    const pinchAround = this._aroundCenter ? null : a.add(b).div(2);
+
+    // implemented by child classes
+    return this._move([a, b], pinchAround, e);
+  }
+  touchend(e, points, mapTouches) {
+    if (!this._firstTwoTouches) return;
+    const [idA, idB] = this._firstTwoTouches;
+    const a = getTouchById(mapTouches, points, idA);
+    const b = getTouchById(mapTouches, points, idB);
+    if (a && b) return;
+    if (this._active) DOM.suppressClick();
+    this.reset();
+  }
+  touchcancel() {
+    this.reset();
+  }
+
+  /**
+   * Enables the "drag to pitch" interaction.
+   *
+   * @example
+   * ```ts
+   * map.touchPitch.enable();
+   * ```
+   */
+  enable(options) {
+    this._enabled = true;
+    this._aroundCenter = !!options && options.around === 'center';
+  }
+
+  /**
+   * Disables the "drag to pitch" interaction.
+   *
+   * @example
+   * ```ts
+   * map.touchPitch.disable();
+   * ```
+   */
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
+   *
+   * @returns  `true` if the "drag to pitch" interaction is enabled.
+   */
+  isEnabled() {
+    return !!this._enabled;
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
+   *
+   * @returns `true` if the "drag to pitch" interaction is active.
+   */
+  isActive() {
+    return !!this._active;
+  }
+}
+function getTouchById(mapTouches, points, identifier) {
+  for (let i = 0; i < mapTouches.length; i++) {
+    if (mapTouches[i].identifier === identifier) return points[i];
+  }
+  return undefined;
+}
+
+/* ZOOM */
+
+const ZOOM_THRESHOLD = 0.1;
+function getZoomDelta(distance, lastDistance) {
+  return Math.log(distance / lastDistance) / Math.LN2;
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom the map two fingers
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchZoomHandler extends TwoFingersTouchHandler {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "_distance", void 0);
+    _defineProperty(this, "_startDistance", void 0);
+  }
+  reset() {
+    super.reset();
+    delete this._distance;
+    delete this._startDistance;
+  }
+  _start(points) {
+    this._startDistance = this._distance = points[0].dist(points[1]);
+  }
+  _move(points, pinchAround) {
+    const lastDistance = this._distance;
+    this._distance = points[0].dist(points[1]);
+    if (!this._active && Math.abs(getZoomDelta(this._distance, this._startDistance)) < ZOOM_THRESHOLD) return;
+    this._active = true;
+    return {
+      zoomDelta: getZoomDelta(this._distance, lastDistance),
+      pinchAround
+    };
+  }
+}
+
+/* ROTATE */
+
+const ROTATION_THRESHOLD = 25; // pixels along circumference of touch circle
+
+function getBearingDelta(a, b) {
+  return a.angleWith(b) * 180 / Math.PI;
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to rotate the map two fingers
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchRotateHandler extends TwoFingersTouchHandler {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "_minDiameter", void 0);
+  }
+  reset() {
+    super.reset();
+    delete this._minDiameter;
+    delete this._startVector;
+    delete this._vector;
+  }
+  _start(points) {
+    this._startVector = this._vector = points[0].sub(points[1]);
+    this._minDiameter = points[0].dist(points[1]);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _move(points, pinchAround, _e) {
+    const lastVector = this._vector;
+    this._vector = points[0].sub(points[1]);
+    if (!this._active && this._isBelowThreshold(this._vector)) return;
+    this._active = true;
+    return {
+      bearingDelta: getBearingDelta(this._vector, lastVector),
+      pinchAround
+    };
+  }
+  _isBelowThreshold(vector) {
+    /*
+     * The threshold before a rotation actually happens is configured in
+     * pixels along the circumference of the circle formed by the two fingers.
+     * This makes the threshold in degrees larger when the fingers are close
+     * together and smaller when the fingers are far apart.
+     *
+     * Use the smallest diameter from the whole gesture to reduce sensitivity
+     * when pinching in and out.
+     */
+
+    this._minDiameter = Math.min(this._minDiameter, vector.mag());
+    const circumference = Math.PI * this._minDiameter;
+    const threshold = ROTATION_THRESHOLD / circumference * 360;
+    const bearingDeltaSinceStart = getBearingDelta(vector, this._startVector);
+    return Math.abs(bearingDeltaSinceStart) < threshold;
+  }
+}
+
+/* PITCH */
+
+function isVertical(vector) {
+  return Math.abs(vector.y) > Math.abs(vector.x);
+}
+const ALLOWED_SINGLE_TOUCH_TIME = 100;
+
+/**
+ * The `TwoFingersTouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers.
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
+  constructor(map) {
+    super();
+    _defineProperty(this, "_valid", void 0);
+    _defineProperty(this, "_firstMove", void 0);
+    _defineProperty(this, "_lastPoints", void 0);
+    _defineProperty(this, "_map", void 0);
+    _defineProperty(this, "_currentTouchCount", 0);
+    this._map = map;
+  }
+  reset() {
+    super.reset();
+    this._valid = undefined;
+    delete this._firstMove;
+    delete this._lastPoints;
+  }
+  touchstart(e, points, mapTouches) {
+    super.touchstart(e, points, mapTouches);
+    this._currentTouchCount = mapTouches.length;
+  }
+  _start(points) {
+    this._lastPoints = points;
+    if (isVertical(points[0].sub(points[1]))) {
+      // fingers are more horizontal than vertical
+      this._valid = false;
+    }
+  }
+  _move(points, center, e) {
+    // If cooperative gestures is enabled, we need a 3-finger minimum for this gesture to register
+    if (this._map.cooperativeGestures.isEnabled() && this._currentTouchCount < 3) {
+      return;
+    }
+    const vectorA = points[0].sub(this._lastPoints[0]);
+    const vectorB = points[1].sub(this._lastPoints[1]);
+    this._valid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp);
+    if (!this._valid) return;
+    this._lastPoints = points;
+    this._active = true;
+    const yDeltaAverage = (vectorA.y + vectorB.y) / 2;
+    const degreesPerPixelMoved = -0.5;
+    return {
+      pitchDelta: yDeltaAverage * degreesPerPixelMoved
+    };
+  }
+  gestureBeginsVertically(vectorA, vectorB, timeStamp) {
+    if (this._valid !== undefined) return this._valid;
+    const threshold = 2;
+    const movedA = vectorA.mag() >= threshold;
+    const movedB = vectorB.mag() >= threshold;
+
+    // neither finger has moved a meaningful amount, wait
+    if (!movedA && !movedB) return;
+
+    // One finger has moved and the other has not.
+    // If enough time has passed, decide it is not a pitch.
+    if (!movedA || !movedB) {
+      if (this._firstMove === undefined) {
+        this._firstMove = timeStamp;
+      }
+      if (timeStamp - this._firstMove < ALLOWED_SINGLE_TOUCH_TIME) {
+        // still waiting for a movement from the second finger
+        return undefined;
+      } else {
+        return false;
+      }
+    }
+    const isSameDirection = vectorA.y > 0 === vectorB.y > 0;
+    return isVertical(vectorA) && isVertical(vectorB) && isSameDirection;
+  }
+}

package/es/map/handler_inertia.d.ts

@@ -0,0 +1,20 @@
+import type { DragPanOptions } from './handler/shim/drag_pan';
+import type { Map } from './map';
+export type InertiaOptions = {
+    linearity: number;
+    easing: (t: number) => number;
+    deceleration: number;
+    maxSpeed: number;
+};
+export declare class HandlerInertia {
+    _map: Map;
+    _inertiaBuffer: Array<{
+        time: number;
+        settings: any;
+    }>;
+    constructor(map: Map);
+    clear(): void;
+    record(settings: any): void;
+    _drainInertiaBuffer(): void;
+    _onMoveEnd(panInertiaOptions?: DragPanOptions | boolean): any;
+}