@scoova/mgl 1.0.0

package/src/ui/handler/transform-provider.ts

@@ -0,0 +1,44 @@
+import type {Map} from '../map';
+import type {PointLike} from '../camera';
+import type {Transform} from '../../geo/transform';
+import Point from '@mapbox/point-geometry';
+import {LngLat} from '../../geo/lng_lat';
+
+/**
+ * @internal
+ * Shared utilities for the Handler classes to access the correct camera state.
+ * If Camera.transformCameraUpdate is specified or terrain is enabled, the
+ * "desired state" of camera may differ from the state used for rendering. The
+ * handlers need the "desired state" to track accumulated changes.
+ */
+export class TransformProvider {
+    _map: Map;
+
+    constructor(map: Map) {
+        this._map = map;
+    }
+
+    get transform(): Transform {
+        return this._map._requestedCameraState || this._map.transform;
+    }
+
+    get center() {
+        return {lng: this.transform.center.lng, lat: this.transform.center.lat};
+    }
+
+    get zoom() {
+        return this.transform.zoom;
+    }
+
+    get pitch() {
+        return this.transform.pitch;
+    }
+
+    get bearing() {
+        return this.transform.bearing;
+    }
+
+    unproject(point: PointLike): LngLat {
+        return this.transform.pointLocation(Point.convert(point), this._map.terrain);
+    }
+}

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

