@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/data/bucket/symbol_bucket.js

@@ -1,48 +1,26 @@
-const {
-  symbolLayoutAttributes,
-  collisionVertexAttributes,
-  collisionBoxLayout,
-  collisionCircleLayout,
-  dynamicLayoutAttributes
-} = require('./symbol_attributes');
-
-const {
-  SymbolLayoutArray,
-  SymbolDynamicLayoutArray,
-  SymbolOpacityArray,
+import { Formatted } from '@mapwhit/style-expressions';
+import { VectorTileFeature } from '@mapwhit/vector-tile';
+import EvaluationParameters from '../../style/evaluation_parameters.js';
+import mergeLines from '../../symbol/mergelines.js';
+import { getSizeData } from '../../symbol/symbol_size.js';
+import transformText from '../../symbol/transform_text.js';
+import { allowsVerticalWritingMode } from '../../util/script_detection.js';
+import { verticalizedCharacterMap } from '../../util/verticalize_punctuation.js';
+import {
   CollisionBoxLayoutArray,
   CollisionCircleLayoutArray,
-  CollisionVertexArray,
-  PlacedSymbolArray,
-  SymbolInstanceArray,
   GlyphOffsetArray,
+  SymbolInstanceArray,
   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');
-const transformText = require('../../symbol/transform_text');
-const mergeLines = require('../../symbol/mergelines');
-const { allowsVerticalWritingMode } = require('../../util/script_detection');
-const loadGeometry = require('../load_geometry');
-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');
-
-// Opacity arrays are frequently updated but don't contain a lot of information, so we pack them
-// tight. Each Uint32 is actually four duplicate Uint8s for the four corners of a glyph
-// 7 bits are for the current opacity, and the lowest bit is the target opacity
-
-// actually defined in symbol_attributes.js
-// const placementOpacityAttributes = [
-//     { name: 'a_fade_opacity', components: 1, type: 'Uint32' }
-// ];
-const shaderOpacityAttributes = [{ name: 'a_fade_opacity', components: 1, type: 'Uint8', offset: 0 }];
+} from '../array_types.js';
+import { LineIndexArray, TriangleIndexArray } from '../index_array_type.js';
+import loadGeometry from '../load_geometry.js';
+import { ProgramConfigurationSet } from '../program_configuration.js';
+import { collisionBoxLayout, collisionCircleLayout, symbolLayoutAttributes } from './symbol_attributes.js';
+import SymbolBuffers from './symbol_buffers.js';
+import CollisionBuffers from './symbol_collision_buffers.js';
+
+const vectorTileFeatureTypes = VectorTileFeature.types;
 
 function addVertex(array, anchorX, anchorY, ox, oy, tx, ty, sizeVertex) {
   array.emplaceBack(
@@ -60,86 +38,13 @@ function addVertex(array, anchorX, anchorY, ox, oy, tx, ty, sizeVertex) {
   );
 }
 
-function addDynamicAttributes(dynamicLayoutVertexArray, p, angle) {
+export function addDynamicAttributes(dynamicLayoutVertexArray, p, angle) {
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
 }
 
-class SymbolBuffers {
-  constructor(programConfigurations) {
-    this.layoutVertexArray = new SymbolLayoutArray();
-    this.indexArray = new TriangleIndexArray();
-    this.programConfigurations = programConfigurations;
-    this.segments = new SegmentVector();
-    this.dynamicLayoutVertexArray = new SymbolDynamicLayoutArray();
-    this.opacityVertexArray = new SymbolOpacityArray();
-    this.placedSymbolArray = new PlacedSymbolArray();
-  }
-
-  upload(context, dynamicIndexBuffer, upload, update) {
-    if (upload) {
-      this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, symbolLayoutAttributes.members);
-      this.indexBuffer = context.createIndexBuffer(this.indexArray, dynamicIndexBuffer);
-      this.dynamicLayoutVertexBuffer = context.createVertexBuffer(
-        this.dynamicLayoutVertexArray,
-        dynamicLayoutAttributes.members,
-        true
-      );
-      this.opacityVertexBuffer = context.createVertexBuffer(this.opacityVertexArray, shaderOpacityAttributes, true);
-      // This is a performance hack so that we can write to opacityVertexArray with uint32s
-      // even though the shaders read uint8s
-      this.opacityVertexBuffer.itemSize = 1;
-    }
-    if (upload || update) {
-      this.programConfigurations.upload(context);
-    }
-  }
-
-  destroy() {
-    if (!this.layoutVertexBuffer) return;
-    this.layoutVertexBuffer.destroy();
-    this.indexBuffer.destroy();
-    this.programConfigurations.destroy();
-    this.segments.destroy();
-    this.dynamicLayoutVertexBuffer.destroy();
-    this.opacityVertexBuffer.destroy();
-  }
-}
-
-register('SymbolBuffers', SymbolBuffers);
-
-class CollisionBuffers {
-  constructor(LayoutArray, layoutAttributes, IndexArray) {
-    this.layoutVertexArray = new LayoutArray();
-    this.layoutAttributes = layoutAttributes;
-    this.indexArray = new IndexArray();
-    this.segments = new SegmentVector();
-    this.collisionVertexArray = new CollisionVertexArray();
-  }
-
-  upload(context) {
-    this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, this.layoutAttributes);
-    this.indexBuffer = context.createIndexBuffer(this.indexArray);
-    this.collisionVertexBuffer = context.createVertexBuffer(
-      this.collisionVertexArray,
-      collisionVertexAttributes.members,
-      true
-    );
-  }
-
-  destroy() {
-    if (!this.layoutVertexBuffer) return;
-    this.layoutVertexBuffer.destroy();
-    this.indexBuffer.destroy();
-    this.segments.destroy();
-    this.collisionVertexBuffer.destroy();
-  }
-}
-
-register('CollisionBuffers', CollisionBuffers);
-
 /**
  * Unlike other buckets, which simply implement #addFeature with type-specific
  * logic for (essentially) triangulating feature geometries, SymbolBucket
@@ -172,14 +77,13 @@ register('CollisionBuffers', CollisionBuffers);
  *
  * @private
  */
-class SymbolBucket {
+export default class SymbolBucket {
   constructor(options) {
     this.collisionBoxArray = options.collisionBoxArray;
     this.zoom = options.zoom;
     this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
-    this.layerIds = this.layers.map(layer => layer.id);
     this.index = options.index;
     this.pixelRatio = options.pixelRatio;
     this.sourceLayerIndex = options.sourceLayerIndex;
@@ -191,7 +95,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 &&
@@ -227,21 +131,9 @@ class SymbolBucket {
     this.symbolInstances = new SymbolInstanceArray();
   }
 
-  calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode) {
-    for (let i = 0; i < text.length; i++) {
-      stack[text.charCodeAt(i)] = true;
-      if (textAlongLine && doesAllowVerticalWritingMode) {
-        const verticalChar = verticalizedCharacterMap[text.charAt(i)];
-        if (verticalChar) {
-          stack[verticalChar.charCodeAt(0)] = true;
-        }
-      }
-    }
-  }
-
   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');
@@ -249,7 +141,7 @@ class SymbolBucket {
     const hasText =
       (textField.value.kind !== 'constant' || textField.value.value.toString().length > 0) &&
       (textFont.value.kind !== 'constant' || textFont.value.value.length > 0);
-    const hasIcon = iconImage.value.kind !== 'constant' || (iconImage.value.value && iconImage.value.value.length > 0);
+    const hasIcon = iconImage.value.kind !== 'constant' || iconImage.value.value?.length > 0;
 
     this.features = [];
 
@@ -314,7 +206,7 @@ class SymbolBucket {
           const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text.toString());
           const sectionFont = section.fontStack || fontStack;
           const sectionStack = (stacks[sectionFont] = stacks[sectionFont] || {});
-          this.calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
+          calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
         }
       }
     }
@@ -327,7 +219,9 @@ class SymbolBucket {
   }
 
   update(states, vtLayer, imagePositions) {
-    if (!this.stateDependentLayers.length) return;
+    if (!this.stateDependentLayers.length) {
+      return;
+    }
     this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
       imagePositions,
       globalState: this.globalState
@@ -404,52 +298,36 @@ class SymbolBucket {
     lineStartIndex,
     lineLength
   ) {
-    const indexArray = arrays.indexArray;
-    const layoutVertexArray = arrays.layoutVertexArray;
-    const dynamicLayoutVertexArray = arrays.dynamicLayoutVertexArray;
-
-    const segment = arrays.segments.prepareSegment(4 * quads.length, arrays.layoutVertexArray, arrays.indexArray);
+    const { indexArray, layoutVertexArray, dynamicLayoutVertexArray, segments } = arrays;
+    const segment = segments.prepareSegment(4 * quads.length, layoutVertexArray, indexArray);
     const glyphOffsetArrayStart = this.glyphOffsetArray.length;
     const vertexStartIndex = segment.vertexLength;
+    const { x: lax, y: lay } = labelAnchor;
 
-    for (const symbol of quads) {
-      const tl = symbol.tl;
-      const tr = symbol.tr;
-      const bl = symbol.bl;
-      const br = symbol.br;
-      const tex = symbol.tex;
-
-      const index = segment.vertexLength;
+    for (const { tl, tr, bl, br, tex, glyphOffset } of quads) {
+      const y = glyphOffset[1];
 
-      const y = symbol.glyphOffset[1];
-      addVertex(layoutVertexArray, labelAnchor.x, labelAnchor.y, tl.x, y + tl.y, tex.x, tex.y, sizeVertex);
-      addVertex(layoutVertexArray, labelAnchor.x, labelAnchor.y, tr.x, y + tr.y, tex.x + tex.w, tex.y, sizeVertex);
-      addVertex(layoutVertexArray, labelAnchor.x, labelAnchor.y, bl.x, y + bl.y, tex.x, tex.y + tex.h, sizeVertex);
-      addVertex(
-        layoutVertexArray,
-        labelAnchor.x,
-        labelAnchor.y,
-        br.x,
-        y + br.y,
-        tex.x + tex.w,
-        tex.y + tex.h,
-        sizeVertex
-      );
+      addVertex(layoutVertexArray, lax, lay, tl.x, y + tl.y, tex.x, tex.y, sizeVertex);
+      addVertex(layoutVertexArray, lax, lay, tr.x, y + tr.y, tex.x + tex.w, tex.y, sizeVertex);
+      addVertex(layoutVertexArray, lax, lay, bl.x, y + bl.y, tex.x, tex.y + tex.h, sizeVertex);
+      addVertex(layoutVertexArray, lax, lay, br.x, y + br.y, tex.x + tex.w, tex.y + tex.h, sizeVertex);
 
       addDynamicAttributes(dynamicLayoutVertexArray, labelAnchor, 0);
 
+      const index = segment.vertexLength;
+
       indexArray.emplaceBack(index, index + 1, index + 2);
       indexArray.emplaceBack(index + 1, index + 2, index + 3);
 
       segment.vertexLength += 4;
       segment.primitiveLength += 2;
 
-      this.glyphOffsetArray.emplaceBack(symbol.glyphOffset[0]);
+      this.glyphOffsetArray.emplaceBack(glyphOffset[0]);
     }
 
     arrays.placedSymbolArray.emplaceBack(
-      labelAnchor.x,
-      labelAnchor.y,
+      lax,
+      lay,
       glyphOffsetArrayStart,
       this.glyphOffsetArray.length - glyphOffsetArrayStart,
       vertexStartIndex,
@@ -470,73 +348,25 @@ class SymbolBucket {
     });
   }
 
-  _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)
-    );
-  }
-
   addCollisionDebugVertices(x1, y1, x2, y2, arrays, boxAnchorPoint, symbolInstance, isCircle) {
-    const segment = arrays.segments.prepareSegment(4, arrays.layoutVertexArray, arrays.indexArray);
-    const index = segment.vertexLength;
-
-    const layoutVertexArray = arrays.layoutVertexArray;
-    const collisionVertexArray = arrays.collisionVertexArray;
+    const { layoutVertexArray, collisionVertexArray, indexArray } = arrays;
+    const { anchorX, anchorY } = symbolInstance;
 
-    const anchorX = symbolInstance.anchorX;
-    const anchorY = symbolInstance.anchorY;
+    const segment = arrays.segments.prepareSegment(4, layoutVertexArray, indexArray);
+    const index = segment.vertexLength;
 
-    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);
@@ -548,22 +378,18 @@ class SymbolBucket {
 
   addDebugCollisionBoxes(startIndex, endIndex, symbolInstance) {
     for (let b = startIndex; b < endIndex; b++) {
-      const box = this.collisionBoxArray.get(b);
-      const x1 = box.x1;
-      const y1 = box.y1;
-      const x2 = box.x2;
-      const y2 = box.y2;
+      const { x1, y1, x2, y2, radius, anchorPoint } = this.collisionBoxArray.get(b);
 
       // If the radius > 0, this collision box is actually a circle
       // The data we add to the buffers is exactly the same, but we'll render with a different shader.
-      const isCircle = box.radius > 0;
+      const isCircle = radius > 0;
       this.addCollisionDebugVertices(
         x1,
         y1,
         x2,
         y2,
         isCircle ? this.collisionCircle : this.collisionBox,
-        box.anchorPoint,
+        anchorPoint,
         symbolInstance,
         isCircle
       );
@@ -578,68 +404,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
       );
     }
   }
