@tldiagram/core-ui 1.94.5 → 1.95.0

package/dist/pages/InfiniteZoom.d.ts

@@ -1,9 +1,11 @@
+import { type ZUICameraFrame } from '../components/ZUI';
 interface Props {
     sharedToken?: string;
     shareSlot?: React.ReactNode;
 }
 export interface InfiniteZoomHandle {
     focusDiagram(viewId: number): boolean;
+    setCameraFrame(frame: ZUICameraFrame): boolean;
 }
 declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;
 export default InfiniteZoom;

package/package.json

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

package/src/components/ZUI/ZUICanvas.tsx

@@ -38,6 +38,12 @@ import { buildVisibleProxyConnectors, collectVisibleNodeAnchors, drawVisibleProx
 export interface ZUICanvasHandle {
   fitView(): void
   focusDiagram(viewId: number): boolean
+  setCameraFrame(frame: ZUICameraFrame): boolean
+}
+
+export interface ZUICameraFrame {
+  profile: 'detail-to-overview'
+  progress: number
 }
 
 interface Props {
@@ -238,6 +244,81 @@ function easeOutQuart(t: number): number {
   return 1 - Math.pow(1 - t, 4)
 }
 
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value))
+}
+
+function fitWorldRect(
+  rect: { x: number; y: number; w: number; h: number },
+  canvasW: number,
+  canvasH: number,
+  maxZoom: number,
+  padding: number,
+): ZUIViewState | null {
+  const bboxW = Math.max(1, rect.w)
+  const bboxH = Math.max(1, rect.h)
+  const zoom = Math.min(
+    (canvasW * (1 - padding * 2)) / bboxW,
+    (canvasH * (1 - padding * 2)) / bboxH,
+    maxZoom,
+  )
+  if (!Number.isFinite(zoom) || zoom <= 0) return null
+
+  return {
+    x: (canvasW - bboxW * zoom) / 2 - rect.x * zoom,
+    y: (canvasH - bboxH * zoom) / 2 - rect.y * zoom,
+    zoom,
+  }
+}
+
+function findFirstExpandableNode(groups: DiagramGroupLayout[]): PathItem | null {
+  for (const group of groups) {
+    const found = findFirstExpandableNodeInTree(group.nodes, 0, 0, 1, 0, 0)
+    if (found) return found
+  }
+  return null
+}
+
+function findFirstExpandableNodeInTree(
+  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.children.length > 0) {
+      return {
+        id: node.id,
+        label: node.linkedDiagramLabel || node.label,
+        type: 'node',
+        isCircular: node.isCircular,
+        absX,
+        absY,
+        absW,
+        absH,
+      }
+    }
+
+    const found = findFirstExpandableNodeInTree(
+      node.children,
+      absX,
+      absY,
+      parentAbsScale * node.childScale,
+      node.childOffsetX,
+      node.childOffsetY,
+    )
+    if (found) return found
+  }
+  return null
+}
+
 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)
@@ -445,6 +526,63 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     return true
   }, [isMobileLayout, layout.groups, maxZoom, setHoveredItem, setViewState, viewStateRef])
 
