diff --git a/example/src/UseReactFlow/index.tsx b/example/src/UseReactFlow/index.tsx index 83cb6b33..e9553bf3 100644 --- a/example/src/UseReactFlow/index.tsx +++ b/example/src/UseReactFlow/index.tsx @@ -33,7 +33,18 @@ const UseZoomPanHelperFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); - const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook, addEdges } = useReactFlow(); + const { + project, + setCenter, + zoomIn, + zoomOut, + fitView, + addNodes, + setNodes: setNodesHook, + addEdges, + getNodes, + getEdges, + } = useReactFlow(); const onPaneClick = useCallback( (evt: MouseEvent) => { @@ -72,6 +83,11 @@ const UseZoomPanHelperFlow = () => { addNodes(newNode); }, [addNodes]); + const logNodes = useCallback(() => { + console.log('nodes', getNodes()); + console.log('edges', getEdges()); + }, [getNodes]); + useEffect(() => { addEdges({ id: 'e3-4', source: '3', target: '4' }); }, [addEdges]); @@ -97,6 +113,7 @@ const UseZoomPanHelperFlow = () => { + diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index e4368730..2fa29ba0 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/src/components/ConnectionLine/index.tsx @@ -38,7 +38,7 @@ export default ({ const { nodeInternals, transform } = useStore(selector, shallow); const fromNode = useRef(nodeInternals.get(nodeId)); - const fromHandleBounds = fromNode.current?.[internalsSymbol].handleBounds; + 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 97add80f..c02d9361 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/src/container/EdgeRenderer/utils.ts @@ -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?.[internalsSymbol].handleBounds || 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 32ef324e..ba3ea773 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -118,8 +118,8 @@ const NodeRenderer = (props: NodeRendererProps) => { isConnectable={isConnectable} resizeObserver={resizeObserver} dragHandle={node.dragHandle} - zIndex={node[internalsSymbol].z ?? 0} - isParent={!!node[internalsSymbol].isParent} + 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 6396a154..02f4db53 100644 --- a/src/hooks/useVisibleEdges.ts +++ b/src/hooks/useVisibleEdges.ts @@ -18,8 +18,8 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevate z = hasZIndex ? edge.zIndex! : Math.max( - nodeInternals.get(edge.source)?.[internalsSymbol].z || 0, - nodeInternals.get(edge.target)?.[internalsSymbol].z || 0 + nodeInternals.get(edge.source)?.[internalsSymbol]?.z || 0, + nodeInternals.get(edge.target)?.[internalsSymbol]?.z || 0 ); } diff --git a/src/index.ts b/src/index.ts index d3f54b14..add58524 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,7 +32,6 @@ 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/utils.ts b/src/store/utils.ts index 4c338570..3bc89963 100644 --- a/src/store/utils.ts +++ b/src/store/utils.ts @@ -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[internalsSymbol].z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol].z ?? 0 : result.z ?? 0, + z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0, }); } @@ -60,7 +60,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals) Object.defineProperty(internals, internalsSymbol, { enumerable: false, value: { - handleBounds: currInternals?.[internalsSymbol].handleBounds, + handleBounds: currInternals?.[internalsSymbol]?.handleBounds, z, }, }); @@ -76,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[internalsSymbol].z ?? 0, + z: node[internalsSymbol]?.z ?? 0, }); node.positionAbsolute = { @@ -84,10 +84,10 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals) y, }; - node[internalsSymbol].z = z; + node[internalsSymbol]!.z = z; if (parentNodes[node.id]) { - node[internalsSymbol].isParent = true; + node[internalsSymbol]!.isParent = true; } } }); diff --git a/src/types/nodes.ts b/src/types/nodes.ts index fe531ae6..94e95124 100644 --- a/src/types/nodes.ts +++ b/src/types/nodes.ts @@ -29,7 +29,7 @@ export interface Node { positionAbsolute?: XYPosition; // only used internally - [internalsSymbol]: { + [internalsSymbol]?: { z?: number; handleBounds?: NodeHandleBounds; isParent?: boolean;