global-state expression support in layout properties (#6209)

* add unit tests checking that sources are reloaded only when necessary on changes of global state rferenced by layout properties

* `global-state` expression support in layout properties

complements `global-state` expression support in filter and paint properties

#5613

* changelog

---------

Co-authored-by: Natalia Kowalczyk <[email protected]>

Author: melitele

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### ✨ Features and improvements
 - Pass document's `lang` to Tiny-SDF to render Simplified and Traditional Chinese characters ([#6223](https://github.com/maplibre/maplibre-gl-js/issues/6223))
+- Enable `global-state` expressions in layout properties([#6209](https://github.com/maplibre/maplibre-gl-js/pull/6209))
 
 - _...Add new stuff here..._
 

src/source/worker_tile.test.ts

@@ -7,15 +7,16 @@ import {type WorkerTileParameters} from './worker_source';
 import {type VectorTile} from '@mapbox/vector-tile';
 import {SubdivisionGranularitySetting} from '../render/subdivision_granularity_settings';
 
-function createWorkerTile() {
+function createWorkerTile(params?: {globalState?: Record<string, any>}): WorkerTile {
     return new WorkerTile({
         uid: '',
         zoom: 0,
         maxZoom: 20,
         tileSize: 512,
         source: 'source',
         tileID: new OverscaledTileID(1, 0, 1, 1, 1),
-        overscaling: 1
+        overscaling: 1,
+        globalState: params?.globalState
     } as any as WorkerTileParameters);
 }
 
@@ -27,6 +28,14 @@ function createWrapper() {
     } as any as Feature]);
 }
 
+function createLineWrapper() {
+    return new GeoJSONWrapper([{
+        type: 2,
+        geometry: [[0, 0], [1, 1]],
+        tags: {}
+    } as any as Feature]);
+}
+
 describe('worker tile', () => {
     test('WorkerTile.parse', async () => {
         const layerIndex = new StyleLayerIndex([{
@@ -40,6 +49,40 @@ describe('worker tile', () => {
         expect(result.buckets[0]).toBeTruthy();
     });
 
+    test('WorkerTile.parse layer with layout property', async () => {
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            type: 'line',
+            layout: {
+                'line-join': 'bevel'
+            }
+        }]);
+
+        const tile = createWorkerTile();
+        const result = await tile.parse(createLineWrapper(), layerIndex, [], {} as any, SubdivisionGranularitySetting.noSubdivision);
+        expect(result.buckets[0]).toBeTruthy();
+        expect(result.buckets[0].layers[0].layout._values['line-join'].value.value).toBe('bevel');
+    });
+
+    test('WorkerTile.parse layer with layout property using global-state', async () => {
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            type: 'line',
+            layout: {
+                'line-join': ['global-state', 'test']
+            }
+        }]);
+
+        const tile = createWorkerTile({
+            globalState: {test: 'bevel'}
+        });
+        const result = await tile.parse(createLineWrapper(), layerIndex, [], {} as any, SubdivisionGranularitySetting.noSubdivision);
+        expect(result.buckets[0]).toBeTruthy();
+        expect(result.buckets[0].layers[0].layout._values['line-join'].value.value).toBe('bevel');
+    });
+
     test('WorkerTile.parse skips hidden layers', async () => {
         const layerIndex = new StyleLayerIndex([{
             id: 'test-hidden',

src/source/worker_tile.ts

@@ -113,7 +113,7 @@ export class WorkerTile {
                 if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
                 if (layer.visibility === 'none') continue;
 
-                recalculateLayers(family, this.zoom, availableImages);
+                recalculateLayers(family, this.zoom, availableImages, this.globalState);
 
                 const bucket = buckets[layer.id] = layer.createBucket({
                     index: featureIndex.bucketLayerIDs.length,
@@ -169,7 +169,7 @@ export class WorkerTile {
         for (const key in buckets) {
             const bucket = buckets[key];
             if (bucket instanceof SymbolBucket) {
-                recalculateLayers(bucket.layers, this.zoom, availableImages);
+                recalculateLayers(bucket.layers, this.zoom, availableImages, this.globalState);
                 performSymbolLayout({
                     bucket,
                     glyphMap,
@@ -184,7 +184,7 @@ export class WorkerTile {
                 (bucket instanceof LineBucket ||
                 bucket instanceof FillBucket ||
                 bucket instanceof FillExtrusionBucket)) {
-                recalculateLayers(bucket.layers, this.zoom, availableImages);
+                recalculateLayers(bucket.layers, this.zoom, availableImages, this.globalState);
                 bucket.addFeatures(options, this.tileID.canonical, imageAtlas.patternPositions);
             }
         }
@@ -204,9 +204,9 @@ export class WorkerTile {
     }
 }
 
-function recalculateLayers(layers: ReadonlyArray<StyleLayer>, zoom: number, availableImages: Array<string>) {
+function recalculateLayers(layers: ReadonlyArray<StyleLayer>, zoom: number, availableImages: Array<string>, globalState: Record<string, any>) {
     // Layers are shared and may have been used by a WorkerTile with a different zoom.
-    const parameters = new EvaluationParameters(zoom);
+    const parameters = new EvaluationParameters(zoom, {globalState});
     for (const layer of layers) {
         layer.recalculate(parameters, availableImages);
     }

src/style/style.test.ts

@@ -1393,6 +1393,33 @@ describe('Style.setGlobalState', () => {
         expect(style.sourceCaches['fill-source-id'].reload).toHaveBeenCalled();
     });
 
+    test('reloads sources when state property is used in layout property', async () => {
+        const style = new Style(getStubMap());
+        style.loadJSON(createStyleJSON({
+            sources: {
+                'line-source-id': createGeoJSONSource()
+            },
+            layers: [{
+                id: 'first-layer-id',
+                type: 'line',
+                source: 'line-source-id',
+                layout: {
+                    'line-join': ['global-state', 'lineJoin']
+                }
+            }]
+        }));
+
+        await style.once('style.load');
+
+        style.sourceCaches['line-source-id'].resume = vi.fn();
+        style.sourceCaches['line-source-id'].reload = vi.fn();
+
+        style.setGlobalState({lineJoin: {default: 'bevel'}});
+
+        expect(style.sourceCaches['line-source-id'].resume).toHaveBeenCalled();
+        expect(style.sourceCaches['line-source-id'].reload).toHaveBeenCalled();
+    });
+
     test('does not reload sources when state property is set to the same value as current one', async () => {
         const style = new Style(getStubMap());
         style.loadJSON(createStyleJSON({
@@ -1451,6 +1478,36 @@ describe('Style.setGlobalState', () => {
         expect(style.sourceCaches['circle-source-id'].resume).not.toHaveBeenCalled();
         expect(style.sourceCaches['circle-source-id'].reload).not.toHaveBeenCalled();
     });
+
+    test('does not reload sources when new state property is used in paint property while state property used in layout is unchanged', async () => {
+        const style = new Style(getStubMap());
+        style.loadJSON(createStyleJSON({
+            sources: {
+                'line-source-id': createGeoJSONSource()
+            },
+            layers: [{
+                id: 'first-layer-id',
+                type: 'line',
+                source: 'line-source-id',
+                layout: {
+                    'line-join': ['global-state', 'lineJoin']
+                },
+                paint: {
+                    'line-color': ['global-state', 'lineColor']
+                }
+            }]
+        }));
+
+        await style.once('style.load');
+
+        style.sourceCaches['line-source-id'].resume = vi.fn();
+        style.sourceCaches['line-source-id'].reload = vi.fn();
+
+        style.setGlobalState({lineColor: {default: 'red'}});
+
+        expect(style.sourceCaches['line-source-id'].resume).not.toHaveBeenCalled();
+        expect(style.sourceCaches['line-source-id'].reload).not.toHaveBeenCalled();
+    });
 });
 
 describe('Style.setGlobalStateProperty', () => {
@@ -1541,6 +1598,63 @@ describe('Style.setGlobalStateProperty', () => {
         expect(style.sourceCaches['fill-source-id'].reload).not.toHaveBeenCalled();
     });
 
+    test('reloads sources when state property is used in layout property', async () => {
+        const style = new Style(getStubMap());
+        style.loadJSON(createStyleJSON({
+            sources: {
+                'line-1-source-id': createGeoJSONSource(),
+                'line-2-source-id': createGeoJSONSource(),
+                'line-3-source-id': createGeoJSONSource()
+            },
+            layers: [{
+                id: 'first-layer-id',
+                type: 'line',
+                source: 'line-1-source-id',
+                layout: {
+                    'line-join': ['global-state', 'lineJoin']
+                }
+            }, {
+                id: 'second-layer-id',
+                type: 'line',
+                source: 'line-3-source-id'
+            }, {
+                id: 'third-layer-id',
+                type: 'line',
+                source: 'line-2-source-id',
+                layout: {
+                    'line-join': ['global-state', 'lineJoin']
+                }
+            }, {
+                id: 'fourth-layer-id',
+                type: 'line',
+                source: 'line-3-source-id',
+                layout: {
+                    'line-cap': ['global-state', 'lineCap']
+                }
+            }]
+        }));
+
+        await style.once('style.load');
+
+        style.sourceCaches['line-1-source-id'].resume = vi.fn();
+        style.sourceCaches['line-1-source-id'].reload = vi.fn();
+        style.sourceCaches['line-2-source-id'].resume = vi.fn();
+        style.sourceCaches['line-2-source-id'].reload = vi.fn();
+        style.sourceCaches['line-3-source-id'].resume = vi.fn();
+        style.sourceCaches['line-3-source-id'].reload = vi.fn();
+
+        style.setGlobalStateProperty('lineJoin', 'bevel');
+
+        // sources line-1 and line-2 should be reloaded
+        expect(style.sourceCaches['line-1-source-id'].resume).toHaveBeenCalled();
+        expect(style.sourceCaches['line-1-source-id'].reload).toHaveBeenCalled();
+        expect(style.sourceCaches['line-2-source-id'].resume).toHaveBeenCalled();
+        expect(style.sourceCaches['line-2-source-id'].reload).toHaveBeenCalled();
+        // source line-3 should not be reloaded
+        expect(style.sourceCaches['line-3-source-id'].resume).not.toHaveBeenCalled();
+        expect(style.sourceCaches['line-3-source-id'].reload).not.toHaveBeenCalled();
+    });
+
     test('does not reload sources when state property is set to the same value as current one', async () => {
         const style = new Style(getStubMap());
         style.loadJSON(createStyleJSON({
@@ -1599,6 +1713,36 @@ describe('Style.setGlobalStateProperty', () => {
         expect(style.sourceCaches['circle-source-id'].resume).not.toHaveBeenCalled();
         expect(style.sourceCaches['circle-source-id'].reload).not.toHaveBeenCalled();
     });
+
+    test('does not reload sources when state property is used in paint property while a different state property used in layout is unchanged', async () => {
+        const style = new Style(getStubMap());
+        style.loadJSON(createStyleJSON({
+            sources: {
+                'line-source-id': createGeoJSONSource()
+            },
+            layers: [{
+                id: 'first-layer-id',
+                type: 'line',
+                source: 'line-source-id',
+                layout: {
+                    'line-join': ['global-state', 'lineJoin']
+                },
+                paint: {
+                    'line-color': ['global-state', 'lineColor']
+                }
+            }]
+        }));
+
+        await style.once('style.load');
+
+        style.sourceCaches['line-source-id'].resume = vi.fn();
+        style.sourceCaches['line-source-id'].reload = vi.fn();
+
+        style.setGlobalStateProperty('lineColor', 'red');
+
+        expect(style.sourceCaches['line-source-id'].resume).not.toHaveBeenCalled();
+        expect(style.sourceCaches['line-source-id'].reload).not.toHaveBeenCalled();
+    });
 });
 
 describe('Style.addLayer', () => {
@@ -1660,7 +1804,7 @@ describe('Style.addLayer', () => {
         style.loadJSON(createStyleJSON());
         await style.once('style.load');
         const errorPromise = style.once('error');
-            
+
         style.addLayer({
             id: 'background',
             type: 'background',
@@ -1887,9 +2031,9 @@ describe('Style.addLayer', () => {
         }as LayerSpecification;
 
         await style.once('style.load');
-        const errorPromise = style.once('error');      
+        const errorPromise = style.once('error');
         style.addLayer(layer);
-        
+
         const {error} = await errorPromise;
         expect(error.message).toMatch(/does not exist on source/);
     });
@@ -2078,7 +2222,7 @@ describe('Style.setPaintProperty', () => {
 
         await source.once('data');
         vi.spyOn(sourceCache, 'reload');
-            
+
         source.setData({'type': 'FeatureCollection', 'features': []});
         style.setPaintProperty('circle', 'circle-color', {type: 'identity', property: 'foo'});
         await waitForEvent(source, 'data', (e) => e.sourceDataType === 'content');

test/integration/render/tests/text-field/global-state/expected.png

@@ -0,0 +1,56 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "state": {
+    "prefix": { "default": "pre_"},
+    "suffix": { "default": "_suf" }
+  },
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {
+              "name": "Napoli"
+            },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 0 ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": [
+          "concat",
+          ["global-state", "prefix"],
+          ["get", "name"],
+          ["global-state", "suffix"]
+        ],
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ],
+        "text-size": 32
+      }
+    }
+  ]
+}