refactor(nodes): only use node internals

src/hooks/useGlobalKeyHandler.ts

@@ -28,7 +28,9 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
 
   useEffect(() => {
-    const { nodes, edges } = store.getState();
+    const { nodeInternals, edges } = 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);
     const selectedEdges = edges.filter((e) => e.selected);
 

src/hooks/useNodeInternalsRef.ts

@@ -1,14 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-import { useStoreApi } from '../store';
-
-function useNodeInternalsRef() {
-  const store = useStoreApi();
-  const nodeInternals = useRef(store.getState().nodeInternals);
-
-  useEffect(() => store.subscribe((state) => (nodeInternals.current = state.nodeInternals)), []);
-
-  return nodeInternals;
-}
-
-export default useNodeInternalsRef;

src/hooks/useOnLoadHandler.ts

@@ -19,7 +19,9 @@ function useOnLoadHandler(onLoad: OnLoad<any> | undefined) {
         };
 
         const getNodes = (): Node[] => {
-          const { nodes = [] } = store.getState();
+          const { nodeInternals } = store.getState();
+          // @TODO: work with nodeInternals instead of converting it to an array
+          const nodes = Array.from(nodeInternals).map(([_, node]) => node);
           return nodes.map((n) => ({ ...n }));
         };
 
@@ -29,8 +31,9 @@ function useOnLoadHandler(onLoad: OnLoad<any> | undefined) {
         };
 
         const toObject = (): FlowExportObject => {
-          const { nodes = [], edges = [], transform } = store.getState();
-
+          const { nodeInternals, edges = [], transform } = store.getState();
+          // @TODO: work with nodeInternals instead of converting it to an array
+          const nodes = Array.from(nodeInternals).map(([_, node]) => node);
           return {
             nodes: nodes.map((n) => ({ ...n })),
             edges: edges.map((e) => ({ ...e })),

src/hooks/useVisibleNodes.ts

@@ -8,9 +8,11 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
     useCallback(
       (s: ReactFlowState) => {
+        // @TODO: work with nodeInternals instead of converting it to an array
+        const nodes = Array.from(s.nodeInternals).map(([_, node]) => node);
         return onlyRenderVisible
-          ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : s.nodes;
+          ? getNodesInside(nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
+          : nodes;
       },
       [onlyRenderVisible]
     )

src/hooks/useZoomPanHelper.ts

@@ -41,8 +41,9 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
           d3Zoom.transform(d3Selection, nextTransform);
         },
         fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
-          const { nodes, width, height, minZoom, maxZoom } = store.getState();
-
+          const { nodeInternals, width, height, minZoom, maxZoom } = store.getState();
+          // @TODO: work with nodeInternals instead of converting it to an array
+          const nodes = Array.from(nodeInternals).map(([_, node]) => node);
           if (!nodes.length) {
             return;
           }