@xyflow/react 12.0.0-next.24 → 12.0.0-next.26

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodesBounds, getNodeToolbarTransform } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, 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';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
@@ -58,18 +58,18 @@ const ariaLiveStyle = {
 const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
 const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
 const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
-const selector$q = (s) => s.ariaLiveMessage;
+const selector$p = (s) => s.ariaLiveMessage;
 function AriaLiveMessage({ rfId }) {
-    const ariaLiveMessage = useStore(selector$q);
+    const ariaLiveMessage = useStore(selector$p);
     return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
 }
 function A11yDescriptions({ rfId, disableKeyboardA11y }) {
     return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
 }
 
-const selector$p = (s) => (s.userSelectionActive ? 'none' : 'all');
+const selector$o = (s) => (s.userSelectionActive ? 'none' : 'all');
 function Panel({ position = 'top-left', children, className, style, ...rest }) {
-    const pointerEvents = useStore(selector$p);
+    const pointerEvents = useStore(selector$o);
     const positionClasses = `${position}`.split('-');
     return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ...rest, children: children }));
 }
@@ -81,7 +81,7 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     return (jsx(Panel, { position: position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) }));
 }
 
-const selector$o = (s) => {
+const selector$n = (s) => {
     const selectedNodes = [];
     const selectedEdges = [];
     for (const [, node] of s.nodeLookup) {
@@ -103,7 +103,7 @@ function areEqual(a, b) {
 }
 function SelectionListenerInner({ onSelectionChange }) {
     const store = useStoreApi();
-    const { selectedNodes, selectedEdges } = useStore(selector$o, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$n, areEqual);
     useEffect(() => {
         const params = { nodes: selectedNodes, edges: selectedEdges };
         onSelectionChange?.(params);
@@ -183,10 +183,11 @@ const reactFlowFieldsToTrack = [
     'nodeDragThreshold',
     'onBeforeDelete',
     'debug',
+    'autoPanSpeed',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
-const selector$n = (s) => ({
+const selector$m = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
     setMinZoom: s.setMinZoom,
@@ -209,7 +210,7 @@ const initPrevValues = {
     rfId: '1',
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$n, shallow);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$m, shallow);
     const store = useStoreApi();
     useEffect(() => {
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -419,18 +420,18 @@ const useViewportHelper = () => {
                 return { x, y, zoom };
             },
             fitView: (options) => {
-                const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
-                return panZoom
-                    ? fitView({
-                        nodeLookup,
-                        width,
-                        height,
-                        nodeOrigin,
-                        minZoom,
-                        maxZoom,
-                        panZoom,
-                    }, options)
-                    : false;
+                const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
+                if (!panZoom) {
+                    return false;
+                }
+                return fitView({
+                    nodeLookup,
+                    width,
+                    height,
+                    minZoom,
+                    maxZoom,
+                    panZoom,
+                }, options);
             },
             setCenter: (x, y, options) => {
                 const { width, height, maxZoom, panZoom } = store.getState();
@@ -800,7 +801,7 @@ function useBatchContext() {
     return batchContext;
 }
 
-const selector$m = (s) => !!s.panZoom;
+const selector$l = (s) => !!s.panZoom;
 /**
  * Hook for accessing the ReactFlow instance.
  *
@@ -811,7 +812,7 @@ function useReactFlow() {
     const viewportHelper = useViewportHelper();
     const store = useStoreApi();
     const batchContext = useBatchContext();
-    const viewportInitialized = useStore(selector$m);
+    const viewportInitialized = useStore(selector$l);
     const generalHelper = useMemo(() => {
         const getInternalNode = (id) => store.getState().nodeLookup.get(id);
         const setNodes = (payload) => {
@@ -824,7 +825,7 @@ function useReactFlow() {
             const { nodeLookup, nodeOrigin } = store.getState();
             const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
             const position = nodeToUse.parentId
-                ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+                ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
                 : nodeToUse.position;
             const nodeWithPosition = {
                 id: nodeToUse.id,
@@ -1030,14 +1031,14 @@ const containerStyle = {
     left: 0,
 };
 
-const selector$l = (s) => ({
+const selector$k = (s) => ({
     userSelectionActive: s.userSelectionActive,
     lib: s.lib,
 });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$l, shallow);
+    const { userSelectionActive, lib } = useStore(selector$k, shallow);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = useRef();
     useResizeHandler(zoomPane);
@@ -1119,12 +1120,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
 }
 
-const selector$k = (s) => ({
+const selector$j = (s) => ({
     userSelectionActive: s.userSelectionActive,
     userSelectionRect: s.userSelectionRect,
 });
 function UserSelection() {
-    const { userSelectionActive, userSelectionRect } = useStore(selector$k, shallow);
+    const { userSelectionActive, userSelectionRect } = useStore(selector$j, shallow);
     const isActive = userSelectionActive && userSelectionRect;
     if (!isActive) {
         return null;
@@ -1144,7 +1145,7 @@ const wrapHandler = (handler, containerRef) => {
         handler?.(event);
     };
 };
-const selector$j = (s) => ({
+const selector$i = (s) => ({
     userSelectionActive: s.userSelectionActive,
     elementsSelectable: s.elementsSelectable,
     dragging: s.paneDragging,
@@ -1156,7 +1157,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     const prevSelectedEdgesCount = useRef(0);
     const containerBounds = useRef();
     const edgeIdLookup = useRef(new Map());
-    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow);
+    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$i, shallow);
     const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
     // Used to prevent click events when the user lets go of the selectionKey during a selection
     const selectionInProgress = useRef(false);
@@ -1214,7 +1215,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onSelectionStart?.(event);
     };
     const onPointerMove = (event) => {
-        const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
+        const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
         if (!containerBounds.current || !userSelectionRect) {
             return;
         }
@@ -1229,7 +1230,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
             width: Math.abs(mouseX - startX),
             height: Math.abs(mouseY - startY),
         };
-        const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
+        const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true);
         const selectedEdgeIds = new Set();
         const selectedNodeIds = new Set();
         for (const selectedNode of selectedNodes) {
@@ -1403,23 +1404,24 @@ const useNodeId = () => {
     return nodeId;
 };
 
-const selector$i = (s) => ({
+const selector$h = (s) => ({
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
     rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
-    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, connectionStatus, } = state;
-    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
+    const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;
+    const { fromHandle, toHandle, isValid } = connection;
+    const connectingTo = toHandle?.nodeId === nodeId && toHandle?.id === handleId && toHandle?.type === type;
     return {
-        connectingFrom: startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
+        connectingFrom: fromHandle?.nodeId === nodeId && fromHandle?.id === handleId && fromHandle?.type === type,
         connectingTo,
-        clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+        clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.id === handleId && clickHandle?.type === type,
         isPossibleEndHandle: connectionMode === ConnectionMode.Strict
-            ? startHandle?.type !== type
-            : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
-        connectionInProcess: !!startHandle,
-        valid: connectingTo && connectionStatus === 'valid',
+            ? fromHandle?.type !== type
+            : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
+        connectionInProcess: !!fromHandle,
+        valid: connectingTo && isValid,
     };
 };
 function HandleComponent({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) {
@@ -1427,7 +1429,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$h, shallow);
     const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
@@ -1472,7 +1474,8 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                 onConnect: onConnectExtended,
                 isValidConnection: isValidConnection || currentStore.isValidConnection,
                 getTransform: () => store.getState().transform,
-                getConnectionStartHandle: () => store.getState().connectionStartHandle,
+                getFromHandle: () => store.getState().connection.fromHandle,
+                autoPanSpeed: currentStore.autoPanSpeed,
             });
         }
         if (isMouseTriggered) {
@@ -1489,7 +1492,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
         }
         if (!connectionClickStartHandle) {
             onClickConnectStart?.(event.nativeEvent, { nodeId, handleId, handleType: type });
-            store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
+            store.setState({ connectionClickStartHandle: { nodeId, type, id: handleId } });
             return;
         }
         const doc = getHostForElement(event.target);
@@ -1502,7 +1505,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
             },
             connectionMode,
             fromNodeId: connectionClickStartHandle.nodeId,
-            fromHandleId: connectionClickStartHandle.handleId || null,
+            fromHandleId: connectionClickStartHandle.id || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
             flowId,
@@ -1585,9 +1588,8 @@ function getNodeInlineStyleDimensions(node) {
     };
 }
 
-const selector$h = (s) => {
+const selector$g = (s) => {
     const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
-        nodeOrigin: s.nodeOrigin,
         filter: (node) => !!node.selected,
     });
     return {
@@ -1599,7 +1601,7 @@ const selector$h = (s) => {
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }) {
     const store = useStoreApi();
-    const { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow);
+    const { width, height, transformString, userSelectionActive } = useStore(selector$g, shallow);
     const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -1638,11 +1640,11 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
 }
 
 const win = typeof window !== 'undefined' ? window : undefined;
-const selector$g = (s) => {
+const selector$f = (s) => {
     return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
 function 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, userSelectionActive } = useStore(selector$g);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$f);
     const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
@@ -1654,7 +1656,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
 FlowRendererComponent.displayName = 'FlowRenderer';
 const FlowRenderer = memo(FlowRendererComponent);
 
-const selector$f = (onlyRenderVisible) => (s) => {
+const selector$e = (onlyRenderVisible) => (s) => {
     return onlyRenderVisible
         ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
         : Array.from(s.nodeLookup.keys());
@@ -1667,13 +1669,13 @@ const selector$f = (onlyRenderVisible) => (s) => {
  * @returns array with visible node ids
  */
 function useVisibleNodeIds(onlyRenderVisible) {
-    const nodeIds = useStore(useCallback(selector$f(onlyRenderVisible), [onlyRenderVisible]), shallow);
+    const nodeIds = useStore(useCallback(selector$e(onlyRenderVisible), [onlyRenderVisible]), shallow);
     return nodeIds;
 }
 
-const selector$e = (s) => s.updateNodeInternals;
+const selector$d = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeInternals = useStore(selector$e);
+    const updateNodeInternals = useStore(selector$d);
     const [resizeObserver] = useState(() => {
         if (typeof ResizeObserver === 'undefined') {
             return null;
@@ -1750,7 +1752,7 @@ function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver, }) {
     return nodeRef;
 }
 
-function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) {
+function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, onError, }) {
     const { node, internals, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
         const isParent = s.parentLookup.has(id);
@@ -1788,14 +1790,10 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     }
     const nodeDimensions = getNodeDimensions(node);
     const inlineDimensions = getNodeInlineStyleDimensions(node);
+    // TODO: clamping should happen earlier
     const clampedPosition = nodeExtent
         ? clampPosition(internals.positionAbsolute, nodeExtent)
         : internals.positionAbsolute;
-    const positionWithOrigin = getPositionWithOrigin({
-        ...clampedPosition,
-        ...nodeDimensions,
-        origin: node.origin || nodeOrigin,
-    });
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
     const onMouseEnterHandler = onMouseEnter
         ? (event) => onMouseEnter(event, { ...internals.userNode })
@@ -1869,7 +1867,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             },
         ]), ref: nodeRef, style: {
             zIndex: internals.z,
-            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
+            transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
             visibility: hasDimensions ? 'visible' : 'hidden',
             ...node.style,
@@ -1877,7 +1875,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? true, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) }));
 }
 
-const selector$d = (s) => ({
+const selector$c = (s) => ({
     nodesDraggable: s.nodesDraggable,
     nodesConnectable: s.nodesConnectable,
     nodesFocusable: s.nodesFocusable,
@@ -1885,7 +1883,7 @@ const selector$d = (s) => ({
     onError: s.onError,
 });
 function NodeRendererComponent(props) {
-    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$d, shallow);
+    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$c, shallow);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
     return (jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => {
@@ -1913,7 +1911,7 @@ function NodeRendererComponent(props) {
             //   moved into `NodeComponentWrapper`. This ensures they are
             //   memorized – so if `NodeRenderer` *has* to rerender, it only
             //   needs to regenerate the list of nodes, nothing else.
-            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
+            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
         }) }));
 }
 NodeRendererComponent.displayName = 'NodeRenderer';
@@ -2243,7 +2241,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandl
             onReconnectEnd: _onReconnectEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
-            getConnectionStartHandle: () => store.getState().connectionStartHandle,
+            getFromHandle: () => store.getState().connection.fromHandle,
         });
     };
     const onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, true);
