@tldiagram/core-ui 1.92.0 → 1.94.0

package/src/pages/ViewEditor/hooks/useCanvasInteractions.ts

@@ -34,8 +34,106 @@ import {
   ensureVisualHandleId,
   getLogicalHandleId,
 } from '../../../utils/edgeDistribution'
+import { useStore } from '../../../store/useStore'
 
 const SNAP_RADIUS = 75
+const CONNECTOR_DRAG_UPDATE_INTERVAL_MS = 25
+
+type HandleTarget = {
+  nodeId?: string
+  handleId: string
+  x: number
+  y: number
+}
+
+function collectHandleTargets(excludeNodeId?: string): HandleTarget[] {
+  const handles = document.querySelectorAll('.react-flow__handle')
+  const targets: HandleTarget[] = []
+
+  for (const handle of handles) {
+    const nodeId = handle.closest('.react-flow__node')?.getAttribute('data-id') || undefined
+    if (excludeNodeId && nodeId === excludeNodeId) continue
+
+    const rect = handle.getBoundingClientRect()
+    targets.push({
+      nodeId,
+      handleId: handle.getAttribute('data-handleid') || handle.id,
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    })
+  }
+
+  return targets
+}
+
+function findNearestHandleTargetInCache(targets: HandleTarget[], clientX: number, clientY: number) {
+  let hoveredHandleId: string | undefined
+  let hoveredNodeId: string | undefined
+  let snapPos = { x: clientX, y: clientY }
+  let nearestDistance = Infinity
+
+  for (const target of targets) {
+    const dist = Math.hypot(clientX - target.x, clientY - target.y)
+    if (dist < 36 && dist < nearestDistance) {
+      nearestDistance = dist
+      snapPos = { x: target.x, y: target.y }
+      hoveredHandleId = target.handleId
+      hoveredNodeId = target.nodeId
+    }
+  }
+
+  return {
+    nearHandle: hoveredHandleId !== undefined,
+    snapPos,
+    hoveredHandleId,
+    hoveredNodeId,
+  }
+}
+
+export function applyNodeChangesWithStructuralSharing(changes: NodeChange[], nodes: RFNode[]) {
+  if (changes.length === 0) return nodes
+
+  const canFastPath = changes.every((change) => change.type === 'position' && 'id' in change)
+  if (!canFastPath) return applyNodeChanges(changes, nodes)
+
+  const changesById = new Map(changes.map((change) => [change.id, change]))
+  let didChange = false
+
+  const nextNodes = nodes.map((node) => {
+    const change = changesById.get(node.id)
+    if (!change || change.type !== 'position') return node
+
+    const position = change.position ?? node.position
+    const positionAbsolute = change.positionAbsolute ?? node.positionAbsolute
+    const dragging = change.dragging ?? node.dragging
+
+    if (
+      node.position.x === position.x &&
+      node.position.y === position.y &&
+      node.positionAbsolute?.x === positionAbsolute?.x &&
+      node.positionAbsolute?.y === positionAbsolute?.y &&
+      node.dragging === dragging
+    ) {
+      return node
+    }
+
+    didChange = true
+    return {
+      ...node,
+      position,
+      positionAbsolute,
+      dragging,
+    }
+  })
+
+  return didChange ? nextNodes : nodes
+}
+
+export function getConnectorDeletionTarget(
+  selectedConnector: Connector | null,
+) {
+  return selectedConnector?.id ?? null
+}
 
 interface CanvasInteractionOptions {
   viewId: number | null
@@ -72,12 +170,11 @@ interface CanvasInteractionOptions {
   openConnectorPanel: () => void
   closeConnectorPanel: () => void
   selectedElement: LibraryElement | null
-  selectedEdgeId: number | null
+  selectedConnector: Connector | null
   connectors: Connector[]
   layers: ViewLayer[]
   setSelectedElement: React.Dispatch<React.SetStateAction<LibraryElement | null>>
   setSelectedEdge: (e: Connector | null) => void
-  setSelectedEdgeId: (id: number | null) => void
   setSelectedProxyConnectorDetails: React.Dispatch<React.SetStateAction<import('../../../crossBranch/types').ProxyConnectorDetails | null>>
   openProxyConnectorPanel: () => void
   closeProxyConnectorPanel: () => void
@@ -110,6 +207,12 @@ type HandleReconnectDragState = {
   hoveredHandleId?: string
 }
 
+type InteractionStartOptions = {
+  sourceHandle?: string
+  clientX?: number
+  clientY?: number
+}
+
 export function useCanvasInteractions({
   viewId,
   canEdit,
@@ -127,8 +230,8 @@ export function useCanvasInteractions({
   interactionSourceIdRef,
   hoveredZoomRef,
   hoverPanLockedUntilRef,
-  setViewElements,
-  setConnectors,
+  setViewElements: _setViewElements,
+  setConnectors: _setConnectors,
   setRfNodes,
   setRfEdges,
   setLinksMap,
@@ -145,12 +248,11 @@ export function useCanvasInteractions({
   openConnectorPanel: openConnectorPanel,
   closeConnectorPanel: closeConnectorPanel,
   selectedElement,
-  selectedEdgeId,
+  selectedConnector,
   connectors,
   layers,
   setSelectedElement,
   setSelectedEdge,
-  setSelectedEdgeId,
   setSelectedProxyConnectorDetails,
   openProxyConnectorPanel,
   closeProxyConnectorPanel,
@@ -163,6 +265,10 @@ export function useCanvasInteractions({
   onMoveStateChange,
 }: CanvasInteractionOptions) {
   const { screenToFlowPosition, setViewport, getViewport, zoomIn, zoomOut } = useReactFlow()
+  const updateElementPosition = useStore((state) => state.updateElementPosition)
+  const removeElementPlacement = useStore((state) => state.removeElementPlacement)
+  const upsertConnector = useStore((state) => state.upsertConnector)
+  const replaceConnector = useStore((state) => state.replaceConnector)
   const screenToFlowPositionRef = useRef(screenToFlowPosition)
   screenToFlowPositionRef.current = screenToFlowPosition
 
@@ -176,6 +282,7 @@ export function useCanvasInteractions({
   const [reconnectPicking, setReconnectPicking] = useState<{ edgeId: number; endpoint: 'source' | 'target' } | null>(null)
   const [handleReconnectDrag, setHandleReconnectDrag] = useState<HandleReconnectDragState | null>(null)
   const [connectorLongPressMenu, setConnectorLongPressMenu] = useState<{ edgeId: number; x: number; y: number } | null>(null)
+  const isMovingRef = useRef(false)
 
   interactionSourceIdRef.current = interactionSourceId
 
@@ -185,11 +292,13 @@ export function useCanvasInteractions({
   const connectingSourceRef = useRef<string | null>(null)
   const connectWasValidRef = useRef(false)
   const connectGhostListenerRef = useRef<((e: MouseEvent) => void) | null>(null)
+  const connectorDragLastUpdateRef = useRef(0)
   const isReconnectingRef = useRef(false)
   const suppressNextConnectorClickRef = useRef(false)
   const suppressNextPaneClickRef = useRef(false)
   const longPressCanvasRef = useRef<{ timer: ReturnType<typeof setTimeout>; clientX: number; clientY: number } | null>(null)
   const pendingConnectionSourceRef = useRef(pendingConnectionSource)
+  const pendingConnectionSourceHandleRef = useRef<string | null>(null)
   pendingConnectionSourceRef.current = pendingConnectionSource
   const clickConnectModeRef = useRef(clickConnectMode)
   clickConnectModeRef.current = clickConnectMode
@@ -225,35 +334,11 @@ export function useCanvasInteractions({
     isReconnectingRef.current = false
   }, [clearHandleReconnectListeners])
 
-  const findNearestHandleTarget = useCallback((clientX: number, clientY: number, excludeNodeId?: string) => {
-    const handles = document.querySelectorAll('.react-flow__handle')
-    let hoveredHandleId: string | undefined
-    let hoveredNodeId: string | undefined
-    let snapPos = { x: clientX, y: clientY }
-    let nearestDistance = Infinity
-
-    for (const handle of handles) {
-      const nodeId = handle.closest('.react-flow__node')?.getAttribute('data-id') || undefined
-      if (excludeNodeId && nodeId === excludeNodeId) continue
-      const rect = handle.getBoundingClientRect()
-      const cx = rect.left + rect.width / 2
-      const cy = rect.top + rect.height / 2
-      const dist = Math.hypot(clientX - cx, clientY - cy)
-      if (dist < 36 && dist < nearestDistance) {
-        nearestDistance = dist
-        snapPos = { x: cx, y: cy }
-        hoveredHandleId = handle.getAttribute('data-handleid') || handle.id
-        hoveredNodeId = nodeId
-      }
-    }
-
-    return {
-      nearHandle: hoveredHandleId !== undefined,
-      snapPos,
-      hoveredHandleId,
-      hoveredNodeId,
-    }
-  }, [])
+  const finalizeConnectorCreate = useCallback(async (connector: Connector) => {
+    upsertConnectorGraphSnapshot(connector)
+    upsertConnector(connector)
+    await refreshElements()
+  }, [refreshElements, upsertConnector])
 
   // ── Ref-forwarded callbacks ────────────────────────────────────────────────
   const openConnectorPanelRef = useRef(openConnectorPanel)
@@ -304,8 +389,10 @@ export function useCanvasInteractions({
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'add') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     try {
       const obj = await api.elements.create({ name, kind: '' })
       await api.workspace.views.placements.add(viewId, obj.id, flowX - 100, flowY - 40)
@@ -319,20 +406,22 @@ export function useCanvasInteractions({
           : { sourceHandle: 'right', targetHandle: 'left' }
         const newConnector = await api.workspace.connectors.create(viewId, {
           source_element_id: sourceId, target_element_id: obj.id,
-          source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
+          source_handle: pendingSourceHandle ?? sourceHandle, target_handle: targetHandle, direction: 'forward',
         })
-        upsertConnectorGraphSnapshot(newConnector)
-        setConnectors((prev) => [...prev, connectorToConnector(newConnector)])
+        const connector = connectorToConnector(newConnector)
+        await finalizeConnectorCreate(connector)
       }
     } catch { /* intentionally empty */ }
-  }, [canEdit, viewId, addingElementAt, refreshElements, rfNodesRef, setConnectors, viewElementsRef])
+  }, [addingElementAt, canEdit, finalizeConnectorCreate, refreshElements, rfNodesRef, viewId, viewElementsRef])
 
   const handleConfirmExistingElement = useCallback(async (obj: LibraryElement) => {
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'add') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     try {
       if (!existingElementIds.has(obj.id)) {
         await api.workspace.views.placements.add(viewId, obj.id, flowX - 100, flowY - 40)
@@ -350,20 +439,22 @@ export function useCanvasInteractions({
             : { sourceHandle: 'right', targetHandle: 'left' }
         const newConnector = await api.workspace.connectors.create(viewId, {
           source_element_id: sourceId, target_element_id: obj.id,
-          source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
+          source_handle: pendingSourceHandle ?? sourceHandle, target_handle: targetHandle, direction: 'forward',
         })
-        upsertConnectorGraphSnapshot(newConnector)
-        setConnectors((prev) => [...prev, connectorToConnector(newConnector)])
+        const connector = connectorToConnector(newConnector)
+        await finalizeConnectorCreate(connector)
       }
     } catch { /* intentionally empty */ }
-  }, [canEdit, viewId, addingElementAt, existingElementIds, refreshElements, rfNodesRef, setConnectors, viewElementsRef])
+  }, [addingElementAt, canEdit, existingElementIds, finalizeConnectorCreate, refreshElements, rfNodesRef, viewId, viewElementsRef])
 
   const handleConfirmConnectExistingElement = useCallback(async (obj: LibraryElement) => {
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'connect') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     if (sourceId == null || sourceId === obj.id) return
     try {
       const sourceNode = rfNodesRef.current.find((n) => n.id === String(sourceId))
@@ -373,14 +464,14 @@ export function useCanvasInteractions({
       const newConnector = await api.workspace.connectors.create(viewId, {
         source_element_id: sourceId,
         target_element_id: obj.id,
-        source_handle: sourceHandle,
+        source_handle: pendingSourceHandle ?? sourceHandle,
         target_handle: targetHandle,
         direction: 'forward',
       })
-      upsertConnectorGraphSnapshot(newConnector)
-      setConnectors((prev) => [...prev, connectorToConnector(newConnector)])
+      const connector = connectorToConnector(newConnector)
+      await finalizeConnectorCreate(connector)
     } catch { /* intentionally empty */ }
-  }, [addingElementAt, canEdit, rfNodesRef, setConnectors, viewId])
+  }, [addingElementAt, canEdit, finalizeConnectorCreate, rfNodesRef, viewId])
 
   // ── Zoom-in / zoom-out stable callbacks ───────────────────────────────────
   const stableOnZoomIn = useCallback(async (elementId: number) => {
@@ -467,20 +558,98 @@ export function useCanvasInteractions({
     try {
       await api.workspace.views.placements.remove(viewId, elementId)
       removePlacementGraphSnapshot(viewId, elementId)
+      removeElementPlacement(elementId)
       handleElementDeleted(elementId)
       setInteractionSourceId(null)
+      pendingConnectionSourceHandleRef.current = null
     } catch { /* intentionally empty */ }
-  }, [canEdit, viewId, handleElementDeleted])
+  }, [canEdit, viewId, removeElementPlacement, handleElementDeleted])
+
+  const connectClickModeToHandle = useCallback(async (targetElementId: number, targetHandle: string) => {
+    if (!canEdit) return
+    const cid = viewIdRef.current
+    const sourceElementId = interactionSourceIdRef.current
+    if (cid === null || sourceElementId === null || sourceElementId === targetElementId) return
+
+    const sourceHandle = pendingConnectionSourceHandleRef.current ??
+      (clickConnectModeRef.current?.sourceHandle
+        ? getLogicalHandleId(clickConnectModeRef.current.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+        : DEFAULT_SOURCE_HANDLE_SIDE)
+    const logicalTargetHandle = getLogicalHandleId(targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? DEFAULT_TARGET_HANDLE_SIDE
+
+    setInteractionSourceId(null)
+    setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
+    setClickConnectMode(null)
+    setClickConnectCursorPos(null)
+    setConnectGhostPos(null)
+
+    try {
+      const newConnector = await api.workspace.connectors.create(cid, {
+        source_element_id: sourceElementId,
+        target_element_id: targetElementId,
+        source_handle: sourceHandle,
+        target_handle: logicalTargetHandle,
+        direction: 'forward',
+      })
+      const connector = connectorToConnector(newConnector)
+      await finalizeConnectorCreate(connector)
+    } catch { /* intentionally empty */ }
+  }, [canEdit, finalizeConnectorCreate, interactionSourceIdRef, viewIdRef])
+
+  const stableOnInteractionStart = useCallback((elementId: number, options?: InteractionStartOptions) => {
+    if (!canEdit) return
+    const sourceHandle = options?.sourceHandle
+
+    if (sourceHandle) {
+      const cursorPos = options?.clientX !== undefined && options.clientY !== undefined
+        ? { x: options.clientX, y: options.clientY }
+        : lastMousePosRef.current
+          ? { x: lastMousePosRef.current.clientX, y: lastMousePosRef.current.clientY }
+          : null
+      if (!cursorPos) return
+
+      const activeSourceId = interactionSourceIdRef.current
+      if (activeSourceId !== null && activeSourceId !== elementId) {
+        void connectClickModeToHandle(elementId, sourceHandle)
+        return
+      }
+
+      pendingConnectionSourceHandleRef.current = getLogicalHandleId(sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+      setInteractionSourceId(elementId)
+      setPendingConnectionSource(null)
+      setAddingElementAt(null)
+      setClickConnectMode({
+        sourceNodeId: String(elementId),
+        sourceHandle: ensureVisualHandleId(sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? sourceHandle,
+      })
+      setClickConnectCursorPos(cursorPos)
+      setConnectGhostPos(cursorPos)
+      return
+    }
+
+    const isCancelling = interactionSourceIdRef.current === elementId
+    const nextSourceId = isCancelling ? null : elementId
+
+    if (isCancelling) pendingConnectionSourceHandleRef.current = null
+    setInteractionSourceId(nextSourceId)
+
+    if (isCancelling) {
+      setClickConnectMode(null)
+      setClickConnectCursorPos(null)
+      setConnectGhostPos(null)
+    }
+  }, [canEdit, connectClickModeToHandle, interactionSourceIdRef])
 
   // ── Node/connector changes ─────────────────────────────────────────────────────
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     if (!canEdit) {
       const nonMutating = changes.filter((c) => c.type !== 'position')
       if (nonMutating.length === 0) return
-      setRfNodes((nds) => applyNodeChanges(nonMutating, nds))
+      setRfNodes((nds) => applyNodeChangesWithStructuralSharing(nonMutating, nds))
       return
     }
-    setRfNodes((nds) => applyNodeChanges(changes, nds))
+    setRfNodes((nds) => applyNodeChangesWithStructuralSharing(changes, nds))
   }, [canEdit, setRfNodes])
 
   const onEdgesChange = useCallback((changes: EdgeChange[]) => {
@@ -494,18 +663,11 @@ export function useCanvasInteractions({
     dragStartPositionsRef.current[node.id] = { x: node.position.x, y: node.position.y }
   }, [canEdit, viewId])
 
-  const onNodeDrag: NodeDragHandler = useCallback((_e, node) => {
-    if (!canEdit || viewId === null) return
-    const elementId = parseNumericId(node.id)
-    if (elementId === null) return
-    setViewElements((prev) =>
-      prev.map((element) =>
-        element.element_id === elementId
-          ? { ...element, position_x: node.position.x, position_y: node.position.y }
-          : element,
-      ),
-    )
-  }, [canEdit, setViewElements, viewId])
+  const onNodeDrag: NodeDragHandler = useCallback(() => {
+    // React Flow already updates rfNodes via onNodesChange while dragging.
+    // Mirroring into viewElements here forces every derived edge/node to rebuild
+    // on each pointer frame, so persist to app state only on drag stop.
+  }, [])
 
   const positionTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({})
   const dragStartPositionsRef = useRef<Record<string, { x: number; y: number }>>({})
@@ -522,13 +684,7 @@ export function useCanvasInteractions({
       return
     }
 
-    setViewElements((prev) =>
-      prev.map((element) =>
-        element.element_id === elementId
-          ? { ...element, position_x: node.position.x, position_y: node.position.y }
-          : element,
-      ),
-    )
+    updateElementPosition(elementId, node.position.x, node.position.y)
     clearTimeout(positionTimers.current[node.id])
     positionTimers.current[node.id] = setTimeout(() => {
       api.workspace.views.placements
@@ -536,7 +692,7 @@ export function useCanvasInteractions({
         .catch(() => { /* intentionally empty */ })
     }, 400)
     delete dragStartPositionsRef.current[node.id]
-  }, [canEdit, setViewElements, viewId, viewElementsRef])
+  }, [canEdit, updateElementPosition, viewId, viewElementsRef])
 
   // ── Connections ────────────────────────────────────────────────────────────
   const onConnect: OnConnect = useCallback(async (params: Connection) => {
@@ -554,25 +710,23 @@ export function useCanvasInteractions({
         source_handle: sourceHandle, target_handle: targetHandle,
         direction: 'forward', style: 'bezier',
       })
-      upsertConnectorGraphSnapshot(newConnector)
-      setConnectors((prev) => [...prev, connectorToConnector(newConnector)])
+      const connector = connectorToConnector(newConnector)
+      await finalizeConnectorCreate(connector)
     } catch { /* intentionally empty */ }
-  }, [canEdit, setConnectors, viewId])
+  }, [canEdit, finalizeConnectorCreate, viewId])
 
   const onConnectStart = useCallback((_: React.MouseEvent | React.TouchEvent, { nodeId }: OnConnectStartParams) => {
     if (!canEdit || isReconnectingRef.current) return
     connectingSourceRef.current = nodeId
     connectWasValidRef.current = false
+    const handleTargets = collectHandleTargets(nodeId ?? undefined)
+    connectorDragLastUpdateRef.current = 0
     const listener = (e: MouseEvent) => {
-      const handles = document.querySelectorAll('.react-flow__handle')
-      let nearHandle = false
-      for (const handle of handles) {
-        const rect = handle.getBoundingClientRect()
-        if (Math.hypot(e.clientX - (rect.left + rect.width / 2), e.clientY - (rect.top + rect.height / 2)) < 36) {
-          nearHandle = true; break
-        }
-      }
-      setConnectGhostPos(nearHandle ? null : { x: e.clientX, y: e.clientY })
+      const now = performance.now()
+      if (now - connectorDragLastUpdateRef.current < CONNECTOR_DRAG_UPDATE_INTERVAL_MS) return
+      connectorDragLastUpdateRef.current = now
+      const hit = findNearestHandleTargetInCache(handleTargets, e.clientX, e.clientY)
+      setConnectGhostPos(hit.nearHandle ? null : { x: e.clientX, y: e.clientY })
     }
     connectGhostListenerRef.current = listener
     document.addEventListener('mousemove', listener)
@@ -618,15 +772,15 @@ export function useCanvasInteractions({
         source_element_id: sourceElementId, target_element_id: targetElementId,
         source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
       }).then((connector) => {
-        upsertConnectorGraphSnapshot(connector)
-        setConnectors((prev) => [...prev, connectorToConnector(connector)])
+        const next = connectorToConnector(connector)
+        void finalizeConnectorCreate(next)
       }).catch(() => { /* intentionally empty */ })
     } else {
       setPendingConnectionSource(sourceElementId)
       suppressNextPaneClickRef.current = true
       showAddingElementAt(clientX, clientY, true, 'connect', 'shiftKey' in event && event.shiftKey)
     }
-  }, [canEdit, setConnectors, showAddingElementAt, rfNodesRef, viewIdRef])
+  }, [canEdit, finalizeConnectorCreate, showAddingElementAt, rfNodesRef, viewIdRef])
 
   // ── Reconnect ──────────────────────────────────────────────────────────────
   const performReconnect = useCallback(async (oldConnector: RFEdge, newConnection: Connection) => {
@@ -636,7 +790,6 @@ export function useCanvasInteractions({
     const targetId = parseNumericId(newConnection.target)
     if (edgeId === null || sourceId === null || targetId === null) return
     setRfEdges((eds) => reconnectEdge(oldConnector, newConnection, eds))
-    setSelectedEdgeId(null)
     try {
       const existingData = oldConnector.data as Connector
       const sourceHandle = getLogicalHandleId(newConnection.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
@@ -650,12 +803,11 @@ export function useCanvasInteractions({
         style: existingData?.style === 'default' ? 'bezier' : (existingData?.style ?? 'bezier'),
         url: existingData?.url ?? undefined, relationship: existingData?.relationship ?? undefined,
       })
-      upsertConnectorGraphSnapshot(updated)
-      setConnectors((prev) =>
-        prev.map((connector) => (connector.id === edgeId ? connectorToConnector(updated) : connector)),
-      )
+      const connector = connectorToConnector(updated)
+      upsertConnectorGraphSnapshot(connector)
+      replaceConnector(connector)
     } catch { /* intentionally empty */ }
-  }, [canEdit, setConnectors, viewId, setRfEdges, setSelectedEdgeId])
+  }, [canEdit, replaceConnector, viewId, setRfEdges])
   const onReconnect = useCallback(async (oldConnector: RFEdge, newConnection: Connection) => {
     await performReconnect(oldConnector, newConnection)
   }, [performReconnect])
@@ -685,6 +837,8 @@ export function useCanvasInteractions({
     setConnectGhostPos(null)
     clearHandleReconnectListeners()
     isReconnectingRef.current = true
+    const handleTargets = collectHandleTargets(fixedNodeId)
+    connectorDragLastUpdateRef.current = 0
     syncHandleReconnectDrag({
       edgeId: args.edgeId,
       endpoint: args.endpoint,
@@ -695,7 +849,10 @@ export function useCanvasInteractions({
     })
 
     const move = (event: PointerEvent) => {
-      const hit = findNearestHandleTarget(event.clientX, event.clientY)
+      const now = performance.now()
+      if (now - connectorDragLastUpdateRef.current < CONNECTOR_DRAG_UPDATE_INTERVAL_MS) return
+      connectorDragLastUpdateRef.current = now
+      const hit = findNearestHandleTargetInCache(handleTargets, event.clientX, event.clientY)
       const current = handleReconnectDragRef.current
       if (!current) return
       syncHandleReconnectDrag({
@@ -776,7 +933,7 @@ export function useCanvasInteractions({
     document.addEventListener('pointermove', move)
     document.addEventListener('pointerup', up)
     document.addEventListener('pointercancel', up)
-  }, [canEdit, clearHandleReconnectListeners, findNearestHandleTarget, performReconnect, rfNodesRef, _rfEdgesRef, syncHandleReconnectDrag])
+  }, [canEdit, clearHandleReconnectListeners, performReconnect, rfNodesRef, _rfEdgesRef, syncHandleReconnectDrag])
 
   // ── Click-connect ghost cursor tracking ────────────────────────────────────
   useEffect(() => {
@@ -785,43 +942,29 @@ export function useCanvasInteractions({
       setConnectGhostPos(null)
       return
     }
+    const handleTargets = collectHandleTargets(clickConnectMode.sourceNodeId)
+    const sourceHandleTargets = collectHandleTargets().filter((target) => target.nodeId === clickConnectMode.sourceNodeId)
+    connectorDragLastUpdateRef.current = 0
     const listener = (e: MouseEvent) => {
-      const handles = document.querySelectorAll('.react-flow__handle')
-      let nearHandle = false
-      let snapPos = { x: e.clientX, y: e.clientY }
-      let hoveredTargetHandleId: string | undefined = undefined
-      let nearestTargetHandleDistance = Infinity
-      for (const handle of handles) {
-        if (handle.closest(`[data-id="${clickConnectMode.sourceNodeId}"]`)) continue
-        const rect = handle.getBoundingClientRect()
-        const cx = rect.left + rect.width / 2
-        const cy = rect.top + rect.height / 2
-        const dist = Math.hypot(e.clientX - cx, e.clientY - cy)
-        if (dist < 36 && dist < nearestTargetHandleDistance) {
-          nearestTargetHandleDistance = dist
-          nearHandle = true
-          snapPos = { x: cx, y: cy }
-          hoveredTargetHandleId = handle.getAttribute('data-handleid') || handle.id
-        }
-      }
-      setClickConnectCursorPos(snapPos)
-      setConnectGhostPos(nearHandle ? null : { x: e.clientX, y: e.clientY })
+      const now = performance.now()
+      if (now - connectorDragLastUpdateRef.current < CONNECTOR_DRAG_UPDATE_INTERVAL_MS) return
+      connectorDragLastUpdateRef.current = now
+      const hit = findNearestHandleTargetInCache(handleTargets, e.clientX, e.clientY)
+      setClickConnectCursorPos(hit.snapPos)
+      setConnectGhostPos(hit.nearHandle ? null : { x: e.clientX, y: e.clientY })
       setClickConnectMode((prev) => {
         if (!prev) return null
         let bestHandle = prev.sourceHandle
-        const sourceNodeEl = document.querySelector(`.react-flow__node[data-id="${prev.sourceNodeId}"]`)
-        if (sourceNodeEl) {
-          const sourceHandles = sourceNodeEl.querySelectorAll('.react-flow__handle')
-          let minDist = Infinity
-          for (const h of sourceHandles) {
-            const rect = h.getBoundingClientRect()
-            const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2
-            const dist = Math.hypot(e.clientX - cx, e.clientY - cy)
-            if (dist < minDist) { minDist = dist; bestHandle = h.getAttribute('data-handleid') || h.id }
+        let minDist = Infinity
+        for (const target of sourceHandleTargets) {
+          const dist = Math.hypot(e.clientX - target.x, e.clientY - target.y)
+          if (dist < minDist) {
+            minDist = dist
+            bestHandle = target.handleId
           }
         }
-        if (prev.sourceHandle !== bestHandle || prev.targetHandle !== hoveredTargetHandleId) {
-          return { ...prev, sourceHandle: bestHandle, targetHandle: hoveredTargetHandleId }
+        if (prev.sourceHandle !== bestHandle || prev.targetHandle !== hit.hoveredHandleId) {
+          return { ...prev, sourceHandle: bestHandle, targetHandle: hit.hoveredHandleId }
         }
         return prev
       })
@@ -855,7 +998,6 @@ export function useCanvasInteractions({
       setSelectedElement(null)
       closeElementPanel()
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       closeConnectorPanel()
       setSelectedProxyConnectorDetails((rfConnector.data as { details?: import('../../../crossBranch/types').ProxyConnectorDetails }).details ?? null)
       openProxyConnectorPanel()
@@ -863,16 +1005,14 @@ export function useCanvasInteractions({
     }
     const clickedId = parseNumericId(rfConnector.id)
     if (clickedId === null) return
-    if (selectedEdgeId === clickedId) {
-      const connector = connectors.find((e) => e.id === clickedId)
-      if (connector) { setSelectedEdge(connector); openConnectorPanelRef.current() }
-      setSelectedEdgeId(null)
-    } else {
-      setSelectedElement(null)
-      closeElementPanel()
-      setSelectedEdgeId(clickedId)
-    }
-  }, [closeConnectorPanel, closeElementPanel, connectors, openProxyConnectorPanel, selectedEdgeId, setSelectedEdge, setSelectedEdgeId, setSelectedElement, setSelectedProxyConnectorDetails])
+    const connector = connectors.find((e) => e.id === clickedId)
+    if (!connector) return
+    setSelectedElement(null)
+    closeElementPanel()
+    setSelectedProxyConnectorDetails(null)
+    setSelectedEdge(connector)
+    openConnectorPanelRef.current()
+  }, [closeElementPanel, connectors, openProxyConnectorPanel, setSelectedEdge, setSelectedElement, setSelectedProxyConnectorDetails])
 
   // ── Pane interactions ─────────────────────────────────────────────────────
   const onPaneClick = useCallback((e: React.MouseEvent) => {
@@ -881,7 +1021,6 @@ export function useCanvasInteractions({
     setReconnectPicking(null)
     setSelectedElement(null)
     setSelectedEdge(null)
-    setSelectedEdgeId(null)
     setSelectedProxyConnectorDetails(null)
     setConnectorLongPressMenu(null)
     setCanvasMenu(null)
@@ -904,14 +1043,18 @@ export function useCanvasInteractions({
       } else {
         setInteractionSourceId(null)
         setPendingConnectionSource(sourceId)
+        pendingConnectionSourceHandleRef.current = clickConnectModeRef.current?.sourceHandle
+          ? getLogicalHandleId(clickConnectModeRef.current.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+          : pendingConnectionSourceHandleRef.current
         showAddingElementAt(e.clientX, e.clientY, true, 'connect', e.shiftKey)
       }
       return
     }
     setInteractionSourceId(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     setAddingElementAt(null)
-  }, [stableOnConnectTo, showAddingElementAt, closeElementPanel, closeConnectorPanel, closeProxyConnectorPanel, rfNodesRef, interactionSourceIdRef, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails])
+  }, [stableOnConnectTo, showAddingElementAt, closeElementPanel, closeConnectorPanel, closeProxyConnectorPanel, rfNodesRef, interactionSourceIdRef, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails])
 
   const onPaneContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
@@ -930,21 +1073,23 @@ export function useCanvasInteractions({
   }, [])
 
   const onMoveStart = useCallback(() => {
+    if (isMovingRef.current) return
+    isMovingRef.current = true
     setCanvasMenu(null)
     setConnectorLongPressMenu(null)
     setAddingElementAt(null)
-    setRfNodes((nds) => nds.map((n) => ({ ...n, data: { ...n.data, isCanvasMoving: true } })))
     onMoveStateChange?.(true)
-  }, [setRfNodes, onMoveStateChange])
+  }, [onMoveStateChange])
 
   const onMove = useCallback((_: unknown, viewport: { x: number; y: number; zoom: number }) => {
     drawingCanvasRef.current?.notifyViewportChange(viewport)
   }, [drawingCanvasRef])
 
   const onMoveEnd = useCallback(() => {
-    setRfNodes((nds) => nds.map((n) => ({ ...n, data: { ...n.data, isCanvasMoving: false } })))
+    if (!isMovingRef.current) return
+    isMovingRef.current = false
     onMoveStateChange?.(false)
-  }, [setRfNodes, onMoveStateChange])
+  }, [onMoveStateChange])
 
   // ── Touch & long-press ────────────────────────────────────────────────────
   function getTouchDistance(touches: Map<number, { x: number; y: number }>): number {
@@ -1073,10 +1218,12 @@ export function useCanvasInteractions({
             setSelectedElement(null)
             closeElementPanel()
           }
-        } else if (selectedEdgeId) {
-          api.workspace.connectors.delete('', selectedEdgeId).then(() => {
-            handleConnectorDeleted(selectedEdgeId)
-            setSelectedEdgeId(null)
+        } else {
+          const connectorId = getConnectorDeletionTarget(selectedConnector)
+          if (connectorId === null) return
+          api.workspace.connectors.delete('', connectorId).then(() => {
+            handleConnectorDeleted(connectorId)
+            setSelectedEdge(null)
             closeConnectorPanel()
           }).catch(() => { /* intentionally empty */ })
         }
@@ -1185,7 +1332,7 @@ export function useCanvasInteractions({
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [canEdit, refreshGrid, selectedElement, selectedEdgeId, viewId, stableOnRemoveElement, handleConnectorDeleted, handleElementPermanentlyDeleted,  closeElementPanel, closeConnectorPanel, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, rfNodesRef, viewElementsRef, setLinksMap, showAddingElementAt, setSelectedElement, setSelectedEdge, setSelectedEdgeId, containerRef, linksMapRef])
+  }, [canEdit, refreshGrid, selectedElement, selectedConnector, viewId, stableOnRemoveElement, handleConnectorDeleted, handleElementPermanentlyDeleted,  closeElementPanel, closeConnectorPanel, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, rfNodesRef, viewElementsRef, setLinksMap, showAddingElementAt, setSelectedElement, setSelectedEdge, containerRef, linksMapRef])
 
   // ── DnD handlers ──────────────────────────────────────────────────────────
   const onDragOver = useCallback((e: React.DragEvent) => {
@@ -1300,6 +1447,7 @@ export function useCanvasInteractions({
     stableOnHoverZoom,
     stableOnRemoveElement,
     stableOnConnectTo,
+    stableOnInteractionStart,
     stableOnStartHandleReconnect,
     showAddingElementAt,
     // RF event handlers