47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import ReactFlow, {
|
|
addEdge,
|
|
Controls,
|
|
Background,
|
|
} from "reactflow";
|
|
import "reactflow/dist/style.css";
|
|
|
|
const fetchNodes = async () => {
|
|
const response = await fetch("/api/workflow");
|
|
return response.json();
|
|
};
|
|
|
|
const saveWorkflow = async (workflow) => {
|
|
await fetch("/api/workflow", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(workflow),
|
|
});
|
|
};
|
|
|
|
export default function FlowEditor() {
|
|
const [elements, setElements] = useState([]);
|
|
|
|
useEffect(() => {
|
|
fetchNodes().then((data) => setElements([...data.nodes, ...data.edges]));
|
|
}, []);
|
|
|
|
const onConnect = useCallback(
|
|
(params) => {
|
|
const newEdge = { id: `e${params.source}-${params.target}`, ...params };
|
|
setElements((els) => [...els, newEdge]);
|
|
saveWorkflow({ nodes: elements.filter(e => e.type), edges: [...elements.filter(e => !e.type), newEdge] });
|
|
},
|
|
[elements]
|
|
);
|
|
|
|
return (
|
|
<div style={{ width: "100vw", height: "100vh" }}>
|
|
<ReactFlow elements={elements} onConnect={onConnect}>
|
|
<Controls />
|
|
<Background />
|
|
</ReactFlow>
|
|
</div>
|
|
);
|
|
}
|