+  const setCameraFrame = useCallback((frame: ZUICameraFrame) => {
+    if (frame.profile !== 'detail-to-overview') return false
+
+    const el = containerRef.current
+    if (!el) return false
+
+    const canvasW = el.offsetWidth
+    const canvasH = el.offsetHeight
+    if (canvasW === 0 || canvasH === 0) return false
+
+    const detailTarget = findFirstExpandableNode(layout.groups)
+    const overviewTarget = layout.groups[0]
+    if (!detailTarget || !overviewTarget) return false
+
+    const detail = fitWorldRect(
+      {
+        x: detailTarget.absX,
+        y: detailTarget.absY,
+        w: detailTarget.absW,
+        h: detailTarget.absH,
+      },
+      canvasW,
+      canvasH,
+      maxZoom,
+      0.28,
+    )
+
+    const overview = fitWorldRect(
+      {
+        x: overviewTarget.worldX,
+        y: overviewTarget.worldY,
+        w: overviewTarget.worldW,
+        h: overviewTarget.worldH,
+      },
+      canvasW,
+      canvasH,
+      maxZoom,
+      0.18,
+    )
+
+    if (!detail || !overview) return false
+
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
+
+    setHoveredItem(null, true)
+    const t = easeOutQuart(clamp01(frame.progress))
+    setViewState({
+      x: detail.x + (overview.x - detail.x) * t,
+      y: detail.y + (overview.y - detail.y) * t,
+      zoom: detail.zoom + (overview.zoom - detail.zoom) * t,
+    })
+    return true
+  }, [layout.groups, maxZoom, setHoveredItem, setViewState])
+
   useEffect(() => {
     return () => {
       if (cameraTransitionRef.current !== null) {
@@ -482,8 +620,9 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
         fitView(el.offsetWidth, el.offsetHeight, layout.bbox)
       },
       focusDiagram,
+      setCameraFrame,
     }),
-    [fitView, focusDiagram, layout.bbox, setHoveredItem],
+    [fitView, focusDiagram, layout.bbox, setCameraFrame, setHoveredItem],
   )
 
   // ── RAF render loop ──────────────────────────────────────────────

package/src/components/ZUI/index.ts

@@ -1,3 +1,3 @@
 // src/components/ZUI/index.ts
 export { ZUICanvas } from './ZUICanvas'
-export type { ZUICanvasHandle } from './ZUICanvas'
+export type { ZUICameraFrame, ZUICanvasHandle } from './ZUICanvas'

package/src/pages/InfiniteZoom.tsx

@@ -24,7 +24,7 @@ import { FitViewIcon as FitViewSvg, TagsIcon, EyeIcon, EyeOffIcon, FocusIcon as
 import ExploreOnboarding from '../components/ExploreOnboarding'
 import ExplorePageOnboarding from '../components/ExplorePageOnboarding'
 import MiniZoomOnboarding from '../components/MiniZoomOnboarding'
-import { ZUICanvas, type ZUICanvasHandle } from '../components/ZUI'
+import { ZUICanvas, type ZUICameraFrame, type ZUICanvasHandle } from '../components/ZUI'
 import { useCrossBranchContextSettings } from '../crossBranch/settings'
 import { primeWorkspaceGraphSnapshot } from '../crossBranch/store'
 
@@ -36,6 +36,7 @@ interface Props {
 
 export interface InfiniteZoomHandle {
   focusDiagram(viewId: number): boolean
+  setCameraFrame(frame: ZUICameraFrame): boolean
 }
 
 const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
@@ -62,6 +63,9 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     focusDiagram(viewId: number) {
       return zuiRef.current?.focusDiagram(viewId) ?? false
     },
+    setCameraFrame(frame: ZUICameraFrame) {
+      return zuiRef.current?.setCameraFrame(frame) ?? false
+    },
   }), [])
 
   // ── No data or No content ────────────────────────────────────────
@@ -173,6 +177,24 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     setCanvasReady(true)
   }, [])
 
+  useEffect(() => {
+    if (!sharedToken) return
+
+    const handleMessage = (event: MessageEvent) => {
+      const data = event.data as { type?: unknown; progress?: unknown; profile?: unknown } | null
+      if (!data || data.type !== 'tldiagram-zui-camera') return
+      if (data.profile !== 'detail-to-overview') return
+
+      const progress = Number(data.progress)
+      if (!Number.isFinite(progress)) return
+
+      zuiRef.current?.setCameraFrame({ profile: 'detail-to-overview', progress })
+    }
+
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [sharedToken])
+
   if (!loading && (!data || (data.tree ?? []).length === 0 || !hasPlacements)) {
     const noDiagrams = !data || (data.tree ?? []).length === 0
     return (