diff --git a/components/FlowCanvas.tsx b/components/FlowCanvas.tsx index fd84ae2..b725a72 100644 --- a/components/FlowCanvas.tsx +++ b/components/FlowCanvas.tsx @@ -9,6 +9,7 @@ import { useNodesState, useEdgesState, addEdge, + reconnectEdge, Connection, MarkerType, Panel, @@ -252,7 +253,7 @@ function generateEdges(nodes: FlowNode[]): FlowEdge[] { id: `spending-${node.id}-${alloc.targetId}`, source: node.id, target: alloc.targetId, - sourceHandle: undefined, // Default bottom + sourceHandle: 'spending-out', // Explicit bottom handle animated: true, style: { stroke: alloc.color, @@ -298,6 +299,13 @@ export default function FlowCanvas() { [setEdges] ) + // Allow edges to be reconnected by dragging + const onReconnect = useCallback( + (oldEdge: FlowEdge, newConnection: Connection) => + setEdges((eds) => reconnectEdge(oldEdge, newConnection, eds) as FlowEdge[]), + [setEdges] + ) + // Simulation effect useEffect(() => { if (!isSimulating) return @@ -350,7 +358,9 @@ export default function FlowCanvas() { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} + onReconnect={onReconnect} nodeTypes={nodeTypes} + edgesReconnectable={true} fitView fitViewOptions={{ padding: 0.15 }} className="bg-slate-50" diff --git a/components/nodes/FunnelNode.tsx b/components/nodes/FunnelNode.tsx index dd75b8f..e398176 100644 --- a/components/nodes/FunnelNode.tsx +++ b/components/nodes/FunnelNode.tsx @@ -618,6 +618,7 @@ function FunnelNode({ data, selected, id }: NodeProps) {