@mapwhit/tilerenderer 1.0.0 → 1.1.0

package/src/data/bucket/symbol_bucket.js

@@ -1,46 +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 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 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(
@@ -58,82 +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();
-  }
-}
-
-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();
-  }
-}
-
 /**
  * Unlike other buckets, which simply implement #addFeature with type-specific
  * logic for (essentially) triangulating feature geometries, SymbolBucket
@@ -166,14 +77,13 @@ class 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;
@@ -221,18 +131,6 @@ 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;
@@ -243,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 = [];
 
@@ -308,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);
         }
       }
     }
@@ -321,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
@@ -398,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,
@@ -494,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
       );
@@ -565,66 +445,72 @@ 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);
+    }
   }
 }
 
@@ -654,45 +540,41 @@ function deserializeCollisionBoxesForSymbol(
 ) {
   const collisionArrays = {};
   for (let k = textStartIndex; k < textEndIndex; k++) {
-    const box = collisionBoxArray.get(k);
-    if (box.radius === 0) {
+    const { x1, y1, x2, y2, anchorPointX, anchorPointY, featureIndex, radius, signedDistanceFromAnchor } =
+      collisionBoxArray.get(k);
+    if (radius === 0) {
       collisionArrays.textBox = {
-        x1: box.x1,
-        y1: box.y1,
-        x2: box.x2,
-        y2: box.y2,
-        anchorPointX: box.anchorPointX,
-        anchorPointY: box.anchorPointY
+        x1,
+        y1,
+        x2,
+        y2,
+        anchorPointX,
+        anchorPointY
       };
-      collisionArrays.textFeatureIndex = box.featureIndex;
+      collisionArrays.textFeatureIndex = featureIndex;
       break; // Only one box allowed per instance
     }
     if (!collisionArrays.textCircles) {
       collisionArrays.textCircles = [];
-      collisionArrays.textFeatureIndex = box.featureIndex;
+      collisionArrays.textFeatureIndex = featureIndex;
     }
     const used = 1; // May be updated at collision detection time
-    collisionArrays.textCircles.push(
-      box.anchorPointX,
-      box.anchorPointY,
-      box.radius,
-      box.signedDistanceFromAnchor,
-      used
-    );
+    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: box.x1,
-        y1: box.y1,
-        x2: box.x2,
-        y2: box.y2,
-        anchorPointX: box.anchorPointX,
-        anchorPointY: box.anchorPointY
+        x1,
+        y1,
+        x2,
+        y2,
+        anchorPointX,
+        anchorPointY
       };
-      collisionArrays.iconFeatureIndex = box.featureIndex;
+      collisionArrays.iconFeatureIndex = featureIndex;
       break; // Only one box allowed per instance
     }
   }
@@ -707,6 +589,14 @@ function deserializeCollisionBoxesForSymbol(
 // 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;
+      }
+    }
+  }
+}

package/src/data/bucket/symbol_buffers.js

@@ -0,0 +1,62 @@
+import {
+  PlacedSymbolArray,
+  StructArrayLayout3f12 as SymbolDynamicLayoutArray,
+  StructArrayLayout4i4ui16 as SymbolLayoutArray,
+  StructArrayLayout1ul4 as SymbolOpacityArray,
+  StructArrayLayout3ui6 as TriangleIndexArray
+} from '../array_types.js';
+import SegmentVector from '../segment.js';
+import { dynamicLayoutAttributes, symbolLayoutAttributes } from './symbol_attributes.js';
+
+// 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 }];
+
+export default 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();
+  }
+}

package/src/data/bucket/symbol_collision_buffers.js

@@ -0,0 +1,33 @@
+import { StructArrayLayout2ub4 as CollisionVertexArray } from '../array_types.js';
+import SegmentVector from '../segment.js';
+import { collisionVertexAttributes } from './symbol_attributes.js';
+
+export default 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();
+  }
+}

package/src/data/bucket.js

@@ -18,7 +18,7 @@
  */
 
 // style may have changed between creating a bucket when tile was loaded and rendering it
-function updateBuckets(buckets, style) {
+export function updateBuckets(buckets, style) {
   if (!style._changed) {
     return;
   }
@@ -39,7 +39,7 @@ function updateBuckets(buckets, style) {
     }
     updatedAlready.add(id);
 
-    const layers = bucket.layerIds.map(id => style.getLayer(id)).filter(Boolean);
+    const layers = bucket.layers.map(({ id }) => style.getLayer(id)).filter(Boolean);
 
     if (layers.length === 0) {
       bucket.destroy();
@@ -52,7 +52,3 @@ function updateBuckets(buckets, style) {
     bucket.stateDependentLayers = layers.filter(layer => layer.isStateDependent());
   }
 }
-
-module.exports = {
-  updateBuckets
-};

package/src/data/dem_data.js

@@ -1,6 +1,5 @@
-const { RGBAImage } = require('../util/image');
-
-const warn = require('../util/warn');
+import { RGBAImage } from '../util/image.js';
+import warn from '../util/warn.js';
 
 // 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
@@ -15,7 +14,9 @@ const warn = require('../util/warn');
 class DEMData {
   constructor(uid, data, encoding) {
     this.uid = uid;
-    if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
+    if (data.height !== data.width) {
+      throw new RangeError('DEM tiles must be square');
+    }
     if (encoding && encoding !== 'mapbox' && encoding !== 'terrarium') {
       warn.once(`"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`);
       return;
@@ -63,8 +64,9 @@ class DEMData {
   }
 
   _idx(x, y) {
-    if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1)
+    if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1) {
       throw new RangeError('out of range source coordinates for DEM data');
+    }
     return (y + 1) * this.stride + (x + 1);
   }
 
@@ -85,7 +87,9 @@ class DEMData {
   }
 
   backfillBorder(borderTile, dx, dy) {
-    if (this.dim !== borderTile.dim) throw new Error('dem dimension mismatch');
+    if (this.dim !== borderTile.dim) {
+      throw new Error('dem dimension mismatch');
+    }
 
     let xMin = dx * this.dim;
     let xMax = dx * this.dim + this.dim;
@@ -120,4 +124,4 @@ class DEMData {
   }
 }
 
-module.exports = DEMData;
+export default DEMData;

package/src/data/extent.js

@@ -14,4 +14,4 @@
  * @private
  * @readonly
  */
-module.exports = 8192;
+export default 8192;