@mapgis/mapbox-gl 1.9.12 → 16.0.0

package/src/ui/handler/scroll_zoom.js

@@ -0,0 +1,333 @@
+// @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 {Event} from '../../util/evented';
+
+import type Map from '../map';
+import type Point from '@mapbox/point-geometry';
+import type {TaskID} from '../../util/task_queue';
+
+// 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: ?TaskID;
+
+    _defaultZoomRate: number;
+    _wheelZoomRate: number;
+
+    /**
+     * @private
+     */
+    constructor(map: Map) {
+        this._map = map;
+        this._el = map.getCanvasContainer();
+
+        this._delta = 0;
+
+        this._defaultZoomRate = defaultZoomRate;
+        this._wheelZoomRate = wheelZoomRate;
+
+        bindAll([
+            '_onWheel',
+            '_onTimeout',
+            '_onScrollFrame',
+            '_onScrollFinished'
+        ], this);
+    }
+
+    /**
+     * Set the zoom rate of a trackpad
+     * @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value.
+     */
+    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.
+     */
+    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;
+    }
+
+    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;
+    }
+
+    onWheel(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.isActive()) {
+                this._start(e);
+            }
+        }
+
+        e.preventDefault();
+    }
+
+    _onTimeout(initialEvent: any) {
+        this._type = 'wheel';
+        this._delta -= this._lastValue;
+        if (!this.isActive()) {
+            this._start(initialEvent);
+        }
+    }
+
+    _start(e: any) {
+        if (!this._delta) return;
+
+        if (this._frameId) {
+            this._map._cancelRenderFrame(this._frameId);
+            this._frameId = null;
+        }
+
+        this._active = true;
+        if (!this.isZooming()) {
+            this._zooming = true;
+            this._map.fire(new Event('movestart', {originalEvent: e}));
+            this._map.fire(new Event('zoomstart', {originalEvent: e}));
+        }
+
+        if (this._finishTimeout) {
+            clearTimeout(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 = this._map._requestRenderFrame(this._onScrollFrame);
+        }
+    }
+
+    _onScrollFrame() {
+        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;
+        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);
+            tr.zoom = interpolate(startZoom, targetZoom, k);
+            if (t < 1) {
+                if (!this._frameId) {
+                    this._frameId = this._map._requestRenderFrame(this._onScrollFrame);
+                }
+            } else {
+                finished = true;
+            }
+        } else {
+            tr.zoom = targetZoom;
+            finished = true;
+        }
+
+        tr.setLocationAtPoint(this._around, this._aroundPoint);
+
+        this._map.fire(new Event('move', {originalEvent: this._lastWheelEvent}));
+        this._map.fire(new Event('zoom', {originalEvent: this._lastWheelEvent}));
+
+        if (finished) {
+            this._active = false;
+            this._finishTimeout = setTimeout(() => {
+                this._zooming = false;
+                this._map.fire(new Event('zoomend', {originalEvent: this._lastWheelEvent}));
+                this._map.fire(new Event('moveend', {originalEvent: this._lastWheelEvent}));
+                delete this._targetZoom;
+            }, 200);
+        }
+    }
+
+    _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;
+    }
+}
+
+export default ScrollZoomHandler;

package/src/ui/handler/touch_zoom_rotate.js

