@antv/l7-map 2.21.11-beta.4 → 2.21.11-beta.6

package/es/handler/scroll_zoom.js

@@ -1,315 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-// @ts-ignore
-
-import LngLat from "../geo/lng_lat";
-import { bezier, ease, interpolate, now } from "../util";
-import DOM from "../utils/dom";
-// deltaY value for mouse scroll wheel identification
-const wheelZoomDelta = 4.000244140625;
-
-// These magic numbers control the rate of zoom. Trackpad events fire at a greater
-// frequency than mouse scroll wheel, so reduce the zoom rate per wheel tick
-const defaultZoomRate = 1 / 100;
-const wheelZoomRate = 1 / 450;
-
-// upper bound on how much we scale the map in any single render frame; this
-// is used to limit zoom rate in the case of very fast scrolling
-const maxScalePerFrame = 2;
-
-/**
- * The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
- */
-class ScrollZoomHandler {
-  /**
-   * @private
-   */
-  constructor(map, handler) {
-    _defineProperty(this, "map", void 0);
-    _defineProperty(this, "el", void 0);
-    _defineProperty(this, "enabled", void 0);
-    _defineProperty(this, "active", void 0);
-    _defineProperty(this, "zooming", void 0);
-    _defineProperty(this, "aroundCenter", void 0);
-    _defineProperty(this, "around", void 0);
-    _defineProperty(this, "aroundPoint", void 0);
-    _defineProperty(this, "type", void 0);
-    _defineProperty(this, "lastValue", void 0);
-    _defineProperty(this, "timeout", void 0);
-    // used for delayed-handling of a single wheel movement
-    _defineProperty(this, "finishTimeout", void 0);
-    // used to delay final '{move,zoom}end' events
-    _defineProperty(this, "lastWheelEvent", void 0);
-    _defineProperty(this, "lastWheelEventTime", void 0);
-    _defineProperty(this, "startZoom", void 0);
-    _defineProperty(this, "targetZoom", void 0);
-    _defineProperty(this, "delta", void 0);
-    _defineProperty(this, "easing", void 0);
-    _defineProperty(this, "prevEase", void 0);
-    _defineProperty(this, "frameId", void 0);
-    _defineProperty(this, "handler", void 0);
-    _defineProperty(this, "defaultZoomRate", void 0);
-    _defineProperty(this, "wheelZoomRate", void 0);
-    _defineProperty(this, "onScrollFrame", () => {
-      if (!this.frameId) {
-        return;
-      }
-      this.frameId = null;
-      if (!this.isActive()) {
-        return;
-      }
-      const tr = this.map.transform;
-
-      // if we've had scroll events since the last render frame, consume the
-      // accumulated delta, and update the target zoom level accordingly
-      if (this.delta !== 0) {
-        // For trackpad events and single mouse wheel ticks, use the default zoom rate
-        const zoomRate = this.type === 'wheel' && Math.abs(this.delta) > wheelZoomDelta ? this.wheelZoomRate : this.defaultZoomRate;
-        // Scale by sigmoid of scroll wheel delta.
-        let scale = maxScalePerFrame / (1 + Math.exp(-Math.abs(this.delta * zoomRate)));
-        if (this.delta < 0 && scale !== 0) {
-          scale = 1 / scale;
-        }
-        const fromScale = typeof this.targetZoom === 'number' ? tr.zoomScale(this.targetZoom) : tr.scale;
-        this.targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale)));
-
-        // if this is a mouse wheel, refresh the starting zoom and easing
-        // function we're using to smooth out the zooming between wheel
-        // events
-        if (this.type === 'wheel') {
-          this.startZoom = tr.zoom;
-          this.easing = this.smoothOutEasing(200);
-        }
-        this.delta = 0;
-      }
-      const targetZoom = typeof this.targetZoom === 'number' ? this.targetZoom : tr.zoom;
-      const startZoom = this.startZoom;
-      const easing = this.easing;
-      let finished = false;
-      let zoom;
-      if (this.type === 'wheel' && startZoom && easing) {
-        const t = Math.min((now() - this.lastWheelEventTime) / 200, 1);
-        const k = easing(t);
-        zoom = interpolate(startZoom, targetZoom, k);
-        if (t < 1) {
-          if (!this.frameId) {
-            this.frameId = true;
-          }
-        } else {
-          finished = true;
-        }
-      } else {
-        zoom = targetZoom;
-        finished = true;
-      }
-      this.active = true;
-      if (finished) {
-        this.active = false;
-        // @ts-ignore
-        this.finishTimeout = setTimeout(() => {
-          this.zooming = false;
-          this.handler.triggerRenderFrame();
-          // @ts-ignore
-          delete this.targetZoom;
-          // @ts-ignore
-          delete this.finishTimeout;
-        }, 200);
-      }
-      return {
-        noInertia: true,
-        needsRenderFrame: !finished,
-        zoomDelta: zoom - tr.zoom,
-        around: this.aroundPoint,
-        originalEvent: this.lastWheelEvent
-      };
-    });
-    this.map = map;
-    this.el = map.getCanvasContainer();
-    this.handler = handler;
-    this.delta = 0;
-    this.defaultZoomRate = defaultZoomRate;
-    this.wheelZoomRate = wheelZoomRate;
-  }
-
-  /**
-   * Set the zoom rate of a trackpad
-   * @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value.
-   * @example
-   * // Speed up trackpad zoom
-   * map.scrollZoom.setZoomRate(1/25);
-   */
-  setZoomRate(zoomRate) {
-    this.defaultZoomRate = zoomRate;
-  }
-
-  /**
-   * Set the zoom rate of a mouse wheel
-   * @param {number} [wheelZoomRate=1/450] The rate used to scale mouse wheel movement to a zoom value.
-   * @example
-   * // Slow down zoom of mouse wheel
-   * map.scrollZoom.setWheelZoomRate(1/600);
-   */
-  setWheelZoomRate(zoomRate) {
-    this.wheelZoomRate = zoomRate;
-  }
-
-  /**
-   * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
-   *
-   * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
-   */
-  isEnabled() {
-    return !!this.enabled;
-  }
-
-  /*
-   * Active state is turned on and off with every scroll wheel event and is set back to false before the map
-   * render is called, so _active is not a good candidate for determining if a scroll zoom animation is in
-   * progress.
-   */
-  isActive() {
-    return !!this.active || this.finishTimeout !== undefined;
-  }
-  isZooming() {
-    return !!this.zooming;
-  }
-
-  /**
-   * Enables the "scroll to zoom" interaction.
-   *
-   * @param {Object} [options] Options object.
-   * @param {string} [options.around] If "center" is passed, map will zoom around center of map
-   *
-   * @example
-   *   map.scrollZoom.enable();
-   * @example
-   *  map.scrollZoom.enable({ around: 'center' })
-   */
-  enable(options) {
-    if (this.isEnabled()) {
-      return;
-    }
-    this.enabled = true;
-    this.aroundCenter = options && options.around === 'center';
-  }
-
-  /**
-   * Disables the "scroll to zoom" interaction.
-   *
-   * @example
-   *   map.scrollZoom.disable();
-   */
-  disable() {
-    if (!this.isEnabled()) {
-      return;
-    }
-    this.enabled = false;
-  }
-  wheel(e) {
-    if (!this.isEnabled()) {
-      return;
-    }
-    // Remove `any` cast when https://github.com/facebook/flow/issues/4879 is fixed.
-    let value = e.deltaMode === window.WheelEvent.DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY;
-    const nowTime = now();
-    const timeDelta = nowTime - (this.lastWheelEventTime || 0);
-    this.lastWheelEventTime = nowTime;
-    if (value !== 0 && value % wheelZoomDelta === 0) {
-      // This one is definitely a mouse wheel event.
-      this.type = 'wheel';
-    } else if (value !== 0 && Math.abs(value) < 4) {
-      // This one is definitely a trackpad event because it is so small.
-      this.type = 'trackpad';
-    } else if (timeDelta > 400) {
-      // This is likely a new scroll action.
-      this.type = null;
-      this.lastValue = value;
-
-      // Start a timeout in case this was a singular event, and dely it by up to 40ms.
-      // @ts-ignore
-      this.timeout = setTimeout(this.onTimeout, 40, e);
-    } else if (!this.type) {
-      // This is a repeating event, but we don't know the type of event just yet.
-      // If the delta per time is small, we assume it's a fast trackpad; otherwise we switch into wheel mode.
-      this.type = Math.abs(timeDelta * value) < 200 ? 'trackpad' : 'wheel';
-
-      // Make sure our delayed event isn't fired again, because we accumulate
-      // the previous event (which was less than 40ms ago) into this event.
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-        this.timeout = null;
-        value += this.lastValue;
-      }
-    }
-
-    // Slow down zoom if shift key is held for more precise zooming
-    if (e.shiftKey && value) {
-      value = value / 4;
-    }
-    // Only fire the callback if we actually know what type of scrolling device the user uses.
-    if (this.type) {
-      this.lastWheelEvent = e;
-      this.delta -= value;
-      if (!this.active) {
-        this.start(e);
-      }
-    }
-    e.preventDefault();
-  }
-  renderFrame() {
-    return this.onScrollFrame();
-  }
-  reset() {
-    this.active = false;
-  }
-  onTimeout(initialEvent) {
-    this.type = 'wheel';
-    this.delta -= this.lastValue;
-    if (!this.active && this.start) {
-      this.start(initialEvent);
-    }
-  }
-  start(e) {
-    if (!this.delta) {
-      return;
-    }
-    if (this.frameId) {
-      this.frameId = null;
-    }
-    this.active = true;
-    if (!this.isZooming()) {
-      this.zooming = true;
-    }
-    if (this.finishTimeout) {
-      clearTimeout(this.finishTimeout);
-      // @ts-ignore
-      delete this.finishTimeout;
-    }
-    const pos = DOM.mousePos(this.el, e);
-    this.around = LngLat.convert(this.aroundCenter ? this.map.getCenter() : this.map.unproject(pos));
-    this.aroundPoint = this.map.transform.locationPoint(this.around);
-    if (!this.frameId) {
-      this.frameId = true;
-      this.handler.triggerRenderFrame();
-    }
-  }
-  smoothOutEasing(duration) {
-    let easing = ease;
-    if (this.prevEase) {
-      const preEase = this.prevEase;
-      const t = (now() - preEase.start) / preEase.duration;
-      const speed = preEase.easing(t + 0.01) - preEase.easing(t);
-
-      // Quick hack to make new bezier that is continuous with last
-      const x = 0.27 / Math.sqrt(speed * speed + 0.0001) * 0.01;
-      const y = Math.sqrt(0.27 * 0.27 - x * x);
-      easing = bezier(x, y, 0.25, 1);
-    }
-    this.prevEase = {
-      start: now(),
-      duration,
-      easing
-    };
-    return easing;
-  }
-}
-export default ScrollZoomHandler;

