refactor(react): use array for nodeInternals, rename to nodes

packages/react/src/components/ConnectionLine/index.tsx

@@ -43,7 +43,7 @@ const ConnectionLine = ({
   const { fromNode, handleId, toX, toY, connectionMode } = useStore(
     useCallback(
       (s: ReactFlowStore) => ({
-        fromNode: s.nodeInternals.get(nodeId),
+        fromNode: s.nodes.find((n) => n.id === nodeId),
         handleId: s.connectionStartHandle?.handleId,
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],

packages/react/src/components/Edges/wrapEdge.tsx

@@ -54,8 +54,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const [updating, setUpdating] = useState<boolean>(false);
     const store = useStoreApi();
     const edgePosition = useStore((state) => {
-      const sourceNode = state.nodeInternals.get(source);
-      const targetNode = state.nodeInternals.get(target);
+      const sourceNode = state.nodes.find((n) => n.id === source);
+      const targetNode = state.nodes.find((n) => n.id === target);
 
       if (!sourceNode || !targetNode) {
         return null;
@@ -118,7 +118,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         onConnectStart,
         onConnectEnd,
         cancelConnection,
-        getNodes,
+        nodes,
         panBy,
         updateConnection,
       } = store.getState();
@@ -128,7 +128,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
       const isTarget = isSourceHandle;
       const edge = edges.find((e) => e.id === id)!;
-      const nodes = getNodes();
 
       setUpdating(true);
       onEdgeUpdateStart?.(event, edge, handleType);

packages/react/src/components/Handle/index.tsx

@@ -106,7 +106,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           connectionMode: currentStore.connectionMode,
           connectionRadius: currentStore.connectionRadius,
           domNode: currentStore.domNode,
-          nodes: currentStore.getNodes(),
+          nodes: currentStore.nodes,
           lib: currentStore.lib,
           isTarget,
           handleId,

packages/react/src/components/Nodes/utils.ts

@@ -11,7 +11,7 @@ export function getMouseHandler(
   return handler === undefined
     ? handler
     : (event: MouseEvent) => {
-        const node = getState().nodeInternals.get(id)!;
+        const node = getState().nodes.find((n) => n.id === id)!;
         handler(event, { ...node });
       };
 }
@@ -34,8 +34,8 @@ export function handleNodeClick({
   unselect?: boolean;
   nodeRef?: RefObject<HTMLDivElement>;
 }) {
-  const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeInternals } = store.getState();
-  const node = nodeInternals.get(id)!;
+  const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodes } = store.getState();
+  const node = nodes.find((n) => n.id === id)!;
 
   store.setState({ nodesSelectionActive: false });
 

packages/react/src/components/Nodes/wrapNode.tsx

@@ -78,7 +78,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       }
 
       if (onClick) {
-        const node = store.getState().nodeInternals.get(id)!;
+        const node = store.getState().nodes.find((n) => n.id === id)!;
         onClick(event, { ...node });
       }
     };

packages/react/src/components/NodesSelection/index.tsx

@@ -21,7 +21,7 @@ export type NodesSelectionProps = {
 };
 
 const selector = (s: ReactFlowState) => {
-  const selectedNodes = s.getNodes().filter((n) => n.selected);
+  const selectedNodes = s.nodes.filter((n) => n.selected);
   const { width, height, x, y } = getRectOfNodes(selectedNodes, s.nodeOrigin);
 
   return {
@@ -57,10 +57,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
 
   const onContextMenu = onSelectionContextMenu
     ? (event: MouseEvent) => {
-        const selectedNodes = store
-          .getState()
-          .getNodes()
-          .filter((n) => n.selected);
+        const selectedNodes = store.getState().nodes.filter((n) => n.selected);
         onSelectionContextMenu(event, selectedNodes);
       }
     : undefined;

packages/react/src/components/SelectionListener/index.tsx

@@ -9,7 +9,7 @@ type SelectionListenerProps = {
 };
 
 const selector = (s: ReactFlowState) => ({
-  selectedNodes: s.getNodes().filter((n) => n.selected),
+  selectedNodes: s.nodes.filter((n) => n.selected),
   selectedEdges: s.edges.filter((e) => e.selected),
 });