change dashSize to dashArray

Author: AntonJames-Sistence

src/symbols/Edge.tsx

@@ -156,7 +156,7 @@ export const Edge: FC<EdgeProps> = ({
     size = 1,
     fill,
     dashed = false,
-    dashSize = 3
+    dashArray = [3, 1]
   } = edge;
 
   // Use subLabelPlacement from edge data if available, otherwise use the prop value
@@ -466,7 +466,7 @@ export const Edge: FC<EdgeProps> = ({
         curve={curve}
         curved={curved}
         dashed={dashed}
-        dashSize={dashSize}
+        dashArray={dashArray}
         id={id}
         opacity={selectionOpacity}
         size={size}

src/symbols/Line.tsx

@@ -39,9 +39,9 @@ export interface LineProps {
   dashed?: boolean;
 
   /**
-   * The size of the dash.
+   * Dash pattern for the line: [dashSize, gapSize]
    */
-  dashSize?: number;
+  dashArray?: [number, number];
 
   /**
    * The unique identifier of the line.
@@ -120,7 +120,7 @@ export const Line: FC<LineProps> = ({
   curve,
   curved = false,
   dashed = false,
-  dashSize = 3,
+  dashArray = [3, 1],
   id,
   opacity = 1,
   size = 1,
@@ -138,21 +138,22 @@ export const Line: FC<LineProps> = ({
   // Create dashed material
   const dashedMaterial = useMemo(() => {
     if (!dashed) return null;
+    const [dashSize, dashGap] = dashArray;
 
     return new ShaderMaterial({
       uniforms: {
         color: { value: normalizedColor },
         opacity: { value: opacity },
         dashSize: { value: dashSize },
-        gapSize: { value: 1 },
+        gapSize: { value: dashGap },
         lineLength: { value: curve.getLength() }
       },
       vertexShader: dashedVertexShader,
       fragmentShader: dashedFragmentShader,
       transparent: true,
       depthTest: false
     });
-  }, [dashed, normalizedColor, opacity, curve, dashSize]);
+  }, [dashed, normalizedColor, opacity, curve, dashArray]);
 
   // Do opacity seperate from vertices for perf
   const { lineOpacity } = useSpring({

src/types.ts

@@ -95,9 +95,9 @@ export interface GraphEdge extends GraphElementBaseAttributes {
   dashed?: boolean;
 
   /**
-   * The size of the dash.
+   * Dash pattern for the line: [dashSize, gapSize]
    */
-  dashSize?: number;
+  dashArray?: [number, number];
 
   /**
    * Placement of the subLabel relative to the main label.

stories/demos/Edges.story.tsx

@@ -167,7 +167,7 @@ export const DashSize = () => (
         id: '1-2',
         label: '1-2',
         dashed: true,
-        dashSize: 1
+        dashArray: [1, 1]
       },
       {
         source: '2',
@@ -176,7 +176,7 @@ export const DashSize = () => (
         label: '2-3',
         size: 5,
         dashed: true,
-        dashSize: 2
+        dashArray: [3, 1]
       },
       {
         source: '3',
@@ -185,7 +185,7 @@ export const DashSize = () => (
         label: '3-4',
         size: 3,
         dashed: true,
-        dashSize: 10
+        dashArray: [5, 5]
       },
       {
         source: '4',
@@ -194,7 +194,7 @@ export const DashSize = () => (
         label: '4-5',
         size: 10,
         dashed: true,
-        dashSize: 1
+        dashArray: [7, 3]
       }
     ]}
   />