@tldiagram/core-ui 1.92.0 → 1.93.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 { 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
@@ -222,11 +223,33 @@ 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 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)
@@ -613,7 +636,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 +644,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,
@@ -641,23 +664,11 @@ function ViewEditorInner({
     handleElementDeleted, handleElementPermanentlyDeleted,
     handleConnectorDeleted: useCallback((edgeId: number) => {
       if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-      setConnectors((prev) => prev.filter((connector) => connector.id !== edgeId))
-    }, [setConnectors, viewId]),
+      removeStoreConnector(edgeId)
+    }, [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
@@ -826,7 +837,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)
@@ -1010,12 +1021,12 @@ 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])
+    upsertStoreConnector(updated)
+  }, [upsertStoreConnector])
   const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
     if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-    setConnectors((prev) => prev.filter((c) => c.id !== edgeId))
-  }, [setConnectors, viewId])
+    removeStoreConnector(edgeId)
+  }, [removeStoreConnector, viewId])
   const handleViewSave = useCallback((updated: ViewTreeNode) => setView(updated), [setView])
 
   // ── Library helpers ────────────────────────────────────────────────────────
@@ -1224,8 +1235,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 +1321,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 */ }
               }}
             />

package/src/shims/empty-node-module.ts

@@ -0,0 +1 @@
+export default {}

package/src/store/useStore.test.ts

