feat(network): improve connector editing

frontend/src/components/network/NetworkCanvas.tsx

@@ -6,6 +6,7 @@ import {
   MiniMap,
   BackgroundVariant,
   type OnConnect,
+  type OnReconnect,
   type OnNodesChange,
   type OnEdgesChange,
   type Node,
@@ -23,6 +24,7 @@ interface NetworkCanvasProps {
   onNodesChange: OnNodesChange
   onEdgesChange: OnEdgesChange
   onConnect: OnConnect
+  onReconnect: OnReconnect<Edge>
   onNodeSelect: (nodeId: string | null) => void
   onEdgeSelect: (edgeId: string | null) => void
   onDrop: (event: React.DragEvent) => void
@@ -41,6 +43,7 @@ export function NetworkCanvas({
   onNodesChange,
   onEdgesChange,
   onConnect,
+  onReconnect,
   onNodeSelect,
   onEdgeSelect,
   onDrop,
@@ -85,6 +88,7 @@ export function NetworkCanvas({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        onReconnect={onReconnect}
         onSelectionChange={handleSelectionChange}
         onPaneClick={handlePaneClick}
         onDrop={onDrop}
@@ -94,6 +98,9 @@ export function NetworkCanvas({
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         defaultEdgeOptions={{ type: 'connection' }}
+        edgesReconnectable
+        reconnectRadius={20}
+        connectionRadius={24}
         deleteKeyCode={['Backspace', 'Delete']}
         multiSelectionKeyCode="Shift"
         panOnDrag={interactionMode === 'pan'}