feat: Option to give separate color for each line in PolylinesLayer.

typescript/packages/subsurface-viewer/src/layers/polylines/polylinesLayer.ts

@@ -41,8 +41,11 @@ export interface PolylinesLayerProps extends ExtendedLayerProps {
 
     /**
      * Line color defined as RGB or RGBA array. Each component is in 0-255 range.
+     * If color is given as an array of colors, each polyline gets its own color.
+     * If given as array the number of colors should be at least equal to the number of polylines.
+     * Otherwise, the first color is applied to all polylines.
      */
-    color: RGBColor | RGBAColor;
+    color: RGBColor | RGBAColor | RGBColor[] | RGBAColor[];
 
     /**
      * The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`.
@@ -89,6 +92,10 @@ interface IDataAttributes {
             value: Float32Array;
             size: number;
         };
+        getColor: {
+            value: Float32Array;
+            size: number;
+        };
     };
     pathType: PathType;
 }
@@ -107,7 +114,6 @@ export default class PolylinesLayer extends CompositeLayer<PolylinesLayerProps>
                 capRounded: true,
                 data,
                 _pathType,
-                getColor: () => this.props.color,
                 getWidth: () => this.props.linesWidth,
 
                 updateTriggers: {
@@ -151,6 +157,55 @@ export default class PolylinesLayer extends CompositeLayer<PolylinesLayerProps>
             this.props.reportBoundingBox({ layerBoundingBox: boundingBox });
         }
 
+        const nStartIndicies = dataArrays.startIndices.length;
+        const isRGBArray =
+            this.props.color.length > 0 &&
+            Array.isArray(this.props.color[0]) &&
+            (this.props.color[0] as RGBColor).length === 3;
+        const isRGBAArray =
+            this.props.color.length > 0 &&
+            Array.isArray(this.props.color[0]) &&
+            (this.props.color[0] as RGBAColor).length === 4;
+
+        if (
+            (isRGBArray || isRGBAArray) &&
+            this.props.color.length < nStartIndicies
+        ) {
+            throw new Error(
+                "Color array length should be at least equal to the number of polylines"
+            );
+        }
+
+        // Set color for each vertex. If color is given as a single value, all vertices get
+        // the same color. If color is given as an array of colors, each polyline gets its own color.
+        const npoints = dataArrays.positions.length / 3;
+        const colors = new Float32Array(npoints * 4);
+
+        const { startIndices } = dataArrays;
+        const scale = startIndices.at(-1) === npoints ? 255 : 1;
+
+        for (let i = 0; i < startIndices.length; i++) {
+            const ii = this.props.color.length < nStartIndicies ? 0 : i;
+            const color =
+                isRGBArray || isRGBAArray
+                    ? (this.props.color as RGBColor[] | RGBAColor[])[ii]
+                    : (this.props.color as RGBColor | RGBAColor);
+            const r = color[0] / scale;
+            const g = color[1] / scale;
+            const b = color[2] / scale;
+            const a =
+                color.length > 3 ? (color[3] as number) / scale : 255 / scale;
+            const start = startIndices[i];
+            const end =
+                i < startIndices.length - 1 ? startIndices[i + 1] - 1 : npoints;
+            for (let j = start; j <= end; j++) {
+                colors[j * 4 + 0] = r;
+                colors[j * 4 + 1] = g;
+                colors[j * 4 + 2] = b;
+                colors[j * 4 + 3] = a;
+            }
+        }
+
         return {
             length: dataArrays.linesCount,
             startIndices: dataArrays.startIndices,
@@ -159,6 +214,10 @@ export default class PolylinesLayer extends CompositeLayer<PolylinesLayerProps>
                     value: dataArrays.positions,
                     size: 3,
                 },
+                getColor: {
+                    value: colors,
+                    size: 4,
+                },
             },
             pathType: dataArrays.pathType,
         };

typescript/packages/subsurface-viewer/src/storybook/layers/PolylinesLayer.stories.tsx

@@ -9,6 +9,7 @@ import {
     createMathWithSeed,
     replaceNonJsonArgs,
 } from "../sharedHelperFunctions";
+import { OrbitView } from "@deck.gl/core";
 
 const stories: Meta = {
     component: SubsurfaceViewer,
@@ -45,18 +46,51 @@ const smallPolylinesLayer = {
     id: "small_polylines_layer",
     /* eslint-disable */
     polylinePoints: [
-        0, 0, 0, 10, 0, 0, 10, 0, 10, -5, -5, 4, 0, -8, 6, 5, 10, 8,
+        0, 0, 0, 
+        10, 0, 0, 
+        10, 0, 10, 
+        -5, -5, 4, 
+        0, -8, 6, 
+        5, 10, 8,
+        3, 1, 2, 
+        15, 8, 10,
     ],
     /* eslint-enable */
-    startIndices: [0, 3],
+    startIndices: [0, 3, 6],
     polylinesClosed: [true, false],
-    color: [0, 200, 100],
+    color: [
+        [255, 0, 0],
+        [0, 255, 0],
+        [0, 0, 255],
+    ],
 
     widthUnits: "pixels",
     linesWidth: 10,
     ZIncreasingDownwards: true,
 };
 
+const smallPolylinesLayerSingleColor = {
+    "@@type": "PolylinesLayer",
+    id: "small_polylines_layer_single_color",
+    /* eslint-disable */
+    polylinePoints: [
+        0, 0, 0, 
+        10, 0, 0, 
+        10, 0, 10, 
+        -5, -5, 4, 
+        0, -8, 6, 
+        5, 10, 8,
+        3, 1, 2, 
+        15, 8, 10,
+    ],
+    startIndices: [0, 3, 6],
+    polylinesClosed: [true, false],
+    color: [255, 0, 0],
+    widthUnits: "pixels",
+    linesWidth: 10,
+    ZIncreasingDownwards: true,
+};
+
 const smallAxesLayer = {
     "@@type": "AxesLayer",
     id: "small_axes_layer",
@@ -66,9 +100,27 @@ const smallAxesLayer = {
 export const SmallPolylinesLayer: StoryObj<typeof SubsurfaceViewer> = {
     args: {
         id: "small-polylines",
-        layers: [smallAxesLayer, smallPolylinesLayer],
+        layers: [smallAxesLayer, smallPolylinesLayer, smallPolylinesLayerSingleColor],
         bounds: [-10, -10, 17, 10],
-        views: default3DViews,
+        views: {
+            layout: [1, 2],
+            showLabel: true,
+            viewports: [
+                {
+                    id: "view_1",
+                    layerIds: [smallAxesLayer.id, smallPolylinesLayer.id],
+                    viewType: OrbitView,
+                },
+                {
+                    id: "view_2",
+                    layerIds: [
+                        smallAxesLayer.id,
+                        smallPolylinesLayerSingleColor.id,
+                    ],
+                    viewType: OrbitView,
+                },
+            ],
+        },
     },
     parameters: {
         docs: {