improve edges

2026-03-07 10:10:13 +01:00
parent 5ccd369f1d
commit 7e42e74a1e
4 changed files with 128 additions and 37 deletions
--- a/src/components/graph/AnimatedEdge.tsx
+++ b/src/components/graph/AnimatedEdge.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import {
+  BaseEdge,
+  getBezierPath,
+  type EdgeProps,
+} from '@xyflow/react'
+
+const EDGE_STROKE_WIDTH = 2
+const DOT_MARKER_R = 1.5
+
+export function AnimatedEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  label,
+  labelStyle,
+  labelShowBg,
+  labelBgStyle,
+  labelBgPadding,
+  labelBgBorderRadius,
+  labelX,
+  labelY,
+  interactionWidth,
+}: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  const startId = `animated-edge-dot-start-${id}`
+  const endId = `animated-edge-dot-end-${id}`
+
+  return (
+    <>
+      <defs>
+        <marker
+          id={startId}
+          markerWidth={DOT_MARKER_R * 2}
+          markerHeight={DOT_MARKER_R * 2}
+          refX={DOT_MARKER_R + 5}
+          refY={DOT_MARKER_R}
+          orient="auto"
+        >
+          <circle
+            r={DOT_MARKER_R}
+            cx={DOT_MARKER_R}
+            cy={DOT_MARKER_R}
+            className="fill-primary stroke-background"
+            strokeWidth={2}
+          />
+        </marker>
+        <marker
+          id={endId}
+          markerWidth={DOT_MARKER_R * 2}
+          markerHeight={DOT_MARKER_R * 2}
+          refX={DOT_MARKER_R - 5}
+          refY={DOT_MARKER_R}
+          orient="auto"
+        >
+          <circle
+            r={DOT_MARKER_R}
+            cx={DOT_MARKER_R}
+            cy={DOT_MARKER_R}
+            className="fill-primary stroke-background"
+            strokeWidth={2}
+          />
+        </marker>
+      </defs>
+      <BaseEdge
+        path={edgePath}
+        markerStart={`url(#${startId})`}
+        markerEnd={`url(#${endId})`}
+        style={{
+          strokeWidth: EDGE_STROKE_WIDTH,
+          ...style,
+        }}
+        className="animated-edge-path"
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        labelX={labelX}
+        labelY={labelY}
+        interactionWidth={interactionWidth}
+      />
+    </>
+  )
+}