@scoova/mgl 1.0.0

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

@@ -0,0 +1,382 @@
+import {browser} from '../../util/browser';
+import {Map} from '../../ui/map';
+import {DOM} from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {setPerformance, beforeMapTest} from '../../util/test/util';
+
+function createMap() {
+    return new Map({
+        container: DOM.create('div', '', window.document.body),
+        style: {
+            'version': 8,
+            'sources': {},
+            'layers': []
+        }
+    });
+}
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('ScrollZoomHandler', () => {
+
+    test('Zooms for single mouse wheel tick', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        // simulate a single 'wheel' event
+        const startZoom = map.getZoom();
+
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        expect(map.getZoom() - startZoom).toBeCloseTo(0.0285, 3);
+
+        map.remove();
+    });
+
+    test('Zooms for multiple fast mouse wheel ticks', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        // simulate a multiple fast 'wheel' event
+        const startZoom = map.getZoom();
+
+        const iterations = 10;
+
+        for (let i = 0; i < iterations; i++) {
+            simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+            map._renderTaskQueue.run();
+            now += 0;
+            browserNow.mockReturnValue(now);
+            map._renderTaskQueue.run();
+        }
+
+        expect(map.getZoom() - startZoom).toBeCloseTo(0.0285 * iterations, 2);
+
+        map.remove();
+    });
+
+    test('Zooms for single mouse wheel tick with non-magical deltaY', () => new Promise<void>(done => {
+        const browserNow = jest.spyOn(browser, 'now');
+        const now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        // Simulate a single 'wheel' event without the magical deltaY value.
+        // This requires the handler to briefly wait to see if a subsequent
+        // event is coming in order to guess trackpad vs. mouse wheel
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -20});
+        map.on('zoomstart', () => {
+            map.remove();
+            done();
+        });
+    }));
+
+    test('Zooms for multiple mouse wheel ticks', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+
+        map._renderTaskQueue.run();
+        const startZoom = map.getZoom();
+
+        const events = [
+            [2, {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta}],
+            [7, {type: 'wheel', deltaY: -41}],
+            [30, {type: 'wheel', deltaY: -169}],
+            [1, {type: 'wheel', deltaY: -801}],
+            [5, {type: 'wheel', deltaY: -326}],
+            [20, {type: 'wheel', deltaY: -345}],
+            [22, {type: 'wheel', deltaY: -376}],
+        ] as [number, any][];
+
+        const end = now + 500;
+        let lastWheelEvent = now;
+
+        // simulate the above sequence of wheel events, with render frames
+        // interspersed every 20ms
+        while (now  < end) {
+            now += 1;
+            browserNow.mockReturnValue(now);
+            if (events.length && lastWheelEvent + events[0][0] === now) {
+                const [, event] = events.shift();
+                simulate.wheel(map.getCanvas(), event);
+                lastWheelEvent = now;
+            }
+            if (now % 20 === 0) {
+                map._renderTaskQueue.run();
+            }
+        }
+
+        expect(map.getZoom() - startZoom).toBeCloseTo(1.944, 3);
+
+        map.remove();
+    });
+
+    test('Gracefully ignores wheel events with deltaY: 0', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        const startZoom = map.getZoom();
+        // simulate  shift+'wheel' events
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -0, shiftKey: true});
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -0, shiftKey: true});
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -0, shiftKey: true});
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -0, shiftKey: true});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        expect(map.getZoom() - startZoom).toBe(0.0);
+
+    });
+
+    test('Gracefully handle wheel events that cancel each other out before the first scroll frame', () => {
+        // See also https://github.com/mapbox/mapbox-gl-js/issues/6782
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -1});
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -1});
+        now += 1;
+        browserNow.mockReturnValue(now);
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: 2});
+
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+    });
+
+    test('does not zoom if preventDefault is called on the wheel event', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+
+        map.on('wheel', e => e.preventDefault());
+
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        expect(map.getZoom()).toBe(0);
+
+        map.remove();
+    });
+
+    test('emits one movestart event and one moveend event while zooming', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+        jest.useFakeTimers();
+        setPerformance();
+        const map = createMap();
+
+        let startCount = 0;
+        map.on('movestart', () => {
+            startCount += 1;
+        });
+
+        let endCount = 0;
+        map.on('moveend', () => {
+            endCount += 1;
+        });
+
+        const events = [
+            [2, {type: 'trackpad', deltaY: -1}],
+            [7, {type: 'trackpad', deltaY: -2}],
+            [30, {type: 'wheel', deltaY: -5}]
+        ] as [number, any][];
+
+        const end = now + 50;
+        let lastWheelEvent = now;
+
+        while (now < end) {
+            now += 1;
+            browserNow.mockReturnValue(now);
+            if (events.length && lastWheelEvent + events[0][0] === now) {
+                const [, event] = events.shift();
+                simulate.wheel(map.getCanvas(), event);
+                lastWheelEvent = now;
+            }
+            if (now % 20 === 0) {
+                map._renderTaskQueue.run();
+            }
+        }
+
+        jest.advanceTimersByTime(200);
+
+        map._renderTaskQueue.run();
+
+        expect(startCount).toBe(1);
+        expect(endCount).toBe(1);
+
+    });
+
+    test('emits one zoomstart event and one zoomend event while zooming', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        jest.useFakeTimers();
+        setPerformance();
+        const map = createMap();
+
+        let startCount = 0;
+        map.on('zoomstart', () => {
+            startCount += 1;
+        });
+
+        let endCount = 0;
+        map.on('zoomend', () => {
+            endCount += 1;
+        });
+
+        const events = [
+            [2, {type: 'trackpad', deltaY: -1}],
+            [7, {type: 'trackpad', deltaY: -2}],
+            [30, {type: 'wheel', deltaY: -5}],
+        ] as [number, any][];
+
+        const end = now + 50;
+        let lastWheelEvent = now;
+
+        while (now < end) {
+            now += 1;
+            browserNow.mockReturnValue(now);
+            if (events.length && lastWheelEvent + events[0][0] === now) {
+                const [, event] = events.shift();
+                simulate.wheel(map.getCanvas(), event);
+                lastWheelEvent = now;
+            }
+            if (now % 20 === 0) {
+                map._renderTaskQueue.run();
+            }
+        }
+
+        jest.advanceTimersByTime(200);
+        map._renderTaskQueue.run();
+
+        expect(startCount).toBe(1);
+        expect(endCount).toBe(1);
+
+    });
+
+    test('Zooms for single mouse wheel tick while not in the center of the map and terrain is on, should zoom according to mouse position', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._elevateCameraIfInsideTerrain = (_tr : any) => ({});
+        map._renderTaskQueue.run();
+        map.terrain = {
+            pointCoordinate: () => null
+        } as any;
+
+        // simulate a single 'wheel' event
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta, clientX: 1000, clientY: 1000});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        expect(map.getCenter().lat).toBeCloseTo(-11.6371, 3);
+        expect(map.getCenter().lng).toBeCloseTo(11.0286, 3);
+
+        map.remove();
+    });
+
+    test('Terrain 3D zoom is in the same direction when pointing above horizon or under horizon', () => {
+        // See also https://github.com/maplibre/maplibre-gl-js/issues/3398
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        let map = createMap();
+        map._elevateCameraIfInsideTerrain = (_tr : any) => ({});
+        map._renderTaskQueue.run();
+        map.terrain = {
+            pointCoordinate: () => null
+        } as any;
+        map.setZoom(5);
+        map.setMaxPitch(85);
+        map.setPitch(80);
+        map._renderTaskQueue.run();
+
+        // simulate a single 'wheel' event on top of screen
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta, clientX: map.getCanvas().width / 2, clientY: 10});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        // On Top, use center point
+        expect(map.getCenter().lat).toBeCloseTo(0, 3);
+        expect(map.getCenter().lng).toBeCloseTo(0, 3);
+        expect(map.getZoom()).toBeCloseTo(5.02856, 3);
+
+        // do the same test on the bottom
+        map = createMap();
+        map._elevateCameraIfInsideTerrain = (_tr : any) => ({});
+        map._renderTaskQueue.run();
+        map.terrain = {
+            pointCoordinate: () => null
+        } as any;
+        map.setZoom(5);
+        map.setMaxPitch(85);
+        map.setPitch(80);
+        map._renderTaskQueue.run();
+
+        // simulate a single 'wheel' event on bottom of screen
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta, clientX: map.getCanvas().width / 2, clientY: map.getCanvas().height - 10});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        expect(map.getCenter().lat).toBeCloseTo(-0.125643, 3);
+        expect(map.getCenter().lng).toBeCloseTo(0.0, 3);
+        expect(map.getZoom()).toBeCloseTo(5.02856, 3);
+
+        map.remove();
+    });
+});