diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx index cafa9fa8..62232a35 100644 --- a/examples/react/src/examples/Basic/index.tsx +++ b/examples/react/src/examples/Basic/index.tsx @@ -56,18 +56,19 @@ const initialEdges: Edge[] = [ const defaultEdgeOptions = {}; const BasicFlow = () => { - const { setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } = + const { addNodes, setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } = useReactFlow(); const updatePos = () => { setNodes((nodes) => nodes.map((node) => { - node.position = { - x: Math.random() * 400, - y: Math.random() * 400, + return { + ...node, + position: { + x: Math.random() * 400, + y: Math.random() * 400, + }, }; - - return node; }) ); }; @@ -78,9 +79,10 @@ const BasicFlow = () => { const toggleClassnames = () => { setNodes((nodes) => nodes.map((node) => { - node.className = node.className === 'light' ? 'dark' : 'light'; - - return node; + return { + ...node, + className: node.className === 'light' ? 'dark' : 'light', + }; }) ); }; @@ -108,6 +110,14 @@ const BasicFlow = () => { updateNodeData('1', { label: 'update' }); updateNodeData('2', { label: 'update' }); }; + const addNode = () => { + addNodes({ + id: `${Math.random()}`, + data: { label: 'Node' }, + position: { x: Math.random() * 300, y: Math.random() * 300 }, + className: 'light', + }); + }; return ( { + ); diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index 6d92e8b4..624d10a5 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -138,7 +138,6 @@ export function StoreUpdater { const { - nodes, onNodesChange, fitView, nodeLookup, @@ -98,7 +97,7 @@ const createRFStore = ({ if (!fitViewDone && fitViewOnInit) { nextFitViewDone = fitView({ ...fitViewOnInitOptions, - nodes: fitViewOnInitOptions?.nodes || nodes, + nodes: fitViewOnInitOptions?.nodes, }); } @@ -107,7 +106,7 @@ const createRFStore = ({ // has not provided an onNodesChange handler. // Nodes are only rendered if they have a width and height // attribute which they get from this handler. - set({ nodes, fitViewDone: nextFitViewDone }); + set({ fitViewDone: nextFitViewDone }); if (changes?.length > 0) { if (debug) {