@xyflow/react 12.4.3 → 12.5.0

package/dist/esm/index.mjs

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, getFitViewNodes, getDimensions, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
@@ -148,7 +148,7 @@ function areEqual(a, b) {
     return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
         shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId)));
 }
-function SelectionListenerInner({ onSelectionChange }) {
+function SelectionListenerInner({ onSelectionChange, }) {
     const store = useStoreApi();
     const { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);
     useEffect(() => {
@@ -159,7 +159,7 @@ function SelectionListenerInner({ onSelectionChange }) {
     return null;
 }
 const changeSelector = (s) => !!s.onSelectionChangeHandlers;
-function SelectionListener({ onSelectionChange }) {
+function SelectionListener({ onSelectionChange, }) {
     const storeHasSelectionChangeHandlers = useStore(changeSelector);
     if (onSelectionChange || storeHasSelectionChangeHandlers) {
         return jsx(SelectionListenerInner, { onSelectionChange: onSelectionChange });
@@ -298,9 +298,9 @@ function StoreUpdater(props) {
                 setPaneClickDistance(fieldValue);
             // Renamed fields
             else if (fieldName === 'fitView')
-                store.setState({ fitViewOnInit: fieldValue });
+                store.setState({ fitViewQueued: fieldValue });
             else if (fieldName === 'fitViewOptions')
-                store.setState({ fitViewOnInitOptions: fieldValue });
+                store.setState({ fitViewOptions: fieldValue });
             // General case
             else
                 store.setState({ [fieldName]: fieldValue });
@@ -410,7 +410,7 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
         const target = options?.target || defaultDoc;
         if (keyCode !== null) {
             const downHandler = (event) => {
-                modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey;
+                modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
                 const preventAction = (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
                     isInputDOMNode(event);
                 if (preventAction) {
@@ -419,16 +419,15 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
                 const keyOrCode = useKeyOrCode(event.code, keysToWatch);
                 pressedKeys.current.add(event[keyOrCode]);
                 if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
-                    event.preventDefault();
+                    const target = (event.composedPath?.()?.[0] || event.target);
+                    const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A';
+                    if (options.preventDefault !== false && (modifierPressed.current || !isInteractiveElement)) {
+                        event.preventDefault();
+                    }
                     setKeyPressed(true);
                 }
             };
             const upHandler = (event) => {
-                const preventAction = (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
-                    isInputDOMNode(event);
-                if (preventAction) {
-                    return false;
-                }
                 const keyOrCode = useKeyOrCode(event.code, keysToWatch);
                 if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
                     setKeyPressed(false);
@@ -519,22 +518,6 @@ const useViewportHelper = () => {
                 const [x, y, zoom] = store.getState().transform;
                 return { x, y, zoom };
             },
-            fitView: (options) => {
-                const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
-                if (!panZoom || !domNode) {
-                    return Promise.resolve(false);
-                }
-                const fitViewNodes = getFitViewNodes(nodeLookup, options);
-                const { width, height } = getDimensions(domNode);
-                return fitView({
-                    nodes: fitViewNodes,
-                    width,
-                    height,
-                    minZoom,
-                    maxZoom,
-                    panZoom,
-                }, options);
-            },
             setCenter: async (x, y, options) => {
                 const { width, height, maxZoom, panZoom } = store.getState();
                 const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
@@ -1174,6 +1157,15 @@ function useReactFlow() {
                 .getState()
                 .connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`)
                 ?.values() ?? []),
+            fitView: async (options) => {
+                // We either create a new Promise or reuse the existing one
+                // Even if fitView is called multiple times in a row, we only end up with a single Promise
+                const fitViewResolver = store.getState().fitViewResolver ?? Promise.withResolvers();
+                // We schedule a fitView by setting fitViewQueued and triggering a setNodes
+                store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
+                batchContext.nodeQueue.push((nodes) => [...nodes]);
+                return fitViewResolver.promise;
+            },
         };
     }, []);
     return useMemo(() => {
@@ -1371,11 +1363,12 @@ const wrapHandler = (handler, containerRef) => {
 const selector$h = (s) => ({
     userSelectionActive: s.userSelectionActive,
     elementsSelectable: s.elementsSelectable,
+    connectionInProgress: s.connection.inProgress,
     dragging: s.paneDragging,
 });
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const store = useStoreApi();
-    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$h, shallow);
+    const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow);
     const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
     const container = useRef(null);
     const containerBounds = useRef();
@@ -1386,7 +1379,8 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     const selectionStarted = useRef(false);
     const onClick = (event) => {
         // We prevent click events when the user let go of the selectionKey during a selection
-        if (selectionInProgress.current) {
+        // We also prevent click events when a connection is in progress
+        if (selectionInProgress.current || connectionInProgress) {
             selectionInProgress.current = false;
             return;
         }
@@ -1681,6 +1675,7 @@ const connectingSelector = (nodeId, handleId, type) => (state) => {
             ? fromHandle?.type !== type
             : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
         connectionInProcess: !!fromHandle,
+        clickConnectionInProcess: !!clickHandle,
         valid: connectingTo && isValid,
     };
 };
@@ -1690,7 +1685,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
     const store = useStoreApi();
     const nodeId = useNodeId();
     const { connectOnClick, noPanClassName, rfId } = useStore(selector$g, shallow);
-    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid, } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
     }
@@ -1804,7 +1799,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                  */
                 connectionindicator: isConnectable &&
                     (!connectionInProcess || isPossibleEndHandle) &&
-                    (connectionInProcess ? isConnectableEnd : isConnectableStart),
+                    (connectionInProcess || clickConnectionInProcess ? isConnectableEnd : isConnectableStart),
             },
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
 }
@@ -2309,7 +2304,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
 MarkerDefinitions.displayName = 'MarkerDefinitions';
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
 
-function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
+function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg = true, labelBgStyle, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
     const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 });
     const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
     const edgeTextRef = useRef(null);
@@ -2324,7 +2319,7 @@ function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, l
             });
         }
     }, [label]);
-    if (typeof label === 'undefined' || !label) {
+    if (!label) {
         return null;
     }
     return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: edgeTextRef, style: labelStyle, children: label }), children] }));
@@ -2334,26 +2329,26 @@ EdgeTextComponent.displayName = 'EdgeText';
  * You can use the `<EdgeText />` component as a helper component to display text
  * within your custom edges.
  *
- *@public
+ * @public
  *
- *@example
- *```jsx
- *import { EdgeText } from '@xyflow/react';
+ * @example
+ * ```jsx
+ * import { EdgeText } from '@xyflow/react';
  *
- *export function CustomEdgeLabel({ label }) {
- *  return (
- *    <EdgeText
- *      x={100}
- *      y={100}
- *      label={label}
- *      labelStyle={{ fill: 'white' }}
- *      labelShowBg
- *      labelBgStyle={{ fill: 'red' }}
- *      labelBgPadding={[2, 4]}
- *      labelBgBorderRadius={2}
- *    />
- *  );
- *}
+ * export function CustomEdgeLabel({ label }) {
+ *   return (
+ *     <EdgeText
+ *       x={100}
+ *       y={100}
+ *       label={label}
+ *       labelStyle={{ fill: 'white' }}
+ *       labelShowBg
+ *       labelBgStyle={{ fill: 'red' }}
+ *       labelBgPadding={[2, 4]}
+ *       labelBgBorderRadius={2}
+ *     />
+ *   );
+ * }
  *```
  */
 const EdgeText = memo(EdgeTextComponent);
@@ -2470,7 +2465,33 @@ function createSmoothStepEdge(params) {
         return (jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a smooth step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { SmoothStepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <SmoothStepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 SmoothStepEdge.displayName = 'SmoothStepEdge';
 SmoothStepEdgeInternal.displayName = 'SmoothStepEdgeInternal';
@@ -2482,7 +2503,33 @@ function createStepEdge(params) {
         return (jsx(SmoothStepEdge, { ...props, id: _id, pathOptions: useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset]) }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <StepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StepEdge = createStepEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const StepEdgeInternal = createStepEdge({ isInternal: true });
 StepEdge.displayName = 'StepEdge';
 StepEdgeInternal.displayName = 'StepEdgeInternal';
@@ -2495,7 +2542,31 @@ function createStraightEdge(params) {
         return (jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a straight line.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StraightEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
+ *   return (
+ *     <StraightEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StraightEdge = createStraightEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 StraightEdge.displayName = 'StraightEdge';
 StraightEdgeInternal.displayName = 'StraightEdgeInternal';
@@ -2516,7 +2587,33 @@ function createBezierEdge(params) {
         return (jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a bezier curve.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { BezierEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <BezierEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const BezierEdge = createBezierEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 BezierEdge.displayName = 'BezierEdge';
 BezierEdgeInternal.displayName = 'BezierEdgeInternal';
@@ -2552,6 +2649,9 @@ const shiftY = (y, shift, position) => {
     return y;
 };
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
+/**
+ * @internal
+ */
 function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) {
     return (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
 }
@@ -2992,11 +3092,11 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         elementsSelectable: true,
         elevateNodesOnSelect: true,
         elevateEdgesOnSelect: false,
-        fitViewOnInit: false,
-        fitViewDone: false,
-        fitViewOnInitOptions: undefined,
         selectNodesOnDrag: true,
         multiSelectionActive: false,
+        fitViewQueued: fitView ?? false,
+        fitViewOptions: undefined,
+        fitViewResolver: null,
         connection: { ...initialConnection },
         connectionClickStartHandle: null,
         connectOnClick: true,
@@ -3013,274 +3113,256 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
-    setNodes: (nodes) => {
-        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
-        /*
-         * setNodes() is called exclusively in response to user actions:
-         * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
-         * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
-         *
-         * When this happens, we take the note objects passed by the user and extend them with fields
-         * relevant for internal React Flow operations.
-         */
-        adoptUserNodes(nodes, nodeLookup, parentLookup, {
-            nodeOrigin,
-            nodeExtent,
-            elevateNodesOnSelect,
-            checkEquality: true,
-        });
-        set({ nodes });
-    },
-    setEdges: (edges) => {
-        const { connectionLookup, edgeLookup } = get();
-        updateConnectionLookup(connectionLookup, edgeLookup, edges);
-        set({ edges });
-    },
-    setDefaultNodesAndEdges: (nodes, edges) => {
-        if (nodes) {
-            const { setNodes } = get();
-            setNodes(nodes);
-            set({ hasDefaultNodes: true });
-        }
-        if (edges) {
-            const { setEdges } = get();
-            setEdges(edges);
-            set({ hasDefaultEdges: true });
-        }
-    },
-    /*
-     * Every node gets registerd at a ResizeObserver. Whenever a node
-     * changes its dimensions, this function is called to measure the
-     * new dimensions and update the nodes.
-     */
-    updateNodeInternals: (updates, params = { triggerFitView: true }) => {
-        const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, nodeExtent, debug, fitViewSync, } = get();
-        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
-        if (!updatedInternals) {
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
+    async function resolveFitView() {
+        const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
+        if (!panZoom || !fitViewResolver) {
             return;
         }
-        updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
-        if (params.triggerFitView) {
-            // we call fitView once initially after all dimensions are set
-            let nextFitViewDone = fitViewDone;
-            if (!fitViewDone && fitViewOnInit) {
-                nextFitViewDone = fitViewSync({
-                    ...fitViewOnInitOptions,
-                    nodes: fitViewOnInitOptions?.nodes,
-                });
-            }
+        await fitViewport({
+            nodes: nodeLookup,
+            width,
+            height,
+            panZoom,
+            minZoom,
+            maxZoom,
+        }, fitViewOptions);
+        fitViewResolver.resolve(true);
+        /**
+         * wait for the fitViewport to resolve before deleting the resolver,
+         * we want to reuse the old resolver if the user calls fitView again in the mean time
+         */
+        set({ fitViewResolver: null });
+    }
+    return {
+        ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+        setNodes: (nodes) => {
+            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
             /*
-             * here we are cirmumventing the onNodesChange handler
-             * in order to be able to display nodes even if the user
-             * has not provided an onNodesChange handler.
-             * Nodes are only rendered if they have a width and height
-             * attribute which they get from this handler.
+             * setNodes() is called exclusively in response to user actions:
+             * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
+             * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
+             *
+             * When this happens, we take the note objects passed by the user and extend them with fields
+             * relevant for internal React Flow operations.
              */
-            set({ fitViewDone: nextFitViewDone });
-        }
-        else {
-            // we always want to trigger useStore calls whenever updateNodeInternals is called
-            set({});
-        }
-        if (changes?.length > 0) {
-            if (debug) {
-                console.log('React Flow: trigger node changes', changes);
+            const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
+                nodeOrigin,
+                nodeExtent,
+                elevateNodesOnSelect,
+                checkEquality: true,
+            });
+            if (fitViewQueued && nodesInitialized) {
+                resolveFitView();
+                set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
             }
-            triggerNodeChanges?.(changes);
-        }
-    },
-    updateNodePositions: (nodeDragItems, dragging = false) => {
-        const parentExpandChildren = [];
-        const changes = [];
-        for (const [id, dragItem] of nodeDragItems) {
-            const expandParent = !!(dragItem?.expandParent && dragItem?.parentId && dragItem?.position);
-            const change = {
-                id,
-                type: 'position',
-                position: expandParent
-                    ? {
-                        x: Math.max(0, dragItem.position.x),
-                        y: Math.max(0, dragItem.position.y),
-                    }
-                    : dragItem.position,
-                dragging,
-            };
-            if (expandParent) {
-                parentExpandChildren.push({
+            else {
+                set({ nodes });
+            }
+        },
+        setEdges: (edges) => {
+            const { connectionLookup, edgeLookup } = get();
+            updateConnectionLookup(connectionLookup, edgeLookup, edges);
+            set({ edges });
+        },
+        setDefaultNodesAndEdges: (nodes, edges) => {
+            if (nodes) {
+                const { setNodes } = get();
+                setNodes(nodes);
+                set({ hasDefaultNodes: true });
+            }
+            if (edges) {
+                const { setEdges } = get();
+                setEdges(edges);
+                set({ hasDefaultEdges: true });
+            }
+        },
+        /*
+         * Every node gets registerd at a ResizeObserver. Whenever a node
+         * changes its dimensions, this function is called to measure the
+         * new dimensions and update the nodes.
+         */
+        updateNodeInternals: (updates) => {
+            const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } = get();
+            const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
+            if (!updatedInternals) {
+                return;
+            }
+            updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
+            if (fitViewQueued) {
+                resolveFitView();
+                set({ fitViewQueued: false, fitViewOptions: undefined });
+            }
+            else {
+                // we always want to trigger useStore calls whenever updateNodeInternals is called
+                set({});
+            }
+            if (changes?.length > 0) {
+                if (debug) {
+                    console.log('React Flow: trigger node changes', changes);
+                }
+                triggerNodeChanges?.(changes);
+            }
+        },
+        updateNodePositions: (nodeDragItems, dragging = false) => {
+            const parentExpandChildren = [];
+            const changes = [];
+            const { nodeLookup, triggerNodeChanges } = get();
+            for (const [id, dragItem] of nodeDragItems) {
+                // we are using the nodelookup to be sure to use the current expandParent and parentId value
+                const node = nodeLookup.get(id);
+                const expandParent = !!(node?.expandParent && node?.parentId && dragItem?.position);
+                const change = {
                     id,
-                    parentId: dragItem.parentId,
-                    rect: {
-                        ...dragItem.internals.positionAbsolute,
-                        width: dragItem.measured.width,
-                        height: dragItem.measured.height,
-                    },
-                });
+                    type: 'position',
+                    position: expandParent
+                        ? {
+                            x: Math.max(0, dragItem.position.x),
+                            y: Math.max(0, dragItem.position.y),
+                        }
+                        : dragItem.position,
+                    dragging,
+                };
+                if (expandParent && node.parentId) {
+                    parentExpandChildren.push({
+                        id,
+                        parentId: node.parentId,
+                        rect: {
+                            ...dragItem.internals.positionAbsolute,
+                            width: dragItem.measured.width ?? 0,
+                            height: dragItem.measured.height ?? 0,
+                        },
+                    });
+                }
+                changes.push(change);
             }
-            changes.push(change);
-        }
-        if (parentExpandChildren.length > 0) {
-            const { nodeLookup, parentLookup, nodeOrigin } = get();
-            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
-            changes.push(...parentExpandChanges);
-        }
-        get().triggerNodeChanges(changes);
-    },
-    triggerNodeChanges: (changes) => {
-        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
-        if (changes?.length) {
-            if (hasDefaultNodes) {
-                const updatedNodes = applyNodeChanges(changes, nodes);
-                setNodes(updatedNodes);
+            if (parentExpandChildren.length > 0) {
+                const { parentLookup, nodeOrigin } = get();
+                const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
+                changes.push(...parentExpandChanges);
+            }
+            triggerNodeChanges(changes);
+        },
+        triggerNodeChanges: (changes) => {
+            const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
+            if (changes?.length) {
+                if (hasDefaultNodes) {
+                    const updatedNodes = applyNodeChanges(changes, nodes);
+                    setNodes(updatedNodes);
+                }
+                if (debug) {
+                    console.log('React Flow: trigger node changes', changes);
+                }
+                onNodesChange?.(changes);
             }
-            if (debug) {
-                console.log('React Flow: trigger node changes', changes);
+        },
+        triggerEdgeChanges: (changes) => {
+            const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
+            if (changes?.length) {
+                if (hasDefaultEdges) {
+                    const updatedEdges = applyEdgeChanges(changes, edges);
+                    setEdges(updatedEdges);
+                }
+                if (debug) {
+                    console.log('React Flow: trigger edge changes', changes);
+                }
+                onEdgesChange?.(changes);
             }
-            onNodesChange?.(changes);
-        }
-    },
-    triggerEdgeChanges: (changes) => {
-        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
-        if (changes?.length) {
-            if (hasDefaultEdges) {
-                const updatedEdges = applyEdgeChanges(changes, edges);
-                setEdges(updatedEdges);
+        },
+        addSelectedNodes: (selectedNodeIds) => {
+            const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            if (multiSelectionActive) {
+                const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+                triggerNodeChanges(nodeChanges);
+                return;
             }
-            if (debug) {
-                console.log('React Flow: trigger edge changes', changes);
+            triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
+            triggerEdgeChanges(getSelectionChanges(edgeLookup));
+        },
+        addSelectedEdges: (selectedEdgeIds) => {
+            const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            if (multiSelectionActive) {
+                const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+                triggerEdgeChanges(changedEdges);
+                return;
             }
-            onEdgesChange?.(changes);
-        }
-    },
-    addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        if (multiSelectionActive) {
-            const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
+            triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
+        },
+        unselectNodesAndEdges: ({ nodes, edges } = {}) => {
+            const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            const nodesToUnselect = nodes ? nodes : storeNodes;
+            const edgesToUnselect = edges ? edges : storeEdges;
+            const nodeChanges = nodesToUnselect.map((n) => {
+                const internalNode = nodeLookup.get(n.id);
+                if (internalNode) {
+                    /*
+                     * we need to unselect the internal node that was selected previously before we
+                     * send the change to the user to prevent it to be selected while dragging the new node
+                     */
+                    internalNode.selected = false;
+                }
+                return createSelectionChange(n.id, false);
+            });
+            const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
             triggerNodeChanges(nodeChanges);
-            return;
-        }
-        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
-        triggerEdgeChanges(getSelectionChanges(edgeLookup));
-    },
-    addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        if (multiSelectionActive) {
-            const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
-            triggerEdgeChanges(changedEdges);
-            return;
-        }
-        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
-        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
-    },
-    unselectNodesAndEdges: ({ nodes, edges } = {}) => {
-        const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        const nodesToUnselect = nodes ? nodes : storeNodes;
-        const edgesToUnselect = edges ? edges : storeEdges;
-        const nodeChanges = nodesToUnselect.map((n) => {
-            const internalNode = nodeLookup.get(n.id);
-            if (internalNode) {
-                /*
-                 * we need to unselect the internal node that was selected previously before we
-                 * send the change to the user to prevent it to be selected while dragging the new node
-                 */
-                internalNode.selected = false;
+            triggerEdgeChanges(edgeChanges);
+        },
+        setMinZoom: (minZoom) => {
+            const { panZoom, maxZoom } = get();
+            panZoom?.setScaleExtent([minZoom, maxZoom]);
+            set({ minZoom });
+        },
+        setMaxZoom: (maxZoom) => {
+            const { panZoom, minZoom } = get();
+            panZoom?.setScaleExtent([minZoom, maxZoom]);
+            set({ maxZoom });
+        },
+        setTranslateExtent: (translateExtent) => {
+            get().panZoom?.setTranslateExtent(translateExtent);
+            set({ translateExtent });
+        },
+        setPaneClickDistance: (clickDistance) => {
+            get().panZoom?.setClickDistance(clickDistance);
+        },
+        resetSelectedElements: () => {
+            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+            const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
+            const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
+            triggerNodeChanges(nodeChanges);
+            triggerEdgeChanges(edgeChanges);
+        },
+        setNodeExtent: (nextNodeExtent) => {
+            const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
+            if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
+                nextNodeExtent[0][1] === nodeExtent[0][1] &&
+                nextNodeExtent[1][0] === nodeExtent[1][0] &&
+                nextNodeExtent[1][1] === nodeExtent[1][1]) {
+                return;
             }
-            return createSelectionChange(n.id, false);
-        });
-        const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
-        triggerNodeChanges(nodeChanges);
-        triggerEdgeChanges(edgeChanges);
-    },
-    setMinZoom: (minZoom) => {
-        const { panZoom, maxZoom } = get();
-        panZoom?.setScaleExtent([minZoom, maxZoom]);
-        set({ minZoom });
-    },
-    setMaxZoom: (maxZoom) => {
-        const { panZoom, minZoom } = get();
-        panZoom?.setScaleExtent([minZoom, maxZoom]);
-        set({ maxZoom });
-    },
-    setTranslateExtent: (translateExtent) => {
-        get().panZoom?.setTranslateExtent(translateExtent);
-        set({ translateExtent });
-    },
-    setPaneClickDistance: (clickDistance) => {
-        get().panZoom?.setClickDistance(clickDistance);
-    },
-    resetSelectedElements: () => {
-        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
-        const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
-        const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
-        triggerNodeChanges(nodeChanges);
-        triggerEdgeChanges(edgeChanges);
-    },
-    setNodeExtent: (nextNodeExtent) => {
-        const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
-        if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
-            nextNodeExtent[0][1] === nodeExtent[0][1] &&
-            nextNodeExtent[1][0] === nodeExtent[1][0] &&
-            nextNodeExtent[1][1] === nodeExtent[1][1]) {
-            return;
-        }
-        adoptUserNodes(nodes, nodeLookup, parentLookup, {
-            nodeOrigin,
-            nodeExtent: nextNodeExtent,
-            elevateNodesOnSelect,
-            checkEquality: false,
-        });
-        set({ nodeExtent: nextNodeExtent });
-    },
-    panBy: (delta) => {
-        const { transform, width, height, panZoom, translateExtent } = get();
-        return panBy({ delta, panZoom, transform, translateExtent, width, height });
-    },
-    fitView: (options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
-        if (!panZoom) {
-            return Promise.resolve(false);
-        }
-        const fitViewNodes = getFitViewNodes(nodeLookup, options);
-        return fitView({
-            nodes: fitViewNodes,
-            width,
-            height,
-            panZoom,
-            minZoom,
-            maxZoom,
-        }, options);
-    },
-    /*
-     * we can't call an asnychronous function in updateNodeInternals
-     * for that we created this sync version of fitView
-     */
-    fitViewSync: (options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
-        if (!panZoom) {
-            return false;
-        }
-        const fitViewNodes = getFitViewNodes(nodeLookup, options);
-        fitView({
-            nodes: fitViewNodes,
-            width,
-            height,
-            panZoom,
-            minZoom,
-            maxZoom,
-        }, options);
-        return fitViewNodes.size > 0;
-    },
-    cancelConnection: () => {
-        set({
-            connection: { ...initialConnection },
-        });
-    },
-    updateConnection: (connection) => {
-        set({ connection });
-    },
-    reset: () => set({ ...getInitialState() }),
-}), Object.is);
+            adoptUserNodes(nodes, nodeLookup, parentLookup, {
+                nodeOrigin,
+                nodeExtent: nextNodeExtent,
+                elevateNodesOnSelect,
+                checkEquality: false,
+            });
+            set({ nodeExtent: nextNodeExtent });
+        },
+        panBy: (delta) => {
+            const { transform, width, height, panZoom, translateExtent } = get();
+            return panBy({ delta, panZoom, transform, translateExtent, width, height });
+        },
+        cancelConnection: () => {
+            set({
+                connection: { ...initialConnection },
+            });
+        },
+        updateConnection: (connection) => {
+            set({ connection });
+        },
+        reset: () => set({ ...getInitialState() }),
+    };
+}, Object.is);
 
 /**
  * The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
@@ -3387,37 +3469,38 @@ const selector$6 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-rende
  * Edges are SVG-based. If you want to render more complex labels you can use the
  * `<EdgeLabelRenderer />` component to access a div based renderer. This component
  * is a portal that renders the label in a `<div />` that is positioned on top of
- * the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer) example.
+ * the edges. You can see an example usage of the component in the
+ * [edge label renderer example](/examples/edges/edge-label-renderer).
  * @public
  *
  * @example
- *```jsx
- *import React from 'react';
- *import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
+ * ```jsx
+ * import React from 'react';
+ * import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
  *
- *export function CustomEdge({ id, data, ...props }) {
- *  const [edgePath, labelX, labelY] = getBezierPath(props);
+ * export function CustomEdge({ id, data, ...props }) {
+ *   const [edgePath, labelX, labelY] = getBezierPath(props);
  *
- *  return (
- *    <>
- *      <BaseEdge id={id} path={edgePath} />
- *      <EdgeLabelRenderer>
- *        <div
- *          style={{
- *            position: 'absolute',
- *            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
- *            background: '#ffcc00',
- *            padding: 10,
- *        }}
- *          className="nodrag nopan"
- *        >
- *         {data.label}
- *        </div>
- *      </EdgeLabelRenderer>
- *    </>
- *  );
- *};
- *```
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeLabelRenderer>
+ *         <div
+ *           style={{
+ *             position: 'absolute',
+ *             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+ *             background: '#ffcc00',
+ *             padding: 10,
+ *         }}
+ *           className="nodrag nopan"
+ *         >
+ *          {data.label}
+ *         </div>
+ *       </EdgeLabelRenderer>
+ *     </>
+ *   );
+ * };
+ * ```
  *
  * @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
  * add mouse interactions you need to set the style `pointerEvents: all` and add
@@ -3775,7 +3858,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  *
  * @remarks You need to memoize the passed `onChange` handler, otherwise the hook will not work correctly.
  */
-function useOnSelectionChange({ onChange }) {
+function useOnSelectionChange({ onChange, }) {
     const store = useStoreApi();
     useEffect(() => {
         const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
@@ -3888,7 +3971,7 @@ const error014 = errorMessages['error014']();
  *
  *export default function () {
  *  const connections = useNodeConnections({
- *    type: 'target',
+ *    handleType: 'target',
  *    handleId: 'my-handle',
  *  });
  *
@@ -4240,6 +4323,7 @@ var MiniMapNodes$1 = memo(MiniMapNodes);
 
 const defaultWidth = 200;
 const defaultHeight = 150;
+const filterHidden = (node) => !node.hidden;
 const selector$1 = (s) => {
     const viewBB = {
         x: -s.transform[0] / s.transform[2],
@@ -4249,7 +4333,9 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
+        boundingRect: s.nodeLookup.size > 0
+            ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { filter: filterHidden }), viewBB)
+            : viewBB,
         rfId: s.rfId,
         panZoom: s.panZoom,
         translateExtent: s.translateExtent,
@@ -4388,8 +4474,8 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                     const node = nodeLookup.get(id);
                     if (node && node.expandParent && node.parentId) {
                         const origin = node.origin ?? nodeOrigin;
-                        const width = change.width ?? node.measured.width;
-                        const height = change.height ?? node.measured.height;
+                        const width = change.width ?? node.measured.width ?? 0;
+                        const height = change.height ?? node.measured.height ?? 0;
                         const child = {
                             id: node.id,
                             parentId: node.parentId,