Fix for #3935 - pan-jump when map is large (#3940)

* Fix for #3935 - pan-jump when map is large

When the map canvas is large - >2048px, probably - the coords canvas
stops growing with the map due to web GL limitations.
This means that a screen-pixel is no longer 1:1 with a coords-canvas
pixel. It needs to be scaled using the ratio of devicePixelRatio and
painter.pixelRatio, which are no longer equal when the map is large.

* Fix for #3935 - add test, update CHANGELOG

CHANGELOG.md

@@ -4,7 +4,7 @@
 - Added const enum for actor messages to improve readability and maintainability. In tsconfig.json, `isolatedModules` flag is set to false in favor of generated JS size. ([#3879](https://github.com/maplibre/maplibre-gl-js/issues/3879))
 
 ### 🐞 Bug fixes
-- _...Add new stuff here..._
+- Fix different unwanted panning changes at the end of a panning motion, that happen on a large screen ([#3935](https://github.com/maplibre/maplibre-gl-js/issues/3935))
 
 ## 4.1.2
 

src/render/terrain.test.ts

@@ -35,6 +35,7 @@ describe('Terrain', () => {
             context: new Context(gl),
             width: 1,
             height: 1,
+            pixelRatio: 1,
             transform: {center: {lng: 0}},
             maybeDrawDepthAndCoords: jest.fn(),
         } as any as Painter;
@@ -64,13 +65,14 @@ describe('Terrain', () => {
 
     });
 
-    const setupMercatorOverflow = () => {
+    const setupMercatorOverflow = (pixelRatio: number = 1) => {
         const WORLD_WIDTH = 4;
         const painter = {
             context: new Context(gl),
             width: WORLD_WIDTH,
             height: 1,
             maybeDrawDepthAndCoords: jest.fn(),
+            pixelRatio,
         } as any as Painter;
         const sourceCache = {} as SourceCache;
         const terrain = new Terrain(painter, sourceCache, {} as any as TerrainSpecification);
@@ -89,7 +91,7 @@ describe('Terrain', () => {
             rgba[0] = 0;
             rgba[1] = 0;
             rgba[2] = 0;
-            rgba[3] = 255 - x;
+            rgba[3] = 255 - x / pixelRatio;
         });
         return terrain;
     };
@@ -120,6 +122,22 @@ describe('Terrain', () => {
             expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
         });
 
+    test(
+        'pointCoordinate should respect painter.pixelRatio',
+        () => {
+            const terrain = setupMercatorOverflow(2);
+
+            let pointX = 0;
+            let coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+            expect(coordinate.x).toBe(-1);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+
+            pointX = 3;
+            coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+            expect(coordinate.x).toBe(2);
+            expect(terrain.painter.maybeDrawDepthAndCoords).toHaveBeenCalled();
+        });
+
     test('Calculate tile minimum and maximum elevation', () => {
         const tileID = new OverscaledTileID(5, 0, 5, 17, 11);
         const tile = new Tile(tileID, 256);

src/render/terrain.ts

@@ -332,9 +332,12 @@ export class Terrain {
 
         const rgba = new Uint8Array(4);
         const context = this.painter.context, gl = context.gl;
+        const px = Math.round(p.x * this.painter.pixelRatio / devicePixelRatio);
+        const py = Math.round(p.y * this.painter.pixelRatio / devicePixelRatio);
+        const fbHeight = Math.round(this.painter.height / devicePixelRatio);
         // grab coordinate pixel from coordinates framebuffer
         context.bindFramebuffer.set(this.getFramebuffer('coords').framebuffer);
-        gl.readPixels(p.x, this.painter.height / devicePixelRatio - p.y - 1, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+        gl.readPixels(px, fbHeight - py - 1, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
         context.bindFramebuffer.set(null);
         // decode coordinates (encoding see getCoordsTexture)
         const x = rgba[0] + ((rgba[2] >> 4) << 8);