@antv/l7-map 2.25.7 → 2.25.10

package/lib/map/handler/box_zoom.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="mapbox__point-geometry" />
+import { TransformProvider } from './transform-provider';
+import type Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+/**
+ * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.
+ * The bounding box is defined by clicking and holding `shift` while dragging the cursor.
+ *
+ * @group Handlers
+ */
+export declare class BoxZoomHandler implements Handler {
+    _map: Map;
+    _tr: TransformProvider;
+    _el: HTMLElement;
+    _container: HTMLElement;
+    _enabled: boolean;
+    _active: boolean;
+    _startPos: Point;
+    _lastPos: Point;
+    _box: HTMLElement;
+    _clickTolerance: number;
+    /** @internal */
+    constructor(map: Map, options: {
+        clickTolerance: number;
+    });
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
+     *
+     * @returns `true` if the "box zoom" interaction is enabled.
+     */
+    isEnabled(): boolean;
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
+     *
+     * @returns `true` if the "box zoom" interaction is active.
+     */
+    isActive(): boolean;
+    /**
+     * Enables the "box zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.boxZoom.enable();
+     * ```
+     */
+    enable(): void;
+    /**
+     * Disables the "box zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.boxZoom.disable();
+     * ```
+     */
+    disable(): void;
+    mousedown(e: MouseEvent, point: Point): void;
+    mousemoveWindow(e: MouseEvent, point: Point): void;
+    mouseupWindow(e: MouseEvent, point: Point): {
+        cameraAnimation: (map: any) => any;
+    };
+    keydown(e: KeyboardEvent): void;
+    reset(): void;
+    _fireEvent(type: string, e: any): Map;
+}