@@ -0,0 +1,283 @@
+import {Map, MapOptions} from '../map';
+import {Marker} from '../marker';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {beforeMapTest} from '../../util/test/util';
+
+function createMap() {
+    return new Map({container: DOM.create('div', '', window.document.body)} as any as MapOptions);
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('touch zoom rotate', () => {
+
+    test('TwoFingersTouchZoomRotateHandler fires zoomstart, zoom, and zoomend events at appropriate times in response to a pinch-zoom gesture', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const zoomstart = jest.fn();
+        const zoom      = jest.fn();
+        const zoomend   = jest.fn();
+
+        map.handlers._handlersById.tapZoom.disable();
+        map.touchPitch.disable();
+        map.on('zoomstart', zoomstart);
+        map.on('zoom',      zoom);
+        map.on('zoomend',   zoomend);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target, identifier: 1, clientX: 0, clientY: -50}, {target, identifier: 2, clientX: 0, clientY: 50}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 1, clientX: 0, clientY: -100}, {target, identifier: 2, clientX: 0, clientY: 100}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(1);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 1, clientX: 0, clientY: -60}, {target, identifier: 2, clientX: 0, clientY: 60}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(2);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+
+        // incremented because inertia starts a second zoom
+        expect(zoomstart).toHaveBeenCalledTimes(2);
+        map._renderTaskQueue.run();
+        expect(zoom).toHaveBeenCalledTimes(3);
+        expect(zoomend).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler fires rotatestart, rotate, and rotateend events at appropriate times in response to a pinch-rotate gesture', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const rotatestart = jest.fn();
+        const rotate      = jest.fn();
+        const rotateend   = jest.fn();
+
+        map.on('rotatestart', rotatestart);
+        map.on('rotate',      rotate);
+        map.on('rotateend',   rotateend);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -50}, {target, identifier: 1, clientX: 0, clientY: 50}]});
+        map._renderTaskQueue.run();
+        expect(rotatestart).toHaveBeenCalledTimes(0);
+        expect(rotate).toHaveBeenCalledTimes(0);
+        expect(rotateend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: -50, clientY: 0}, {target, identifier: 1, clientX: 50, clientY: 0}]});
+        map._renderTaskQueue.run();
+        expect(rotatestart).toHaveBeenCalledTimes(1);
+        expect(rotate).toHaveBeenCalledTimes(1);
+        expect(rotateend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -50}, {target, identifier: 1, clientX: 0, clientY: 50}]});
+        map._renderTaskQueue.run();
+        expect(rotatestart).toHaveBeenCalledTimes(1);
+        expect(rotate).toHaveBeenCalledTimes(2);
+        expect(rotateend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+        expect(rotatestart).toHaveBeenCalledTimes(1);
+        expect(rotate).toHaveBeenCalledTimes(2);
+        expect(rotateend).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler does not begin a gesture if preventDefault is called on the touchstart event', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        map.on('touchstart', e => e.preventDefault());
+
+        const move = jest.fn();
+        map.on('move', move);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target, clientX: 0, clientY: 0}, {target, clientX: 5, clientY: 0}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, clientX: 0, clientY: 0}, {target, clientX: 0, clientY: 5}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+
+        expect(move).toHaveBeenCalledTimes(0);
+
+        map.remove();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler starts zoom immediately when rotation disabled', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.touchZoomRotate.disableRotation();
+        map.handlers._handlersById.tapZoom.disable();
+
+        const zoomstart = jest.fn();
+        const zoom      = jest.fn();
+        const zoomend   = jest.fn();
+
+        map.on('zoomstart', zoomstart);
+        map.on('zoom',      zoom);
+        map.on('zoomend',   zoomend);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -5}, {target, identifier: 2, clientX: 0, clientY: 5}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -5}, {target, identifier: 2, clientX: 0, clientY: 6}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(1);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -5}, {target, identifier: 2, clientX: 0, clientY: 4}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(2);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+        // incremented because inertia starts a second zoom
+        expect(zoomstart).toHaveBeenCalledTimes(2);
+        map._renderTaskQueue.run();
+        expect(zoom).toHaveBeenCalledTimes(3);
+        expect(zoomend).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler adds css class used for disabling default touch behavior in some browsers', () => {
+        const map = createMap();
+
+        const className = 'maplibregl-touch-zoom-rotate';
+        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+        map.touchZoomRotate.disable();
+        expect(map.getCanvasContainer().classList.contains(className)).toBeFalsy();
+        map.touchZoomRotate.enable();
+        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler zooms when touching two markers on the same map', () => {
+        const map = createMap();
+
+        const marker1 = new Marker()
+            .setLngLat([0, 0])
+            .addTo(map);
+        const marker2 = new Marker()
+            .setLngLat([0, 0])
+            .addTo(map);
+        const target1 = marker1.getElement();
+        const target2 = marker2.getElement();
+
+        const zoomstart = jest.fn();
+        const zoom      = jest.fn();
+        const zoomend   = jest.fn();
+
+        map.handlers._handlersById.tapZoom.disable();
+        map.touchPitch.disable();
+        map.on('zoomstart', zoomstart);
+        map.on('zoom',      zoom);
+        map.on('zoomend',   zoomend);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -50}]});
+        simulate.touchstart(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -50}, {target: target2, identifier: 2, clientX: 0, clientY: 50}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -100}, {target: target2, identifier: 2, clientX: 0, clientY: 100}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(1);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -60}, {target: target2, identifier: 2, clientX: 0, clientY: 60}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(1);
+        expect(zoom).toHaveBeenCalledTimes(2);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+
+        // incremented because inertia starts a second zoom
+        expect(zoomstart).toHaveBeenCalledTimes(2);
+        map._renderTaskQueue.run();
+        expect(zoom).toHaveBeenCalledTimes(3);
+        expect(zoomend).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('TwoFingersTouchZoomRotateHandler does not zoom when touching an element not on the map', () => {
+        const map = createMap();
+
+        const marker1 = new Marker()
+            .setLngLat([0, 0])
+            .addTo(map);
+        const marker2 = new Marker()
+            .setLngLat([0, 0]);
+
+        const target1 = marker1.getElement(); // on map
+        const target2 = marker2.getElement(); // not on map
+
+        const zoomstart = jest.fn();
+        const zoom      = jest.fn();
+        const zoomend   = jest.fn();
+
+        map.handlers._handlersById.tapZoom.disable();
+        map.touchPitch.disable();
+        map.dragPan.disable();
+        map.on('zoomstart', zoomstart);
+        map.on('zoom',      zoom);
+        map.on('zoomend',   zoomend);
+
+        simulate.touchstart(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -50}]});
+        simulate.touchstart(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -50}, {target: target2, identifier: 2, clientX: 0, clientY: 50}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -100}, {target: target2, identifier: 2, clientX: 0, clientY: 100}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: [{target: target1, identifier: 1, clientX: 0, clientY: -60}, {target: target2, identifier: 2, clientX: 0, clientY: 60}]});
+        map._renderTaskQueue.run();
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: []});
+        map._renderTaskQueue.run();
+
+        // incremented because inertia starts a second zoom
+        expect(zoomstart).toHaveBeenCalledTimes(0);
+        map._renderTaskQueue.run();
+        expect(zoom).toHaveBeenCalledTimes(0);
+        expect(zoomend).toHaveBeenCalledTimes(0);
+
+        map.remove();
+    });
+});

package/src/ui/handler/two_fingers_touch.ts

