mapbox-gl 1.13.2

package/src/ui/handler/mouse.js

@@ -0,0 +1,171 @@
+// @flow
+
+import DOM from '../../util/dom';
+import type Point from '@mapbox/point-geometry';
+
+const LEFT_BUTTON = 0;
+const RIGHT_BUTTON = 2;
+
+// the values for each button in MouseEvent.buttons
+const BUTTONS_FLAGS = {
+    [LEFT_BUTTON]: 1,
+    [RIGHT_BUTTON]: 2
+};
+
+function buttonStillPressed(e: MouseEvent, button: number) {
+    const flag = BUTTONS_FLAGS[button];
+    return e.buttons === undefined || (e.buttons & flag) !== flag;
+}
+
+class MouseHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _lastPoint: Point;
+    _eventButton: number;
+    _moved: boolean;
+    _clickTolerance: number;
+
+    constructor(options: { clickTolerance: number }) {
+        this.reset();
+        this._clickTolerance = options.clickTolerance || 1;
+    }
+
+    blur() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        this._moved = false;
+        delete this._lastPoint;
+        delete this._eventButton;
+    }
+
+    _correctButton(e: MouseEvent, button: number) {  //eslint-disable-line
+        return false; // implemented by child
+    }
+
+    _move(lastPoint: Point, point: Point) {  //eslint-disable-line
+        return {}; // implemented by child
+    }
+
+    mousedown(e: MouseEvent, point: Point) {
+        if (this._lastPoint) return;
+
+        const eventButton = DOM.mouseButton(e);
+        if (!this._correctButton(e, eventButton)) return;
+
+        this._lastPoint = point;
+        this._eventButton = eventButton;
+    }
+
+    mousemoveWindow(e: MouseEvent, point: Point) {
+        const lastPoint = this._lastPoint;
+        if (!lastPoint) return;
+        e.preventDefault();
+
+        if (buttonStillPressed(e, this._eventButton)) {
+            // Some browsers don't fire a `mouseup` when the mouseup occurs outside
+            // the window or iframe:
+            // https://github.com/mapbox/mapbox-gl-js/issues/4622
+            //
+            // If the button is no longer pressed during this `mousemove` it may have
+            // been released outside of the window or iframe.
+            this.reset();
+            return;
+        }
+
+        if (!this._moved && point.dist(lastPoint) < this._clickTolerance) return;
+        this._moved = true;
+        this._lastPoint = point;
+
+        // implemented by child class
+        return this._move(lastPoint, point);
+    }
+
+    mouseupWindow(e: MouseEvent) {
+        if (!this._lastPoint) return;
+        const eventButton = DOM.mouseButton(e);
+        if (eventButton !== this._eventButton) return;
+        if (this._moved) DOM.suppressClick();
+        this.reset();
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}
+
+export class MousePanHandler extends MouseHandler {
+
+    mousedown(e: MouseEvent, point: Point) {
+        super.mousedown(e, point);
+        if (this._lastPoint) this._active = true;
+    }
+    _correctButton(e: MouseEvent, button: number) {
+        return button === LEFT_BUTTON && !e.ctrlKey;
+    }
+
+    _move(lastPoint: Point, point: Point) {
+        return {
+            around: point,
+            panDelta: point.sub(lastPoint)
+        };
+    }
+}
+
+export class MouseRotateHandler extends MouseHandler {
+    _correctButton(e: MouseEvent, button: number) {
+        return (button === LEFT_BUTTON && e.ctrlKey) || (button === RIGHT_BUTTON);
+    }
+
+    _move(lastPoint: Point, point: Point) {
+        const degreesPerPixelMoved = 0.8;
+        const bearingDelta = (point.x - lastPoint.x) * degreesPerPixelMoved;
+        if (bearingDelta) {
+            this._active = true;
+            return {bearingDelta};
+        }
+    }
+
+    contextmenu(e: MouseEvent) {
+        // prevent browser context menu when necessary; we don't allow it with rotation
+        // because we can't discern rotation gesture start from contextmenu on Mac
+        e.preventDefault();
+    }
+}
+
+export class MousePitchHandler extends MouseHandler {
+    _correctButton(e: MouseEvent, button: number) {
+        return (button === LEFT_BUTTON && e.ctrlKey) || (button === RIGHT_BUTTON);
+    }
+
+    _move(lastPoint: Point, point: Point) {
+        const degreesPerPixelMoved = -0.5;
+        const pitchDelta = (point.y - lastPoint.y) * degreesPerPixelMoved;
+        if (pitchDelta) {
+            this._active = true;
+            return {pitchDelta};
+        }
+    }
+
+    contextmenu(e: MouseEvent) {
+        // prevent browser context menu when necessary; we don't allow it with rotation
+        // because we can't discern rotation gesture start from contextmenu on Mac
+        e.preventDefault();
+    }
+}

