fix(useReactFlow): use onNodesChange and onEdgesChange

example/src/UseReactFlow/index.tsx

@@ -33,7 +33,7 @@ const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-  const { project, setCenter, zoomIn, zoomOut, fitView } = useReactFlow();
+  const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow();
 
   const onPaneClick = useCallback(
     (evt) => {
@@ -49,7 +49,7 @@ const UseZoomPanHelperFlow = () => {
         })
       );
     },
-    [project]
+    [project, setNodes]
   );
 
   const onNodeClick = useCallback(
@@ -60,6 +60,22 @@ const UseZoomPanHelperFlow = () => {
     [setCenter]
   );
 
+  const onAddNode = useCallback(() => {
+    const newNode = {
+      id: getId(),
+      position: { x: Math.random() * 500, y: Math.random() * 500 },
+      data: {
+        label: 'New Node',
+      },
+    };
+
+    addNodes(newNode);
+  }, [addNodes]);
+
+  const onResetNodes = useCallback(() => {
+    setNodesHook(initialNodes);
+  }, [setNodesHook]);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -77,6 +93,8 @@ const UseZoomPanHelperFlow = () => {
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
         <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
+        <button onClick={onAddNode}>add node</button>
+        <button onClick={onResetNodes}>reset nodes</button>
       </div>
       <Background />
       <MiniMap />

example/src/index.tsx

@@ -31,11 +31,9 @@ import Undirectional from './Undirectional';
 import UpdatableEdge from './UpdatableEdge';
 import UpdateNode from './UpdateNode';
 import UseUpdateNodeInternals from './UseUpdateNodeInternals';
-import UseZoomPanHelper from './UseZoomPanHelper';
+import UseReactFlow from './UseReactFlow';
 import Validation from './Validation';
 
-
-
 const routes = [
   {
     path: '/',
@@ -146,8 +144,8 @@ const routes = [
     component: UpdateNode,
   },
   {
-    path: '/usezoompanhelper',
-    component: UseZoomPanHelper,
+    path: '/usereactflow',
+    component: UseReactFlow,
   },
   {
     path: '/useupdatenodeinternals',
@@ -169,18 +167,18 @@ const Header = () => {
   const onChange = (event: ChangeEvent<HTMLSelectElement>) => navigate(event.target.value);
 
   return (
-      <header>
-        <a className="logo" href="https://github.com/wbkd/react-flow">
-          React Flow Dev
-        </a>
-        <select defaultValue={location.pathname} onChange={onChange}>
-          {routes.map((route) => (
-              <option value={route.path} key={route.path}>
-                {route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
-              </option>
-          ))}
-        </select>
-      </header>
+    <header>
+      <a className="logo" href="https://github.com/wbkd/react-flow">
+        React Flow Dev
+      </a>
+      <select defaultValue={location.pathname} onChange={onChange}>
+        {routes.map((route) => (
+          <option value={route.path} key={route.path}>
+            {route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
+          </option>
+        ))}
+      </select>
+    </header>
   );
 };
 
@@ -189,7 +187,7 @@ ReactDOM.render(
     <Header />
     <Routes>
       {routes.map((route) => (
-        <Route path={route.path} key={route.path} element={<route.component />}/>
+        <Route path={route.path} key={route.path} element={<route.component />} />
       ))}
     </Routes>
   </BrowserRouter>,

src/hooks/useReactFlow.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../store';
-import { ReactFlowInstance, Instance } from '../types';
+import { ReactFlowInstance, Instance, NodeAddChange, EdgeAddChange, NodeResetChange, EdgeResetChange } from '../types';
 
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
   const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
@@ -30,30 +30,54 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
   }, []);
 
   const setNodes = useCallback<Instance.SetNodes<NodeData>>((payload) => {
-    const { nodeInternals, setNodes } = store.getState();
+    const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
     const nodes = Array.from(nodeInternals.values());
     const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-    setNodes(nextNodes);
+
+    if (hasDefaultNodes) {
+      setNodes(nextNodes);
+    } else if (onNodesChange) {
+      const changes = nextNodes.map((node) => ({ item: node, type: 'reset' } as NodeResetChange<NodeData>));
+      onNodesChange(changes);
+    }
   }, []);
 
   const setEdges = useCallback<Instance.SetEdges<EdgeData>>((payload) => {
-    const { edges = [], setEdges } = store.getState();
+    const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
     const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
-    setEdges(nextEdges);
+
+    if (hasDefaultEdges) {
+      setEdges(nextEdges);
+    } else if (onEdgesChange) {
+      const changes = nextEdges.map((edge) => ({ item: edge, type: 'reset' } as EdgeResetChange<EdgeData>));
+      onEdgesChange(changes);
+    }
   }, []);
 
   const addNodes = useCallback<Instance.AddNodes<NodeData>>((payload) => {
     const nodes = Array.isArray(payload) ? payload : [payload];
-    const { nodeInternals, setNodes } = store.getState();
-    const currentNodes = Array.from(nodeInternals.values());
-    const nextNodes = [...currentNodes, ...nodes];
-    setNodes(nextNodes);
+    const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
+
+    if (hasDefaultNodes) {
+      const currentNodes = Array.from(nodeInternals.values());
+      const nextNodes = [...currentNodes, ...nodes];
+      setNodes(nextNodes);
+    } else if (onNodesChange) {
+      const changes = nodes.map((node) => ({ item: node, type: 'add' } as NodeAddChange<NodeData>));
+      onNodesChange(changes);
+    }
   }, []);
 
   const addEdges = useCallback<Instance.AddEdges<EdgeData>>((payload) => {
     const nextEdges = Array.isArray(payload) ? payload : [payload];
-    const { edges = [], setEdges } = store.getState();
-    setEdges([...edges, ...nextEdges]);
+    const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
+
+    if (hasDefaultEdges) {
+      setEdges([...edges, ...nextEdges]);
+    } else if (onEdgesChange) {
+      const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' } as EdgeAddChange<EdgeData>));
+      onEdgesChange(changes);
+    }
   }, []);
 
   const toObject = useCallback<Instance.ToObject<NodeData, EdgeData>>(() => {

src/types/changes.ts

@@ -1,5 +1,6 @@
 import { XYPosition, Dimensions } from './utils';
-import { NodeHandleBounds } from './nodes';
+import { NodeHandleBounds, Node } from './nodes';
+import { Edge } from './edges';
 
 export type NodeDimensionChange = {
   id: string;
@@ -26,8 +27,32 @@ export type NodeRemoveChange = {
   type: 'remove';
 };
 
-export type NodeChange = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange;
+export type NodeAddChange<NodeData = any> = {
+  item: Node<NodeData>;
+  type: 'add';
+};
+
+export type NodeResetChange<NodeData = any> = {
+  item: Node<NodeData>;
+  type: 'reset';
+};
+
+export type NodeChange =
+  | NodeDimensionChange
+  | NodePositionChange
+  | NodeSelectionChange
+  | NodeRemoveChange
+  | NodeAddChange
+  | NodeResetChange;
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
-export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange;
+export type EdgeAddChange<EdgeData = any> = {
+  item: Edge<EdgeData>;
+  type: 'add';
+};
+export type EdgeResetChange<EdgeData = any> = {
+  item: Edge<EdgeData>;
+  type: 'reset';
+};
+export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;

src/utils/changes.ts

@@ -44,8 +44,14 @@ function handleParentExpand(res: any[], updateItem: any) {
   }
 }
 
-function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): any[] {
-  const initElements: any[] = [];
+function applyChanges(changes: any[], elements: any[]): any[] {
+  // unfortunately we need this hack to handle the setNodes and setEdges function of the
+  // useReactFlow hook.
+  if (changes.some((c) => c.type === 'reset')) {
+    return changes.filter((c) => c.type === 'reset').map((c) => c.item);
+  }
+
+  const initElements: any[] = changes.filter((c) => c.type === 'add').map((c) => c.item);
 
   return elements.reduce((res: any[], item: any) => {
     const currentChange = changes.find((c) => c.id === item.id);