feat: React Flow migration for flow editor canvas #82
@@ -162,9 +162,9 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
|
|||||||
const isRoot = treeStructure?.id === nodeId
|
const isRoot = treeStructure?.id === nodeId
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
|
<div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-border bg-card">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center gap-2 border-b border-border px-4 py-3">
|
<div className="flex items-center gap-2 border-b border-border px-4 py-3 shrink-0">
|
||||||
<span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
|
<span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
|
||||||
<TypeIcon className="h-3 w-3" />
|
<TypeIcon className="h-3 w-3" />
|
||||||
</span>
|
</span>
|
||||||
@@ -175,14 +175,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Body — scrollable form area */}
|
{/* Body — scrollable form area */}
|
||||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
|
||||||
{draft.type === 'decision' && <NodeFormDecision node={draft} onUpdate={handleDraftUpdate} />}
|
{draft.type === 'decision' && <NodeFormDecision node={draft} onUpdate={handleDraftUpdate} />}
|
||||||
{draft.type === 'action' && <NodeFormAction node={draft} onUpdate={handleDraftUpdate} />}
|
{draft.type === 'action' && <NodeFormAction node={draft} onUpdate={handleDraftUpdate} />}
|
||||||
{draft.type === 'solution' && <NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />}
|
{draft.type === 'solution' && <NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="flex items-center gap-2 border-t border-border px-4 py-3">
|
<div className="flex items-center gap-2 border-t border-border px-4 py-3 shrink-0">
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
disabled={!isDirty}
|
disabled={!isDirty}
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export function TreeEditorLayout({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex flex-1 overflow-hidden',
|
'flex min-h-0 flex-1 overflow-hidden',
|
||||||
isMobile ? 'flex-col' : 'flex-row'
|
isMobile ? 'flex-col' : 'flex-row'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user