global-state expression support in layout properties

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

maplibre#5613

Author: Natalia Kowalczyk

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);
     }

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
+      }
+    }
+  ]
+}