@scoova/mgl 1.0.0

package/src/ui/handler/handler_util.ts

@@ -0,0 +1,10 @@
+import Point from '@mapbox/point-geometry';
+
+export function indexTouches(touches: Array<Touch>, points: Array<Point>) {
+    if (touches.length !== points.length) throw new Error(`The number of touches and points are not equal - touches ${touches.length}, points ${points.length}`);
+    const obj = {};
+    for (let i = 0; i < touches.length; i++) {
+        obj[touches[i].identifier] = points[i];
+    }
+    return obj;
+}

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

@@ -0,0 +1,235 @@
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {extend} from '../../util/util';
+import {beforeMapTest} from '../../util/test/util';
+
+function createMap(options?) {
+    return new Map(extend({
+        container: DOM.create('div', '', window.document.body),
+    }, options));
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('keyboard', () => {
+    test('KeyboardHandler responds to keydown events', () => {
+        const map = createMap();
+        const h = map.keyboard;
+        const spy = jest.spyOn(h, 'keydown');
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(h.keydown).toHaveBeenCalled();
+        expect(spy.mock.calls[0][0].keyCode).toBe(32);
+    });
+
+    test('KeyboardHandler pans map in response to arrow keys', () => {
+        const map = createMap({zoom: 10, center: [0, 0]});
+        const spy = jest.spyOn(map, 'easeTo');
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 37, key: 'ArrowLeft'});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.offset[0]).toBe(100);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 39, key: 'ArrowRight'});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.offset[0]).toBe(-100);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 40, key: 'ArrowDown'});
+        expect(spy).toHaveBeenCalledTimes(3);
+        easeToArgs = spy.mock.calls[2][0];
+        expect(easeToArgs.offset[0]).toBe(-0);
+        expect(easeToArgs.offset[1]).toBe(-100);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 38, key: 'ArrowUp'});
+        expect(spy).toHaveBeenCalledTimes(4);
+        easeToArgs = spy.mock.calls[3][0];
+        expect(easeToArgs.offset[0]).toBe(-0);
+        expect(easeToArgs.offset[1]).toBe(100);
+
+    });
+
+    test('KeyboardHandler pans map in response to arrow keys when disableRotation has been called', () => {
+        const map = createMap({zoom: 10, center: [0, 0]});
+        const spy = jest.spyOn(map, 'easeTo');
+        map.keyboard.disableRotation();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 37, key: 'ArrowLeft'});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.offset[0]).toBe(100);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 39, key: 'ArrowRight'});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.offset[0]).toBe(-100);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 40, key: 'ArrowDown'});
+        expect(spy).toHaveBeenCalledTimes(3);
+        easeToArgs = spy.mock.calls[2][0];
+        expect(easeToArgs.offset[0]).toBe(-0);
+        expect(easeToArgs.offset[1]).toBe(-100);
+
+        simulate.keydown(map.getCanvas(), {keyCode: 38, key: 'ArrowUp'});
+        expect(spy).toHaveBeenCalledTimes(4);
+        easeToArgs = spy.mock.calls[3][0];
+        expect(easeToArgs.offset[0]).toBe(-0);
+        expect(easeToArgs.offset[1]).toBe(100);
+
+    });
+
+    test('KeyboardHandler rotates map in response to Shift+left/right arrow keys', async () => {
+        const map = createMap({zoom: 10, center: [0, 0], bearing: 0});
+        const spy = jest.spyOn(map, 'easeTo');
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 37, key: 'ArrowLeft', shiftKey: true});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.bearing).toBe(-15);
+        expect(easeToArgs.offset[0]).toBe(-0);
+
+        map.setBearing(0);
+        simulate.keydown(map.getCanvas(), {keyCode: 39, key: 'ArrowRight', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.bearing).toBe(15);
+        expect(easeToArgs.offset[0]).toBe(-0);
+
+    });
+
+    test('KeyboardHandler does not rotate map in response to Shift+left/right arrow keys when disableRotation has been called', async () => {
+        const map = createMap({zoom: 10, center: [0, 0], bearing: 0});
+        const spy = jest.spyOn(map, 'easeTo');
+        map.keyboard.disableRotation();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 37, key: 'ArrowLeft', shiftKey: true});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.bearing).toBe(0);
+        expect(easeToArgs.offset[0]).toBe(-0);
+
+        map.setBearing(0);
+        simulate.keydown(map.getCanvas(), {keyCode: 39, key: 'ArrowRight', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.bearing).toBe(0);
+        expect(easeToArgs.offset[0]).toBe(-0);
+
+    });
+
+    test('KeyboardHandler pitches map in response to Shift+up/down arrow keys', async () => {
+        const map = createMap({zoom: 10, center: [0, 0], pitch: 30});
+        const spy = jest.spyOn(map, 'easeTo');
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 40, key: 'ArrowDown', shiftKey: true});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.pitch).toBe(20);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        map.setPitch(30);
+        simulate.keydown(map.getCanvas(), {keyCode: 38, key: 'ArrowUp', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.pitch).toBe(40);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+    });
+
+    test('KeyboardHandler does not pitch map in response to Shift+up/down arrow keys when disableRotation has been called', async () => {
+        const map = createMap({zoom: 10, center: [0, 0], pitch: 30});
+        const spy = jest.spyOn(map, 'easeTo');
+        map.keyboard.disableRotation();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 32, key: ' '});
+        expect(map.easeTo).not.toHaveBeenCalled();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 40, key: 'ArrowDown', shiftKey: true});
+        expect(map.easeTo).toHaveBeenCalled();
+        let easeToArgs = spy.mock.calls[0][0];
+        expect(easeToArgs.pitch).toBe(30);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+        map.setPitch(30);
+        simulate.keydown(map.getCanvas(), {keyCode: 38, key: 'ArrowUp', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        easeToArgs = spy.mock.calls[1][0];
+        expect(easeToArgs.pitch).toBe(30);
+        expect(easeToArgs.offset[1]).toBe(-0);
+
+    });
+
+    test('KeyboardHandler zooms map in response to -/+ keys', () => {
+        const map = createMap({zoom: 10, center: [0, 0]});
+        const spy = jest.spyOn(map, 'easeTo');
+
+        simulate.keydown(map.getCanvas(), {keyCode: 187, key: 'Equal'});
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy.mock.calls[0][0].zoom).toBe(11);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 187, key: 'Equal', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[1][0].zoom).toBe(12);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 189, key: 'Minus'});
+        expect(spy).toHaveBeenCalledTimes(3);
+        expect(spy.mock.calls[2][0].zoom).toBe(9);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 189, key: 'Minus', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(4);
+        expect(spy.mock.calls[3][0].zoom).toBe(8);
+
+    });
+
+    test('KeyboardHandler zooms map in response to -/+ keys when disableRotation has been called', () => {
+        const map = createMap({zoom: 10, center: [0, 0]});
+        const spy = jest.spyOn(map, 'easeTo');
+        map.keyboard.disableRotation();
+
+        simulate.keydown(map.getCanvas(), {keyCode: 187, key: 'Equal'});
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy.mock.calls[0][0].zoom).toBe(11);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 187, key: 'Equal', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[1][0].zoom).toBe(12);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 189, key: 'Minus'});
+        expect(spy).toHaveBeenCalledTimes(3);
+        expect(spy.mock.calls[2][0].zoom).toBe(9);
+
+        map.setZoom(10);
+        simulate.keydown(map.getCanvas(), {keyCode: 189, key: 'Minus', shiftKey: true});
+        expect(spy).toHaveBeenCalledTimes(4);
+        expect(spy.mock.calls[3][0].zoom).toBe(8);
+
+    });
+});