package/src/ui/handler/scroll_zoom.js

@@ -0,0 +1,350 @@
+// @flow
+
+import assert from 'assert';
+import DOM from '../../util/dom';
+
+import {ease as _ease, bindAll, bezier} from '../../util/util';
+import browser from '../../util/browser';
+import window from '../../util/window';
+import {number as interpolate} from '../../style-spec/util/interpolate';
+import LngLat from '../../geo/lng_lat';
+
+import type Map from '../map';
+import type HandlerManager from '../handler_manager';
+import type Point from '@mapbox/point-geometry';
+
+// deltaY value for mouse scroll wheel identification
+const wheelZoomDelta = 4.000244140625;
+
+// These magic numbers control the rate of zoom. Trackpad events fire at a greater
+// frequency than mouse scroll wheel, so reduce the zoom rate per wheel tick
+const defaultZoomRate = 1 / 100;
+const wheelZoomRate = 1 / 450;
+
+// upper bound on how much we scale the map in any single render frame; this
+// is used to limit zoom rate in the case of very fast scrolling
+const maxScalePerFrame = 2;
+
+/**
+ * The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
+ */
+class ScrollZoomHandler {
+    _map: Map;
+    _el: HTMLElement;
+    _enabled: boolean;
+    _active: boolean;
+    _zooming: boolean;
+    _aroundCenter: boolean;
+    _around: Point;
+    _aroundPoint: Point;
+    _type: 'wheel' | 'trackpad' | null;
+    _lastValue: number;
+    _timeout: ?TimeoutID; // used for delayed-handling of a single wheel movement
+    _finishTimeout: ?TimeoutID; // used to delay final '{move,zoom}end' events
+
+    _lastWheelEvent: any;
+    _lastWheelEventTime: number;
+
+    _startZoom: ?number;
+    _targetZoom: ?number;
+    _delta: number;
+    _easing: ?((number) => number);
+    _prevEase: ?{start: number, duration: number, easing: (_: number) => number};
+
+    _frameId: ?boolean;
+    _handler: HandlerManager;
+
+    _defaultZoomRate: number;
+    _wheelZoomRate: number;
+
+    /**
+     * @private
+     */
+    constructor(map: Map, handler: HandlerManager) {
+        this._map = map;
+        this._el = map.getCanvasContainer();
+        this._handler = handler;
+
+        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.
+     * @example
+     * // Speed up trackpad zoom
+     * map.scrollZoom.setZoomRate(1/25);
+     */
+    setZoomRate(zoomRate: number) {
+        this._defaultZoomRate = zoomRate;
+    }
+
+    /**
+    * 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.
+    * @example
+    * // Slow down zoom of mouse wheel
+    * map.scrollZoom.setWheelZoomRate(1/600);
+    */
+    setWheelZoomRate(wheelZoomRate: number) {
+        this._wheelZoomRate = wheelZoomRate;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
+     */
+    isEnabled() {
+        return !!this._enabled;
+    }
+
+    /*
+    * Active state is turned on and off with every scroll wheel event and is set back to false before the map
+    * render is called, so _active is not a good candidate for determining if a scroll zoom animation is in
+    * progress.
+    */
+    isActive() {
+        return !!this._active || this._finishTimeout !== undefined;
+    }
+
+    isZooming() {
+        return !!this._zooming;
+    }
+
+    /**
+     * Enables the "scroll to zoom" interaction.
+     *
+     * @param {Object} [options] Options object.
+     * @param {string} [options.around] If "center" is passed, map will zoom around center of map
+     *
+     * @example
+     *   map.scrollZoom.enable();
+     * @example
+     *  map.scrollZoom.enable({ around: 'center' })
+     */
+    enable(options: any) {
+        if (this.isEnabled()) return;
+        this._enabled = true;
+        this._aroundCenter = options && options.around === 'center';
+    }
+
+    /**
+     * Disables the "scroll to zoom" interaction.
+     *
+     * @example
+     *   map.scrollZoom.disable();
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        this._enabled = false;
+    }
+
+    wheel(e: WheelEvent) {
+        if (!this.isEnabled()) return;
+
+        // Remove `any` cast when https://github.com/facebook/flow/issues/4879 is fixed.
+        let value = e.deltaMode === (window.WheelEvent: any).DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY;
+        const now = browser.now(),
+            timeDelta = now - (this._lastWheelEventTime || 0);
+
+        this._lastWheelEventTime = now;
+
+        if (value !== 0 && (value % wheelZoomDelta) === 0) {
+            // This one is definitely a mouse wheel event.
+            this._type = 'wheel';
+
+        } else if (value !== 0 && Math.abs(value) < 4) {
+            // This one is definitely a trackpad event because it is so small.
+            this._type = 'trackpad';
+
+        } else if (timeDelta > 400) {
+            // This is likely a new scroll action.
+            this._type = null;
+            this._lastValue = value;
+
+            // Start a timeout in case this was a singular event, and dely it by up to 40ms.
+            this._timeout = setTimeout(this._onTimeout, 40, e);
+
+        } else if (!this._type) {
+            // This is a repeating event, but we don't know the type of event just yet.
+            // If the delta per time is small, we assume it's a fast trackpad; otherwise we switch into wheel mode.
+            this._type = (Math.abs(timeDelta * value) < 200) ? 'trackpad' : 'wheel';
+
+            // Make sure our delayed event isn't fired again, because we accumulate
+            // the previous event (which was less than 40ms ago) into this event.
+            if (this._timeout) {
+                clearTimeout(this._timeout);
+                this._timeout = null;
+                value += this._lastValue;
+            }
+        }
+
+        // Slow down zoom if shift key is held for more precise zooming
+        if (e.shiftKey && value) value = value / 4;
+
+        // Only fire the callback if we actually know what type of scrolling device the user uses.
+        if (this._type) {
+            this._lastWheelEvent = e;
+            this._delta -= value;
+            if (!this._active) {
+                this._start(e);
+            }
+        }
+
+        e.preventDefault();
+    }
+
+    _onTimeout(initialEvent: any) {
+        this._type = 'wheel';
+        this._delta -= this._lastValue;
+        if (!this._active) {
+            this._start(initialEvent);
+        }
+    }
+
+    _start(e: any) {
+        if (!this._delta) return;
+
+        if (this._frameId) {
+            this._frameId = null;
+        }
+
+        this._active = true;
+        if (!this.isZooming()) {
+            this._zooming = true;
+        }
+
+        if (this._finishTimeout) {
+            clearTimeout(this._finishTimeout);
+            delete this._finishTimeout;
+        }
+
+        const pos = DOM.mousePos(this._el, e);
+
+        this._around = LngLat.convert(this._aroundCenter ? this._map.getCenter() : this._map.unproject(pos));
+        this._aroundPoint = this._map.transform.locationPoint(this._around);
+        if (!this._frameId) {
+            this._frameId = true;
+            this._handler._triggerRenderFrame();
+        }
+    }
+
+    renderFrame() {
+        if (!this._frameId) return;
+        this._frameId = null;
+
+        if (!this.isActive()) return;
+        const tr = this._map.transform;
+
+        // if we've had scroll events since the last render frame, consume the
+        // accumulated delta, and update the target zoom level accordingly
+        if (this._delta !== 0) {
+            // For trackpad events and single mouse wheel ticks, use the default zoom rate
+            const zoomRate = (this._type === 'wheel' && Math.abs(this._delta) > wheelZoomDelta) ? this._wheelZoomRate : this._defaultZoomRate;
+            // Scale by sigmoid of scroll wheel delta.
+            let scale = maxScalePerFrame / (1 + Math.exp(-Math.abs(this._delta * zoomRate)));
+
+            if (this._delta < 0 && scale !== 0) {
+                scale = 1 / scale;
+            }
+
+            const fromScale = typeof this._targetZoom === 'number' ? tr.zoomScale(this._targetZoom) : tr.scale;
+            this._targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale)));
+
+            // if this is a mouse wheel, refresh the starting zoom and easing
+            // function we're using to smooth out the zooming between wheel
+            // events
+            if (this._type === 'wheel') {
+                this._startZoom = tr.zoom;
+                this._easing = this._smoothOutEasing(200);
+            }
+
+            this._delta = 0;
+        }
+
+        const targetZoom = typeof this._targetZoom === 'number' ?
+            this._targetZoom : tr.zoom;
+        const startZoom = this._startZoom;
+        const easing = this._easing;
+
+        let finished = false;
+        let zoom;
+        if (this._type === 'wheel' && startZoom && easing) {
+            assert(easing && typeof startZoom === 'number');
+
+            const t = Math.min((browser.now() - this._lastWheelEventTime) / 200, 1);
+            const k = easing(t);
+            zoom = interpolate(startZoom, targetZoom, k);
+            if (t < 1) {
+                if (!this._frameId) {
+                    this._frameId = true;
+                }
+            } else {
+                finished = true;
+            }
+        } else {
+            zoom = targetZoom;
+            finished = true;
+        }
+
+        this._active = true;
+
+        if (finished) {
+            this._active = false;
+            this._finishTimeout = setTimeout(() => {
+                this._zooming = false;
+                this._handler._triggerRenderFrame();
+                delete this._targetZoom;
+                delete this._finishTimeout;
+            }, 200);
+        }
+
+        return {
+            noInertia: true,
+            needsRenderFrame: !finished,
+            zoomDelta: zoom - tr.zoom,
+            around: this._aroundPoint,
+            originalEvent: this._lastWheelEvent
+        };
+    }
+
+    _smoothOutEasing(duration: number) {
+        let easing = _ease;
+
+        if (this._prevEase) {
+            const ease = this._prevEase,
+                t = (browser.now() - ease.start) / ease.duration,
+                speed = ease.easing(t + 0.01) - ease.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);
+
+            easing = bezier(x, y, 0.25, 1);
+        }
+
+        this._prevEase = {
+            start: browser.now(),
+            duration,
+            easing
+        };
+
+        return easing;
+    }
+
+    blur() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+    }
+}
+
+export default ScrollZoomHandler;

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

@@ -0,0 +1,62 @@
+// @flow
+
+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.
+ */
+export default class DoubleClickZoomHandler {
+
+    _clickZoom: ClickZoomHandler;
+    _tapZoom: TapZoomHandler;
+
+    /**
+     * @private
+    */
+    constructor(clickZoom: ClickZoomHandler, TapZoom: TapZoomHandler) {
+        this._clickZoom = clickZoom;
+        this._tapZoom = TapZoom;
+    }
+
+    /**
+     * Enables the "double click to zoom" interaction.
+     *
+     * @example
+     * map.doubleClickZoom.enable();
+     */
+    enable() {
+        this._clickZoom.enable();
+        this._tapZoom.enable();
+    }
+
+    /**
+     * Disables the "double click to zoom" interaction.
+     *
+     * @example
+     * map.doubleClickZoom.disable();
+     */
+    disable() {
+        this._clickZoom.disable();
+        this._tapZoom.disable();
+    }
+
+    /**
+     * 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.
+     */
+    isEnabled() {
+        return this._clickZoom.isEnabled() && this._tapZoom.isEnabled();
+    }
+
+    /**
+     * 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.
+     */
+    isActive() {
+        return this._clickZoom.isActive() || this._tapZoom.isActive();
+    }
+}

package/src/ui/handler/shim/drag_pan.js

@@ -0,0 +1,88 @@
+// @flow
+
+import type {MousePanHandler} from '../mouse';
+import type TouchPanHandler from './../touch_pan';
+
+export type DragPanOptions = {
+    linearity?: number;
+    easing?: (t: number) => number;
+    deceleration?: number;
+    maxSpeed?: number;
+};
+
+/**
+ * The `DragPanHandler` allows the user to pan the map by clicking and dragging
+ * the cursor.
+ */
+export default class DragPanHandler {
+
+    _el: HTMLElement;
+    _mousePan: MousePanHandler;
+    _touchPan: TouchPanHandler;
+    _inertiaOptions: DragPanOptions
+
+    /**
+     * @private
+    */
+    constructor(el: HTMLElement, mousePan: MousePanHandler, touchPan: TouchPanHandler) {
+        this._el = el;
+        this._mousePan = mousePan;
+        this._touchPan = touchPan;
+    }
+
+    /**
+     * Enables the "drag to pan" interaction.
+     *
+     * @param {Object} [options] Options object
+     * @param {number} [options.linearity=0] factor used to scale the drag velocity
+     * @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag.
+     * @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity.
+     * @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends.
+     *
+     * @example
+     *   map.dragPan.enable();
+     * @example
+     *   map.dragPan.enable({
+     *      linearity: 0.3,
+     *      easing: bezier(0, 0, 0.3, 1),
+     *      maxSpeed: 1400,
+     *      deceleration: 2500,
+     *   });
+     */
+    enable(options?: DragPanOptions) {
+        this._inertiaOptions = options || {};
+        this._mousePan.enable();
+        this._touchPan.enable();
+        this._el.classList.add('mapboxgl-touch-drag-pan');
+    }
+
+    /**
+     * Disables the "drag to pan" interaction.
+     *
+     * @example
+     * map.dragPan.disable();
+     */
+    disable() {
+        this._mousePan.disable();
+        this._touchPan.disable();
+        this._el.classList.remove('mapboxgl-touch-drag-pan');
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "drag to pan" interaction is enabled.
+     */
+    isEnabled() {
+        return this._mousePan.isEnabled() && this._touchPan.isEnabled();
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.
+     *
+     * @returns {boolean} `true` if the "drag to pan" interaction is active.
+     */
+    isActive() {
+        return this._mousePan.isActive() || this._touchPan.isActive();
+    }
+}