@scoova/mgl 1.0.0

package/src/ui/handler/map_event.ts

@@ -0,0 +1,161 @@
+import {MapMouseEvent, MapTouchEvent, MapWheelEvent} from '../events';
+import {Handler} from '../handler_manager';
+import type {Map} from '../map';
+import type Point from '@mapbox/point-geometry';
+
+export class MapEventHandler implements Handler {
+
+    _mousedownPos: Point;
+    _clickTolerance: number;
+    _map: Map;
+
+    constructor(map: Map, options: {
+        clickTolerance: number;
+    }) {
+        this._map = map;
+        this._clickTolerance = options.clickTolerance;
+    }
+
+    reset() {
+        delete this._mousedownPos;
+    }
+
+    wheel(e: WheelEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - ScrollZoom
+        return this._firePreventable(new MapWheelEvent(e.type, this._map, e));
+    }
+
+    mousedown(e: MouseEvent, point: Point) {
+        this._mousedownPos = point;
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - MousePan
+        // - MouseRotate
+        // - MousePitch
+        // - DblclickHandler
+        return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseup(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    click(e: MouseEvent, point: Point) {
+        if (this._mousedownPos && this._mousedownPos.dist(point) >= this._clickTolerance) return;
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    dblclick(e: MouseEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - DblClickZoom
+        return this._firePreventable(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseover(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mouseout(e: MouseEvent) {
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    touchstart(e: TouchEvent) {
+        // If mapEvent.preventDefault() is called by the user, prevent handlers such as:
+        // - TouchPan
+        // - TouchZoom
+        // - TouchRotate
+        // - TouchPitch
+        // - TapZoom
+        // - SwipeZoom
+        return this._firePreventable(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchmove(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchend(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    touchcancel(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
+    _firePreventable(mapEvent: MapMouseEvent | MapTouchEvent | MapWheelEvent) {
+        this._map.fire(mapEvent);
+        if (mapEvent.defaultPrevented) {
+            // returning an object marks the handler as active and resets other handlers
+            return {};
+        }
+    }
+
+    isEnabled() {
+        return true;
+    }
+
+    isActive() {
+        return false;
+    }
+    enable() {}
+    disable() {}
+}
+
+export class BlockableMapEventHandler {
+    _map: Map;
+    _delayContextMenu: boolean;
+    _ignoreContextMenu: boolean;
+    _contextMenuEvent: MouseEvent;
+
+    constructor(map: Map) {
+        this._map = map;
+    }
+
+    reset() {
+        this._delayContextMenu = false;
+        this._ignoreContextMenu = true;
+        delete this._contextMenuEvent;
+    }
+
+    mousemove(e: MouseEvent) {
+        // mousemove map events should not be fired when interaction handlers (pan, rotate, etc) are active
+        this._map.fire(new MapMouseEvent(e.type, this._map, e));
+    }
+
+    mousedown() {
+        this._delayContextMenu = true;
+        this._ignoreContextMenu = false;
+    }
+
+    mouseup() {
+        this._delayContextMenu = false;
+        if (this._contextMenuEvent) {
+            this._map.fire(new MapMouseEvent('contextmenu', this._map, this._contextMenuEvent));
+            delete this._contextMenuEvent;
+        }
+    }
+    contextmenu(e: MouseEvent) {
+        if (this._delayContextMenu) {
+            // Mac: contextmenu fired on mousedown; we save it until mouseup for consistency's sake
+            this._contextMenuEvent = e;
+        } else if (!this._ignoreContextMenu) {
+            // Windows: contextmenu fired on mouseup, so fire event now
+            this._map.fire(new MapMouseEvent(e.type, this._map, e));
+        }
+
+        // prevent browser context menu when necessary
+        if (this._map.listens('contextmenu')) {
+            e.preventDefault();
+        }
+    }
+
+    isEnabled() {
+        return true;
+    }
+
+    isActive() {
+        return false;
+    }
+    enable() {}
+    disable() {}
+}

package/src/ui/handler/mouse.ts

@@ -0,0 +1,92 @@
+import type Point from '@mapbox/point-geometry';
+
+import {DOM} from '../../util/dom';
+import {DragMoveHandler, DragPanResult, DragRotateResult, DragPitchResult, DragHandler} from './drag_handler';
+import {MouseMoveStateManager} from './drag_move_state_manager';
+
+/**
+ * `MousePanHandler` allows the user to pan the map by clicking and dragging
+ */
+export interface MousePanHandler extends DragMoveHandler<DragPanResult, MouseEvent> {}
+/**
+ * `MouseRotateHandler` allows the user to rotate the map by clicking and dragging
+ */
+export interface MouseRotateHandler extends DragMoveHandler<DragRotateResult, MouseEvent> {}
+/**
+ * `MousePitchHandler` allows the user to zoom the map by pitching
+ */
+export interface MousePitchHandler extends DragMoveHandler<DragPitchResult, MouseEvent> {}
+
+const LEFT_BUTTON = 0;
+const RIGHT_BUTTON = 2;
+
+const assignEvents = (handler: DragHandler<DragPanResult, MouseEvent>) => {
+    handler.mousedown = handler.dragStart;
+    handler.mousemoveWindow = handler.dragMove;
+    handler.mouseup = handler.dragEnd;
+    handler.contextmenu = (e: MouseEvent) => {
+        e.preventDefault();
+    };
+};
+
+export const generateMousePanHandler = ({enable, clickTolerance,}: {
+    clickTolerance: number;
+    enable?: boolean;
+}): MousePanHandler => {
+    const mouseMoveStateManager = new MouseMoveStateManager({
+        checkCorrectEvent: (e: MouseEvent) => DOM.mouseButton(e) === LEFT_BUTTON && !e.ctrlKey,
+    });
+    return new DragHandler<DragPanResult, MouseEvent>({
+        clickTolerance,
+        move: (lastPoint: Point, point: Point) =>
+            ({around: point, panDelta: point.sub(lastPoint)}),
+        activateOnStart: true,
+        moveStateManager: mouseMoveStateManager,
+        enable,
+        assignEvents,
+    });
+};
+
+export const generateMouseRotationHandler = ({enable, clickTolerance, bearingDegreesPerPixelMoved = 0.8}: {
+    clickTolerance: number;
+    bearingDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}): MouseRotateHandler => {
+    const mouseMoveStateManager = new MouseMoveStateManager({
+        checkCorrectEvent: (e: MouseEvent): boolean =>
+            (DOM.mouseButton(e) === LEFT_BUTTON && e.ctrlKey) ||
+            (DOM.mouseButton(e) === RIGHT_BUTTON),
+    });
+    return new DragHandler<DragRotateResult, MouseEvent>({
+        clickTolerance,
+        move: (lastPoint: Point, point: Point) =>
+            ({bearingDelta: (point.x - lastPoint.x) * bearingDegreesPerPixelMoved}),
+        // prevent browser context menu when necessary; we don't allow it with rotation
+        // because we can't discern rotation gesture start from contextmenu on Mac
+        moveStateManager: mouseMoveStateManager,
+        enable,
+        assignEvents,
+    });
+};
+
+export const generateMousePitchHandler = ({enable, clickTolerance, pitchDegreesPerPixelMoved = -0.5}: {
+    clickTolerance: number;
+    pitchDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}): MousePitchHandler => {
+    const mouseMoveStateManager = new MouseMoveStateManager({
+        checkCorrectEvent: (e: MouseEvent): boolean =>
+            (DOM.mouseButton(e) === LEFT_BUTTON && e.ctrlKey) ||
+            (DOM.mouseButton(e) === RIGHT_BUTTON),
+    });
+    return new DragHandler<DragPitchResult, MouseEvent>({
+        clickTolerance,
+        move: (lastPoint: Point, point: Point) =>
+            ({pitchDelta: (point.y - lastPoint.y) * pitchDegreesPerPixelMoved}),
+        // prevent browser context menu when necessary; we don't allow it with rotation
+        // because we can't discern rotation gesture start from contextmenu on Mac
+        moveStateManager: mouseMoveStateManager,
+        enable,
+        assignEvents,
+    });
+};

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

@@ -0,0 +1,111 @@
+import Point from '@mapbox/point-geometry';
+
+import {generateMousePanHandler, generateMousePitchHandler, generateMouseRotationHandler} from './mouse';
+
+describe('mouse handler tests', () => {
+    test('MouseRotateHandler', () => {
+        const mouseRotate = generateMouseRotationHandler({clickTolerance: 2});
+
+        expect(mouseRotate.isActive()).toBe(false);
+        expect(mouseRotate.isEnabled()).toBe(false);
+        mouseRotate.enable();
+        expect(mouseRotate.isEnabled()).toBe(true);
+
+        mouseRotate.dragStart(new MouseEvent('mousedown', {buttons: 2, button: 2}), new Point(0, 0));
+        expect(mouseRotate.isActive()).toBe(false);
+
+        const underToleranceMove = new MouseEvent('mousemove', {buttons: 2, clientX: 1, clientY: 1});
+        expect(mouseRotate.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        const overToleranceMove = new MouseEvent('mousemove', {buttons: 2, clientX: 10, clientY: 10});
+        expect(mouseRotate.dragMove(overToleranceMove, new Point(10, 10))).toEqual({'bearingDelta': 8});
+        expect(mouseRotate.isActive()).toBe(true);
+
+        mouseRotate.dragEnd(new MouseEvent('mouseup', {buttons: 0, button: 2}));
+        expect(mouseRotate.isActive()).toBe(false);
+
+        mouseRotate.disable();
+        expect(mouseRotate.isEnabled()).toBe(false);
+
+        mouseRotate.dragStart(new MouseEvent('mousedown', {buttons: 2, button: 2}), new Point(0, 0));
+        expect(mouseRotate.isActive()).toBe(false);
+
+        expect(mouseRotate.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        expect(mouseRotate.dragMove(overToleranceMove, new Point(10, 10))).toBeUndefined();
+        expect(mouseRotate.isActive()).toBe(false);
+    });
+
+    test('MousePitchHandler', () => {
+        const mousePitch = generateMousePitchHandler({clickTolerance: 2});
+
+        expect(mousePitch.isActive()).toBe(false);
+        expect(mousePitch.isEnabled()).toBe(false);
+        mousePitch.enable();
+        expect(mousePitch.isEnabled()).toBe(true);
+
+        mousePitch.dragStart(new MouseEvent('mousedown', {buttons: 2, button: 2}), new Point(0, 0));
+        expect(mousePitch.isActive()).toBe(false);
+
+        const underToleranceMove = new MouseEvent('mousemove', {buttons: 2, clientX: 1, clientY: 1});
+        expect(mousePitch.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mousePitch.isActive()).toBe(false);
+
+        const overToleranceMove = new MouseEvent('mousemove', {buttons: 2, clientX: 10, clientY: 10});
+        expect(mousePitch.dragMove(overToleranceMove, new Point(10, 10))).toEqual({'pitchDelta': -5});
+        expect(mousePitch.isActive()).toBe(true);
+
+        mousePitch.dragEnd(new MouseEvent('mouseup', {buttons: 0, button: 2}));
+        expect(mousePitch.isActive()).toBe(false);
+
+        mousePitch.disable();
+        expect(mousePitch.isEnabled()).toBe(false);
+
+        mousePitch.dragStart(new MouseEvent('mousedown', {buttons: 2, button: 2}), new Point(0, 0));
+        expect(mousePitch.isActive()).toBe(false);
+
+        expect(mousePitch.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mousePitch.isActive()).toBe(false);
+
+        expect(mousePitch.dragMove(overToleranceMove, new Point(10, 10))).toBeUndefined();
+        expect(mousePitch.isActive()).toBe(false);
+    });
+
+    test('MousePanHandler', () => {
+        const mousePan = generateMousePanHandler({clickTolerance: 2});
+
+        expect(mousePan.isActive()).toBe(false);
+        expect(mousePan.isEnabled()).toBe(false);
+        mousePan.enable();
+        expect(mousePan.isEnabled()).toBe(true);
+
+        mousePan.dragStart(new MouseEvent('mousedown', {buttons: 1, button: 0}), new Point(0, 0));
+        expect(mousePan.isActive()).toBe(true);
+
+        const underToleranceMove = new MouseEvent('mousemove', {buttons: 1, clientX: 1, clientY: 1});
+        expect(mousePan.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mousePan.isActive()).toBe(true);
+
+        const overToleranceMove = new MouseEvent('mousemove', {buttons: 1, clientX: 10, clientY: 10});
+        expect(mousePan.dragMove(overToleranceMove, new Point(10, 10)))
+            .toEqual({'around': {'x': 10, 'y': 10,}, 'panDelta': {'x': 10, 'y': 10,}});
+        expect(mousePan.isActive()).toBe(true);
+
+        mousePan.dragEnd(new MouseEvent('mouseup', {buttons: 0, button: 0}));
+        expect(mousePan.isActive()).toBe(false);
+
+        mousePan.disable();
+        expect(mousePan.isEnabled()).toBe(false);
+
+        mousePan.dragStart(new MouseEvent('mousedown', {buttons: 2, button: 2}), new Point(0, 0));
+        expect(mousePan.isActive()).toBe(false);
+
+        expect(mousePan.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(mousePan.isActive()).toBe(false);
+
+        expect(mousePan.dragMove(overToleranceMove, new Point(10, 10))).toBeUndefined();
+        expect(mousePan.isActive()).toBe(false);
+    });
+});

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

@@ -0,0 +1,62 @@
+import {extend} from '../../util/util';
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {browser} from '../../util/browser';
+import {beforeMapTest} from '../../util/test/util';
+
+function createMap(options?) {
+    return new Map(extend({container: DOM.create('div', '', window.document.body)}, options));
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('mouse rotate', () => {
+    test('MouseRotateHandler#isActive', () => {
+        const map = createMap({interactive: true});
+        const mouseRotate = map.handlers._handlersById.mouseRotate;
+
+        // Prevent inertial rotation.
+        jest.spyOn(browser, 'now').mockReturnValue(0);
+        expect(mouseRotate.isActive()).toBe(false);
+
+        simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2, clientX: 0, clientY: 0});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 10});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(true);
+
+        simulate.mouseup(map.getCanvas(),   {buttons: 0, button: 2});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        map.remove();
+    });
+
+    test('MouseRotateHandler#isActive #4622 regression test', () => {
+        const map = createMap({interactive: true});
+        const mouseRotate = map.handlers._handlersById.mouseRotate;
+
+        // Prevent inertial rotation.
+        simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 10});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(true);
+
+        // Some browsers don't fire mouseup when it happens outside the window.
+        // Make the handler in active when it encounters a mousemove without the button pressed.
+
+        simulate.mousemove(map.getCanvas(), {buttons: 0, clientX: 10, clientY: 10});
+        map._renderTaskQueue.run();
+        expect(mouseRotate.isActive()).toBe(false);
+
+        map.remove();
+    });
+});

package/src/ui/handler/one_finger_touch_drag.ts

@@ -0,0 +1,45 @@
+import type Point from '@mapbox/point-geometry';
+
+import {DragMoveHandler, DragRotateResult, DragPitchResult, DragHandler} from './drag_handler';
+import {OneFingerTouchMoveStateManager} from './drag_move_state_manager';
+
+export interface OneFingerTouchRotateHandler extends DragMoveHandler<DragRotateResult, TouchEvent> {}
+export interface OneFingerTouchPitchHandler extends DragMoveHandler<DragPitchResult, TouchEvent> {}
+
+const assignEvents = (handler: DragHandler<DragRotateResult, TouchEvent>) => {
+    handler.touchstart = handler.dragStart;
+    handler.touchmoveWindow = handler.dragMove;
+    handler.touchend = handler.dragEnd;
+};
+
+export const generateOneFingerTouchRotationHandler = ({enable, clickTolerance, bearingDegreesPerPixelMoved = 0.8}: {
+    clickTolerance: number;
+    bearingDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}): OneFingerTouchRotateHandler => {
+    const touchMoveStateManager = new OneFingerTouchMoveStateManager();
+    return new DragHandler<DragRotateResult, TouchEvent>({
+        clickTolerance,
+        move: (lastPoint: Point, point: Point) =>
+            ({bearingDelta: (point.x - lastPoint.x) * bearingDegreesPerPixelMoved}),
+        moveStateManager: touchMoveStateManager,
+        enable,
+        assignEvents,
+    });
+};
+
+export const generateOneFingerTouchPitchHandler = ({enable, clickTolerance, pitchDegreesPerPixelMoved = -0.5}: {
+    clickTolerance: number;
+    pitchDegreesPerPixelMoved?: number;
+    enable?: boolean;
+}): OneFingerTouchPitchHandler => {
+    const touchMoveStateManager = new OneFingerTouchMoveStateManager();
+    return new DragHandler<DragPitchResult, TouchEvent>({
+        clickTolerance,
+        move: (lastPoint: Point, point: Point) =>
+            ({pitchDelta: (point.y - lastPoint.y) * pitchDegreesPerPixelMoved}),
+        moveStateManager: touchMoveStateManager,
+        enable,
+        assignEvents,
+    });
+};

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

@@ -0,0 +1,77 @@
+import Point from '@mapbox/point-geometry';
+
+import {generateOneFingerTouchPitchHandler, generateOneFingerTouchRotationHandler} from './one_finger_touch_drag';
+
+const testTouch = {identifier: 0} as Touch;
+
+describe('one touch drag handler tests', () => {
+    test('OneFingerTouchRotateHandler', () => {
+        const oneTouchRotate = generateOneFingerTouchRotationHandler({clickTolerance: 2});
+
+        expect(oneTouchRotate.isActive()).toBe(false);
+        expect(oneTouchRotate.isEnabled()).toBe(false);
+        oneTouchRotate.enable();
+        expect(oneTouchRotate.isEnabled()).toBe(true);
+
+        oneTouchRotate.dragStart(new TouchEvent('touchstart', {targetTouches: [testTouch]}), new Point(0, 0));
+        expect(oneTouchRotate.isActive()).toBe(false);
+
+        const underToleranceMove = new TouchEvent('touchmove', {targetTouches: [testTouch]});
+        expect(oneTouchRotate.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(oneTouchRotate.isActive()).toBe(false);
+
+        const overToleranceMove = new TouchEvent('touchmove', {targetTouches: [testTouch]});
+        expect(oneTouchRotate.dragMove(overToleranceMove, new Point(10, 10))).toEqual({'bearingDelta': 8});
+        expect(oneTouchRotate.isActive()).toBe(true);
+
+        oneTouchRotate.dragEnd(new TouchEvent('touchend', {targetTouches: [testTouch]}));
+        expect(oneTouchRotate.isActive()).toBe(false);
+
+        oneTouchRotate.disable();
+        expect(oneTouchRotate.isEnabled()).toBe(false);
+
+        oneTouchRotate.dragStart(new TouchEvent('touchstart', {targetTouches: [testTouch]}), new Point(0, 0));
+        expect(oneTouchRotate.isActive()).toBe(false);
+
+        expect(oneTouchRotate.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(oneTouchRotate.isActive()).toBe(false);
+
+        expect(oneTouchRotate.dragMove(overToleranceMove, new Point(10, 10))).toBeUndefined();
+        expect(oneTouchRotate.isActive()).toBe(false);
+    });
+
+    test('OneFingerTouchPitchHandler', () => {
+        const oneTouchPitch = generateOneFingerTouchPitchHandler({clickTolerance: 2});
+
+        expect(oneTouchPitch.isActive()).toBe(false);
+        expect(oneTouchPitch.isEnabled()).toBe(false);
+        oneTouchPitch.enable();
+        expect(oneTouchPitch.isEnabled()).toBe(true);
+
+        oneTouchPitch.dragStart(new TouchEvent('touchstart', {targetTouches: [testTouch]}), new Point(0, 0));
+        expect(oneTouchPitch.isActive()).toBe(false);
+
+        const underToleranceMove = new TouchEvent('touchmove', {targetTouches: [testTouch]});
+        expect(oneTouchPitch.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(oneTouchPitch.isActive()).toBe(false);
+
+        const overToleranceMove = new TouchEvent('touchmove', {targetTouches: [testTouch]});
+        expect(oneTouchPitch.dragMove(overToleranceMove, new Point(10, 10))).toEqual({'pitchDelta': -5});
+        expect(oneTouchPitch.isActive()).toBe(true);
+
+        oneTouchPitch.dragEnd(new TouchEvent('touchend', {targetTouches: [testTouch]}));
+        expect(oneTouchPitch.isActive()).toBe(false);
+
+        oneTouchPitch.disable();
+        expect(oneTouchPitch.isEnabled()).toBe(false);
+
+        oneTouchPitch.dragStart(new TouchEvent('touchstart', {targetTouches: [testTouch]}), new Point(0, 0));
+        expect(oneTouchPitch.isActive()).toBe(false);
+
+        expect(oneTouchPitch.dragMove(underToleranceMove, new Point(1, 1))).toBeUndefined();
+        expect(oneTouchPitch.isActive()).toBe(false);
+
+        expect(oneTouchPitch.dragMove(overToleranceMove, new Point(10, 10))).toBeUndefined();
+        expect(oneTouchPitch.isActive()).toBe(false);
+    });
+});