feat: Add TreeCanvasNode inline editor card component
Replaces modal-based node editing with inline expand/collapse cards. Each card shows node type, title, and options in compact mode, then renders the full edit form inline on expand — no modal required. Local draft state with save/cancel prevents premature store writes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
365
frontend/src/components/tree-editor/TreeCanvasNode.tsx
Normal file
365
frontend/src/components/tree-editor/TreeCanvasNode.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import {
|
||||
HelpCircle,
|
||||
Zap,
|
||||
CheckCircle,
|
||||
Play,
|
||||
Check,
|
||||
X,
|
||||
Copy,
|
||||
Trash2,
|
||||
GripVertical,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import { useTreeEditorStore } from '@/store/treeEditorStore'
|
||||
import { NodeFormDecision } from './NodeFormDecision'
|
||||
import { NodeFormAction } from './NodeFormAction'
|
||||
import { NodeFormResolution } from './NodeFormResolution'
|
||||
import type { TreeStructure } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface TreeCanvasNodeProps {
|
||||
node: TreeStructure
|
||||
depth: number
|
||||
fromOption?: string
|
||||
isExpanded: boolean
|
||||
isNew: boolean
|
||||
onToggleExpand: () => void
|
||||
onSave: (nodeId: string, updates: Partial<TreeStructure>) => void
|
||||
onCancelNew: (nodeId: string) => void
|
||||
onDelete: (nodeId: string) => void
|
||||
onDuplicate: (nodeId: string) => void
|
||||
onDragStart: (e: React.DragEvent, nodeId: string) => void
|
||||
onDragOver: (e: React.DragEvent) => void
|
||||
onDrop: (e: React.DragEvent) => void
|
||||
}
|
||||
|
||||
/** Clone a node without its children (for local draft state) */
|
||||
function cloneNodeWithoutChildren(node: TreeStructure): TreeStructure {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { children, ...rest } = node
|
||||
return structuredClone(rest) as TreeStructure
|
||||
}
|
||||
|
||||
const NODE_TYPE_CONFIG = {
|
||||
decision: {
|
||||
icon: HelpCircle,
|
||||
label: 'Decision',
|
||||
borderClass: 'border-l-4 border-l-blue-500',
|
||||
badgeClass: 'bg-blue-500/20 text-blue-400',
|
||||
},
|
||||
action: {
|
||||
icon: Zap,
|
||||
label: 'Action',
|
||||
borderClass: 'border-l-4 border-l-yellow-500',
|
||||
badgeClass: 'bg-yellow-500/20 text-yellow-400',
|
||||
},
|
||||
solution: {
|
||||
icon: CheckCircle,
|
||||
label: 'Solution',
|
||||
borderClass: 'border-l-4 border-l-green-500',
|
||||
badgeClass: 'bg-green-500/20 text-green-400',
|
||||
},
|
||||
} as const
|
||||
|
||||
export function TreeCanvasNode({
|
||||
node,
|
||||
fromOption,
|
||||
isExpanded,
|
||||
isNew,
|
||||
onToggleExpand,
|
||||
onSave,
|
||||
onCancelNew,
|
||||
onDelete,
|
||||
onDuplicate,
|
||||
onDragStart,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
}: TreeCanvasNodeProps) {
|
||||
const { validationErrors, selectedNodeId, selectNode } = useTreeEditorStore()
|
||||
const isRoot = node.id === 'root'
|
||||
const isSelected = selectedNodeId === node.id
|
||||
|
||||
const nodeErrors = validationErrors.filter(
|
||||
(e) => e.nodeId === node.id && e.severity === 'error'
|
||||
)
|
||||
const nodeWarnings = validationErrors.filter(
|
||||
(e) => e.nodeId === node.id && e.severity === 'warning'
|
||||
)
|
||||
const hasError = nodeErrors.length > 0
|
||||
const hasWarning = nodeWarnings.length > 0
|
||||
|
||||
// Local draft state for inline editing
|
||||
const [draft, setDraft] = useState<TreeStructure>(() =>
|
||||
cloneNodeWithoutChildren(node)
|
||||
)
|
||||
|
||||
// Reset draft if node changes while editing (e.g. store update from undo)
|
||||
const [lastNodeId, setLastNodeId] = useState(node.id)
|
||||
if (node.id !== lastNodeId) {
|
||||
setDraft(cloneNodeWithoutChildren(node))
|
||||
setLastNodeId(node.id)
|
||||
}
|
||||
|
||||
const handleDraftUpdate = useCallback((updates: Partial<TreeStructure>) => {
|
||||
setDraft((prev) => ({ ...prev, ...updates }))
|
||||
}, [])
|
||||
|
||||
const handleSave = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
// Strip children from draft before passing to onSave
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { children, ...draftWithoutChildren } = draft
|
||||
onSave(node.id, draftWithoutChildren)
|
||||
}
|
||||
|
||||
const handleCancel = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (isNew) {
|
||||
onCancelNew(node.id)
|
||||
} else {
|
||||
// Discard draft changes and collapse
|
||||
setDraft(cloneNodeWithoutChildren(node))
|
||||
onToggleExpand()
|
||||
}
|
||||
}
|
||||
|
||||
const handleCardClick = () => {
|
||||
selectNode(node.id)
|
||||
onToggleExpand()
|
||||
}
|
||||
|
||||
const config = NODE_TYPE_CONFIG[node.type]
|
||||
const TypeIcon = config.icon
|
||||
|
||||
const getTitle = () => {
|
||||
if (node.type === 'decision') return node.question || 'Untitled Question'
|
||||
return node.title || `Untitled ${node.type}`
|
||||
}
|
||||
|
||||
const getOptionsSummary = () => {
|
||||
if (node.type !== 'decision' || !node.options?.length) return null
|
||||
const count = node.options.length
|
||||
return `${count} option${count !== 1 ? 's' : ''}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative rounded-xl border border-border bg-card shadow-sm transition-all duration-150',
|
||||
config.borderClass,
|
||||
isExpanded && 'ring-1 ring-primary shadow-md',
|
||||
isSelected && !isExpanded && 'ring-1 ring-primary/50',
|
||||
hasError && 'ring-1 ring-destructive',
|
||||
hasWarning && !hasError && 'ring-1 ring-yellow-500/70',
|
||||
isNew && 'ring-1 ring-yellow-400/60',
|
||||
'min-w-[240px] max-w-[340px]'
|
||||
)}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-2.5',
|
||||
!isExpanded && 'cursor-pointer hover:bg-accent/50 rounded-t-xl',
|
||||
!isExpanded && 'rounded-xl'
|
||||
)}
|
||||
onClick={!isExpanded ? handleCardClick : undefined}
|
||||
>
|
||||
{/* Drag handle (hide for root) */}
|
||||
{!isRoot && (
|
||||
<span
|
||||
className="cursor-grab shrink-0"
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.stopPropagation()
|
||||
onDragStart(e, node.id)
|
||||
}}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground/50" />
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Node type badge */}
|
||||
{isRoot ? (
|
||||
<span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold bg-blue-500/30 text-blue-400 font-label shrink-0">
|
||||
<Play className="h-3 w-3" />
|
||||
START
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-label shrink-0',
|
||||
config.badgeClass
|
||||
)}
|
||||
>
|
||||
<TypeIcon className="h-3 w-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* From-option label */}
|
||||
{fromOption && (
|
||||
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground truncate max-w-[80px]">
|
||||
{fromOption}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Title text (compact mode) */}
|
||||
{!isExpanded && (
|
||||
<span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
|
||||
{getTitle()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Options count badge */}
|
||||
{!isExpanded && getOptionsSummary() && (
|
||||
<span className="text-[10px] text-muted-foreground shrink-0 font-label">
|
||||
{getOptionsSummary()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Validation badges (compact mode) */}
|
||||
{!isExpanded && hasError && (
|
||||
<span
|
||||
className="flex items-center gap-0.5 rounded bg-destructive/20 px-1.5 py-0.5 text-[10px] text-destructive shrink-0"
|
||||
title={nodeErrors.map((e) => e.message).join('\n')}
|
||||
>
|
||||
<AlertCircle className="h-2.5 w-2.5" />
|
||||
{nodeErrors.length}
|
||||
</span>
|
||||
)}
|
||||
{!isExpanded && !hasError && hasWarning && (
|
||||
<span
|
||||
className="flex items-center gap-0.5 rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 shrink-0"
|
||||
title={nodeWarnings.map((e) => e.message).join('\n')}
|
||||
>
|
||||
<AlertTriangle className="h-2.5 w-2.5" />
|
||||
{nodeWarnings.length}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Unsaved badge */}
|
||||
{!isExpanded && isNew && (
|
||||
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label shrink-0">
|
||||
Unsaved
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Expand/collapse chevron */}
|
||||
{!isExpanded ? (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
)}
|
||||
|
||||
{/* Editing action buttons (expanded state) */}
|
||||
{isExpanded && (
|
||||
<div className="ml-auto flex items-center gap-1 shrink-0">
|
||||
{/* New badge */}
|
||||
{isNew && (
|
||||
<span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label">
|
||||
Unsaved
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Duplicate (hide for root) */}
|
||||
{!isRoot && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onDuplicate(node.id)
|
||||
}}
|
||||
title="Duplicate node"
|
||||
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Delete (hide for root) */}
|
||||
{!isRoot && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onDelete(node.id)
|
||||
}}
|
||||
title="Delete node"
|
||||
className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Cancel */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
title={isNew ? 'Cancel (deletes this node)' : 'Cancel changes'}
|
||||
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
|
||||
{/* Save */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
title="Save changes"
|
||||
className="rounded p-1 bg-gradient-brand text-white hover:opacity-90"
|
||||
>
|
||||
<Check className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expanded editing area */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-border px-3 pb-3 pt-3">
|
||||
{/* Validation errors */}
|
||||
{(hasError || hasWarning) && (
|
||||
<div className="mb-3 space-y-1">
|
||||
{nodeErrors.map((error, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-md bg-red-400/10 px-3 py-2 text-xs text-red-400"
|
||||
>
|
||||
{error.message}
|
||||
</div>
|
||||
))}
|
||||
{!hasError &&
|
||||
nodeWarnings.map((warning, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-md bg-yellow-400/10 px-3 py-2 text-xs text-yellow-400"
|
||||
>
|
||||
{warning.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Type-specific form — uses draft, not live node */}
|
||||
{draft.type === 'decision' && (
|
||||
<NodeFormDecision node={draft} onUpdate={handleDraftUpdate} />
|
||||
)}
|
||||
{draft.type === 'action' && (
|
||||
<NodeFormAction node={draft} onUpdate={handleDraftUpdate} />
|
||||
)}
|
||||
{draft.type === 'solution' && (
|
||||
<NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TreeCanvasNode
|
||||
Reference in New Issue
Block a user