@antv/l7-map 2.18.2 → 2.19.0

package/es/handler/IHandler.d.ts

@@ -0,0 +1,34 @@
+import { EarthMap } from '../earthmap';
+import Point from '../geo/point';
+import { Map } from '../map';
+export interface IHandlerResult {
+    panDelta?: Point;
+    zoomDelta?: number;
+    bearingDelta?: number;
+    pitchDelta?: number;
+    around?: Point | null;
+    pinchAround?: Point | null;
+    cameraAnimation?: (map: Map | EarthMap) => any;
+    originalEvent?: any;
+    needsRenderFrame?: boolean;
+    noInertia?: boolean;
+}
+export interface IHandler {
+    touchstart?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void;
+    touchmove?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void;
+    touchend?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void;
+    touchcancel?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void;
+    mousedown?: (e: MouseEvent, point: Point) => IHandlerResult | void;
+    mousemove?: (e: MouseEvent, point: Point) => IHandlerResult | void;
+    mouseup?: (e: MouseEvent, point: Point) => IHandlerResult | void;
+    dblclick?: (e: MouseEvent, point: Point) => IHandlerResult | void;
+    wheel?: (e: WheelEvent, point: Point) => IHandlerResult | void;
+    keydown?: (e: KeyboardEvent) => IHandlerResult | void;
+    keyup?: (e: KeyboardEvent) => IHandlerResult | void;
+    renderFrame?: () => IHandlerResult | void;
+    enable(options?: any): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+    reset(): void;
+}

package/es/handler/IHandler.js

@@ -0,0 +1 @@
+export {};

package/es/handler/blockable_map_event.d.ts

@@ -0,0 +1,17 @@
+import { EarthMap } from '../earthmap';
+import { Map } from '../map';
+export default class BlockableMapEventHandler {
+    private map;
+    private delayContextMenu;
+    private contextMenuEvent;
+    constructor(map: Map | EarthMap);
+    reset(): void;
+    mousemove(e: MouseEvent): void;
+    mousedown(): void;
+    mouseup(): void;
+    contextmenu(e: MouseEvent): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+    enable(): boolean;
+    disable(): boolean;
+}

package/es/handler/blockable_map_event.js