@@ -0,0 +1,272 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { Connector, LibraryElement, PlacedElement, ViewTreeNode } from '../types'
+import {
+  buildViewContentLinks,
+  canvasSelectors,
+  emptyViewEditorUiState,
+  findViewByOwner,
+  findViewPath,
+  mergeSavedElementIntoPlacements,
+  removeConnectorFromList,
+  removePlacedElement,
+  selectConnectorById,
+  selectElementById,
+  selectExistingElementIds,
+  updatePlacedElementPosition,
+  upsertConnectorInList,
+  useStore,
+} from './useStore'
+
+const tree: ViewTreeNode[] = [{
+  id: 1,
+  owner_element_id: null,
+  name: 'Root',
+  description: null,
+  level_label: null,
+  level: 0,
+  depth: 0,
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+  parent_view_id: null,
+  children: [{
+    id: 2,
+    owner_element_id: 10,
+    name: 'Child',
+    description: null,
+    level_label: null,
+    level: 1,
+    depth: 1,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    parent_view_id: 1,
+    children: [],
+  }],
+}]
+
+const element = (element_id: number, x = 0, y = 0): PlacedElement => ({
+  id: element_id + 100,
+  view_id: 1,
+  element_id,
+  position_x: x,
+  position_y: y,
+  name: `Element ${element_id}`,
+  description: null,
+  kind: null,
+  technology: null,
+  url: null,
+  logo_url: null,
+  technology_connectors: [],
+  tags: [],
+  has_view: false,
+  view_label: null,
+})
+
+const connector = (id: number): Connector => ({
+  id,
+  view_id: 1,
+  source_element_id: 10,
+  target_element_id: 20,
+  label: null,
+  description: null,
+  relationship: null,
+  direction: 'forward',
+  style: 'bezier',
+  url: null,
+  source_handle: 'right',
+  target_handle: 'left',
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+})
+
+const libraryElement = (id: number): LibraryElement => ({
+  id,
+  name: 'Saved',
+  kind: 'service',
+  description: 'Updated',
+  technology: 'TypeScript',
+  url: 'https://example.com',
+  logo_url: 'logo.svg',
+  technology_connectors: [{ type: 'custom', label: 'TS' }],
+  tags: ['api'],
+  repo: 'repo',
+  branch: 'main',
+  file_path: 'src/index.ts',
+  language: 'ts',
+  created_at: '2024-01-01',
+  updated_at: '2024-01-02',
+  has_view: true,
+  view_label: 'View',
+})
+
+beforeEach(() => {
+  useStore.setState({
+    ...emptyViewEditorUiState,
+    view: undefined,
+    viewElements: [],
+    connectors: [],
+    nodes: [],
+    edges: [],
+    linksMap: {},
+    parentLinksMap: {},
+    incomingLinks: [],
+    treeData: [],
+    allElements: [],
+    libraryRefresh: 0,
+  })
+})
+
+describe('pure view helpers', () => {
+  it('finds views by owner and path', () => {
+    expect(findViewByOwner(tree, 10)?.id).toBe(2)
+    expect(findViewByOwner(tree, 999)).toBeNull()
+    expect(findViewPath(tree, 2)?.map((view) => view.id)).toEqual([1, 2])
+    expect(findViewPath(tree, 999)).toBeNull()
+  })
+
+  it('builds child, parent, and incoming links for a view', () => {
+    const result = buildViewContentLinks(tree, 1, [element(10), element(20)])
+    expect(result.linksMap[10][0]).toMatchObject({ to_view_id: 2, relation_type: 'child' })
+    expect(result.parentLinksMap).toEqual({})
+    expect(result.incomingLinks).toEqual([])
+
+    const childResult = buildViewContentLinks(tree, 2, [element(20)])
+    expect(childResult.parentLinksMap[20][0]).toMatchObject({ from_view_id: 1, relation_type: 'parent' })
+    expect(childResult.incomingLinks[0]).toMatchObject({ element_id: 10, from_view_id: 1, to_view_id: 2 })
+  })
+
+  it('updates placement positions structurally', () => {
+    const elements = [element(10, 1, 2), element(20, 3, 4)]
+    expect(updatePlacedElementPosition(elements, 10, 1, 2)).toBe(elements)
+    const next = updatePlacedElementPosition(elements, 10, 9, 8)
+    expect(next).not.toBe(elements)
+    expect(next[0]).toMatchObject({ position_x: 9, position_y: 8 })
+    expect(next[1]).toBe(elements[1])
+  })
+
+  it('removes placements and merges saved element fields', () => {
+    const elements = [element(10), element(20)]
+    expect(removePlacedElement(elements, 10).map((item) => item.element_id)).toEqual([20])
+    const merged = mergeSavedElementIntoPlacements(elements, libraryElement(10))
+    expect(merged[0]).toMatchObject({ name: 'Saved', kind: 'service', repo: 'repo', tags: ['api'] })
+    expect(merged[1]).toBe(elements[1])
+  })
+
+  it('upserts and removes connectors', () => {
+    const first = connector(1)
+    const second = { ...connector(2), label: 'two' }
+    expect(upsertConnectorInList([], first)).toEqual([first])
+    expect(upsertConnectorInList([first], { ...first, label: 'updated' })[0].label).toBe('updated')
+    expect(upsertConnectorInList([first], second)).toEqual([first, second])
+    expect(removeConnectorFromList([first, second], 1)).toEqual([second])
+  })
+
+  it('selects existing element ids and entities by id', () => {
+    const state = { viewElements: [element(10), element(20)], connectors: [connector(1)] }
+    expect(Array.from(selectExistingElementIds(state))).toEqual([10, 20])
+    expect(selectElementById(state, 20)?.name).toBe('Element 20')
+    expect(selectConnectorById(state, 1)?.source_element_id).toBe(10)
+    expect(canvasSelectors.existingElementIds(state).has(10)).toBe(true)
+    expect(canvasSelectors.elementById(state, 10)?.id).toBe(110)
+    expect(canvasSelectors.connectorById(state, 1)?.id).toBe(1)
+  })
+})
+
+describe('zustand canvas store', () => {
+  it('updates every scalar ui action', () => {
+    const selectedElement = libraryElement(10)
+    const selectedConnector = connector(1)
+    useStore.getState().setViewEditorUi({ viewId: 1, canEdit: true, isOwner: true, isFreePlan: true })
+    useStore.getState().setSnapToGrid(false)
+    useStore.getState().setSelectedElement(selectedElement)
+    useStore.getState().setSelectedConnector(selectedConnector)
+
+    expect(useStore.getState()).toMatchObject({
+      viewId: 1,
+      canEdit: true,
+      isOwner: true,
+      isFreePlan: true,
+      snapToGrid: false,
+      selectedElement,
+      selectedConnector,
+    })
+  })
+
+  it('sets every core collection with values and updater functions', () => {
+    useStore.getState().setView(tree[0])
+    useStore.getState().setViewElements([element(10)])
+    useStore.getState().setViewElements((previous) => [...previous, element(20)])
+    useStore.getState().setConnectors([connector(1)])
+    useStore.getState().setConnectors((previous) => [...previous, connector(2)])
+    useStore.getState().setNodes([{ id: '10', position: { x: 0, y: 0 }, data: {} }])
+    useStore.getState().setNodes((previous) => [...previous, { id: '20', position: { x: 1, y: 1 }, data: {} }])
+    useStore.getState().setEdges([{ id: '1', source: '10', target: '20' }])
+    useStore.getState().setEdges((previous) => [...previous, { id: '2', source: '20', target: '10' }])
+    useStore.getState().setLinksMap({ 10: [] })
+    useStore.getState().setLinksMap((previous) => ({ ...previous, 20: [] }))
+    useStore.getState().setParentLinksMap({ 10: [] })
+    useStore.getState().setParentLinksMap((previous) => ({ ...previous, 20: [] }))
+    useStore.getState().setIncomingLinks([{ id: 1, element_id: 10, element_name: 'E', from_view_id: 1, from_view_name: 'Root', to_view_id: 2 }])
+    useStore.getState().setTreeData(tree)
+    useStore.getState().setAllElements([libraryElement(10)])
+    useStore.getState().setLibraryRefresh((previous) => previous + 1)
+
+    const state = useStore.getState()
+    expect(state.view?.id).toBe(1)
+    expect(state.viewElements).toHaveLength(2)
+    expect(state.connectors).toHaveLength(2)
+    expect(state.nodes).toHaveLength(2)
+    expect(state.edges).toHaveLength(2)
+    expect(Object.keys(state.linksMap)).toEqual(['10', '20'])
+    expect(Object.keys(state.parentLinksMap)).toEqual(['10', '20'])
+    expect(state.incomingLinks).toHaveLength(1)
+    expect(state.treeData).toBe(tree)
+    expect(state.allElements).toHaveLength(1)
+    expect(state.libraryRefresh).toBe(1)
+  })
+
+  it('hydrates and resets canvas data', () => {
+    const links = buildViewContentLinks(tree, 1, [element(10)])
+    useStore.getState().setNodes([{ id: 'stale', position: { x: 0, y: 0 }, data: {} }])
+    useStore.getState().setEdges([{ id: 'stale', source: '1', target: '2' }])
+    useStore.getState().hydrateViewContent({
+      view: tree[0],
+      viewElements: [element(10)],
+      connectors: [connector(1)],
+      treeData: tree,
+      ...links,
+    })
+    expect(useStore.getState()).toMatchObject({
+      view: tree[0],
+      viewElements: [element(10)],
+      connectors: [connector(1)],
+      treeData: tree,
+    })
+    useStore.getState().resetCanvas()
+    expect(useStore.getState().nodes).toEqual([])
+    expect(useStore.getState().edges).toEqual([])
+  })
+
+  it('runs placement, connector, and deletion actions', () => {
+    useStore.getState().setViewElements([element(10), element(20)])
+    useStore.getState().setConnectors([connector(1)])
+    useStore.getState().updateElementPosition(10, 50, 60)
+    expect(useStore.getState().viewElements[0]).toMatchObject({ position_x: 50, position_y: 60 })
+
+    useStore.getState().removeElementPlacement(10)
+    expect(useStore.getState().viewElements.map((item) => item.element_id)).toEqual([20])
+
+    useStore.getState().setViewElements([element(10)])
+    useStore.getState().mergeSavedElement(libraryElement(10))
+    expect(useStore.getState().viewElements[0].name).toBe('Saved')
+    expect(useStore.getState().libraryRefresh).toBe(1)
+
+    useStore.getState().removeElementEverywhere(10)
+    expect(useStore.getState().viewElements).toEqual([])
+    expect(useStore.getState().libraryRefresh).toBe(2)
+
+    useStore.getState().upsertConnector(connector(2))
+    useStore.getState().replaceConnector({ ...connector(2), label: 'updated' })
+    useStore.getState().removeConnector(1)
+    expect(useStore.getState().connectors).toEqual([{ ...connector(2), label: 'updated' }])
+  })
+})