@antv/l7-map 2.25.7 → 2.25.10

package/es/map/handler/drag_move_state_manager.js

@@ -0,0 +1,94 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { DOM } from "../util/dom";
+const LEFT_BUTTON = 0;
+const RIGHT_BUTTON = 2;
+
+// the values for each button in MouseEvent.buttons
+const BUTTONS_FLAGS = {
+  [LEFT_BUTTON]: 1,
+  [RIGHT_BUTTON]: 2
+};
+function buttonNoLongerPressed(e, button) {
+  const flag = BUTTONS_FLAGS[button];
+  return e.buttons === undefined || (e.buttons & flag) !== flag;
+}
+
+/*
+ * Drag events are initiated by specific interaction which needs to be tracked until it ends.
+ * This requires some state management:
+ * 1. registering the initiating event,
+ * 2. tracking that it was not canceled / not confusing it with another event firing.
+ * 3. recognizing the ending event and cleaning up any internal state
+ *
+ * Concretely, we implement two state managers:
+ * 1. MouseMoveStateManager
+ *      Receives a functions that is used to recognize mouse events that should be registered as the
+ *      relevant drag interactions - i.e. dragging with the right mouse button, or while CTRL is pressed.
+ * 2. OneFingerTouchMoveStateManager
+ *      Checks if a drag event is using one finger, and continuously tracking that this is the same event
+ *      (i.e. to make sure not additional finger has started interacting with the screen before raising
+ *      the first finger).
+ */
+
+export class MouseMoveStateManager {
+  constructor(options) {
+    _defineProperty(this, "_eventButton", void 0);
+    _defineProperty(this, "_correctEvent", void 0);
+    this._correctEvent = options.checkCorrectEvent;
+  }
+  startMove(e) {
+    const eventButton = DOM.mouseButton(e);
+    this._eventButton = eventButton;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  endMove(_e) {
+    delete this._eventButton;
+  }
+  isValidStartEvent(e) {
+    return this._correctEvent(e);
+  }
+  isValidMoveEvent(e) {
+    // Some browsers don't fire a `mouseup` when the mouseup occurs outside
+    // the window or iframe:
+    // https://github.com/mapbox/mapbox-gl-js/issues/4622
+    //
+    // If the button is no longer pressed during this `mousemove` it may have
+    // been released outside of the window or iframe.
+    return !buttonNoLongerPressed(e, this._eventButton);
+  }
+  isValidEndEvent(e) {
+    const eventButton = DOM.mouseButton(e);
+    return eventButton === this._eventButton;
+  }
+}
+export class OneFingerTouchMoveStateManager {
+  constructor() {
+    _defineProperty(this, "_firstTouch", void 0);
+    this._firstTouch = undefined;
+  }
+  _isOneFingerTouch(e) {
+    return e.targetTouches.length === 1;
+  }
+  _isSameTouchEvent(e) {
+    return e.targetTouches[0].identifier === this._firstTouch;
+  }
+  startMove(e) {
+    const firstTouch = e.targetTouches[0].identifier;
+    this._firstTouch = firstTouch;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  endMove(_e) {
+    delete this._firstTouch;
+  }
+  isValidStartEvent(e) {
+    return this._isOneFingerTouch(e);
+  }
+  isValidMoveEvent(e) {
+    return this._isOneFingerTouch(e) && this._isSameTouchEvent(e);
+  }
+  isValidEndEvent(e) {
+    return this._isOneFingerTouch(e) && this._isSameTouchEvent(e);
+  }
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+export declare function indexTouches(touches: Array<Touch>, points: Array<Point>): {};

package/es/map/handler/handler_util.js

@@ -0,0 +1,8 @@
+export function indexTouches(touches, points) {
+  if (touches.length !== points.length) throw new Error(`The number of touches and points are not equal - touches ${touches.length}, points ${points.length}`);
+  const obj = {};
+  for (let i = 0; i < touches.length; i++) {
+    obj[touches[i].identifier] = points[i];
+  }
+  return obj;
+}

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

@@ -0,0 +1,88 @@
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+import { TransformProvider } from './transform-provider';
+/**
+ * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using
+ * the following keyboard shortcuts:
+ *
+ * - `=` / `+`: Increase the zoom level by 1.
+ * - `Shift-=` / `Shift-+`: Increase the zoom level by 2.
+ * - `-`: Decrease the zoom level by 1.
+ * - `Shift--`: Decrease the zoom level by 2.
+ * - Arrow keys: Pan by 100 pixels.
+ * - `Shift+⇢`: Increase the rotation by 15 degrees.
+ * - `Shift+⇠`: Decrease the rotation by 15 degrees.
+ * - `Shift+⇡`: Increase the pitch by 10 degrees.
+ * - `Shift+⇣`: Decrease the pitch by 10 degrees.
+ *
+ * @group Handlers
+ */
+export declare class KeyboardHandler implements Handler {
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+    _panStep: number;
+    _bearingStep: number;
+    _pitchStep: number;
+    _rotationDisabled: boolean;
+    /** @internal */
+    constructor(map: Map);
+    reset(): void;
+    keydown(e: KeyboardEvent): {
+        cameraAnimation: (map: Map) => void;
+    };
+    /**
+     * Enables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.enable();
+     * ```
+     */
+    enable(): void;
+    /**
+     * Disables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.disable();
+     * ```
+     */
+    disable(): void;
+    /**
+     * Returns a Boolean indicating whether the "keyboard rotate and zoom"
+     * interaction is enabled.
+     *
+     * @returns `true` if the "keyboard 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 enabled and has detected the
+     * start of a zoom/rotate gesture.
+     */
+    isActive(): boolean;
+    /**
+     * Disables the "keyboard pan/rotate" interaction, leaving the
+     * "keyboard zoom" interaction enabled.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.disableRotation();
+     * ```
+     */
+    disableRotation(): void;
+    /**
+     * Enables the "keyboard pan/rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.enable();
+     * map.keyboard.enableRotation();
+     * ```
+     */
+    enableRotation(): void;
+}

package/es/map/handler/keyboard.js

@@ -0,0 +1,197 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { TransformProvider } from "./transform-provider";
+const defaultOptions = {
+  panStep: 100,
+  bearingStep: 15,
+  pitchStep: 10
+};
+
+/**
+ * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using
+ * the following keyboard shortcuts:
+ *
+ * - `=` / `+`: Increase the zoom level by 1.
+ * - `Shift-=` / `Shift-+`: Increase the zoom level by 2.
+ * - `-`: Decrease the zoom level by 1.
+ * - `Shift--`: Decrease the zoom level by 2.
+ * - Arrow keys: Pan by 100 pixels.
+ * - `Shift+⇢`: Increase the rotation by 15 degrees.
+ * - `Shift+⇠`: Decrease the rotation by 15 degrees.
+ * - `Shift+⇡`: Increase the pitch by 10 degrees.
+ * - `Shift+⇣`: Decrease the pitch by 10 degrees.
+ *
+ * @group Handlers
+ */
+export class KeyboardHandler {
+  /** @internal */
+  constructor(map) {
+    _defineProperty(this, "_tr", void 0);
+    _defineProperty(this, "_enabled", void 0);
+    _defineProperty(this, "_active", void 0);
+    _defineProperty(this, "_panStep", void 0);
+    _defineProperty(this, "_bearingStep", void 0);
+    _defineProperty(this, "_pitchStep", void 0);
+    _defineProperty(this, "_rotationDisabled", void 0);
+    this._tr = new TransformProvider(map);
+    const stepOptions = defaultOptions;
+    this._panStep = stepOptions.panStep;
+    this._bearingStep = stepOptions.bearingStep;
+    this._pitchStep = stepOptions.pitchStep;
+    this._rotationDisabled = false;
+  }
+  reset() {
+    this._active = false;
+  }
+  keydown(e) {
+    if (e.altKey || e.ctrlKey || e.metaKey) return;
+    let zoomDir = 0;
+    let bearingDir = 0;
+    let pitchDir = 0;
+    let xDir = 0;
+    let yDir = 0;
+    switch (e.keyCode) {
+      case 61:
+      case 107:
+      case 171:
+      case 187:
+        zoomDir = 1;
+        break;
+      case 189:
+      case 109:
+      case 173:
+        zoomDir = -1;
+        break;
+      case 37:
+        if (e.shiftKey) {
+          bearingDir = -1;
+        } else {
+          e.preventDefault();
+          xDir = -1;
+        }
+        break;
+      case 39:
+        if (e.shiftKey) {
+          bearingDir = 1;
+        } else {
+          e.preventDefault();
+          xDir = 1;
+        }
+        break;
+      case 38:
+        if (e.shiftKey) {
+          pitchDir = 1;
+        } else {
+          e.preventDefault();
+          yDir = -1;
+        }
+        break;
+      case 40:
+        if (e.shiftKey) {
+          pitchDir = -1;
+        } else {
+          e.preventDefault();
+          yDir = 1;
+        }
+        break;
+      default:
+        return;
+    }
+    if (this._rotationDisabled) {
+      bearingDir = 0;
+      pitchDir = 0;
+    }
+    return {
+      cameraAnimation: map => {
+        const tr = this._tr;
+        map.easeTo({
+          duration: 300,
+          easeId: 'keyboardHandler',
+          easing: easeOut,
+          zoom: zoomDir ? Math.round(tr.zoom) + zoomDir * (e.shiftKey ? 2 : 1) : tr.zoom,
+          bearing: tr.bearing + bearingDir * this._bearingStep,
+          pitch: tr.pitch + pitchDir * this._pitchStep,
+          offset: [-xDir * this._panStep, -yDir * this._panStep],
+          center: tr.center
+        }, {
+          originalEvent: e
+        });
+      }
+    };
+  }
+
+  /**
+   * Enables the "keyboard rotate and zoom" interaction.
+   *
+   * @example
+   * ```ts
+   * map.keyboard.enable();
+   * ```
+   */
+  enable() {
+    this._enabled = true;
+  }
+
+  /**
+   * Disables the "keyboard rotate and zoom" interaction.
+   *
+   * @example
+   * ```ts
+   * map.keyboard.disable();
+   * ```
+   */
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "keyboard rotate and zoom"
+   * interaction is enabled.
+   *
+   * @returns `true` if the "keyboard rotate and zoom"
+   * interaction is enabled.
+   */
+  isEnabled() {
+    return this._enabled;
+  }
+
+  /**
+   * Returns true if the handler is enabled and has detected the start of a
+   * zoom/rotate gesture.
+   *
+   * @returns `true` if the handler is enabled and has detected the
+   * start of a zoom/rotate gesture.
+   */
+  isActive() {
+    return this._active;
+  }
+
+  /**
+   * Disables the "keyboard pan/rotate" interaction, leaving the
+   * "keyboard zoom" interaction enabled.
+   *
+   * @example
+   * ```ts
+   * map.keyboard.disableRotation();
+   * ```
+   */
+  disableRotation() {
+    this._rotationDisabled = true;
+  }
+
+  /**
+   * Enables the "keyboard pan/rotate" interaction.
+   *
+   * @example
+   * ```ts
+   * map.keyboard.enable();
+   * map.keyboard.enableRotation();
+   * ```
+   */
+  enableRotation() {
+    this._rotationDisabled = false;
+  }
+}
+function easeOut(t) {
+  return t * (2 - t);
+}

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

@@ -0,0 +1,46 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import { MapMouseEvent, MapTouchEvent, MapWheelEvent } from '../events';
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+export declare class MapEventHandler implements Handler {
+    _mousedownPos: Point;
+    _clickTolerance: number;
+    _map: Map;
+    constructor(map: Map, options: {
+        clickTolerance: number;
+    });
+    reset(): void;
+    wheel(e: WheelEvent): {};
+    mousedown(e: MouseEvent, point: Point): {};
+    mouseup(e: MouseEvent): void;
+    click(e: MouseEvent, point: Point): void;
+    dblclick(e: MouseEvent): {};
+    mouseover(e: MouseEvent): void;
+    mouseout(e: MouseEvent): void;
+    touchstart(e: TouchEvent): {};
+    touchmove(e: TouchEvent): void;
+    touchend(e: TouchEvent): void;
+    touchcancel(e: TouchEvent): void;
+    _firePreventable(mapEvent: MapMouseEvent | MapTouchEvent | MapWheelEvent): {};
+    isEnabled(): boolean;
+    isActive(): boolean;
+    enable(): void;
+    disable(): void;
+}
+export declare class BlockableMapEventHandler {
+    _map: Map;
+    _delayContextMenu: boolean;
+    _ignoreContextMenu: boolean;
+    _contextMenuEvent: MouseEvent;
+    constructor(map: Map);
+    reset(): void;
+    mousemove(e: MouseEvent): void;
+    mousedown(): void;
+    mouseup(): void;
+    contextmenu(e: MouseEvent): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+    enable(): void;
+    disable(): void;
+}

package/es/map/handler/map_event.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { MapMouseEvent, MapTouchEvent, MapWheelEvent } from "../events";
+export class MapEventHandler {
+  constructor(map, options) {
+    _defineProperty(this, "_mousedownPos", void 0);
+    _defineProperty(this, "_clickTolerance", void 0);
+    _defineProperty(this, "_map", void 0);
+    this._map = map;
+    this._clickTolerance = options.clickTolerance;
+  }
+  reset() {
+    delete this._mousedownPos;
+  }
+  wheel(e) {
+    // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+    // - ScrollZoom
+    return this._firePreventable(new MapWheelEvent(e.type, this._map, e));
+  }
+  mousedown(e, point) {
+    this._mousedownPos = point;
+    // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+    // - MousePan
+    // - MouseRotate
+    // - MousePitch
+    // - DblclickHandler
+    return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+  }
+  mouseup(e) {
+    this._map.fire(new MapMouseEvent(e.type, this._map, e));
+  }
+  click(e, point) {
+    if (this._mousedownPos && this._mousedownPos.dist(point) >= this._clickTolerance) return;
+    this._map.fire(new MapMouseEvent(e.type, this._map, e));
+  }
+  dblclick(e) {
+    // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+    // - DblClickZoom
+    return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+  }
+  mouseover(e) {
+    this._map.fire(new MapMouseEvent(e.type, this._map, e));
+  }
+  mouseout(e) {
+    this._map.fire(new MapMouseEvent(e.type, this._map, e));
+  }
+  touchstart(e) {
+    // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+    // - TouchPan
+    // - TouchZoom
+    // - TouchRotate
+    // - TouchPitch
+    // - TapZoom
+    // - SwipeZoom
+    return this._firePreventable(new MapTouchEvent(e.type, this._map, e));
+  }
+  touchmove(e) {
+    this._map.fire(new MapTouchEvent(e.type, this._map, e));
+  }
+  touchend(e) {
+    this._map.fire(new MapTouchEvent(e.type, this._map, e));
+  }
+  touchcancel(e) {
+    this._map.fire(new MapTouchEvent(e.type, this._map, e));
+  }
+  _firePreventable(mapEvent) {
+    this._map.fire(mapEvent);
+    if (mapEvent.defaultPrevented) {
+      // returning an object marks the handler as active and resets other handlers
+      return {};
+    }
+  }
+  isEnabled() {
+    return true;
+  }
+  isActive() {
+    return false;
+  }
+  enable() {}
+  disable() {}
+}
+export class BlockableMapEventHandler {
+  constructor(map) {
+    _defineProperty(this, "_map", void 0);
+    _defineProperty(this, "_delayContextMenu", void 0);
+    _defineProperty(this, "_ignoreContextMenu", void 0);
+    _defineProperty(this, "_contextMenuEvent", void 0);
+    this._map = map;
+  }
+  reset() {
+    this._delayContextMenu = false;
+    this._ignoreContextMenu = true;
+    delete this._contextMenuEvent;
+  }
+  mousemove(e) {
+    // mousemove map events should not be fired when interaction handlers (pan, rotate, etc) are active
+    this._map.fire(new MapMouseEvent(e.type, this._map, e));
+  }
+  mousedown() {
+    this._delayContextMenu = true;
+    this._ignoreContextMenu = false;
+  }
+  mouseup() {
+    this._delayContextMenu = false;
+    if (this._contextMenuEvent) {
+      this._map.fire(new MapMouseEvent('contextmenu', this._map, this._contextMenuEvent));
+      delete this._contextMenuEvent;
+    }
+  }
+  contextmenu(e) {
+    if (this._delayContextMenu) {
+      // Mac: contextmenu fired on mousedown; we save it until mouseup for consistency's sake
+      this._contextMenuEvent = e;
+    } else if (!this._ignoreContextMenu) {
+      // Windows: contextmenu fired on mouseup, so fire event now
+      this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    // prevent browser context menu when necessary
+    if (this._map.listens('contextmenu')) {
+      e.preventDefault();
+    }
+  }
+  isEnabled() {
+    return true;
+  }
+  isActive() {
+    return false;
+  }
+  enable() {}
+  disable() {}
+}

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

@@ -0,0 +1,30 @@
+import type { DragMoveHandler, DragPanResult, DragPitchResult, DragRotateResult } from './drag_handler';
+/**
+ * `MousePanHandler` allows the user to pan the map by clicking and dragging
+ */
+export interface MousePanHandler extends DragMoveHandler<DragPanResult, MouseEvent> {
+}
+/**
+ * `MouseRotateHandler` allows the user to rotate the map by clicking and dragging
+ */
+export interface MouseRotateHandler extends DragMoveHandler<DragRotateResult, MouseEvent> {
+}
+/**
+ * `MousePitchHandler` allows the user to zoom the map by pitching
+ */
+export interface MousePitchHandler extends DragMoveHandler<DragPitchResult, MouseEvent> {
+}
+export declare const generateMousePanHandler: ({ enable, clickTolerance, }: {
+    clickTolerance: number;
+    enable?: boolean;
+}) => MousePanHandler;
+export declare const generateMouseRotationHandler: ({ enable, clickTolerance, bearingDegreesPerPixelMoved, }: {
+    clickTolerance: number;
+    bearingDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}) => MouseRotateHandler;
+export declare const generateMousePitchHandler: ({ enable, clickTolerance, pitchDegreesPerPixelMoved, }: {
+    clickTolerance: number;
+    pitchDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}) => MousePitchHandler;

package/es/map/handler/mouse.js

@@ -0,0 +1,85 @@
+import { DOM } from "../util/dom";
+import { DragHandler } from "./drag_handler";
+import { MouseMoveStateManager } from "./drag_move_state_manager";
+
+/**
+ * `MousePanHandler` allows the user to pan the map by clicking and dragging
+ */
+
+/**
+ * `MouseRotateHandler` allows the user to rotate the map by clicking and dragging
+ */
+
+/**
+ * `MousePitchHandler` allows the user to zoom the map by pitching
+ */
+
+const LEFT_BUTTON = 0;
+const RIGHT_BUTTON = 2;
+const assignEvents = handler => {
+  handler.mousedown = handler.dragStart;
+  handler.mousemoveWindow = handler.dragMove;
+  handler.mouseup = handler.dragEnd;
+  handler.contextmenu = e => {
+    e.preventDefault();
+  };
+};
+export const generateMousePanHandler = ({
+  enable,
+  clickTolerance
+}) => {
+  const mouseMoveStateManager = new MouseMoveStateManager({
+    checkCorrectEvent: e => DOM.mouseButton(e) === LEFT_BUTTON && !e.ctrlKey
+  });
+  return new DragHandler({
+    clickTolerance,
+    move: (lastPoint, point) => ({
+      around: point,
+      panDelta: point.sub(lastPoint)
+    }),
+    activateOnStart: true,
+    moveStateManager: mouseMoveStateManager,
+    enable,
+    assignEvents
+  });
+};
+export const generateMouseRotationHandler = ({
+  enable,
+  clickTolerance,
+  bearingDegreesPerPixelMoved = 0.8
+}) => {
+  const mouseMoveStateManager = new MouseMoveStateManager({
+    checkCorrectEvent: e => DOM.mouseButton(e) === LEFT_BUTTON && e.ctrlKey || DOM.mouseButton(e) === RIGHT_BUTTON
+  });
+  return new DragHandler({
+    clickTolerance,
+    move: (lastPoint, point) => ({
+      bearingDelta: (point.x - lastPoint.x) * bearingDegreesPerPixelMoved
+    }),
+    // prevent browser context menu when necessary; we don't allow it with rotation
+    // because we can't discern rotation gesture start from contextmenu on Mac
+    moveStateManager: mouseMoveStateManager,
+    enable,
+    assignEvents
+  });
+};
+export const generateMousePitchHandler = ({
+  enable,
+  clickTolerance,
+  pitchDegreesPerPixelMoved = -0.5
+}) => {
+  const mouseMoveStateManager = new MouseMoveStateManager({
+    checkCorrectEvent: e => DOM.mouseButton(e) === LEFT_BUTTON && e.ctrlKey || DOM.mouseButton(e) === RIGHT_BUTTON
+  });
+  return new DragHandler({
+    clickTolerance,
+    move: (lastPoint, point) => ({
+      pitchDelta: (point.y - lastPoint.y) * pitchDegreesPerPixelMoved
+    }),
+    // prevent browser context menu when necessary; we don't allow it with rotation
+    // because we can't discern rotation gesture start from contextmenu on Mac
+    moveStateManager: mouseMoveStateManager,
+    enable,
+    assignEvents
+  });
+};

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

@@ -0,0 +1,15 @@
+import type { DragMoveHandler, DragPitchResult, DragRotateResult } from './drag_handler';
+export interface OneFingerTouchRotateHandler extends DragMoveHandler<DragRotateResult, TouchEvent> {
+}
+export interface OneFingerTouchPitchHandler extends DragMoveHandler<DragPitchResult, TouchEvent> {
+}
+export declare const generateOneFingerTouchRotationHandler: ({ enable, clickTolerance, bearingDegreesPerPixelMoved, }: {
+    clickTolerance: number;
+    bearingDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}) => OneFingerTouchRotateHandler;
+export declare const generateOneFingerTouchPitchHandler: ({ enable, clickTolerance, pitchDegreesPerPixelMoved, }: {
+    clickTolerance: number;
+    pitchDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}) => OneFingerTouchPitchHandler;