maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/ui/handler/two_fingers_touch.ts

@@ -1,8 +1,24 @@
 import Point from '@mapbox/point-geometry';
-import DOM from '../../util/dom';
-import type Map from '../map';
+import {DOM} from '../../util/dom';
+import type {Map} from '../map';
+import {Handler} from '../handler_manager';
 
-class TwoFingersTouchHandler {
+/**
+ * An options object sent to the enable function of some of the handlers
+ */
+export type AroundCenterOptions = {
+    /**
+     * If "center" is passed, map will zoom around the center of map
+     */
+    around: 'center';
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom, pitch and rotate the map using two fingers
+ *
+ * @group Handlers
+ */
+abstract class TwoFingersTouchHandler implements Handler {
 
     _enabled: boolean;
     _active: boolean;
@@ -11,6 +27,9 @@ class TwoFingersTouchHandler {
     _startVector: Point;
     _aroundCenter: boolean;
 
+    /**
+     * @hidden
+     */
     constructor() {
         this.reset();
     }
@@ -20,8 +39,8 @@ class TwoFingersTouchHandler {
         delete this._firstTwoTouches;
     }
 
-    _start(points: [Point, Point]) {} //eslint-disable-line
-    _move(points: [Point, Point], pinchAround: Point, e: TouchEvent) { return {}; } //eslint-disable-line
+    abstract _start(points: [Point, Point]);
+    abstract _move(points: [Point, Point], pinchAround: Point, e: TouchEvent);
 
     touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         //log('touchstart', points, e.target.innerHTML, e.targetTouches.length ? e.targetTouches[0].target.innerHTML: undefined);
@@ -69,22 +88,46 @@ class TwoFingersTouchHandler {
         this.reset();
     }
 
-    enable(options?: {
-        around?: 'center';
-    } | null) {
+    /**
+     * Enables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.enable();
+     * ```
+     */
+    enable(options?: AroundCenterOptions | boolean | null) {
         this._enabled = true;
-        this._aroundCenter = !!options && options.around === 'center';
+        this._aroundCenter = !!options && (options as AroundCenterOptions).around === 'center';
     }
 
+    /**
+     * Disables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.disable();
+     * ```
+     */
     disable() {
         this._enabled = false;
         this.reset();
     }
 
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
+     *
+     * @returns  `true` if the "drag to pitch" interaction is enabled.
+     */
     isEnabled() {
         return this._enabled;
     }
 
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
+     *
+     * @returns `true` if the "drag to pitch" interaction is active.
+     */
     isActive() {
         return this._active;
     }
@@ -104,6 +147,11 @@ function getZoomDelta(distance, lastDistance) {
     return Math.log(distance / lastDistance) / Math.LN2;
 }
 
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom the map two fingers
+ *
+ * @group Handlers
+ */
 export class TwoFingersTouchZoomHandler extends TwoFingersTouchHandler {
 
     _distance: number;
@@ -139,6 +187,11 @@ function getBearingDelta(a, b) {
     return a.angleWith(b) * 180 / Math.PI;
 }
 
+/**
+ * The `TwoFingersTouchHandler`s allows the user to rotate the map two fingers
+ *
+ * @group Handlers
+ */
 export class TwoFingersTouchRotateHandler extends TwoFingersTouchHandler {
     _minDiameter: number;
 
@@ -197,6 +250,8 @@ const ALLOWED_SINGLE_TOUCH_TIME = 100;
 
 /**
  * The `TwoFingersTouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers.
+ *
+ * @group Handlers
  */
 export class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
 
@@ -281,42 +336,4 @@ export class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
         const isSameDirection = vectorA.y > 0 === vectorB.y > 0;
         return isVertical(vectorA) && isVertical(vectorB) && isSameDirection;
     }
-
-    /**
-     * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
-     *
-     * @memberof TwoFingersTouchPitchHandler
-     * @name isEnabled
-     * @instance
-     * @returns {boolean} `true` if the "drag to pitch" interaction is enabled.
-     */
-
-    /**
-     * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
-     *
-     * @memberof TwoFingersTouchPitchHandler
-     * @name isActive
-     * @instance
-     * @returns {boolean} `true` if the "drag to pitch" interaction is active.
-     */
-
-    /**
-     * Enables the "drag to pitch" interaction.
-     *
-     * @memberof TwoFingersTouchPitchHandler
-     * @name enable
-     * @instance
-     * @example
-     * map.touchPitch.enable();
-     */
-
-    /**
-     * Disables the "drag to pitch" interaction.
-     *
-     * @memberof TwoFingersTouchPitchHandler
-     * @name disable
-     * @instance
-     * @example
-     * map.touchPitch.disable();
-     */
 }

package/src/ui/handler_inertia.ts

@@ -1,5 +1,5 @@
-import browser from '../util/browser';
-import type Map from './map';
+import {browser} from '../util/browser';
+import type {Map} from './map';
 import {bezier, clamp, extend} from '../util/util';
 import Point from '@mapbox/point-geometry';
 import type {DragPanOptions} from './handler/shim/drag_pan';
@@ -38,7 +38,7 @@ export type InertiaOptions = {
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
 
-export default class HandlerInertia {
+export class HandlerInertia {
     _map: Map;
     _inertiaBuffer: Array<{
         time: number;
@@ -68,7 +68,7 @@ export default class HandlerInertia {
             inertia.shift();
     }
 
-    _onMoveEnd(panInertiaOptions?: DragPanOptions) {
+    _onMoveEnd(panInertiaOptions?: DragPanOptions | boolean) {
         this._drainInertiaBuffer();
         if (this._inertiaBuffer.length < 2) {
             return;

package/src/ui/handler_manager.ts

@@ -1,22 +1,22 @@
 import {Event} from '../util/evented';
-import DOM from '../util/dom';
-import Map, {CompleteMapOptions} from './map';
-import HandlerInertia from './handler_inertia';
+import {DOM} from '../util/dom';
+import {Map, CompleteMapOptions} from './map';
+import {HandlerInertia} from './handler_inertia';
 import {MapEventHandler, BlockableMapEventHandler} from './handler/map_event';
-import BoxZoomHandler from './handler/box_zoom';
-import TapZoomHandler from './handler/tap_zoom';
+import {BoxZoomHandler} from './handler/box_zoom';
+import {TapZoomHandler} from './handler/tap_zoom';
 import {generateMouseRotationHandler, generateMousePitchHandler, generateMousePanHandler} from './handler/mouse';
-import TouchPanHandler from './handler/touch_pan';
+import {TouchPanHandler} from './handler/touch_pan';
 import {TwoFingersTouchZoomHandler, TwoFingersTouchRotateHandler, TwoFingersTouchPitchHandler} from './handler/two_fingers_touch';
-import KeyboardHandler from './handler/keyboard';
-import ScrollZoomHandler from './handler/scroll_zoom';
-import DoubleClickZoomHandler from './handler/shim/dblclick_zoom';
-import ClickZoomHandler from './handler/click_zoom';
-import TapDragZoomHandler from './handler/tap_drag_zoom';
-import DragPanHandler from './handler/shim/drag_pan';
-import DragRotateHandler from './handler/shim/drag_rotate';
-import TouchZoomRotateHandler from './handler/shim/two_fingers_touch';
-import {bindAll, extend} from '../util/util';
+import {KeyboardHandler} from './handler/keyboard';
+import {ScrollZoomHandler} from './handler/scroll_zoom';
+import {DoubleClickZoomHandler} from './handler/shim/dblclick_zoom';
+import {ClickZoomHandler} from './handler/click_zoom';
+import {TapDragZoomHandler} from './handler/tap_drag_zoom';
+import {DragPanHandler} from './handler/shim/drag_pan';
+import {DragRotateHandler} from './handler/shim/drag_rotate';
+import {TwoFingersTouchZoomRotateHandler} from './handler/shim/two_fingers_touch';
+import {extend} from '../util/util';
 import Point from '@mapbox/point-geometry';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
@@ -28,18 +28,22 @@ class RenderFrameEvent extends Event {
     timeStamp: number;
 }
 
-// Handlers interpret dom events and return camera changes that should be
-// applied to the map (`HandlerResult`s). The camera changes are all deltas.
-// The handler itself should have no knowledge of the map's current state.
-// This makes it easier to merge multiple results and keeps handlers simpler.
-// For example, if there is a mousedown and mousemove, the mousePan handler
-// would return a `panDelta` on the mousemove.
+/**
+ * Handlers interpret dom events and return camera changes that should be
+ * applied to the map (`HandlerResult`s). The camera changes are all deltas.
+ * The handler itself should have no knowledge of the map's current state.
+ * This makes it easier to merge multiple results and keeps handlers simpler.
+ * For example, if there is a mousedown and mousemove, the mousePan handler
+ * would return a `panDelta` on the mousemove.
+ */
 export interface Handler {
     enable(): void;
     disable(): void;
     isEnabled(): boolean;
     isActive(): boolean;
-    // `reset` can be called by the manager at any time and must reset everything to it's original state
+    /**
+     * `reset` can be called by the manager at any time and must reset everything to it's original state
+     */
     reset(): void;
     // Handlers can optionally implement these methods.
     // They are called with dom events whenever those dom evens are received.
@@ -52,34 +56,51 @@ export interface Handler {
     readonly mousemove?: (e: MouseEvent, point: Point) => HandlerResult | void;
     readonly mousemoveWindow?: (e: MouseEvent, point: Point) => HandlerResult | void;
     readonly mouseup?: (e: MouseEvent, point: Point) => HandlerResult | void;
+    readonly mouseupWindow?: (e: MouseEvent, point: Point) => HandlerResult | void;
     readonly dblclick?: (e: MouseEvent, point: Point) => HandlerResult | void;
     readonly contextmenu?: (e: MouseEvent) => HandlerResult | void;
     readonly wheel?: (e: WheelEvent, point: Point) => HandlerResult | void;
     readonly keydown?: (e: KeyboardEvent) => HandlerResult | void;
     readonly keyup?: (e: KeyboardEvent) => HandlerResult | void;
-    // `renderFrame` is the only non-dom event. It is called during render
-    // frames and can be used to smooth camera changes (see scroll handler).
+    /**
+     * `renderFrame` is the only non-dom event. It is called during render
+     * frames and can be used to smooth camera changes (see scroll handler).
+     */
     readonly renderFrame?: () => HandlerResult | void;
 }
 
-// All handler methods that are called with events can optionally return a `HandlerResult`.
+/**
+ * All handler methods that are called with events can optionally return a `HandlerResult`.
+ */
 export type HandlerResult = {
     panDelta?: Point;
     zoomDelta?: number;
     bearingDelta?: number;
     pitchDelta?: number;
-    // the point to not move when changing the camera
+    /**
+     * the point to not move when changing the camera
+     */
     around?: Point | null;
-    // same as above, except for pinch actions, which are given higher priority
+    /**
+     * same as above, except for pinch actions, which are given higher priority
+     */
     pinchAround?: Point | null;
-    // A method that can fire a one-off easing by directly changing the map's camera.
+    /**
+     * A method that can fire a one-off easing by directly changing the map's camera.
+     */
     cameraAnimation?: (map: Map) => any;
-    // The last three properties are needed by only one handler: scrollzoom.
-    // The DOM event to be used as the `originalEvent` on any camera change events.
+    /**
+     * The last three properties are needed by only one handler: scrollzoom.
+     * The DOM event to be used as the `originalEvent` on any camera change events.
+     */
     originalEvent?: Event;
-    // Makes the manager trigger a frame, allowing the handler to return multiple results over time (see scrollzoom).
+    /**
+     * Makes the manager trigger a frame, allowing the handler to return multiple results over time (see scrollzoom).
+     */
     needsRenderFrame?: boolean;
-    // The camera changes won't get recorded for inertial zooming.
+    /**
+     * The camera changes won't get recorded for inertial zooming.
+     */
     noInertia?: boolean;
 };
 
@@ -99,7 +120,7 @@ function hasChange(result: HandlerResult) {
     return (result.panDelta && result.panDelta.mag()) || result.zoomDelta || result.bearingDelta || result.pitchDelta;
 }
 
-class HandlerManager {
+export class HandlerManager {
     _map: Map;
     _el: HTMLElement;
     _handlers: Array<{
@@ -138,8 +159,6 @@ class HandlerManager {
 
         this._addDefaultHandlers(options);
 
-        bindAll(['handleEvent', 'handleWindowEvent'], this);
-
         const el = this._el;
 
         this._listeners = [
@@ -199,50 +218,68 @@ class HandlerManager {
 
         const boxZoom = map.boxZoom = new BoxZoomHandler(map, options);
         this._add('boxZoom', boxZoom);
+        if (options.interactive && options.boxZoom) {
+            boxZoom.enable();
+        }
 
         const tapZoom = new TapZoomHandler(map);
         const clickZoom = new ClickZoomHandler(map);
         map.doubleClickZoom = new DoubleClickZoomHandler(clickZoom, tapZoom);
         this._add('tapZoom', tapZoom);
         this._add('clickZoom', clickZoom);
+        if (options.interactive && options.doubleClickZoom) {
+            map.doubleClickZoom.enable();
+        }
 
         const tapDragZoom = new TapDragZoomHandler();
         this._add('tapDragZoom', tapDragZoom);
 
         const touchPitch = map.touchPitch = new TwoFingersTouchPitchHandler(map);
         this._add('touchPitch', touchPitch);
+        if (options.interactive && options.touchPitch) {
+            map.touchPitch.enable(options.touchPitch);
+        }
 
         const mouseRotate = generateMouseRotationHandler(options);
         const mousePitch = generateMousePitchHandler(options);
         map.dragRotate = new DragRotateHandler(options, mouseRotate, mousePitch);
         this._add('mouseRotate', mouseRotate, ['mousePitch']);
         this._add('mousePitch', mousePitch, ['mouseRotate']);
+        if (options.interactive && options.dragRotate) {
+            map.dragRotate.enable();
+        }
 
         const mousePan = generateMousePanHandler(options);
         const touchPan = new TouchPanHandler(options, map);
         map.dragPan = new DragPanHandler(el, mousePan, touchPan);
         this._add('mousePan', mousePan);
         this._add('touchPan', touchPan, ['touchZoom', 'touchRotate']);
+        if (options.interactive && options.dragPan) {
+            map.dragPan.enable(options.dragPan);
+        }
 
         const touchRotate = new TwoFingersTouchRotateHandler();
         const touchZoom = new TwoFingersTouchZoomHandler();
-        map.touchZoomRotate = new TouchZoomRotateHandler(el, touchZoom, touchRotate, tapDragZoom);
+        map.touchZoomRotate = new TwoFingersTouchZoomRotateHandler(el, touchZoom, touchRotate, tapDragZoom);
         this._add('touchRotate', touchRotate, ['touchPan', 'touchZoom']);
         this._add('touchZoom', touchZoom, ['touchPan', 'touchRotate']);
+        if (options.interactive && options.touchZoomRotate) {
+            map.touchZoomRotate.enable(options.touchZoomRotate);
+        }
 
-        const scrollZoom = map.scrollZoom = new ScrollZoomHandler(map, this);
+        const scrollZoom = map.scrollZoom = new ScrollZoomHandler(map, () => this._triggerRenderFrame());
         this._add('scrollZoom', scrollZoom, ['mousePan']);
+        if (options.interactive && options.scrollZoom) {
+            map.scrollZoom.enable(options.scrollZoom);
+        }
 
         const keyboard = map.keyboard = new KeyboardHandler(map);
         this._add('keyboard', keyboard);
+        if (options.interactive && options.keyboard) {
+            map.keyboard.enable();
+        }
 
         this._add('blockableMapEvent', new BlockableMapEventHandler(map));
-
-        for (const name of ['boxZoom', 'doubleClickZoom', 'tapDragZoom', 'touchPitch', 'dragRotate', 'dragPan', 'touchZoomRotate', 'scrollZoom', 'keyboard']) {
-            if (options.interactive && options[name]) {
-                map[name].enable(options[name]);
-            }
-        }
     }
 
     _add(handlerName: string, handler: Handler, allowed?: Array<string>) {
@@ -290,9 +327,9 @@ class HandlerManager {
         return false;
     }
 
-    handleWindowEvent(e: InputEvent) {
+    handleWindowEvent = (e: { type: 'mousemove' | 'mouseup' | 'touchmove'}) => {
         this.handleEvent(e, `${e.type}Window`);
-    }
+    };
 
     _getMapTouches(touches: TouchList) {
         const mapTouches = [];
@@ -305,7 +342,7 @@ class HandlerManager {
         return mapTouches as any as TouchList;
     }
 
-    handleEvent(e: Event, eventName?: string) {
+    handleEvent = (e: Event, eventName?: keyof Handler) => {
 
         if (e.type === 'blur') {
             this.stop(true);
@@ -337,8 +374,8 @@ class HandlerManager {
                 handler.reset();
 
             } else {
-                if ((handler as any)[eventName || e.type]) {
-                    data = (handler as any)[eventName || e.type](e, points, mapTouches);
+                if (handler[eventName || e.type]) {
+                    data = handler[eventName || e.type](e, points, mapTouches);
                     this.mergeHandlerResult(mergedHandlerResult, eventsInProgress, data, handlerName, inputEvent);
                     if (data && data.needsRenderFrame) {
                         this._triggerRenderFrame();
@@ -377,7 +414,7 @@ class HandlerManager {
             this._changes = [];
             cameraAnimation(this._map);
         }
-    }
+    };
 
     mergeHandlerResult(mergedHandlerResult: HandlerResult,
         eventsInProgress: EventsInProgress,
@@ -581,7 +618,4 @@ class HandlerManager {
             this._frameId = this._requestFrame();
         }
     }
-
 }
-
-export default HandlerManager;

package/src/ui/hash.test.ts

@@ -1,4 +1,4 @@
-import Hash from './hash';
+import {Hash} from './hash';
 import {createMap as globalCreateMap, beforeMapTest} from '../util/test/util';
 
 describe('hash', () => {

package/src/ui/hash.ts

@@ -1,36 +1,26 @@
-import {bindAll} from '../util/util';
-import throttle from '../util/throttle';
+import {throttle} from '../util/throttle';
 
-import type Map from './map';
+import type {Map} from './map';
 
-/*
+/**
  * Adds the map's position to its page's location hash.
  * Passed as an option to the map object.
  *
- * @returns {Hash} `this`
+ * @group Markers and Controls
  */
-class Hash {
+export class Hash {
     _map: Map;
-    _updateHash: () => ReturnType<typeof setTimeout>;
     _hashName: string;
 
     constructor(hashName?: string | null) {
         this._hashName = hashName && encodeURIComponent(hashName);
-        bindAll([
-            '_getCurrentHash',
-            '_onHashChange',
-            '_updateHash'
-        ], this);
-
-        // Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds.
-        this._updateHash = throttle(this._updateHashUnthrottled.bind(this), 30 * 1000 / 100);
     }
 
-    /*
+    /**
      * Map element to listen for coordinate changes
      *
-     * @param {Object} map
-     * @returns {Hash} `this`
+     * @param map - The map object
+     * @returns `this`
      */
     addTo(map: Map) {
         this._map = map;
@@ -39,10 +29,10 @@ class Hash {
         return this;
     }
 
-    /*
+    /**
      * Removes hash
      *
-     * @returns {Popup} `this`
+     * @returns `this`
      */
     remove() {
         removeEventListener('hashchange', this._onHashChange, false);
@@ -95,7 +85,7 @@ class Hash {
         return `#${hash}`;
     }
 
-    _getCurrentHash() {
+    _getCurrentHash = () => {
         // Get the current hash from location, stripped from its number sign
         const hash = window.location.hash.replace('#', '');
         if (this._hashName) {
@@ -111,9 +101,9 @@ class Hash {
             return (keyval ? keyval[1] || '' : '').split('/');
         }
         return hash.split('/');
-    }
+    };
 
-    _onHashChange() {
+    _onHashChange = () => {
         const loc = this._getCurrentHash();
         if (loc.length >= 3 && !loc.some(v => isNaN(v))) {
             const bearing = this._map.dragRotate.isEnabled() && this._map.touchZoomRotate.isEnabled() ? +(loc[3] || 0) : this._map.getBearing();
@@ -126,9 +116,9 @@ class Hash {
             return true;
         }
         return false;
-    }
+    };
 
-    _updateHashUnthrottled() {
+    _updateHashUnthrottled = () => {
         // Replace if already present, else append the updated hash string
         const location = window.location.href.replace(/(#.+)?$/, this.getHashString());
         try {
@@ -138,8 +128,11 @@ class Hash {
             // with iframe.contentWindow.document.write(...).
             // https://github.com/mapbox/mapbox-gl-js/issues/7410
         }
-    }
+    };
 
-}
+    /**
+     * Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds.
+     */
+    _updateHash = throttle(this._updateHashUnthrottled, 30 * 1000 / 100);
 
-export default Hash;
+}

package/src/ui/map/isMoving.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/map/isRotating.test.ts

@@ -1,7 +1,7 @@
-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';
 
 let map;

package/src/ui/map/isZooming.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 {beforeMapTest} from '../../util/test/util';