package/es/handler/shim/drag_pan.d.ts

@@ -1,61 +0,0 @@
-import type { MousePanHandler } from '../mouse/';
-import type { TouchPanHandler } from '../touch/';
-export interface IDragPanOptions {
-    linearity?: number;
-    easing?: (t: number) => number;
-    deceleration?: number;
-    maxSpeed?: number;
-}
-/**
- * The `DragPanHandler` allows the user to pan the map by clicking and dragging
- * the cursor.
- */
-export default class DragPanHandler {
-    inertiaOptions: IDragPanOptions;
-    private el;
-    private mousePan;
-    private touchPan;
-    /**
-     * @private
-     */
-    constructor(el: HTMLElement, mousePan: MousePanHandler, touchPan: TouchPanHandler);
-    /**
-     * Enables the "drag to pan" interaction.
-     *
-     * @param {Object} [options] Options object
-     * @param {number} [options.linearity=0] factor used to scale the drag velocity
-     * @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag.
-     * @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity.
-     * @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends.
-     *
-     * @example
-     *   map.dragPan.enable();
-     * @example
-     *   map.dragPan.enable({
-     *      linearity: 0.3,
-     *      easing: bezier(0, 0, 0.3, 1),
-     *      maxSpeed: 1400,
-     *      deceleration: 2500,
-     *   });
-     */
-    enable(options?: IDragPanOptions): void;
-    /**
-     * Disables the "drag to pan" interaction.
-     *
-     * @example
-     * map.dragPan.disable();
-     */
-    disable(): void;
-    /**
-     * Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
-     *
-     * @returns {boolean} `true` if the "drag to pan" interaction is enabled.
-     */
-    isEnabled(): boolean;
-    /**
-     * Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.
-     *
-     * @returns {boolean} `true` if the "drag to pan" interaction is active.
-     */
-    isActive(): boolean;
-}

