refactor(react): separate user nodes and indernal nodes

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

@@ -2,7 +2,6 @@ import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 import {
-  internalsSymbol,
   Position,
   ConnectionLineType,
   ConnectionMode,
@@ -53,7 +52,7 @@ const ConnectionLine = ({
     ),
     shallow
   );
-  const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+  const fromHandleBounds = fromNode?.internals?.handleBounds;
   let handleBounds = fromHandleBounds?.[handleType];
 
   if (connectionMode === ConnectionMode.Loose) {
@@ -65,10 +64,10 @@ const ConnectionLine = ({
   }
 
   const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
-  const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
-  const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed.width ?? 0) / 2;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed.height ?? 0;
+  const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX;
+  const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY;
   const fromPosition = fromHandle?.position;
   const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
 

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -54,7 +54,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       onConnectStart,
       onConnectEnd,
       cancelConnection,
-      nodes,
+      nodeLookup,
       rfId: flowId,
       panBy,
       updateConnection,
@@ -82,7 +82,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       domNode,
       handleId,
       nodeId,
-      nodes,
+      nodeLookup,
       isTarget,
       edgeUpdaterType: handleType,
       lib,

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

@@ -126,7 +126,7 @@ function HandleComponent(
         connectionMode: currentStore.connectionMode,
         connectionRadius: currentStore.connectionRadius,
         domNode: currentStore.domNode,
-        nodes: currentStore.nodes,
+        nodeLookup: currentStore.nodeLookup,
         lib: currentStore.lib,
         isTarget,
         handleId,

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

@@ -7,7 +7,6 @@ import {
   errorMessages,
   getNodeDimensions,
   getPositionWithOrigin,
-  internalsSymbol,
   isInputDOMNode,
   nodeHasDimensions,
 } from '@xyflow/system';
@@ -19,7 +18,7 @@ import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from './utils';
-import type { Node, NodeWrapperProps } from '../../types';
+import type { InternalNode, Node, NodeWrapperProps } from '../../types';
 
 export function NodeWrapper<NodeType extends Node>({
   id,
@@ -44,11 +43,11 @@ export function NodeWrapper<NodeType extends Node>({
   onError,
 }: NodeWrapperProps<NodeType>) {
   const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
-    const node = s.nodeLookup.get(id)! as NodeType;
+    const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
 
     const positionAbsolute = nodeExtent
-      ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
-      : node.computed?.positionAbsolute || { x: 0, y: 0 };
+      ? clampPosition(node.internals.positionAbsolute, nodeExtent)
+      : node.internals.positionAbsolute || { x: 0, y: 0 };
 
     return {
       node,
@@ -56,8 +55,8 @@ export function NodeWrapper<NodeType extends Node>({
       // so we we need to force a re-render when some change
       positionAbsoluteX: positionAbsolute.x,
       positionAbsoluteY: positionAbsolute.y,
-      zIndex: node[internalsSymbol]?.z ?? 0,
-      isParent: !!node[internalsSymbol]?.isParent,
+      zIndex: node.internals.z,
+      isParent: node.internals.isParent,
     };
   }, shallow);
 
@@ -84,7 +83,7 @@ export function NodeWrapper<NodeType extends Node>({
   const nodeDimensions = getNodeDimensions(node);
   const inlineDimensions = getNodeInlineStyleDimensions(node);
   const initialized = nodeHasDimensions(node);
-  const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
+  const hasHandleBounds = !!node.internals.handleBounds;
 
   const moveSelectedNodes = useMoveSelectedNodes();
 

packages/react/src/components/NodeWrapper/utils.tsx

@@ -4,7 +4,7 @@ import { InputNode } from '../Nodes/InputNode';
 import { DefaultNode } from '../Nodes/DefaultNode';
 import { GroupNode } from '../Nodes/GroupNode';
 import { OutputNode } from '../Nodes/OutputNode';
-import type { Node, NodeTypes } from '../../types';
+import type { InternalNode, Node, NodeTypes } from '../../types';
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {
   ArrowUp: { x: 0, y: -1 },
@@ -21,12 +21,12 @@ export const builtinNodeTypes: NodeTypes = {
 };
 
 export function getNodeInlineStyleDimensions<NodeType extends Node = Node>(
-  node: NodeType
+  node: InternalNode<NodeType>
 ): {
   width: number | string | undefined;
   height: number | string | undefined;
 } {
-  if (!node.computed) {
+  if (node.internals.handleBounds === undefined) {
     return {
       width: node.width ?? node.initialWidth ?? node.style?.width,
       height: node.height ?? node.initialHeight ?? node.style?.height,

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

@@ -11,7 +11,7 @@ import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { arrowKeyDiffs } from '../NodeWrapper/utils';
-import type { Node, ReactFlowState } from '../../types';
+import type { InternalNode, Node, ReactFlowState } from '../../types';
 
 export type NodesSelectionProps<NodeType> = {
   onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
@@ -20,7 +20,13 @@ export type NodesSelectionProps<NodeType> = {
 };
 
 const selector = (s: ReactFlowState) => {
-  const selectedNodes = s.nodes.filter((n) => n.selected);
+  const selectedNodes: InternalNode[] = [];
+  for (const [, node] of s.nodeLookup) {
+    if (node.selected) {
+      selectedNodes.push(node);
+    }
+  }
+
   const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
 
   return {

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

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