mapbox-gl 1.13.2

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

@@ -0,0 +1,67 @@
+// @flow
+
+import type {MouseRotateHandler, MousePitchHandler} from '../mouse';
+
+/**
+ * The `DragRotateHandler` allows the user to rotate the map by clicking and
+ * dragging the cursor while holding the right mouse button or `ctrl` key.
+ */
+export default class DragRotateHandler {
+
+    _mouseRotate: MouseRotateHandler;
+    _mousePitch: MousePitchHandler;
+    _pitchWithRotate: boolean;
+
+    /**
+     * @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(options: {pitchWithRotate: boolean}, mouseRotate: MouseRotateHandler, mousePitch: MousePitchHandler) {
+        this._pitchWithRotate = options.pitchWithRotate;
+        this._mouseRotate = mouseRotate;
+        this._mousePitch = mousePitch;
+    }
+
+    /**
+     * Enables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.enable();
+     */
+    enable() {
+        this._mouseRotate.enable();
+        if (this._pitchWithRotate) this._mousePitch.enable();
+    }
+
+    /**
+     * Disables the "drag to rotate" interaction.
+     *
+     * @example
+     * map.dragRotate.disable();
+     */
+    disable() {
+        this._mouseRotate.disable();
+        this._mousePitch.disable();
+    }
+
+    /**
+     * 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._mouseRotate.isEnabled() && (!this._pitchWithRotate || this._mousePitch.isEnabled());
+    }
+
+    /**
+     * 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._mouseRotate.isActive() || this._mousePitch.isActive();
+    }
+}

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

@@ -0,0 +1,108 @@
+// @flow
+
+import type {TouchZoomHandler, TouchRotateHandler} from '../touch_zoom_rotate';
+import type TapDragZoomHandler from '../tap_drag_zoom';
+
+/**
+ * The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by
+ * pinching on a touchscreen.
+ *
+ * They can zoom with one finger by double tapping and dragging. On the second tap,
+ * hold the finger down and drag up or down to zoom in or out.
+ */
+export default class TouchZoomRotateHandler {
+
+    _el: HTMLElement;
+    _touchZoom: TouchZoomHandler;
+    _touchRotate: TouchRotateHandler;
+    _tapDragZoom: TapDragZoomHandler;
+    _rotationDisabled: boolean;
+    _enabled: boolean;
+
+    /**
+     * @private
+    */
+    constructor(el: HTMLElement, touchZoom: TouchZoomHandler, touchRotate: TouchRotateHandler, tapDragZoom: TapDragZoomHandler) {
+        this._el = el;
+        this._touchZoom = touchZoom;
+        this._touchRotate = touchRotate;
+        this._tapDragZoom = tapDragZoom;
+        this._rotationDisabled = false;
+        this._enabled = true;
+    }
+
+    /**
+     * 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'}) {
+        this._touchZoom.enable(options);
+        if (!this._rotationDisabled) this._touchRotate.enable(options);
+        this._tapDragZoom.enable();
+        this._el.classList.add('mapboxgl-touch-zoom-rotate');
+    }
+
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.disable();
+     */
+    disable() {
+        this._touchZoom.disable();
+        this._touchRotate.disable();
+        this._tapDragZoom.disable();
+        this._el.classList.remove('mapboxgl-touch-zoom-rotate');
+    }
+
+    /**
+     * 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._touchZoom.isEnabled() &&
+            (this._rotationDisabled || this._touchRotate.isEnabled()) &&
+            this._tapDragZoom.isEnabled();
+    }
+
+    /**
+     * Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
+     *
+     * @returns {boolean} //eslint-disable-line
+     */
+    isActive() {
+        return this._touchZoom.isActive() || this._touchRotate.isActive() || this._tapDragZoom.isActive();
+    }
+
+    /**
+     * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
+     * interaction enabled.
+     *
+     * @example
+     *   map.touchZoomRotate.disableRotation();
+     */
+    disableRotation() {
+        this._rotationDisabled = true;
+        this._touchRotate.disable();
+    }
+
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     *   map.touchZoomRotate.enable();
+     *   map.touchZoomRotate.enableRotation();
+     */
+    enableRotation() {
+        this._rotationDisabled = false;
+        if (this._touchZoom.isEnabled()) this._touchRotate.enable();
+    }
+}

package/src/ui/handler/tap_drag_zoom.js

@@ -0,0 +1,103 @@
+// @flow
+
+import {TapRecognizer, MAX_TAP_INTERVAL} from './tap_recognizer';
+import type Point from '@mapbox/point-geometry';
+
+export default class TapDragZoomHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _swipePoint: Point;
+    _swipeTouch: number;
+    _tapTime: number;
+    _tap: TapRecognizer;
+
+    constructor() {
+
+        this._tap = new TapRecognizer({
+            numTouches: 1,
+            numTaps: 1
+        });
+
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        delete this._swipePoint;
+        delete this._swipeTouch;
+        delete this._tapTime;
+        this._tap.reset();
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (this._swipePoint) return;
+
+        if (this._tapTime && e.timeStamp - this._tapTime > MAX_TAP_INTERVAL) {
+            this.reset();
+        }
+
+        if (!this._tapTime) {
+            this._tap.touchstart(e, points, mapTouches);
+        } else if (mapTouches.length > 0) {
+            this._swipePoint = points[0];
+            this._swipeTouch = mapTouches[0].identifier;
+        }
+
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (!this._tapTime) {
+            this._tap.touchmove(e, points, mapTouches);
+        } else if (this._swipePoint) {
+            if (mapTouches[0].identifier !== this._swipeTouch) {
+                return;
+            }
+
+            const newSwipePoint = points[0];
+            const dist = newSwipePoint.y - this._swipePoint.y;
+            this._swipePoint = newSwipePoint;
+
+            e.preventDefault();
+            this._active = true;
+
+            return {
+                zoomDelta: dist / 128
+            };
+        }
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (!this._tapTime) {
+            const point = this._tap.touchend(e, points, mapTouches);
+            if (point) {
+                this._tapTime = e.timeStamp;
+            }
+        } else if (this._swipePoint) {
+            if (mapTouches.length === 0) {
+                this.reset();
+            }
+        }
+    }
+
+    touchcancel() {
+        this.reset();
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}

package/src/ui/handler/tap_recognizer.js

@@ -0,0 +1,133 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+import {indexTouches} from './handler_util';
+
+function getCentroid(points: Array<Point>) {
+    const sum = new Point(0, 0);
+    for (const point of points) {
+        sum._add(point);
+    }
+    return sum.div(points.length);
+}
+
+export const MAX_TAP_INTERVAL = 500;
+const MAX_TOUCH_TIME = 500;
+const MAX_DIST = 30;
+
+export class SingleTapRecognizer {
+
+    numTouches: number;
+    centroid: Point;
+    startTime: number;
+    aborted: boolean;
+    touches: { [number | string]: Point };
+
+    constructor(options: { numTouches: number }) {
+        this.reset();
+        this.numTouches = options.numTouches;
+    }
+
+    reset() {
+        delete this.centroid;
+        delete this.startTime;
+        delete this.touches;
+        this.aborted = false;
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+
+        if (this.centroid || mapTouches.length > this.numTouches) {
+            this.aborted = true;
+        }
+        if (this.aborted) {
+            return;
+        }
+
+        if (this.startTime === undefined) {
+            this.startTime = e.timeStamp;
+        }
+
+        if (mapTouches.length === this.numTouches) {
+            this.centroid = getCentroid(points);
+            this.touches = indexTouches(mapTouches, points);
+        }
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (this.aborted || !this.centroid) return;
+
+        const newTouches = indexTouches(mapTouches, points);
+        for (const id in this.touches) {
+            const prevPos = this.touches[id];
+            const pos = newTouches[id];
+            if (!pos || pos.dist(prevPos) > MAX_DIST) {
+                this.aborted = true;
+            }
+        }
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) {
+            this.aborted = true;
+        }
+
+        if (mapTouches.length === 0) {
+            const centroid = !this.aborted && this.centroid;
+            this.reset();
+            if (centroid) return centroid;
+        }
+    }
+
+}
+
+export class TapRecognizer {
+
+    singleTap: SingleTapRecognizer;
+    numTaps: number;
+    lastTime: number;
+    lastTap: Point;
+    count: number;
+
+    constructor(options: { numTaps: number, numTouches: number }) {
+        this.singleTap = new SingleTapRecognizer(options);
+        this.numTaps = options.numTaps;
+        this.reset();
+    }
+
+    reset() {
+        this.lastTime = Infinity;
+        delete this.lastTap;
+        this.count = 0;
+        this.singleTap.reset();
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this.singleTap.touchstart(e, points, mapTouches);
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this.singleTap.touchmove(e, points, mapTouches);
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        const tap = this.singleTap.touchend(e, points, mapTouches);
+        if (tap) {
+            const soonEnough = e.timeStamp - this.lastTime < MAX_TAP_INTERVAL;
+            const closeEnough = !this.lastTap || this.lastTap.dist(tap) < MAX_DIST;
+
+            if (!soonEnough || !closeEnough) {
+                this.reset();
+            }
+
+            this.count++;
+            this.lastTime = e.timeStamp;
+            this.lastTap = tap;
+
+            if (this.count === this.numTaps) {
+                this.reset();
+                return tap;
+            }
+        }
+    }
+}

