Merge pull request #349 from reaviz/anton/dashed-edge

Dashed Edge

Author: amcdnl

src/symbols/Edge.tsx

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

src/symbols/Line.tsx

@@ -6,7 +6,8 @@ import {
   TubeGeometry,
   ColorRepresentation,
   Color,
-  Curve
+  Curve,
+  ShaderMaterial
 } from 'three';
 import { useStore } from '../store';
 import type { ThreeEvent } from '@react-three/fiber';
@@ -32,6 +33,11 @@ export interface LineProps {
    */
   curve: Curve<Vector3>;
 
+  /**
+   * Whether the line should be dashed.
+   */
+  dashed?: boolean;
+
   /**
    * The unique identifier of the line.
    */
@@ -73,12 +79,41 @@ export interface LineProps {
   curveOffset?: number;
 }
 
+// Dashed line shader for tube geometry
+const dashedVertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const dashedFragmentShader = `
+  uniform vec3 color;
+  uniform float opacity;
+  uniform float dashSize;
+  uniform float gapSize;
+  varying vec2 vUv;
+  
+  void main() {
+    float totalSize = dashSize + gapSize;
+    float position = mod(vUv.x * 10.0, totalSize);
+    
+    if (position > dashSize) {
+      discard;
+    }
+    
+    gl_FragColor = vec4(color, opacity);
+  }
+`;
+
 export const Line: FC<LineProps> = ({
   curveOffset,
   animated,
   color = '#000',
   curve,
   curved = false,
+  dashed = false,
   id,
   opacity = 1,
   size = 1,
@@ -93,6 +128,24 @@ export const Line: FC<LineProps> = ({
   const center = useStore(state => state.centerPosition);
   const mounted = useRef<boolean>(false);
 
+  // Create dashed material
+  const dashedMaterial = useMemo(() => {
+    if (!dashed) return null;
+
+    return new ShaderMaterial({
+      uniforms: {
+        color: { value: normalizedColor },
+        opacity: { value: opacity },
+        dashSize: { value: 0.5 },
+        gapSize: { value: 0.3 }
+      },
+      vertexShader: dashedVertexShader,
+      fragmentShader: dashedFragmentShader,
+      transparent: true,
+      depthTest: false
+    });
+  }, [dashed, normalizedColor, opacity]);
+
   // Do opacity seperate from vertices for perf
   const { lineOpacity } = useSpring({
     from: {
@@ -128,14 +181,19 @@ export const Line: FC<LineProps> = ({
         const toVector = new Vector3(...toVertices);
 
         const curve = getCurve(fromVector, 0, toVector, 0, curved, curveOffset);
-        tubeRef.current.copy(new TubeGeometry(curve, 20, size / 2, 5, false));
+
+        if (tubeRef.current) {
+          // Use slightly smaller radius for dashed lines for visual distinction
+          const radius = dashed ? size * 0.4 : size / 2;
+          tubeRef.current.copy(new TubeGeometry(curve, 20, radius, 5, false));
+        }
       },
       config: {
         ...animationConfig,
         duration: animated && !isDragging ? undefined : 0
       }
     };
-  }, [animated, isDragging, curve, size]);
+  }, [animated, isDragging, curve, size, dashed, curved, curveOffset]);
 
   useEffect(() => {
     // Handle mount operation for initial render
@@ -158,14 +216,18 @@ export const Line: FC<LineProps> = ({
       }}
     >
       <tubeGeometry attach="geometry" ref={tubeRef} />
-      <a.meshBasicMaterial
-        attach="material"
-        opacity={lineOpacity}
-        fog={true}
-        transparent={true}
-        depthTest={false}
-        color={normalizedColor}
-      />
+      {dashed ? (
+        <primitive attach="material" object={dashedMaterial} />
+      ) : (
+        <a.meshBasicMaterial
+          attach="material"
+          opacity={lineOpacity}
+          fog={true}
+          transparent={true}
+          depthTest={false}
+          color={normalizedColor}
+        />
+      )}
     </mesh>
   );
 };

src/types.ts

@@ -72,6 +72,13 @@ export interface GraphEdge extends GraphElementBaseAttributes {
    */
   target: string;
 
+  /**
+   * Whether the edge should be rendered with a dashed line pattern.
+   * When true, the edge will display with alternating dash and gap segments.
+   * Default is false (solid line).
+   */
+  dashed?: boolean;
+
   /**
    * Placement of the subLabel relative to the main label.
    * - 'below': Show subLabel below the main label (default)

stories/demos/Edges.story.tsx

@@ -71,3 +71,65 @@ export const Events = () => (
     onEdgeClick={edge => alert(`Edge ${edge.id} clicked`)}
   />
 );
+
+export const Dashed = () => (
+  <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
+      },
+      {
+        source: '2',
+        target: '3',
+        id: '2-3',
+        label: '2-3',
+        size: 5,
+        dashed: true
+      },
+      {
+        source: '3',
+        target: '4',
+        id: '3-4',
+        label: '3-4',
+        size: 3,
+        dashed: true
+      },
+      {
+        source: '4',
+        target: '5',
+        id: '4-5',
+        label: '4-5',
+        size: 10,
+        dashed: true
+      }
+    ]}
+  />
+);