@tldiagram/core-ui 1.87.0

package/src/pages/ViewEditor/components/EditorOverlays.tsx

@@ -0,0 +1,172 @@
+import React from 'react'
+import { Box } from '@chakra-ui/react'
+import { useViewport, type Node as RFNode } from 'reactflow'
+import {
+  DEFAULT_SOURCE_HANDLE_SIDE,
+  DEFAULT_TARGET_HANDLE_SIDE,
+  getHandleFlowPosition,
+  getLogicalHandleId,
+} from '../../../utils/edgeDistribution'
+
+interface EditorOverlaysProps {
+  connectGhostPos: { x: number; y: number } | null
+  clickConnectMode: { sourceNodeId: string; sourceHandle: string; targetHandle?: string } | null
+  clickConnectCursorPos: { x: number; y: number } | null
+  handleReconnectDrag: {
+    endpoint: 'source' | 'target'
+    fixedNodeId: string
+    fixedHandle: string
+    movingHandle: string
+    cursorPos: { x: number; y: number }
+  } | null
+  rfNodes: RFNode[]
+}
+
+export const EditorOverlays: React.FC<EditorOverlaysProps> = ({
+  connectGhostPos,
+  clickConnectMode,
+  clickConnectCursorPos,
+  handleReconnectDrag,
+  rfNodes,
+}) => {
+  const viewportState = useViewport()
+  
+  return (
+    <>
+      {/* Ghost node during connector drag */}
+      {connectGhostPos && (
+        <Box position="fixed" left={`${connectGhostPos.x - 90}px`} top={`${connectGhostPos.y - 42}px`}
+          width="180px" minHeight="85px" bg="rgba(var(--bg-element-rgb), 0.4)"
+          border="1px solid rgba(113, 128, 150, 0.45)" rounded="lg"
+          boxShadow="0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25)"
+          pointerEvents="none" zIndex={9999} display="flex" flexDir="column"
+          alignItems="center" justifyContent="center" gap="6px" py={3} backdropFilter="blur(4px)">
+          <Box w="60%" h="10px" bg="rgba(226,232,240,0.18)" rounded="sm" />
+          <Box w="38%" h="7px" bg="rgba(var(--accent-rgb), 0.22)" rounded="sm" />
+        </Box>
+      )}
+
+      {/* Click-connect ghost connector */}
+      {clickConnectMode && clickConnectCursorPos && (() => {
+        const sourceNode = rfNodes.find((n) => n.id === clickConnectMode.sourceNodeId)
+        if (!sourceNode) return null
+        const w = sourceNode.width ?? 180; const h = sourceNode.height ?? 80
+        const sp = sourceNode.positionAbsolute ?? sourceNode.position
+        const { x: fx, y: fy, side: sourceSide } = getHandleFlowPosition(
+          sp.x,
+          sp.y,
+          w,
+          h,
+          clickConnectMode.sourceHandle,
+          DEFAULT_SOURCE_HANDLE_SIDE,
+        )
+        const rfRect = document.querySelector('.react-flow')?.getBoundingClientRect()
+        const rfX = rfRect?.left ?? 0; const rfY = rfRect?.top ?? 0
+        const sx = fx * viewportState.zoom + viewportState.x + rfX
+        const sy = fy * viewportState.zoom + viewportState.y + rfY
+        const tx = clickConnectCursorPos.x; const ty = clickConnectCursorPos.y
+        const dx = Math.abs(tx - sx); const dy = Math.abs(ty - sy)
+        const CURVATURE = 0.5
+        const isHSrc = sourceSide === 'left' || sourceSide === 'right'
+        const srcMinStem = (isHSrc ? w * 0.5 : h * 0.5) * viewportState.zoom
+        let c1x = sx, c1y = sy
+        if (sourceSide === 'left') c1x = sx - Math.max(dx * CURVATURE, srcMinStem)
+        else if (sourceSide === 'right') c1x = sx + Math.max(dx * CURVATURE, srcMinStem)
+        else if (sourceSide === 'top') c1y = sy - Math.max(dy * CURVATURE, srcMinStem)
+        else c1y = sy + Math.max(dy * CURVATURE, srcMinStem)
+        let c2x = tx, c2y = ty
+        if (clickConnectMode.targetHandle) {
+          const targetSide = getLogicalHandleId(clickConnectMode.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? DEFAULT_TARGET_HANDLE_SIDE
+          const tgtMinStem = (targetSide === 'left' || targetSide === 'right') ? 90 * viewportState.zoom : 40 * viewportState.zoom
+          if (targetSide === 'left') c2x = tx - Math.max(dx * CURVATURE, tgtMinStem)
+          else if (targetSide === 'right') c2x = tx + Math.max(dx * CURVATURE, tgtMinStem)
+          else if (targetSide === 'top') c2y = ty - Math.max(dy * CURVATURE, tgtMinStem)
+          else c2y = ty + Math.max(dy * CURVATURE, tgtMinStem)
+        }
+        return (
+          <svg key="click-connect-connector" style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 9997 }}>
+            <path d={`M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`}
+              className="react-flow__connector-path" stroke="var(--theme-blue)" strokeWidth="2" fill="none" opacity="0.8" />
+          </svg>
+        )
+      })()}
+
+      {/* Handle-reconnect ghost connector */}
+      {handleReconnectDrag && (() => {
+        const fixedNode = rfNodes.find((n) => n.id === handleReconnectDrag.fixedNodeId)
+        if (!fixedNode) return null
+        const w = fixedNode.width ?? 180
+        const h = fixedNode.height ?? 80
+        const sp = fixedNode.positionAbsolute ?? fixedNode.position
+        const { x: fx, y: fy } = getHandleFlowPosition(
+          sp.x,
+          sp.y,
+          w,
+          h,
+          handleReconnectDrag.fixedHandle,
+          handleReconnectDrag.endpoint === 'source' ? DEFAULT_TARGET_HANDLE_SIDE : DEFAULT_SOURCE_HANDLE_SIDE,
+        )
+        const rfRect = document.querySelector('.react-flow')?.getBoundingClientRect()
+        const rfX = rfRect?.left ?? 0
+        const rfY = rfRect?.top ?? 0
+        const fixedScreenX = fx * viewportState.zoom + viewportState.x + rfX
+        const fixedScreenY = fy * viewportState.zoom + viewportState.y + rfY
+        const movingScreenX = handleReconnectDrag.cursorPos.x
+        const movingScreenY = handleReconnectDrag.cursorPos.y
+
+        const sourceX = handleReconnectDrag.endpoint === 'source' ? movingScreenX : fixedScreenX
+        const sourceY = handleReconnectDrag.endpoint === 'source' ? movingScreenY : fixedScreenY
+        const targetX = handleReconnectDrag.endpoint === 'source' ? fixedScreenX : movingScreenX
+        const targetY = handleReconnectDrag.endpoint === 'source' ? fixedScreenY : movingScreenY
+        const sourceSide = getLogicalHandleId(
+          handleReconnectDrag.endpoint === 'source' ? handleReconnectDrag.movingHandle : handleReconnectDrag.fixedHandle,
+          DEFAULT_SOURCE_HANDLE_SIDE,
+        ) ?? DEFAULT_SOURCE_HANDLE_SIDE
+        const targetSide = getLogicalHandleId(
+          handleReconnectDrag.endpoint === 'source' ? handleReconnectDrag.fixedHandle : handleReconnectDrag.movingHandle,
+          DEFAULT_TARGET_HANDLE_SIDE,
+        ) ?? DEFAULT_TARGET_HANDLE_SIDE
+
+        const dx = Math.abs(targetX - sourceX)
+        const dy = Math.abs(targetY - sourceY)
+        const CURVATURE = 0.5
+        const isHSrc = sourceSide === 'left' || sourceSide === 'right'
+        const isHTgt = targetSide === 'left' || targetSide === 'right'
+        const srcMinStem = (handleReconnectDrag.endpoint === 'source'
+          ? (isHSrc ? 90 : 40)
+          : (isHSrc ? w * 0.5 : h * 0.5)) * viewportState.zoom
+        const tgtMinStem = (handleReconnectDrag.endpoint === 'target'
+          ? (isHTgt ? 90 : 40)
+          : (isHTgt ? w * 0.5 : h * 0.5)) * viewportState.zoom
+
+        let c1x = sourceX
+        let c1y = sourceY
+        if (sourceSide === 'left') c1x = sourceX - Math.max(dx * CURVATURE, srcMinStem)
+        else if (sourceSide === 'right') c1x = sourceX + Math.max(dx * CURVATURE, srcMinStem)
+        else if (sourceSide === 'top') c1y = sourceY - Math.max(dy * CURVATURE, srcMinStem)
+        else c1y = sourceY + Math.max(dy * CURVATURE, srcMinStem)
+
+        let c2x = targetX
+        let c2y = targetY
+        if (targetSide === 'left') c2x = targetX - Math.max(dx * CURVATURE, tgtMinStem)
+        else if (targetSide === 'right') c2x = targetX + Math.max(dx * CURVATURE, tgtMinStem)
+        else if (targetSide === 'top') c2y = targetY - Math.max(dy * CURVATURE, tgtMinStem)
+        else c2y = targetY + Math.max(dy * CURVATURE, tgtMinStem)
+
+        return (
+          <svg key="handle-reconnect-connector" style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 9998 }}>
+            <path
+              d={`M${sourceX},${sourceY} C${c1x},${c1y} ${c2x},${c2y} ${targetX},${targetY}`}
+              className="react-flow__connector-path"
+              stroke="var(--theme-blue)"
+              strokeWidth="2"
+              fill="none"
+              opacity="0.85"
+            />
+          </svg>
+        )
+      })()}
+
+    </>
+  )
+}

