maplibre-gl 3.2.0 → 3.2.1

package/src/source/vector_tile_worker_source.ts

@@ -139,30 +139,19 @@ export class VectorTileWorkerSource implements WorkerSource {
      * Implements {@link WorkerSource#reloadTile}.
      */
     reloadTile(params: WorkerTileParameters, callback: WorkerTileCallback) {
-        const loaded = this.loaded,
-            uid = params.uid,
-            vtSource = this;
+        const loaded = this.loaded;
+        const uid = params.uid;
         if (loaded && loaded[uid]) {
             const workerTile = loaded[uid];
             workerTile.showCollisionBoxes = params.showCollisionBoxes;
-
-            const done = (err?: Error, data?: any) => {
-                const reloadCallback = workerTile.reloadCallback;
-                if (reloadCallback) {
-                    delete workerTile.reloadCallback;
-                    workerTile.parse(workerTile.vectorTile, vtSource.layerIndex, this.availableImages, vtSource.actor, reloadCallback);
-                }
-                callback(err, data);
-            };
-
             if (workerTile.status === 'parsing') {
-                workerTile.reloadCallback = done;
+                workerTile.parse(workerTile.vectorTile, this.layerIndex, this.availableImages, this.actor, callback);
             } else if (workerTile.status === 'done') {
                 // if there was no vector tile data on the initial load, don't try and re-parse tile
                 if (workerTile.vectorTile) {
-                    workerTile.parse(workerTile.vectorTile, this.layerIndex, this.availableImages, this.actor, done);
+                    workerTile.parse(workerTile.vectorTile, this.layerIndex, this.availableImages, this.actor, callback);
                 } else {
-                    done();
+                    callback();
                 }
             }
         }

package/src/source/worker_tile.test.ts

@@ -99,4 +99,147 @@ describe('worker tile', () => {
             done();
         });
     });
+
+    test('WorkerTile#parse would request all types of dependencies', done => {
+        const tile = createWorkerTile();
+        const layerIndex = new StyleLayerIndex([{
+            id: '1',
+            type: 'fill',
+            source: 'source',
+            'source-layer': 'test',
+            paint: {
+                'fill-pattern': 'hello'
+            }
+        }, {
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'symbol',
+            layout: {
+                'icon-image': 'hello',
+                'text-font': ['StandardFont-Bold'],
+                'text-field': '{name}'
+            }
+        }]);
+
+        const data = {
+            layers: {
+                test: {
+                    version: 2,
+                    name: 'test',
+                    extent: 8192,
+                    length: 1,
+                    feature: (featureIndex: number) => ({
+                        extent: 8192,
+                        type: 1,
+                        id: featureIndex,
+                        properties: {
+                            name: 'test'
+                        },
+                        loadGeometry () {
+                            return [[{x: 0, y: 0}]];
+                        }
+                    })
+                }
+            }
+        } as any as VectorTile;
+
+        const send = jest.fn().mockImplementation((type: string, data: unknown, callback: Function) => {
+            setTimeout(() => callback(null,
+                type === 'getImages' ?
+                    {'hello': {width: 1, height: 1, data: new Uint8Array([0])}} :
+                    {'StandardFont-Bold': {width: 1, height: 1, data: new Uint8Array([0])}}
+            ));
+        });
+
+        const actorMock = {
+            send
+        } as unknown as Actor;
+        tile.parse(data, layerIndex, ['hello'], actorMock, (err, result) => {
+            expect(err).toBeFalsy();
+            expect(result).toBeDefined();
+            expect(send).toHaveBeenCalledTimes(3);
+            expect(send).toHaveBeenCalledWith('getImages', expect.objectContaining({'icons': ['hello'], 'type': 'icons'}), expect.any(Function));
+            expect(send).toHaveBeenCalledWith('getImages', expect.objectContaining({'icons': ['hello'], 'type': 'patterns'}), expect.any(Function));
+            expect(send).toHaveBeenCalledWith('getGlyphs', expect.objectContaining({'source': 'source', 'type': 'glyphs', 'stacks': {'StandardFont-Bold': [101, 115, 116]}}), expect.any(Function));
+            done();
+        });
+    });
+
+    test('WorkerTile#parse would cancel and only event once on repeated reparsing', done => {
+        const tile = createWorkerTile();
+        const layerIndex = new StyleLayerIndex([{
+            id: '1',
+            type: 'fill',
+            source: 'source',
+            'source-layer': 'test',
+            paint: {
+                'fill-pattern': 'hello'
+            }
+        }, {
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'symbol',
+            layout: {
+                'icon-image': 'hello',
+                'text-font': ['StandardFont-Bold'],
+                'text-field': '{name}'
+            }
+        }]);
+
+        const data = {
+            layers: {
+                test: {
+                    version: 2,
+                    name: 'test',
+                    extent: 8192,
+                    length: 1,
+                    feature: (featureIndex: number) => ({
+                        extent: 8192,
+                        type: 1,
+                        id: featureIndex,
+                        properties: {
+                            name: 'test'
+                        },
+                        loadGeometry () {
+                            return [[{x: 0, y: 0}]];
+                        }
+                    })
+                }
+            }
+        } as any as VectorTile;
+
+        let cancelCount = 0;
+        const send = jest.fn().mockImplementation((type: string, data: unknown, callback: Function) => {
+            const res = setTimeout(() => callback(null,
+                type === 'getImages' ?
+                    {'hello': {width: 1, height: 1, data: new Uint8Array([0])}} :
+                    {'StandardFont-Bold': {width: 1, height: 1, data: new Uint8Array([0])}}
+            ));
+
+            return {
+                cancel: () => {
+                    cancelCount += 1;
+                    clearTimeout(res);
+                }
+            };
+        });
+
+        const actorMock = {
+            send
+        } as unknown as Actor;
+        tile.parse(data, layerIndex, ['hello'], actorMock, () => done.fail('should not be called'));
+        tile.parse(data, layerIndex, ['hello'], actorMock, () => done.fail('should not be called'));
+        tile.parse(data, layerIndex, ['hello'], actorMock, (err, result) => {
+            expect(err).toBeFalsy();
+            expect(result).toBeDefined();
+            expect(cancelCount).toBe(6);
+            expect(send).toHaveBeenCalledTimes(9);
+            expect(send).toHaveBeenCalledWith('getImages', expect.objectContaining({'icons': ['hello'], 'type': 'icons'}), expect.any(Function));
+            expect(send).toHaveBeenCalledWith('getImages', expect.objectContaining({'icons': ['hello'], 'type': 'patterns'}), expect.any(Function));
+            expect(send).toHaveBeenCalledWith('getGlyphs', expect.objectContaining({'source': 'source', 'type': 'glyphs', 'stacks': {'StandardFont-Bold': [101, 115, 116]}}), expect.any(Function));
+            done();
+        });
+    });
 });

