diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index cd0e0b4c..e4368730 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/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(nodeInternals.get(nodeId)); - const fromHandleBounds = fromNode.current?.[handleBoundsSymbol]; + const fromHandleBounds = fromNode.current?.[internalsSymbol].handleBounds; if (!fromNode.current || !isConnectable || !fromHandleBounds?.[connectionHandleType]) { return null; diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts index 8a77a121..97add80f 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/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 || diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index d347c4bb..32ef324e 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/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} /> diff --git a/src/hooks/useVisibleEdges.ts b/src/hooks/useVisibleEdges.ts index c5f99a05..6396a154 100644 --- a/src/hooks/useVisibleEdges.ts +++ b/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]) { diff --git a/src/index.ts b/src/index.ts index add58524..d3f54b14 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/store/index.ts b/src/store/index.ts index d6ccde3a..cfcd63b8 100644 --- a/src/store/index.ts +++ b/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, }); diff --git a/src/store/utils.ts b/src/store/utils.ts index 9fd2ee60..4c338570 100644 --- a/src/store/utils.ts +++ b/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; } } }); diff --git a/src/types/nodes.ts b/src/types/nodes.ts index 1971714a..fe531ae6 100644 --- a/src/types/nodes.ts +++ b/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 { @@ -29,9 +29,11 @@ export interface Node { 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 diff --git a/src/utils/index.ts b/src/utils/index.ts index 89857c11..9ef2661b 100644 --- a/src/utils/index.ts +++ b/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');