@mapwhit/tilerenderer 0.52.0 → 1.0.0

package/src/data/bucket/symbol_bucket.js

@@ -18,7 +18,6 @@ const {
   GlyphOffsetArray,
   SymbolLineVertexArray
 } = require('../array_types');
-const { default: Point } = require('@mapbox/point-geometry');
 const SegmentVector = require('../segment');
 const { ProgramConfigurationSet } = require('../program_configuration');
 const { TriangleIndexArray, LineIndexArray } = require('../index_array_type');
@@ -30,7 +29,6 @@ const mvt = require('@mapwhit/vector-tile');
 const vectorTileFeatureTypes = mvt.VectorTileFeature.types;
 const { verticalizedCharacterMap } = require('../../util/verticalize_punctuation');
 const { getSizeData } = require('../../symbol/symbol_size');
-const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
 const { Formatted } = require('@mapwhit/style-expressions');
 
@@ -108,8 +106,6 @@ class SymbolBuffers {
   }
 }
 
-register('SymbolBuffers', SymbolBuffers);
-
 class CollisionBuffers {
   constructor(LayoutArray, layoutAttributes, IndexArray) {
     this.layoutVertexArray = new LayoutArray();
@@ -138,8 +134,6 @@ class CollisionBuffers {
   }
 }
 
-register('CollisionBuffers', CollisionBuffers);
-
 /**
  * Unlike other buckets, which simply implement #addFeature with type-specific
  * logic for (essentially) triangulating feature geometries, SymbolBucket
@@ -191,7 +185,7 @@ class SymbolBucket {
     this.textSizeData = getSizeData(this.zoom, unevaluatedLayoutValues['text-size']);
     this.iconSizeData = getSizeData(this.zoom, unevaluatedLayoutValues['icon-size']);
 
-    const layout = this.layers[0].layout;
+    const layout = this.layers[0]._layout;
     const zOrderByViewportY = layout.get('symbol-z-order') === 'viewport-y';
     this.sortFeaturesByY =
       zOrderByViewportY &&
@@ -241,7 +235,7 @@ class SymbolBucket {
 
   populate(features, options) {
     const layer = this.layers[0];
-    const layout = layer.layout;
+    const layout = layer._layout;
 
     const textFont = layout.get('text-font');
     const textField = layout.get('text-field');
@@ -328,8 +322,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,76 +458,31 @@ class SymbolBucket {
       false
     );
 
-    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {});
-  }
-
-  _addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchorX, anchorY, extrude) {
-    collisionVertexArray.emplaceBack(0, 0);
-    return layoutVertexArray.emplaceBack(
-      // pos
-      point.x,
-      point.y,
-      // a_anchor_pos
-      anchorX,
-      anchorY,
-      // extrude
-      Math.round(extrude.x),
-      Math.round(extrude.y)
-    );
+    arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {
+      imagePositions: {},
+      globalState: this.globalState
+    });
   }
 
   addCollisionDebugVertices(x1, y1, x2, y2, arrays, boxAnchorPoint, symbolInstance, isCircle) {
-    const segment = arrays.segments.prepareSegment(4, arrays.layoutVertexArray, arrays.indexArray);
+    const { layoutVertexArray, collisionVertexArray, indexArray } = arrays;
+    const { anchorX, anchorY } = symbolInstance;
+
+    const segment = arrays.segments.prepareSegment(4, layoutVertexArray, indexArray);
     const index = segment.vertexLength;
 
-    const layoutVertexArray = arrays.layoutVertexArray;
-    const collisionVertexArray = arrays.collisionVertexArray;
-
-    const anchorX = symbolInstance.anchorX;
-    const anchorY = symbolInstance.anchorY;
-
-    this._addCollisionDebugVertex(
-      layoutVertexArray,
-      collisionVertexArray,
-      boxAnchorPoint,
-      anchorX,
-      anchorY,
-      new Point(x1, y1)
-    );
-    this._addCollisionDebugVertex(
-      layoutVertexArray,
-      collisionVertexArray,
-      boxAnchorPoint,
-      anchorX,
-      anchorY,
-      new Point(x2, y1)
-    );
-    this._addCollisionDebugVertex(
-      layoutVertexArray,
-      collisionVertexArray,
-      boxAnchorPoint,
-      anchorX,
-      anchorY,
-      new Point(x2, y2)
-    );
-    this._addCollisionDebugVertex(
-      layoutVertexArray,
-      collisionVertexArray,
-      boxAnchorPoint,
-      anchorX,
-      anchorY,
-      new Point(x1, y2)
-    );
+    addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, boxAnchorPoint, anchorX, anchorY, x1, y1);
+    addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, boxAnchorPoint, anchorX, anchorY, x2, y1);
+    addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, boxAnchorPoint, anchorX, anchorY, x2, y2);
+    addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, boxAnchorPoint, anchorX, anchorY, x1, y2);
 
     segment.vertexLength += 4;
     if (isCircle) {
-      const indexArray = arrays.indexArray;
       indexArray.emplaceBack(index, index + 1, index + 2);
       indexArray.emplaceBack(index, index + 2, index + 3);
 
       segment.primitiveLength += 2;
     } else {
-      const indexArray = arrays.indexArray;
       indexArray.emplaceBack(index, index + 1);
       indexArray.emplaceBack(index + 1, index + 2);
       indexArray.emplaceBack(index + 2, index + 3);
@@ -569,68 +524,16 @@ class SymbolBucket {
     }
   }
 
-  // These flat arrays are meant to be quicker to iterate over than the source
-  // CollisionBoxArray
-  _deserializeCollisionBoxesForSymbol(collisionBoxArray, textStartIndex, textEndIndex, iconStartIndex, iconEndIndex) {
-    const collisionArrays = {};
-    for (let k = textStartIndex; k < textEndIndex; k++) {
-      const box = collisionBoxArray.get(k);
-      if (box.radius === 0) {
-        collisionArrays.textBox = {
-          x1: box.x1,
-          y1: box.y1,
-          x2: box.x2,
-          y2: box.y2,
-          anchorPointX: box.anchorPointX,
-          anchorPointY: box.anchorPointY
-        };
-        collisionArrays.textFeatureIndex = box.featureIndex;
-        break; // Only one box allowed per instance
-      }
-      if (!collisionArrays.textCircles) {
-        collisionArrays.textCircles = [];
-        collisionArrays.textFeatureIndex = box.featureIndex;
-      }
-      const used = 1; // May be updated at collision detection time
-      collisionArrays.textCircles.push(
-        box.anchorPointX,
-        box.anchorPointY,
-        box.radius,
-        box.signedDistanceFromAnchor,
-        used
-      );
-    }
-    for (let k = iconStartIndex; k < iconEndIndex; k++) {
-      // An icon can only have one box now, so this indexing is a bit vestigial...
-      const box = collisionBoxArray.get(k);
-      if (box.radius === 0) {
-        collisionArrays.iconBox = {
-          x1: box.x1,
-          y1: box.y1,
-          x2: box.x2,
-          y2: box.y2,
-          anchorPointX: box.anchorPointX,
-          anchorPointY: box.anchorPointY
-        };
-        collisionArrays.iconFeatureIndex = box.featureIndex;
-        break; // Only one box allowed per instance
-      }
-    }
-    return collisionArrays;
-  }
-
   deserializeCollisionBoxes(collisionBoxArray) {
-    this.collisionArrays = [];
+    this.collisionArrays = new Array(this.symbolInstances.length);
     for (let i = 0; i < this.symbolInstances.length; i++) {
       const symbolInstance = this.symbolInstances.get(i);
-      this.collisionArrays.push(
-        this._deserializeCollisionBoxesForSymbol(
-          collisionBoxArray,
-          symbolInstance.textBoxStartIndex,
-          symbolInstance.textBoxEndIndex,
-          symbolInstance.iconBoxStartIndex,
-          symbolInstance.iconBoxEndIndex
-        )
+      this.collisionArrays[i] = deserializeCollisionBoxesForSymbol(
+        collisionBoxArray,
+        symbolInstance.textBoxStartIndex,
+        symbolInstance.textBoxEndIndex,
+        symbolInstance.iconBoxStartIndex,
+        symbolInstance.iconBoxEndIndex
       );
     }
   }
@@ -725,9 +628,76 @@ class SymbolBucket {
   }
 }
 
-register('SymbolBucket', SymbolBucket, {
-  omit: ['layers', 'collisionBoxArray', 'features', 'compareText']
-});
+function addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchorX, anchorY, extrudeX, extrudeY) {
+  collisionVertexArray.emplaceBack(0, 0);
+  return layoutVertexArray.emplaceBack(
+    // pos
+    point.x,
+    point.y,
+    // a_anchor_pos
+    anchorX,
+    anchorY,
+    // extrude
+    Math.round(extrudeX),
+    Math.round(extrudeY)
+  );
+}
+
+// These flat arrays are meant to be quicker to iterate over than the source
+// CollisionBoxArray
+function deserializeCollisionBoxesForSymbol(
+  collisionBoxArray,
+  textStartIndex,
+  textEndIndex,
+  iconStartIndex,
+  iconEndIndex
+) {
+  const collisionArrays = {};
+  for (let k = textStartIndex; k < textEndIndex; k++) {
+    const box = collisionBoxArray.get(k);
+    if (box.radius === 0) {
+      collisionArrays.textBox = {
+        x1: box.x1,
+        y1: box.y1,
+        x2: box.x2,
+        y2: box.y2,
+        anchorPointX: box.anchorPointX,
+        anchorPointY: box.anchorPointY
+      };
+      collisionArrays.textFeatureIndex = box.featureIndex;
+      break; // Only one box allowed per instance
+    }
+    if (!collisionArrays.textCircles) {
+      collisionArrays.textCircles = [];
+      collisionArrays.textFeatureIndex = box.featureIndex;
+    }
+    const used = 1; // May be updated at collision detection time
+    collisionArrays.textCircles.push(
+      box.anchorPointX,
+      box.anchorPointY,
+      box.radius,
+      box.signedDistanceFromAnchor,
+      used
+    );
+  }
+  for (let k = iconStartIndex; k < iconEndIndex; k++) {
+    // An icon can only have one box now, so this indexing is a bit vestigial...
+    const box = collisionBoxArray.get(k);
+    if (box.radius === 0) {
+      collisionArrays.iconBox = {
+        x1: box.x1,
+        y1: box.y1,
+        x2: box.x2,
+        y2: box.y2,
+        anchorPointX: box.anchorPointX,
+        anchorPointY: box.anchorPointY
+      };
+      collisionArrays.iconFeatureIndex = box.featureIndex;
+      break; // Only one box allowed per instance
+    }
+  }
+  return collisionArrays;
+}
 
 // this constant is based on the size of StructArray indexes used in a symbol
 // bucket--namely, glyphOffsetArrayStart

package/src/data/bucket.js

@@ -11,43 +11,48 @@
  * properties and the zoom level to populate the attributes needed for
  * data-driven styling.
  *
- * Buckets are designed to be built on a worker thread and then serialized and
- * transferred back to the main thread for rendering.  On the worker side, a
- * bucket's vertex, index, and attribute data is stored in `bucket.arrays:
- * ArrayGroup`.  When a bucket's data is serialized and sent back to the main
- * thread, is gets deserialized (using `new Bucket(serializedBucketData)`, with
- * the array data now stored in `bucket.buffers: BufferGroup`.  BufferGroups
- * hold the same data as ArrayGroups, but are tuned for consumption by WebGL.
+ * Buckets are designed to be built when tile is loaded and then converted (uploaded)
+ * to tune bucket's vertex, index, and attribute data for consumption by WebGL.
  *
  * @private
  */
 
-function deserialize(input, style) {
-  const output = {};
-
+// style may have changed between creating a bucket when tile was loaded and rendering it
+function updateBuckets(buckets, style) {
+  if (!style._changed) {
+    return;
+  }
   // Guard against the case where the map's style has been set to null while
   // this bucket has been parsing.
-  if (!style) return output;
+  if (!style) {
+    for (const bucket of buckets.values()) {
+      bucket.destroy();
+    }
+    buckets.clear();
+    return;
+  }
+
+  const updatedAlready = new Set();
+  for (const [id, bucket] of buckets) {
+    if (updatedAlready.has(id)) {
+      continue;
+    }
+    updatedAlready.add(id);
 
-  for (const bucket of input) {
     const layers = bucket.layerIds.map(id => style.getLayer(id)).filter(Boolean);
 
     if (layers.length === 0) {
+      bucket.destroy();
+      buckets.delete(id);
       continue;
     }
 
-    // look up StyleLayer objects from layer ids (since we don't
-    // want to waste time serializing/copying them from the worker)
+    // swap out the layers in the bucket with the current style layers
     bucket.layers = layers;
-    bucket.stateDependentLayers = layers.filter(l => l.isStateDependent());
-    for (const layer of layers) {
-      output[layer.id] = bucket;
-    }
+    bucket.stateDependentLayers = layers.filter(layer => layer.isStateDependent());
   }
-
-  return output;
 }
 
 module.exports = {
-  deserialize
+  updateBuckets
 };

package/src/data/dem_data.js

@@ -1,7 +1,6 @@
 const { RGBAImage } = require('../util/image');
 
 const warn = require('../util/warn');
-const { register } = require('../util/transfer_registry');
 
 // DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
 // data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially
@@ -121,6 +120,4 @@ class DEMData {
   }
 }
 
-register('DEMData', DEMData);
-
 module.exports = DEMData;

package/src/data/feature_index.js

@@ -3,11 +3,8 @@ const EXTENT = require('./extent');
 const featureFilter = require('../style-spec/feature_filter');
 const Grid = require('grid-index');
 const dictionaryCoder = require('../util/dictionary_coder');
-const vt = require('@mapwhit/vector-tile');
-const Protobuf = require('@mapwhit/pbf');
 const GeoJSONFeature = require('../util/vectortile_to_geojson');
 const { arraysIntersect } = require('../util/object');
-const { register } = require('../util/transfer_registry');
 const EvaluationParameters = require('../style/evaluation_parameters');
 const { polygonIntersectsBox } = require('../util/intersection_tests');
 
@@ -37,7 +34,7 @@ class FeatureIndex {
 
   loadVTLayers() {
     if (!this.vtLayers) {
-      this.vtLayers = new vt.VectorTile(new Protobuf(this.rawTileData)).layers;
+      this.vtLayers = this.vectorTile?.layers;
       this.sourceLayerCoder = dictionaryCoder(this.vtLayers ? Object.keys(this.vtLayers) : ['_geojsonTileLayer']);
     }
     return this.vtLayers;
@@ -153,7 +150,7 @@ class FeatureIndex {
         continue;
       }
 
-      const styleLayer = styleLayers[layerID];
+      const styleLayer = styleLayers.get(layerID);
       if (!styleLayer) continue;
 
       const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer);
@@ -163,7 +160,7 @@ class FeatureIndex {
       }
 
       const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
-      geojsonFeature.layer = styleLayer.serialize();
+      geojsonFeature.layer = styleLayer;
       const layerResult = (result[layerID] ??= []);
       layerResult.push({ featureIndex, feature: geojsonFeature, intersectionZ });
     }
@@ -192,8 +189,6 @@ class FeatureIndex {
   }
 }
 
-register('FeatureIndex', FeatureIndex, { omit: ['rawTileData', 'sourceLayerCoder'] });
-
 module.exports = FeatureIndex;
 
 function getBounds(geometry) {

package/src/data/program_configuration.js

@@ -1,6 +1,5 @@
 const { packUint8ToFloat } = require('../shaders/encode_attribute');
 const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
-const { register } = require('../util/transfer_registry');
 const { PossiblyEvaluatedPropertyValue } = require('../style/properties');
 const {
   StructArrayLayout1f4,
@@ -128,13 +127,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 +149,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 +223,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 +246,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 +330,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 +378,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.
@@ -486,9 +485,9 @@ class ProgramConfiguration {
     const self = new ProgramConfiguration();
     const keys = [];
 
-    for (const property in layer.paint._values) {
+    for (const property in layer._paint._values) {
       if (!filterProperties(property)) continue;
-      const value = layer.paint.get(property);
+      const value = layer._paint.get(property);
       if (
         !(value instanceof PossiblyEvaluatedPropertyValue) ||
         !supportsPropertyExpression(value.property.specification)
@@ -546,12 +545,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 +570,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];
@@ -586,9 +585,9 @@ class ProgramConfiguration {
           if (binder instanceof ConstantBinder || binder instanceof CrossFadedConstantBinder) continue;
           if (binder.expression.isStateDependent === true) {
             //AHM: Remove after https://github.com/mapbox/mapbox-gl-js/issues/6255
-            const value = layer.paint.get(property);
+            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 +686,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;
     }
   }
@@ -777,14 +776,6 @@ function layoutType(property, type, binderType) {
   return layoutException?.[binderType] || defaultLayouts[type][binderType];
 }
 
-register('ConstantBinder', ConstantBinder);
-register('CrossFadedConstantBinder', CrossFadedConstantBinder);
-register('SourceExpressionBinder', SourceExpressionBinder);
-register('CrossFadedCompositeBinder', CrossFadedCompositeBinder);
-register('CompositeExpressionBinder', CompositeExpressionBinder);
-register('ProgramConfiguration', ProgramConfiguration, { omit: ['_buffers'] });
-register('ProgramConfigurationSet', ProgramConfigurationSet);
-
 ProgramConfiguration.ProgramConfigurationSet = ProgramConfigurationSet;
 
 module.exports = ProgramConfiguration;

package/src/data/segment.js

@@ -1,7 +1,5 @@
 const warn = require('../util/warn');
 
-const { register } = require('../util/transfer_registry');
-
 class SegmentVector {
   constructor(segments = []) {
     this.segments = segments;
@@ -58,6 +56,4 @@ class SegmentVector {
  */
 SegmentVector.MAX_VERTEX_ARRAY_LENGTH = 2 ** 16 - 1;
 
-register('SegmentVector', SegmentVector);
-
 module.exports = SegmentVector;

package/src/render/draw_background.js

@@ -6,8 +6,8 @@ const { backgroundUniformValues, backgroundPatternUniformValues } = require('./p
 module.exports = drawBackground;
 
 function drawBackground(painter, sourceCache, layer) {
-  const color = layer.paint.get('background-color');
-  const opacity = layer.paint.get('background-opacity');
+  const color = layer._paint.get('background-color');
+  const opacity = layer._paint.get('background-opacity');
 
   if (opacity === 0) return;
 
@@ -15,7 +15,7 @@ function drawBackground(painter, sourceCache, layer) {
   const gl = context.gl;
   const transform = painter.transform;
   const tileSize = transform.tileSize;
-  const image = layer.paint.get('background-pattern');
+  const image = layer._paint.get('background-pattern');
   if (painter.isPatternMissing(image)) return;
 
   const pass =

package/src/render/draw_circle.js

@@ -8,9 +8,9 @@ module.exports = drawCircles;
 function drawCircles(painter, sourceCache, layer, coords) {
   if (painter.renderPass !== 'translucent') return;
 
-  const opacity = layer.paint.get('circle-opacity');
-  const strokeWidth = layer.paint.get('circle-stroke-width');
-  const strokeOpacity = layer.paint.get('circle-stroke-opacity');
+  const opacity = layer._paint.get('circle-opacity');
+  const strokeWidth = layer._paint.get('circle-stroke-width');
+  const strokeOpacity = layer._paint.get('circle-stroke-opacity');
 
   if (opacity.constantOr(1) === 0 && (strokeWidth.constantOr(1) === 0 || strokeOpacity.constantOr(1) === 0)) {
     return;
@@ -47,7 +47,7 @@ function drawCircles(painter, sourceCache, layer, coords) {
       bucket.layoutVertexBuffer,
       bucket.indexBuffer,
       bucket.segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );