refactor(nodes): rename computed to measured, add helpers

packages/react/src/hooks/useInternalNode.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from './useStore';
+import type { InternalNode, Node } from '../types';
+
+/**
+ * Hook for getting an internal node by id
+ *
+ * @public
+ * @param id - id of the node
+ * @returns array with visible node ids
+ */
+export function useInternalNode<NodeType extends Node = Node>(id: string): InternalNode<NodeType> | undefined {
+  const node = useStore(
+    useCallback((s) => s.nodeLookup.get(id) as InternalNode<NodeType> | undefined, [id]),
+    shallow
+  );
+
+  return node;
+}

packages/react/src/hooks/useReactFlow.ts

@@ -1,12 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import {
-  getElementsToRemove,
-  getOverlappingArea,
-  isRectObject,
-  nodeHasDimensions,
-  nodeToRect,
-  type Rect,
-} from '@xyflow/system';
+import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
@@ -32,7 +25,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   }, []);
 
   const getNode = useCallback<Instance.GetNode<NodeType>>((id) => {
-    return store.getState().nodeLookup.get(id)?.internals.userProvidedNode as NodeType;
+    return store.getState().nodeLookup.get(id)?.internals.userNode as NodeType;
   }, []);
 
   const getEdges = useCallback<Instance.GetEdges<EdgeType>>(() => {
@@ -223,13 +216,9 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     []
   );
 
-  const getNodeRect = useCallback((nodeOrRect: NodeType | { id: NodeType['id'] }): Rect | null => {
-    const node =
-      isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
-        ? nodeOrRect
-        : (store.getState().nodeLookup.get(nodeOrRect.id)?.internals.userProvidedNode as NodeType);
-
-    return node ? nodeToRect(node) : null;
+  const getNodeRect = useCallback(({ id }: { id: string }): Rect | null => {
+    const internalNode = store.getState().nodeLookup.get(id);
+    return internalNode ? nodeToRect(internalNode) : null;
   }, []);
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(

packages/react/src/hooks/useViewportHelper.ts

@@ -48,12 +48,12 @@ const useViewportHelper = (): ViewportHelperFunctions => {
         return { x, y, zoom };
       },
       fitView: (options) => {
-        const { nodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+        const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
 
         return panZoom
           ? fitView(
               {
-                nodes,
+                nodeLookup,
                 width,
                 height,
                 nodeOrigin,

packages/react/src/hooks/useVisibleNodeIds.ts

@@ -1,13 +1,13 @@
-import { getNodesInside } from '@xyflow/system';
+import { useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
+import { getNodesInside } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import type { Node, ReactFlowState } from '../types';
-import { useCallback } from 'react';
 
 const selector = (onlyRenderVisible: boolean) => (s: ReactFlowState) => {
   return onlyRenderVisible
-    ? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map(
+    ? getNodesInside<Node>(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map(
         (node) => node.id
       )
     : Array.from(s.nodeLookup.keys());