Refactor passing global-state object from Style to expressions (maplibre#6366)

* maplibre-style-spec 24.1.0

* add missing typing that is required per maplibre/maplibre-style-spec#1128

maplibre/maplibre-style-spec#1128

* add missing typing to filters that is required per maplibre/maplibre-style-spec#1279

maplibre/maplibre-style-spec#1279

* render test for layer filter with `global-state` expression

* pass `global-state` from `Style` to layers to expressions as parameter to constructor

* pass `global-state` when creating a feature filter

* remove `global-state` passed around in order to pass it to the `evaluate` function

* fix render tests for `is_supported_script`

* remove note that `global-state` is not supported in layout properties

* changelog

Author: melitele

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## main
 
 ### ✨ Features and improvements
+- Change the pathway for passing `global-state` object from `Style` to expression ([#6366](https://github.com/maplibre/maplibre-gl-js/pull/6366))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

package-lock.json

@@ -24,7 +24,7 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^2.0.4",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^23.3.0",
+    "@maplibre/maplibre-gl-style-spec": "^24.1.0",
     "@maplibre/vt-pbf": "^4.0.3",
     "@types/geojson": "^7946.0.16",
     "@types/geojson-vt": "3.2.5",

package.json

@@ -19,7 +19,6 @@ export type BucketParameters<Layer extends TypedStyleLayer> = {
     collisionBoxArray: CollisionBoxArray;
     sourceLayerIndex: number;
     sourceID: string;
-    globalState: Record<string, any>;
 };
 
 export type PopulateParameters = {

src/data/bucket.ts

@@ -49,7 +49,6 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
 export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> implements Bucket {
     index: number;
     zoom: number;
-    globalState: Record<string, any>;
     overscaling: number;
     layerIds: Array<string>;
     layers: Array<Layer>;
@@ -69,7 +68,6 @@ export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> im
 
     constructor(options: BucketParameters<Layer>) {
         this.zoom = options.zoom;
-        this.globalState = options.globalState;
         this.overscaling = options.overscaling;
         this.layers = options.layers;
         this.layerIds = this.layers.map(layer => layer.id);
@@ -108,7 +106,7 @@ export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> im
             const needGeometry = this.layers[0]._featureFilter.needGeometry;
             const evaluationFeature = toEvaluationFeature(feature, needGeometry);
 
-            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom, {globalState: this.globalState}), evaluationFeature, canonical)) continue;
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
 
             const sortKey = sortFeaturesByKey ?
                 circleSortKey.evaluate(evaluationFeature, {}, canonical) :
@@ -145,8 +143,7 @@ export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> im
     update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-            imagePositions,
-            globalState: this.globalState
+            imagePositions
         });
     }
 
@@ -235,7 +232,7 @@ export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> im
             }
         }
 
-        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions: {}, canonical, globalState: this.globalState});
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions: {}, canonical});
     }
 }
 

src/data/bucket/circle_bucket.ts

@@ -26,11 +26,11 @@ function createFillBucket({id, layout, paint, globalState, availableImages}: Cre
         type: 'fill',
         layout,
         paint
-    } as LayerSpecification);
-    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory, globalState} as EvaluationParameters,
+    } as LayerSpecification, globalState);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters,
         availableImages as Array<string>);
 
-    return new FillBucket({layers: [layer], globalState} as BucketParameters<FillStyleLayer>);
+    return new FillBucket({layers: [layer]} as BucketParameters<FillStyleLayer>);
 }
 
 describe('FillBucket', () => {

src/data/bucket/fill_bucket.test.ts

@@ -41,7 +41,6 @@ export class FillBucket implements Bucket {
     stateDependentLayers: Array<FillStyleLayer>;
     stateDependentLayerIds: Array<string>;
     patternFeatures: Array<BucketFeature>;
-    globalState: Record<string, any>;
 
     layoutVertexArray: FillLayoutArray;
     layoutVertexBuffer: VertexBuffer;
@@ -60,7 +59,6 @@ export class FillBucket implements Bucket {
 
     constructor(options: BucketParameters<FillStyleLayer>) {
         this.zoom = options.zoom;
-        this.globalState = options.globalState;
         this.overscaling = options.overscaling;
         this.layers = options.layers;
         this.layerIds = this.layers.map(layer => layer.id);
@@ -87,7 +85,7 @@ export class FillBucket implements Bucket {
             const needGeometry = this.layers[0]._featureFilter.needGeometry;
             const evaluationFeature = toEvaluationFeature(feature, needGeometry);
 
-            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom, {globalState: this.globalState}), evaluationFeature, canonical)) continue;
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
 
             const sortKey = sortFeaturesByKey ?
                 fillSortKey.evaluate(evaluationFeature, {}, canonical, options.availableImages) :
@@ -115,7 +113,7 @@ export class FillBucket implements Bucket {
             const {geometry, index, sourceLayerIndex} = bucketFeature;
 
             if (this.hasPattern) {
-                const patternFeature = addPatternDependencies('fill', this.layers, bucketFeature, {zoom: this.zoom, globalState: this.globalState}, options);
+                const patternFeature = addPatternDependencies('fill', this.layers, bucketFeature, {zoom: this.zoom}, options);
                 // pattern features are added only once the pattern is loaded into the image atlas
                 // so are stored during populate until later updated with positions by tile worker in addFeatures
                 this.patternFeatures.push(patternFeature);
@@ -133,8 +131,7 @@ export class FillBucket implements Bucket {
     }) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-            imagePositions,
-            globalState: this.globalState
+            imagePositions
         });
     }
 
@@ -195,7 +192,7 @@ export class FillBucket implements Bucket {
                 subdivided.indicesLineList,
             );
         }
