maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/ui/handler/box_zoom.test.ts

@@ -1,5 +1,5 @@
-import Map from '../map';
-import DOM from '../../util/dom';
+import {Map} from '../map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {beforeMapTest} from '../../util/test/util';
 

package/src/ui/handler/box_zoom.ts

@@ -1,16 +1,19 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 
 import {Event} from '../../util/evented';
-import TransformProvider from './transform-provider';
+import {TransformProvider} from './transform-provider';
 
-import type Map from '../map';
+import type {Map} from '../map';
 import type Point from '@mapbox/point-geometry';
+import {Handler} from '../handler_manager';
 
 /**
  * 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 {
+export class BoxZoomHandler implements Handler {
     _map: Map;
     _tr: TransformProvider;
     _el: HTMLElement;
@@ -23,7 +26,7 @@ class BoxZoomHandler {
     _clickTolerance: number;
 
     /**
-     * @private
+     * @hidden
      */
     constructor(map: Map, options: {
         clickTolerance: number;
@@ -38,7 +41,7 @@ class BoxZoomHandler {
     /**
      * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
      *
-     * @returns {boolean} `true` if the "box zoom" interaction is enabled.
+     * @returns `true` if the "box zoom" interaction is enabled.
      */
     isEnabled() {
         return !!this._enabled;
@@ -47,7 +50,7 @@ class BoxZoomHandler {
     /**
      * 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.
+     * @returns `true` if the "box zoom" interaction is active.
      */
     isActive() {
         return !!this._active;
@@ -57,7 +60,9 @@ class BoxZoomHandler {
      * Enables the "box zoom" interaction.
      *
      * @example
-     *   map.boxZoom.enable();
+     * ```ts
+     * map.boxZoom.enable();
+     * ```
      */
     enable() {
         if (this.isEnabled()) return;
@@ -68,7 +73,9 @@ class BoxZoomHandler {
      * Disables the "box zoom" interaction.
      *
      * @example
-     *   map.boxZoom.disable();
+     * ```ts
+     * map.boxZoom.disable();
+     * ```
      */
     disable() {
         if (!this.isEnabled()) return;
@@ -164,5 +171,3 @@ class BoxZoomHandler {
         return this._map.fire(new Event(type, {originalEvent: e}));
     }
 }
-
-export default BoxZoomHandler;

package/src/ui/handler/click_zoom.ts

@@ -1,13 +1,21 @@
 import type Point from '@mapbox/point-geometry';
-import type Map from '../map';
-import TransformProvider from './transform-provider';
+import type {Map} from '../map';
+import {TransformProvider} from './transform-provider';
+import {Handler} from '../handler_manager';
 
-export default class ClickZoomHandler {
+/**
+ * The `ClickZoomHandler` allows the user to zoom the map at a point by double clicking
+ * It is used by other handlers
+ */
+export class ClickZoomHandler implements Handler {
 
     _tr: TransformProvider;
     _enabled: boolean;
     _active: boolean;
 
+    /**
+     * @hidden
+    */
     constructor(map: Map) {
         this._tr = new TransformProvider(map);
         this.reset();

package/src/ui/handler/cooperative_gestures.test.ts

@@ -1,6 +1,6 @@
-import browser from '../../util/browser';
-import Map from '../map';
-import DOM from '../../util/dom';
+import {browser} from '../../util/browser';
+import {Map} from '../map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {beforeMapTest} from '../../util/test/util';
 

package/src/ui/handler/dblclick_zoom.test.ts

@@ -1,6 +1,6 @@
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {beforeMapTest} from '../../util/test/util';
-import Map, {MapOptions} from '../map';
+import {Map, MapOptions} from '../map';
 
 function createMap() {
     return new Map({container: window.document.createElement('div')} as any as MapOptions);

package/src/ui/handler/drag_handler.ts

@@ -1,4 +1,4 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 import type Point from '@mapbox/point-geometry';
 import {DragMoveStateManager} from './drag_move_state_manager';
 import {Handler} from '../handler_manager';
@@ -26,27 +26,42 @@ export interface DragPitchResult extends DragMovementResult {
 type DragMoveFunction<T extends DragMovementResult> = (lastPoint: Point, point: Point) => T;
 
 export interface DragMoveHandler<T extends DragMovementResult, E extends Event> extends Handler {
-    reset: (e?: E) => void;
     dragStart: (e: E, point: Point) => void;
     dragMove: (e: E, point: Point) => T | void;
     dragEnd: (e: E) => void;
-    enable: () => void;
-    disable: () => void;
-    isEnabled: () => boolean;
-    isActive: () => boolean;
     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.
- * @implements {DragMoveHandler<T, E>}
- * @param {Object} options
- * @param {number} options.clickTolerance If the movement is shorter than this value, consider it a click.
- * @param {string} options.move The move function to run on a valid movement.
- * @param {DragMoveStateManager<E>} options.moveStateManager A class used to manage the state of the drag event - start, checking valid moves, end. See the class documentation for more details.
- * @param {function} options.assignEvent A method used to assign the dragStart, dragMove, and dragEnd methods to the relevant event handlers, as well as assigning the contextmenu handler
- * @param {boolean} [options.activateOnStart] Should the move start on the "start" event, or should it start on the first valid move.
- * @param {boolean} [options.enable] If true, handler will be enabled during construction
  */
 export class DragHandler<T extends DragMovementResult, E extends Event> implements DragMoveHandler<T, E> {
     // Event handlers that may be assigned by the implementations of this class
@@ -67,14 +82,7 @@ export class DragHandler<T extends DragMovementResult, E extends Event> implemen
     _lastPoint: Point | null;
     _moveStateManager: DragMoveStateManager<E>;
 
-    constructor(options: {
-        clickTolerance: number;
-        move: DragMoveFunction<T>;
-        moveStateManager: DragMoveStateManager<E>;
-        assignEvents: (handler: DragMoveHandler<T, E>) => void;
-        activateOnStart?: boolean;
-        enable?: boolean;
-    }) {
+    constructor(options: DragMoveHandlerOptions<T, E>) {
         this._enabled = !!options.enable;
         this._moveStateManager = options.moveStateManager;
         this._clickTolerance = options.clickTolerance || 1;

package/src/ui/handler/drag_move_state_manager.ts

@@ -1,4 +1,4 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 
 const LEFT_BUTTON = 0;
 const RIGHT_BUTTON = 2;

package/src/ui/handler/drag_pan.test.ts

@@ -1,7 +1,7 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {beforeMapTest} from '../../util/test/util';
-import Map, {MapOptions} from '../map';
+import {Map, MapOptions} from '../map';
 import type {MapGeoJSONFeature} from '../../util/vectortile_to_geojson';
 
 function createMap(clickTolerance?, dragPan?) {

package/src/ui/handler/drag_rotate.test.ts

@@ -1,8 +1,8 @@
 import {extend} from '../../util/util';
-import Map from '../map';
-import DOM from '../../util/dom';
+import {Map} from '../map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import browser from '../../util/browser';
+import {browser} from '../../util/browser';
 
 import {beforeMapTest} from '../../util/test/util';
 

package/src/ui/handler/keyboard.test.ts

@@ -1,5 +1,5 @@
-import Map from '../../ui/map';
-import DOM from '../../util/dom';
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {extend} from '../../util/util';
 import {beforeMapTest} from '../../util/test/util';

package/src/ui/handler/keyboard.ts

@@ -1,5 +1,6 @@
-import type Map from '../map';
-import TransformProvider from './transform-provider';
+import {Handler} from '../handler_manager';
+import type {Map} from '../map';
+import {TransformProvider} from './transform-provider';
 
 const defaultOptions = {
     panStep: 100,
@@ -20,8 +21,10 @@ const defaultOptions = {
  * - `Shift+⇠`: Decrease the rotation by 15 degrees.
  * - `Shift+⇡`: Increase the pitch by 10 degrees.
  * - `Shift+⇣`: Decrease the pitch by 10 degrees.
+ *
+ * @group Handlers
  */
-class KeyboardHandler {
+export class KeyboardHandler implements Handler {
     _tr: TransformProvider;
     _enabled: boolean;
     _active: boolean;
@@ -31,7 +34,7 @@ class KeyboardHandler {
     _rotationDisabled: boolean;
 
     /**
-    * @private
+    * @hidden
     */
     constructor(map: Map) {
         this._tr = new TransformProvider(map);
@@ -136,7 +139,9 @@ class KeyboardHandler {
      * Enables the "keyboard rotate and zoom" interaction.
      *
      * @example
-     *   map.keyboard.enable();
+     * ```ts
+     * map.keyboard.enable();
+     * ```
      */
     enable() {
         this._enabled = true;
@@ -146,7 +151,9 @@ class KeyboardHandler {
      * Disables the "keyboard rotate and zoom" interaction.
      *
      * @example
-     *   map.keyboard.disable();
+     * ```ts
+     * map.keyboard.disable();
+     * ```
      */
     disable() {
         this._enabled = false;
@@ -157,7 +164,7 @@ class KeyboardHandler {
      * Returns a Boolean indicating whether the "keyboard rotate and zoom"
      * interaction is enabled.
      *
-     * @returns {boolean} `true` if the "keyboard rotate and zoom"
+     * @returns `true` if the "keyboard rotate and zoom"
      * interaction is enabled.
      */
     isEnabled() {
@@ -168,7 +175,7 @@ class KeyboardHandler {
      * Returns true if the handler is enabled and has detected the start of a
      * zoom/rotate gesture.
      *
-     * @returns {boolean} `true` if the handler is enabled and has detected the
+     * @returns `true` if the handler is enabled and has detected the
      * start of a zoom/rotate gesture.
      */
     isActive() {
@@ -180,7 +187,9 @@ class KeyboardHandler {
      * "keyboard zoom" interaction enabled.
      *
      * @example
-     *   map.keyboard.disableRotation();
+     * ```ts
+     * map.keyboard.disableRotation();
+     * ```
      */
     disableRotation() {
         this._rotationDisabled = true;
@@ -190,8 +199,10 @@ class KeyboardHandler {
      * Enables the "keyboard pan/rotate" interaction.
      *
      * @example
-     *   map.keyboard.enable();
-     *   map.keyboard.enableRotation();
+     * ```ts
+     * map.keyboard.enable();
+     * map.keyboard.enableRotation();
+     * ```
      */
     enableRotation() {
         this._rotationDisabled = false;
@@ -201,5 +212,3 @@ class KeyboardHandler {
 function easeOut(t: number) {
     return t * (2 - t);
 }
-
-export default KeyboardHandler;

package/src/ui/handler/map_event.test.ts

@@ -1,5 +1,5 @@
-import Map, {MapOptions} from '../map';
-import DOM from '../../util/dom';
+import {Map, MapOptions} from '../map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {beforeMapTest} from '../../util/test/util';
 

package/src/ui/handler/map_event.ts

@@ -1,6 +1,6 @@
 import {MapMouseEvent, MapTouchEvent, MapWheelEvent} from '../events';
 import {Handler} from '../handler_manager';
-import type Map from '../map';
+import type {Map} from '../map';
 import type Point from '@mapbox/point-geometry';
 
 export class MapEventHandler implements Handler {

package/src/ui/handler/mouse.ts

@@ -1,6 +1,6 @@
 import type Point from '@mapbox/point-geometry';
 
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 import {DragMoveHandler, DragPanResult, DragRotateResult, DragPitchResult, DragHandler} from './drag_handler';
 import {MouseMoveStateManager} from './drag_move_state_manager';
 

package/src/ui/handler/mouse_rotate.test.ts

@@ -1,8 +1,8 @@
 import {extend} from '../../util/util';
-import Map from '../../ui/map';
-import DOM from '../../util/dom';
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import browser from '../../util/browser';
+import {browser} from '../../util/browser';
 import {beforeMapTest} from '../../util/test/util';
 
 function createMap(options?) {

package/src/ui/handler/scroll_zoom.test.ts

@@ -1,6 +1,6 @@
-import browser from '../../util/browser';
-import Map from '../../ui/map';
-import DOM from '../../util/dom';
+import {browser} from '../../util/browser';
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {setPerformance, beforeMapTest} from '../../util/test/util';
 

package/src/ui/handler/scroll_zoom.ts

@@ -1,14 +1,15 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 
-import {ease as _ease, bindAll, bezier} from '../../util/util';
-import browser from '../../util/browser';
+import {defaultEasing, bezier} from '../../util/util';
+import {browser} from '../../util/browser';
 import {interpolates} from '@maplibre/maplibre-gl-style-spec';
-import LngLat from '../../geo/lng_lat';
-import TransformProvider from './transform-provider';
+import {LngLat} from '../../geo/lng_lat';
+import {TransformProvider} from './transform-provider';
 
-import type Map from '../map';
-import type HandlerManager from '../handler_manager';
+import type {Map} from '../map';
 import type Point from '@mapbox/point-geometry';
+import type {AroundCenterOptions} from './two_fingers_touch';
+import {Handler} from '../handler_manager';
 
 // deltaY value for mouse scroll wheel identification
 const wheelZoomDelta = 4.000244140625;
@@ -22,20 +23,12 @@ const wheelZoomRate = 1 / 450;
 // is used to limit zoom rate in the case of very fast scrolling
 const maxScalePerFrame = 2;
 
-/**
- * The scroll zoom handler options object
- */
-export type ScrollZoomHandlerOptions = {
-    /**
-     * If "center" is passed, map will zoom around the center of map
-     */
-    around?: 'center';
-};
-
 /**
  * The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
+ *
+ * @group Handlers
  */
-class ScrollZoomHandler {
+export class ScrollZoomHandler implements Handler {
     _map: Map;
     _tr: TransformProvider;
     _el: HTMLElement;
@@ -64,34 +57,34 @@ class ScrollZoomHandler {
     };
 
     _frameId: boolean;
-    _handler: HandlerManager;
+    _triggerRenderFrame: () => void;
 
     _defaultZoomRate: number;
     _wheelZoomRate: number;
 
     /**
-     * @private
+     * @hidden
      */
-    constructor(map: Map, handler: HandlerManager) {
+    constructor(map: Map, triggerRenderFrame: () => void) {
         this._map = map;
         this._tr = new TransformProvider(map);
         this._el = map.getCanvasContainer();
-        this._handler = handler;
+        this._triggerRenderFrame = triggerRenderFrame;
 
         this._delta = 0;
 
         this._defaultZoomRate = defaultZoomRate;
         this._wheelZoomRate = wheelZoomRate;
-
-        bindAll(['_onTimeout'], this);
     }
 
     /**
      * Set the zoom rate of a trackpad
-     * @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value.
+     * @param zoomRate - 1/100 The rate used to scale trackpad movement to a zoom value.
      * @example
-     * // Speed up trackpad zoom
+     * Speed up trackpad zoom
+     * ```ts
      * map.scrollZoom.setZoomRate(1/25);
+     * ```
      */
     setZoomRate(zoomRate: number) {
         this._defaultZoomRate = zoomRate;
@@ -99,10 +92,12 @@ class ScrollZoomHandler {
 
     /**
      * 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.
+     * @param wheelZoomRate - 1/450 The rate used to scale mouse wheel movement to a zoom value.
      * @example
-     * // Slow down zoom of mouse wheel
+     * Slow down zoom of mouse wheel
+     * ```ts
      * map.scrollZoom.setWheelZoomRate(1/600);
+     * ```
      */
     setWheelZoomRate(wheelZoomRate: number) {
         this._wheelZoomRate = wheelZoomRate;
@@ -110,8 +105,7 @@ class ScrollZoomHandler {
 
     /**
      * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
-     *
-     * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
+     * @returns `true` if the "scroll to zoom" interaction is enabled.
      */
     isEnabled() {
         return !!this._enabled;
@@ -133,25 +127,26 @@ class ScrollZoomHandler {
     /**
      * Enables the "scroll to zoom" interaction.
      *
-     * @param {ScrollZoomHandlerOptions} [options] Options object.
-     * @param {string} [options.around] If "center" is passed, map will zoom around the center of map
-     *
-     * @example
-     *   map.scrollZoom.enable();
+     * @param options - Options object.
      * @example
-     *  map.scrollZoom.enable({ around: 'center' })
+     * ```ts
+     * map.scrollZoom.enable();
+     * map.scrollZoom.enable({ around: 'center' })
+     * ```
      */
-    enable(options?: ScrollZoomHandlerOptions) {
+    enable(options?: AroundCenterOptions | boolean) {
         if (this.isEnabled()) return;
         this._enabled = true;
-        this._aroundCenter = options && options.around === 'center';
+        this._aroundCenter = !!options && (options as AroundCenterOptions).around === 'center';
     }
 
     /**
      * Disables the "scroll to zoom" interaction.
      *
      * @example
-     *   map.scrollZoom.disable();
+     * ```ts
+     * map.scrollZoom.disable();
+     * ```
      */
     disable() {
         if (!this.isEnabled()) return;
@@ -218,13 +213,13 @@ class ScrollZoomHandler {
         e.preventDefault();
     }
 
-    _onTimeout(initialEvent: MouseEvent) {
+    _onTimeout = (initialEvent: MouseEvent) => {
         this._type = 'wheel';
         this._delta -= this._lastValue;
         if (!this._active) {
             this._start(initialEvent);
         }
-    }
+    };
 
     _start(e: MouseEvent) {
         if (!this._delta) return;
@@ -250,7 +245,7 @@ class ScrollZoomHandler {
         this._aroundPoint = tr.transform.locationPoint(this._around);
         if (!this._frameId) {
             this._frameId = true;
-            this._handler._triggerRenderFrame();
+            this._triggerRenderFrame();
         }
     }
 
@@ -317,7 +312,7 @@ class ScrollZoomHandler {
             this._active = false;
             this._finishTimeout = setTimeout(() => {
                 this._zooming = false;
-                this._handler._triggerRenderFrame();
+                this._triggerRenderFrame();
                 delete this._targetZoom;
                 delete this._finishTimeout;
             }, 200);
@@ -333,16 +328,16 @@ class ScrollZoomHandler {
     }
 
     _smoothOutEasing(duration: number) {
-        let easing = _ease;
+        let easing = defaultEasing;
 
         if (this._prevEase) {
-            const ease = this._prevEase,
-                t = (browser.now() - ease.start) / ease.duration,
-                speed = ease.easing(t + 0.01) - ease.easing(t),
+            const currentEase = this._prevEase;
+            const t = (browser.now() - currentEase.start) / currentEase.duration;
+            const speed = currentEase.easing(t + 0.01) - currentEase.easing(t);
 
-                // Quick hack to make new bezier that is continuous with last
-                x = 0.27 / Math.sqrt(speed * speed + 0.0001) * 0.01,
-                y = Math.sqrt(0.27 * 0.27 - x * x);
+            // 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);
         }
@@ -360,5 +355,3 @@ class ScrollZoomHandler {
         this._active = false;
     }
 }
-
-export default ScrollZoomHandler;

package/src/ui/handler/shim/dblclick_zoom.ts

@@ -1,17 +1,19 @@
-import type ClickZoomHandler from '../click_zoom';
-import type TapZoomHandler from './../tap_zoom';
+import type {ClickZoomHandler} from '../click_zoom';
+import type {TapZoomHandler} from './../tap_zoom';
 
 /**
  * The `DoubleClickZoomHandler` allows the user to zoom the map at a point by
  * double clicking or double tapping.
+ *
+ * @group Handlers
  */
-export default class DoubleClickZoomHandler {
+export class DoubleClickZoomHandler {
 
     _clickZoom: ClickZoomHandler;
     _tapZoom: TapZoomHandler;
 
     /**
-     * @private
+     * @hidden
     */
     constructor(clickZoom: ClickZoomHandler, TapZoom: TapZoomHandler) {
         this._clickZoom = clickZoom;
@@ -22,7 +24,9 @@ export default class DoubleClickZoomHandler {
      * Enables the "double click to zoom" interaction.
      *
      * @example
+     * ```ts
      * map.doubleClickZoom.enable();
+     * ```
      */
     enable() {
         this._clickZoom.enable();
@@ -33,7 +37,9 @@ export default class DoubleClickZoomHandler {
      * Disables the "double click to zoom" interaction.
      *
      * @example
+     * ```ts
      * map.doubleClickZoom.disable();
+     * ```
      */
     disable() {
         this._clickZoom.disable();
@@ -43,7 +49,7 @@ export default class DoubleClickZoomHandler {
     /**
      * Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.
      *
-     * @returns {boolean} `true` if the "double click to zoom" interaction is enabled.
+     * @returns `true` if the "double click to zoom" interaction is enabled.
      */
     isEnabled() {
         return this._clickZoom.isEnabled() && this._tapZoom.isEnabled();
@@ -52,7 +58,7 @@ export default class DoubleClickZoomHandler {
     /**
      * Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used.
      *
-     * @returns {boolean} `true` if the "double click to zoom" interaction is active.
+     * @returns `true` if the "double click to zoom" interaction is active.
      */
     isActive() {
         return this._clickZoom.isActive() || this._tapZoom.isActive();