@mapwhit/tilerenderer 0.52.0 → 0.52.1

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.51.1"
+  "version": "0.52.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "exports": {
     ".": "./src/index.js",
     "./worker": "./src/worker.js"

package/src/data/bucket/circle_bucket.js

@@ -50,7 +50,10 @@ class CircleBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -112,7 +115,10 @@ class CircleBucket {
       }
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {});
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions: {},
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/fill_bucket.js

@@ -68,7 +68,10 @@ class FillBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   addFeatures(options, imagePositions) {
@@ -161,7 +164,10 @@ class FillBucket {
       triangleSegment.primitiveLength += indices.length / 3;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/fill_extrusion_bucket.js

@@ -93,7 +93,10 @@ class FillExtrusionBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -229,7 +232,10 @@ class FillExtrusionBucket {
       segment.vertexLength += numVertices;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 }
 

package/src/data/bucket/line_bucket.js

@@ -123,7 +123,10 @@ class LineBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   addFeatures(options, imagePositions) {
@@ -498,7 +501,10 @@ class LineBucket {
       startOfLine = false;
     }
 
-    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   /**

package/src/data/bucket/symbol_bucket.js

@@ -328,8 +328,14 @@ class SymbolBucket {
 
   update(states, vtLayer, imagePositions) {
     if (!this.stateDependentLayers.length) return;
-    this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, imagePositions);
-    this.icon.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, imagePositions);
+    this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
+      imagePositions,
+      globalState: this.globalState
+    });
+    this.icon.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
+      imagePositions,
+      globalState: this.globalState
+    });
   }
 
   isEmpty() {
@@ -458,7 +464,10 @@ class SymbolBucket {
       false
     );
 
-    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {});
+    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {
+      imagePositions: {},
+      globalState: this.globalState
+    });
   }
 
   _addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchorX, anchorY, extrude) {

package/src/data/program_configuration.js

@@ -128,13 +128,13 @@ class SourceExpressionBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(newLength, feature, imagePositions) {
+  populatePaintArray(newLength, feature, options) {
     const paintArray = this.paintVertexArray;
 
     const start = paintArray.length;
     paintArray.reserve(newLength);
 
-    const value = this.expression.evaluate(new EvaluationParameters(0), feature, {});
+    const value = this.expression.evaluate(new EvaluationParameters(0, options), feature, {});
 
     if (this.type === 'color') {
       const color = packColor(value);
@@ -150,9 +150,9 @@ class SourceExpressionBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState, imagePositions) {
+  updatePaintArray(start, end, feature, featureState, options) {
     const paintArray = this.paintVertexArray;
-    const value = this.expression.evaluate({ zoom: 0 }, feature, featureState);
+    const value = this.expression.evaluate(new EvaluationParameters(0, options), feature, featureState);
 
     if (this.type === 'color') {
       const color = packColor(value);
@@ -224,14 +224,14 @@ class CompositeExpressionBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(newLength, feature) {
+  populatePaintArray(newLength, feature, options) {
     const paintArray = this.paintVertexArray;
 
     const start = paintArray.length;
     paintArray.reserve(newLength);
 
-    const min = this.expression.evaluate(new EvaluationParameters(this.zoom), feature, {});
-    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1), feature, {});
+    const min = this.expression.evaluate(new EvaluationParameters(this.zoom, options), feature, {});
+    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1, options), feature, {});
 
     if (this.type === 'color') {
       const minColor = packColor(min);
@@ -247,11 +247,11 @@ class CompositeExpressionBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState) {
+  updatePaintArray(start, end, feature, featureState, options) {
     const paintArray = this.paintVertexArray;
 
-    const min = this.expression.evaluate({ zoom: this.zoom }, feature, featureState);
-    const max = this.expression.evaluate({ zoom: this.zoom + 1 }, feature, featureState);
+    const min = this.expression.evaluate(new EvaluationParameters(this.zoom, options), feature, featureState);
+    const max = this.expression.evaluate(new EvaluationParameters(this.zoom + 1, options), feature, featureState);
 
     if (this.type === 'color') {
       const minColor = packColor(min);
@@ -331,7 +331,7 @@ class CrossFadedCompositeBinder {
 
   setConstantPatternPositions() {}
 
-  populatePaintArray(length, feature, imagePositions) {
+  populatePaintArray(length, feature, { imagePositions }) {
     // We populate two paint arrays because, for cross-faded properties, we don't know which direction
     // we're cross-fading to at layout time. In order to keep vertex attributes to a minimum and not pass
     // unnecessary vertex data to the shaders, we determine which to upload at draw time.
@@ -379,7 +379,7 @@ class CrossFadedCompositeBinder {
     }
   }
 
-  updatePaintArray(start, end, feature, featureState, imagePositions) {
+  updatePaintArray(start, end, feature, featureState, { imagePositions }) {
     // We populate two paint arrays because, for cross-faded properties, we don't know which direction
     // we're cross-fading to at layout time. In order to keep vertex attributes to a minimum and not pass
     // unnecessary vertex data to the shaders, we determine which to upload at draw time.
@@ -546,12 +546,12 @@ class ProgramConfiguration {
     return self;
   }
 
-  populatePaintArrays(newLength, feature, index, imagePositions) {
+  populatePaintArrays(newLength, feature, index, options) {
     for (const property in this.binders) {
       const binder = this.binders[property];
-      binder.populatePaintArray(newLength, feature, imagePositions);
+      binder.populatePaintArray(newLength, feature, options);
     }
-    if (feature.id) {
+    if (feature.id !== undefined) {
       const featureId = String(feature.id);
       this._idMap[featureId] = this._idMap[featureId] || [];
       this._idMap[featureId].push({
@@ -571,7 +571,7 @@ class ProgramConfiguration {
     }
   }
 
-  updatePaintArrays(featureStates, vtLayer, layer, imagePositions) {
+  updatePaintArrays(featureStates, vtLayer, layer, options) {
     let dirty = false;
     for (const id in featureStates) {
       const posArray = this._idMap[id];
@@ -588,7 +588,7 @@ class ProgramConfiguration {
             //AHM: Remove after https://github.com/mapbox/mapbox-gl-js/issues/6255
             const value = layer.paint.get(property);
             binder.expression = value.value;
-            binder.updatePaintArray(pos.start, pos.end, feature, featureState, imagePositions);
+            binder.updatePaintArray(pos.start, pos.end, feature, featureState, options);
             dirty = true;
           }
         }
@@ -687,17 +687,17 @@ class ProgramConfigurationSet {
     this.needsUpload = false;
   }
 
-  populatePaintArrays(length, feature, index, imagePositions) {
+  populatePaintArrays(length, feature, index, options) {
     for (const key in this.programConfigurations) {
-      this.programConfigurations[key].populatePaintArrays(length, feature, index, imagePositions);
+      this.programConfigurations[key].populatePaintArrays(length, feature, index, options);
     }
     this.needsUpload = true;
   }
 
-  updatePaintArrays(featureStates, vtLayer, layers, imagePositions) {
+  updatePaintArrays(featureStates, vtLayer, layers, options) {
     for (const layer of layers) {
       this.needsUpload =
-        this.programConfigurations[layer.id].updatePaintArrays(featureStates, vtLayer, layer, imagePositions) ||
+        this.programConfigurations[layer.id].updatePaintArrays(featureStates, vtLayer, layer, options) ||
         this.needsUpload;
     }
   }

package/src/source/worker_tile.js

@@ -82,7 +82,7 @@ class WorkerTile {
         if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
         if (layer.visibility === 'none') continue;
 
-        recalculateLayers(family, this.zoom, { globalState: this.globalState });
+        recalculateLayers(family, this.zoom, this.globalState);
 
         const bucket = (buckets[layer.id] = layer.createBucket({
           index: featureIndex.bucketLayerIDs.length,
@@ -116,7 +116,7 @@ class WorkerTile {
     for (const key in buckets) {
       const bucket = buckets[key];
       if (bucket instanceof SymbolBucket) {
-        recalculateLayers(bucket.layers, this.zoom, { globalState: this.globalState });
+        recalculateLayers(bucket.layers, this.zoom, this.globalState);
         performSymbolLayout(
           bucket,
           glyphMap,
@@ -129,7 +129,7 @@ class WorkerTile {
         bucket.hasPattern &&
         (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
       ) {
-        recalculateLayers(bucket.layers, this.zoom, { globalState: this.globalState });
+        recalculateLayers(bucket.layers, this.zoom, this.globalState);
         bucket.addFeatures(options, imageAtlas.patternPositions);
       }
     }
@@ -145,9 +145,9 @@ class WorkerTile {
   }
 }
 
-function recalculateLayers(layers, zoom, options) {
+function recalculateLayers(layers, zoom, globalState) {
   // Layers are shared and may have been used by a WorkerTile with a different zoom.
-  const parameters = new EvaluationParameters(zoom, options);
+  const parameters = new EvaluationParameters(zoom, { globalState });
   for (const layer of layers) {
     layer.recalculate(parameters);
   }

package/src/style/style.js

@@ -90,14 +90,7 @@ class Style extends Evented {
 
     this._globalState[name] = newValue;
 
-    const sourceIdsToReload = this._findGlobalStateAffectedSources([name]);
-
-    for (const id in this.sourceCaches) {
-      if (sourceIdsToReload.has(id)) {
-        this._reloadSource(id);
-        this._changed = true;
-      }
-    }
+    this._applyGlobalStateChanges([name]);
   }
 
   getGlobalState() {
@@ -118,23 +111,17 @@ class Style extends Evented {
       }
     }
 
-    const sourceIdsToReload = this._findGlobalStateAffectedSources(changedGlobalStateRefs);
-
-    for (const id in this.sourceCaches) {
-      if (sourceIdsToReload.has(id)) {
-        this._reloadSource(id);
-        this._changed = true;
-      }
-    }
+    this._applyGlobalStateChanges(changedGlobalStateRefs);
   }
 
   /**
-   * Find all sources that are affected by the global state changes.
-   * For example, if a layer filter uses global-state expression, this function will return the source id of that layer.
+   *  * Find all sources that are affected by the global state changes and reload them.
+   * Find all paint properties that are affected by the global state changes and update them.
+   * For example, if a layer filter uses global-state expression, this function will find the source id of that layer.
    */
-  _findGlobalStateAffectedSources(globalStateRefs) {
+  _applyGlobalStateChanges(globalStateRefs) {
     if (globalStateRefs.length === 0) {
-      return new Set();
+      return;
     }
 
     const sourceIdsToReload = new Set();
@@ -142,15 +129,26 @@ class Style extends Evented {
     for (const layerId in this._layers) {
       const layer = this._layers[layerId];
       const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
+      const paintAffectingGlobalStateRefs = layer.getPaintAffectingGlobalStateRefs();
 
       for (const ref of globalStateRefs) {
         if (layoutAffectingGlobalStateRefs.has(ref)) {
           sourceIdsToReload.add(layer.source);
         }
+        if (paintAffectingGlobalStateRefs.has(ref)) {
+          for (const { name, value } of paintAffectingGlobalStateRefs.get(ref)) {
+            this._updatePaintProperty(layer, name, value);
+          }
+        }
       }
     }
 
-    return sourceIdsToReload;
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
   }
 
   loadJSON(json) {
@@ -682,13 +680,17 @@ class Style extends Evented {
 
     if (deepEqual(layer.getPaintProperty(name), value)) return;
 
+    this._updatePaintProperty(layer, name, value);
+  }
+
+  _updatePaintProperty(layer, name, value) {
     const requiresRelayout = layer.setPaintProperty(name, value);
     if (requiresRelayout) {
       this._updateLayer(layer);
     }
 
     this._changed = true;
-    this._updatedPaintProps[layerId] = true;
+    this._updatedPaintProps[layer.id] = true;
   }
 
   getPaintProperty(layer, name) {

package/src/style/style_layer.js

@@ -87,6 +87,29 @@ class StyleLayer extends Evented {
     return globalStateRefs;
   }
 
+  /**
+   * Get list of global state references that are used within paint properties.
+   * This is used to determine if layer needs to be repainted when global state property changes.
+   *
+   */
+  getPaintAffectingGlobalStateRefs() {
+    const globalStateRefs = new Map();
+
+    if (this._transitionablePaint) {
+      for (const propertyName in this._transitionablePaint._values) {
+        const value = this._transitionablePaint._values[propertyName].value;
+
+        for (const globalStateRef of value.getGlobalStateRefs()) {
+          const properties = globalStateRefs.get(globalStateRef) ?? [];
+          properties.push({ name: propertyName, value: value.value });
+          globalStateRefs.set(globalStateRef, properties);
+        }
+      }
+    }
+
+    return globalStateRefs;
+  }
+
   setLayoutProperty(name, value) {
     if (name === 'visibility') {
       this.visibility = value === 'none' ? value : 'visible';

package/src/ui/map.js

@@ -205,14 +205,13 @@ class Map extends Camera {
    * Sets a global state property that can be retrieved with the [`global-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#global-state).
    * If the value is null, it resets the property to its default value defined in the [`state` style property](https://maplibre.org/maplibre-style-spec/root/#state).
    *
-   * Note that changing `global-state` values defined in layout properties is not supported, and will be ignored.
-   *
    * @param propertyName - The name of the state property to set.
    * @param value - The value of the state property to set.
    */
   setGlobalStateProperty(propertyName, value) {
-    this.style.setGlobalStateProperty(propertyName, value);
-    return this._update(true);
+    if (!this.style.setGlobalStateProperty(propertyName, value)) {
+      return this._update(true);
+    }
   }
 
   /**