-        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions, canonical, globalState: this.globalState});
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions, canonical});
     }
 }
 

src/data/bucket/fill_bucket.ts

@@ -14,11 +14,11 @@ function createFillExtrusionBucket({id, layout, paint, globalState, availableIma
         type: 'fill-extrusion',
         layout,
         paint
-    } as LayerSpecification);
-    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory, globalState} as EvaluationParameters,
+    } as LayerSpecification, globalState);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters,
         availableImages as Array<string>);
 
-    return new FillExtrusionBucket({layers: [layer], globalState} as BucketParameters<FillExtrusionStyleLayer>);
+    return new FillExtrusionBucket({layers: [layer]} as BucketParameters<FillExtrusionStyleLayer>);
 }
 
 describe('FillExtrusionBucket', () => {

src/data/bucket/fill_extrusion_bucket.test.ts

@@ -59,7 +59,6 @@ type CentroidAccumulator = {
 export class FillExtrusionBucket implements Bucket {
     index: number;
     zoom: number;
-    globalState: Record<string, any>;
     overscaling: number;
     layers: Array<FillExtrusionStyleLayer>;
     layerIds: Array<string>;
@@ -83,7 +82,6 @@ export class FillExtrusionBucket implements Bucket {
 
     constructor(options: BucketParameters<FillExtrusionStyleLayer>) {
         this.zoom = options.zoom;
-        this.globalState = options.globalState;
         this.overscaling = options.overscaling;
         this.layers = options.layers;
         this.layerIds = this.layers.map(layer => layer.id);
@@ -106,7 +104,7 @@ export class FillExtrusionBucket implements Bucket {
             const needGeometry = this.layers[0]._featureFilter.needGeometry;
             const evaluationFeature = toEvaluationFeature(feature, needGeometry);
 
-            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom, {globalState: this.globalState}), evaluationFeature, canonical)) continue;
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
 
             const bucketFeature: BucketFeature = {
                 id,
@@ -119,7 +117,7 @@ export class FillExtrusionBucket implements Bucket {
             };
 
             if (this.hasPattern) {
-                this.features.push(addPatternDependencies('fill-extrusion', this.layers, bucketFeature, {zoom: this.zoom, globalState: this.globalState}, options));
+                this.features.push(addPatternDependencies('fill-extrusion', this.layers, bucketFeature, {zoom: this.zoom}, options));
             } else {
                 this.addFeature(bucketFeature, bucketFeature.geometry, index, canonical, {}, options.subdivisionGranularity);
             }
@@ -138,8 +136,7 @@ export class FillExtrusionBucket implements Bucket {
     update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-            imagePositions,
-            globalState: this.globalState
+            imagePositions
         });
     }
 
@@ -190,7 +187,7 @@ export class FillExtrusionBucket implements Bucket {
             }
         }
 
-        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions, canonical, globalState: this.globalState});
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {imagePositions, canonical});
     }
 
     private processPolygon(

src/data/bucket/fill_extrusion_bucket.ts

@@ -27,11 +27,11 @@ function createLineBucket({id, layout, paint, globalState, availableImages}: Cre
         type: 'line',
         layout,
         paint
-    } as LayerSpecification);
-    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory, globalState} as EvaluationParameters,
+    } as LayerSpecification, globalState);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters,
         availableImages as Array<string>);
 
-    return new LineBucket({layers: [layer], globalState} as BucketParameters<LineStyleLayer>);
+    return new LineBucket({layers: [layer]} as BucketParameters<LineStyleLayer>);
 }
 
 describe('LineBucket', () => {