@scoova/mgl 1.0.0

package/src/ui/handler/shim/two_fingers_touch.ts

@@ -0,0 +1,112 @@
+import type {TwoFingersTouchZoomHandler, TwoFingersTouchRotateHandler, AroundCenterOptions} from '../two_fingers_touch';
+import type {TapDragZoomHandler} from '../tap_drag_zoom';
+
+/**
+ * The `TwoFingersTouchZoomRotateHandler` 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.
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchZoomRotateHandler {
+
+    _el: HTMLElement;
+    _touchZoom: TwoFingersTouchZoomHandler;
+    _touchRotate: TwoFingersTouchRotateHandler;
+    _tapDragZoom: TapDragZoomHandler;
+    _rotationDisabled: boolean;
+    _enabled: boolean;
+
+    /** @internal */
+    constructor(el: HTMLElement, touchZoom: TwoFingersTouchZoomHandler, touchRotate: TwoFingersTouchRotateHandler, 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 options - Options object.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.enable();
+     * map.touchZoomRotate.enable({ around: 'center' });
+     * ```
+     */
+    enable(options?: AroundCenterOptions | boolean | null) {
+        this._touchZoom.enable(options);
+        if (!this._rotationDisabled) this._touchRotate.enable(options);
+        this._tapDragZoom.enable();
+        this._el.classList.add('maplibregl-touch-zoom-rotate');
+    }
+
+    /**
+     * Disables the "pinch to rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.disable();
+     * ```
+     */
+    disable() {
+        this._touchZoom.disable();
+        this._touchRotate.disable();
+        this._tapDragZoom.disable();
+        this._el.classList.remove('maplibregl-touch-zoom-rotate');
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
+     *
+     * @returns `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 `true` if the handler is active, `false` otherwise
+     */
+    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
+     * ```ts
+     * map.touchZoomRotate.disableRotation();
+     * ```
+     */
+    disableRotation() {
+        this._rotationDisabled = true;
+        this._touchRotate.disable();
+    }
+
+    /**
+     * Enables the "pinch to rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchZoomRotate.enable();
+     * map.touchZoomRotate.enableRotation();
+     * ```
+     */
+    enableRotation() {
+        this._rotationDisabled = false;
+        if (this._touchZoom.isEnabled()) this._touchRotate.enable();
+    }
+}

package/src/ui/handler/tap_drag_zoom.test.ts

@@ -0,0 +1,113 @@
+import {beforeMapTest, sleep} from '../../util/test/util';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {Map, MapOptions} from '../map';
+
+function createMap() {
+    return new Map({container: window.document.createElement('div')} as any as MapOptions);
+}
+
+function setupEvents(map: Map) {
+    const zoomstart = jest.fn();
+    map.on('zoomstart', zoomstart);
+
+    const zoom = jest.fn();
+    map.on('zoom', zoom);
+
+    const zoomend = jest.fn();
+    map.on('zoomend', zoomend);
+
+    return {
+        zoomstart,
+        zoom,
+        zoomend
+    };
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('tap_drag_zoom', () => {
+    test('TapDragZoomHandler fires zoomstart, zoom, and zoomend at appropriate times in response to a double-tap and drag gesture', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const {zoomstart, zoom, zoomend} = setupEvents(map);
+
+        const pointTouchOptions = {
+            touches: [{target, clientX: 100, clientY: 100}]
+        };
+
+        simulate.touchstart(target, pointTouchOptions);
+        simulate.touchend(target);
+        simulate.touchstart(target, pointTouchOptions);
+        map._renderTaskQueue.run();
+
+        expect(zoomstart).not.toHaveBeenCalled();
+        expect(zoom).not.toHaveBeenCalled();
+        expect(zoomend).not.toHaveBeenCalled();
+
+        simulate.touchmove(target, {
+            touches: [{target, clientX: 100, clientY: 110}]
+        });
+        map._renderTaskQueue.run();
+
+        expect(zoomstart).toHaveBeenCalled();
+        expect(zoom).toHaveBeenCalled();
+        expect(zoomend).not.toHaveBeenCalled();
+
+        simulate.touchend(target);
+        map._renderTaskQueue.run();
+        expect(zoomend).toHaveBeenCalled();
+
+    });
+
+    test('TapDragZoomHandler does not fire zoom on tap and drag if touchstart events are > 500ms apart', async () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const {zoomstart, zoom, zoomend} = setupEvents(map);
+
+        const pointTouchOptions = {
+            touches: [{target, clientX: 100, clientY: 100}]
+        };
+
+        simulate.touchstart(target, pointTouchOptions);
+        simulate.touchend(target);
+
+        await sleep(510);
+
+        simulate.touchstart(target, pointTouchOptions);
+        simulate.touchmove(target, {
+            touches: [{target, clientX: 100, clientY: 110}]
+        });
+        map._renderTaskQueue.run();
+
+        expect(zoomstart).not.toHaveBeenCalled();
+        expect(zoom).not.toHaveBeenCalled();
+        expect(zoomend).not.toHaveBeenCalled();
+    });
+
+    test('TapDragZoomHandler does not zoom on double-tap and drag if touchstart events are in different locations (>30px apart)', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const {zoomstart, zoom, zoomend} = setupEvents(map);
+
+        simulate.touchstart(target, {
+            touches: [{target, clientX: 100, clientY: 100}]
+        });
+        simulate.touchend(target);
+        simulate.touchstart(target, {
+            touches: [{target, clientX: 140, clientY: 100}]
+        });
+        simulate.touchmove(target, {
+            touches: [{target, clientX: 140, clientY: 110}]
+        });
+        map._renderTaskQueue.run();
+
+        expect(zoomstart).not.toHaveBeenCalled();
+        expect(zoom).not.toHaveBeenCalled();
+        expect(zoomend).not.toHaveBeenCalled();
+    });
+});

