@tldiagram/core-ui 1.92.0 → 1.94.0

package/src/pages/ViewEditor/index.tsx

@@ -11,7 +11,6 @@ import ReactFlow, {
   PanOnScrollMode,
   ReactFlowProvider,
   useReactFlow,
-  applyNodeChanges,
 } from 'reactflow'
 import type { Edge as RFEdge, EdgeMarker as RFEdgeMarker, Node as RFNode, NodeChange } from 'reactflow'
 import 'reactflow/dist/style.css'
@@ -74,8 +73,8 @@ import type { ExtensionToWebviewMessage } from '../../types/vscode-messages'
 import { ViewEditorContext } from './context'
 import { useViewData } from './hooks/useViewData'
 import { useDrawingEngine } from './hooks/useDrawingEngine'
-import { useCanvasInteractions } from './hooks/useCanvasInteractions'
-import { sanitizeExportFilename, triggerDownload } from './utils'
+import { applyNodeChangesWithStructuralSharing, useCanvasInteractions } from './hooks/useCanvasInteractions'
+import { connectorToConnector, findClosestHandles, sanitizeExportFilename, triggerDownload } from './utils'
 import { pickUnusedColor } from '../../components/ViewExplorer/utils'
 
 import { EmptyCanvasState } from './components/EmptyCanvasState'
@@ -86,6 +85,7 @@ import { useCrossBranchContextSettings } from '../../crossBranch/settings'
 import { removeConnectorGraphSnapshot, upsertConnectorGraphSnapshot, useWorkspaceGraphSnapshot } from '../../crossBranch/store'
 import type { ProxyConnectorDetails } from '../../crossBranch/types'
 import { useDemoRevealViewport, type ViewEditorDemoOptions } from '../../demo/viewEditor'
