maplibre-gl 3.6.1 → 3.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -23,8 +23,8 @@
     "@maplibre/maplibre-gl-style-spec": "^19.3.3",
     "@types/geojson": "^7946.0.13",
     "@types/mapbox__point-geometry": "^0.1.4",
-    "@types/mapbox__vector-tile": "^1.3.3",
-    "@types/pbf": "^3.0.4",
+    "@types/mapbox__vector-tile": "^1.3.4",
+    "@types/pbf": "^3.0.5",
     "@types/supercluster": "^7.1.3",
     "earcut": "^2.2.4",
     "geojson-vt": "^3.2.1",
@@ -51,39 +51,39 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/benchmark": "^2.1.5",
     "@types/cssnano": "^5.0.0",
-    "@types/d3": "^7.4.2",
+    "@types/d3": "^7.4.3",
     "@types/diff": "^5.0.8",
     "@types/earcut": "^2.1.4",
     "@types/eslint": "^8.44.7",
     "@types/geojson-vt": "3.2.4",
-    "@types/gl": "^6.0.4",
+    "@types/gl": "^6.0.5",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^29.5.3",
+    "@types/jest": "^29.5.8",
     "@types/jsdom": "^21.1.5",
     "@types/minimist": "^1.2.5",
-    "@types/murmurhash-js": "^1.0.5",
+    "@types/murmurhash-js": "^1.0.6",
     "@types/nise": "^1.4.4",
-    "@types/node": "^20.8.3",
+    "@types/node": "^20.9.2",
     "@types/offscreencanvas": "^2019.7.3",
-    "@types/pixelmatch": "^5.2.5",
+    "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
-    "@types/react": "^18.2.35",
-    "@types/react-dom": "^18.2.14",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@types/request": "^2.48.12",
     "@types/shuffle-seed": "^1.1.2",
     "@types/window-or-global": "^1.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "address": "^2.0.1",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1219864",
+    "devtools-protocol": "^0.0.1226504",
     "diff": "^5.1.0",
     "dts-bundle-generator": "^8.1.2",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.29.0",
@@ -94,9 +94,9 @@
     "gl": "^6.0.2",
     "glob": "^10.3.10",
     "is-builtin-module": "^3.2.1",
-    "jest": "^29.6.2",
+    "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "json-stringify-pretty-compact": "^4.0.0",
     "minimist": "^1.2.8",
@@ -111,10 +111,10 @@
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.1.1",
-    "puppeteer": "^21.5.1",
+    "puppeteer": "^21.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.4.0",
+    "rollup": "^4.5.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
     "semver": "^7.5.4",

package/src/render/terrain.test.ts

