refactor(defaultNode/Edges): always trigger onNodesChange and onEdgesChange

src/components/Handle/index.tsx

@@ -21,7 +21,7 @@ const selector = (s: ReactFlowState) => ({
   connectionMode: s.connectionMode,
   connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
-  isControlled: s.isControlled,
+  hasDefaultEdges: s.hasDefaultEdges,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -49,7 +49,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       connectionMode,
       connectionStartHandle,
       connectOnClick,
-      isControlled,
+      hasDefaultEdges,
     } = useStore(selector, shallow);
 
     const handleId = id || null;
@@ -63,15 +63,15 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           ...defaultEdgeOptions,
           ...params,
         };
-        if (isControlled) {
+        if (hasDefaultEdges) {
           const { edges } = store.getState();
           store.setState({ edges: addEdge(edgeParams, edges) });
-        } else {
-          onConnectAction?.(edgeParams);
         }
+
+        onConnectAction?.(edgeParams);
         onConnect?.(edgeParams);
       },
-      [isControlled, onConnectAction, onConnect]
+      [hasDefaultEdges, onConnectAction, onConnect]
     );
 
     const onMouseDownHandler = useCallback(

src/components/StoreUpdater/index.tsx

@@ -111,9 +111,7 @@ const StoreUpdater = ({
   const store = useStoreApi();
 
   useEffect(() => {
-    if (defaultNodes) {
-      setDefaultNodesAndEdges(defaultNodes, defaultEdges);
-    }
+    setDefaultNodesAndEdges(defaultNodes, defaultEdges);
 
     return () => {
       reset();

src/hooks/useGlobalKeyHandler.ts

@@ -25,7 +25,7 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
 
   useEffect(() => {
-    const { nodeInternals, edges, isControlled } = store.getState();
+    const { nodeInternals, edges, hasDefaultNodes, hasDefaultEdges } = store.getState();
     // @TODO: work with nodeInternals instead of converting it to an array
     const nodes = Array.from(nodeInternals).map(([_, node]) => node);
     const selectedNodes = nodes.filter((n) => n.selected);
@@ -35,24 +35,31 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
       const connectedEdges = getConnectedEdges(selectedNodes, edges);
       const edgeIdsToRemove = [...selectedEdges, ...connectedEdges].map((e) => e.id);
 
-      if (isControlled) {
+      if (hasDefaultNodes) {
         selectedNodes.forEach((node) => {
           nodeInternals.delete(node.id);
         });
+      }
 
+      if (hasDefaultEdges) {
         store.setState({
           nodeInternals: new Map(nodeInternals),
           edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
         });
-      } else {
+      }
+
+      if (onNodesChange) {
         const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }));
+        onNodesChange(nodeChanges);
+      }
+
+      if (onEdgesChange) {
         const edgeChanges: EdgeChange[] = edgeIdsToRemove.map((id) => ({
           id,
           type: 'remove',
         }));
 
-        onNodesChange?.(nodeChanges);
-        onEdgesChange?.(edgeChanges);
+        onEdgesChange(edgeChanges);
       }
 
       store.setState({ nodesSelectionActive: false });

src/store/index.ts

@@ -43,9 +43,14 @@ const createStore = () =>
         set({ edges });
       }
     },
-    setDefaultNodesAndEdges: (nodes: Node[], edges: Edge[] = []) => {
-      const nodeInternals = createNodeInternals(nodes, get().nodeInternals);
-      set({ nodeInternals, edges, isControlled: true });
+    setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => {
+      const hasDefaultNodes = typeof nodes !== 'undefined';
+      const hasDefaultEdges = typeof edges !== 'undefined';
+
+      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map()) : new Map();
+      const nextEdges = hasDefaultEdges ? edges : [];
+
+      set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
     },
     updateNodeDimensions: (updates: NodeDimensionUpdate[]) => {
       const { onNodesChange, transform, nodeInternals, fitViewOnInit } = get();
@@ -88,9 +93,9 @@ const createStore = () =>
       }
     },
     updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
-      const { onNodesChange, nodeExtent, nodeInternals, isControlled } = get();
+      const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes } = get();
 
-      if (isControlled || onNodesChange) {
+      if (hasDefaultNodes || onNodesChange) {
         const changes: NodeDimensionChange[] = [];
 
         nodeInternals.forEach((node) => {
@@ -104,18 +109,18 @@ const createStore = () =>
         });
 
         if (changes?.length) {
-          if (isControlled) {
+          if (hasDefaultNodes) {
             const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
             const nextNodeInternals = createNodeInternals(nodes, nodeInternals);
             set({ nodeInternals: nextNodeInternals });
-          } else {
-            onNodesChange?.(changes);
           }
+
+          onNodesChange?.(changes);
         }
       }
     },
     addSelectedNodes: (selectedNodeIds: string[]) => {
-      const { multiSelectionActive, onNodesChange, nodeInternals, isControlled } = get();
+      const { multiSelectionActive, onNodesChange, nodeInternals, hasDefaultNodes } = get();
       // @TODO: work with nodeInternals instead of converting it to an array
       const nodes = Array.from(nodeInternals).map(([_, node]) => node);
       let changedNodes: NodeSelectionChange[];
@@ -127,15 +132,15 @@ const createStore = () =>
       }
 
       if (changedNodes.length) {
-        if (isControlled) {
+        if (hasDefaultNodes) {
           set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
-        } else if (onNodesChange) {
-          onNodesChange(changedNodes);
         }
+
+        onNodesChange?.(changedNodes);
       }
     },
     addSelectedEdges: (selectedEdgeIds: string[]) => {
-      const { multiSelectionActive, onEdgesChange, edges, isControlled } = get();
+      const { multiSelectionActive, onEdgesChange, edges, hasDefaultEdges } = get();
 
       let changedEdges: EdgeSelectionChange[];
 
@@ -146,17 +151,16 @@ const createStore = () =>
       }
 
       if (changedEdges.length) {
-        if (isControlled) {
+        if (hasDefaultEdges) {
           set({
             edges: handleControlledEdgeSelectionChange(changedEdges, edges),
           });
-        } else if (onEdgesChange) {
-          onEdgesChange(changedEdges);
         }
+        onEdgesChange?.(changedEdges);
       }
     },
     unselectNodesAndEdges: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange, isControlled } = get();
+      const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
       // @TODO: work with nodeInternals instead of converting it to an array
       const nodes = Array.from(nodeInternals).map(([_, node]) => node);
 
@@ -167,20 +171,18 @@ const createStore = () =>
       const edgesToUnselect = edges.map((edge) => createSelectionChange(edge.id, false)) as EdgeSelectionChange[];
 
       if (nodesToUnselect.length) {
-        if (isControlled) {
+        if (hasDefaultNodes) {
           set({ nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals) });
-        } else if (onNodesChange) {
-          onNodesChange(nodesToUnselect);
         }
+        onNodesChange?.(nodesToUnselect);
       }
       if (edgesToUnselect.length) {
-        if (isControlled) {
+        if (hasDefaultEdges) {
           set({
             edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
           });
-        } else if (onEdgesChange) {
-          onEdgesChange(edgesToUnselect);
         }
+        onEdgesChange?.(edgesToUnselect);
       }
     },
     setMinZoom: (minZoom: number) => {
@@ -202,8 +204,7 @@ const createStore = () =>
       set({ translateExtent });
     },
     resetSelectedElements: () => {
-      const { nodeInternals, edges, onNodesChange, onEdgesChange, isControlled } = get();
-      // @TODO: work with nodeInternals instead of converting it to an array
+      const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
       const nodes = Array.from(nodeInternals.values());
 
       const nodesToUnselect = nodes
@@ -214,22 +215,20 @@ const createStore = () =>
         .map((e) => createSelectionChange(e.id, false)) as EdgeSelectionChange[];
 
       if (nodesToUnselect.length) {
-        if (isControlled) {
+        if (hasDefaultNodes) {
           set({
             nodeInternals: handleControlledNodeSelectionChange(nodesToUnselect, nodeInternals),
           });
-        } else if (onNodesChange) {
-          onNodesChange(nodesToUnselect);
         }
+        onNodesChange?.(nodesToUnselect);
       }
       if (edgesToUnselect.length) {
-        if (isControlled) {
+        if (hasDefaultEdges) {
           set({
             edges: handleControlledEdgeSelectionChange(edgesToUnselect, edges),
           });
-        } else if (onEdgesChange) {
-          onEdgesChange(edgesToUnselect);
         }
+        onEdgesChange?.(edgesToUnselect);
       }
     },
     setNodeExtent: (nodeExtent: CoordinateExtent) => {

src/store/initialState.ts

@@ -13,7 +13,8 @@ const initialState: ReactFlowStore = {
   edges: [],
   onNodesChange: null,
   onEdgesChange: null,
-  isControlled: false,
+  hasDefaultNodes: false,
+  hasDefaultEdges: false,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
   d3Zoom: null,
   d3Selection: null,

src/types/general.ts

@@ -122,7 +122,8 @@ export type ReactFlowStore = {
   selectedNodesBbox: Rect;
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
-  isControlled: boolean;
+  hasDefaultNodes: boolean;
+  hasDefaultEdges: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
@@ -169,7 +170,7 @@ export type ReactFlowStore = {
 export type ReactFlowActions = {
   setNodes: (nodes: Node[]) => void;
   setEdges: (edges: Edge[]) => void;
-  setDefaultNodesAndEdges: (nodes: Node[], edges?: Edge[]) => void;
+  setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
   updateNodePosition: (update: NodeDiffUpdate) => void;
   resetSelectedElements: () => void;