feat: Add TreeCanvas layout with visual branching and orchestration
Replaces NodeList + TreePreviewPanel with a single full-width canvas. Decision nodes branch horizontally; action/solution nodes flow vertically. Inline type picker adds nodes without modal interruption. Handles pending link resolution, inbound reference cleanup on delete, and selection sync. CSS dot-grid background + connector lines for structure clarity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
636
frontend/src/components/tree-editor/TreeCanvas.tsx
Normal file
636
frontend/src/components/tree-editor/TreeCanvas.tsx
Normal file
@@ -0,0 +1,636 @@
|
||||
import { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import { HelpCircle, Zap, CheckCircle, Plus, X } from 'lucide-react'
|
||||
import { useTreeEditorStore, findNodeInTree } from '@/store/treeEditorStore'
|
||||
import { TreeCanvasNode } from './TreeCanvasNode'
|
||||
import type { TreeStructure, NodeType } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface PendingLink {
|
||||
parentId: string
|
||||
optionId?: string // For decision option linking
|
||||
}
|
||||
|
||||
interface DragState {
|
||||
nodeId: string
|
||||
parentId: string | null
|
||||
index: number
|
||||
}
|
||||
|
||||
// ─── Reference cleanup helper ─────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Before deleting a node, clear all inbound references to it across the tree.
|
||||
* This prevents stale next_node_id / option.next_node_id references.
|
||||
*/
|
||||
function clearInboundReferences(
|
||||
nodeId: string,
|
||||
treeStructure: TreeStructure,
|
||||
updateNode: (id: string, updates: Partial<TreeStructure>) => void
|
||||
) {
|
||||
function walk(node: TreeStructure) {
|
||||
// Clear decision option references
|
||||
if (node.type === 'decision' && node.options) {
|
||||
const needsUpdate = node.options.some((o) => o.next_node_id === nodeId)
|
||||
if (needsUpdate) {
|
||||
updateNode(node.id, {
|
||||
options: node.options.map((o) =>
|
||||
o.next_node_id === nodeId ? { ...o, next_node_id: '' } : o
|
||||
),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Clear action next_node_id references
|
||||
if (node.type === 'action' && node.next_node_id === nodeId) {
|
||||
updateNode(node.id, { next_node_id: '' })
|
||||
}
|
||||
|
||||
// Recurse
|
||||
node.children?.forEach(walk)
|
||||
}
|
||||
|
||||
walk(treeStructure)
|
||||
}
|
||||
|
||||
// ─── Add-node type picker ─────────────────────────────────────────────────────
|
||||
|
||||
interface AddNodePickerProps {
|
||||
onSelect: (type: NodeType) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-sm">
|
||||
<span className="text-xs text-muted-foreground shrink-0">Add:</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect('decision')}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
|
||||
'border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20'
|
||||
)}
|
||||
>
|
||||
<HelpCircle className="h-3 w-3" />
|
||||
Decision
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect('action')}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
|
||||
'border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20'
|
||||
)}
|
||||
>
|
||||
<Zap className="h-3 w-3" />
|
||||
Action
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect('solution')}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
|
||||
'border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20'
|
||||
)}
|
||||
>
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Solution
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="ml-1 rounded p-0.5 text-muted-foreground hover:bg-accent"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Add-node trigger button ──────────────────────────────────────────────────
|
||||
|
||||
interface AddNodeButtonProps {
|
||||
label?: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
function AddNodeButton({ label = 'Add node', onClick }: AddNodeButtonProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-label',
|
||||
'border border-dashed border-border text-muted-foreground',
|
||||
'hover:border-primary/40 hover:text-foreground hover:bg-accent/50',
|
||||
'transition-all duration-150'
|
||||
)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Add-key builder ──────────────────────────────────────────────────────────
|
||||
|
||||
/** Unique key for an add-target: "parentId" or "parentId:optionId" */
|
||||
function addKey(parentId: string, optionId?: string) {
|
||||
return optionId ? `${parentId}:${optionId}` : parentId
|
||||
}
|
||||
|
||||
// ─── TreeCanvas ───────────────────────────────────────────────────────────────
|
||||
|
||||
export function TreeCanvas() {
|
||||
const {
|
||||
treeStructure,
|
||||
addNode,
|
||||
updateNode,
|
||||
deleteNode,
|
||||
duplicateNode,
|
||||
reorderNodes,
|
||||
selectNode,
|
||||
selectedNodeId,
|
||||
} = useTreeEditorStore()
|
||||
|
||||
// ── Local canvas state ──
|
||||
const [expandedNodeId, setExpandedNodeId] = useState<string | null>(null)
|
||||
const [newNodeIds, setNewNodeIds] = useState<Set<string>>(new Set())
|
||||
const [pendingAddKey, setPendingAddKey] = useState<string | null>(null)
|
||||
const [pendingLinks, setPendingLinks] = useState<Map<string, PendingLink>>(
|
||||
new Map()
|
||||
)
|
||||
const [dragState, setDragState] = useState<DragState | null>(null)
|
||||
const [dragOverTarget, setDragOverTarget] = useState<{
|
||||
parentId: string | null
|
||||
index: number
|
||||
} | null>(null)
|
||||
|
||||
// Node ref map for scroll-into-view
|
||||
const nodeRefs = useRef<Map<string, HTMLDivElement>>(new Map())
|
||||
|
||||
// ── Selection sync ──
|
||||
// When selectedNodeId changes externally (e.g. ValidationSummary click),
|
||||
// auto-expand that card and scroll it into view.
|
||||
useEffect(() => {
|
||||
if (selectedNodeId && selectedNodeId !== expandedNodeId) {
|
||||
setExpandedNodeId(selectedNodeId)
|
||||
const el = nodeRefs.current.get(selectedNodeId)
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedNodeId])
|
||||
|
||||
// ── Card expand/collapse ──
|
||||
const handleToggleExpand = useCallback(
|
||||
(nodeId: string) => {
|
||||
setExpandedNodeId((prev) => (prev === nodeId ? null : nodeId))
|
||||
selectNode(nodeId)
|
||||
},
|
||||
[selectNode]
|
||||
)
|
||||
|
||||
// ── Save inline edits ──
|
||||
const handleSave = useCallback(
|
||||
(nodeId: string, updates: Partial<TreeStructure>) => {
|
||||
updateNode(nodeId, updates)
|
||||
|
||||
// Resolve pending link for new nodes
|
||||
const link = pendingLinks.get(nodeId)
|
||||
if (link) {
|
||||
const parentNode = treeStructure
|
||||
? findNodeInTree(link.parentId, treeStructure)
|
||||
: null
|
||||
|
||||
if (parentNode) {
|
||||
if (link.optionId && parentNode.type === 'decision' && parentNode.options) {
|
||||
// Link the decision option to this new child node
|
||||
const updatedOptions = parentNode.options.map((o) =>
|
||||
o.id === link.optionId ? { ...o, next_node_id: nodeId } : o
|
||||
)
|
||||
updateNode(link.parentId, { options: updatedOptions })
|
||||
} else if (parentNode.type === 'action') {
|
||||
// Link the action's next node
|
||||
updateNode(link.parentId, { next_node_id: nodeId })
|
||||
}
|
||||
}
|
||||
|
||||
setPendingLinks((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.delete(nodeId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
setNewNodeIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(nodeId)
|
||||
return next
|
||||
})
|
||||
setExpandedNodeId(null)
|
||||
},
|
||||
[pendingLinks, treeStructure, updateNode]
|
||||
)
|
||||
|
||||
// ── Cancel new node ──
|
||||
const handleCancelNew = useCallback(
|
||||
(nodeId: string) => {
|
||||
deleteNode(nodeId)
|
||||
setNewNodeIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(nodeId)
|
||||
return next
|
||||
})
|
||||
setPendingLinks((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.delete(nodeId)
|
||||
return next
|
||||
})
|
||||
if (expandedNodeId === nodeId) setExpandedNodeId(null)
|
||||
},
|
||||
[deleteNode, expandedNodeId]
|
||||
)
|
||||
|
||||
// ── Delete node (with inbound reference cleanup) ──
|
||||
const handleDelete = useCallback(
|
||||
(nodeId: string) => {
|
||||
if (!treeStructure) return
|
||||
clearInboundReferences(nodeId, treeStructure, updateNode)
|
||||
deleteNode(nodeId)
|
||||
if (expandedNodeId === nodeId) setExpandedNodeId(null)
|
||||
},
|
||||
[treeStructure, updateNode, deleteNode, expandedNodeId]
|
||||
)
|
||||
|
||||
// ── Duplicate node ──
|
||||
const handleDuplicate = useCallback(
|
||||
(nodeId: string) => {
|
||||
duplicateNode(nodeId)
|
||||
},
|
||||
[duplicateNode]
|
||||
)
|
||||
|
||||
// ── Add node flow ──
|
||||
const handleAddNodeSelect = useCallback(
|
||||
(type: NodeType, parentId: string, optionId?: string) => {
|
||||
const newId = addNode(parentId, type)
|
||||
setNewNodeIds((prev) => new Set([...prev, newId]))
|
||||
setPendingLinks((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(newId, { parentId, optionId })
|
||||
return next
|
||||
})
|
||||
setExpandedNodeId(newId)
|
||||
setPendingAddKey(null)
|
||||
},
|
||||
[addNode]
|
||||
)
|
||||
|
||||
// ── Drag & drop ──
|
||||
const handleDragStart = useCallback(
|
||||
(e: React.DragEvent, nodeId: string) => {
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
// Find parent and index for this node
|
||||
const findParentAndIndex = (
|
||||
searchNode: TreeStructure,
|
||||
targetId: string,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
_parentId: string | null
|
||||
): { parentId: string | null; index: number } | null => {
|
||||
if (searchNode.children) {
|
||||
for (let i = 0; i < searchNode.children.length; i++) {
|
||||
if (searchNode.children[i].id === targetId) {
|
||||
return { parentId: searchNode.id, index: i }
|
||||
}
|
||||
const found = findParentAndIndex(
|
||||
searchNode.children[i],
|
||||
targetId,
|
||||
searchNode.id
|
||||
)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
if (!treeStructure) return
|
||||
const location = findParentAndIndex(treeStructure, nodeId, null)
|
||||
if (location) {
|
||||
setDragState({
|
||||
nodeId,
|
||||
parentId: location.parentId,
|
||||
index: location.index,
|
||||
})
|
||||
}
|
||||
},
|
||||
[treeStructure]
|
||||
)
|
||||
|
||||
const handleDragOver = useCallback(
|
||||
(e: React.DragEvent, parentId: string | null, index: number) => {
|
||||
e.preventDefault()
|
||||
setDragOverTarget({ parentId, index })
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent, targetParentId: string | null, targetIndex: number) => {
|
||||
e.preventDefault()
|
||||
if (!dragState || !targetParentId) {
|
||||
setDragState(null)
|
||||
setDragOverTarget(null)
|
||||
return
|
||||
}
|
||||
|
||||
const { parentId: sourceParentId, index: sourceIndex } = dragState
|
||||
|
||||
if (sourceParentId === targetParentId) {
|
||||
const adjustedIndex =
|
||||
sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
|
||||
if (sourceIndex !== adjustedIndex) {
|
||||
reorderNodes(sourceParentId!, sourceIndex, adjustedIndex)
|
||||
}
|
||||
}
|
||||
// Cross-parent move intentionally not supported in canvas (complex to handle safely)
|
||||
|
||||
setDragState(null)
|
||||
setDragOverTarget(null)
|
||||
},
|
||||
[dragState, reorderNodes]
|
||||
)
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
setDragState(null)
|
||||
setDragOverTarget(null)
|
||||
}, [])
|
||||
|
||||
// ── Recursive node renderer ──
|
||||
const renderNode = useCallback(
|
||||
(
|
||||
node: TreeStructure,
|
||||
parentId: string | null,
|
||||
index: number,
|
||||
optionLabel?: string
|
||||
): React.ReactNode => {
|
||||
const isExpanded = expandedNodeId === node.id
|
||||
const isNew = newNodeIds.has(node.id)
|
||||
const nodeChildren = node.children || []
|
||||
|
||||
// For decision nodes, order children by option link order
|
||||
const orderedChildren: Array<{
|
||||
child: TreeStructure
|
||||
optionLabel?: string
|
||||
optionId?: string
|
||||
childIndex: number
|
||||
}> = []
|
||||
|
||||
if (node.type === 'decision' && node.options && nodeChildren.length > 0) {
|
||||
// First: children linked by options (in option order)
|
||||
const linkedChildIds = new Set<string>()
|
||||
node.options.forEach((opt) => {
|
||||
const linked = nodeChildren.find((c) => c.id === opt.next_node_id)
|
||||
if (linked) {
|
||||
orderedChildren.push({
|
||||
child: linked,
|
||||
optionLabel: opt.label || undefined,
|
||||
optionId: opt.id,
|
||||
childIndex: nodeChildren.indexOf(linked),
|
||||
})
|
||||
linkedChildIds.add(linked.id)
|
||||
}
|
||||
})
|
||||
// Then: unlinked children
|
||||
nodeChildren.forEach((child, idx) => {
|
||||
if (!linkedChildIds.has(child.id)) {
|
||||
orderedChildren.push({
|
||||
child,
|
||||
childIndex: idx,
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
nodeChildren.forEach((child, idx) => {
|
||||
orderedChildren.push({ child, childIndex: idx })
|
||||
})
|
||||
}
|
||||
|
||||
// Determine if this node has any children to render
|
||||
const hasChildren = orderedChildren.length > 0
|
||||
|
||||
// Determine "add" targets for this node
|
||||
// For decision nodes: one add-button per option (not-yet-linked options)
|
||||
// For action nodes: one add-button below
|
||||
// For solution: none
|
||||
const unlinkedOptions =
|
||||
node.type === 'decision' && node.options
|
||||
? node.options.filter(
|
||||
(opt) =>
|
||||
!opt.next_node_id ||
|
||||
!nodeChildren.find((c) => c.id === opt.next_node_id)
|
||||
)
|
||||
: []
|
||||
|
||||
const showSingleAddButton =
|
||||
node.type === 'action' && !hasChildren
|
||||
|
||||
return (
|
||||
<div
|
||||
key={node.id}
|
||||
className="flex flex-col items-center"
|
||||
ref={(el) => {
|
||||
if (el) nodeRefs.current.set(node.id, el as HTMLDivElement)
|
||||
else nodeRefs.current.delete(node.id)
|
||||
}}
|
||||
>
|
||||
{/* Drop indicator above */}
|
||||
{dragOverTarget?.parentId === parentId &&
|
||||
dragOverTarget.index === index && (
|
||||
<div className="mb-1 h-1 w-full rounded-full bg-primary" />
|
||||
)}
|
||||
|
||||
{/* Option label tag (above card, shown when this is a branch from a decision) */}
|
||||
{optionLabel && (
|
||||
<div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground font-label">
|
||||
{optionLabel}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The node card itself */}
|
||||
<TreeCanvasNode
|
||||
node={node}
|
||||
depth={0}
|
||||
fromOption={optionLabel}
|
||||
isExpanded={isExpanded}
|
||||
isNew={isNew}
|
||||
onToggleExpand={() => handleToggleExpand(node.id)}
|
||||
onSave={handleSave}
|
||||
onCancelNew={handleCancelNew}
|
||||
onDelete={handleDelete}
|
||||
onDuplicate={handleDuplicate}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={(e) => handleDragOver(e, parentId, index)}
|
||||
onDrop={(e) => handleDrop(e, parentId, index)}
|
||||
/>
|
||||
|
||||
{/* Unlinked option add buttons (decision nodes with unlinked options) */}
|
||||
{!isExpanded && unlinkedOptions.length > 0 && (
|
||||
<div className="mt-3 flex flex-col items-center gap-2">
|
||||
{unlinkedOptions.map((opt) => {
|
||||
const key = addKey(node.id, opt.id)
|
||||
return (
|
||||
<div key={opt.id} className="flex flex-col items-center gap-1">
|
||||
<div className="h-4 w-px bg-border" />
|
||||
<span className="text-[10px] text-muted-foreground font-label">
|
||||
{opt.label || '(unlabeled option)'}
|
||||
</span>
|
||||
{pendingAddKey === key ? (
|
||||
<AddNodePicker
|
||||
onSelect={(type) =>
|
||||
handleAddNodeSelect(type, node.id, opt.id)
|
||||
}
|
||||
onCancel={() => setPendingAddKey(null)}
|
||||
/>
|
||||
) : (
|
||||
<AddNodeButton
|
||||
label="Add child"
|
||||
onClick={() => setPendingAddKey(key)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Single add button for action nodes without children */}
|
||||
{!isExpanded && showSingleAddButton && (
|
||||
<div className="mt-3 flex flex-col items-center gap-1">
|
||||
<div className="h-4 w-px bg-border" />
|
||||
{pendingAddKey === node.id ? (
|
||||
<AddNodePicker
|
||||
onSelect={(type) => handleAddNodeSelect(type, node.id)}
|
||||
onCancel={() => setPendingAddKey(null)}
|
||||
/>
|
||||
) : (
|
||||
<AddNodeButton
|
||||
label="Add next node"
|
||||
onClick={() => setPendingAddKey(node.id)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connector + Children */}
|
||||
{hasChildren && !isExpanded && (
|
||||
<div className="mt-3 flex flex-col items-center w-full">
|
||||
{/* Trunk line from card down */}
|
||||
<div className="h-4 w-px bg-border" />
|
||||
|
||||
{orderedChildren.length === 1 ? (
|
||||
// Single child: straight vertical
|
||||
<div className="flex flex-col items-center">
|
||||
{renderNode(
|
||||
orderedChildren[0].child,
|
||||
node.id,
|
||||
orderedChildren[0].childIndex,
|
||||
orderedChildren[0].optionLabel
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// Multiple children: horizontal branching
|
||||
<div className="flex flex-col items-center w-full">
|
||||
{/* Horizontal fork line */}
|
||||
<div
|
||||
className="h-px bg-border w-full"
|
||||
style={{ maxWidth: `${orderedChildren.length * 300}px` }}
|
||||
/>
|
||||
|
||||
{/* Child lanes */}
|
||||
<div
|
||||
className="flex items-start justify-center gap-6 pt-0 w-full"
|
||||
style={{ maxWidth: `${orderedChildren.length * 360}px` }}
|
||||
>
|
||||
{orderedChildren.map(({ child, optionLabel: ol, childIndex }) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="flex flex-col items-center min-w-[260px]"
|
||||
>
|
||||
{/* Vertical stub into child lane */}
|
||||
<div className="h-4 w-px bg-border" />
|
||||
{renderNode(child, node.id, childIndex, ol)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
[
|
||||
expandedNodeId,
|
||||
newNodeIds,
|
||||
dragOverTarget,
|
||||
handleToggleExpand,
|
||||
handleSave,
|
||||
handleCancelNew,
|
||||
handleDelete,
|
||||
handleDuplicate,
|
||||
handleDragStart,
|
||||
handleDragOver,
|
||||
handleDrop,
|
||||
pendingAddKey,
|
||||
handleAddNodeSelect,
|
||||
]
|
||||
)
|
||||
|
||||
// ── Empty state ──
|
||||
if (!treeStructure) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-2 text-muted-foreground text-sm">
|
||||
No tree structure. Start by saving a tree name.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-full w-full overflow-auto"
|
||||
onDragEnd={handleDragEnd}
|
||||
style={{
|
||||
// Subtle dot grid background
|
||||
backgroundImage:
|
||||
'radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)',
|
||||
backgroundSize: '24px 24px',
|
||||
}}
|
||||
>
|
||||
<div className="flex min-h-full min-w-full items-start justify-center p-8 pb-24">
|
||||
<div className="flex flex-col items-center">
|
||||
{/* START badge above root */}
|
||||
<div className="mb-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-label text-muted-foreground">
|
||||
START
|
||||
</div>
|
||||
<div className="mb-1 h-4 w-px bg-border" />
|
||||
|
||||
{renderNode(treeStructure, null, 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TreeCanvas
|
||||
Reference in New Issue
Block a user