@tldiagram/core-ui 2.0.4 → 2.0.5

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

@@ -173,6 +173,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
         clientX: number;
         clientY: number;
     }) => void;
+    stableOnReconnectPick: (targetElementId: number) => Promise<boolean>;
     showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect", forceConnect?: boolean) => void;
     onNodesChange: (changes: NodeChange[]) => void;
     onEdgesChange: (changes: EdgeChange[]) => void;

package/dist/utils/string.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export declare const truncate: (str: string, limit?: number) => string;

package/dist/utils/string.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/ProxyConnectorPanel.tsx

@@ -6,6 +6,7 @@ import PanelHeader from './PanelHeader'
 import { ChevronRightIcon, NavigationIcon, TrashIcon, EditIcon } from './Icons'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Connector } from '../types'
+import { truncate } from '../utils/string'
 
 interface Props {
   isOpen: boolean
@@ -83,11 +84,11 @@ export default function ProxyConnectorPanel({
                           <VStack align="start" spacing={1} flex={1}>
                             <HStack spacing={2}>
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.source.actualElementName}
+                                {truncate(leaf.source.actualElementName)}
                               </Text>
                               <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.target.actualElementName}
+                                {truncate(leaf.target.actualElementName)}
                               </Text>
                             </HStack>
 

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

@@ -1008,6 +1008,43 @@ export function useCanvasInteractions({
     document.addEventListener('pointercancel', up)
   }, [canEdit, clearHandleReconnectListeners, performReconnect, rfNodesRef, _rfEdgesRef, syncHandleReconnectDrag])
 
+  const stableOnReconnectPick = useCallback(async (targetElementId: number) => {
+    const picking = reconnectPickingRef.current
+    if (!canEdit || !picking) return false
+
+    const oldConnector = _rfEdgesRef.current.find((candidate) => candidate.id === String(picking.edgeId))
+    const pickedNode = rfNodesRef.current.find((node) => node.id === String(targetElementId))
+    if (!oldConnector || !pickedNode) return false
+
+    const fixedNodeId = picking.endpoint === 'source' ? oldConnector.target : oldConnector.source
+    if (fixedNodeId === pickedNode.id) return false
+    const fixedNode = rfNodesRef.current.find((node) => node.id === fixedNodeId)
+    if (!fixedNode) return false
+
+    const closest = picking.endpoint === 'source'
+      ? findClosestHandles(pickedNode, fixedNode)
+      : findClosestHandles(fixedNode, pickedNode)
+    const newConnection: Connection = picking.endpoint === 'source'
+      ? {
+        source: pickedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: fixedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+      : {
+        source: fixedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: pickedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+
+    reconnectPickingRef.current = null
+    setReconnectPicking(null)
+    setConnectorLongPressMenu(null)
+    await performReconnect(oldConnector, newConnection)
+    return true
+  }, [canEdit, _rfEdgesRef, performReconnect, rfNodesRef])
+
   // ── Click-connect ghost cursor tracking ────────────────────────────────────
   useEffect(() => {
     if (!clickConnectMode) {
@@ -1528,6 +1565,7 @@ export function useCanvasInteractions({
     stableOnConnectTo,
     stableOnInteractionStart,
     stableOnStartHandleReconnect,
+    stableOnReconnectPick,
     showAddingElementAt,
     // RF event handlers
     onNodesChange,

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

@@ -227,7 +227,13 @@ export function useViewData({
       queryFn: () => api.workspace.views.treeAround(viewId, { ancestorLevels: 2, descendantLevels: 2 }),
       staleTime: 0,
     }).catch(() => null)
-    if (tree) useStore.getState().setTreeData(tree)
+    if (tree) {
+      const links = buildViewContentLinks(tree, viewId, viewElementsRef.current)
+      useStore.getState().setTreeData(tree)
+      useStore.getState().setLinksMap(links.linksMap)
+      useStore.getState().setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
+    }
   }, [queryClient, viewId])
 
   // ── Fetch view content ──────────────────────────────────────────────────
@@ -281,8 +287,12 @@ export function useViewData({
     if (fresh) {
       setViewElements(fresh.placements)
       setConnectors(fresh.connectors)
+      const links = buildViewContentLinks(treeDataRef.current, viewId, fresh.placements)
+      setLinksMap(links.linksMap)
+      setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
     }
-  }, [queryClient, setConnectors, setViewElements, viewId])
+  }, [queryClient, setConnectors, setLinksMap, setParentLinksMap, setViewElements, viewId])
 
   // ── Element mutation helpers ───────────────────────────────────────────────
   const handleElementDeleted = useCallback((deletedId: number) => {

package/src/pages/ViewEditor/index.tsx

@@ -485,6 +485,7 @@ function ViewEditorInner({
   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>(() => { })
+  const stableOnReconnectPickRef = useRef<(targetElementId: number) => Promise<boolean>>(async () => false)
 
   // ── Drawing engine ────────────────────────────────────────────────────────
   const drawing = useDrawingEngine(viewId)
@@ -518,18 +519,21 @@ function ViewEditorInner({
     stableOnZoomOut: useCallback(async (id: number) => { await stableOnZoomOutRef.current(id) }, []),
     stableOnNavigateToView: useCallback((id: number) => { stableOnNavigateToViewRef.current(id) }, []),
     stableOnSelect: useCallback((obj: PlacedElement) => {
-      setSelectedEdge(null)
-      setSelectedProxyConnectorDetails(null)
-      closeProxyConnectorPanelRef.current()
-      closeConnectorPanelRef.current()
-      setSelectedElement({
-        id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
-        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,
+      void stableOnReconnectPickRef.current(obj.element_id).then((handled) => {
+        if (handled) return
+        setSelectedEdge(null)
+        setSelectedProxyConnectorDetails(null)
+        closeProxyConnectorPanelRef.current()
+        closeConnectorPanelRef.current()
+        setSelectedElement({
+          id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
+          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,
+        })
+        openElementPanelRef.current()
       })
-      openElementPanelRef.current()
     }, []),
     stableOnOpenCodePreview: useCallback((elementId: number) => {
       const obj = previewViewElementsRef.current.find((o) => o.element_id === elementId)
@@ -1052,7 +1056,8 @@ function ViewEditorInner({
     stableOnConnectToRef.current = canvas.stableOnConnectTo
     stableOnInteractionStartRef.current = canvas.stableOnInteractionStart
     stableOnStartHandleReconnectRef.current = canvas.stableOnStartHandleReconnect
-  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect])
+    stableOnReconnectPickRef.current = canvas.stableOnReconnectPick
+  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect, canvas.stableOnReconnectPick])
   const viewName = view?.name ?? null
 
   const [expandedAncestorGroups, setExpandedAncestorGroups] = useState<Set<string>>(new Set())
@@ -1780,7 +1785,7 @@ function ViewEditorInner({
               menu={connectorLongPressMenu}
               onEdit={(edgeId) => { const connector = connectors.find((e) => e.id === edgeId); if (connector) { setSelectedEdge(connector); connectorPanel.onOpen() }; setConnectorLongPressMenu(null) }}
               onMoveSource={(edgeId) => { const picking = { edgeId, endpoint: 'source' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
-              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setConnectorLongPressMenu(null) }}
+              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
               onDelete={async (edgeId) => {
                 setConnectorLongPressMenu(null)
                 if (!viewId) return

package/src/pages/ViewsGrid.tsx

@@ -832,7 +832,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
           onStartRename: () => startEdit(n.id, n.name),
           onDetails: () => handleDetailsOpen(n.id),
           onDelete: () => { setDeleteTargetId(n.id); onDeleteOpen() },
-          onShare: onShare ? () => onShare(n.id) : () => {},
+          onShare: onShare ? () => onShare(n.id) : () => { },
           onEditNameChange: setEditName,
           onEditCommit: commitEdit,
           onEditCancel: cancelEdit,
@@ -1088,7 +1088,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
               <Text color="gray.600" fontSize="sm" mb={1}>No views yet.</Text>
               {canEdit && (
                 <>
-                  <Text color="gray.700" fontSize="xs" mb={4}>Click "New Diagram" to get started.</Text>
+                  <Text color="gray.700" fontSize="xs" mb={4}>Click "+ New" to get started.</Text>
 
                 </>
               )}

package/src/utils/string.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { truncate } from './string'
+
+describe('truncate', () => {
+  it('does not truncate strings shorter than or equal to the limit', () => {
+    expect(truncate('hello', 10)).toBe('hello')
+    expect(truncate('1234567890', 10)).toBe('1234567890')
+  })
+
+  it('truncates strings longer than the limit and adds ellipsis', () => {
+    expect(truncate('hello world', 5)).toBe('hello...')
+    expect(truncate('12345678901', 10)).toBe('1234567890...')
+  })
+
+  it('uses default limit of 15', () => {
+    expect(truncate('123456789012345')).toBe('123456789012345')
+    expect(truncate('1234567890123456')).toBe('123456789012345...')
+  })
+})

package/src/utils/string.ts

@@ -0,0 +1,7 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export const truncate = (str: string, limit: number = 15): string => {
+  if (str.length <= limit) return str
+  return str.slice(0, limit) + '...'
+}