package/src/source/worker_tile.ts

@@ -24,6 +24,7 @@ import type {
 } from '../source/worker_source';
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {VectorTile} from '@mapbox/vector-tile';
+import {Cancelable} from '../types/cancelable';
 
 export class WorkerTile {
     tileID: OverscaledTileID;
@@ -43,8 +44,9 @@ export class WorkerTile {
     collisionBoxArray: CollisionBoxArray;
 
     abort: (() => void);
-    reloadCallback: WorkerTileCallback;
     vectorTile: VectorTile;
+    inFlightDependencies: Cancelable[];
+    dependencySentinel: number;
 
     constructor(params: WorkerTileParameters) {
         this.tileID = new OverscaledTileID(params.tileID.overscaledZ, params.tileID.wrap, params.tileID.canonical.z, params.tileID.canonical.x, params.tileID.canonical.y);
@@ -58,6 +60,8 @@ export class WorkerTile {
         this.collectResourceTiming = !!params.collectResourceTiming;
         this.returnDependencies = !!params.returnDependencies;
         this.promoteId = params.promoteId;
+        this.inFlightDependencies = [];
+        this.dependencySentinel = -1;
     }
 
     parse(data: VectorTile, layerIndex: StyleLayerIndex, availableImages: Array<string>, actor: Actor, callback: WorkerTileCallback) {
@@ -138,40 +142,55 @@ export class WorkerTile {
         let patternMap: {[_: string]: StyleImage};
 
         const stacks = mapObject(options.glyphDependencies, (glyphs) => Object.keys(glyphs).map(Number));
+
+        this.inFlightDependencies.forEach((request) => request?.cancel());
+        this.inFlightDependencies = [];
+
+        // cancelling seems to be not sufficient, we seems to still manage to get a callback hit, so use a sentinel to drop stale results
+        const dependencySentinel = ++this.dependencySentinel;
         if (Object.keys(stacks).length) {
-            actor.send('getGlyphs', {uid: this.uid, stacks, source: this.source, tileID: this.tileID, type: 'glyphs'}, (err, result) => {
+            this.inFlightDependencies.push(actor.send('getGlyphs', {uid: this.uid, stacks, source: this.source, tileID: this.tileID, type: 'glyphs'}, (err, result) => {
+                if (dependencySentinel !== this.dependencySentinel) {
+                    return;
+                }
                 if (!error) {
                     error = err;
                     glyphMap = result;
                     maybePrepare.call(this);
                 }
-            });
+            }));
         } else {
             glyphMap = {};
         }
 
         const icons = Object.keys(options.iconDependencies);
         if (icons.length) {
-            actor.send('getImages', {icons, source: this.source, tileID: this.tileID, type: 'icons'}, (err, result) => {
+            this.inFlightDependencies.push(actor.send('getImages', {icons, source: this.source, tileID: this.tileID, type: 'icons'}, (err, result) => {
+                if (dependencySentinel !== this.dependencySentinel) {
+                    return;
+                }
                 if (!error) {
                     error = err;
                     iconMap = result;
                     maybePrepare.call(this);
                 }
-            });
+            }));
         } else {
             iconMap = {};
         }
 
         const patterns = Object.keys(options.patternDependencies);
         if (patterns.length) {
-            actor.send('getImages', {icons: patterns, source: this.source, tileID: this.tileID, type: 'patterns'}, (err, result) => {
+            this.inFlightDependencies.push(actor.send('getImages', {icons: patterns, source: this.source, tileID: this.tileID, type: 'patterns'}, (err, result) => {
+                if (dependencySentinel !== this.dependencySentinel) {
+                    return;
+                }
                 if (!error) {
                     error = err;
                     patternMap = result;
                     maybePrepare.call(this);
                 }
-            });
+            }));
         } else {
             patternMap = {};
         }

package/src/ui/camera.test.ts

@@ -1659,10 +1659,12 @@ describe('#flyTo', () => {
 
     test('check elevation callbacks', done => {
         const camera = createCamera();
+        camera.terrain = {
+            getElevationForLngLatZoom: () => 100,
+            getMinTileElevationForLngLatZoom: () => 200
+        };
         camera.transform = {
             elevation: 0,
-            freezeElevation: false,
-            getElevation: () => 100,
             recalculateZoom: () => true
         };
 
@@ -1670,15 +1672,15 @@ describe('#flyTo', () => {
         // expect(camera._elevationCenter).toBe([10, 0]);
         expect(camera._elevationStart).toBe(0);
         expect(camera._elevationTarget).toBe(100);
-        expect(camera.transform.freezeElevation).toBeTruthy();
+        expect(camera._elevationFreeze).toBeTruthy();
 
-        camera.transform.getElevation = () => 200;
+        camera.terrain.getElevationForLngLatZoom = () => 200;
         camera._updateElevation(0.5);
         expect(camera._elevationStart).toBe(-100);
         expect(camera._elevationTarget).toBe(200);
 
         camera._finalizeElevation();
-        expect(camera.transform.freezeElevation).toBeFalsy();
+        expect(camera._elevationFreeze).toBeFalsy();
 
         done();
     });
@@ -2015,9 +2017,10 @@ describe('queryTerrainElevation', () => {
     test('should return the correct elevation', () => {
         // Set up mock transform and terrain objects
         const transform = new Transform(0, 22, 0, 60, true);
-        transform.getElevation = jest.fn().mockReturnValue(200);
         transform.elevation = 50;
-        const terrain = {} as Terrain;
+        const terrain = {
+            getElevationForLngLatZoom: jest.fn().mockReturnValue(200)
+        } as any as Terrain;
 
         // Set up camera with mock transform and terrain
         camera.transform = transform;
@@ -2029,12 +2032,12 @@ describe('queryTerrainElevation', () => {
         const result = camera.queryTerrainElevation(lngLatLike);
 
         // Check that transform.getElevation was called with the correct arguments
-        expect(transform.getElevation).toHaveBeenCalledWith(
+        expect(terrain.getElevationForLngLatZoom).toHaveBeenCalledWith(
             expect.objectContaining({
                 lng: lngLatLike[0],
                 lat: lngLatLike[1],
             }),
-            terrain
+            transform.tileZoom
         );
 
         // Check that the correct elevation value was returned