package/src/ui/handler/tap_zoom.js

@@ -0,0 +1,93 @@
+// @flow
+
+import {TapRecognizer} from './tap_recognizer';
+import type Point from '@mapbox/point-geometry';
+import type Map from '../map';
+
+export default class TapZoomHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _zoomIn: TapRecognizer;
+    _zoomOut: TapRecognizer;
+
+    constructor() {
+        this._zoomIn = new TapRecognizer({
+            numTouches: 1,
+            numTaps: 2
+        });
+
+        this._zoomOut = new TapRecognizer({
+            numTouches: 2,
+            numTaps: 1
+        });
+
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        this._zoomIn.reset();
+        this._zoomOut.reset();
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._zoomIn.touchstart(e, points, mapTouches);
+        this._zoomOut.touchstart(e, points, mapTouches);
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._zoomIn.touchmove(e, points, mapTouches);
+        this._zoomOut.touchmove(e, points, mapTouches);
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        const zoomInPoint = this._zoomIn.touchend(e, points, mapTouches);
+        const zoomOutPoint = this._zoomOut.touchend(e, points, mapTouches);
+
+        if (zoomInPoint) {
+            this._active = true;
+            e.preventDefault();
+            setTimeout(() => this.reset(), 0);
+            return {
+                cameraAnimation: (map: Map) => map.easeTo({
+                    duration: 300,
+                    zoom: map.getZoom() + 1,
+                    around: map.unproject(zoomInPoint)
+                }, {originalEvent: e})
+            };
+        } else if (zoomOutPoint) {
+            this._active = true;
+            e.preventDefault();
+            setTimeout(() => this.reset(), 0);
+            return {
+                cameraAnimation: (map: Map) => map.easeTo({
+                    duration: 300,
+                    zoom: map.getZoom() - 1,
+                    around: map.unproject(zoomOutPoint)
+                }, {originalEvent: e})
+            };
+        }
+    }
+
+    touchcancel() {
+        this.reset();
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}

