alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

examples(useReactFlow): add addEdges

Browse Source
This commit is contained in:
moklick
2022-05-26 19:12:20 +02:00
parent ea6247f4a1
commit 6e6deae633
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/UseReactFlow/index.tsx
+6 -2
View File
@@ -1,4 +1,4 @@
import { useCallback, MouseEvent } from 'react'; import { useCallback, MouseEvent, useEffect } from 'react';
import ReactFlow, { import ReactFlow, {
Node, Node,
@@ -33,7 +33,7 @@ const UseZoomPanHelperFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow(); const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook, addEdges } = useReactFlow();
const onPaneClick = useCallback( const onPaneClick = useCallback(
(evt: MouseEvent) => { (evt: MouseEvent) => {
@@ -72,6 +72,10 @@ const UseZoomPanHelperFlow = () => {
addNodes(newNode); addNodes(newNode);
}, [addNodes]); }, [addNodes]);
useEffect(() => {
addEdges({ id: 'e3-4', source: '3', target: '4' });
}, [addEdges]);
const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]); const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
return ( return (