@tldiagram/core-ui 1.87.0

package/src/pages/ViewEditor/utils.ts

@@ -0,0 +1,88 @@
+import type { Connector } from '../../types'
+import type { Node as RFNode } from 'reactflow'
+
+// ── Domain-model conversion ────────────────────────────────────────────────
+
+/** Pass-through: the API already returns Connector in the canonical shape. */
+export function connectorToConnector(connector: Connector): Connector {
+  return connector
+}
+
+// ── Handle geometry ────────────────────────────────────────────────────────
+
+export function findClosestHandles(
+  sourceNode: RFNode,
+  targetNode: RFNode,
+): { sourceHandle: string; targetHandle: string } {
+  const w1 = sourceNode.width ?? 180
+  const h1 = sourceNode.height ?? 80
+  const w2 = targetNode.width ?? 180
+  const h2 = targetNode.height ?? 80
+  const sp = sourceNode.position
+  const tp = targetNode.position
+
+  const srcHandles: [string, number, number][] = [
+    ['top', sp.x + w1 / 2, sp.y],
+    ['bottom', sp.x + w1 / 2, sp.y + h1],
+    ['left', sp.x, sp.y + h1 / 2],
+    ['right', sp.x + w1, sp.y + h1 / 2],
+  ]
+  const tgtHandles: [string, number, number][] = [
+    ['top', tp.x + w2 / 2, tp.y],
+    ['bottom', tp.x + w2 / 2, tp.y + h2],
+    ['left', tp.x, tp.y + h2 / 2],
+    ['right', tp.x + w2, tp.y + h2 / 2],
+  ]
+
+  let minDist = Infinity
+  let bestSrc = 'right'
+  let bestTgt = 'left'
+  for (const [sid, sx, sy] of srcHandles) {
+    for (const [tid, tx, ty] of tgtHandles) {
+      const d = Math.hypot(tx - sx, ty - sy)
+      if (d < minDist) { minDist = d; bestSrc = sid; bestTgt = tid }
+    }
+  }
+  return { sourceHandle: bestSrc, targetHandle: bestTgt }
+}
+
+export function findClosestHandleToPoint(
+  sourceNode: RFNode,
+  tx: number,
+  ty: number,
+): { sourceHandle: string; targetHandle: string } {
+  const w = sourceNode.width ?? 180
+  const h = sourceNode.height ?? 80
+  const sp = sourceNode.position
+  const handles: [string, number, number][] = [
+    ['top', sp.x + w / 2, sp.y],
+    ['bottom', sp.x + w / 2, sp.y + h],
+    ['left', sp.x, sp.y + h / 2],
+    ['right', sp.x + w, sp.y + h / 2],
+  ]
+  let minDist = Infinity
+  let bestSrc = 'right'
+  for (const [sid, sx, sy] of handles) {
+    const d = Math.hypot(tx - sx, ty - sy)
+    if (d < minDist) { minDist = d; bestSrc = sid }
+  }
+  const opp: Record<string, string> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
+  return { sourceHandle: bestSrc, targetHandle: opp[bestSrc] ?? 'left' }
+}
+
+// ── Export helpers ─────────────────────────────────────────────────────────
+
+export function sanitizeExportFilename(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return 'view-export'
+  return trimmed.replace(/[\\/:*?"<>|]+/g, '-').replace(/\s+/g, ' ')
+}
+
+export function triggerDownload(dataUrl: string, filename: string) {
+  const link = document.createElement('a')
+  link.href = dataUrl
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}

package/src/pages/Views.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { Box, Flex, Button, Text, Spinner, Center } from '@chakra-ui/react'
+import { motion, AnimatePresence } from 'framer-motion'
+import ViewsGrid from './ViewsGrid'
+import InfiniteZoom from './InfiniteZoom'
+import { api } from '../api/client'
+
+interface Props {
+  shareSlot?: React.ReactNode
+  onShareView?: (viewId: number) => void
+}
+
+type ViewType = 'explore' | 'hierarchy'
+
+const MotionBox = motion.create(Box)
+
+export default function ViewsPage({ shareSlot, onShareView }: Props) {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const requestedView = searchParams.get('view')
+  const initialView: ViewType = requestedView === 'edit' ? 'hierarchy' : ((requestedView as ViewType) || 'explore')
+  const [view, setView] = useState<ViewType>(initialView)
+  const [initializing, setInitializing] = useState(true)
+
+  const handleViewChange = useCallback((newView: ViewType) => {
+    setView(newView)
+    const newParams = new URLSearchParams(searchParams)
+    newParams.set('view', newView)
+    setSearchParams(newParams, { replace: true })
+  }, [searchParams, setSearchParams])
+
+  // Sync state with search params
+  useEffect(() => {
+    const v = searchParams.get('view')
+    if (v === 'explore' || v === 'hierarchy') {
+      setView(v)
+    }
+    if (v === 'edit') {
+      setView('hierarchy')
+    }
+  }, [searchParams])
+
+  useEffect(() => {
+    let mounted = true
+    api.workspace.views.tree()
+      .then((tree) => {
+        if (!mounted) return
+        if (!tree || tree.length === 0) {
+          // Only auto-switch to edit if no view is explicitly set in URL
+          if (!searchParams.get('view')) {
+            handleViewChange('hierarchy')
+          }
+        }
+      })
+      .catch(() => {
+        // Fallback to explore on error
+      })
+      .finally(() => {
+        if (mounted) setInitializing(false)
+      })
+    return () => { mounted = false }
+  }, [searchParams, handleViewChange])
+
+  // Colors for the switch
+  const bgColor = 'var(--bg)'
+  const activeColor = 'clay.bg'
+  const inactiveColor = 'gray.400'
+
+  if (initializing) {
+    return (
+      <Center h="full">
+        <Spinner size="xl" color="var(--accent)" />
+      </Center>
+    )
+  }
+
+  return (
+    <Box position="relative" w="full" h="full" overflow="hidden">
+      {/* Floating Switch */}
+      <Flex
+        position="absolute"
+        top={4}
+        left="50%"
+        transform="translateX(-50%)"
+        zIndex={1000}
+        bg={bgColor}
+        backdropFilter="blur(12px)"
+        border="1px solid"
+        borderColor="whiteAlpha.100"
+        borderRadius="full"
+        p={1}
+        gap={1}
+        boxShadow="0 4px 20px rgba(0, 0, 0, 0.4)"
+      >
+        <Button
+          size="sm"
+          variant="ghost"
+          borderRadius="full"
+          position="relative"
+          px={6}
+          h="32px"
+          onClick={() => handleViewChange('explore')}
+          _hover={{ bg: 'transparent' }}
+          _active={{ bg: 'transparent' }}
+          color={view === 'explore' ? 'white' : inactiveColor}
+          transition="color 0.2s"
+        >
+          {view === 'explore' && (
+            <MotionBox
+              layoutId="active-pill"
+              position="absolute"
+              inset={0}
+              bg={activeColor}
+              borderRadius="full"
+              zIndex={-1}
+              transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+            />
+          )}
+          <Text fontSize="xs" fontWeight="bold" zIndex={1}>Explore</Text>
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          borderRadius="full"
+          position="relative"
+          px={6}
+          h="32px"
+          onClick={() => handleViewChange('hierarchy')}
+          _hover={{ bg: 'transparent' }}
+          _active={{
+            bg: 'transparent'
+          }}
+          color={view === 'hierarchy' ? 'white' : inactiveColor}
+          transition="color 0.2s"
+        >
+          {view === 'hierarchy' && (
+            <MotionBox
+              layoutId="active-pill"
+              position="absolute"
+              inset={0}
+              bg={activeColor}
+              borderRadius="full"
+              zIndex={-1}
+              transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+            />
+          )}
+          <Text fontSize="xs" fontWeight="bold" zIndex={1}>Hierarchy</Text>
+        </Button>
+      </Flex>
+
+      {/* Page Content */}
+      <AnimatePresence mode="wait">
+        <MotionBox
+          key={view}
+          initial={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 1.02 }}
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
+          w="full"
+          h="full"
+        >
+          {view === 'explore' ? (
+            <InfiniteZoom shareSlot={shareSlot} />
+          ) : (
+            <ViewsGrid onShare={onShareView} />
+          )}
+        </MotionBox>
+      </AnimatePresence>
+    </Box>
+  )
+}