Use center for zoom when mouse above horizon (#3398). (#3574)

* Use center for zoom when mouse above horizon (#3398). * Compute horizon position relative to map center (i.e. height / 2).
maplibre · Jan 15, 2024 · b944ea8 · b944ea8
1 parent b9199c8
commit b944ea8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fix wheel zoom to be into the same direction above or under the horizon ([#3398](https://github.com/maplibre/maplibre-gl-js/issues/3398))
 - _...Add new stuff here..._
 
 ## 4.0.0-pre.4

diff --git a/src/ui/handler/scroll_zoom.test.ts b/src/ui/handler/scroll_zoom.test.ts
@@ -295,4 +295,59 @@ describe('ScrollZoomHandler', () => {
 
         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._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._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();
+    });
 });
diff --git a/src/ui/handler/scroll_zoom.ts b/src/ui/handler/scroll_zoom.ts
@@ -233,7 +233,14 @@ export class ScrollZoomHandler implements Handler {
         const pos = DOM.mousePos(this._map.getCanvas(), e);
         const tr = this._tr;
 
-        this._around = LngLat.convert(this._aroundCenter ? tr.center : tr.unproject(pos));
+        if (pos.y > tr.transform.height / 2 - tr.transform.getHorizon()) {
+            this._around = LngLat.convert(this._aroundCenter ? tr.center : tr.unproject(pos));
+        } else {
+            // Do not use current cursor position if above the horizon to avoid 'unproject' this point
+            // as it is not mapped into 'coords' framebuffer or inversible with 'pixelMatrixInverse'.
+            this._around = LngLat.convert(tr.center);
+        }
+
         this._aroundPoint = tr.transform.locationPoint(this._around);
         if (!this._frameId) {
             this._frameId = true;