@@ -0,0 +1,78 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+// @ts-ignore
+
+import { MapMouseEvent } from "./events";
+var BlockableMapEventHandler = /*#__PURE__*/function () {
+  function BlockableMapEventHandler(map) {
+    _classCallCheck(this, BlockableMapEventHandler);
+    this.map = map;
+  }
+  _createClass(BlockableMapEventHandler, [{
+    key: "reset",
+    value: function reset() {
+      this.delayContextMenu = false;
+      // @ts-ignore
+      delete this.contextMenuEvent;
+    }
+  }, {
+    key: "mousemove",
+    value: function mousemove(e) {
+      // mousemove map events should not be fired when interaction handlers (pan, rotate, etc) are active
+      this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
+    }
+  }, {
+    key: "mousedown",
+    value: function mousedown() {
+      this.delayContextMenu = true;
+    }
+  }, {
+    key: "mouseup",
+    value: function mouseup() {
+      this.delayContextMenu = false;
+      if (this.contextMenuEvent) {
+        this.map.emit('contextmenu', new MapMouseEvent('contextmenu', this.map, this.contextMenuEvent));
+        // @ts-ignore
+        delete this.contextMenuEvent;
+      }
+    }
+  }, {
+    key: "contextmenu",
+    value: function contextmenu(e) {
+      if (this.delayContextMenu) {
+        // Mac: contextmenu fired on mousedown; we save it until mouseup for consistency's sake
+        this.contextMenuEvent = e;
+      } else {
+        // Windows: contextmenu fired on mouseup, so fire event now
+        this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
+      }
+
+      // prevent browser context menu when necessary
+      if (this.map.listeners('contextmenu')) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "isEnabled",
+    value: function isEnabled() {
+      return true;
+    }
+  }, {
+    key: "isActive",
+    value: function isActive() {
+      return false;
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      return true;
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      return false;
+    }
+  }]);
+  return BlockableMapEventHandler;
+}();
+export { BlockableMapEventHandler as default };

package/es/handler/box_zoom.d.ts

@@ -0,0 +1,59 @@
+import { EarthMap } from '../earthmap';
+import Point from '../geo/point';
+import { 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.
+ */
+declare class BoxZoomHandler {
+    private map;
+    private el;
+    private container;
+    private enabled;
+    private active;
+    private startPos;
+    private lastPos;
+    private box;
+    private clickTolerance;
+    /**
+     * @private
+     */
+    constructor(map: Map | EarthMap, options: {
+        clickTolerance: number;
+    });
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
+     *
+     * @returns {boolean} `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 {boolean} `true` if the "box zoom" interaction is active.
+     */
+    isActive(): boolean;
+    /**
+     * Enables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.enable();
+     */
+    enable(): void;
+    /**
+     * Disables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.disable();
+     */
+    disable(): void;
+    mousedown(e: MouseEvent, point: Point): void;
+    mousemoveWindow(e: MouseEvent, point: Point): void;
+    mouseupWindow(e: MouseEvent, point: Point): {
+        cameraAnimation: (map: Map) => boolean | Map;
+    } | undefined;
+    keydown(e: KeyboardEvent): void;
+    reset(): void;
+    fireEvent(type: string, e: any): boolean;
+}
+export default BoxZoomHandler;

package/es/handler/box_zoom.js

@@ -0,0 +1,180 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+// @ts-ignore
+
+import DOM from "../utils/dom";
+import { Event } from "./events/event";
+
+/**
+ * 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.
+ */
+var BoxZoomHandler = /*#__PURE__*/function () {
+  /**
+   * @private
+   */
+  function BoxZoomHandler(map, options) {
+    _classCallCheck(this, BoxZoomHandler);
+    this.map = 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 {boolean} `true` if the "box zoom" interaction is enabled.
+   */
+  _createClass(BoxZoomHandler, [{
+    key: "isEnabled",
+    value: function isEnabled() {
+      return !!this.enabled;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
+     *
+     * @returns {boolean} `true` if the "box zoom" interaction is active.
+     */
+  }, {
+    key: "isActive",
+    value: function isActive() {
+      return !!this.active;
+    }
+
+    /**
+     * Enables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.enable();
+     */
+  }, {
+    key: "enable",
+    value: function enable() {
+      if (this.isEnabled()) {
+        return;
+      }
+      this.enabled = true;
+    }
+
+    /**
+     * Disables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.disable();
+     */
+  }, {
+    key: "disable",
+    value: function disable() {
+      if (!this.isEnabled()) {
+        return;
+      }
+      this.enabled = false;
+    }
+  }, {
+    key: "mousedown",
+    value: function mousedown(e, point) {
+      if (!this.isEnabled()) {
+        return;
+      }
+      if (!(e.shiftKey && e.button === 0)) {
+        return;
+      }
+      DOM.disableDrag();
+      this.startPos = this.lastPos = point;
+      this.active = true;
+    }
+  }, {
+    key: "mousemoveWindow",
+    value: function mousemoveWindow(e, point) {
+      if (!this.active) {
+        return;
+      }
+      var pos = point;
+      if (this.lastPos.equals(pos) || !this.box && pos.dist(this.startPos) < this.clickTolerance) {
+        return;
+      }
+      var p0 = this.startPos;
+      this.lastPos = pos;
+      if (!this.box) {
+        this.box = DOM.create('div', 'l7-boxzoom', this.container);
+        this.container.classList.add('l7-crosshair');
+        this.fireEvent('boxzoomstart', e);
+      }
+      var minX = Math.min(p0.x, pos.x);
+      var maxX = Math.max(p0.x, pos.x);
+      var minY = Math.min(p0.y, pos.y);
+      var maxY = Math.max(p0.y, pos.y);
+      DOM.setTransform(this.box, "translate(".concat(minX, "px,").concat(minY, "px)"));
+      if (this.box) {
+        this.box.style.width = "".concat(maxX - minX, "px");
+        this.box.style.height = "".concat(maxY - minY, "px");
+      }
+    }
+  }, {
+    key: "mouseupWindow",
+    value: function mouseupWindow(e, point) {
+      var _this = this;
+      if (!this.active) {
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      var p0 = this.startPos;
+      var p1 = point;
+      this.reset();
+      DOM.suppressClick();
+      if (p0.x === p1.x && p0.y === p1.y) {
+        this.fireEvent('boxzoomcancel', e);
+      } else {
+        this.map.emit('boxzoomend', new Event('boxzoomend', {
+          originalEvent: e
+        }));
+        return {
+          cameraAnimation: function cameraAnimation(map) {
+            return map.fitScreenCoordinates(p0, p1, _this.map.getBearing(), {
+              linear: true
+            });
+          }
+        };
+      }
+    }
+  }, {
+    key: "keydown",
+    value: function keydown(e) {
+      if (!this.active) {
+        return;
+      }
+      if (e.keyCode === 27) {
+        this.reset();
+        this.fireEvent('boxzoomcancel', e);
+      }
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.active = false;
+      this.container.classList.remove('l7-crosshair');
+      if (this.box) {
+        DOM.remove(this.box);
+        this.box = null;
+      }
+      DOM.enableDrag();
+      // @ts-ignore
+      delete this.startPos;
+      // @ts-ignore
+      delete this.lastPos;
+    }
+  }, {
+    key: "fireEvent",
+    value: function fireEvent(type, e) {
+      return this.map.emit(type, new Event(type, {
+        originalEvent: e
+      }));
+    }
+  }]);
+  return BoxZoomHandler;
+}();
+export default BoxZoomHandler;

package/es/handler/click_zoom.d.ts

@@ -0,0 +1,16 @@
+import { EarthMap } from '../earthmap';
+import Point from '../geo/point';
+import { Map } from '../map';
+export default class ClickZoomHandler {
+    private enabled;
+    private active;
+    constructor();
+    reset(): void;
+    dblclick(e: MouseEvent, point: Point): {
+        cameraAnimation: (map: Map | EarthMap) => void;
+    };
+    enable(): void;
+    disable(): void;
+    isEnabled(): boolean;
+    isActive(): boolean;
+}

package/es/handler/click_zoom.js

@@ -0,0 +1,54 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+// @ts-ignore
+var ClickZoomHandler = /*#__PURE__*/function () {
+  function ClickZoomHandler() {
+    _classCallCheck(this, ClickZoomHandler);
+    this.reset();
+  }
+  _createClass(ClickZoomHandler, [{
+    key: "reset",
+    value: function reset() {
+      this.active = false;
+    }
+  }, {
+    key: "dblclick",
+    value: function dblclick(e, point) {
+      e.preventDefault();
+      return {
+        cameraAnimation: function cameraAnimation(map) {
+          map.easeTo({
+            duration: 300,
+            zoom: map.getZoom() + (e.shiftKey ? -1 : 1),
+            around: map.unproject(point)
+          }, {
+            originalEvent: e
+          });
+        }
+      };
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.enabled = true;
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.enabled = false;
+      this.reset();
+    }
+  }, {
+    key: "isEnabled",
+    value: function isEnabled() {
+      return this.enabled;
+    }
+  }, {
+    key: "isActive",
+    value: function isActive() {
+      return this.active;
+    }
+  }]);
+  return ClickZoomHandler;
+}();
+export { ClickZoomHandler as default };

package/es/handler/events/event.d.ts

@@ -0,0 +1,4 @@
+export declare class Event {
+    type: string;
+    constructor(type: string, data?: any);
+}

package/es/handler/events/event.js

@@ -0,0 +1,11 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+// tslint:disable-next-line:no-submodule-imports
+import { lodashUtil } from '@antv/l7-utils';
+var merge = lodashUtil.merge;
+export var Event = /*#__PURE__*/_createClass(function Event(type) {
+  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  _classCallCheck(this, Event);
+  merge(this, data);
+  this.type = type;
+});

package/es/handler/events/index.d.ts

@@ -0,0 +1,4 @@
+import MapMouseEvent from './map_mouse_event';
+import MapTouchEvent from './map_touch_event';
+import MapWheelEvent from './map_wheel_event';
+export { MapMouseEvent, MapTouchEvent, MapWheelEvent };

package/es/handler/events/index.js

@@ -0,0 +1,4 @@
+import MapMouseEvent from "./map_mouse_event";
+import MapTouchEvent from "./map_touch_event";
+import MapWheelEvent from "./map_wheel_event";
+export { MapMouseEvent, MapTouchEvent, MapWheelEvent };

package/es/handler/events/map_mouse_event.d.ts

@@ -0,0 +1,34 @@
+import { EarthMap } from '../../earthmap';
+import LngLat from '../../geo/lng_lat';
+import Point from '../../geo/point';
+import { Map } from '../../map';
+import { Event } from './event';
+export default class MapMouseEvent extends Event {
+    /**
+     * `true` if `preventDefault` has been called.
+     * @private
+     */
+    type: 'mousedown' | 'mouseup' | 'click' | 'dblclick' | 'mousemove' | 'mouseover' | 'mouseenter' | 'mouseleave' | 'mouseout' | 'contextmenu';
+    /**
+     * The `Map` object that fired the event.
+     */
+    target: Map | EarthMap;
+    /**
+     * The DOM event which caused the map event.
+     */
+    originalEvent: MouseEvent;
+    /**
+     * The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
+     */
+    point: Point;
+    /**
+     * The geographic location on the map of the mouse cursor.
+     */
+    lngLat: LngLat;
+    defaultPrevented: boolean;
+    /**
+     * @private
+     */
+    constructor(type: string, map: Map | EarthMap, originalEvent: MouseEvent, data?: any);
+    preventDefault(): void;
+}

package/es/handler/events/map_mouse_event.js

@@ -0,0 +1,64 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+// @ts-ignore
+// tslint:disable-next-line:no-submodule-imports
+import { lodashUtil } from '@antv/l7-utils';
+import DOM from "../../utils/dom";
+import { Event } from "./event";
+var merge = lodashUtil.merge;
+var MapMouseEvent = /*#__PURE__*/function (_Event) {
+  _inherits(MapMouseEvent, _Event);
+  var _super = _createSuper(MapMouseEvent);
+  /**
+   * `true` if `preventDefault` has been called.
+   * @private
+   */
+
+  /**
+   * The `Map` object that fired the event.
+   */
+
+  /**
+   * The DOM event which caused the map event.
+   */
+
+  /**
+   * The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
+   */
+
+  /**
+   * The geographic location on the map of the mouse cursor.
+   */
+
+  /**
+   * @private
+   */
+  function MapMouseEvent(type, map, originalEvent) {
+    var _this;
+    var data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    _classCallCheck(this, MapMouseEvent);
+    var point = DOM.mousePos(map.getCanvasContainer(), originalEvent);
+    var lngLat = map.unproject(point);
+    _this = _super.call(this, type, merge({
+      point: point,
+      lngLat: lngLat,
+      originalEvent: originalEvent
+    }, data));
+    _this.defaultPrevented = false;
+    _this.target = map;
+    return _this;
+  }
+  _createClass(MapMouseEvent, [{
+    key: "preventDefault",
+    value: function preventDefault() {
+      this.defaultPrevented = true;
+    }
+  }]);
+  return MapMouseEvent;
+}(Event);
+export { MapMouseEvent as default };

package/es/handler/events/map_touch_event.d.ts

@@ -0,0 +1,57 @@
+import { EarthMap } from '../../earthmap';
+import LngLat from '../../geo/lng_lat';
+import Point from '../../geo/point';
+import { Map } from '../../map';
+import { Event } from './event';
+export default class MapTouchEvent extends Event {
+    /**
+     * The event type.
+     */
+    type: 'touchstart' | 'touchend' | 'touchcancel';
+    /**
+     * The `Map` object that fired the event.
+     */
+    target: Map | EarthMap;
+    /**
+     * The DOM event which caused the map event.
+     */
+    originalEvent: TouchEvent;
+    /**
+     * The geographic location on the map of the center of the touch event points.
+     */
+    lngLat: LngLat;
+    /**
+     * The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left
+     * corner.
+     */
+    point: Point;
+    /**
+     * The array of pixel coordinates corresponding to a
+     * [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
+     */
+    points: Point[];
+    /**
+     * The geographical locations on the map corresponding to a
+     * [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
+     */
+    lngLats: LngLat[];
+    /**
+     * `true` if `preventDefault` has been called.
+     * @private
+     */
+    defaultPrevented: boolean;
+    /**
+     * @private
+     */
+    constructor(type: string, map: Map | EarthMap, originalEvent: TouchEvent);
+    /**
+     * Prevents subsequent default processing of the event by the map.
+     *
+     * Calling this method will prevent the following default map behaviors:
+     *
+     *   * On `touchstart` events, the behavior of {@link DragPanHandler}
+     *   * On `touchstart` events, the behavior of {@link TouchZoomRotateHandler}
+     *
+     */
+    private preventDefault;
+}