84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
import ReactFlow, {
|
|
removeElements,
|
|
addEdge,
|
|
MiniMap,
|
|
Controls,
|
|
Background,
|
|
OnLoadParams,
|
|
EdgeTypesType,
|
|
Elements,
|
|
Connection,
|
|
Edge,
|
|
ArrowHeadType,
|
|
} from 'react-flow-renderer';
|
|
|
|
import CustomEdge, { ConnectionLine } from './CustomEdge';
|
|
|
|
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
|
|
|
|
const getCustomEdge = (props: any) => ({
|
|
type: 'custom',
|
|
arrowHeadType: ArrowHeadType.Arrow,
|
|
...props,
|
|
});
|
|
|
|
function createElements() {
|
|
const elements = [];
|
|
const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
|
|
|
|
elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center });
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
const degrees = i * (360 / 8);
|
|
const radians = degrees * (Math.PI / 180);
|
|
const x = 250 * Math.cos(radians) + center.x;
|
|
const y = 250 * Math.sin(radians) + center.y;
|
|
|
|
elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } });
|
|
|
|
if (i % 2 === 0) {
|
|
elements.push(
|
|
getCustomEdge({
|
|
id: `source-${i}`,
|
|
source: 'source',
|
|
target: `${i}`,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
return elements;
|
|
}
|
|
|
|
const initialElements: Elements = createElements();
|
|
|
|
const edgeTypes: EdgeTypesType = {
|
|
custom: CustomEdge,
|
|
};
|
|
|
|
const NodeAsHandleFlow = () => {
|
|
const [elements, setElements] = useState<Elements>(initialElements);
|
|
|
|
const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
|
|
const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(getCustomEdge(params), els));
|
|
|
|
return (
|
|
<ReactFlow
|
|
elements={elements}
|
|
onElementsRemove={onElementsRemove}
|
|
onConnect={onConnect}
|
|
onLoad={onLoad}
|
|
edgeTypes={edgeTypes}
|
|
connectionLineComponent={ConnectionLine}
|
|
>
|
|
<MiniMap />
|
|
<Controls />
|
|
<Background />
|
|
</ReactFlow>
|
|
);
|
|
};
|
|
|
|
export default NodeAsHandleFlow;
|