@@ -0,0 +1,293 @@
+// @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 type Map from '../map';
+import type Point from '@mapbox/point-geometry';
+import type LngLat from '../../geo/lng_lat';
+import type {TaskID} from '../../util/task_queue';
+
+const inertiaLinearity = 0.15,
+    inertiaEasing = bezier(0, 0, inertiaLinearity, 1),
+    inertiaDeceleration = 12, // scale / s^2
+    inertiaMaxSpeed = 2.5, // scale / s
+    significantScaleThreshold = 0.15,
+    significantRotateThreshold = 10;
+
+/**
+ * The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by
+ * pinching on a touchscreen.
+ */
+class TouchZoomRotateHandler {
+    _map: Map;
+    _el: HTMLElement;
+    _enabled: boolean;
+    _aroundCenter: boolean;
+    _rotationDisabled: boolean;
+    _startVec: Point;
+    _startAround: LngLat;
+    _startScale: number;
+    _startBearing: number;
+    _gestureIntent: 'rotate' | 'zoom' | void;
+    _inertia: Array<[number, number, Point]>;
+    _lastTouchEvent: TouchEvent;
+    _frameId: ?TaskID;
+
+    /**
+     * @private
+     */
+    constructor(map: Map) {
+        this._map = map;
+        this._el = map.getCanvasContainer();
+
+        bindAll([
+            '_onMove',
+            '_onEnd',
+            '_onTouchFrame'
+        ], this);
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
+     *
+     * @returns {boolean} `true` if the "pinch to rotate and zoom" interaction is enabled.
+     */
+    isEnabled() {
+        return !!this._enabled;
+    }
+
+    /**
+     * Enables the "pinch to rotate and zoom" interaction.
+     *
+     * @param {Object} [options] Options object.
+     * @param {string} [options.around] If "center" is passed, map will zoom around the center
+     *
+     * @example
+     *   map.touchZoomRotate.enable();
+     * @example
+     *   map.touchZoomRotate.enable({ around: 'center' });
+     */
+    enable(options: ?{around?: 'center'}) {
+        if (this.isEnabled()) return;
+        this._el.classList.add('mapboxgl-touch-zoom-rotate');
+        this._enabled = true;
+        this._aroundCenter = !!options && options.around === 'center';
+    }
+
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.disable();
+     */
+    disable() {
+        if (!this.isEnabled()) return;
+        this._el.classList.remove('mapboxgl-touch-zoom-rotate');
+        this._enabled = false;
+    }
+
+    /**
+     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
+     * interaction enabled.
+     *
+     * @example
+     *   map.touchZoomRotate.disableRotation();
+     */
+    disableRotation() {
+        this._rotationDisabled = true;
+    }
+
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.enable();
+     *   map.touchZoomRotate.enableRotation();
+     */
+    enableRotation() {
+        this._rotationDisabled = false;
+    }
+
+    /**
+     * Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
+     * @returns {boolean} //eslint-disable-line
+     * @memberof TouchZoomRotateHandler
+     */
+    isActive(): boolean {
+        return this.isEnabled() && !!this._gestureIntent;
+    }
+
+    onStart(e: TouchEvent) {
+        if (!this.isEnabled()) return;
+        if (e.touches.length !== 2) return;
+
+        const p0 = DOM.mousePos(this._el, e.touches[0]),
+            p1 = DOM.mousePos(this._el, e.touches[1]),
+            center = p0.add(p1).div(2);
+
+        this._startVec = p0.sub(p1);
+        this._startAround = this._map.transform.pointLocation(center);
+        this._gestureIntent = undefined;
+        this._inertia = [];
+
+        DOM.addEventListener(window.document, 'touchmove', this._onMove, {passive: false});
+        DOM.addEventListener(window.document, 'touchend', this._onEnd);
+    }
+
+    _getTouchEventData(e: TouchEvent) {
+        const p0 = DOM.mousePos(this._el, e.touches[0]),
+            p1 = DOM.mousePos(this._el, e.touches[1]);
+
+        const vec = p0.sub(p1);
+        return {
+            vec,
+            center: p0.add(p1).div(2),
+            scale: vec.mag() / this._startVec.mag(),
+            bearing: this._rotationDisabled ? 0 : vec.angleWith(this._startVec) * 180 / Math.PI
+        };
+    }
+
+    _onMove(e: TouchEvent) {
+        if (e.touches.length !== 2) return;
+
+        const {vec, scale, bearing} = this._getTouchEventData(e);
+
+        // Determine 'intent' by whichever threshold is surpassed first,
+        // then keep that state for the duration of this gesture.
+        if (!this._gestureIntent) {
+            // when rotation is disabled, any scale change triggers the zoom gesture to start
+            const scalingSignificantly = (this._rotationDisabled && scale !== 1) || (Math.abs(1 - scale) > significantScaleThreshold),
+                rotatingSignificantly = (Math.abs(bearing) > significantRotateThreshold);
+
+            if (rotatingSignificantly) {
+                this._gestureIntent = 'rotate';
+            } else if (scalingSignificantly) {
+                this._gestureIntent = 'zoom';
+            }
+
+            if (this._gestureIntent) {
+                this._map.fire(new Event(`${this._gestureIntent}start`, {originalEvent: e}));
+                this._map.fire(new Event('movestart', {originalEvent: e}));
+                this._startVec = vec;
+            }
+        }
+
+        this._lastTouchEvent = e;
+        if (!this._frameId) {
+            this._frameId = this._map._requestRenderFrame(this._onTouchFrame);
+        }
+
+        e.preventDefault();
+    }
+
+    _onTouchFrame() {
+        this._frameId = null;
+
+        const gestureIntent = this._gestureIntent;
+        if (!gestureIntent) return;
+
+        const tr = this._map.transform;
+
+        if (!this._startScale) {
+            this._startScale = tr.scale;
+            this._startBearing = tr.bearing;
+        }
+
+        const {center, bearing, scale} = this._getTouchEventData(this._lastTouchEvent);
+        const around = tr.pointLocation(center);
+        const aroundPoint = tr.locationPoint(around);
+
+        if (gestureIntent === 'rotate') {
+            tr.bearing = this._startBearing + bearing;
+        }
+
+        tr.zoom = tr.scaleZoom(this._startScale * scale);
+        tr.setLocationAtPoint(this._startAround, aroundPoint);
+
+        this._map.fire(new Event(gestureIntent, {originalEvent: this._lastTouchEvent}));
+        this._map.fire(new Event('move', {originalEvent: this._lastTouchEvent}));
+
+        this._drainInertiaBuffer();
+        this._inertia.push([browser.now(), scale, center]);
+    }
+
+    _onEnd(e: TouchEvent) {
+        DOM.removeEventListener(window.document, 'touchmove', this._onMove, {passive: false});
+        DOM.removeEventListener(window.document, 'touchend', this._onEnd);
+
+        const gestureIntent = this._gestureIntent;
+        const startScale = this._startScale;
+
+        if (this._frameId) {
+            this._map._cancelRenderFrame(this._frameId);
+            this._frameId = null;
+        }
+        delete this._gestureIntent;
+        delete this._startScale;
+        delete this._startBearing;
+        delete this._lastTouchEvent;
+
+        if (!gestureIntent) return;
+
+        this._map.fire(new Event(`${gestureIntent}end`, {originalEvent: e}));
+
+        this._drainInertiaBuffer();
+
+        const inertia = this._inertia,
+            map = this._map;
+
+        if (inertia.length < 2) {
+            map.snapToNorth({}, {originalEvent: e});
+            return;
+        }
+
+        const last = inertia[inertia.length - 1],
+            first = inertia[0],
+            lastScale = map.transform.scaleZoom(startScale * last[1]),
+            firstScale = map.transform.scaleZoom(startScale * first[1]),
+            scaleOffset = lastScale - firstScale,
+            scaleDuration = (last[0] - first[0]) / 1000,
+            p = last[2];
+
+        if (scaleDuration === 0 || lastScale === firstScale) {
+            map.snapToNorth({}, {originalEvent: e});
+            return;
+        }
+
+        // calculate scale/s speed and adjust for increased initial animation speed when easing
+        let speed = scaleOffset * inertiaLinearity / scaleDuration; // scale/s
+
+        if (Math.abs(speed) > inertiaMaxSpeed) {
+            if (speed > 0) {
+                speed = inertiaMaxSpeed;
+            } else {
+                speed = -inertiaMaxSpeed;
+            }
+        }
+
+        const duration = Math.abs(speed / (inertiaDeceleration * inertiaLinearity)) * 1000;
+        const targetScale = lastScale + speed * duration / 2000;
+
+        map.easeTo({
+            zoom: targetScale,
+            duration,
+            easing: inertiaEasing,
+            around: this._aroundCenter ? map.getCenter() : map.unproject(p),
+            noMoveStart: true
+        }, {originalEvent: e});
+    }
+
+    _drainInertiaBuffer() {
+        const inertia = this._inertia,
+            now = browser.now(),
+            cutoff = 160; // msec
+
+        while (inertia.length > 2 && now - inertia[0][0] > cutoff) inertia.shift();
+    }
+}
+
+export default TouchZoomRotateHandler;