Merge pull request #4105 from xyflow/refactor/internal-nodes

React Flow 12: separate user nodes and internal nodes

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -3,7 +3,7 @@
 import { memo, useEffect, useRef, type MouseEvent, useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
+import { getInternalNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Panel } from '../../components/Panel';
@@ -26,7 +26,9 @@ const selector = (s: ReactFlowState) => {
   return {
     viewBB,
     boundingRect:
-      s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
+      s.nodeLookup.size > 0
+        ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
+        : viewBB,
     rfId: s.rfId,
     nodeOrigin: s.nodeOrigin,
     panZoom: s.panZoom,

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -6,7 +6,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import { MiniMapNode } from './MiniMapNode';
-import type { ReactFlowState, Node } from '../../types';
+import type { ReactFlowState, Node, InternalNode } from '../../types';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
 
 declare const window: any;
@@ -85,7 +85,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
   shapeRendering: string;
 }) {
   const { node, x, y } = useStore((s) => {
-    const node = s.nodeLookup.get(id) as NodeType;
+    const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
     const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
 
     return {

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -5,12 +5,14 @@ import {
   ResizeControlVariant,
   type XYResizerInstance,
   type XYResizerChange,
-  XYResizerChildChange,
+  type XYResizerChildChange,
+  type NodeChange,
+  type NodeDimensionChange,
+  type NodePositionChange,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
 import type { ResizeControlProps, ResizeControlLineProps } from './types';
 
 function ResizeControl({

packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx

@@ -1,23 +1,23 @@
 import { useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransform } from '@xyflow/system';
+import { Rect, Position, getNodeToolbarTransform, getNodesBounds } from '@xyflow/system';
 
-import { Node, ReactFlowState } from '../../types';
+import { InternalNode, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { NodeToolbarPortal } from './NodeToolbarPortal';
 import type { NodeToolbarProps } from './types';
 
-const nodeEqualityFn = (a?: Node, b?: Node) =>
-  a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
-  a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
-  a?.computed?.width !== b?.computed?.width ||
-  a?.computed?.height !== b?.computed?.height ||
+const nodeEqualityFn = (a?: InternalNode, b?: InternalNode) =>
+  a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x ||
+  a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y ||
+  a?.measured.width !== b?.measured.width ||
+  a?.measured.height !== b?.measured.height ||
   a?.selected !== b?.selected ||
-  a?.[internalsSymbol]?.z !== b?.[internalsSymbol]?.z;
+  a?.internals.z !== b?.internals.z;
 
-const nodesEqualityFn = (a: Node[], b: Node[]) => {
+const nodesEqualityFn = (a: InternalNode[], b: InternalNode[]) => {
   if (a.length !== b.length) {
     return false;
   }
@@ -49,10 +49,10 @@ export function NodeToolbar({
   const contextNodeId = useNodeId();
 
   const nodesSelector = useCallback(
-    (state: ReactFlowState): Node[] => {
+    (state: ReactFlowState): InternalNode[] => {
       const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
 
-      return nodeIds.reduce<Node[]>((acc, id) => {
+      return nodeIds.reduce<InternalNode[]>((acc, id) => {
         const node = state.nodeLookup.get(id);
         if (node) {
           acc.push(node);
@@ -74,7 +74,7 @@ export function NodeToolbar({
   }
 
   const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin });
-  const zIndex: number = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+  const zIndex: number = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1));
 
   const wrapperStyle: CSSProperties = {
     position: 'absolute',