@antv/l7-map 2.25.7 → 2.25.9

package/lib/map/handler/two_fingers_touch.js

@@ -0,0 +1,296 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TwoFingersTouchZoomHandler = exports.TwoFingersTouchRotateHandler = exports.TwoFingersTouchPitchHandler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dom = require("../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() {
+    (0, _defineProperty2.default)(this, "_enabled", void 0);
+    (0, _defineProperty2.default)(this, "_active", void 0);
+    (0, _defineProperty2.default)(this, "_firstTwoTouches", void 0);
+    (0, _defineProperty2.default)(this, "_vector", void 0);
+    (0, _defineProperty2.default)(this, "_startVector", void 0);
+    (0, _defineProperty2.default)(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.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
+ */
+class TwoFingersTouchZoomHandler extends TwoFingersTouchHandler {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "_distance", void 0);
+    (0, _defineProperty2.default)(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 */
+exports.TwoFingersTouchZoomHandler = TwoFingersTouchZoomHandler;
+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
+ */
+class TwoFingersTouchRotateHandler extends TwoFingersTouchHandler {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(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 */
+exports.TwoFingersTouchRotateHandler = TwoFingersTouchRotateHandler;
+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
+ */
+class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
+  constructor(map) {
+    super();
+    (0, _defineProperty2.default)(this, "_valid", void 0);
+    (0, _defineProperty2.default)(this, "_firstMove", void 0);
+    (0, _defineProperty2.default)(this, "_lastPoints", void 0);
+    (0, _defineProperty2.default)(this, "_map", void 0);
+    (0, _defineProperty2.default)(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;
+  }
+}
+exports.TwoFingersTouchPitchHandler = TwoFingersTouchPitchHandler;

package/lib/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;
+}

package/lib/map/handler_inertia.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HandlerInertia = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _pointGeometry = _interopRequireDefault(require("@mapbox/point-geometry"));
+var _browser = require("./util/browser");
+var _util = require("./util/util");
+const defaultInertiaOptions = {
+  linearity: 0.3,
+  easing: (0, _util.bezier)(0, 0, 0.3, 1)
+};
+const defaultPanInertiaOptions = (0, _util.extend)({
+  deceleration: 2500,
+  maxSpeed: 1400
+}, defaultInertiaOptions);
+const defaultZoomInertiaOptions = (0, _util.extend)({
+  deceleration: 20,
+  maxSpeed: 1400
+}, defaultInertiaOptions);
+const defaultBearingInertiaOptions = (0, _util.extend)({
+  deceleration: 1000,
+  maxSpeed: 360
+}, defaultInertiaOptions);
+const defaultPitchInertiaOptions = (0, _util.extend)({
+  deceleration: 1000,
+  maxSpeed: 90
+}, defaultInertiaOptions);
+class HandlerInertia {
+  constructor(map) {
+    (0, _defineProperty2.default)(this, "_map", void 0);
+    (0, _defineProperty2.default)(this, "_inertiaBuffer", void 0);
+    this._map = map;
+    this.clear();
+  }
+  clear() {
+    this._inertiaBuffer = [];
+  }
+  record(settings) {
+    this._drainInertiaBuffer();
+    this._inertiaBuffer.push({
+      time: _browser.browser.now(),
+      settings
+    });
+  }
+  _drainInertiaBuffer() {
+    const inertia = this._inertiaBuffer,
+      now = _browser.browser.now(),
+      cutoff = 160; //msec
+
+    while (inertia.length > 0 && now - inertia[0].time > cutoff) inertia.shift();
+  }
+  _onMoveEnd(panInertiaOptions) {
+    this._drainInertiaBuffer();
+    if (this._inertiaBuffer.length < 2) {
+      return;
+    }
+    const deltas = {
+      zoom: 0,
+      bearing: 0,
+      pitch: 0,
+      pan: new _pointGeometry.default(0, 0),
+      pinchAround: undefined,
+      around: undefined
+    };
+    for (const {
+      settings
+    } of this._inertiaBuffer) {
+      deltas.zoom += settings.zoomDelta || 0;
+      deltas.bearing += settings.bearingDelta || 0;
+      deltas.pitch += settings.pitchDelta || 0;
+      if (settings.panDelta) deltas.pan._add(settings.panDelta);
+      if (settings.around) deltas.around = settings.around;
+      if (settings.pinchAround) deltas.pinchAround = settings.pinchAround;
+    }
+    const lastEntry = this._inertiaBuffer[this._inertiaBuffer.length - 1];
+    const duration = lastEntry.time - this._inertiaBuffer[0].time;
+    const easeOptions = {};
+    if (deltas.pan.mag()) {
+      const result = calculateEasing(deltas.pan.mag(), duration, (0, _util.extend)({}, defaultPanInertiaOptions, panInertiaOptions || {}));
+      easeOptions.offset = deltas.pan.mult(result.amount / deltas.pan.mag());
+      easeOptions.center = this._map.transform.center;
+      extendDuration(easeOptions, result);
+    }
+    if (deltas.zoom) {
+      const result = calculateEasing(deltas.zoom, duration, defaultZoomInertiaOptions);
+      easeOptions.zoom = this._map.transform.zoom + result.amount;
+      extendDuration(easeOptions, result);
+    }
+    if (deltas.bearing) {
+      const result = calculateEasing(deltas.bearing, duration, defaultBearingInertiaOptions);
+      easeOptions.bearing = this._map.transform.bearing + (0, _util.clamp)(result.amount, -179, 179);
+      extendDuration(easeOptions, result);
+    }
+    if (deltas.pitch) {
+      const result = calculateEasing(deltas.pitch, duration, defaultPitchInertiaOptions);
+      easeOptions.pitch = this._map.transform.pitch + result.amount;
+      extendDuration(easeOptions, result);
+    }
+    if (easeOptions.zoom || easeOptions.bearing) {
+      const last = deltas.pinchAround === undefined ? deltas.around : deltas.pinchAround;
+      easeOptions.around = last ? this._map.unproject(last) : this._map.getCenter();
+    }
+    this.clear();
+    return (0, _util.extend)(easeOptions, {
+      noMoveStart: true
+    });
+  }
+}
+
+// Unfortunately zoom, bearing, etc can't have different durations and easings so
+// we need to choose one. We use the longest duration and it's corresponding easing.
+exports.HandlerInertia = HandlerInertia;
+function extendDuration(easeOptions, result) {
+  if (!easeOptions.duration || easeOptions.duration < result.duration) {
+    easeOptions.duration = result.duration;
+    easeOptions.easing = result.easing;
+  }
+}
+function calculateEasing(amount, inertiaDuration, inertiaOptions) {
+  const {
+    maxSpeed,
+    linearity,
+    deceleration
+  } = inertiaOptions;
+  const speed = (0, _util.clamp)(amount * linearity / (inertiaDuration / 1000), -maxSpeed, maxSpeed);
+  const duration = Math.abs(speed) / (deceleration * linearity);
+  return {
+    easing: inertiaOptions.easing,
+    duration: duration * 1000,
+    amount: speed * (duration / 2)
+  };
+}

package/lib/map/handler_manager.d.ts

@@ -0,0 +1,154 @@
+/// <reference types="mapbox__point-geometry" />
+import Point from '@mapbox/point-geometry';
+import { HandlerInertia } from './handler_inertia';
+import type { CompleteMapOptions, Map } from './map';
+import { Event } from './util/evented';
+/**
+ * Handlers interpret dom events and return camera changes that should be
+ * applied to the map (`HandlerResult`s). The camera changes are all deltas.
+ * The handler itself should have no knowledge of the map's current state.
+ * This makes it easier to merge multiple results and keeps handlers simpler.
+ * For example, if there is a mousedown and mousemove, the mousePan handler
+ * would return a `panDelta` on the mousemove.
+ */
+export interface Handler {
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    /**
+     * This is used to indicate if the handler is currently active or not.
+     * In case a handler is active, it will block other handlers from getting the relevant events.
+     * There is an allow list of handlers that can be active at the same time, which is configured when adding a handler.
+     */
+    isActive(): boolean;
+    /**
+     * `reset` can be called by the manager at any time and must reset everything to it's original state
+     */
+    reset(): void;
+    readonly touchstart?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    readonly touchmove?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    readonly touchmoveWindow?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    readonly touchend?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    readonly touchcancel?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    readonly mousedown?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly mousemove?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly mousemoveWindow?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly mouseup?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly mouseupWindow?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly dblclick?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly contextmenu?: (e: MouseEvent) => HandlerResult | void;
+    readonly wheel?: (e: WheelEvent, point: Point) => HandlerResult | void;
+    readonly keydown?: (e: KeyboardEvent) => HandlerResult | void;
+    readonly keyup?: (e: KeyboardEvent) => HandlerResult | void;
+    /**
+     * `renderFrame` is the only non-dom event. It is called during render
+     * frames and can be used to smooth camera changes (see scroll handler).
+     */
+    readonly renderFrame?: () => HandlerResult | void;
+}
+/**
+ * All handler methods that are called with events can optionally return a `HandlerResult`.
+ */
+export type HandlerResult = {
+    panDelta?: Point;
+    zoomDelta?: number;
+    bearingDelta?: number;
+    pitchDelta?: number;
+    /**
+     * the point to not move when changing the camera
+     */
+    around?: Point | null;
+    /**
+     * same as above, except for pinch actions, which are given higher priority
+     */
+    pinchAround?: Point | null;
+    /**
+     * A method that can fire a one-off easing by directly changing the map's camera.
+     */
+    cameraAnimation?: (map: Map) => any;
+    /**
+     * The last three properties are needed by only one handler: scrollzoom.
+     * The DOM event to be used as the `originalEvent` on any camera change events.
+     */
+    originalEvent?: Event;
+    /**
+     * Makes the manager trigger a frame, allowing the handler to return multiple results over time (see scrollzoom).
+     */
+    needsRenderFrame?: boolean;
+    /**
+     * The camera changes won't get recorded for inertial zooming.
+     */
+    noInertia?: boolean;
+};
+export type EventInProgress = {
+    handlerName: string;
+    originalEvent: Event;
+};
+export type EventsInProgress = {
+    zoom?: EventInProgress;
+    pitch?: EventInProgress;
+    rotate?: EventInProgress;
+    drag?: EventInProgress;
+};
+export declare class HandlerManager {
+    _map: Map;
+    _el: HTMLElement;
+    _handlers: Array<{
+        handlerName: string;
+        handler: Handler;
+        allowed: Array<string>;
+    }>;
+    _eventsInProgress: EventsInProgress;
+    _frameId: number;
+    _inertia: HandlerInertia;
+    _bearingSnap: number;
+    _handlersById: {
+        [x: string]: Handler;
+    };
+    _updatingCamera: boolean;
+    _changes: Array<[HandlerResult, EventsInProgress, {
+        [handlerName: string]: Event;
+    }]>;
+    _zoom: {
+        handlerName: string;
+    };
+    _previousActiveHandlers: {
+        [x: string]: Handler;
+    };
+    _listeners: Array<[
+        Window | Document | HTMLElement,
+        string,
+        ({
+            passive?: boolean;
+            capture?: boolean;
+        } | undefined)
+    ]>;
+    constructor(map: Map, options: CompleteMapOptions);
+    destroy(): void;
+    _addDefaultHandlers(options: CompleteMapOptions): void;
+    _add(handlerName: string, handler: Handler, allowed?: Array<string>): void;
+    stop(allowEndAnimation: boolean): void;
+    isActive(): boolean;
+    isZooming(): boolean;
+    isRotating(): boolean;
+    isMoving(): boolean;
+    _blockedByActive(activeHandlers: {
+        [x: string]: Handler;
+    }, allowed: Array<string>, myName: string): boolean;
+    handleWindowEvent: (e: {
+        type: 'mousemove' | 'mouseup' | 'touchmove';
+    }) => void;
+    _getMapTouches(touches: TouchList): TouchList;
+    handleEvent: (e: Event, eventName?: keyof Handler) => void;
+    mergeHandlerResult(mergedHandlerResult: HandlerResult, eventsInProgress: EventsInProgress, handlerResult: HandlerResult, name: string, e?: UIEvent): void;
+    _applyChanges(): void;
+    _updateMapTransform(combinedResult: HandlerResult, combinedEventsInProgress: EventsInProgress, deactivatedHandlers: {
+        [handlerName: string]: Event;
+    }): void;
+    _fireEvents(newEventsInProgress: EventsInProgress, deactivatedHandlers: {
+        [handlerName: string]: Event;
+    }, allowEndAnimation: boolean): void;
+    _fireEvent(type: string, e?: Event): void;
+    _requestFrame(): number;
+    _triggerRenderFrame(): void;
+}