91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import React, { useState, DragEvent } from 'react';
|
|
import ReactFlow, {
|
|
ReactFlowProvider,
|
|
addEdge,
|
|
ReactFlowInstance,
|
|
Connection,
|
|
Edge,
|
|
Node,
|
|
useNodesState,
|
|
useEdgesState,
|
|
Controls,
|
|
NodeOrigin,
|
|
} from 'reactflow';
|
|
|
|
import Sidebar from './Sidebar';
|
|
|
|
import styles from './dnd.module.css';
|
|
|
|
const initialNodes: Node[] = [
|
|
{
|
|
id: '1',
|
|
type: 'input',
|
|
data: { label: 'input node' },
|
|
position: { x: 250, y: 5 },
|
|
},
|
|
];
|
|
|
|
const onDragOver = (event: DragEvent) => {
|
|
event.preventDefault();
|
|
event.dataTransfer.dropEffect = 'move';
|
|
};
|
|
|
|
let id = 0;
|
|
const getId = () => `dndnode_${id++}`;
|
|
|
|
const nodeOrigin: NodeOrigin = [0.5, 0.5];
|
|
|
|
const DnDFlow = () => {
|
|
const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
|
|
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
|
|
|
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
|
|
const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
|
|
|
|
const onDrop = (event: DragEvent) => {
|
|
event.preventDefault();
|
|
|
|
if (reactFlowInstance) {
|
|
const type = event.dataTransfer.getData('application/reactflow');
|
|
const position = reactFlowInstance.project({
|
|
x: event.clientX,
|
|
y: event.clientY - 40,
|
|
});
|
|
const newNode: Node = {
|
|
id: getId(),
|
|
type,
|
|
position,
|
|
data: { label: `${type} node` },
|
|
};
|
|
|
|
setNodes((nds) => nds.concat(newNode));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.dndflow}>
|
|
<ReactFlowProvider>
|
|
<div className={styles.wrapper}>
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
onEdgesChange={onEdgesChange}
|
|
onNodesChange={onNodesChange}
|
|
onConnect={onConnect}
|
|
onInit={onInit}
|
|
onDrop={onDrop}
|
|
onDragOver={onDragOver}
|
|
nodeOrigin={nodeOrigin}
|
|
>
|
|
<Controls />
|
|
</ReactFlow>
|
|
</div>
|
|
<Sidebar />
|
|
</ReactFlowProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DnDFlow;
|