package/src/ui/handler/tap_drag_zoom.ts

@@ -0,0 +1,112 @@
+import {Handler} from '../handler_manager';
+import {TapRecognizer, MAX_TAP_INTERVAL, MAX_DIST} from './tap_recognizer';
+import type Point from '@mapbox/point-geometry';
+
+/**
+ * A `TapDragZoomHandler` allows the user to zoom the map at a point by double tapping. It also allows the user pan the map by dragging.
+ */
+export class TapDragZoomHandler implements Handler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _swipePoint: Point;
+    _swipeTouch: number;
+    _tapTime: number;
+    _tapPoint: Point;
+    _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;
+        delete this._tapPoint;
+        this._tap.reset();
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (this._swipePoint) return;
+
+        if (!this._tapTime) {
+            this._tap.touchstart(e, points, mapTouches);
+        } else {
+            const swipePoint = points[0];
+
+            const soonEnough = e.timeStamp - this._tapTime < MAX_TAP_INTERVAL;
+            const closeEnough =  this._tapPoint.dist(swipePoint) < MAX_DIST;
+
+            if (!soonEnough || !closeEnough) {
+                this.reset();
+            } else if (mapTouches.length > 0) {
+                this._swipePoint = swipePoint;
+                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;
+                this._tapPoint = point;
+            }
+        } 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.ts

@@ -0,0 +1,138 @@
+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;
+export const MAX_DIST = 30;
+
+export class SingleTapRecognizer {
+
+    numTouches: number;
+    centroid: Point;
+    startTime: number;
+    aborted: boolean;
+    touches: {
+        [k in 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.ts

@@ -0,0 +1,98 @@
+import {TapRecognizer} from './tap_recognizer';
+import type Point from '@mapbox/point-geometry';
+import type {Map} from '../map';
+import {TransformProvider} from './transform-provider';
+import {Handler} from '../handler_manager';
+
+/**
+ * A `TapZoomHandler` allows the user to zoom the map at a point by double tapping
+ */
+export class TapZoomHandler implements Handler {
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+    _zoomIn: TapRecognizer;
+    _zoomOut: TapRecognizer;
+
+    constructor(map: Map) {
+        this._tr = new TransformProvider(map);
+        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);
+        const tr = this._tr;
+
+        if (zoomInPoint) {
+            this._active = true;
+            e.preventDefault();
+            setTimeout(() => this.reset(), 0);
+            return {
+                cameraAnimation: (map: Map) => map.easeTo({
+                    duration: 300,
+                    zoom: tr.zoom + 1,
+                    around: tr.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: tr.zoom - 1,
+                    around: tr.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.ts

@@ -0,0 +1,115 @@
+import Point from '@mapbox/point-geometry';
+import {indexTouches} from './handler_util';
+import {Handler} from '../handler_manager';
+import type {Map} from '../map';
+
+/**
+ * A `TouchPanHandler` allows the user to pan the map using touch gestures.
+ */
+export class TouchPanHandler implements Handler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _touches: {
+        [k in string | number]: Point;
+    };
+    _clickTolerance: number;
+    _sum: Point;
+    _map: Map;
+
+    constructor(options: {clickTolerance: number}, map: Map) {
+        this._clickTolerance = options.clickTolerance || 1;
+        this._map = map;
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        this._touches = {};
+        this._sum = new Point(0, 0);
+    }
+
+    _shouldBePrevented(touchesCount: number) {
+        const minTouches = this._map.cooperativeGestures.isEnabled() ? 2 : 1;
+        return touchesCount < minTouches;
+    }
+
+    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) return;
+        if (this._shouldBePrevented(mapTouches.length)) {
+            this._map.cooperativeGestures.notifyGestureBlocked('touch_pan', e);
+            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 && this._shouldBePrevented(mapTouches.length)) {
+            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 (this._shouldBePrevented(touchDeltaCount) || !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;
+    }
+}