mapbox-gl 1.13.2

package/src/ui/handler/touch_zoom_rotate.js

@@ -0,0 +1,305 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+import DOM from '../../util/dom';
+
+class TwoTouchHandler {
+
+    _enabled: boolean;
+    _active: boolean;
+    _firstTwoTouches: [number, number];
+    _vector: Point;
+    _startVector: Point;
+    _aroundCenter: boolean;
+
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this._active = false;
+        delete this._firstTwoTouches;
+    }
+
+    _start(points: [Point, Point]) {} //eslint-disable-line
+    _move(points: [Point, Point], pinchAround: Point, e: TouchEvent) { return {}; } //eslint-disable-line
+
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        //console.log(e.target, e.targetTouches.length ? e.targetTouches[0].target : null);
+        //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>) {
+        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>) {
+        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() {
+        this.reset();
+    }
+
+    enable(options: ?{around?: 'center'}) {
+        this._enabled = true;
+        this._aroundCenter = !!options && options.around === 'center';
+    }
+
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    isEnabled() {
+        return this._enabled;
+    }
+
+    isActive() {
+        return this._active;
+    }
+}
+
+function getTouchById(mapTouches: Array<Touch>, points: Array<Point>, identifier: number) {
+    for (let i = 0; i < mapTouches.length; i++) {
+        if (mapTouches[i].identifier === identifier) return points[i];
+    }
+}
+
+/* ZOOM */
+
+const ZOOM_THRESHOLD = 0.1;
+
+function getZoomDelta(distance, lastDistance) {
+    return Math.log(distance / lastDistance) / Math.LN2;
+}
+
+export class TouchZoomHandler extends TwoTouchHandler {
+
+    _distance: number;
+    _startDistance: number;
+
+    reset() {
+        super.reset();
+        delete this._distance;
+        delete this._startDistance;
+    }
+
+    _start(points: [Point, Point]) {
+        this._startDistance = this._distance = points[0].dist(points[1]);
+    }
+
+    _move(points: [Point, Point], pinchAround: Point) {
+        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, b) {
+    return a.angleWith(b) * 180 / Math.PI;
+}
+
+export class TouchRotateHandler extends TwoTouchHandler {
+    _minDiameter: number;
+
+    reset() {
+        super.reset();
+        delete this._minDiameter;
+        delete this._startVector;
+        delete this._vector;
+    }
+
+    _start(points: [Point, Point]) {
+        this._startVector = this._vector = points[0].sub(points[1]);
+        this._minDiameter = points[0].dist(points[1]);
+    }
+
+    _move(points: [Point, Point], pinchAround: Point) {
+        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) {
+        /*
+         * The threshold before a rotation actually happens is configured in
+         * pixels alongth 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) {
+    return Math.abs(vector.y) > Math.abs(vector.x);
+}
+
+const ALLOWED_SINGLE_TOUCH_TIME = 100;
+
+/**
+ * The `TouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers.
+ */
+export class TouchPitchHandler extends TwoTouchHandler {
+
+    _valid: boolean | void;
+    _firstMove: number;
+    _lastPoints: [Point, Point];
+
+    reset() {
+        super.reset();
+        this._valid = undefined;
+        delete this._firstMove;
+        delete this._lastPoints;
+    }
+
+    _start(points: [Point, Point]) {
+        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, e: TouchEvent) {
+        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) {
+        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;
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is enabled.
+     *
+     * @memberof TouchPitchHandler
+     * @name isEnabled
+     * @instance
+     * @returns {boolean} `true` if the "drag to pitch" interaction is enabled.
+     */
+
+    /**
+     * Returns a Boolean indicating whether the "drag to pitch" interaction is active, i.e. currently being used.
+     *
+     * @memberof TouchPitchHandler
+     * @name isActive
+     * @instance
+     * @returns {boolean} `true` if the "drag to pitch" interaction is active.
+     */
+
+    /**
+     * Enables the "drag to pitch" interaction.
+     *
+     * @memberof TouchPitchHandler
+     * @name enable
+     * @instance
+     * @example
+     * map.touchPitch.enable();
+     */
+
+    /**
+     * Disables the "drag to pitch" interaction.
+     *
+     * @memberof TouchPitchHandler
+     * @name disable
+     * @instance
+     * @example
+     * map.touchPitch.disable();
+     */
+}

package/src/ui/handler_inertia.js

@@ -0,0 +1,158 @@
+// @flow
+
+import browser from '../util/browser';
+import type Map from './map';
+import {bezier, clamp, extend} from '../util/util';
+import Point from '@mapbox/point-geometry';
+import type {DragPanOptions} from './handler/shim/drag_pan';
+
+const defaultInertiaOptions = {
+    linearity: 0.3,
+    easing: bezier(0, 0, 0.3, 1),
+};
+
+const defaultPanInertiaOptions = extend({
+    deceleration: 2500,
+    maxSpeed: 1400
+}, defaultInertiaOptions);
+
+const defaultZoomInertiaOptions = extend({
+    deceleration: 20,
+    maxSpeed: 1400
+}, defaultInertiaOptions);
+
+const defaultBearingInertiaOptions = extend({
+    deceleration: 1000,
+    maxSpeed: 360
+}, defaultInertiaOptions);
+
+const defaultPitchInertiaOptions = extend({
+    deceleration: 1000,
+    maxSpeed: 90
+}, defaultInertiaOptions);
+
+export type InertiaOptions = {
+    linearity: number;
+    easing: (t: number) => number;
+    deceleration: number;
+    maxSpeed: number;
+};
+
+export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
+
+export default class HandlerInertia {
+    _map: Map;
+    _inertiaBuffer: Array<{ time: number, settings: Object }>;
+
+    constructor(map: Map) {
+        this._map = map;
+        this.clear();
+    }
+
+    clear() {
+        this._inertiaBuffer = [];
+    }
+
+    record(settings: any) {
+        this._drainInertiaBuffer();
+        this._inertiaBuffer.push({time: browser.now(), settings});
+    }
+
+    _drainInertiaBuffer() {
+        const inertia = this._inertiaBuffer,
+            now = browser.now(),
+            cutoff = 160;   //msec
+
+        while (inertia.length > 0 && now - inertia[0].time > cutoff)
+            inertia.shift();
+    }
+
+    _onMoveEnd(panInertiaOptions?: DragPanOptions) {
+        this._drainInertiaBuffer();
+        if (this._inertiaBuffer.length < 2) {
+            return;
+        }
+
+        const deltas = {
+            zoom: 0,
+            bearing: 0,
+            pitch: 0,
+            pan: new Point(0, 0),
+            pinchAround: undefined,
+            around: undefined
+        };
+
+        for (const {settings} of this._inertiaBuffer) {
+            deltas.zoom += settings.zoomDelta || 0;
+            deltas.bearing += settings.bearingDelta || 0;
+            deltas.pitch += settings.pitchDelta || 0;
+            if (settings.panDelta) deltas.pan._add(settings.panDelta);
+            if (settings.around) deltas.around = settings.around;
+            if (settings.pinchAround) deltas.pinchAround = settings.pinchAround;
+        }
+
+        const lastEntry = this._inertiaBuffer[this._inertiaBuffer.length - 1];
+        const duration = (lastEntry.time - this._inertiaBuffer[0].time);
+
+        const easeOptions = {};
+
+        if (deltas.pan.mag()) {
+            const result = calculateEasing(deltas.pan.mag(), duration, extend({}, defaultPanInertiaOptions, panInertiaOptions || {}));
+            easeOptions.offset = deltas.pan.mult(result.amount / deltas.pan.mag());
+            easeOptions.center = this._map.transform.center;
+            extendDuration(easeOptions, result);
+        }
+
+        if (deltas.zoom) {
+            const result = calculateEasing(deltas.zoom, duration, defaultZoomInertiaOptions);
+            easeOptions.zoom = this._map.transform.zoom + result.amount;
+            extendDuration(easeOptions, result);
+        }
+
+        if (deltas.bearing) {
+            const result = calculateEasing(deltas.bearing, duration, defaultBearingInertiaOptions);
+            easeOptions.bearing = this._map.transform.bearing + clamp(result.amount, -179, 179);
+            extendDuration(easeOptions, result);
+        }
+
+        if (deltas.pitch) {
+            const result = calculateEasing(deltas.pitch, duration, defaultPitchInertiaOptions);
+            easeOptions.pitch = this._map.transform.pitch + result.amount;
+            extendDuration(easeOptions, result);
+        }
+
+        if (easeOptions.zoom || easeOptions.bearing) {
+            const last = deltas.pinchAround === undefined ? deltas.around : deltas.pinchAround;
+            easeOptions.around = last ? this._map.unproject(last) : this._map.getCenter();
+        }
+
+        this.clear();
+        return extend(easeOptions, {
+            noMoveStart: true
+        });
+
+    }
+}
+
+// Unfortunately zoom, bearing, etc can't have different durations and easings so
+// we need to choose one. We use the longest duration and it's corresponding easing.
+function extendDuration(easeOptions, result) {
+    if (!easeOptions.duration || easeOptions.duration < result.duration) {
+        easeOptions.duration = result.duration;
+        easeOptions.easing = result.easing;
+    }
+}
+
+function calculateEasing(amount, inertiaDuration: number, inertiaOptions) {
+    const {maxSpeed, linearity, deceleration} = inertiaOptions;
+    const speed = clamp(
+        amount * linearity / (inertiaDuration / 1000),
+        -maxSpeed,
+        maxSpeed);
+    const duration = Math.abs(speed) / (deceleration * linearity);
+    return {
+        easing: inertiaOptions.easing,
+        duration: duration * 1000,
+        amount: speed * (duration / 2)
+    };
+}