package/es/handler/shim/drag_pan.js

@@ -1,75 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/**
- * The `DragPanHandler` allows the user to pan the map by clicking and dragging
- * the cursor.
- */
-export default class DragPanHandler {
-  /**
-   * @private
-   */
-  constructor(el, mousePan, touchPan) {
-    _defineProperty(this, "inertiaOptions", void 0);
-    _defineProperty(this, "el", void 0);
-    _defineProperty(this, "mousePan", void 0);
-    _defineProperty(this, "touchPan", void 0);
-    this.el = el;
-    this.mousePan = mousePan;
-    this.touchPan = touchPan;
-  }
-
-  /**
-   * Enables the "drag to pan" interaction.
-   *
-   * @param {Object} [options] Options object
-   * @param {number} [options.linearity=0] factor used to scale the drag velocity
-   * @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag.
-   * @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity.
-   * @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends.
-   *
-   * @example
-   *   map.dragPan.enable();
-   * @example
-   *   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
-   * 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 {boolean} `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 {boolean} `true` if the "drag to pan" interaction is active.
-   */
-  isActive() {
-    return this.mousePan.isActive() || this.touchPan.isActive();
-  }
-}

package/es/handler/shim/drag_rotate.js

@@ -1,64 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/**
- * The `DragRotateHandler` allows the user to rotate the map by clicking and
- * dragging the cursor while holding the right mouse button or `ctrl` key.
- */
-export default class DragRotateHandler {
-  /**
-   * @param {Object} [options]
-   * @param {number} [options.bearingSnap] The threshold, measured in degrees, that determines when the map's
-   *   bearing will snap to north.
-   * @param {bool} [options.pitchWithRotate=true] Control the map pitch in addition to the bearing
-   * @private
-   */
-  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
-   * map.dragRotate.enable();
-   */
-  enable() {
-    this.mouseRotate.enable();
-    if (this.pitchWithRotate) {
-      this.mousePitch.enable();
-    }
-  }
-
-  /**
-   * Disables the "drag to rotate" interaction.
-   *
-   * @example
-   * map.dragRotate.disable();
-   */
-  disable() {
-    this.mouseRotate.disable();
-    this.mousePitch.disable();
-  }
-
-  /**
-   * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
-   *
-   * @returns {boolean} `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 {boolean} `true` if the "drag to rotate" interaction is active.
-   */
-  isActive() {
-    return this.mouseRotate.isActive() || this.mousePitch.isActive();
-  }
-}