@@ -0,0 +1,336 @@
+import Point from '@mapbox/point-geometry';
+import {DOM} from '../../util/dom';
+import type {Map} from '../map';
+import {Handler, HandlerResult} from '../handler_manager';
+
+/**
+ * An options object sent to the enable function of some of the handlers
+ */
+export type AroundCenterOptions = {
+    /**
+     * If "center" is passed, map will zoom around the center of map
+     */
+    around: 'center';
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom, pitch and rotate the map using two fingers
+ *
+ */
+abstract class TwoFingersTouchHandler implements Handler {
+
+    _enabled?: boolean;
+    _active?: boolean;
+    _firstTwoTouches?: [number, number];
+    _vector?: Point;
+    _startVector?: Point;
+    _aroundCenter?: boolean;
+
+    /** @internal */
+    constructor() {
+        this.reset();
+    }
+
+    reset(): void {
+        this._active = false;
+        delete this._firstTwoTouches;
+    }
+
+    abstract _start(points: [Point, Point]): void;
+    abstract _move(points: [Point, Point], pinchAround: Point | null, e: TouchEvent): HandlerResult | void;
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void {
+        //log('touchstart', points, e.target.innerHTML, e.targetTouches.length ? e.targetTouches[0].target.innerHTML: undefined);
+        if (this._firstTwoTouches || mapTouches.length < 2) return;
+
+        this._firstTwoTouches = [
+            mapTouches[0].identifier,
+            mapTouches[1].identifier
+        ];
+
+        // implemented by child classes
+        this._start([points[0], points[1]]);
+    }
+
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): HandlerResult | void {
+        if (!this._firstTwoTouches) return;
+
+        e.preventDefault();
+
+        const [idA, idB] = this._firstTwoTouches;
+        const a = getTouchById(mapTouches, points, idA);
+        const b = getTouchById(mapTouches, points, idB);
+        if (!a || !b) return;
+        const pinchAround = this._aroundCenter ? null : a.add(b).div(2);
+
+        // implemented by child classes
+        return this._move([a, b], pinchAround, e);
+
+    }
+
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void {
+        if (!this._firstTwoTouches) return;
+
+        const [idA, idB] = this._firstTwoTouches;
+        const a = getTouchById(mapTouches, points, idA);
+        const b = getTouchById(mapTouches, points, idB);
+        if (a && b) return;
+
+        if (this._active) DOM.suppressClick();
+
+        this.reset();
+    }
+
+    touchcancel(): void {
+        this.reset();
+    }
+
+    /**
+     * Enables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.enable();
+     * ```
+     */
+    enable(options?: AroundCenterOptions | boolean | null): void {
+        this._enabled = true;
+        this._aroundCenter = !!options && (options as AroundCenterOptions).around === 'center';
+    }
+
+    /**
+     * Disables the "drag to pitch" interaction.
+     *
+     * @example
+     * ```ts
+     * map.touchPitch.disable();
+     * ```
+     */
+    disable(): void {
+        this._enabled = false;
+        this.reset();
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
+     *
+     * @returns  `true` if the "drag to pitch" interaction is enabled.
+     */
+    isEnabled(): boolean {
+        return !!this._enabled;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
+     *
+     * @returns `true` if the "drag to pitch" interaction is active.
+     */
+    isActive(): boolean {
+        return !!this._active;
+    }
+}
+
+function getTouchById(mapTouches: Array<Touch>, points: Array<Point>, identifier: number): Point | undefined {
+    for (let i = 0; i < mapTouches.length; i++) {
+        if (mapTouches[i].identifier === identifier) return points[i];
+    }
+    return undefined;
+}
+
+/* ZOOM */
+
+const ZOOM_THRESHOLD = 0.1;
+
+function getZoomDelta(distance: number, lastDistance: number): number {
+    return Math.log(distance / lastDistance) / Math.LN2;
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to zoom the map two fingers
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchZoomHandler extends TwoFingersTouchHandler {
+
+    _distance?: number;
+    _startDistance?: number;
+
+    reset() {
+        super.reset();
+        delete this._distance;
+        delete this._startDistance;
+    }
+
+    _start(points: [Point, Point]): void {
+        this._startDistance = this._distance = points[0].dist(points[1]);
+    }
+
+    _move(points: [Point, Point], pinchAround: Point | null): HandlerResult | void {
+        const lastDistance = this._distance!;
+        this._distance = points[0].dist(points[1]);
+        if (!this._active && Math.abs(getZoomDelta(this._distance, this._startDistance!)) < ZOOM_THRESHOLD) return;
+        this._active = true;
+        return {
+            zoomDelta: getZoomDelta(this._distance, lastDistance),
+            pinchAround
+        };
+    }
+}
+
+/* ROTATE */
+
+const ROTATION_THRESHOLD = 25; // pixels along circumference of touch circle
+
+function getBearingDelta(a: Point, b: Point): number {
+    return a.angleWith(b) * 180 / Math.PI;
+}
+
+/**
+ * The `TwoFingersTouchHandler`s allows the user to rotate the map two fingers
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchRotateHandler extends TwoFingersTouchHandler {
+    _minDiameter?: number;
+
+    reset(): void {
+        super.reset();
+        delete this._minDiameter;
+        delete this._startVector;
+        delete this._vector;
+    }
+
+    _start(points: [Point, Point]): void {
+        this._startVector = this._vector = points[0].sub(points[1]);
+        this._minDiameter = points[0].dist(points[1]);
+    }
+
+    _move(points: [Point, Point], pinchAround: Point | null, _e: TouchEvent): HandlerResult | void {
+        const lastVector = this._vector!;
+        this._vector = points[0].sub(points[1]);
+
+        if (!this._active && this._isBelowThreshold(this._vector)) return;
+        this._active = true;
+
+        return {
+            bearingDelta: getBearingDelta(this._vector, lastVector),
+            pinchAround
+        };
+    }
+
+    _isBelowThreshold(vector: Point): boolean {
+        /*
+         * The threshold before a rotation actually happens is configured in
+         * pixels along the circumference of the circle formed by the two fingers.
+         * This makes the threshold in degrees larger when the fingers are close
+         * together and smaller when the fingers are far apart.
+         *
+         * Use the smallest diameter from the whole gesture to reduce sensitivity
+         * when pinching in and out.
+         */
+
+        this._minDiameter = Math.min(this._minDiameter!, vector.mag());
+        const circumference = Math.PI * this._minDiameter;
+        const threshold = ROTATION_THRESHOLD / circumference * 360;
+
+        const bearingDeltaSinceStart = getBearingDelta(vector, this._startVector!);
+        return Math.abs(bearingDeltaSinceStart) < threshold;
+    }
+}
+
+/* PITCH */
+
+function isVertical(vector: Point): boolean {
+    return Math.abs(vector.y) > Math.abs(vector.x);
+}
+
+const ALLOWED_SINGLE_TOUCH_TIME = 100;
+
+/**
+ * The `TwoFingersTouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers.
+ *
+ * @group Handlers
+ */
+export class TwoFingersTouchPitchHandler extends TwoFingersTouchHandler {
+
+    _valid?: boolean;
+    _firstMove?: number;
+    _lastPoints?: [Point, Point];
+    _map: Map;
+    _currentTouchCount: number = 0;
+
+    constructor(map: Map) {
+        super();
+        this._map = map;
+    }
+
+    reset(): void {
+        super.reset();
+        this._valid = undefined;
+        delete this._firstMove;
+        delete this._lastPoints;
+    }
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>): void {
+        super.touchstart(e, points, mapTouches);
+        this._currentTouchCount = mapTouches.length;
+    }
+
+    _start(points: [Point, Point]): void {
+        this._lastPoints = points;
+        if (isVertical(points[0].sub(points[1]))) {
+            // fingers are more horizontal than vertical
+            this._valid = false;
+        }
+    }
+
+    _move(points: [Point, Point], center: Point | null, e: TouchEvent): HandlerResult | void {
+        // If cooperative gestures is enabled, we need a 3-finger minimum for this gesture to register
+        if (this._map.cooperativeGestures.isEnabled() && this._currentTouchCount < 3) {
+            return;
+        }
+
+        const vectorA = points[0].sub(this._lastPoints![0]);
+        const vectorB = points[1].sub(this._lastPoints![1]);
+
+        this._valid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp);
+        if (!this._valid) return;
+
+        this._lastPoints = points;
+        this._active = true;
+        const yDeltaAverage = (vectorA.y + vectorB.y) / 2;
+        const degreesPerPixelMoved = -0.5;
+        return {
+            pitchDelta: yDeltaAverage * degreesPerPixelMoved
+        };
+    }
+
+    gestureBeginsVertically(vectorA: Point, vectorB: Point, timeStamp: number): boolean | undefined {
+        if (this._valid !== undefined) return this._valid;
+
+        const threshold = 2;
+        const movedA = vectorA.mag() >= threshold;
+        const movedB = vectorB.mag() >= threshold;
+
+        // neither finger has moved a meaningful amount, wait
+        if (!movedA && !movedB) return;
+
+        // One finger has moved and the other has not.
+        // If enough time has passed, decide it is not a pitch.
+        if (!movedA || !movedB) {
+            if (this._firstMove === undefined) {
+                this._firstMove = timeStamp;
+            }
+
+            if (timeStamp - this._firstMove < ALLOWED_SINGLE_TOUCH_TIME) {
+                // still waiting for a movement from the second finger
+                return undefined;
+            } else {
+                return false;
+            }
+        }
+
+        const isSameDirection = vectorA.y > 0 === vectorB.y > 0;
+        return isVertical(vectorA) && isVertical(vectorB) && isSameDirection;
+    }
+}