@@ -671,72 +445,141 @@ class SymbolBucket {
   }
 
   sortFeatures(angle) {
-    if (!this.sortFeaturesByY) return;
+    if (!this.sortFeaturesByY) {
+      return;
+    }
 
-    if (this.sortedAngle === angle) return;
+    if (this.sortedAngle === angle) {
+      return;
+    }
     this.sortedAngle = angle;
 
     // The current approach to sorting doesn't sort across segments so don't try.
     // Sorting within segments separately seemed not to be worth the complexity.
-    if (this.text.segments.get().length > 1 || this.icon.segments.get().length > 1) return;
+    if (this.text.segments.get().length > 1 || this.icon.segments.get().length > 1) {
+      return;
+    }
 
     // If the symbols are allowed to overlap sort them by their vertical screen position.
     // The index array buffer is rewritten to reference the (unchanged) vertices in the
     // sorted order.
 
     // To avoid sorting the actual symbolInstance array we sort an array of indexes.
-    const symbolInstanceIndexes = [];
-    for (let i = 0; i < this.symbolInstances.length; i++) {
-      symbolInstanceIndexes.push(i);
-    }
-
+    const slen = this.symbolInstances.length;
+    const symbolInstanceIndexes = new Array(slen);
+    const rotatedYs = new Array(slen);
+    const featureIndexes = new Array(slen);
     const sin = Math.sin(angle);
     const cos = Math.cos(angle);
-
-    const rotatedYs = [];
-    const featureIndexes = [];
-    for (let i = 0; i < this.symbolInstances.length; i++) {
-      const symbolInstance = this.symbolInstances.get(i);
-      rotatedYs.push(Math.round(sin * symbolInstance.anchorX + cos * symbolInstance.anchorY) | 0);
-      featureIndexes.push(symbolInstance.featureIndex);
+    for (let i = 0; i < slen; i++) {
+      symbolInstanceIndexes[i] = i;
+      const { anchorX, anchorY, featureIndex } = this.symbolInstances.get(i);
+      rotatedYs[i] = Math.round(sin * anchorX + cos * anchorY) | 0;
+      featureIndexes[i] = featureIndex;
     }
 
-    symbolInstanceIndexes.sort((aIndex, bIndex) => {
-      return rotatedYs[aIndex] - rotatedYs[bIndex] || featureIndexes[bIndex] - featureIndexes[aIndex];
-    });
+    symbolInstanceIndexes.sort((a, b) => rotatedYs[a] - rotatedYs[b] || featureIndexes[b] - featureIndexes[a]);
 
     this.text.indexArray.clear();
     this.icon.indexArray.clear();
 
-    this.featureSortOrder = [];
+    this.featureSortOrder = new Array(slen);
 
-    for (const i of symbolInstanceIndexes) {
-      const symbolInstance = this.symbolInstances.get(i);
-      this.featureSortOrder.push(symbolInstance.featureIndex);
+    for (let i = 0; i < slen; i++) {
+      const index = symbolInstanceIndexes[i];
+      const { featureIndex, horizontalPlacedTextSymbolIndex, verticalPlacedTextSymbolIndex } =
+        this.symbolInstances.get(index);
+      this.featureSortOrder[i] = featureIndex;
 
-      if (symbolInstance.horizontalPlacedTextSymbolIndex >= 0) {
-        this.addIndicesForPlacedTextSymbol(symbolInstance.horizontalPlacedTextSymbolIndex);
+      if (horizontalPlacedTextSymbolIndex >= 0) {
+        this.addIndicesForPlacedTextSymbol(horizontalPlacedTextSymbolIndex);
       }
-      if (symbolInstance.verticalPlacedTextSymbolIndex >= 0) {
-        this.addIndicesForPlacedTextSymbol(symbolInstance.verticalPlacedTextSymbolIndex);
+      if (verticalPlacedTextSymbolIndex >= 0) {
+        this.addIndicesForPlacedTextSymbol(verticalPlacedTextSymbolIndex);
       }
 
-      const placedIcon = this.icon.placedSymbolArray.get(i);
-      if (placedIcon.numGlyphs) {
-        const vertexIndex = placedIcon.vertexStartIndex;
+      const { numGlyphs, vertexStartIndex: vertexIndex } = this.icon.placedSymbolArray.get(index);
+      if (numGlyphs) {
         this.icon.indexArray.emplaceBack(vertexIndex, vertexIndex + 1, vertexIndex + 2);
         this.icon.indexArray.emplaceBack(vertexIndex + 1, vertexIndex + 2, vertexIndex + 3);
       }
     }
 
-    if (this.text.indexBuffer) this.text.indexBuffer.updateData(this.text.indexArray);
-    if (this.icon.indexBuffer) this.icon.indexBuffer.updateData(this.icon.indexArray);
+    if (this.text.indexBuffer) {
+      this.text.indexBuffer.updateData(this.text.indexArray);
+    }
+    if (this.icon.indexBuffer) {
+      this.icon.indexBuffer.updateData(this.icon.indexArray);
+    }
   }
 }
 
-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 { x1, y1, x2, y2, anchorPointX, anchorPointY, featureIndex, radius, signedDistanceFromAnchor } =
+      collisionBoxArray.get(k);
+    if (radius === 0) {
+      collisionArrays.textBox = {
+        x1,
+        y1,
+        x2,
+        y2,
+        anchorPointX,
+        anchorPointY
+      };
+      collisionArrays.textFeatureIndex = featureIndex;
+      break; // Only one box allowed per instance
+    }
+    if (!collisionArrays.textCircles) {
+      collisionArrays.textCircles = [];
+      collisionArrays.textFeatureIndex = featureIndex;
+    }
+    const used = 1; // May be updated at collision detection time
+    collisionArrays.textCircles.push(anchorPointX, anchorPointY, radius, 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) {
+      const { x1, y1, x2, y2, anchorPointX, anchorPointY, featureIndex } = box;
+      collisionArrays.iconBox = {
+        x1,
+        y1,
+        x2,
+        y2,
+        anchorPointX,
+        anchorPointY
+      };
+      collisionArrays.iconFeatureIndex = 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
@@ -746,6 +589,14 @@ register('SymbolBucket', SymbolBucket, {
 // but we expect there to be many fewer boxes/lines than glyphs
 SymbolBucket.MAX_GLYPHS = 65535;
 
-SymbolBucket.addDynamicAttributes = addDynamicAttributes;
-
-module.exports = SymbolBucket;
+function calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode) {
+  for (let i = 0; i < text.length; i++) {
+    stack[text.charCodeAt(i)] = true;
+    if (textAlongLine && doesAllowVerticalWritingMode) {
+      const verticalChar = verticalizedCharacterMap[text.charAt(i)];
+      if (verticalChar) {
+        stack[verticalChar.charCodeAt(0)] = true;
+      }
+    }
+  }
+}