@tldiagram/core-ui 1.92.0 → 1.94.0

package/src/components/LayoutSection.tsx

@@ -16,16 +16,17 @@ import {
   Text,
   VStack,
   Icon,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { ChevronDownIcon, ChevronRightIcon } from './Icons'
 import { api } from '../api/client'
 import type { ViewTreeNode } from '../types'
+import ConfirmDialog from './ConfirmDialog'
 
-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 +42,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 +53,13 @@ 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 adjustConnectorsConfirm = useDisclosure()
 
-  const [elkConfig, setElkConfig] = useState<ElkConfig>({
-    algorithm: 'layered',
-    direction: 'DOWN',
+  const [dagreConfig, setDagreConfig] = useState<DagreConfig>({
+    direction: 'TB',
     nodeSpacing: 75,
     layerSpacing: 75,
   })
@@ -199,8 +200,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 +272,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 +428,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 +465,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}>
@@ -595,17 +573,17 @@ export default function LayoutSection({ view, canEdit }: Props) {
           </Button>
           {/* Apply button */}
           <VStack spacing={2} w="full">
-            <Button
-              size="sm"
-              w="full"
-              variant="outline"
-              colorScheme="blue"
-              onClick={handleCollisionRemoval}
-              isLoading={collisionRunning}
-              isDisabled={!canEdit || !view}
-              loadingText="Removing Connector Collisions..."
-              fontWeight="bold"
-              fontSize="xs"
+          <Button
+            size="sm"
+            w="full"
+            variant="outline"
+            colorScheme="blue"
+            onClick={adjustConnectorsConfirm.onOpen}
+            isLoading={collisionRunning}
+            isDisabled={!canEdit || !view}
+            loadingText="Removing Connector Collisions..."
+            fontWeight="bold"
+            fontSize="xs"
               letterSpacing="0.05em"
               textTransform="uppercase"
               h="32px"
@@ -619,6 +597,19 @@ export default function LayoutSection({ view, canEdit }: Props) {
 
         </VStack>
       </Collapse>
+      <ConfirmDialog
+        isOpen={adjustConnectorsConfirm.isOpen}
+        onClose={adjustConnectorsConfirm.onClose}
+        onConfirm={() => {
+          adjustConnectorsConfirm.onClose();
+          void handleCollisionRemoval();
+        }}
+        title="Adjust Connectors"
+        body="This action will re-attach existing connectors to form the shortest path between the elements."
+        confirmLabel="Confirm"
+        confirmColorScheme="blue"
+        isLoading={collisionRunning}
+      />
     </Box>
   )
 }

package/src/components/ViewGridNode.tsx

@@ -137,7 +137,7 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
 
     return () => {
       active = false
-      if (url) {
+      if (url?.startsWith('blob:')) {
         URL.revokeObjectURL(url)
       }
     }
@@ -224,9 +224,6 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
               display="block"
               p={2}
               bg="var(--bg-card-solid)"
-              style={{
-                filter: 'brightness(0) saturate(100%) invert(35%) sepia(26%) forum-blue(82%) hue-rotate(180deg) brightness(95%) contrast(90%)',
-              }}
             />
           ) : (
             <Flex

package/src/components/ZUI/ZUICanvas.tsx

@@ -37,6 +37,7 @@ import { buildVisibleProxyConnectors, collectVisibleNodeAnchors, drawVisibleProx
 
 export interface ZUICanvasHandle {
   fitView(): void
+  focusDiagram(viewId: number): boolean
 }
 
 interface Props {
@@ -169,9 +170,78 @@ function getPathAt(
   return []
 }
 
+function findDiagramFocusTarget(groups: DiagramGroupLayout[], viewId: number): PathItem | null {
+  for (const group of groups) {
+    if (group.diagramId === viewId) {
+      return {
+        id: `g-${group.diagramId}`,
+        label: group.label,
+        type: 'group',
+        absX: group.worldX,
+        absY: group.worldY,
+        absW: group.worldW,
+        absH: group.worldH,
+      }
+    }
+
+    const found = findLinkedDiagramInNodes(viewId, group.nodes, 0, 0, 1, 0, 0)
+    if (found) return found
+  }
+  return null
+}
+
+function findLinkedDiagramInNodes(
+  viewId: number,
+  nodes: DiagramGroupLayout['nodes'],
+  parentAbsX: number,
+  parentAbsY: number,
+  parentAbsScale: number,
+  parentChildOffsetX: number,
+  parentChildOffsetY: number,
+): PathItem | null {
+  for (const node of nodes) {
+    const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
+    const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
+    const absW = node.worldW * parentAbsScale
+    const absH = node.worldH * parentAbsScale
+
+    if (node.linkedDiagramId === viewId) {
+      return {
+        id: node.id,
+        label: node.linkedDiagramLabel || node.label,
+        type: 'node',
+        isCircular: node.isCircular,
+        absX,
+        absY,
+        absW,
+        absH,
+      }
+    }
+
+    if (node.children.length > 0) {
+      const found = findLinkedDiagramInNodes(
+        viewId,
+        node.children,
+        absX,
+        absY,
+        parentAbsScale * node.childScale,
+        node.childOffsetX,
+        node.childOffsetY,
+      )
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function easeOutQuart(t: number): number {
+  return 1 - Math.pow(1 - t, 4)
+}
+
 export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, highlightedTags, highlightColor, hiddenTags, crossBranchSettings, hoverLocked = false }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const cameraTransitionRef = useRef<number | null>(null)
   const [initialized, setInitialized] = useState(false)
   const [containerSize, setContainerSize] = useState({ w: 0, h: 0 })
   const isMobileLayout = useBreakpointValue({ base: true, md: false }) ?? false
@@ -297,6 +367,10 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
 
   const zoomToPathItem = useCallback((item: PathItem) => {
     if (containerSize.w === 0 || containerSize.h === 0) return
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
     setHoveredItem(null, true) // Clear popover immediately on breadcrumb jump
 
     // Use a comfortable padding for the focused item
@@ -317,6 +391,68 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     setViewState({ x, y, zoom })
   }, [containerSize, maxZoom, setViewState, setHoveredItem])
 
+  const focusDiagram = useCallback((viewId: number) => {
+    const el = containerRef.current
+    const target = findDiagramFocusTarget(layout.groups, viewId)
+    if (!el || !target) return false
+
+    const canvasW = el.offsetWidth
+    const canvasH = el.offsetHeight
+    if (canvasW === 0 || canvasH === 0) return false
+
+    setHoveredItem(null, true)
+
+    const padding = isMobileLayout ? 0.18 : 0.16
+    const bboxW = Math.max(1, target.absW)
+    const bboxH = Math.max(1, target.absH)
+    const zoom = Math.min(
+      (canvasW * (1 - padding * 2)) / bboxW,
+      (canvasH * (1 - padding * 2)) / bboxH,
+      maxZoom,
+    )
+
+    const x = (canvasW - bboxW * zoom) / 2 - target.absX * zoom
+    const y = (canvasH - bboxH * zoom) / 2 - target.absY * zoom
+
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
+
+    const from = viewStateRef.current
+    const to = { x, y, zoom }
+    const duration = 520
+    const startedAt = performance.now()
+
+    const step = (now: number) => {
+      const t = Math.min(1, (now - startedAt) / duration)
+      const eased = easeOutQuart(t)
+      setViewState({
+        x: from.x + (to.x - from.x) * eased,
+        y: from.y + (to.y - from.y) * eased,
+        zoom: from.zoom + (to.zoom - from.zoom) * eased,
+      })
+
+      if (t < 1) {
+        cameraTransitionRef.current = requestAnimationFrame(step)
+      } else {
+        cameraTransitionRef.current = null
+        setViewState(to)
+      }
+    }
+
+    cameraTransitionRef.current = requestAnimationFrame(step)
+    return true
+  }, [isMobileLayout, layout.groups, maxZoom, setHoveredItem, setViewState, viewStateRef])
+
+  useEffect(() => {
+    return () => {
+      if (cameraTransitionRef.current !== null) {
+        cancelAnimationFrame(cameraTransitionRef.current)
+      }
+    }
+  }, [])
+
   // ── Fit view on mount and when layout changes ────────────────────
   useEffect(() => {
     const el = containerRef.current
@@ -345,8 +481,9 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
         setHoveredItem(null, true) // Clear popover immediately on fitView
         fitView(el.offsetWidth, el.offsetHeight, layout.bbox)
       },
+      focusDiagram,
     }),
-    [fitView, layout.bbox, setHoveredItem],
+    [fitView, focusDiagram, layout.bbox, setHoveredItem],
   )
 
   // ── RAF render loop ──────────────────────────────────────────────