@@ -2376,7 +2374,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
             ]), 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: [!reconnecting && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? true, 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 })), isReconnectable && (jsx(EdgeUpdateAnchors, { edge: edge, isReconnectable: isReconnectable, reconnectRadius: reconnectRadius, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setReconnecting: setReconnecting, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
 
-const selector$c = (s) => ({
+const selector$b = (s) => ({
     width: s.width,
     height: s.height,
     edgesFocusable: s.edgesFocusable,
@@ -2386,7 +2384,7 @@ const selector$c = (s) => ({
     onError: s.onError,
 });
 function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y, }) {
-    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$c, shallow);
+    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$b, shallow);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return (jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId: rfId }), edgeIds.map((id) => {
                 return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onReconnect: onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius: reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
@@ -2395,9 +2393,9 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 const EdgeRenderer = memo(EdgeRendererComponent);
 
-const selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const selector$a = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
-    const transform = useStore(selector$b);
+    const transform = useStore(selector$a);
     return (jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform }, children: children }));
 }
 
@@ -2417,7 +2415,7 @@ function useOnInitHandler(onInit) {
     }, [onInit, rfInstance.viewportInitialized]);
 }
 
-const selector$a = (state) => state.panZoom?.syncViewport;
+const selector$9 = (state) => state.panZoom?.syncViewport;
 /**
  * Hook for syncing the viewport with the panzoom instance.
  *
@@ -2425,7 +2423,7 @@ const selector$a = (state) => state.panZoom?.syncViewport;
  * @param viewport
  */
 function useViewportSync(viewport) {
-    const syncViewport = useStore(selector$a);
+    const syncViewport = useStore(selector$9);
     const store = useStoreApi();
     useEffect(() => {
         if (viewport) {
@@ -2436,90 +2434,75 @@ function useViewportSync(viewport) {
     return null;
 }
 
-const oppositePosition = {
-    [Position.Left]: Position.Right,
-    [Position.Right]: Position.Left,
-    [Position.Top]: Position.Bottom,
-    [Position.Bottom]: Position.Top,
+const selector$8 = (s) => {
+    return s.connection.inProgress
+        ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
+        : { ...s.connection };
 };
-const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.Bezier, CustomComponent, connectionStatus, }) => {
-    const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore(useCallback((s) => ({
-        fromNode: s.nodeLookup.get(nodeId),
-        handleId: s.connectionStartHandle?.handleId,
-        toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
-        toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
-        connectionMode: s.connectionMode,
-        endPosition: s.connectionEndHandle?.position,
-        isValid: s.connectionStatus === 'valid',
-    }), [nodeId]), shallow);
-    const fromHandleBounds = fromNode?.internals.handleBounds;
-    let handleBounds = fromHandleBounds?.[handleType];
-    if (connectionMode === ConnectionMode.Loose) {
-        handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
-    }
-    if (!fromNode || !handleBounds) {
+/**
+ * Hook for accessing the connection state.
+ *
+ * @public
+ * @returns ConnectionState
+ */
+function useConnection() {
+    return useStore(selector$8, shallow);
+}
+
+const selector$7 = (s) => ({
+    nodesConnectable: s.nodesConnectable,
+    isValid: s.connection.isValid,
+    inProgress: s.connection.inProgress,
+    width: s.width,
+    height: s.height,
+});
+function ConnectionLineWrapper({ containerStyle, style, type, component }) {
+    const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector$7, shallow);
+    const renderConnection = !!(width && nodesConnectable && inProgress);
+    if (!renderConnection) {
         return null;
     }
-    const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
-    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
-    const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
-    const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
-    const fromPosition = fromHandle?.position;
-    const toPosition = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
-    if (!fromPosition || !toPosition) {
-        return null;
+    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style, type: type, CustomComponent: component, isValid: isValid }) }) }));
+}
+const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
+    const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+    if (!inProgress) {
+        return;
     }
     if (CustomComponent) {
-        return (jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style, fromNode: fromNode, fromHandle: fromHandle, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition, connectionStatus: connectionStatus }));
+        return (jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style, fromNode: fromNode, fromHandle: fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition: fromPosition, toPosition: toPosition, connectionStatus: getConnectionStatus(isValid), toNode: toNode, toHandle: toHandle }));
     }