package/lib/map/handler/box_zoom.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoxZoomHandler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dom = require("../util/dom");
+var _evented = require("../util/evented");
+var _transformProvider = require("./transform-provider");
+/**
+ * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.
+ * The bounding box is defined by clicking and holding `shift` while dragging the cursor.
+ *
+ * @group Handlers
+ */
+class BoxZoomHandler {
+  /** @internal */
+  constructor(map, options) {
+    (0, _defineProperty2.default)(this, "_map", void 0);
+    (0, _defineProperty2.default)(this, "_tr", void 0);
+    (0, _defineProperty2.default)(this, "_el", void 0);
+    (0, _defineProperty2.default)(this, "_container", void 0);
+    (0, _defineProperty2.default)(this, "_enabled", void 0);
+    (0, _defineProperty2.default)(this, "_active", void 0);
+    (0, _defineProperty2.default)(this, "_startPos", void 0);
+    (0, _defineProperty2.default)(this, "_lastPos", void 0);
+    (0, _defineProperty2.default)(this, "_box", void 0);
+    (0, _defineProperty2.default)(this, "_clickTolerance", void 0);
+    this._map = map;
+    this._tr = new _transformProvider.TransformProvider(map);
+    this._el = map.getCanvasContainer();
+    this._container = map.getContainer();
+    this._clickTolerance = options.clickTolerance || 1;
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
+   *
+   * @returns `true` if the "box zoom" interaction is enabled.
+   */
+  isEnabled() {
+    return !!this._enabled;
+  }
+
+  /**
+   * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
+   *
+   * @returns `true` if the "box zoom" interaction is active.
+   */
+  isActive() {
+    return !!this._active;
+  }
+
+  /**
+   * Enables the "box zoom" interaction.
+   *
+   * @example
+   * ```ts
+   * map.boxZoom.enable();
+   * ```
+   */
+  enable() {
+    if (this.isEnabled()) return;
+    this._enabled = true;
+  }
+
+  /**
+   * Disables the "box zoom" interaction.
+   *
+   * @example
+   * ```ts
+   * map.boxZoom.disable();
+   * ```
+   */
+  disable() {
+    if (!this.isEnabled()) return;
+    this._enabled = false;
+  }
+  mousedown(e, point) {
+    if (!this.isEnabled()) return;
+    if (!(e.shiftKey && e.button === 0)) return;
+    _dom.DOM.disableDrag();
+    this._startPos = this._lastPos = point;
+    this._active = true;
+  }
+  mousemoveWindow(e, point) {
+    if (!this._active) return;
+    const pos = point;
+    if (this._lastPos.equals(pos) || !this._box && pos.dist(this._startPos) < this._clickTolerance) {
+      return;
+    }
+    const p0 = this._startPos;
+    this._lastPos = pos;
+    if (!this._box) {
+      this._box = _dom.DOM.create('div', 'l7-boxzoom', this._container);
+      this._container.classList.add('l7-crosshair');
+      this._fireEvent('boxzoomstart', e);
+    }
+    const minX = Math.min(p0.x, pos.x),
+      maxX = Math.max(p0.x, pos.x),
+      minY = Math.min(p0.y, pos.y),
+      maxY = Math.max(p0.y, pos.y);
+    _dom.DOM.setTransform(this._box, `translate(${minX}px,${minY}px)`);
+    this._box.style.width = `${maxX - minX}px`;
+    this._box.style.height = `${maxY - minY}px`;
+  }
+  mouseupWindow(e, point) {
+    if (!this._active) return;
+    if (e.button !== 0) return;
+    const p0 = this._startPos,
+      p1 = point;
+    this.reset();
+    _dom.DOM.suppressClick();
+    if (p0.x === p1.x && p0.y === p1.y) {
+      this._fireEvent('boxzoomcancel', e);
+    } else {
+      this._map.fire(new _evented.Event('boxzoomend', {
+        originalEvent: e
+      }));
+      return {
+        cameraAnimation: map => map.fitScreenCoordinates(p0, p1, this._tr.bearing, {
+          linear: true
+        })
+      };
+    }
+  }
+  keydown(e) {
+    if (!this._active) return;
+    if (e.keyCode === 27) {
+      this.reset();
+      this._fireEvent('boxzoomcancel', e);
+    }
+  }
+  reset() {
+    this._active = false;
+    this._container.classList.remove('l7-crosshair');
+    if (this._box) {
+      _dom.DOM.remove(this._box);
+      this._box = null;
+    }
+    _dom.DOM.enableDrag();
+    delete this._startPos;
+    delete this._lastPos;
+  }
+  _fireEvent(type, e) {
+    return this._map.fire(new _evented.Event(type, {
+      originalEvent: e
+    }));
+  }
+}
+exports.BoxZoomHandler = BoxZoomHandler;

package/lib/map/handler/click_zoom.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+import { TransformProvider } from './transform-provider';
+/**
+ * The `ClickZoomHandler` allows the user to zoom the map at a point by double clicking
+ * It is used by other handlers
+ */
+export declare class ClickZoomHandler implements Handler {
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+    /** @internal */
+    constructor(map: Map);
+    reset(): void;
+    dblclick(e: MouseEvent, point: Point): {
+        cameraAnimation: (map: Map) => void;
+    };
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}

package/lib/map/handler/click_zoom.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClickZoomHandler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _transformProvider = require("./transform-provider");
+/**
+ * The `ClickZoomHandler` allows the user to zoom the map at a point by double clicking
+ * It is used by other handlers
+ */
+class ClickZoomHandler {
+  /** @internal */
+  constructor(map) {
+    (0, _defineProperty2.default)(this, "_tr", void 0);
+    (0, _defineProperty2.default)(this, "_enabled", void 0);
+    (0, _defineProperty2.default)(this, "_active", void 0);
+    this._tr = new _transformProvider.TransformProvider(map);
+    this.reset();
+  }
+  reset() {
+    this._active = false;
+  }
+  dblclick(e, point) {
+    e.preventDefault();
+    return {
+      cameraAnimation: map => {
+        map.easeTo({
+          duration: 300,
+          zoom: this._tr.zoom + (e.shiftKey ? -1 : 1),
+          around: this._tr.unproject(point)
+        }, {
+          originalEvent: e
+        });
+      }
+    };
+  }
+  enable() {
+    this._enabled = true;
+  }
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+  isEnabled() {
+    return this._enabled;
+  }
+  isActive() {
+    return this._active;
+  }
+}
+exports.ClickZoomHandler = ClickZoomHandler;

package/lib/map/handler/cooperative_gestures.d.ts

@@ -0,0 +1,40 @@
+import type { Handler } from '../handler_manager';
+import type { Map } from '../map';
+/**
+ * The {@link CooperativeGesturesHandler} options object for the gesture settings
+ */
+export type GestureOptions = boolean;
+/**
+ * A `CooperativeGestureHandler` is a control that adds cooperative gesture info when user tries to zoom in/out.
+ *
+ * @group Handlers
+ *
+ * @example
+ * ```ts
+ * const map = new Map({
+ *   cooperativeGestures: true
+ * });
+ * ```
+ * @see [Example: cooperative gestures](https://maplibre.org/maplibre-gl-js-docs/example/cooperative-gestures/)
+ **/
+export declare class CooperativeGesturesHandler implements Handler {
+    _options: GestureOptions;
+    _map: Map;
+    _container: HTMLElement;
+    /**
+     * This is the key that will allow to bypass the cooperative gesture protection
+     */
+    _bypassKey: 'metaKey' | 'ctrlKey';
+    _enabled: boolean;
+    constructor(map: Map, options: GestureOptions);
+    isActive(): boolean;
+    reset(): void;
+    _setupUI(): void;
+    _destoryUI(): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    touchmove(e: TouchEvent): void;
+    wheel(e: WheelEvent): void;
+    _onCooperativeGesture(showNotification: boolean): void;
+}

package/lib/map/handler/cooperative_gestures.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CooperativeGesturesHandler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dom = require("../util/dom");
+/**
+ * The {@link CooperativeGesturesHandler} options object for the gesture settings
+ */
+
+/**
+ * A `CooperativeGestureHandler` is a control that adds cooperative gesture info when user tries to zoom in/out.
+ *
+ * @group Handlers
+ *
+ * @example
+ * ```ts
+ * const map = new Map({
+ *   cooperativeGestures: true
+ * });
+ * ```
+ * @see [Example: cooperative gestures](https://maplibre.org/maplibre-gl-js-docs/example/cooperative-gestures/)
+ **/
+class CooperativeGesturesHandler {
+  constructor(map, options) {
+    (0, _defineProperty2.default)(this, "_options", void 0);
+    (0, _defineProperty2.default)(this, "_map", void 0);
+    (0, _defineProperty2.default)(this, "_container", void 0);
+    /**
+     * This is the key that will allow to bypass the cooperative gesture protection
+     */
+    (0, _defineProperty2.default)(this, "_bypassKey", navigator.userAgent.indexOf('Mac') !== -1 ? 'metaKey' : 'ctrlKey');
+    (0, _defineProperty2.default)(this, "_enabled", void 0);
+    this._map = map;
+    this._options = options;
+    this._enabled = false;
+  }
+  isActive() {
+    return false;
+  }
+  reset() {}
+  _setupUI() {
+    if (this._container) return;
+    const mapCanvasContainer = this._map.getCanvasContainer();
+    // Add a cooperative gestures class (enable touch-action: pan-x pan-y;)
+    mapCanvasContainer.classList.add('l7-cooperative-gestures');
+    this._container = _dom.DOM.create('div', 'l7-cooperative-gesture-screen', mapCanvasContainer);
+    // Create and append the desktop message div
+    const desktopDiv = document.createElement('div');
+    desktopDiv.className = 'l7-desktop-message';
+    desktopDiv.textContent = 'Missing UI string';
+    this._container.appendChild(desktopDiv);
+    // Create and append the mobile message div
+    const mobileDiv = document.createElement('div');
+    mobileDiv.className = 'l7-mobile-message';
+    mobileDiv.textContent = 'Missing UI string';
+    this._container.appendChild(mobileDiv);
+    // Remove cooperative gesture screen from the accessibility tree since screenreaders cannot interact with the map using gestures
+    this._container.setAttribute('aria-hidden', 'true');
+  }
+  _destoryUI() {
+    if (this._container) {
+      _dom.DOM.remove(this._container);
+      const mapCanvasContainer = this._map.getCanvasContainer();
+      mapCanvasContainer.classList.remove('l7-cooperative-gestures');
+    }
+    delete this._container;
+  }
+  enable() {
+    this._setupUI();
+    this._enabled = true;
+  }
+  disable() {
+    this._enabled = false;
+    this._destoryUI();
+  }
+  isEnabled() {
+    return this._enabled;
+  }
+  touchmove(e) {
+    this._onCooperativeGesture(e.touches.length === 1);
+  }
+  wheel(e) {
+    if (!this._map.scrollZoom.isEnabled()) {
+      return;
+    }
+    this._onCooperativeGesture(!e[this._bypassKey]);
+  }
+  _onCooperativeGesture(showNotification) {
+    if (!this._enabled || !showNotification) return;
+    // Alert user how to scroll/pan
+    this._container.classList.add('l7-show');
+    setTimeout(() => {
+      this._container.classList.remove('l7-show');
+    }, 100);
+  }
+}
+exports.CooperativeGesturesHandler = CooperativeGesturesHandler;

package/lib/map/handler/drag_handler.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="mapbox__point-geometry" />
+import type Point from '@mapbox/point-geometry';
+import type { Handler } from '../handler_manager';
+import type { DragMoveStateManager } from './drag_move_state_manager';
+interface DragMovementResult {
+    bearingDelta?: number;
+    pitchDelta?: number;
+    around?: Point;
+    panDelta?: Point;
+}
+export interface DragPanResult extends DragMovementResult {
+    around: Point;
+    panDelta: Point;
+}
+export interface DragRotateResult extends DragMovementResult {
+    bearingDelta: number;
+}
+export interface DragPitchResult extends DragMovementResult {
+    pitchDelta: number;
+}
+type DragMoveFunction<T extends DragMovementResult> = (lastPoint: Point, point: Point) => T;
+export interface DragMoveHandler<T extends DragMovementResult, E extends Event> extends Handler {
+    dragStart: (e: E, point: Point) => void;
+    dragMove: (e: E, point: Point) => T | void;
+    dragEnd: (e: E) => void;
+    getClickTolerance: () => number;
+}
+export type DragMoveHandlerOptions<T, E extends Event> = {
+    /**
+     * If the movement is shorter than this value, consider it a click.
+     */
+    clickTolerance: number;
+    /**
+     * The move function to run on a valid movement.
+     */
+    move: DragMoveFunction<T>;
+    /**
+     * A class used to manage the state of the drag event - start, checking valid moves, end. See the class documentation for more details.
+     */
+    moveStateManager: DragMoveStateManager<E>;
+    /**
+     * A method used to assign the dragStart, dragMove, and dragEnd methods to the relevant event handlers, as well as assigning the contextmenu handler
+     * @param handler - the handler
+     */
+    assignEvents: (handler: DragMoveHandler<T, E>) => void;
+    /**
+     * Should the move start on the "start" event, or should it start on the first valid move.
+     */
+    activateOnStart?: boolean;
+    /**
+     * If true, handler will be enabled during construction
+     */
+    enable?: boolean;
+};
+/**
+ * A generic class to create handlers for drag events, from both mouse and touch events.
+ */
+export declare class DragHandler<T extends DragMovementResult, E extends Event> implements DragMoveHandler<T, E> {
+    contextmenu?: Handler['contextmenu'];
+    mousedown?: Handler['mousedown'];
+    mousemoveWindow?: Handler['mousemoveWindow'];
+    mouseup?: Handler['mouseup'];
+    touchstart?: Handler['touchstart'];
+    touchmoveWindow?: Handler['touchmoveWindow'];
+    touchend?: Handler['touchend'];
+    _clickTolerance: number;
+    _moveFunction: DragMoveFunction<T>;
+    _activateOnStart: boolean;
+    _active: boolean;
+    _enabled: boolean;
+    _moved: boolean;
+    _lastPoint: Point | null;
+    _moveStateManager: DragMoveStateManager<E>;
+    constructor(options: DragMoveHandlerOptions<T, E>);
+    reset(e?: E): void;
+    _move(...params: Parameters<DragMoveFunction<T>>): T;
+    dragStart(e: E, point: Point): any;
+    dragStart(e: E, point: Point[]): any;
+    dragMove(e: E, point: Point): any;
+    dragMove(e: E, point: Point[]): any;
+    dragEnd(e: E): void;
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+    getClickTolerance(): number;
+}
+export {};

package/lib/map/handler/drag_handler.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dom = require("../util/dom");
+/**
+ * A generic class to create handlers for drag events, from both mouse and touch events.
+ */
+class DragHandler {
+  constructor(options) {
+    // Event handlers that may be assigned by the implementations of this class
+    (0, _defineProperty2.default)(this, "contextmenu", void 0);
+    (0, _defineProperty2.default)(this, "mousedown", void 0);
+    (0, _defineProperty2.default)(this, "mousemoveWindow", void 0);
+    (0, _defineProperty2.default)(this, "mouseup", void 0);
+    (0, _defineProperty2.default)(this, "touchstart", void 0);
+    (0, _defineProperty2.default)(this, "touchmoveWindow", void 0);
+    (0, _defineProperty2.default)(this, "touchend", void 0);
+    (0, _defineProperty2.default)(this, "_clickTolerance", void 0);
+    (0, _defineProperty2.default)(this, "_moveFunction", void 0);
+    (0, _defineProperty2.default)(this, "_activateOnStart", void 0);
+    (0, _defineProperty2.default)(this, "_active", void 0);
+    (0, _defineProperty2.default)(this, "_enabled", void 0);
+    (0, _defineProperty2.default)(this, "_moved", void 0);
+    (0, _defineProperty2.default)(this, "_lastPoint", void 0);
+    (0, _defineProperty2.default)(this, "_moveStateManager", void 0);
+    this._enabled = !!options.enable;
+    this._moveStateManager = options.moveStateManager;
+    this._clickTolerance = options.clickTolerance || 1;
+    this._moveFunction = options.move;
+    this._activateOnStart = !!options.activateOnStart;
+    options.assignEvents(this);
+    this.reset();
+  }
+  reset(e) {
+    this._active = false;
+    this._moved = false;
+    delete this._lastPoint;
+    this._moveStateManager.endMove(e);
+  }
+  _move(...params) {
+    const move = this._moveFunction(...params);
+    if (move.bearingDelta || move.pitchDelta || move.around || move.panDelta) {
+      this._active = true;
+      return move;
+    }
+  }
+  dragStart(e, point) {
+    if (!this.isEnabled() || this._lastPoint) return;
+    if (!this._moveStateManager.isValidStartEvent(e)) return;
+    this._moveStateManager.startMove(e);
+    this._lastPoint = point['length'] ? point[0] : point;
+    if (this._activateOnStart && this._lastPoint) this._active = true;
+  }
+  dragMove(e, point) {
+    if (!this.isEnabled()) return;
+    const lastPoint = this._lastPoint;
+    if (!lastPoint) return;
+    e.preventDefault();
+    if (!this._moveStateManager.isValidMoveEvent(e)) {
+      this.reset(e);
+      return;
+    }
+    const movePoint = point['length'] ? point[0] : point;
+    if (!this._moved && movePoint.dist(lastPoint) < this._clickTolerance) return;
+    this._moved = true;
+    this._lastPoint = movePoint;
+    return this._move(lastPoint, movePoint);
+  }
+  dragEnd(e) {
+    if (!this.isEnabled() || !this._lastPoint) return;
+    if (!this._moveStateManager.isValidEndEvent(e)) return;
+    if (this._moved) _dom.DOM.suppressClick();
+    this.reset(e);
+  }
+  enable() {
+    this._enabled = true;
+  }
+  disable() {
+    this._enabled = false;
+    this.reset();
+  }
+  isEnabled() {
+    return this._enabled;
+  }
+  isActive() {
+    return this._active;
+  }
+  getClickTolerance() {
+    return this._clickTolerance;
+  }
+}
+exports.DragHandler = DragHandler;

package/lib/map/handler/drag_move_state_manager.d.ts

@@ -0,0 +1,30 @@
+export interface DragMoveStateManager<E extends Event> {
+    startMove: (e: E) => void;
+    endMove: (e?: E) => void;
+    isValidStartEvent: (e: E) => boolean;
+    isValidMoveEvent: (e: E) => boolean;
+    isValidEndEvent: (e?: E) => boolean;
+}
+export declare class MouseMoveStateManager implements DragMoveStateManager<MouseEvent> {
+    _eventButton: number | undefined;
+    _correctEvent: (e: MouseEvent) => boolean;
+    constructor(options: {
+        checkCorrectEvent: (e: MouseEvent) => boolean;
+    });
+    startMove(e: MouseEvent): void;
+    endMove(_e?: MouseEvent): void;
+    isValidStartEvent(e: MouseEvent): boolean;
+    isValidMoveEvent(e: MouseEvent): boolean;
+    isValidEndEvent(e: MouseEvent): boolean;
+}
+export declare class OneFingerTouchMoveStateManager implements DragMoveStateManager<TouchEvent> {
+    _firstTouch: number | undefined;
+    constructor();
+    _isOneFingerTouch(e: TouchEvent): boolean;
+    _isSameTouchEvent(e: TouchEvent): boolean;
+    startMove(e: TouchEvent): void;
+    endMove(_e?: TouchEvent): void;
+    isValidStartEvent(e: TouchEvent): boolean;
+    isValidMoveEvent(e: TouchEvent): boolean;
+    isValidEndEvent(e: TouchEvent): boolean;
+}