mapbox-gl 1.13.2

package/src/ui/handler/box_zoom.js

@@ -0,0 +1,170 @@
+// @flow
+
+import DOM from '../../util/dom';
+
+import {Event} from '../../util/evented';
+
+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.
+ */
+class BoxZoomHandler {
+    _map: Map;
+    _el: HTMLElement;
+    _container: HTMLElement;
+    _enabled: boolean;
+    _active: boolean;
+    _startPos: Point;
+    _lastPos: Point;
+    _box: HTMLElement;
+    _clickTolerance: number;
+
+    /**
+     * @private
+     */
+    constructor(map: Map, options: {
+        clickTolerance: number
+    }) {
+        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.
+     */
+    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.
+     */
+    isActive() {
+        return !!this._active;
+    }
+
+    /**
+     * Enables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.enable();
+     */
+    enable() {
+        if (this.isEnabled()) return;
+        this._enabled = true;
+    }
+
+    /**
+     * Disables the "box zoom" interaction.
+     *
+     * @example
+     *   map.boxZoom.disable();
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        this._enabled = false;
+    }
+
+    mousedown(e: MouseEvent, point: Point) {
+        if (!this.isEnabled()) return;
+        if (!(e.shiftKey && e.button === 0)) return;
+
+        DOM.disableDrag();
+        this._startPos = this._lastPos = point;
+        this._active = true;
+    }
+
+    mousemoveWindow(e: MouseEvent, point: 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.create('div', 'mapboxgl-boxzoom', this._container);
+            this._container.classList.add('mapboxgl-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.setTransform(this._box, `translate(${minX}px,${minY}px)`);
+
+        this._box.style.width = `${maxX - minX}px`;
+        this._box.style.height = `${maxY - minY}px`;
+    }
+
+    mouseupWindow(e: MouseEvent, point: Point) {
+        if (!this._active) return;
+
+        if (e.button !== 0) return;
+
+        const p0 = this._startPos,
+            p1 = point;
+
+        this.reset();
+
+        DOM.suppressClick();
+
+        if (p0.x === p1.x && p0.y === p1.y) {
+            this._fireEvent('boxzoomcancel', e);
+        } else {
+            this._map.fire(new Event('boxzoomend', {originalEvent: e}));
+            return {
+                cameraAnimation: map => map.fitScreenCoordinates(p0, p1, this._map.getBearing(), {linear: true})
+            };
+        }
+    }
+
+    keydown(e: KeyboardEvent) {
+        if (!this._active) return;
+
+        if (e.keyCode === 27) {
+            this.reset();
+            this._fireEvent('boxzoomcancel', e);
+        }
+    }
+
+    blur() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+
+        this._container.classList.remove('mapboxgl-crosshair');
+
+        if (this._box) {
+            DOM.remove(this._box);
+            this._box = (null: any);
+        }
+
+        DOM.enableDrag();
+
+        delete this._startPos;
+        delete this._lastPos;
+    }
+
+    _fireEvent(type: string, e: *) {
+        return this._map.fire(new Event(type, {originalEvent: e}));
+    }
+}
+
+export default BoxZoomHandler;

package/src/ui/handler/click_zoom.js

@@ -0,0 +1,52 @@
+// @flow
+
+import type Point from '@mapbox/point-geometry';
+import type Map from '../map';
+
+export default class ClickZoomHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+    }
+
+    blur() {
+        this.reset();
+    }
+
+    dblclick(e: MouseEvent, point: Point) {
+        e.preventDefault();
+        return {
+            cameraAnimation: (map: Map) => {
+                map.easeTo({
+                    duration: 300,
+                    zoom: map.getZoom() + (e.shiftKey ? -1 : 1),
+                    around: map.unproject(point)
+                }, {originalEvent: e});
+            }
+        };
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}

package/src/ui/handler/handler_util.js

@@ -0,0 +1,12 @@
+// @flow
+
+import assert from 'assert';
+
+export function indexTouches(touches: Array<Touch>, points: Array<Point>) {
+    assert(touches.length === points.length);
+    const obj = {};
+    for (let i = 0; i < touches.length; i++) {
+        obj[touches[i].identifier] = points[i];
+    }
+    return obj;
+}

package/src/ui/handler/keyboard.js

@@ -0,0 +1,208 @@
+// @flow
+
+import type Map from '../map';
+
+const defaultOptions = {
+    panStep: 100,
+    bearingStep: 15,
+    pitchStep: 10
+};
+
+/**
+ * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using
+ * the following keyboard shortcuts:
+ *
+ * - `=` / `+`: Increase the zoom level by 1.
+ * - `Shift-=` / `Shift-+`: Increase the zoom level by 2.
+ * - `-`: Decrease the zoom level by 1.
+ * - `Shift--`: Decrease the zoom level by 2.
+ * - Arrow keys: Pan by 100 pixels.
+ * - `Shift+⇢`: Increase the rotation by 15 degrees.
+ * - `Shift+⇠`: Decrease the rotation by 15 degrees.
+ * - `Shift+⇡`: Increase the pitch by 10 degrees.
+ * - `Shift+⇣`: Decrease the pitch by 10 degrees.
+ */
+class KeyboardHandler {
+    _enabled: boolean;
+    _active: boolean;
+    _panStep: number;
+    _bearingStep: number;
+    _pitchStep: number;
+    _rotationDisabled: boolean;
+
+    /**
+    * @private
+    */
+    constructor() {
+        const stepOptions = defaultOptions;
+        this._panStep = stepOptions.panStep;
+        this._bearingStep = stepOptions.bearingStep;
+        this._pitchStep = stepOptions.pitchStep;
+        this._rotationDisabled = false;
+    }
+
+    blur() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+    }
+
+    keydown(e: KeyboardEvent) {
+        if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+        let zoomDir = 0;
+        let bearingDir = 0;
+        let pitchDir = 0;
+        let xDir = 0;
+        let yDir = 0;
+
+        switch (e.keyCode) {
+        case 61:
+        case 107:
+        case 171:
+        case 187:
+            zoomDir = 1;
+            break;
+
+        case 189:
+        case 109:
+        case 173:
+            zoomDir = -1;
+            break;
+
+        case 37:
+            if (e.shiftKey) {
+                bearingDir = -1;
+            } else {
+                e.preventDefault();
+                xDir = -1;
+            }
+            break;
+
+        case 39:
+            if (e.shiftKey) {
+                bearingDir = 1;
+            } else {
+                e.preventDefault();
+                xDir = 1;
+            }
+            break;
+
+        case 38:
+            if (e.shiftKey) {
+                pitchDir = 1;
+            } else {
+                e.preventDefault();
+                yDir = -1;
+            }
+            break;
+
+        case 40:
+            if (e.shiftKey) {
+                pitchDir = -1;
+            } else {
+                e.preventDefault();
+                yDir = 1;
+            }
+            break;
+
+        default:
+            return;
+        }
+
+        if (this._rotationDisabled) {
+            bearingDir = 0;
+            pitchDir = 0;
+        }
+
+        return {
+            cameraAnimation: (map: Map) => {
+                const zoom = map.getZoom();
+                map.easeTo({
+                    duration: 300,
+                    easeId: 'keyboardHandler',
+                    easing: easeOut,
+
+                    zoom: zoomDir ? Math.round(zoom) + zoomDir * (e.shiftKey ? 2 : 1) : zoom,
+                    bearing: map.getBearing() + bearingDir * this._bearingStep,
+                    pitch: map.getPitch() + pitchDir * this._pitchStep,
+                    offset: [-xDir * this._panStep, -yDir * this._panStep],
+                    center: map.getCenter()
+                }, {originalEvent: e});
+            }
+        };
+    }
+
+    /**
+     * Enables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     *   map.keyboard.enable();
+     */
+    enable() {
+        this._enabled = true;
+    }
+
+    /**
+     * Disables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     *   map.keyboard.disable();
+     */
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "keyboard rotate and zoom"
+     * interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "keyboard rotate and zoom"
+     * interaction is enabled.
+     */
+    isEnabled() {
+        return this._enabled;
+    }
+
+    /**
+     * 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
+     * start of a zoom/rotate gesture.
+     */
+    isActive() {
+        return this._active;
+    }
+
+    /**
+     * Disables the "keyboard pan/rotate" interaction, leaving the
+     * "keyboard zoom" interaction enabled.
+     *
+     * @example
+     *   map.keyboard.disableRotation();
+     */
+    disableRotation() {
+        this._rotationDisabled = true;
+    }
+
+    /**
+     * Enables the "keyboard pan/rotate" interaction.
+     *
+     * @example
+     *   map.keyboard.enable();
+     *   map.keyboard.enableRotation();
+     */
+    enableRotation() {
+        this._rotationDisabled = false;
+    }
+}
+
+function easeOut(t: number) {
+    return t * (2 - t);
+}
+
+export default KeyboardHandler;

package/src/ui/handler/map_event.js

@@ -0,0 +1,156 @@
+// @flow
+
+import {MapMouseEvent, MapTouchEvent, MapWheelEvent} from '../events';
+import type Map from '../map';
+
+export class MapEventHandler {
+
+    _mousedownPos: Point;
+    _clickTolerance: number;
+    _map: Map;
+
+    constructor(map: Map, options: { clickTolerance: number }) {
+        this._map = map;
+        this._clickTolerance = options.clickTolerance;
+    }
+
+    reset() {
+        delete this._mousedownPos;
+    }
+
+    wheel(e: WheelEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - ScrollZoom
+        return this._firePreventable(new MapWheelEvent(e.type, this._map, e));
+    }
+
+    mousedown(e: MouseEvent, point: Point) {
+        this._mousedownPos = point;
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - MousePan
+        // - MouseRotate
+        // - MousePitch
+        // - DblclickHandler
+        return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseup(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    click(e: MouseEvent, point: Point) {
+        if (this._mousedownPos && this._mousedownPos.dist(point) >= this._clickTolerance) return;
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    dblclick(e: MouseEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - DblClickZoom
+        return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseover(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseout(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    touchstart(e: TouchEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - TouchPan
+        // - TouchZoom
+        // - TouchRotate
+        // - TouchPitch
+        // - TapZoom
+        // - SwipeZoom
+        return this._firePreventable(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchmove(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchend(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchcancel(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    _firePreventable(mapEvent: MapMouseEvent | MapTouchEvent | MapWheelEvent) {
+        this._map.fire(mapEvent);
+        if (mapEvent.defaultPrevented) {
+            // returning an object marks the handler as active and resets other handlers
+            return {};
+        }
+    }
+
+    isEnabled() {
+        return true;
+    }
+
+    isActive() {
+        return false;
+    }
+    enable() {}
+    disable() {}
+}
+
+export class BlockableMapEventHandler {
+    _map: Map;
+    _delayContextMenu: boolean;
+    _contextMenuEvent: MouseEvent;
+
+    constructor(map: Map) {
+        this._map = map;
+    }
+
+    reset() {
+        this._delayContextMenu = false;
+        delete this._contextMenuEvent;
+    }
+
+    mousemove(e: MouseEvent) {
+        // mousemove map events should not be fired when interaction handlers (pan, rotate, etc) are active
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mousedown() {
+        this._delayContextMenu = true;
+    }
+
+    mouseup() {
+        this._delayContextMenu = false;
+        if (this._contextMenuEvent) {
+            this._map.fire(new MapMouseEvent('contextmenu', this._map, this._contextMenuEvent));
+            delete this._contextMenuEvent;
+        }
+    }
+    contextmenu(e: MouseEvent) {
+        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.fire(new MapMouseEvent(e.type, this._map, e));
+        }
+
+        // prevent browser context menu when necessary
+        if (this._map.listens('contextmenu')) {
+            e.preventDefault();
+        }
+    }
+
+    isEnabled() {
+        return true;
+    }
+
+    isActive() {
+        return false;
+    }
+    enable() {}
+    disable() {}
+}