@xyflow/react 12.0.0-next.6 → 12.0.0-next.8

package/dist/esm/index.js

@@ -2,8 +2,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, devWarn, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
@@ -424,25 +424,25 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position) => {
-                const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+            screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
+                const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return clientPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
                 const correctedPosition = {
-                    x: position.x - domX,
-                    y: position.y - domY,
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
                 };
-                return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+                return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
-            flowToScreenPosition: (position) => {
+            flowToScreenPosition: (flowPosition) => {
                 const { transform, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return flowPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
-                const rendererPosition = rendererPointToPoint(position, transform);
+                const rendererPosition = rendererPointToPoint(flowPosition, transform);
                 return {
                     x: rendererPosition.x + domX,
                     y: rendererPosition.y + domY,
@@ -458,9 +458,7 @@ function handleParentExpand(updatedElements, updateItem) {
     for (const [index, item] of updatedElements.entries()) {
         if (item.id === updateItem.parentNode) {
             const parent = { ...item };
-            if (!parent.computed) {
-                parent.computed = {};
-            }
+            parent.computed ??= {};
             const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
             const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
             if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
@@ -543,7 +541,7 @@ function applyChanges(changes, elements) {
         /// each _mutate_ this object, so there's only ever one copy.
         const updatedElement = { ...element };
         for (const change of changes) {
-            applyChange(change, updatedElement, elements);
+            applyChange(change, updatedElement, updatedElements);
         }
         updatedElements.push(updatedElement);
     }
@@ -688,7 +686,7 @@ function getElementsDiffChanges({ items = [], lookup, }) {
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-const isNode = (isNodeBase);
+const isNode = (element) => isNodeBase(element);
 /**
  * Test whether an object is useable as an Edge
  * @public
@@ -696,50 +694,7 @@ const isNode = (isNodeBase);
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-const isEdge = (isEdgeBase);
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-const getOutgoers = (getOutgoersBase);
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-const getIncomers = (getIncomersBase);
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-const addEdge = (addEdgeBase);
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-const updateEdge = (updateEdgeBase);
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-const getConnectedEdges = (getConnectedEdgesBase);
+const isEdge = (element) => isEdgeBase(element);
 
 /**
  * Hook for accessing the ReactFlow instance.
@@ -883,6 +838,9 @@ function useReactFlow() {
     const getNodeRect = useCallback((nodeOrRect) => {
         const isRect = isRectObject(nodeOrRect);
         const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
+        if (!isRect && !node) {
+            return [null, null, isRect];
+        }
         const nodeRect = isRect ? nodeOrRect : nodeToRect(node);
         return [nodeRect, node, isRect];
     }, []);
@@ -1304,7 +1262,7 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
                     handleNodeClick({
                         id,
                         store,
-                        nodeRef: nodeRef,
+                        nodeRef,
                     });
                 },
                 onDragStart: () => {
@@ -1346,7 +1304,7 @@ const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggab
 function useUpdateNodePositions() {
     const store = useStoreApi();
     const updatePositions = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
+        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
         const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
         // by default a node moves 5px on each key press, or 20px if shift is pressed
         // if snap grid is enabled, we use that for the velocity.
@@ -1358,17 +1316,21 @@ function useUpdateNodePositions() {
         const nodeUpdates = selectedNodes.map((node) => {
             if (node.computed?.positionAbsolute) {
                 let nextPosition = {
-                    x: node.computed?.positionAbsolute.x + xDiff,
-                    y: node.computed?.positionAbsolute.y + yDiff,
+                    x: node.computed.positionAbsolute.x + xDiff,
+                    y: node.computed.positionAbsolute.y + yDiff,
                 };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
-                const { positionAbsolute, position } = calcNextPosition(node, nextPosition, nodes, nodeExtent, undefined, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: node.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 node.position = position;
-                if (!node.computed) {
-                    node.computed = {};
-                }
                 node.computed.positionAbsolute = positionAbsolute;
             }
             return node;
@@ -1387,9 +1349,9 @@ const useNodeId = () => {
 };
 
 const selector$i = (s) => ({
-    connectionStartHandle: s.connectionStartHandle,
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
+    rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
     const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
@@ -1404,7 +1366,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector$i, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
     const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
@@ -1440,6 +1402,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
                 isTarget,
                 handleId,
                 nodeId,
+                flowId: currentStore.rfId,
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
@@ -1458,7 +1421,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1480,6 +1443,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
             fromHandleId: connectionClickStartHandle.handleId || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
+            flowId,
             doc,
             lib,
         });
@@ -1489,7 +1453,7 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         onClickConnectEnd?.(event);
         store.setState({ connectionClickStartHandle: null });
     };
-    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${nodeId}-${handleId}-${type}`, className: cc([
+    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
             'react-flow__handle',
             `react-flow__handle-${position}`,
             'nodrag',
@@ -1508,6 +1472,9 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
 });
 HandleComponent.displayName = 'Handle';
+/**
+ * The Handle component is the part of a node that can be used to connect nodes.
+ */
 const Handle = memo(HandleComponent);
 
 function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
@@ -1541,7 +1508,7 @@ const builtinNodeTypes = {
 
 const selector$h = (s) => {
     const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
+    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
     return {
         width,
         height,
@@ -1590,14 +1557,16 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             } }) }));
 }
 
-const selector$g = (s) => s.nodesSelectionActive;
+const selector$g = (s) => {
+    return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
+};
 const FlowRendererComponent = ({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) => {
-    const nodesSelectionActive = useStore(selector$g);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
-    const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
+    const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
     useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
     return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
 };
@@ -1922,18 +1891,21 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     }
     return (jsx("marker", { className: "react-flow__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
 };
-const markerSelector = ({ defaultColor, rfId }) => (s) => {
-    const markers = createMarkerIds(s.edges, { id: rfId, defaultColor });
-    return markers;
-};
-const markersEqual = (a, b) => 
-// the id includes all marker options, so we just need to look at that part of the marker
-!(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }) => {
-    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+    const edges = useStore((s) => s.edges);
+    const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+    const markers = useMemo(() => {
+        const markers = createMarkerIds(edges, {
+            id: rfId,
+            defaultColor,
+            defaultMarkerStart: defaultEdgeOptions?.markerStart,
+            defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
+        });
+        return markers;
+    }, [edges, defaultEdgeOptions, rfId, defaultColor]);
     if (!markers.length) {
         return null;
     }
@@ -2137,7 +2109,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2160,6 +2132,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             isTarget,
             edgeUpdaterType: handleType,
             lib,
+            flowId,
             cancelConnection,
             panBy,
             isValidConnection,
@@ -2296,6 +2269,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     animated: edge.animated,
                     inactive: !isSelectable && !onClick,
                     updating: updateHover,
+                    selectable: isSelectable,
                 },
             ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
@@ -2505,7 +2479,8 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
     let transform = [0, 0, 1];
     if (fitView && width && height) {
         const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        // @todo users nodeOrigin should be used here
+        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2562,7 +2537,7 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
         connectionRadius: 20,
-        onError: () => null,
+        onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
@@ -2985,7 +2960,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 function useOnSelectionChange({ onChange }) {
     const store = useStoreApi();
@@ -3003,9 +2978,14 @@ const selector$6 = (options) => (s) => {
     if (s.nodes.length === 0) {
         return false;
     }
-    return s.nodes
-        .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
-        .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+    for (const node of s.nodes) {
+        if (options.includeHiddenNodes || !node.hidden) {
+            if (node[internalsSymbol]?.handleBounds === undefined) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 const defaultOptions = {
     includeHiddenNodes: false,
@@ -3023,7 +3003,7 @@ function useNodesInitialized(options = defaultOptions) {
 }
 
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
@@ -3078,7 +3058,7 @@ const selector$5 = (s) => ({
  * Hook for accessing the ongoing connection.
  *
  * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
+ * @returns ongoing connection
  */
 function useConnection() {
     const ongoingConnection = useStore(selector$5, shallow);
@@ -3251,7 +3231,7 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3487,7 +3467,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     if (!isActive || !nodes.length) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
     const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
     const wrapperStyle = {
         position: 'absolute',
@@ -3498,4 +3478,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };