Create named types for triangle and line element arrays

src/data/bucket/circle_bucket.js

@@ -4,7 +4,7 @@ const {SegmentVector} = require('../segment');
 const Buffer = require('../buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
-const createElementArrayType = require('../element_array_type');
+const {TriangleElementArray} = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 
@@ -17,7 +17,7 @@ const circleInterface = {
     layoutAttributes: [
         {name: 'a_pos', components: 2, type: 'Int16'}
     ],
-    elementArrayType: createElementArrayType(),
+    elementArrayType: TriangleElementArray,
 
     paintAttributes: [
         {property: 'circle-color'},
@@ -37,7 +37,6 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
 }
 
 const LayoutVertexArrayType = createVertexArrayType(circleInterface.layoutAttributes);
-const ElementArrayType = circleInterface.elementArrayType;
 
 /**
  * Circles are represented by two triangles.
@@ -71,12 +70,12 @@ class CircleBucket implements Bucket {
 
         if (options.layoutVertexArray) {
             this.layoutVertexBuffer = new Buffer(options.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
-            this.elementBuffer = new Buffer(options.elementArray, ElementArrayType.serialize(), Buffer.BufferType.ELEMENT);
+            this.elementBuffer = new Buffer(options.elementArray, TriangleElementArray.serialize(), Buffer.BufferType.ELEMENT);
             this.programConfigurations = ProgramConfigurationSet.deserialize(circleInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
         } else {
             this.layoutVertexArray = new LayoutVertexArrayType();
-            this.elementArray = new ElementArrayType();
+            this.elementArray = new TriangleElementArray();
             this.programConfigurations = new ProgramConfigurationSet(circleInterface, options.layers, options.zoom);
             this.segments = new SegmentVector();
         }

src/data/bucket/fill_bucket.js

@@ -4,7 +4,7 @@ const {SegmentVector} = require('../segment');
 const Buffer = require('../buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
-const createElementArrayType = require('../element_array_type');
+const {LineElementArray, TriangleElementArray} = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const earcut = require('earcut');
 const classifyRings = require('../../util/classify_rings');
@@ -20,8 +20,8 @@ const fillInterface = {
     layoutAttributes: [
         {name: 'a_pos', components: 2, type: 'Int16'}
     ],
-    elementArrayType: createElementArrayType(3),
-    elementArrayType2: createElementArrayType(2),
+    elementArrayType: TriangleElementArray,
+    elementArrayType2: LineElementArray,
 
     paintAttributes: [
         {property: 'fill-color'},
@@ -31,8 +31,6 @@ const fillInterface = {
 };
 
 const LayoutVertexArrayType = createVertexArrayType(fillInterface.layoutAttributes);
-const ElementArrayType = fillInterface.elementArrayType;
-const ElementArrayType2 = fillInterface.elementArrayType2;
 
 class FillBucket implements Bucket {
     static programInterface: ProgramInterface;
@@ -63,15 +61,15 @@ class FillBucket implements Bucket {
 
         if (options.layoutVertexArray) {
             this.layoutVertexBuffer = new Buffer(options.layoutVertexArray, LayoutVertexArrayType.serialize(), Buffer.BufferType.VERTEX);
-            this.elementBuffer = new Buffer(options.elementArray, ElementArrayType.serialize(), Buffer.BufferType.ELEMENT);
-            this.elementBuffer2 = new Buffer(options.elementArray2, ElementArrayType2.serialize(), Buffer.BufferType.ELEMENT);
+            this.elementBuffer = new Buffer(options.elementArray, TriangleElementArray.serialize(), Buffer.BufferType.ELEMENT);
+            this.elementBuffer2 = new Buffer(options.elementArray2, LineElementArray.serialize(), Buffer.BufferType.ELEMENT);
             this.programConfigurations = ProgramConfigurationSet.deserialize(fillInterface, options.layers, options.zoom, options.programConfigurations);
             this.segments = new SegmentVector(options.segments);
             this.segments2 = new SegmentVector(options.segments2);
         } else {
             this.layoutVertexArray = new LayoutVertexArrayType();
-            this.elementArray = new ElementArrayType();
-            this.elementArray2 = new ElementArrayType2();
+            this.elementArray = new TriangleElementArray();
+            this.elementArray2 = new LineElementArray();
             this.programConfigurations = new ProgramConfigurationSet(fillInterface, options.layers, options.zoom);
             this.segments = new SegmentVector();
             this.segments2 = new SegmentVector();

src/data/bucket/fill_extrusion_bucket.js

@@ -4,7 +4,7 @@ const {SegmentVector} = require('../segment');
 const Buffer = require('../buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
-const createElementArrayType = require('../element_array_type');
+const {TriangleElementArray} = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 const earcut = require('earcut');
@@ -23,7 +23,7 @@ const fillExtrusionInterface = {
         {name: 'a_normal',       components: 3, type: 'Int16'},
         {name: 'a_edgedistance', components: 1, type: 'Int16'}
     ],
-    elementArrayType: createElementArrayType(3),
+    elementArrayType: TriangleElementArray,
 
     paintAttributes: [
         {property: 'fill-extrusion-base'},

src/data/bucket/line_bucket.js

@@ -4,7 +4,7 @@ const {SegmentVector} = require('../segment');
 const Buffer = require('../buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
-const createElementArrayType = require('../element_array_type');
+const {TriangleElementArray} = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 const vectorTileFeatureTypes = require('@mapbox/vector-tile').VectorTileFeature.types;
@@ -64,7 +64,7 @@ const lineInterface = {
         {property: 'line-width'},
         {property: 'line-width', name: 'floorwidth', useIntegerZoom: true},
     ],
-    elementArrayType: createElementArrayType()
+    elementArrayType: TriangleElementArray
 };
 
 function addLineVertex(layoutVertexBuffer, point: Point, extrude: Point, round: boolean, up: boolean, dir: number, linesofar: number) {

src/data/bucket/symbol_bucket.js

@@ -5,7 +5,7 @@ const {SegmentVector} = require('../segment');
 const Buffer = require('../buffer');
 const {ProgramConfigurationSet} = require('../program_configuration');
 const createVertexArrayType = require('../vertex_array_type');
-const createElementArrayType = require('../element_array_type');
+const {TriangleElementArray, LineElementArray} = require('../element_array_type');
 const EXTENT = require('../extent');
 const {packUint8ToFloat} = require('../../shaders/encode_attribute');
 const Anchor = require('../../symbol/anchor');
@@ -113,8 +113,6 @@ const LineVertexArray = createStructArrayType({
         { type: 'Int16', name: 'y' }
     ]});
 
-const elementArrayType = createElementArrayType();
-
 const layoutAttributes = [
     {name: 'a_pos_offset',  components: 4, type: 'Int16'},
     {name: 'a_data',        components: 4, type: 'Uint16'}
@@ -128,7 +126,7 @@ const symbolInterfaces = {
     text: {
         layoutAttributes: layoutAttributes,
         dynamicLayoutAttributes: dynamicLayoutAttributes,
-        elementArrayType: elementArrayType,
+        elementArrayType: TriangleElementArray,
         paintAttributes: [
             {property: 'text-color', name: 'fill_color'},
             {property: 'text-halo-color', name: 'halo_color'},
@@ -140,7 +138,7 @@ const symbolInterfaces = {
     icon: {
         layoutAttributes: layoutAttributes,
         dynamicLayoutAttributes: dynamicLayoutAttributes,
-        elementArrayType: elementArrayType,
+        elementArrayType: TriangleElementArray,
         paintAttributes: [
             {property: 'icon-color', name: 'fill_color'},
             {property: 'icon-halo-color', name: 'halo_color'},
@@ -156,7 +154,7 @@ const symbolInterfaces = {
             {name: 'a_extrude',    components: 2, type: 'Int16'},
             {name: 'a_data',       components: 2, type: 'Uint8'}
         ],
-        elementArrayType: createElementArrayType(2)
+        elementArrayType: LineElementArray
     }
 };
 

src/data/element_array_type.js

@@ -2,19 +2,24 @@
 
 const createStructArrayType = require('../util/struct_array');
 
-module.exports = createElementArrayType;
-
 /**
- * An element array stores Uint16 indicies of vertexes in a corresponding vertex array. With no
- * arguments, it defaults to three components per element, forming triangles.
+ * An element array stores Uint16 indicies of vertexes in a corresponding vertex array. We use
+ * two kinds of element arrays: arrays storing groups of three indicies, forming triangles; and
+ * arrays storing pairs of indicies, forming line segments.
  * @private
  */
-function createElementArrayType(components?: number) {
+
+function createElementArrayType(components: number) {
     return createStructArrayType({
         members: [{
             type: 'Uint16',
             name: 'vertices',
-            components: components || 3
+            components
         }]
     });
 }
+
+module.exports = {
+    LineElementArray: createElementArrayType(2),
+    TriangleElementArray: createElementArrayType(3)
+};