refactor(inrernals): use one prop for all internals

src/components/ConnectionLine/index.tsx

@@ -6,7 +6,7 @@ import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { ConnectionLineType, ConnectionLineComponent, HandleType, Node, ReactFlowState, Position } from '../../types';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import { handleBoundsSymbol } from '../../utils';
+import { internalsSymbol } from '../../utils';
 
 interface ConnectionLineProps {
   connectionNodeId: string;
@@ -38,7 +38,7 @@ export default ({
 
   const { nodeInternals, transform } = useStore(selector, shallow);
   const fromNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
-  const fromHandleBounds = fromNode.current?.[handleBoundsSymbol];
+  const fromHandleBounds = fromNode.current?.[internalsSymbol].handleBounds;
 
   if (!fromNode.current || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
     return null;

src/container/EdgeRenderer/utils.ts

@@ -13,7 +13,7 @@ import {
   Transform,
   XYPosition,
 } from '../../types';
-import { handleBoundsSymbol, rectToBox } from '../../utils';
+import { internalsSymbol, rectToBox } from '../../utils';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
@@ -168,7 +168,7 @@ export function isEdgeVisible({
 
 export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean] {
   const node = nodeInternals.get(nodeId);
-  const handleBounds = node?.[handleBoundsSymbol] || null;
+  const handleBounds = node?.[internalsSymbol].handleBounds || null;
 
   const isInvalid =
     !node ||

src/container/NodeRenderer/index.tsx

@@ -11,7 +11,7 @@ import {
   ReactFlowState,
   WrapNodeProps,
 } from '../../types';
-import { isParentSymbol, zSymbol } from '../../utils';
+import { internalsSymbol } from '../../utils';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesWrapped;
@@ -118,8 +118,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isConnectable={isConnectable}
             resizeObserver={resizeObserver}
             dragHandle={node.dragHandle}
-            zIndex={node[zSymbol] ?? 0}
-            isParent={!!node[isParentSymbol]}
+            zIndex={node[internalsSymbol].z ?? 0}
+            isParent={!!node[internalsSymbol].isParent}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
           />

src/hooks/useVisibleEdges.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useStore } from '../store';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
 import { ReactFlowState, NodeInternals, Edge } from '../types';
-import { isNumeric, zSymbol } from '../utils';
+import { internalsSymbol, isNumeric } from '../utils';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 
@@ -17,7 +17,10 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevate
     if (elevateEdgesOnSelect) {
       z = hasZIndex
         ? edge.zIndex!
-        : Math.max(nodeInternals.get(edge.source)?.[zSymbol] || 0, nodeInternals.get(edge.target)?.[zSymbol] || 0);
+        : Math.max(
+            nodeInternals.get(edge.source)?.[internalsSymbol].z || 0,
+            nodeInternals.get(edge.target)?.[internalsSymbol].z || 0
+          );
     }
 
     if (tree[z]) {

src/index.ts

@@ -32,6 +32,7 @@ export {
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
+export { internalsSymbol } from './utils';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

src/store/index.ts

@@ -1,7 +1,7 @@
 import create from 'zustand';
 import createContext from 'zustand/context';
 
-import { clampPosition, getDimensions, handleBoundsSymbol } from '../utils';
+import { clampPosition, getDimensions, internalsSymbol } from '../utils';
 import { applyNodeChanges } from '../utils/changes';
 import {
   ReactFlowState,
@@ -60,7 +60,10 @@ const createStore = () =>
             const handleBounds = getHandleBounds(update.nodeElement, transform[2]);
             nodeInternals.set(node.id, {
               ...node,
-              [handleBoundsSymbol]: handleBounds,
+              [internalsSymbol]: {
+                ...node[internalsSymbol],
+                handleBounds,
+              },
               ...dimensions,
             });
 

src/store/utils.ts

@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom';
 import { GetState, SetState } from 'zustand';
 
-import { handleBoundsSymbol, isNumeric, isParentSymbol, zSymbol } from '../utils';
+import { internalsSymbol, isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
 import {
   Edge,
@@ -30,7 +30,7 @@ function calculateXYZPosition(
   return calculateXYZPosition(parentNode, nodeInternals, parentNodes, {
     x: (result.x ?? 0) + (parentNode.position?.x ?? 0),
     y: (result.y ?? 0) + (parentNode.position?.y ?? 0),
-    z: (parentNode[zSymbol] ?? 0) > (result.z ?? 0) ? parentNode[zSymbol] ?? 0 : result.z ?? 0,
+    z: (parentNode[internalsSymbol].z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol].z ?? 0 : result.z ?? 0,
   });
 }
 
@@ -57,14 +57,12 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
       parentNodes[node.parentNode] = true;
     }
 
-    Object.defineProperty(internals, handleBoundsSymbol, {
+    Object.defineProperty(internals, internalsSymbol, {
       enumerable: false,
-      value: currInternals?.[handleBoundsSymbol],
-    });
-
-    Object.defineProperty(internals, zSymbol, {
-      enumerable: false,
-      value: z,
+      value: {
+        handleBounds: currInternals?.[internalsSymbol].handleBounds,
+        z,
+      },
     });
 
     nextNodeInternals.set(node.id, internals);
@@ -78,7 +76,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     if (node.parentNode || parentNodes[node.id]) {
       const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
         ...node.position,
-        z: node[zSymbol] ?? 0,
+        z: node[internalsSymbol].z ?? 0,
       });
 
       node.positionAbsolute = {
@@ -86,10 +84,10 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
         y,
       };
 
-      node[zSymbol] = z;
+      node[internalsSymbol].z = z;
 
       if (parentNodes[node.id]) {
-        node[isParentSymbol] = true;
+        node[internalsSymbol].isParent = true;
       }
     }
   });

src/types/nodes.ts

@@ -2,7 +2,7 @@ import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 
 import { XYPosition, Position, CoordinateExtent } from './utils';
 import { HandleElement } from './handles';
-import { handleBoundsSymbol, isParentSymbol, zSymbol } from '../utils';
+import { internalsSymbol } from '../utils';
 
 // interface for the user node items
 export interface Node<T = any> {
@@ -29,9 +29,11 @@ export interface Node<T = any> {
   positionAbsolute?: XYPosition;
 
   // only used internally
-  [zSymbol]?: number;
-  [handleBoundsSymbol]?: NodeHandleBounds;
-  [isParentSymbol]?: boolean;
+  [internalsSymbol]: {
+    z?: number;
+    handleBounds?: NodeHandleBounds;
+    isParent?: boolean;
+  };
 }
 
 // props that get passed to a custom node

src/utils/index.ts

@@ -41,6 +41,4 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
 
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
 
-export const handleBoundsSymbol = Symbol('handleBounds');
-export const zSymbol = Symbol('z');
-export const isParentSymbol = Symbol('isParent');
+export const internalsSymbol = Symbol('internals');