-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
index.tsx
72 lines (63 loc) · 1.54 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { useCallback, MouseEvent } from 'react';
import ReactFlow, {
NodeTypes,
addEdge,
useReactFlow,
ReactFlowProvider,
Node,
Connection,
Edge,
Position,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
import CustomNode from './CustomNode';
const initialNodes: Node[] = [
{
id: '1',
type: 'custom',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
];
const nodeTypes: NodeTypes = {
custom: CustomNode,
};
let id = 5;
const getId = (): string => `${id++}`;
const UpdateNodeInternalsFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
const { project } = useReactFlow();
const onPaneClick = useCallback(
(evt: MouseEvent) =>
setNodes((nds) =>
nds.concat({
id: getId(),
position: project({ x: evt.clientX, y: evt.clientY - 40 }),
data: { label: 'new node' },
targetPosition: Position.Left,
sourcePosition: Position.Right,
})
),
[project, setNodes]
);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
nodeTypes={nodeTypes}
onConnect={onConnect}
onPaneClick={onPaneClick}
/>
);
};
const WrappedFlow = () => (
<ReactFlowProvider>
<UpdateNodeInternalsFlow />
</ReactFlowProvider>
);
export default WrappedFlow;