-    let dAttr = '';
+    let path = '';
     const pathParams = {
-        sourceX: fromX,
-        sourceY: fromY,
+        sourceX: from.x,
+        sourceY: from.y,
         sourcePosition: fromPosition,
-        targetX: toX,
-        targetY: toY,
+        targetX: to.x,
+        targetY: to.y,
         targetPosition: toPosition,
     };
-    if (type === ConnectionLineType.Bezier) {
-        // we assume the destination position is opposite to the source position
-        [dAttr] = getBezierPath(pathParams);
-    }
-    else if (type === ConnectionLineType.Step) {
-        [dAttr] = getSmoothStepPath({
-            ...pathParams,
-            borderRadius: 0,
-        });
-    }
-    else if (type === ConnectionLineType.SmoothStep) {
-        [dAttr] = getSmoothStepPath(pathParams);
-    }
-    else if (type === ConnectionLineType.SimpleBezier) {
-        [dAttr] = getSimpleBezierPath(pathParams);
-    }
-    else {
-        dAttr = `M${fromX},${fromY} ${toX},${toY}`;
+    switch (type) {
+        case ConnectionLineType.Bezier:
+            [path] = getBezierPath(pathParams);
+            break;
+        case ConnectionLineType.SimpleBezier:
+            [path] = getSimpleBezierPath(pathParams);
+            break;
+        case ConnectionLineType.Step:
+            [path] = getSmoothStepPath({
+                ...pathParams,
+                borderRadius: 0,
+            });
+            break;
+        case ConnectionLineType.SmoothStep:
+            [path] = getSmoothStepPath(pathParams);
+            break;
+        default:
+            [path] = getStraightPath(pathParams);
     }
-    return jsx("path", { d: dAttr, fill: "none", className: "react-flow__connection-path", style: style });
+    return jsx("path", { d: path, fill: "none", className: "react-flow__connection-path", style: style });
 };
 ConnectionLine.displayName = 'ConnectionLine';
