95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
ReactFlow,
|
|
Background,
|
|
useNodesState,
|
|
useEdgesState,
|
|
addEdge,
|
|
getIncomers,
|
|
getOutgoers,
|
|
getConnectedEdges,
|
|
} from '@xyflow/react';
|
|
import { isEmpty } from 'ramda';
|
|
|
|
import '@xyflow/react/dist/style.css';
|
|
|
|
const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
|
|
const [nodes, setNodes] = useState([]);
|
|
const [edges, setEdges] = useState([]);
|
|
|
|
const range = (start, stop, step) => {
|
|
return Array.from(
|
|
{ length: (stop - start) / step + 1 },
|
|
(_, i) => start + i * step
|
|
);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (initialForm && finalForm && forms.length) {
|
|
const total = (forms.length - 2) * (200 - 90);
|
|
let coordinates = range(total * -1, total, 200);
|
|
|
|
const initialNodes = forms.map(o => {
|
|
let obj;
|
|
|
|
if (o.id === initialForm) {
|
|
obj = {
|
|
id: String(o.id),
|
|
type: 'input',
|
|
data: { label: o.label },
|
|
position: { x: 0, y: 0 },
|
|
}
|
|
} else if (o.id === finalForm) {
|
|
obj = {
|
|
id: String(o.id),
|
|
type: 'output',
|
|
data: { label: o.label },
|
|
position: { x: 0, y: 300 },
|
|
}
|
|
} else {
|
|
const x = coordinates.splice(0, 1);
|
|
obj = {
|
|
id: String(o.id),
|
|
data: { label: o.label },
|
|
position: { x, y: 150 },
|
|
}
|
|
}
|
|
return obj
|
|
});
|
|
|
|
let edges = [];
|
|
forms.map(o => {
|
|
if (o.id !== initialForm && o.id !== finalForm) {
|
|
edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
|
|
edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
|
|
}
|
|
});
|
|
|
|
setNodes(initialNodes);
|
|
setEdges(edges);
|
|
updateFn(edges);
|
|
} else {
|
|
setNodes([]);
|
|
setEdges([]);
|
|
}
|
|
}, [initialForm, finalForm, forms]);
|
|
|
|
return (
|
|
!isEmpty(nodes) && !isEmpty(edges)
|
|
? <div className="reactFlow__wrapper">
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
nodesDraggable={false}
|
|
nodesConnectable={false}
|
|
fitView
|
|
attributionPosition="top-right"
|
|
>
|
|
<Background variant="dots" gap={12} size={1}/>
|
|
</ReactFlow>
|
|
</div>
|
|
: null
|
|
);
|
|
}
|
|
|
|
export default FlowBuilder; |