Add dashSize prop

src/symbols/Edge.tsx

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

src/symbols/Line.tsx

@@ -38,6 +38,11 @@ export interface LineProps {
    */
   dashed?: boolean;
 
+  /**
+   * Dash pattern for the line: [dashSize, gapSize]
+   */
+  dashArray?: [number, number];
+
   /**
    * The unique identifier of the line.
    */
@@ -93,11 +98,12 @@ const dashedFragmentShader = `
   uniform float opacity;
   uniform float dashSize;
   uniform float gapSize;
+  uniform float lineLength;
   varying vec2 vUv;
 
   void main() {
     float totalSize = dashSize + gapSize;
-    float position = mod(vUv.x * 10.0, totalSize);
+    float position = mod(vUv.x * lineLength, totalSize);
 
     if (position > dashSize) {
       discard;
@@ -114,6 +120,7 @@ export const Line: FC<LineProps> = ({
   curve,
   curved = false,
   dashed = false,
+  dashArray = [3, 1],
   id,
   opacity = 1,
   size = 1,
@@ -131,20 +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: 0.5 },
-        gapSize: { value: 0.3 }
+        dashSize: { value: dashSize },
+        gapSize: { value: dashGap },
+        lineLength: { value: curve.getLength() }
       },
       vertexShader: dashedVertexShader,
       fragmentShader: dashedFragmentShader,
       transparent: true,
       depthTest: false
     });
-  }, [dashed, normalizedColor, opacity]);
+  }, [dashed, normalizedColor, opacity, curve, dashArray]);
 
   // Do opacity seperate from vertices for perf
   const { lineOpacity } = useSpring({

src/types.ts

@@ -94,6 +94,11 @@ export interface GraphEdge extends GraphElementBaseAttributes {
    */
   dashed?: boolean;
 
+  /**
+   * Dash pattern for the line: [dashSize, gapSize]
+   */
+  dashArray?: [number, number];
+
   /**
    * Placement of the subLabel relative to the main label.
    * - 'below': Show subLabel below the main label (default)

stories/demos/Edges.story.tsx

@@ -133,3 +133,69 @@ export const Dashed = () => (
     ]}
   />
 );
+
+export const DashSize = () => (
+  <GraphCanvas
+    edgeInterpolation="curved"
+    labelType="all"
+    nodes={[
+      {
+        id: '1',
+        label: '1'
+      },
+      {
+        id: '2',
+        label: '2'
+      },
+      {
+        id: '3',
+        label: '3'
+      },
+      {
+        id: '4',
+        label: '4'
+      },
+      {
+        id: '5',
+        label: '5'
+      }
+    ]}
+    edges={[
+      {
+        source: '1',
+        target: '2',
+        id: '1-2',
+        label: '1-2',
+        dashed: true,
+        dashArray: [1, 1]
+      },
+      {
+        source: '2',
+        target: '3',
+        id: '2-3',
+        label: '2-3',
+        size: 5,
+        dashed: true,
+        dashArray: [3, 1]
+      },
+      {
+        source: '3',
+        target: '4',
+        id: '3-4',
+        label: '3-4',
+        size: 3,
+        dashed: true,
+        dashArray: [5, 5]
+      },
+      {
+        source: '4',
+        target: '5',
+        id: '4-5',
+        label: '4-5',
+        size: 10,
+        dashed: true,
+        dashArray: [7, 3]
+      }
+    ]}
+  />
+);