@@ -15,10 +15,12 @@ import {LngLat} from '../geo/lng_lat';
 
 describe('Terrain', () => {
     test('pointCoordiate should not return null', () => {
+        expect.assertions(1);
         const painter = {
             context: new Context(gl(1, 1) as any),
             width: 1,
-            height: 1
+            height: 1,
+            transform: {center: {lng: 0}}
         } as any as Painter;
         const sourceCache = {} as SourceCache;
         const getTileByID = (tileID) : Tile => {
@@ -50,6 +52,59 @@ describe('Terrain', () => {
         expect(coordinate).not.toBeNull();
     });
 
+    const setupMercatorOverflow = (centerLng: number) => {
+        const WORLD_WIDTH = 4;
+        const painter = {
+            context: new Context(gl(WORLD_WIDTH, 1) as any),
+            width: WORLD_WIDTH,
+            height: 1,
+            transform: {center: {lng: centerLng}}
+        } as any as Painter;
+        const sourceCache = {} as SourceCache;
+        const terrain = new Terrain(painter, sourceCache, {} as any as TerrainSpecification);
+        const mockTile = {tileID: {canonical: {x: 0, y: 0, z: 0}}};
+        terrain.sourceCache.getTileByID = () => mockTile as any as Tile;
+        terrain.getElevation = () => 0;
+        terrain.coordsIndex = ['abcd'];
+        terrain._coordsTextureSize = WORLD_WIDTH;
+        const pixels = new Uint8Array([2, 0, 0, 255, 3, 0, 0, 255, 0, 0, 0, 255, 1, 0, 0, 255]);
+        const image = new RGBAImage({width: WORLD_WIDTH, height: 1}, pixels);
+        const imageTexture = new Texture(painter.context, image, painter.context.gl.RGBA);
+        terrain.getFramebuffer('coords'); // allow init of frame buffers
+        terrain._fboCoordsTexture.texture = imageTexture.texture;
+        return terrain;
+    };
+
+    test(
+        `pointCoordiate should return negative mercator x
+        if center.lng is to the right of 180 meridian
+        and a given point is to the left of 180`,
+        () => {
+            expect.assertions(2);
+            const centerLng = -170;
+            const pointX = 1; // x in the left half of the 4-px world
+            const terrain = setupMercatorOverflow(centerLng);
+            const coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+
+            expect(coordinate.x).toBeLessThan(0);
+            expect(coordinate.x).toBeGreaterThan(-1);
+        });
+
+    test(
+        `pointCoordiate should return mercator x greater than 1
+        if center.lng is to the left of 180 meridian
+        and a given point is to the right of 180`,
+        () => {
+            expect.assertions(2);
+            const centerLng = 170;
+            const pointX = 3; // x in the right half of the 4-px world
+            const terrain = setupMercatorOverflow(centerLng);
+            const coordinate = terrain.pointCoordinate(new Point(pointX, 0));
+
+            expect(coordinate.x).toBeGreaterThan(1);
+            expect(coordinate.x).toBeLessThan(2);
+        });
+
     test('Calculate tile minimum and maximum elevation', () => {
         const tileID = new OverscaledTileID(5, 0, 5, 17, 11);
         const tile = new Tile(tileID, 256);

package/src/render/terrain.ts

@@ -13,7 +13,7 @@ import {Painter} from './painter';
 import {Texture} from '../render/texture';
 import type {Framebuffer} from '../gl/framebuffer';
 import Point from '@mapbox/point-geometry';
-import {MercatorCoordinate} from '../geo/mercator_coordinate';
+import {MercatorCoordinate, lngFromMercatorX, mercatorXfromLng} from '../geo/mercator_coordinate';
 import {TerrainSourceCache} from '../source/terrain_source_cache';
 import {SourceCache} from '../source/source_cache';
 import {EXTENT} from '../data/extent';
@@ -341,8 +341,9 @@ export class Terrain {
         if (!tile) return null;
         const coordsSize = this._coordsTextureSize;
         const worldSize = (1 << tile.tileID.canonical.z) * coordsSize;
+        const mercatorX = (tile.tileID.canonical.x * coordsSize + x) / worldSize;
         return new MercatorCoordinate(
-            (tile.tileID.canonical.x * coordsSize + x) / worldSize,
+            this._allowMercatorOverflow(p, mercatorX),
             (tile.tileID.canonical.y * coordsSize + y) / worldSize,
             this.getElevation(tile.tileID, x, y, coordsSize)
         );
@@ -441,4 +442,18 @@ export class Terrain {
             mercatorY
         };
     }
+
+    _allowMercatorOverflow(p: Point, mercatorX: number): number {
+        const inLeftHalf = p.x < (this.painter.width / 2);
+        let lng = lngFromMercatorX(mercatorX);
+        const centerLng = this.painter.transform.center.lng;
+        if (
+            (inLeftHalf && Math.sign(lng) > 0 && Math.sign(centerLng) < 0) ||
+            (!inLeftHalf && Math.sign(lng) < 0 && Math.sign(centerLng) > 0)
+        ) {
+            lng = 360 * Math.sign(centerLng) + lng;
+            return mercatorXfromLng(lng);
+        }
+        return mercatorX;
+    }
 }

package/src/render/update_pattern_positions_in_program.test.ts

@@ -0,0 +1,74 @@
+import {Tile} from '../source/tile';
+import {OverscaledTileID} from '../source/tile_id';
+import {updatePatternPositionsInProgram} from './update_pattern_positions_in_program';
+import {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import type {CrossFaded} from '../style/properties';
+import type {FillLayerSpecification, ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {ProgramConfiguration} from '../data/program_configuration';
+import type {ImagePosition} from './image_atlas';
+import type {Rect} from './glyph_atlas';
+
+interface MockProgramConfiguration extends ProgramConfiguration {
+    patternPositions: {
+        posFrom: Rect;
+        posTo: Rect;
+    };
+}
+
+function constructMockProgramConfiguration(): MockProgramConfiguration {
+    const mockProgramConfiguration: MockProgramConfiguration = {patternPositions: {}} as any;
+    mockProgramConfiguration.updatePaintBuffers = jest.fn();
+    mockProgramConfiguration.setConstantPatternPositions = (posFrom: ImagePosition, posTo: ImagePosition) => {
+        // this does not exist on ProgramConfiguration but we want to test the resulting output
+        mockProgramConfiguration.patternPositions = {posFrom: posFrom.paddedRect, posTo: posTo.paddedRect};
+    };
+
+    return mockProgramConfiguration;
+}
+
+function constructMockFillStyleLayer(): FillStyleLayer {
+    const layerSpec = {
+        id: 'mock-layer',
+        source: 'empty-source',
+        type: 'fill',
+        layout: {},
+        'paint': {
+            'fill-pattern': [
+                'step',
+                ['zoom'],
+                'zoo_11',
+                4,
+                'volcano_11'
+            ]
+        }
+    } as FillLayerSpecification;
+    const layer = new FillStyleLayer(layerSpec);
+    return layer;
+}
+
+describe('updatePatternPositionsInProgram', () => {
+    test('geojson tile', () => {
+        const config = constructMockProgramConfiguration();
+        const tile = new Tile(new OverscaledTileID(3, 0, 2, 1, 2), undefined);
+        tile.imageAtlas = {} as any;
+        tile.imageAtlas.patternPositions = {
+            'volcano_11': {paddedRect: {x: 0, y: 0, w: 0, h: 0}, version: 0, tl: [0, 0], pixelRatio: 1, br: [0, 0], tlbr: [0, 0, 0, 0], displaySize: [0, 0], stretchX: [], stretchY: [], content: [0, 0, 0, 0]},
+        };
+        const crossFadeResolveImage: CrossFaded<ResolvedImage> = {
+            from: {name: 'zoo_11', available: false, toString: () => 'zoo_11'},
+            to: {name: 'volcano_11', available: false, toString: () => 'volcano_11'}
+        };
+        updatePatternPositionsInProgram(
+            config,
+            'fill-pattern',
+            crossFadeResolveImage,
+            tile,
+            constructMockFillStyleLayer()
+        );
+        // we added this property to just see what the update looks like
+        expect(config.patternPositions).toEqual({
+            posFrom: {x: 0, y: 0, w: 0, h: 0},
+            posTo: {x: 0, y: 0, w: 0, h: 0}
+        });
+    });
+});

package/src/render/update_pattern_positions_in_program.ts

@@ -33,6 +33,10 @@ export function updatePatternPositionsInProgram(
     let posTo = patternPositions[constantPattern.to.toString()];
     let posFrom = patternPositions[constantPattern.from.toString()];
 
+    // https://github.com/maplibre/maplibre-gl-js/issues/3377
+    if (!posTo && posFrom) posTo = posFrom;
+    if (!posFrom && posTo) posFrom = posTo;
+
     // try again in case patternPositions has been updated by worker
     if (!posTo || !posFrom) {
         const transitioned = layer.getPaintProperty(propertyName) as string;

package/src/ui/map.test.ts

@@ -209,7 +209,7 @@ describe('Map', () => {
             await map.once('idle');
             idleTriggered = true;
             map.zoomTo(0.5, {duration: 100});
-            spy.mockReset();
+            spy.mockRestore();
         });
     });
 

package/src/ui/map.ts

@@ -103,7 +103,7 @@ export type MapOptions = {
      */
     attributionControl?: boolean;
     /**
-     * Attribuition text to show in an {@link AttributionControl}. Only applicable if `options.attributionControl` is `true`.
+     * Attribution text to show in an {@link AttributionControl}. Only applicable if `options.attributionControl` is `true`.
      */
     customAttribution?: string | Array<string>;
     /**

package/src/util/test/mock_fetch.ts

@@ -45,7 +45,7 @@ export function setupFetchMock(): FetchMock {
 
     global.AbortController = AbortControllerMock;
     global.Request = RequestMock as unknown as typeof Request;
-    global.fetch = fetchMock;
+    global.fetch = fetchMock as any;
 
     return fetchMock;
 }