feat(network): improve connector editing

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -5,6 +5,7 @@ import {
   useNodesState,
   useEdgesState,
   addEdge,
+  reconnectEdge,
   useReactFlow,
   getNodesBounds,
   getViewportForBounds,
@@ -402,6 +403,13 @@ function DiagramEditorInner() {
     setIsDirty(true)
   }, [nodes, edges, pushHistory, setEdges])
 
+  const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => {
+    pushHistory(nodes, edges)
+    setEdges(eds => reconnectEdge(oldEdge, newConnection, eds))
+    setSelectedEdgeId(oldEdge.id)
+    setIsDirty(true)
+  }, [nodes, edges, pushHistory, setEdges])
+
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault()
     event.dataTransfer.dropEffect = 'move'
@@ -822,6 +830,7 @@ function DiagramEditorInner() {
               onNodesChange={handleNodesChange}
               onEdgesChange={handleEdgesChange}
               onConnect={onConnect}
+              onReconnect={onReconnect}
               onNodeSelect={setSelectedNodeId}
               onEdgeSelect={setSelectedEdgeId}
               onDrop={onDrop}