-const selector$9 = (s) => ({
-    nodeId: s.connectionStartHandle?.nodeId,
-    handleType: s.connectionStartHandle?.type,
-    nodesConnectable: s.nodesConnectable,
-    connectionStatus: s.connectionStatus,
-    width: s.width,
-    height: s.height,
-});
-function ConnectionLineWrapper({ containerStyle, style, type, component }) {
-    const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector$9, shallow);
-    const isValid = !!(nodeId && handleType && width && nodesConnectable);
-    if (!isValid) {
-        return null;
-    }
-    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', connectionStatus]), children: jsx(ConnectionLine, { nodeId: nodeId, handleType: handleType, style: style, type: type, CustomComponent: component, connectionStatus: connectionStatus }) }) }));
-}
 
 const emptyTypes = {};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2556,34 +2539,33 @@ function useStylesLoadedWarning() {
     }, []);
 }
 
-function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) {
+function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }) {
     useNodeOrEdgeTypesWarning(nodeTypes);
     useNodeOrEdgeTypesWarning(edgeTypes);
     useStylesLoadedWarning();
     useOnInitHandler(onInit);
     useViewportSync(viewport);
-    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
+    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
 }
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, } = {}) => {
     const nodeLookup = new Map();
     const parentLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
     const storeEdges = defaultEdges ?? edges ?? [];
     const storeNodes = defaultNodes ?? nodes ?? [];
+    const storeNodeOrigin = nodeOrigin ?? [0, 0];
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
     adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
-        nodeOrigin: [0, 0],
+        nodeOrigin: storeNodeOrigin,
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        // @todo users nodeOrigin should be used here
         const bounds = getInternalNodesBounds(nodeLookup, {
-            nodeOrigin: [0, 0],
             filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
         });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -2612,13 +2594,11 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         nodesSelectionActive: false,
         userSelectionActive: false,
         userSelectionRect: null,
-        connectionPosition: { x: 0, y: 0 },
-        connectionStatus: null,
         connectionMode: ConnectionMode.Strict,
         domNode: null,
         paneDragging: false,
         noPanClassName: 'nopan',
-        nodeOrigin: [0, 0],
+        nodeOrigin: storeNodeOrigin,
         nodeDragThreshold: 1,
         snapGrid: [15, 15],
         snapToGrid: false,
@@ -2635,13 +2615,13 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         fitViewOnInitOptions: undefined,
         selectNodesOnDrag: true,
         multiSelectionActive: false,
-        connectionStartHandle: null,
-        connectionEndHandle: null,
+        connection: { ...initialConnection },
         connectionClickStartHandle: null,
         connectOnClick: true,
         ariaLiveMessage: '',
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
+        autoPanSpeed: 15,
         connectionRadius: 20,
         onError: devWarn,
         isValidConnection: undefined,
@@ -2651,8 +2631,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin, }) => createWithEqualityFn((set, get) => ({
+    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, defaultNodes, defaultEdges }),
     setNodes: (nodes) => {
         const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
@@ -2690,7 +2670,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
         if (!updatedInternals) {
             return;
         }
-        updateAbsolutePositions(nodeLookup, { nodeOrigin });
+        updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });
         // we call fitView once initially after all dimensions are set
         let nextFitViewDone = fitViewDone;
         if (!fitViewDone && fitViewOnInit) {
@@ -2739,8 +2719,8 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             changes.push(change);
         }
         if (parentExpandChildren.length > 0) {
-            const { nodeLookup, parentLookup } = get();
-            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
+            const { nodeLookup, parentLookup, nodeOrigin } = get();
+            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
             changes.push(...parentExpandChanges);
         }
         get().triggerNodeChanges(changes);