package/src/ui/handler/keyboard.ts

@@ -0,0 +1,212 @@
+import {Handler} from '../handler_manager';
+import type {Map} from '../map';
+import {TransformProvider} from './transform-provider';
+
+const defaultOptions = {
+    panStep: 100,
+    bearingStep: 15,
+    pitchStep: 10
+};
+
+/**
+ * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using
+ * the following keyboard shortcuts:
+ *
+ * - `=` / `+`: Increase the zoom level by 1.
+ * - `Shift-=` / `Shift-+`: Increase the zoom level by 2.
+ * - `-`: Decrease the zoom level by 1.
+ * - `Shift--`: Decrease the zoom level by 2.
+ * - Arrow keys: Pan by 100 pixels.
+ * - `Shift+⇢`: Increase the rotation by 15 degrees.
+ * - `Shift+⇠`: Decrease the rotation by 15 degrees.
+ * - `Shift+⇡`: Increase the pitch by 10 degrees.
+ * - `Shift+⇣`: Decrease the pitch by 10 degrees.
+ *
+ * @group Handlers
+ */
+export class KeyboardHandler implements Handler {
+    _tr: TransformProvider;
+    _enabled: boolean;
+    _active: boolean;
+    _panStep: number;
+    _bearingStep: number;
+    _pitchStep: number;
+    _rotationDisabled: boolean;
+
+    /** @internal */
+    constructor(map: Map) {
+        this._tr = new TransformProvider(map);
+        const stepOptions = defaultOptions;
+        this._panStep = stepOptions.panStep;
+        this._bearingStep = stepOptions.bearingStep;
+        this._pitchStep = stepOptions.pitchStep;
+        this._rotationDisabled = false;
+    }
+
+    reset() {
+        this._active = false;
+    }
+
+    keydown(e: KeyboardEvent) {
+        if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+        let zoomDir = 0;
+        let bearingDir = 0;
+        let pitchDir = 0;
+        let xDir = 0;
+        let yDir = 0;
+
+        switch (e.keyCode) {
+            case 61:
+            case 107:
+            case 171:
+            case 187:
+                zoomDir = 1;
+                break;
+
+            case 189:
+            case 109:
+            case 173:
+                zoomDir = -1;
+                break;
+
+            case 37:
+                if (e.shiftKey) {
+                    bearingDir = -1;
+                } else {
+                    e.preventDefault();
+                    xDir = -1;
+                }
+                break;
+
+            case 39:
+                if (e.shiftKey) {
+                    bearingDir = 1;
+                } else {
+                    e.preventDefault();
+                    xDir = 1;
+                }
+                break;
+
+            case 38:
+                if (e.shiftKey) {
+                    pitchDir = 1;
+                } else {
+                    e.preventDefault();
+                    yDir = -1;
+                }
+                break;
+
+            case 40:
+                if (e.shiftKey) {
+                    pitchDir = -1;
+                } else {
+                    e.preventDefault();
+                    yDir = 1;
+                }
+                break;
+
+            default:
+                return;
+        }
+
+        if (this._rotationDisabled) {
+            bearingDir = 0;
+            pitchDir = 0;
+        }
+
+        return {
+            cameraAnimation: (map: Map) => {
+                const tr = this._tr;
+                map.easeTo({
+                    duration: 300,
+                    easeId: 'keyboardHandler',
+                    easing: easeOut,
+
+                    zoom: zoomDir ? Math.round(tr.zoom) + zoomDir * (e.shiftKey ? 2 : 1) : tr.zoom,
+                    bearing: tr.bearing + bearingDir * this._bearingStep,
+                    pitch: tr.pitch + pitchDir * this._pitchStep,
+                    offset: [-xDir * this._panStep, -yDir * this._panStep],
+                    center: tr.center
+                }, {originalEvent: e});
+            }
+        };
+    }
+
+    /**
+     * Enables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.enable();
+     * ```
+     */
+    enable() {
+        this._enabled = true;
+    }
+
+    /**
+     * Disables the "keyboard rotate and zoom" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.disable();
+     * ```
+     */
+    disable() {
+        this._enabled = false;
+        this.reset();
+    }
+
+    /**
+     * Returns a Boolean indicating whether the "keyboard rotate and zoom"
+     * interaction is enabled.
+     *
+     * @returns `true` if the "keyboard rotate and zoom"
+     * interaction is enabled.
+     */
+    isEnabled() {
+        return this._enabled;
+    }
+
+    /**
+     * Returns true if the handler is enabled and has detected the start of a
+     * zoom/rotate gesture.
+     *
+     * @returns `true` if the handler is enabled and has detected the
+     * start of a zoom/rotate gesture.
+     */
+    isActive() {
+        return this._active;
+    }
+
+    /**
+     * Disables the "keyboard pan/rotate" interaction, leaving the
+     * "keyboard zoom" interaction enabled.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.disableRotation();
+     * ```
+     */
+    disableRotation() {
+        this._rotationDisabled = true;
+    }
+
+    /**
+     * Enables the "keyboard pan/rotate" interaction.
+     *
+     * @example
+     * ```ts
+     * map.keyboard.enable();
+     * map.keyboard.enableRotation();
+     * ```
+     */
+    enableRotation() {
+        this._rotationDisabled = false;
+    }
+}
+
+function easeOut(t: number) {
+    return t * (2 - t);
+}

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