package/src/pages/ViewEditor/components/EmptyCanvasState.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Box, Text } from '@chakra-ui/react'
+
+interface EmptyCanvasStateProps {
+  isMobile: boolean
+  hasNodes: boolean
+}
+
+export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = ({ isMobile, hasNodes }) => {
+  if (hasNodes) return null
+
+  return (
+    <Box position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)"
+      textAlign="center" pointerEvents="none" px={4} userSelect="none">
+      <svg width="160" height="100" viewBox="0 0 160 100" style={{ display: 'block', margin: '0 auto 20px' }} xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <marker id="es-arr" markerWidth="7" markerHeight="7" refX="5" refY="3" orient="auto">
+            <path d="M0,0 L0,6 L7,3 z" fill="#374151" />
+          </marker>
+        </defs>
+        <rect x="0" y="0" width="48" height="100" rx="6" fill="#1C2535" stroke="#1F2937" strokeWidth="1" />
+        <rect x="6" y="12" width="36" height="14" rx="3" fill="#263044" />
+        <rect x="6" y="31" width="36" height="14" rx="3" fill="#2D3A50" stroke="#3B82F6" strokeWidth="0.8" />
+        <rect x="6" y="50" width="36" height="14" rx="3" fill="#263044" />
+        <line x1="50" y1="38" x2="63" y2="50" stroke="#374151" strokeWidth="1.4" strokeDasharray="3,2" markerEnd="url(#es-arr)" />
+        <rect x="56" y="4" width="104" height="92" rx="8" fill="#111827" stroke="#1F2937" strokeWidth="1" />
+        {Array.from({ length: 4 }, (_, r) => Array.from({ length: 6 }, (_, c) => (
+          <circle key={`${r}-${c}`} cx={(c * 15 + 66).toString()} cy={(r * 22 + 18).toString()} r="0.7" fill="#1F2937" />
+        ))).flat()}
+        <rect x="66" y="28" width="84" height="44" rx="6" fill="none" stroke="#374151" strokeWidth="1.2" strokeDasharray="4,3" />
+        <rect x="76" y="38" width="36" height="22" rx="4" fill="#1C2535" stroke="#3B82F6" strokeWidth="1" opacity="0.6" />
+        <text x="94" y="53" textAnchor="middle" fill="#94A3B8" fontSize="7" fontFamily="system-ui,sans-serif">Service</text>
+      </svg>
+      <Text fontSize="md" fontWeight="semibold" color="gray.500" mb={1}>Start building your view</Text>
+      <Text fontSize="xs" color="gray.600" lineHeight="tall">
+        {isMobile
+          ? 'Tap/Drag from the left panel, or Hold on the canvas to bring up the menu, then tap Add Element.'
+          : <> Drag from the left panel, or press <kbd style={{ fontFamily: 'monospace', background: '#1F2937', border: '1px solid #374151', borderRadius: 3, padding: '0 4px' }}>C</kbd> to create a new element directly.</>}
+      </Text>
+    </Box>
+  )
+}

package/src/pages/ViewEditor/context.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+import type { LibraryElement, Connector } from '../../types'
+
+export interface ViewEditorContextValue {
+  viewId: number | null
+  canEdit: boolean
+  isOwner: boolean
+  isFreePlan: boolean
+  snapToGrid: boolean
+  setSnapToGrid: (snap: boolean) => void
+  selectedElement: LibraryElement | null
+  selectedConnector: Connector | null
+}
+
+export const ViewEditorContext = createContext<ViewEditorContextValue | null>(null)
+
+export function useViewEditorContext(): ViewEditorContextValue {
+  const ctx = useContext(ViewEditorContext)
+  if (!ctx) throw new Error('useViewEditorContext must be used inside ViewEditor')
+  return ctx
+}