@mapgis/mapbox-gl 1.9.12 → 16.0.0

package/src/ui/handler/drag_rotate.js

@@ -0,0 +1,378 @@
+// @flow
+
+import DOM from '../../util/dom';
+
+import {bezier, bindAll} from '../../util/util';
+import window from '../../util/window';
+import browser from '../../util/browser';
+import {Event} from '../../util/evented';
+import assert from 'assert';
+
+import type Map from '../map';
+import type Point from '@mapbox/point-geometry';
+import type {TaskID} from '../../util/task_queue';
+
+const inertiaLinearity = 0.25,
+    inertiaEasing = bezier(0, 0, inertiaLinearity, 1),
+    inertiaMaxSpeed = 180, // deg/s
+    inertiaDeceleration = 720; // deg/s^2
+
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ */
+class DragRotateHandler {
+    _map: Map;
+    _el: HTMLElement;
+    _state: 'disabled' | 'enabled' | 'pending' | 'active';
+    _button: 'right' | 'left';
+    _eventButton: number;
+    _bearingSnap: number;
+    _pitchWithRotate: boolean;
+    _clickTolerance: number;
+
+    _startPos: Point;
+    _prevPos: Point;
+    _lastPos: Point;
+    _startTime: number;
+    _lastMoveEvent: MouseEvent;
+    _inertia: Array<[number, number]>;
+    _center: Point;
+    _frameId: ?TaskID;
+
+    /**
+     * @param {Map} map The Mapbox GL JS map to add the handler to.
+     * @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(map: Map, options: {
+        button?: 'right' | 'left',
+        element?: HTMLElement,
+        bearingSnap?: number,
+        pitchWithRotate?: boolean,
+        clickTolerance?: number
+    }) {
+        this._map = map;
+        this._el = options.element || map.getCanvasContainer();
+        this._state = 'disabled';
+        this._button = options.button || 'right';
+        this._bearingSnap = options.bearingSnap || 0;
+        this._pitchWithRotate = options.pitchWithRotate !== false;
+        this._clickTolerance = options.clickTolerance || 1;
+
+        bindAll([
+            'onMouseDown',
+            '_onMouseMove',
+            '_onMouseUp',
+            '_onBlur',
+            '_onDragFrame'
+        ], this);
+    }
+
+    /**
+     * 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._state !== 'disabled';
+    }
+
+    /**
+     * 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._state === 'active';
+    }
+
+    /**
+     * Enables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.enable();
+     */
+    enable() {
+        if (this.isEnabled()) return;
+        this._state = 'enabled';
+    }
+
+    /**
+     * Disables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.disable();
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        switch (this._state) {
+        case 'active':
+            this._state = 'disabled';
+            this._unbind();
+            this._deactivate();
+            this._fireEvent('rotateend');
+            if (this._pitchWithRotate) {
+                this._fireEvent('pitchend');
+            }
+            this._fireEvent('moveend');
+            break;
+        case 'pending':
+            this._state = 'disabled';
+            this._unbind();
+            break;
+        default:
+            this._state = 'disabled';
+            break;
+        }
+    }
+
+    onMouseDown(e: MouseEvent) {
+        if (this._state !== 'enabled') return;
+
+        const touchEvent = e.type === 'touchstart';
+
+        if (touchEvent) {
+            this._startTime = Date.now();
+        } else {
+            if (this._button === 'right') {
+                this._eventButton = DOM.mouseButton(e);
+
+                if (e.altKey || e.metaKey) return;
+                if (this._eventButton !== (e.ctrlKey ? 0 : 2)) return;
+            } else {
+                if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;
+                this._eventButton = 0;
+            }
+        }
+
+        DOM.disableDrag();
+
+        // Bind window-level event listeners for move and up/end events. In the absence of
+        // the pointer capture API, which is not supported by all necessary platforms,
+        // window-level event listeners give us the best shot at capturing events that
+        // fall outside the map canvas element. Use `{capture: true}` for the move event
+        // to prevent map move events from being fired during a drag.
+        if (touchEvent) {
+            window.document.addEventListener('touchmove', this._onMouseMove, {capture: true});
+            window.document.addEventListener('touchend', this._onMouseUp);
+        } else {
+            window.document.addEventListener('mousemove', this._onMouseMove, {capture: true});
+            window.document.addEventListener('mouseup', this._onMouseUp);
+        }
+
+        // Deactivate when the window loses focus. Otherwise if a mouseup occurs when the window
+        // isn't in focus, dragging will continue even though the mouse is no longer pressed.
+        window.addEventListener('blur', this._onBlur);
+
+        this._state = 'pending';
+        this._inertia = [[browser.now(), this._map.getBearing()]];
+        this._startPos = this._prevPos = this._lastPos = DOM.mousePos(this._el, e);
+        this._center = this._map.transform.centerPoint;  // Center of rotation
+
+        e.preventDefault();
+    }
+
+    _onMouseMove(e: MouseEvent) {
+        const pos = DOM.mousePos(this._el, e);
+        if (this._lastPos.equals(pos) || ((this._state === 'pending') && (pos.dist(this._startPos) < this._clickTolerance))) {
+            return;
+        }
+
+        this._lastMoveEvent = e;
+        this._lastPos = pos;
+
+        if (this._state === 'pending') {
+            this._state = 'active';
+            this._fireEvent('rotatestart', e);
+            this._fireEvent('movestart', e);
+            if (this._pitchWithRotate) {
+                this._fireEvent('pitchstart', e);
+            }
+        }
+
+        if (!this._frameId) {
+            this._frameId = this._map._requestRenderFrame(this._onDragFrame);
+        }
+    }
+
+    _onDragFrame() {
+        this._frameId = null;
+
+        const e = this._lastMoveEvent;
+        if (!e) return;
+        const tr = this._map.transform;
+
+        const p1 = this._prevPos,
+            p2 = this._lastPos,
+            bearingDiff = (p1.x - p2.x) * 0.8,
+            pitchDiff = (p1.y - p2.y) * -0.5,
+            bearing = tr.bearing - bearingDiff,
+            pitch = tr.pitch - pitchDiff,
+            inertia = this._inertia,
+            last = inertia[inertia.length - 1];
+
+        this._drainInertiaBuffer();
+        inertia.push([browser.now(), this._map._normalizeBearing(bearing, last[1])]);
+
+        const prevBearing = tr.bearing;
+        tr.bearing = bearing;
+        if (this._pitchWithRotate) {
+            const prevPitch = tr.pitch;
+            tr.pitch = pitch;
+            if (tr.pitch !== prevPitch) {
+                this._fireEvent('pitch', e);
+            }
+        }
+
+        if (tr.bearing !== prevBearing) {
+            this._fireEvent('rotate', e);
+        }
+        this._fireEvent('move', e);
+
+        delete this._lastMoveEvent;
+        this._prevPos = this._lastPos;
+    }
+
+    _onMouseUp(e: MouseEvent) {
+        const touchEvent = e.type === 'touchend';
+
+        if (touchEvent && (this._startPos === this._lastPos) && (Date.now() - this._startTime) < 300) {
+            this._el.click();
+        }
+
+        if (!touchEvent && DOM.mouseButton(e) !== this._eventButton) return;
+        switch (this._state) {
+        case 'active':
+            this._state = 'enabled';
+            DOM.suppressClick();
+            this._unbind();
+            this._deactivate();
+            this._inertialRotate(e);
+            break;
+        case 'pending':
+            this._state = 'enabled';
+            this._unbind();
+            break;
+        default:
+            assert(false);
+            break;
+        }
+    }
+
+    _onBlur(e: FocusEvent) {
+        switch (this._state) {
+        case 'active':
+            this._state = 'enabled';
+            this._unbind();
+            this._deactivate();
+            this._fireEvent('rotateend', e);
+            if (this._pitchWithRotate) {
+                this._fireEvent('pitchend', e);
+            }
+            this._fireEvent('moveend', e);
+            break;
+        case 'pending':
+            this._state = 'enabled';
+            this._unbind();
+            break;
+        default:
+            assert(false);
+            break;
+        }
+    }
+
+    _unbind() {
+        window.document.removeEventListener('mousemove', this._onMouseMove, {capture: true});
+        window.document.removeEventListener('mouseup', this._onMouseUp);
+        window.document.removeEventListener('touchmove', this._onMouseMove, {capture: true});
+        window.document.removeEventListener('touchend', this._onMouseUp);
+        window.removeEventListener('blur', this._onBlur);
+        DOM.enableDrag();
+    }
+
+    _deactivate() {
+        if (this._frameId) {
+            this._map._cancelRenderFrame(this._frameId);
+            this._frameId = null;
+        }
+        delete this._lastMoveEvent;
+        delete this._startPos;
+        delete this._prevPos;
+        delete this._lastPos;
+    }
+
+    _inertialRotate(e: MouseEvent) {
+        this._fireEvent('rotateend', e);
+        this._drainInertiaBuffer();
+
+        const map = this._map,
+            mapBearing = map.getBearing(),
+            inertia = this._inertia;
+
+        const finish = () => {
+            if (Math.abs(mapBearing) < this._bearingSnap) {
+                map.resetNorth({noMoveStart: true}, {originalEvent: e});
+            } else {
+                this._fireEvent('moveend', e);
+            }
+            if (this._pitchWithRotate) this._fireEvent('pitchend', e);
+        };
+
+        if (inertia.length < 2) {
+            finish();
+            return;
+        }
+
+        const first = inertia[0],
+            last = inertia[inertia.length - 1],
+            previous = inertia[inertia.length - 2];
+        let bearing = map._normalizeBearing(mapBearing, previous[1]);
+        const flingDiff = last[1] - first[1],
+            sign = flingDiff < 0 ? -1 : 1,
+            flingDuration = (last[0] - first[0]) / 1000;
+
+        if (flingDiff === 0 || flingDuration === 0) {
+            finish();
+            return;
+        }
+
+        let speed = Math.abs(flingDiff * (inertiaLinearity / flingDuration));  // deg/s
+        if (speed > inertiaMaxSpeed) {
+            speed = inertiaMaxSpeed;
+        }
+
+        const duration = speed / (inertiaDeceleration * inertiaLinearity),
+            offset = sign * speed * (duration / 2);
+
+        bearing += offset;
+
+        if (Math.abs(map._normalizeBearing(bearing, 0)) < this._bearingSnap) {
+            bearing = map._normalizeBearing(0, bearing);
+        }
+
+        map.rotateTo(bearing, {
+            duration: duration * 1000,
+            easing: inertiaEasing,
+            noMoveStart: true
+        }, {originalEvent: e});
+    }
+
+    _fireEvent(type: string, e: *) {
+        return this._map.fire(new Event(type, e ? {originalEvent: e} : {}));
+    }
+
+    _drainInertiaBuffer() {
+        const inertia = this._inertia,
+            now = browser.now(),
+            cutoff = 160;   //msec
+
+        while (inertia.length > 0 && now - inertia[0][0] > cutoff)
+            inertia.shift();
+    }
+}
+
+export default DragRotateHandler;

package/src/ui/handler/keyboard.js

@@ -0,0 +1,161 @@
+// @flow
+
+import {bindAll} from '../../util/util';
+
+import type Map from '../map';
+
+const 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 {
+    _map: Map;
+    _el: HTMLElement;
+    _enabled: boolean;
+
+    /**
+     * @private
+     */
+    constructor(map: Map) {
+        this._map = map;
+        this._el = map.getCanvasContainer();
+
+        bindAll([
+            '_onKeyDown'
+        ], this);
+    }
+
+    /**
+     * Returns a Boolean indicating whether keyboard interaction is enabled.
+     *
+     * @returns {boolean} `true` if keyboard interaction is enabled.
+     */
+    isEnabled() {
+        return !!this._enabled;
+    }
+
+    /**
+     * Enables keyboard interaction.
+     *
+     * @example
+     * map.keyboard.enable();
+     */
+    enable() {
+        if (this.isEnabled()) return;
+        this._el.addEventListener('keydown', this._onKeyDown, false);
+        this._enabled = true;
+    }
+
+    /**
+     * Disables keyboard interaction.
+     *
+     * @example
+     * map.keyboard.disable();
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        this._el.removeEventListener('keydown', this._onKeyDown);
+        this._enabled = false;
+    }
+
+    _onKeyDown(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 {
+                yDir = 1;
+                e.preventDefault();
+            }
+            break;
+
+        default:
+            return;
+        }
+
+        const map = this._map;
+        const zoom = map.getZoom();
+
+        const easeOptions = {
+            duration: 300,
+            delayEndEvents: 500,
+            easing: easeOut,
+
+            zoom: zoomDir ? Math.round(zoom) + zoomDir * (e.shiftKey ? 2 : 1) : zoom,
+            bearing: map.getBearing() + bearingDir * bearingStep,
+            pitch: map.getPitch() + pitchDir * pitchStep,
+            offset: [-xDir * panStep, -yDir * panStep],
+            center: map.getCenter()
+        };
+
+        map.easeTo(easeOptions, {originalEvent: e});
+    }
+}
+
+function easeOut(t) {
+    return t * (2 - t);
+}
+
+export default KeyboardHandler;