@tldiagram/core-ui 1.92.0 → 1.93.0

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -1,6 +1,7 @@
 import type { DrawingCanvasHandle } from '../../../components/DrawingCanvas';
 import { type Connection, type Edge as RFEdge, type EdgeChange, type Node as RFNode, type NodeChange, type NodeDragHandler, type OnConnect, type OnConnectStartParams } from 'reactflow';
 import type { Connector, PlacedElement, ViewTreeNode, LibraryElement, ViewLayer, ViewConnector, IncomingViewConnector } from '../../../types';
+export declare function applyNodeChangesWithStructuralSharing(changes: NodeChange[], nodes: RFNode[]): RFNode[];
 interface CanvasInteractionOptions {
     viewId: number | null;
     canEdit: boolean;
@@ -79,7 +80,7 @@ type HandleReconnectDragState = {
     hoveredNodeId?: string;
     hoveredHandleId?: string;
 };
-export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements, setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedEdgeId, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
+export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedEdgeId, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
     canvasMenu: {
         x: number;
         y: number;

package/dist/pages/ViewEditor/hooks/useViewData.d.ts

@@ -1,5 +1,4 @@
-import { type Edge as RFEdge, type Node as RFNode } from 'reactflow';
-import type { ViewTreeNode, PlacedElement, LibraryElement, Connector, IncomingViewConnector, ViewConnector, Tag } from '../../../types';
+import type { ViewTreeNode, PlacedElement, LibraryElement, Connector, Tag } from '../../../types';
 interface ViewDataOptions {
     viewId: number | null;
     interactionSourceId: number | null;
@@ -37,38 +36,38 @@ interface ViewDataOptions {
 }
 export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedEdgeId, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
     view: ViewTreeNode | null | undefined;
-    setView: import("react").Dispatch<import("react").SetStateAction<ViewTreeNode | null | undefined>>;
+    setView: (view: ViewTreeNode | null | undefined) => void;
     viewElements: PlacedElement[];
-    setViewElements: import("react").Dispatch<import("react").SetStateAction<PlacedElement[]>>;
+    setViewElements: (next: import("../../../store/useStore").StoreSetter<PlacedElement[]>) => void;
     connectors: Connector[];
-    setConnectors: import("react").Dispatch<import("react").SetStateAction<Connector[]>>;
-    rfNodes: RFNode[];
-    setRfNodes: import("react").Dispatch<import("react").SetStateAction<RFNode[]>>;
-    rfEdges: RFEdge[];
-    setRfEdges: import("react").Dispatch<import("react").SetStateAction<RFEdge[]>>;
-    linksMap: Record<number, ViewConnector[]>;
-    setLinksMap: import("react").Dispatch<import("react").SetStateAction<Record<number, ViewConnector[]>>>;
-    parentLinksMap: Record<number, ViewConnector[]>;
-    setParentLinksMap: import("react").Dispatch<import("react").SetStateAction<Record<number, ViewConnector[]>>>;
-    incomingLinks: IncomingViewConnector[];
+    setConnectors: (next: import("../../../store/useStore").StoreSetter<Connector[]>) => void;
+    rfNodes: import("reactflow").Node[];
+    setRfNodes: (next: import("../../../store/useStore").StoreSetter<import("reactflow").Node[]>) => void;
+    rfEdges: import("reactflow").Edge[];
+    setRfEdges: (next: import("../../../store/useStore").StoreSetter<import("reactflow").Edge[]>) => void;
+    linksMap: Record<number, import("../../..").ViewConnector[]>;
+    setLinksMap: (next: import("../../../store/useStore").StoreSetter<Record<number, import("../../..").ViewConnector[]>>) => void;
+    parentLinksMap: Record<number, import("../../..").ViewConnector[]>;
+    setParentLinksMap: (next: import("../../../store/useStore").StoreSetter<Record<number, import("../../..").ViewConnector[]>>) => void;
+    incomingLinks: import("../../..").IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
     libraryRefresh: number;
-    setLibraryRefresh: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setLibraryRefresh: (next: import("../../../store/useStore").StoreSetter<number>) => void;
     existingElementIds: Set<number>;
     viewElementsRef: import("react").MutableRefObject<PlacedElement[]>;
-    linksMapRef: import("react").MutableRefObject<Record<number, ViewConnector[]>>;
-    parentLinksMapRef: import("react").MutableRefObject<Record<number, ViewConnector[]>>;
-    incomingLinksRef: import("react").MutableRefObject<IncomingViewConnector[]>;
+    linksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;
+    parentLinksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;
+    incomingLinksRef: import("react").MutableRefObject<import("../../..").IncomingViewConnector[]>;
     treeDataRef: import("react").MutableRefObject<ViewTreeNode[]>;
-    rfNodesRef: import("react").MutableRefObject<RFNode[]>;
-    rfEdgesRef: import("react").MutableRefObject<RFEdge[]>;
+    rfNodesRef: import("react").MutableRefObject<import("reactflow").Node[]>;
+    rfEdgesRef: import("react").MutableRefObject<import("reactflow").Edge[]>;
     viewIdRef: import("react").MutableRefObject<number | null>;
     refreshGrid: () => Promise<void>;
     refreshElements: () => Promise<void>;
     handleElementDeleted: (deletedId: number) => void;
     handleElementPermanentlyDeleted: (deletedId: number) => void;
     handleElementSaved: (saved: LibraryElement) => void;
-    setAllElements: import("react").Dispatch<import("react").SetStateAction<LibraryElement[]>>;
+    setAllElements: (next: import("../../../store/useStore").StoreSetter<LibraryElement[]>) => void;
 };
 export {};

package/dist/shims/empty-node-module.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/store/useStore.d.ts

@@ -0,0 +1,78 @@
+import type { Edge as RFEdge, Node as RFNode } from 'reactflow';
+import type { Connector, IncomingViewConnector, LibraryElement, PlacedElement, ViewConnector, ViewTreeNode } from '../types';
+export type StoreSetter<T> = T | ((previous: T) => T);
+export type ViewEditorUiState = {
+    viewId: number | null;
+    canEdit: boolean;
+    isOwner: boolean;
+    isFreePlan: boolean;
+    snapToGrid: boolean;
+    selectedElement: LibraryElement | null;
+    selectedConnector: Connector | null;
+};
+export type ViewContentLinks = {
+    linksMap: Record<number, ViewConnector[]>;
+    parentLinksMap: Record<number, ViewConnector[]>;
+    incomingLinks: IncomingViewConnector[];
+};
+export type ViewContentPayload = ViewContentLinks & {
+    view: ViewTreeNode | null;
+    viewElements: PlacedElement[];
+    connectors: Connector[];
+    treeData: ViewTreeNode[];
+};
+export type CanvasStoreState = ViewEditorUiState & {
+    view: ViewTreeNode | null | undefined;
+    viewElements: PlacedElement[];
+    connectors: Connector[];
+    nodes: RFNode[];
+    edges: RFEdge[];
+    linksMap: Record<number, ViewConnector[]>;
+    parentLinksMap: Record<number, ViewConnector[]>;
+    incomingLinks: IncomingViewConnector[];
+    treeData: ViewTreeNode[];
+    allElements: LibraryElement[];
+    libraryRefresh: number;
+    setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void;
+    setSnapToGrid: (snapToGrid: boolean) => void;
+    setSelectedElement: (selectedElement: LibraryElement | null) => void;
+    setSelectedConnector: (selectedConnector: Connector | null) => void;
+    setView: (view: ViewTreeNode | null | undefined) => void;
+    setViewElements: (next: StoreSetter<PlacedElement[]>) => void;
+    setConnectors: (next: StoreSetter<Connector[]>) => void;
+    setNodes: (next: StoreSetter<RFNode[]>) => void;
+    setEdges: (next: StoreSetter<RFEdge[]>) => void;
+    setLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void;
+    setParentLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void;
+    setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void;
+    setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void;
+    setAllElements: (next: StoreSetter<LibraryElement[]>) => void;
+    setLibraryRefresh: (next: StoreSetter<number>) => void;
+    resetCanvas: () => void;
+    hydrateViewContent: (payload: ViewContentPayload) => void;
+    updateElementPosition: (elementId: number, x: number, y: number) => void;
+    removeElementPlacement: (elementId: number) => void;
+    removeElementEverywhere: (elementId: number) => void;
+    mergeSavedElement: (saved: LibraryElement) => void;
+    upsertConnector: (connector: Connector) => void;
+    replaceConnector: (connector: Connector) => void;
+    removeConnector: (connectorId: number) => void;
+};
+export declare const emptyViewEditorUiState: ViewEditorUiState;
+export declare function findViewByOwner(nodes: ViewTreeNode[], elementId: number): ViewTreeNode | null;
+export declare function findViewPath(nodes: ViewTreeNode[], targetId: number, path?: ViewTreeNode[]): ViewTreeNode[] | null;
+export declare function buildViewContentLinks(tree: ViewTreeNode[], viewId: number, viewElements: PlacedElement[]): ViewContentLinks;
+export declare function selectExistingElementIds(state: Pick<CanvasStoreState, 'viewElements'>): Set<number>;
+export declare function selectElementById(state: Pick<CanvasStoreState, 'viewElements'>, elementId: number): PlacedElement | undefined;
+export declare function selectConnectorById(state: Pick<CanvasStoreState, 'connectors'>, connectorId: number): Connector | undefined;
+export declare function updatePlacedElementPosition(elements: PlacedElement[], elementId: number, x: number, y: number): PlacedElement[];
+export declare function removePlacedElement(elements: PlacedElement[], elementId: number): PlacedElement[];
+export declare function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[];
+export declare function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[];
+export declare function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[];
+export declare const useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CanvasStoreState>>;
+export declare const canvasSelectors: {
+    existingElementIds: typeof selectExistingElementIds;
+    elementById: typeof selectElementById;
+    connectorById: typeof selectConnectorById;
+};

package/dist/store/useStore.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.92.0",
+  "version": "1.93.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,9 @@
   "dependencies": {
     "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
     "@bufbuild/protobuf": "^2.11.0",
-    "esbuild": "^0.25.12"
+    "@tanstack/react-query": "^5.100.1",
+    "esbuild": "^0.25.12",
+    "zustand": "^5.0.12"
   },
   "peerDependencies": {
     "@chakra-ui/icons": "^2.2.4",
@@ -59,7 +61,7 @@
     "@emotion/styled": "^11.14.0",
     "@uiw/react-codemirror": "^4.25.8",
     "d3-force": "^3.0.0",
-    "elkjs": "^0.11.1",
+    "dagre": "^0.8.5",
     "framer-motion": "^11.18.2",
     "html-to-image": "^1.11.13",
     "mermaid-ast": "^0.8.2",
@@ -125,12 +127,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@eslint/js": "^9.0.0",
+    "@types/dagre": "^0.7.54",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@uiw/react-codemirror": "^4.25.8",
     "@vitejs/plugin-react": "^4.3.4",
     "d3-force": "^3.0.0",
-    "elkjs": "^0.11.1",
+    "dagre": "^0.8.5",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.0",

package/src/api/client.ts

@@ -46,6 +46,7 @@ import {
   ImportService,
 } from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/import_service_pb'
 import { transport } from './transport'
+import { apiUrl, fetchApiAsset } from '../config/runtime'
 
 export interface DependenciesResponse {
   elements: DependencyElement[]
@@ -383,6 +384,36 @@ export const api = {
           return (json.views ?? []).map(mapDiagram)
         }),
 
+      // Lazy: root-level views only. Use for sidebar first render on huge workspaces.
+      treeRoots: (opts: { limit?: number; offset?: number; search?: string } = {}): Promise<{ views: ViewTreeNode[]; totalCount: number }> =>
+        rpc(async () => {
+          const res = await workspaceClient.getWorkspace({
+            includeContent: false,
+            level: 0,
+            limit: opts.limit ?? 0,
+            offset: opts.offset ?? 0,
+            search: opts.search ?? '',
+          })
+          const json = j<{ views: ProtoDiagram[]; total_count?: number }>(GetWorkspaceResponseSchema, res)
+          return {
+            views: (json.views ?? []).map(mapDiagram),
+            totalCount: Number(json.total_count ?? 0),
+          }
+        }),
+
+      // Lazy: direct children of a parent view. Used on tree node expand.
+      treeChildren: (parentId: number, opts: { limit?: number; offset?: number } = {}): Promise<ViewTreeNode[]> =>
+        rpc(async () => {
+          const res = await workspaceClient.getWorkspace({
+            includeContent: false,
+            parentId,
+            limit: opts.limit ?? 0,
+            offset: opts.offset ?? 0,
+          })
+          const json = j<{ views: ProtoDiagram[] }>(GetWorkspaceResponseSchema, res)
+          return (json.views ?? []).map(mapDiagram)
+        }),
+
       get: (id: number): Promise<ViewTreeNode> =>
         rpc(async () => {
           const res = await workspaceClient.getView({ viewId: id })
@@ -422,7 +453,14 @@ export const api = {
       delete: (_orgId: string, id: number): Promise<void> =>
         rpc(async () => { await workspaceClient.deleteView({ orgId: '', viewId: id }) }),
 
-      thumbnail: async (_id: number): Promise<string | null> => null,
+      thumbnail: async (id: number): Promise<string | null> => {
+        const res = await fetchApiAsset(apiUrl(`/views/${id}/thumbnail.svg`), {
+          headers: { Accept: 'image/svg+xml' },
+        })
+        if (!res.ok) return null
+        const svg = await res.text()
+        return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }))
+      },
 
       placements: {
         list: (diagramId: number): Promise<ElementPlacement[]> =>

package/src/components/ElementNode.tsx

@@ -12,9 +12,6 @@ import { ZoomInIcon, ZoomOutIcon, TrashIcon as TrashSvg, EditIcon as EditSvg } f
 import { vscodeBridge } from '../lib/vscodeBridge'
 import type { ExtensionToWebviewMessage } from '../types/vscode-messages'
 import {
-  DEFAULT_SOURCE_HANDLE_SIDE,
-  DEFAULT_TARGET_HANDLE_SIDE,
-  ensureVisualHandleId,
   getVisualHandleId,
   getVisualHandleStyle,
   HANDLE_SLOT_CENTER_INDEX,
@@ -154,6 +151,10 @@ interface NodeData extends PlacedElement {
   layerHighlightColor?: string
   forceShowTagPopup?: boolean
   isCanvasMoving?: boolean
+  connectedHandleIds?: readonly string[]
+  selectedHandleIds?: readonly string[]
+  reconnectCandidates?: readonly { handleId: string; edgeId: string; endpoint: 'source' | 'target'; selected: boolean }[]
+  isConnectorHighlighted?: boolean
 }
 
 interface Props {
@@ -285,61 +286,13 @@ function ElementNode({ data, selected }: Props) {
   const zoom = useStore(zoomSelector)
   useAccentColor()
 
-  const nodeId = String(data.element_id)
-  const isConnectorHighlighted = useStore((s) =>
-    s.edges.some(e => e.selected && (e.source === nodeId || e.target === nodeId))
-  )
-  const { connectedHandleKey, selectedHandleKey } = useStore((s) => {
-    const connectedHandles = new Set<string>()
-    const selectedHandles = new Set<string>()
-    for (const connector of s.edges) {
-      if (connector.source === nodeId) {
-        const targetNode = s.nodeInternals.get(connector.target)
-        if (targetNode && targetNode.type !== 'ContextBoundaryElement' && targetNode.type !== 'contextNeighborNode') {
-          const handleId = ensureVisualHandleId(connector.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
-          if (handleId) {
-            connectedHandles.add(handleId)
-            if (connector.selected) selectedHandles.add(handleId)
-          }
-        }
-      }
-      if (connector.target === nodeId) {
-        const sourceNode = s.nodeInternals.get(connector.source)
-        if (sourceNode && sourceNode.type !== 'ContextBoundaryElement' && sourceNode.type !== 'contextNeighborNode') {
-          const handleId = ensureVisualHandleId(connector.targetHandle, DEFAULT_TARGET_HANDLE_SIDE)
-          if (handleId) {
-            connectedHandles.add(handleId)
-            if (connector.selected) selectedHandles.add(handleId)
-          }
-        }
-      }
-    }
-    return {
-      connectedHandleKey: Array.from(connectedHandles).sort().join('|'),
-      selectedHandleKey: Array.from(selectedHandles).sort().join('|'),
-    }
-  })
-  const handleReconnectCandidates = useStore((s) => {
-    const candidates: Array<{ handleId: string; edgeId: string; endpoint: 'source' | 'target'; selected: boolean }> = []
-    for (const connector of s.edges) {
-      if (connector.source === nodeId) {
-        const handleId = ensureVisualHandleId(connector.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
-        if (handleId) candidates.push({ handleId, edgeId: connector.id, endpoint: 'source', selected: !!connector.selected })
-      }
-      if (connector.target === nodeId) {
-        const handleId = ensureVisualHandleId(connector.targetHandle, DEFAULT_TARGET_HANDLE_SIDE)
-        if (handleId) candidates.push({ handleId, edgeId: connector.id, endpoint: 'target', selected: !!connector.selected })
-      }
-    }
-    return candidates
-  })
   const connectedHandleIds = useMemo(
-    () => new Set(connectedHandleKey ? connectedHandleKey.split('|') : []),
-    [connectedHandleKey],
+    () => new Set(data.connectedHandleIds ?? []),
+    [data.connectedHandleIds],
   )
   const selectedHandleIds = useMemo(
-    () => new Set(selectedHandleKey ? selectedHandleKey.split('|') : []),
-    [selectedHandleKey],
+    () => new Set(data.selectedHandleIds ?? []),
+    [data.selectedHandleIds],
   )
   const activeSides = useMemo(() => {
     const sides = new Set<string>()
@@ -351,7 +304,7 @@ function ElementNode({ data, selected }: Props) {
   }, [connectedHandleIds])
   const reconnectCandidateByHandle = useMemo(() => {
     const next = new Map<string, { edgeId: string; endpoint: 'source' | 'target' }>()
-    const sortedCandidates = [...handleReconnectCandidates].sort((left, right) => {
+    const sortedCandidates = [...(data.reconnectCandidates ?? [])].sort((left, right) => {
       if (left.selected !== right.selected) return left.selected ? -1 : 1
       return left.edgeId.localeCompare(right.edgeId)
     })
@@ -361,7 +314,7 @@ function ElementNode({ data, selected }: Props) {
       }
     }
     return next
-  }, [handleReconnectCandidates])
+  }, [data.reconnectCandidates])
 
   const derivedPrimaryIconPath = (() => {
     const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
@@ -509,7 +462,7 @@ function ElementNode({ data, selected }: Props) {
       isSelected={selected}
       isSource={isSource}
       isTarget={isTarget}
-      isConnectorHighlighted={isConnectorHighlighted}
+      isConnectorHighlighted={!!data.isConnectorHighlighted}
       minW="180px"
       maxW="230px"
       cursor={bodyCursor}

package/src/components/ElementPanel.tsx

@@ -480,7 +480,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     try {
       if (viewId != null) {
         await api.workspace.views.placements.remove(viewId, element.id)
-      } else if (orgId) {
+      } else if (orgId !== undefined) {
         await api.elements.delete(orgId, element.id)
       }
       onDelete?.(element.id)
@@ -491,7 +491,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   const handlePermanentDelete = async () => {
     if (isReadOnly || !element) return
     try {
-      if (!orgId) return
+      if (orgId === undefined) return
       await api.elements.delete(orgId, element.id)
       onPermanentDelete?.(element.id)
       confirmPermanentDelete.onClose()

package/src/components/LayoutSection.tsx

@@ -21,11 +21,10 @@ import { ChevronDownIcon, ChevronRightIcon } from './Icons'
 import { api } from '../api/client'
 import type { ViewTreeNode } from '../types'
 
-type Algorithm = 'elk' | 'force'
+type Algorithm = 'dagre' | 'force'
 
-interface ElkConfig {
-  algorithm: 'layered' | 'force' | 'mrtree' | 'box'
-  direction: 'RIGHT' | 'LEFT' | 'DOWN' | 'UP'
+interface DagreConfig {
+  direction: 'TB' | 'BT' | 'LR' | 'RL'
   nodeSpacing: number
   layerSpacing: number
 }
@@ -41,7 +40,7 @@ const NODE_W = 200
 const NODE_H = 120
 
 const ALGO_META: Record<Algorithm, { label: string }> = {
-  elk: { label: 'Layered' },
+  dagre: { label: 'Layered' },
   force: { label: 'Organic' },
 }
 
@@ -52,13 +51,12 @@ interface Props {
 
 export default function LayoutSection({ view, canEdit }: Props) {
   const [open, setOpen] = useState(false)
-  const [algo, setAlgo] = useState<Algorithm>('elk')
+  const [algo, setAlgo] = useState<Algorithm>('dagre')
   const [running, setRunning] = useState(false)
   const [collisionRunning, setCollisionRunning] = useState(false)
 
-  const [elkConfig, setElkConfig] = useState<ElkConfig>({
-    algorithm: 'layered',
-    direction: 'DOWN',
+  const [dagreConfig, setDagreConfig] = useState<DagreConfig>({
+    direction: 'TB',
     nodeSpacing: 75,
     layerSpacing: 75,
   })
@@ -199,8 +197,8 @@ export default function LayoutSection({ view, canEdit }: Props) {
       ])
 
       let positions: Map<number, { x: number; y: number }>
-      if (algo === 'elk') {
-        positions = await runElk(objs, edgeList)
+      if (algo === 'dagre') {
+        positions = await runDagre(objs, edgeList)
       } else {
         positions = await runForce(objs, edgeList)
       }
@@ -271,46 +269,45 @@ export default function LayoutSection({ view, canEdit }: Props) {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const runElk = async (objs: any[], edgeList: any[]) => {
+  const runDagre = async (objs: any[], edgeList: any[]) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ELKModule = await import('elkjs/lib/elk.bundled.js') as any
-    const elk = new ELKModule.default()
-
-    const layoutOptions: Record<string, string> = {
-      'elk.algorithm': elkConfig.algorithm,
-      'elk.spacing.nodeNode': String(elkConfig.nodeSpacing),
-    }
-    if (elkConfig.algorithm === 'layered') {
-      layoutOptions['elk.direction'] = elkConfig.direction
-      layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = String(elkConfig.layerSpacing)
-    }
+    const dagreModule = await import('dagre') as any
+    const dagre = dagreModule.default ?? dagreModule
 
     const objSet = new Set<number>(objs.map((o: { element_id?: number }) => Number(o.element_id)))
-    const graph = {
-      id: 'root',
-      layoutOptions,
-      children: objs.map((obj: { element_id: number }) => ({
-        id: String(obj.element_id),
-        width: NODE_W,
-        height: NODE_H,
-      })),
-      edges: edgeList
-        .filter((e: { source_element_id: number; target_element_id: number }) =>
-          objSet.has(e.source_element_id) && objSet.has(e.target_element_id)
-        )
-        .map((e: { id: number; source_element_id: number; target_element_id: number }) => ({
-          id: String(e.id),
-          sources: [String(e.source_element_id)],
-          targets: [String(e.target_element_id)],
-        })),
-    }
+    const graph = new dagre.graphlib.Graph({ multigraph: true })
+    graph.setGraph({
+      rankdir: dagreConfig.direction,
+      nodesep: dagreConfig.nodeSpacing,
+      ranksep: dagreConfig.layerSpacing,
+      marginx: 0,
+      marginy: 0,
+    })
+    graph.setDefaultEdgeLabel(() => ({}))
+
+    objs.forEach((obj: { element_id: number }) => {
+      graph.setNode(String(obj.element_id), { width: NODE_W, height: NODE_H })
+    })
+
+    edgeList
+      .filter((e: { source_element_id: number; target_element_id: number }) =>
+        objSet.has(e.source_element_id) && objSet.has(e.target_element_id)
+      )
+      .forEach((e: { id: number; source_element_id: number; target_element_id: number }) => {
+        graph.setEdge(String(e.source_element_id), String(e.target_element_id), {}, String(e.id))
+      })
+
+    dagre.layout(graph)
 
-    const result = await elk.layout(graph)
     const positions = new Map<number, { x: number; y: number }>()
-    result.children?.forEach((child: { id: string; x?: number; y?: number }) => {
-      const id = Number(child.id)
+    graph.nodes().forEach((nodeId: string) => {
+      const id = Number(nodeId)
       if (!Number.isFinite(id)) return
-      positions.set(id, { x: child.x ?? 0, y: child.y ?? 0 })
+      const node = graph.node(nodeId) as { x?: number; y?: number }
+      positions.set(id, {
+        x: (node.x ?? 0) - NODE_W / 2,
+        y: (node.y ?? 0) - NODE_H / 2,
+      })
     })
     return positions
   }
@@ -428,54 +425,34 @@ export default function LayoutSection({ view, canEdit }: Props) {
             border="1px solid"
             borderColor="whiteAlpha.100"
           >
-            {algo === 'elk' ? (
+            {algo === 'dagre' ? (
               <Grid templateColumns="1fr 1fr" gap={4}>
                 <FormControl gridColumn="span 2">
-                  <FormLabel {...LabelStyle}>Algorithm</FormLabel>
+                  <FormLabel {...LabelStyle}>Direction</FormLabel>
                   <Select
                     size="xs"
                     variant="filled"
                     bg="whiteAlpha.100"
                     border="none"
                     _hover={{ bg: 'whiteAlpha.200' }}
-                    value={elkConfig.algorithm}
-                    onChange={e => setElkConfig(c => ({ ...c, algorithm: e.target.value as ElkConfig['algorithm'] }))}
+                    value={dagreConfig.direction}
+                    onChange={e => setDagreConfig(c => ({ ...c, direction: e.target.value as DagreConfig['direction'] }))}
                   >
-                    <option value="layered">Layered</option>
-                    <option value="force">Force</option>
-                    <option value="mrtree">Mr. Tree</option>
-                    <option value="box">Box</option>
+                    <option value="TB">Top → Bottom</option>
+                    <option value="BT">Bottom → Top</option>
+                    <option value="LR">Left → Right</option>
+                    <option value="RL">Right → Left</option>
                   </Select>
                 </FormControl>
 
-                {elkConfig.algorithm === 'layered' && (
-                  <FormControl gridColumn="span 2">
-                    <FormLabel {...LabelStyle}>Direction</FormLabel>
-                    <Select
-                      size="xs"
-                      variant="filled"
-                      bg="whiteAlpha.100"
-                      border="none"
-                      _hover={{ bg: 'whiteAlpha.200' }}
-                      value={elkConfig.direction}
-                      onChange={e => setElkConfig(c => ({ ...c, direction: e.target.value as ElkConfig['direction'] }))}
-                    >
-                      <option value="DOWN">Top → Bottom</option>
-                      <option value="UP">Bottom → Top</option>
-                      <option value="RIGHT">Left → Right</option>
-                      <option value="LEFT">Right → Left</option>
-                    </Select>
-                  </FormControl>
-                )}
-
                 <FormControl>
                   <FormLabel {...LabelStyle}>Element Gap</FormLabel>
                   <NumberInput
                     size="xs"
                     variant="filled"
-                    value={elkConfig.nodeSpacing}
+                    value={dagreConfig.nodeSpacing}
                     min={10} max={400} step={10}
-                    onChange={(_, v) => !isNaN(v) && setElkConfig(c => ({ ...c, nodeSpacing: v }))}
+                    onChange={(_, v) => !isNaN(v) && setDagreConfig(c => ({ ...c, nodeSpacing: v }))}
                   >
                     <NumberInputField bg="whiteAlpha.100" border="none" />
                     <NumberInputStepper>
@@ -485,24 +462,22 @@ export default function LayoutSection({ view, canEdit }: Props) {
                   </NumberInput>
                 </FormControl>
 
-                {elkConfig.algorithm === 'layered' && (
-                  <FormControl>
-                    <FormLabel {...LabelStyle}>Layer Gap</FormLabel>
-                    <NumberInput
-                      size="xs"
-                      variant="filled"
-                      value={elkConfig.layerSpacing}
-                      min={10} max={400} step={10}
-                      onChange={(_, v) => !isNaN(v) && setElkConfig(c => ({ ...c, layerSpacing: v }))}
-                    >
-                      <NumberInputField bg="whiteAlpha.100" border="none" />
-                      <NumberInputStepper>
-                        <NumberIncrementStepper border="none" />
-                        <NumberDecrementStepper border="none" />
-                      </NumberInputStepper>
-                    </NumberInput>
-                  </FormControl>
-                )}
+                <FormControl>
+                  <FormLabel {...LabelStyle}>Layer Gap</FormLabel>
+                  <NumberInput
+                    size="xs"
+                    variant="filled"
+                    value={dagreConfig.layerSpacing}
+                    min={10} max={400} step={10}
+                    onChange={(_, v) => !isNaN(v) && setDagreConfig(c => ({ ...c, layerSpacing: v }))}
+                  >
+                    <NumberInputField bg="whiteAlpha.100" border="none" />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper border="none" />
+                      <NumberDecrementStepper border="none" />
+                    </NumberInputStepper>
+                  </NumberInput>
+                </FormControl>
               </Grid>
             ) : (
               <Grid templateColumns="1fr 1fr" gap={4}>