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) {