@@ -2845,7 +2825,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
         return panBy({ delta, panZoom, transform, translateExtent, width, height });
     },
     fitView: (options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
+        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
         if (!panZoom) {
             return false;
         }
@@ -2856,26 +2836,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             panZoom,
             minZoom,
             maxZoom,
-            nodeOrigin,
         }, options);
     },
-    cancelConnection: () => set({
-        connectionStatus: null,
-        connectionStartHandle: null,
-        connectionEndHandle: null,
-    }),
-    updateConnection: (params) => {
-        const { connectionPosition } = get();
-        const currentConnection = {
-            ...params,
-            connectionPosition: params.connectionPosition ?? connectionPosition,
-        };
-        set(currentConnection);
+    cancelConnection: () => {
+        set({
+            connection: { ...initialConnection },
+        });
+    },
+    updateConnection: (connection) => {
+        set({ connection });
     },
     reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, children, }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, children, }) {
     const [store] = useState(() => createStore({
         nodes,
         edges,
@@ -2884,18 +2858,19 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         width,
         height,
         fitView,
+        nodeOrigin,
     }));
     return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 
-function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, children: children }));
 }
 
 const wrapperStyle = {
@@ -2905,25 +2880,25 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
-    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 var index = fixedForwardRef(ReactFlow);
 
-const selector$8 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
+const selector$6 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 function EdgeLabelRenderer({ children }) {
-    const edgeLabelRenderer = useStore(selector$8);
+    const edgeLabelRenderer = useStore(selector$6);
     if (!edgeLabelRenderer) {
         return null;
     }
     return createPortal(children, edgeLabelRenderer);
 }
 
-const selector$7 = (s) => s.domNode?.querySelector('.react-flow__viewport-portal');
+const selector$5 = (s) => s.domNode?.querySelector('.react-flow__viewport-portal');
 function ViewportPortal({ children }) {
-    const viewPortalDiv = useStore(selector$7);
+    const viewPortalDiv = useStore(selector$5);
     if (!viewPortalDiv) {
         return null;
     }
@@ -3056,7 +3031,7 @@ function useOnSelectionChange({ onChange }) {
     }, [onChange]);
 }
 