@@ -0,0 +1,158 @@
+import {Map, MapOptions} from '../map';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {beforeMapTest} from '../../util/test/util';
+
+function createMap() {
+    return new Map({interactive: true, container: DOM.create('div', '', window.document.body)} as any as MapOptions);
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('map events', () => {
+    test('MapEvent handler fires touch events with correct values', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+
+        const touchstart = jest.fn();
+        const touchmove = jest.fn();
+        const touchend = jest.fn();
+
+        map.on('touchstart', touchstart);
+        map.on('touchmove', touchmove);
+        map.on('touchend', touchend);
+
+        const touchesStart = [{target, identifier: 1, clientX: 0, clientY: 50}];
+        const touchesMove = [{target, identifier: 1, clientX: 0, clientY: 60}];
+        const touchesEnd = [{target, identifier: 1, clientX: 0, clientY: 60}];
+
+        simulate.touchstart(map.getCanvas(), {touches: touchesStart, targetTouches: touchesStart});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchstart.mock.calls[0][0].point).toEqual({x: 0, y: 50});
+        expect(touchmove).toHaveBeenCalledTimes(0);
+        expect(touchend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: touchesMove, targetTouches: touchesMove});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchmove).toHaveBeenCalledTimes(1);
+        expect(touchmove.mock.calls[0][0].point).toEqual({x: 0, y: 60});
+        expect(touchend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: [], targetTouches: [], changedTouches: touchesEnd});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchmove).toHaveBeenCalledTimes(1);
+        expect(touchend).toHaveBeenCalledTimes(1);
+        expect(touchend.mock.calls[0][0].point).toEqual({x: 0, y: 60});
+
+        map.remove();
+    });
+
+    test('MapEvent handler fires touchmove even while drag handler is active', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const touchstart = jest.fn();
+        const touchmove = jest.fn();
+        const touchend = jest.fn();
+        const drag = jest.fn();
+
+        map.on('touchstart', touchstart);
+        map.on('touchmove', touchmove);
+        map.on('touchend', touchend);
+        map.on('drag', drag);
+
+        const touchesStart = [{target, identifier: 1, clientX: 0, clientY: 50}];
+        const touchesMove = [{target, identifier: 1, clientX: 0, clientY: 60}];
+        const touchesEnd = [{target, identifier: 1, clientX: 0, clientY: 60}];
+
+        simulate.touchstart(map.getCanvas(), {touches: touchesStart, targetTouches: touchesStart});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchstart.mock.calls[0][0].point).toEqual({x: 0, y: 50});
+        expect(touchmove).toHaveBeenCalledTimes(0);
+        expect(touchend).toHaveBeenCalledTimes(0);
+
+        simulate.touchmove(map.getCanvas(), {touches: touchesMove, targetTouches: touchesMove});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchmove).toHaveBeenCalledTimes(1);
+        expect(touchmove.mock.calls[0][0].point).toEqual({x: 0, y: 60});
+        expect(touchend).toHaveBeenCalledTimes(0);
+
+        simulate.touchend(map.getCanvas(), {touches: [], targetTouches: [], changedTouches: touchesEnd});
+        expect(touchstart).toHaveBeenCalledTimes(1);
+        expect(touchmove).toHaveBeenCalledTimes(1);
+        expect(touchend).toHaveBeenCalledTimes(1);
+        expect(touchend.mock.calls[0][0].point).toEqual({x: 0, y: 60});
+
+        map._renderTaskQueue.run();
+        expect(drag).toHaveBeenCalledTimes(1);
+
+        map.remove();
+    });
+
+    test('MapEvent handler fires contextmenu on MacOS/Linux, but only at mouseup', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target}); // triggered immediately after mousedown
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(1);
+    });
+
+    test('MapEvent handler does not fire contextmenu on MacOS/Linux, when moved', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target}); // triggered immediately after mousedown
+        simulate.mousemove(map.getCanvas(), {target, buttons: 2, clientX: 50, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 70, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+    });
+
+    test('MapEvent handler fires contextmenu on Windows', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+        simulate.contextmenu(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10}); // triggered only after mouseup
+        expect(contextmenu).toHaveBeenCalledTimes(1);
+    });
+
+    test('MapEvent handler does not fire contextmenu on Windows, when moved', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.mousemove(map.getCanvas(), {target, buttons: 2, clientX: 50, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 50, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10}); // triggered only after mouseup
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+    });
+});