package/es/handler/shim/touch_zoom_rotate.d.ts

@@ -1,70 +0,0 @@
-import type TapDragZoomHandler from '../tap/tap_drag_zoom';
-import type { TouchRotateHandler, TouchZoomHandler } from '../touch';
-/**
- * The `TouchZoomRotateHandler` 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.
- */
-export default class TouchZoomRotateHandler {
-    private el;
-    private touchZoom;
-    private touchRotate;
-    private tapDragZoom;
-    private rotationDisabled;
-    private enabled;
-    /**
-     * @private
-     */
-    constructor(el: HTMLElement, touchZoom: TouchZoomHandler, touchRotate: TouchRotateHandler, tapDragZoom: TapDragZoomHandler);
-    /**
-     * Enables the "pinch to rotate and zoom" interaction.
-     *
-     * @param {Object} [options] Options object.
-     * @param {string} [options.around] If "center" is passed, map will zoom around the center
-     *
-     * @example
-     *   map.touchZoomRotate.enable();
-     * @example
-     *   map.touchZoomRotate.enable({ around: 'center' });
-     */
-    enable(options: {
-        around?: 'center';
-    }): void;
-    /**
-     * Disables the "pinch to rotate and zoom" interaction.
-     *
-     * @example
-     *   map.touchZoomRotate.disable();
-     */
-    disable(): void;
-    /**
-     * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
-     *
-     * @returns {boolean} `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 {boolean} //eslint-disable-line
-     */
-    isActive(): boolean;
-    /**
-     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
-     * interaction enabled.
-     *
-     * @example
-     *   map.touchZoomRotate.disableRotation();
-     */
-    disableRotation(): void;
-    /**
-     * Enables the "pinch to rotate" interaction.
-     *
-     * @example
-     *   map.touchZoomRotate.enable();
-     *   map.touchZoomRotate.enableRotation();
-     */
-    enableRotation(): void;
-}

package/es/handler/shim/touch_zoom_rotate.js

@@ -1,104 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/**
- * The `TouchZoomRotateHandler` 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.
- */
-export default class TouchZoomRotateHandler {
-  /**
-   * @private
-   */
-  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 {Object} [options] Options object.
-   * @param {string} [options.around] If "center" is passed, map will zoom around the center
-   *
-   * @example
-   *   map.touchZoomRotate.enable();
-   * @example
-   *   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
-   *   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 {boolean} `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 {boolean} //eslint-disable-line
-   */
-  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
-   *   map.touchZoomRotate.disableRotation();
-   */
-  disableRotation() {
-    this.rotationDisabled = true;
-    this.touchRotate.disable();
-  }
-
-  /**
-   * Enables the "pinch to rotate" interaction.
-   *
-   * @example
-   *   map.touchZoomRotate.enable();
-   *   map.touchZoomRotate.enableRotation();
-   */
-  enableRotation() {
-    this.rotationDisabled = false;
-    if (this.touchZoom.isEnabled()) {
-      this.touchRotate.enable();
-    }
-  }
-}