Evaluate feature-state dependent layer IDs on bucket creation instead…

… of deserialize

src/data/bucket.js

@@ -70,7 +70,7 @@ export interface Bucket {
     hasPattern: boolean;
     +layers: Array<any>;
     +stateDependentLayers: Array<any>;
-
+    +stateDependentLayerIds: Array<string>;
     populate(features: Array<IndexedFeature>, options: PopulateParameters): void;
     update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[string]: ImagePosition}): void;
     isEmpty(): boolean;
@@ -107,7 +107,9 @@ export function deserialize(input: Array<Bucket>, style: Style): {[string]: Buck
         // look up StyleLayer objects from layer ids (since we don't
         // want to waste time serializing/copying them from the worker)
         (bucket: any).layers = layers;
-        (bucket: any).stateDependentLayers = layers.filter((l) => l.isStateDependent());
+        if ((bucket: any).stateDependentLayerIds) {
+            (bucket: any).stateDependentLayers = (bucket: any).stateDependentLayerIds.map((lId) => layers.find((l) => l.id == lId));
+        }
         for (const layer of layers) {
             output[layer.id] = bucket;
         }

src/data/bucket/circle_bucket.js

@@ -72,6 +72,8 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
         this.indexArray = new TriangleIndexArray();
         this.segments = new SegmentVector();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
+        this.stateDependentLayerIds = this.layers.filter( (l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {

src/data/bucket/fill_bucket.js

@@ -68,6 +68,8 @@ class FillBucket implements Bucket {
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
         this.segments2 = new SegmentVector();
+        this.stateDependentLayerIds = this.layers.filter( (l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {

src/data/bucket/fill_extrusion_bucket.js

@@ -82,6 +82,8 @@ class FillExtrusionBucket implements Bucket {
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
+        this.stateDependentLayerIds = this.layers.filter( (l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {

src/data/bucket/line_bucket.js

@@ -125,6 +125,8 @@ class LineBucket implements Bucket {
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
+
+        this.stateDependentLayerIds = this.layers.filter( (l) => l.isStateDependent()).map((l) => l.id);
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {

src/data/bucket/symbol_bucket.js

@@ -300,6 +300,8 @@ class SymbolBucket implements Bucket {
         this.sortFeaturesByY = zOrderByViewportY && (layout.get('text-allow-overlap') || layout.get('icon-allow-overlap') ||
             layout.get('text-ignore-placement') || layout.get('icon-ignore-placement'));
 
+        this.stateDependentLayerIds = this.layers.filter( (l) => l.isStateDependent()).map((l) => l.id);
+
         this.sourceID = options.sourceID;
     }