112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback } from 'react'
|
|
import ReactFlow, {
|
|
Background,
|
|
BackgroundVariant,
|
|
Controls,
|
|
useNodesState,
|
|
useEdgesState,
|
|
addEdge,
|
|
Connection,
|
|
Node,
|
|
Edge,
|
|
} from 'reactflow'
|
|
import 'reactflow/dist/style.css'
|
|
import Toolbar from '@/components/editor/Toolbar'
|
|
import type { FlowchartData, FlowchartNode, FlowchartEdge } from '@/types/flowchart'
|
|
|
|
type FlowchartEditorProps = {
|
|
projectId: string
|
|
initialData: FlowchartData
|
|
}
|
|
|
|
// Convert our FlowchartNode type to React Flow Node type
|
|
function toReactFlowNodes(nodes: FlowchartNode[]): Node[] {
|
|
return nodes.map((node) => ({
|
|
id: node.id,
|
|
type: node.type,
|
|
position: node.position,
|
|
data: node.data,
|
|
}))
|
|
}
|
|
|
|
// Convert our FlowchartEdge type to React Flow Edge type
|
|
function toReactFlowEdges(edges: FlowchartEdge[]): Edge[] {
|
|
return edges.map((edge) => ({
|
|
id: edge.id,
|
|
source: edge.source,
|
|
sourceHandle: edge.sourceHandle,
|
|
target: edge.target,
|
|
targetHandle: edge.targetHandle,
|
|
data: edge.data,
|
|
}))
|
|
}
|
|
|
|
export default function FlowchartEditor({
|
|
initialData,
|
|
}: FlowchartEditorProps) {
|
|
const [nodes, setNodes, onNodesChange] = useNodesState(
|
|
toReactFlowNodes(initialData.nodes)
|
|
)
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState(
|
|
toReactFlowEdges(initialData.edges)
|
|
)
|
|
|
|
const onConnect = useCallback(
|
|
(params: Connection) => setEdges((eds) => addEdge(params, eds)),
|
|
[setEdges]
|
|
)
|
|
|
|
// Placeholder handlers - functionality will be added in future stories
|
|
const handleAddDialogue = useCallback(() => {
|
|
// TODO: Implement in US-021
|
|
}, [])
|
|
|
|
const handleAddChoice = useCallback(() => {
|
|
// TODO: Implement in US-023
|
|
}, [])
|
|
|
|
const handleAddVariable = useCallback(() => {
|
|
// TODO: Implement in US-026
|
|
}, [])
|
|
|
|
const handleSave = useCallback(() => {
|
|
// TODO: Implement in US-034
|
|
}, [])
|
|
|
|
const handleExport = useCallback(() => {
|
|
// TODO: Implement in US-035
|
|
}, [])
|
|
|
|
const handleImport = useCallback(() => {
|
|
// TODO: Implement in US-036
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col">
|
|
<Toolbar
|
|
onAddDialogue={handleAddDialogue}
|
|
onAddChoice={handleAddChoice}
|
|
onAddVariable={handleAddVariable}
|
|
onSave={handleSave}
|
|
onExport={handleExport}
|
|
onImport={handleImport}
|
|
/>
|
|
<div className="flex-1">
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onConnect={onConnect}
|
|
fitView
|
|
>
|
|
<Background variant={BackgroundVariant.Dots} gap={16} size={1} />
|
|
<Controls position="bottom-right" />
|
|
</ReactFlow>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|