refactor(store): use getNodes function

packages/core/src/store/index.ts

@@ -27,6 +27,9 @@ const createRFStore = () =>
       const { nodeInternals, nodeOrigin } = get();
       set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
     },
+    getNodes: () => {
+      return Array.from(get().nodeInternals.values());
+    },
     setEdges: (edges: Edge[]) => {
       const { defaultEdgeOptions = {} } = get();
       set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
@@ -125,11 +128,11 @@ const createRFStore = () =>
     },
 
     triggerNodeChanges: (changes: NodeChange[]) => {
-      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
+      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes } = get();
 
       if (changes?.length) {
         if (hasDefaultNodes) {
-          const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
+          const nodes = applyNodeChanges(changes, getNodes());
           const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
           set({ nodeInternals: nextNodeInternals });
         }
@@ -139,14 +142,14 @@ const createRFStore = () =>
     },
 
     addSelectedNodes: (selectedNodeIds: string[]) => {
-      const { multiSelectionActive, nodeInternals, edges } = get();
+      const { multiSelectionActive, edges, getNodes } = get();
       let changedNodes: NodeSelectionChange[];
       let changedEdges: EdgeSelectionChange[] | null = null;
 
       if (multiSelectionActive) {
         changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
       } else {
-        changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), selectedNodeIds);
+        changedNodes = getSelectionChanges(getNodes(), selectedNodeIds);
         changedEdges = getSelectionChanges(edges, []);
       }
 
@@ -158,7 +161,7 @@ const createRFStore = () =>
       });
     },
     addSelectedEdges: (selectedEdgeIds: string[]) => {
-      const { multiSelectionActive, edges, nodeInternals } = get();
+      const { multiSelectionActive, edges, getNodes } = get();
       let changedEdges: EdgeSelectionChange[];
       let changedNodes: NodeSelectionChange[] | null = null;
 
@@ -166,7 +169,7 @@ const createRFStore = () =>
         changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
       } else {
         changedEdges = getSelectionChanges(edges, selectedEdgeIds);
-        changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), []);
+        changedNodes = getSelectionChanges(getNodes(), []);
       }
 
       updateNodesAndEdgesSelections({
@@ -177,8 +180,8 @@ const createRFStore = () =>
       });
     },
     unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => {
-      const { nodeInternals, edges: storeEdges } = get();
-      const nodesToUnselect = nodes ? nodes : Array.from(nodeInternals.values());
+      const { edges: storeEdges, getNodes } = get();
+      const nodesToUnselect = nodes ? nodes : getNodes();
       const edgesToUnselect = edges ? edges : storeEdges;
 
       const changedNodes = nodesToUnselect.map((n) => {
@@ -215,8 +218,8 @@ const createRFStore = () =>
       set({ translateExtent });
     },
     resetSelectedElements: () => {
-      const { nodeInternals, edges } = get();
-      const nodes = Array.from(nodeInternals.values());
+      const { edges, getNodes } = get();
+      const nodes = getNodes();
 
       const nodesToUnselect = nodes
         .filter((e) => e.selected)

packages/core/src/store/utils.ts

@@ -120,7 +120,7 @@ type InternalFitViewOptions = {
 
 export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
   const {
-    nodeInternals,
+    getNodes,
     width,
     height,
     minZoom,
@@ -134,9 +134,7 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
 
   if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
     if (d3Zoom && d3Selection) {
-      const nodes = Array.from(nodeInternals.values()).filter((n) =>
-        options.includeHiddenNodes ? n.width && n.height : !n.hidden
-      );
+      const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
 
       const nodesInitialized = nodes.every((n) => n.width && n.height);