fix(ColumnLayer): closed shapes with binary data and transition props

modules/aggregation-layers/src/hexagon-layer/hexagon-cell-layer.ts

@@ -108,11 +108,7 @@ export default class HexagonCellLayer<ExtraPropsT extends {} = {}> extends Colum
     const elevationCutoff = this.props.elevationCutoff || [-Infinity, Infinity];
     const fillModel = this.state.fillModel!;
 
-    if (fillModel.vertexArray.indexBuffer) {
-      // indices are for drawing wireframe, disable them
-      // TODO - this should be handled in ColumnLayer?
-      fillModel.setIndexBuffer(null);
-    }
+    this._disableFillIndexBuffer();
     fillModel.setVertexCount(this.state.fillVertexCount);
 
     const hexagonProps: Omit<HexagonProps, 'colorRange'> = {

modules/layers/src/column-layer/column-layer.ts

@@ -378,6 +378,14 @@ export default class ColumnLayer<DataT = any, ExtraPropsT extends {} = {}> exten
     wireframeModel.setTopology('line-list');
   }
 
+  protected _disableFillIndexBuffer() {
+    const fillModel = this.state.fillModel!;
+    if (fillModel.vertexArray.indexBuffer) {
+      // Geometry indices are only for wireframe. Model rebuilds can reattach them.
+      fillModel.setIndexBuffer(null);
+    }
+  }
+
   draw({uniforms}) {
     const {
       lineWidthUnits,
@@ -399,6 +407,8 @@ export default class ColumnLayer<DataT = any, ExtraPropsT extends {} = {}> exten
     const wireframeModel = this.state.wireframeModel!;
     const {fillVertexCount, edgeDistance} = this.state;
 
+    this._disableFillIndexBuffer();
+
     const columnProps: Omit<ColumnProps, 'isStroke'> = {
       radius,
       angle: (angle / 180) * Math.PI,

test/modules/layers/column-layer.spec.ts

@@ -0,0 +1,53 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import test from 'tape-promise/tape';
+
+import {ColumnLayer} from '@deck.gl/layers';
+import {testLayer} from '@deck.gl/test-utils';
+
+test('ColumnLayer - binary fill model clears wireframe indices', t => {
+  testLayer({
+    Layer: ColumnLayer,
+    testCases: [
+      {
+        title: 'binary data',
+        props: {
+          data: {
+            length: 3,
+            attributes: {
+              getPosition: {value: new Float64Array([37, 122, 37.1, 122, 37, 122.8]), size: 2},
+              getFillColor: {
+                value: new Uint8Array([255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255]),
+                size: 4
+              },
+              getElevation: {value: new Float32Array([100, 200, 300]), size: 1}
+            }
+          },
+          radius: 10,
+          extruded: true
+        },
+        onAfterUpdate: ({layer}) => {
+          const fillModel = layer.state.fillModel!;
+          const wireframeModel = layer.state.wireframeModel!;
+
+          t.ok(wireframeModel.vertexArray.indexBuffer, 'wireframe model keeps geometry indices');
+
+          fillModel.setIndexBuffer(wireframeModel.vertexArray.indexBuffer);
+          t.ok(fillModel.vertexArray.indexBuffer, 'sanity check: fill model has leaked indices');
+
+          layer.draw({uniforms: {}} as any);
+
+          t.notOk(
+            fillModel.vertexArray.indexBuffer,
+            'fill model disables wireframe indices before drawing fill geometry'
+          );
+        }
+      }
+    ],
+    onError: t.notOk
+  });
+
+  t.end();
+});

test/modules/layers/index.ts

@@ -18,5 +18,6 @@ import './text-layer/lru-cache.spec';
 import './text-layer/text-layer.spec';
 import './text-layer/font-atlas.spec';
 import './column-geometry.spec';
+import './column-layer.spec';
 import './utils.spec';
 import './scatterplot-layer.spec';