+import { buildElementLibraryItems, useStore } from '../../store/useStore'
 
 const nodeTypes = {
   elementNode: ElementNode,
@@ -99,6 +99,7 @@ const VIEW_EDITOR_EMPTY_EXTENT_RATIO = 0.75
 const VIEW_EDITOR_PAN_MARGIN_RATIO = 0.25
 const VIEW_EDITOR_PAN_MARGIN_MIN = 180
 const VIEW_EDITOR_PAN_MARGIN_MAX = 720
+const SNAP_GRID: [number, number] = [30, 30]
 
 function alphaColor(color: string, opacity: number): string {
   if (opacity >= 1) return color
@@ -200,10 +201,8 @@ function ViewEditorInner({
   const closeImportModalRef = useRef(importModal.onClose)
   closeImportModalRef.current = importModal.onClose
 
-
   const [selectedElement, setSelectedElement] = useState<WorkspaceElement | null>(null)
   const [selectedEdge, setSelectedEdge] = useState<Connector | null>(null)
-  const [selectedEdgeId, setSelectedEdgeId] = useState<number | null>(null)
   const [selectedProxyConnectorDetails, setSelectedProxyConnectorDetails] = useState<ProxyConnectorDetails | null>(null)
   const [previewElement, setPreviewElement] = useState<PlacedElement | null>(null)
   const [libraryOpen, setLibraryOpen] = useState(() => {
@@ -222,11 +221,34 @@ function ViewEditorInner({
   const [extrasOpen, setExtrasOpen] = useState(false)
   const [isImporting, setIsImporting] = useState(false)
   const [isExporting, setIsExporting] = useState(false)
-  const [snapToGrid, setSnapToGrid] = useState(() => {
-    if (typeof window === 'undefined') return false
-    const stored = localStorage.getItem('diag:snapToGrid')
-    return stored === 'true'
-  })
+  const setViewEditorUi = useStore((state) => state.setViewEditorUi)
+  const snapToGrid = useStore((state) => state.snapToGrid)
+  const setStoreSnapToGrid = useStore((state) => state.setSnapToGrid)
+  const upsertStoreConnector = useStore((state) => state.upsertConnector)
+  const removeStoreConnector = useStore((state) => state.removeConnector)
+  const refreshElementsRef = useRef<() => Promise<void>>(async () => {})
+  const setSnapToGrid = useCallback((snap: boolean) => {
+    setStoreSnapToGrid(snap)
+    if (typeof window !== 'undefined') localStorage.setItem('diag:snapToGrid', String(snap))
+  }, [setStoreSnapToGrid])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    setStoreSnapToGrid(localStorage.getItem('diag:snapToGrid') === 'true')
+  }, [setStoreSnapToGrid])
+
+  useEffect(() => {
+    setViewEditorUi({
+      viewId,
+      canEdit,
+      isOwner,
+      isFreePlan,
+      snapToGrid,
+      selectedElement,
+      selectedConnector: selectedEdge,
+    })
+  }, [canEdit, isFreePlan, isOwner, selectedEdge, selectedElement, setViewEditorUi, snapToGrid, viewId])
+
   useEffect(() => { localStorage.setItem('diag:snapToGrid', String(snapToGrid)) }, [snapToGrid])
   const [, setHoveredZoom] = useState<{ elementId: number | null; type: 'in' | 'out' | null } | null>(null)
   const hoveredZoomRef = useRef<{ elementId: number | null; type: 'in' | 'out' | null } | null>(null)
@@ -325,6 +347,7 @@ function ViewEditorInner({
 
   // stableOnConnectTo is wired after canvasInteractions is declared
   const stableOnConnectToRef = useRef<(targetElementId: number) => Promise<void>>(async () => { })
+  const stableOnInteractionStartRef = useRef<(elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void>(() => { })
   const stableOnStartHandleReconnectRef = useRef<(args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void>(() => { })
 
   // ── Drawing engine ────────────────────────────────────────────────────────
@@ -347,7 +370,7 @@ function ViewEditorInner({
     viewId,
     interactionSourceId: interactionSourceIdRef.current,
     clickConnectMode: null, // wired after canvasInteractions
-    selectedEdgeId,
+    selectedConnector: selectedEdge,
     activeTags,
     hiddenLayerTags,
     hoveredLayerTags,
@@ -358,7 +381,6 @@ function ViewEditorInner({
     stableOnNavigateToView: useCallback((id: number) => { stableOnNavigateToViewRef.current(id) }, []),
     stableOnSelect: useCallback((obj: PlacedElement) => {
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       setSelectedProxyConnectorDetails(null)
       closeProxyConnectorPanelRef.current()
       closeConnectorPanelRef.current()
@@ -378,10 +400,9 @@ function ViewEditorInner({
         openCodePreviewRef.current()
       }
     }, []),
-    stableOnInteractionStart: useCallback((elementId: number) => {
-      if (!canEdit) return
-      interactionSourceIdRef.current = interactionSourceIdRef.current === elementId ? null : elementId
-    }, [canEdit]),
+    stableOnInteractionStart: useCallback((elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => {
+      stableOnInteractionStartRef.current(elementId, options)
+    }, []),
     stableOnConnectTo: useCallback(async (targetElementId: number) => {
       await stableOnConnectToRef.current(targetElementId)
     }, []),
@@ -409,6 +430,7 @@ function ViewEditorInner({
     handleElementDeleted, handleElementPermanentlyDeleted, handleElementSaved,
     setAllElements: _setAllElements,
   } = data
+  refreshElementsRef.current = refreshElements
 
   const tagCounts = useMemo(() => {
     const counts: Record<string, number> = {}
@@ -476,27 +498,7 @@ function ViewEditorInner({
     return unsub
   }, [fitView, viewId, refreshElements])
 
-  const existingElements = useMemo(() => {
-    return viewElements.map(obj => ({
-      id: obj.element_id,
-      name: obj.name,
-      kind: obj.kind,
-      description: obj.description,
-      technology: obj.technology,
-      url: obj.url,
-      logo_url: obj.logo_url,
-      technology_connectors: obj.technology_connectors,
-      tags: obj.tags,
-      repo: obj.repo,
-      branch: obj.branch,
-      file_path: obj.file_path,
-      language: obj.language,
-      created_at: '',
-      updated_at: '',
-      has_view: false,
-      view_label: null,
-    } as WorkspaceElement))
-  }, [viewElements])
+  const existingElements = useMemo(() => buildElementLibraryItems(allElements, viewElements), [allElements, viewElements])
 
   const availableTags = useMemo(() => {
     const tags = new Set<string>()
@@ -528,7 +530,6 @@ function ViewEditorInner({
     const match = viewElements.find((element) => element.element_id === requestedElementId)
     if (!match) return
     setSelectedEdge(null)
-    setSelectedEdgeId(null)
     setSelectedProxyConnectorDetails(null)
     closeConnectorPanelRef.current()
     closeProxyConnectorPanelRef.current()
@@ -613,7 +614,7 @@ function ViewEditorInner({
       const targetNode = rfNodesRef.current.find((n) => n.id === String(targetElementId))
       let finalSourceHandle = 'right'; let finalTargetHandle = 'left'
       if (sourceNode && targetNode) {
-        const h = (await import('./utils')).findClosestHandles(sourceNode, targetNode)
+        const h = findClosestHandles(sourceNode, targetNode)
         finalSourceHandle = h.sourceHandle; finalTargetHandle = h.targetHandle
       }
       try {
@@ -621,9 +622,9 @@ function ViewEditorInner({
           source_element_id: sourceId, target_element_id: targetElementId,
           source_handle: finalSourceHandle, target_handle: finalTargetHandle, direction: 'forward',
         })
-        const connector = (await import('./utils')).connectorToConnector(newConnector)
+        const connector = connectorToConnector(newConnector)
         upsertConnectorGraphSnapshot(connector)
-        setConnectors((prev) => [...prev, connector])
+        upsertStoreConnector(connector)
       } catch { /* intentionally empty */ }
     },
     existingElementIds, linksMapRef, parentLinksMapRef,
@@ -631,33 +632,22 @@ function ViewEditorInner({
     closeElementPanel: useCallback(() => closeElementPanelRef.current(), []),
     openConnectorPanel: useCallback(() => openConnectorPanelRef.current(), []),
     closeConnectorPanel: useCallback(() => closeConnectorPanelRef.current(), []),
-    selectedElement, selectedEdgeId, connectors,
+    selectedElement, selectedConnector: selectedEdge, connectors,
     layers,
     setSelectedElement,
-    setSelectedEdge, setSelectedEdgeId,
+    setSelectedEdge,
     setSelectedProxyConnectorDetails,
     openProxyConnectorPanel: useCallback(() => openProxyConnectorPanelRef.current(), []),
     closeProxyConnectorPanel: useCallback(() => closeProxyConnectorPanelRef.current(), []),
     handleElementDeleted, handleElementPermanentlyDeleted,
     handleConnectorDeleted: useCallback((edgeId: number) => {
       if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-      setConnectors((prev) => prev.filter((connector) => connector.id !== edgeId))
-    }, [setConnectors, viewId]),
+      removeStoreConnector(edgeId)
+      void refreshElementsRef.current()
+    }, [removeStoreConnector, viewId]),
     handleUpdateTags,
     drawingCanvasRef,
     snapToGrid,
-    onMoveStateChange: useCallback((moving: boolean) => {
-      setLiveContextNodes((nds) => {
-        let changed = false
-        const nextNodes = nds.map((node) => {
-          const currentMoving = Boolean((node.data as { isCanvasMoving?: boolean }).isCanvasMoving)
-          if (currentMoving === moving) return node
-          changed = true
-          return { ...node, data: { ...node.data, isCanvasMoving: moving } }
-        })
-        return changed ? nextNodes : nds
-      })
-    }, []),
   })
 
   // Wire stable placeholders to the real implementations from canvas hook
@@ -667,8 +657,9 @@ function ViewEditorInner({
     stableOnNavigateToViewRef.current = canvas.stableOnNavigateToView
     stableOnRemoveElementRef.current = canvas.stableOnRemoveElement
     stableOnConnectToRef.current = canvas.stableOnConnectTo
+    stableOnInteractionStartRef.current = canvas.stableOnInteractionStart
     stableOnStartHandleReconnectRef.current = canvas.stableOnStartHandleReconnect
-  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnStartHandleReconnect])
+  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect])
   const viewName = view?.name ?? null
 
   const [expandedAncestorGroups, setExpandedAncestorGroups] = useState<Set<string>>(new Set())
@@ -691,7 +682,6 @@ function ViewEditorInner({
     onSelectProxyDetails: useCallback((details: ProxyConnectorDetails) => {
       setSelectedElement(null)
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       closeConnectorPanelRef.current()
       closeElementPanelRef.current()
       setSelectedProxyConnectorDetails(details)
@@ -826,7 +816,7 @@ function ViewEditorInner({
     const ctxChanges = changes.filter((c) => 'id' in c && contextNodeIdsRef.current.has((c as { id: string }).id))
     const mainChanges = changes.filter((c) => !('id' in c) || !contextNodeIdsRef.current.has((c as { id: string }).id))
     if (ctxChanges.length > 0) {
-      setLiveContextNodes((nds) => applyNodeChanges(ctxChanges, nds))
+      setLiveContextNodes((nds) => applyNodeChangesWithStructuralSharing(ctxChanges, nds))
     }
     if (mainChanges.length > 0) {
       canvasOnNodesChange(mainChanges)
@@ -904,7 +894,7 @@ function ViewEditorInner({
     return () => observer.disconnect()
   }, [maybeFitView])
 
-  useEffect(() => { setRfNodes([]); setRfEdges([]); needsFitView.current = true }, [viewId, setRfEdges, setRfNodes])
+  useEffect(() => { needsFitView.current = true }, [viewId])
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
   useEffect(() => {
@@ -1010,12 +1000,17 @@ function ViewEditorInner({
   const handleOpenExport = useCallback(() => exportModal.onOpen(), [exportModal])
   const handleConnectorSave = useCallback((updated: Connector) => {
     upsertConnectorGraphSnapshot(updated)
-    setConnectors((prev) => prev.map((c) => (c.id === updated.id ? updated : c)))
-  }, [setConnectors])
-  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+    upsertStoreConnector(updated)
+  }, [upsertStoreConnector])
+  const handleConnectorDeleted = useCallback((edgeId: number) => {
     if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-    setConnectors((prev) => prev.filter((c) => c.id !== edgeId))
-  }, [setConnectors, viewId])
+    removeStoreConnector(edgeId)
+    void refreshElements()
+  }, [refreshElements, removeStoreConnector, viewId])
+  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+    handleConnectorDeleted(edgeId)
+    setSelectedEdge(null)
+  }, [handleConnectorDeleted, setSelectedEdge])
   const handleViewSave = useCallback((updated: ViewTreeNode) => setView(updated), [setView])
 
   // ── Library helpers ────────────────────────────────────────────────────────
@@ -1224,8 +1219,10 @@ function ViewEditorInner({
                 nodesDraggable={canEdit} connectionMode={ConnectionMode.Loose} connectionRadius={25}
                 edgesUpdatable={canEdit} reconnectRadius={0}
                 snapToGrid={snapToGrid}
-                snapGrid={[30, 30]}
+                snapGrid={SNAP_GRID}
                 deleteKeyCode={null}
+                onlyRenderVisibleElements
+                autoPanOnNodeDrag={false}
                 panOnDrag={!drawingMode}
                 panOnScroll={!isMobileLayout} panOnScrollSpeed={1.2} panOnScrollMode={PanOnScrollMode.Free}
                 zoomOnScroll={false} zoomOnPinch
@@ -1308,7 +1305,7 @@ function ViewEditorInner({
                 try {
                   await api.workspace.connectors.delete('', edgeId)
                   removeConnectorGraphSnapshot(viewId, edgeId)
-                  setConnectors((prev) => prev.filter((connector) => connector.id !== edgeId))
+                  removeStoreConnector(edgeId)
                 } catch { /* intentionally empty */ }
               }}
             />
@@ -1406,8 +1403,8 @@ function ViewEditorInner({
           onSave={handleConnectorSave} autoSave
           onDelete={handleConnectorDeleteInPanel}
           hasBackdrop={isMobileLayout}
-          connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
-        />
+              connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
+          />
         <ProxyConnectorPanel
           isOpen={proxyConnectorPanel.isOpen}
           onClose={proxyConnectorPanel.onClose}