-const selector$6 = (options) => (s) => {
+const selector$4 = (options) => (s) => {
     if (s.nodeLookup.size === 0) {
         return false;
     }
@@ -3080,7 +3055,7 @@ const defaultOptions = {
  * @returns boolean indicating whether all nodes are initialized
  */
 function useNodesInitialized(options = defaultOptions) {
-    const initialized = useStore(selector$6(options));
+    const initialized = useStore(selector$4(options));
     return initialized;
 }
 
@@ -3133,23 +3108,6 @@ function useNodesData(nodeIds) {
     return nodesData;
 }
 
-const selector$5 = (s) => ({
-    startHandle: s.connectionStartHandle,
-    endHandle: s.connectionEndHandle,
-    status: s.connectionStatus,
-    position: s.connectionStartHandle ? s.connectionPosition : null,
-});
-/**
- * Hook for accessing the ongoing connection.
- *
- * @public
- * @returns ongoing connection
- */
-function useConnection() {
-    const ongoingConnection = useStore(selector$5, shallow);
-    return ongoingConnection;
-}
-
 /**
  * Hook for getting an internal node by id
  *
@@ -3181,14 +3139,14 @@ const defaultSize = {
     [BackgroundVariant.Lines]: 1,
     [BackgroundVariant.Cross]: 6,
 };
-const selector$4 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
+const selector$3 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 function BackgroundComponent({ id, variant = BackgroundVariant.Dots, 
 // only used for dots and cross
 gap = 20, 
 // only used for lines and cross
 size, lineWidth = 1, offset = 2, color, bgColor, style, className, patternClassName, }) {
     const ref = useRef(null);
-    const { transform, patternId } = useStore(selector$4, shallow);
+    const { transform, patternId } = useStore(selector$3, shallow);
     const patternSize = size || defaultSize[variant];
     const isDots = variant === BackgroundVariant.Dots;
     const isCross = variant === BackgroundVariant.Cross;
@@ -3234,14 +3192,14 @@ function ControlButton({ children, className, ...rest }) {
     return (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
 }
 
-const selector$3 = (s) => ({
+const selector$2 = (s) => ({
     isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
 function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', orientation = 'vertical', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
-    const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
+    const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$2, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
     const onZoomInHandler = () => {
         zoomIn();
@@ -3280,7 +3238,6 @@ function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeCol
 }
 const MiniMapNode = memo(MiniMapNodeComponent);
 
-const selector$2 = (s) => s.nodeOrigin;
 const selectorNodeIds = (s) => s.nodes.map((node) => node.id);
 const getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
@@ -3288,7 +3245,6 @@ function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBord
 // a component properly.
 nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
     const nodeIds = useStore(selectorNodeIds, shallow);
-    const nodeOrigin = useStore(selector$2);
     const nodeColorFunc = getAttrFunction(nodeColor);
     const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
     const nodeClassNameFunc = getAttrFunction(nodeClassName);
@@ -3299,12 +3255,12 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
         // minimize the cost of updates when individual nodes change.
         //
         // For more details, see a similar commit in `NodeRenderer/index.tsx`.
-        jsx(NodeComponentWrapper, { id: nodeId, nodeOrigin: nodeOrigin, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
+        jsx(NodeComponentWrapper, { id: nodeId, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
 }
-function NodeComponentWrapperInner({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
+function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+        const { x, y } = node.internals.positionAbsolute;
         return {
             node,
             x,
@@ -3331,11 +3287,8 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodeLookup.size > 0
-            ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
-            : viewBB,
+        boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
         rfId: s.rfId,
-        nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
         translateExtent: s.translateExtent,
         flowWidth: s.width,
@@ -3449,23 +3402,27 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                     const nextPosition = { x: change.x, y: change.y };
                     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 child = {
                             id: node.id,
                             parentId: node.parentId,
                             rect: {
-                                width: change.width ?? node.measured.width,
-                                height: change.height ?? node.measured.height,
+                                width,
+                                height,
                                 ...evaluateAbsolutePosition({
                                     x: change.x ?? node.position.x,
                                     y: change.y ?? node.position.y,
-                                }, node.parentId, nodeLookup, node.origin ?? nodeOrigin),
+                                }, { width, height }, node.parentId, nodeLookup, origin),
                             },
                         };
                         const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
                         changes.push(...parentExpandChanges);
-                        // when the parent was expanded by the child node, its position will be clamped at 0,0
-                        nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
-                        nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
+                        // when the parent was expanded by the child node, its position will be clamped at
+                        // 0,0 when node origin is 0,0 and to width, height if it's 1,1
+                        nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
+                        nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
                     }
                     if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
                         const positionChange = {
@@ -3566,48 +3523,54 @@ const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internal
     a?.selected !== b?.selected ||
     a?.internals.z !== b?.internals.z;
 const nodesEqualityFn = (a, b) => {
-    if (a.length !== b.length) {
+    if (a.size !== b.size) {
         return false;
     }
-    return !a.some((node, i) => nodeEqualityFn(node, b[i]));
+    for (const [key, node] of a) {
+        if (nodeEqualityFn(node, b.get(key))) {
+            return false;
+        }
+    }
+    return true;
 };
 const storeSelector = (state) => ({
-    viewport: {
-        x: state.transform[0],
-        y: state.transform[1],
-        zoom: state.transform[2],
-    },
-    nodeOrigin: state.nodeOrigin,
+    x: state.transform[0],
+    y: state.transform[1],
+    zoom: state.transform[2],
     selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });
 function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = 'center', ...rest }) {
     const contextNodeId = useNodeId();
     const nodesSelector = useCallback((state) => {
         const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
-        return nodeIds.reduce((acc, id) => {
+        const internalNodes = nodeIds.reduce((res, id) => {
             const node = state.nodeLookup.get(id);
             if (node) {
-                acc.push(node);
+                res.set(node.id, node);
             }
-            return acc;
-        }, []);
+            return res;
+        }, new Map());
+        return internalNodes;
     }, [nodeId, contextNodeId]);
     const nodes = useStore(nodesSelector, nodesEqualityFn);
-    const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+    const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow);
     // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
-    const isActive = typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
-    if (!isActive || !nodes.length) {
+    const isActive = typeof isVisible === 'boolean'
+        ? isVisible
+        : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;
+    if (!isActive || !nodes.size) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
-    const zIndex = Math.max(...nodes.map((node) => node.internals.z + 1));
+    const nodeRect = getInternalNodesBounds(nodes);
+    const nodesArray = Array.from(nodes.values());
+    const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
     const wrapperStyle = {
         position: 'absolute',
-        transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
+        transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
         zIndex,
         ...style,
     };
-    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 }) }));
+    return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
 export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };