improve edges

src/App.tsx

@@ -17,6 +17,7 @@ import ConfigNode from './components/graph/ConfigNode'
 import FunctionNode from './components/graph/FunctionNode'
 import RenderingNode from './components/graph/RenderingNode'
 import VariableNode from './components/graph/VariableNode'
+import { AnimatedEdge } from './components/graph/AnimatedEdge'
 import FlowContext from './lib/flowContext'
 import { useTheme } from './lib/themeContext'
 import {
@@ -53,7 +54,9 @@ const initialNodes: Node[] = [
   },
 ].map((n) => ({ ...n, id: n.id ?? genId() }))
 
-const initialEdges: Edge[] = [{ id: 'e-config-render', source: 'config-1', target: 'render-1' }]
+const initialEdges: Edge[] = [
+  { id: 'e-config-render', source: 'config-1', target: 'render-1', type: 'animated' },
+]
 
 export default function App() {
   const { theme, toggleTheme } = useTheme()
@@ -70,6 +73,8 @@ export default function App() {
     []
   )
 
+  const edgeTypes = React.useMemo(() => ({ animated: AnimatedEdge }), [])
+
   const onConnect = React.useCallback(
     (params: Connection) => setEdges((eds) => addEdge(params, eds)),
     [setEdges]
@@ -172,6 +177,8 @@ export default function App() {
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
                 nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
+                defaultEdgeOptions={{ type: 'animated' }}
                 colorMode={theme as ColorMode}
                 snapToGrid
                 snapGrid={SNAP_GRID}