From 36721eb5afd72f777df430e79ad0ab272dcf4ee7 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 14 Apr 2026 02:56:28 +0000
Subject: [PATCH] feat(network): improve connector editing

---
 frontend/src/components/network/NetworkCanvas.tsx        | 7 +++++++
 .../src/components/network/panels/PropertiesPanel.tsx    | 3 +++
 frontend/src/components/network/ui/base-handle.tsx       | 4 ++--
 frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx     | 9 +++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/network/NetworkCanvas.tsx b/frontend/src/components/network/NetworkCanvas.tsx
index a8f554c8..ddd34f80 100644
--- a/frontend/src/components/network/NetworkCanvas.tsx
+++ b/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'}
diff --git a/frontend/src/components/network/panels/PropertiesPanel.tsx b/frontend/src/components/network/panels/PropertiesPanel.tsx
index 229da3b7..0f870091 100644
--- a/frontend/src/components/network/panels/PropertiesPanel.tsx
+++ b/frontend/src/components/network/panels/PropertiesPanel.tsx
@@ -257,6 +257,9 @@ export function PropertiesPanel({
           <h3 className="text-xs font-semibold text-heading">Connection</h3>
         </div>
         <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-3">
+          <div className="rounded border border-default bg-elevated/40 px-2.5 py-2 text-[10px] text-muted-foreground">
+            Drag either end of the line on the canvas to reconnect it to a different asset.
+          </div>
           <div className="flex flex-col gap-1">
             <FieldLabel>Label</FieldLabel>
             <FieldInput
diff --git a/frontend/src/components/network/ui/base-handle.tsx b/frontend/src/components/network/ui/base-handle.tsx
index d70d468f..913d8abb 100644
--- a/frontend/src/components/network/ui/base-handle.tsx
+++ b/frontend/src/components/network/ui/base-handle.tsx
@@ -9,8 +9,8 @@ export function BaseHandle({ className, children, ...props }: ComponentProps<typ
     <Handle
       {...props}
       className={cn(
-        'h-[10px] w-[10px] rounded-full border border-default bg-elevated transition-opacity',
-        'opacity-0 group-hover:opacity-100',
+        'h-[14px] w-[14px] rounded-full border border-default bg-elevated transition-opacity',
+        'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',
         className,
       )}
     >
diff --git a/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx b/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
index 1c4db59d..6b2eab67 100644
--- a/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
+++ b/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}