package/src/ui/handler/touch_pan.js

@@ -0,0 +1,101 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+import {indexTouches} from './handler_util';
+
+export default class TouchPanHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _touches: { [string | number]: Point };
+    _minTouches: number;
+    _clickTolerance: number;
+    _sum: Point;
+
+    constructor(options: { clickTolerance: number }) {
+        this._minTouches = 1;
+        this._clickTolerance = options.clickTolerance || 1;
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        this._touches = {};
+        this._sum = new Point(0, 0);
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        return this._calculateTransform(e, points, mapTouches);
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (!this._active || mapTouches.length < this._minTouches) return;
+        e.preventDefault();
+        return this._calculateTransform(e, points, mapTouches);
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._calculateTransform(e, points, mapTouches);
+
+        if (this._active && mapTouches.length < this._minTouches) {
+            this.reset();
+        }
+    }
+
+    touchcancel() {
+        this.reset();
+    }
+
+    _calculateTransform(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (mapTouches.length > 0) this._active = true;
+
+        const touches = indexTouches(mapTouches, points);
+
+        const touchPointSum = new Point(0, 0);
+        const touchDeltaSum = new Point(0, 0);
+        let touchDeltaCount = 0;
+
+        for (const identifier in touches) {
+            const point = touches[identifier];
+            const prevPoint = this._touches[identifier];
+            if (prevPoint) {
+                touchPointSum._add(point);
+                touchDeltaSum._add(point.sub(prevPoint));
+                touchDeltaCount++;
+                touches[identifier] = point;
+            }
+        }
+
+        this._touches = touches;
+
+        if (touchDeltaCount < this._minTouches || !touchDeltaSum.mag()) return;
+
+        const panDelta = touchDeltaSum.div(touchDeltaCount);
+        this._sum._add(panDelta);
+        if (this._sum.mag() < this._clickTolerance) return;
+
+        const around = touchPointSum.div(touchDeltaCount);
+
+        return {
+            around,
+            panDelta
+        };
+    }
+
+    enable() {
+        this._enabled = true;
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}