@xyflow/react 12.0.4 → 12.1.1

package/dist/base.css

@@ -73,15 +73,15 @@
 .react-flow__pane {
   z-index: 1;
 }
-.react-flow__pane.selection {
-    cursor: pointer;
-  }
 .react-flow__pane.draggable {
     cursor: grab;
   }
-.react-flow__pane.draggable.dragging {
-      cursor: grabbing;
-    }
+.react-flow__pane.dragging {
+    cursor: grabbing;
+  }
+.react-flow__pane.selection {
+    cursor: pointer;
+  }
 .react-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
@@ -107,10 +107,10 @@
   stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
   fill: none;
 }
-.react-flow__edges {
+.react-flow .react-flow__edges {
   position: absolute;
 }
-.react-flow__edges svg {
+.react-flow .react-flow__edges svg {
     overflow: visible;
     position: absolute;
     pointer-events: none;

package/dist/esm/additional-components/Background/Background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/Background.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,KAAK,eAAe,EAAqB,MAAM,SAAS,CAAC;AAWlE,iBAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAgC,EAEhC,GAAQ,EAER,IAAI,EACJ,SAAa,EACb,MAAU,EACV,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,gBAAgB,GACjB,EAAE,eAAe,2CAuDjB;kBArEQ,mBAAmB;;;AAyE5B,eAAO,MAAM,UAAU,iEAA4B,CAAC"}
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/Background.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,KAAK,eAAe,EAAqB,MAAM,SAAS,CAAC;AAWlE,iBAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAgC,EAEhC,GAAQ,EAER,IAAI,EACJ,SAAa,EACb,MAAU,EACV,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,gBAAgB,GACjB,EAAE,eAAe,2CAqDjB;kBAnEQ,mBAAmB;;;AAuE5B,eAAO,MAAM,UAAU,iEAA4B,CAAC"}

package/dist/esm/additional-components/Background/types.d.ts

@@ -19,7 +19,7 @@ export type BackgroundProps = {
     /** Size of a single pattern element */
     size?: number;
     /** Offset of the pattern */
-    offset?: number;
+    offset?: number | [number, number];
     /** Line width of the Line pattern */
     lineWidth?: number;
     /** Variant of the pattern

package/dist/esm/additional-components/Background/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC"}

package/dist/esm/components/EdgeWrapper/EdgeUpdateAnchors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeUpdateAnchors.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGhE,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC;IACvD,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACjE,cAAc,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,GAAG,YAAY,CAAC;AAEjB,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC9D,eAAe,EACf,eAAe,EACf,IAAI,EACJ,cAAc,EACd,cAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,cAAc,GACf,EAAE,sBAAsB,CAAC,QAAQ,CAAC,2CAoGlC"}
+{"version":3,"file":"EdgeUpdateAnchors.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,EAAwB,MAAM,gBAAgB,CAAC;AAG/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGhE,KAAK,sBAAsB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC;IACvD,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACjE,cAAc,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,GAAG,YAAY,CAAC;AAEjB,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC9D,eAAe,EACf,eAAe,EACf,IAAI,EACJ,cAAc,EACd,cAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,cAAc,GACf,EAAE,sBAAsB,CAAC,QAAQ,CAAC,2CAoGlC"}

package/dist/esm/components/Handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,KAAK,WAAW,IAAI,iBAAiB,EAIrC,SAAS,EACV,MAAM,gBAAgB,CAAC;AAOxB,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC;IAChG,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAkND;;GAEG;AACH,eAAO,MAAM,MAAM,0HAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,KAAK,WAAW,IAAI,iBAAiB,EAIrC,SAAS,EAGV,MAAM,gBAAgB,CAAC;AAOxB,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC;IAChG,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAwND;;GAEG;AACH,eAAO,MAAM,MAAM,0HAAyC,CAAC"}

package/dist/esm/container/Pane/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAoBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAuMX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAoBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAyMX"}

package/dist/esm/hooks/useConnection.d.ts

@@ -6,5 +6,5 @@ import type { InternalNode, Node } from '../types';
  * @public
  * @returns ConnectionState
  */
-export declare function useConnection<NodeType extends Node = Node>(): ConnectionState<InternalNode<NodeType>>;
+export declare function useConnection<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn): SelectorReturn;
 //# sourceMappingURL=useConnection.d.ts.map

package/dist/esm/hooks/useConnection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAOnE;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAErG"}
+{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAqBnE;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAClH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,cAAc,GAC3F,cAAc,CAGhB"}

package/dist/esm/index.d.ts

@@ -31,6 +31,8 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { isNode, isEdge } from './utils/general';
 export * from './additional-components';
 export * from './types';
-export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, } from '@xyflow/system';
+export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, type ConnectionState, type FinalConnectionState, type ConnectionInProgress, type NoConnection, } from '@xyflow/system';
+import { type Handle as HandleBound } from '@xyflow/system';
+export type Handle = HandleBound;
 export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, getIncomers, getOutgoers, addEdge, reconnectEdge, getConnectedEdges, } from '@xyflow/system';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -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$p = (s) => s.ariaLiveMessage;
+const selector$o = (s) => s.ariaLiveMessage;
 function AriaLiveMessage({ rfId }) {
-    const ariaLiveMessage = useStore(selector$p);
+    const ariaLiveMessage = useStore(selector$o);
     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$o = (s) => (s.userSelectionActive ? 'none' : 'all');
+const selector$n = (s) => (s.userSelectionActive ? 'none' : 'all');
 function Panel({ position = 'top-left', children, className, style, ...rest }) {
-    const pointerEvents = useStore(selector$o);
+    const pointerEvents = useStore(selector$n);
     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$n = (s) => {
+const selector$m = (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$n, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);
     useEffect(() => {
         const params = { nodes: selectedNodes, edges: selectedEdges };
         onSelectionChange?.(params);
@@ -188,7 +188,7 @@ const reactFlowFieldsToTrack = [
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
-const selector$m = (s) => ({
+const selector$l = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
     setMinZoom: s.setMinZoom,
@@ -213,7 +213,7 @@ const initPrevValues = {
     paneClickDistance: 0,
 };
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance, } = useStore(selector$m, shallow);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance, } = useStore(selector$l, shallow);
     const store = useStoreApi();
     useEffect(() => {
         setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
@@ -827,7 +827,7 @@ function useBatchContext() {
     return batchContext;
 }
 
-const selector$l = (s) => !!s.panZoom;
+const selector$k = (s) => !!s.panZoom;
 /**
  * Hook for accessing the ReactFlow instance.
  *
@@ -838,7 +838,7 @@ function useReactFlow() {
     const viewportHelper = useViewportHelper();
     const store = useStoreApi();
     const batchContext = useBatchContext();
-    const viewportInitialized = useStore(selector$l);
+    const viewportInitialized = useStore(selector$k);
     const generalHelper = useMemo(() => {
         const getInternalNode = (id) => store.getState().nodeLookup.get(id);
         const setNodes = (payload) => {
@@ -1057,14 +1057,14 @@ const containerStyle = {
     left: 0,
 };
 
-const selector$k = (s) => ({
+const selector$j = (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, paneClickDistance, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$k, shallow);
+    const { userSelectionActive, lib } = useStore(selector$j, shallow);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = useRef();
     useResizeHandler(zoomPane);
@@ -1147,12 +1147,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
 }
 
-const selector$j = (s) => ({
+const selector$i = (s) => ({
     userSelectionActive: s.userSelectionActive,
     userSelectionRect: s.userSelectionRect,
 });
 function UserSelection() {
-    const { userSelectionActive, userSelectionRect } = useStore(selector$j, shallow);
+    const { userSelectionActive, userSelectionRect } = useStore(selector$i, shallow);
     const isActive = userSelectionActive && userSelectionRect;
     if (!isActive) {
         return null;
@@ -1172,7 +1172,7 @@ const wrapHandler = (handler, containerRef) => {
         handler?.(event);
     };
 };
-const selector$i = (s) => ({
+const selector$h = (s) => ({
     userSelectionActive: s.userSelectionActive,
     elementsSelectable: s.elementsSelectable,
     dragging: s.paneDragging,
@@ -1184,7 +1184,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$i, shallow);
+    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$h, 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);
@@ -1311,7 +1311,8 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         }
         selectionStarted.current = false;
     };
-    return (jsxs("div", { className: cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
+    const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
+    return (jsxs("div", { className: cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : undefined, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
 }
 
 // this handler is called by
@@ -1438,7 +1439,7 @@ const useNodeId = () => {
     return nodeId;
 };
 
-const selector$h = (s) => ({
+const selector$g = (s) => ({
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
     rfId: s.rfId,
@@ -1463,7 +1464,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$h, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$g, shallow);
     const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
@@ -1520,7 +1521,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, nodeLookup, connection: connectionState, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1545,11 +1546,15 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
             flowId,
             doc,
             lib,
+            nodeLookup,
         });
         if (isValid && connection) {
             onConnectExtended(connection);
         }
-        onClickConnectEnd?.(event);
+        const connectionClone = structuredClone(connectionState);
+        delete connectionClone.inProgress;
+        connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null;
+        onClickConnectEnd?.(event, connectionClone);
         store.setState({ connectionClickStartHandle: null });
     };
     return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
@@ -1622,7 +1627,7 @@ function getNodeInlineStyleDimensions(node) {
     };
 }
 
-const selector$g = (s) => {
+const selector$f = (s) => {
     const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
         filter: (node) => !!node.selected,
     });
@@ -1635,7 +1640,7 @@ const selector$g = (s) => {
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }) {
     const store = useStoreApi();
-    const { width, height, transformString, userSelectionActive } = useStore(selector$g, shallow);
+    const { width, height, transformString, userSelectionActive } = useStore(selector$f, shallow);
     const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -1674,11 +1679,11 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
 }
 
 const win = typeof window !== 'undefined' ? window : undefined;
-const selector$f = (s) => {
+const selector$e = (s) => {
     return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
 function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, 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$f);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$e);
     const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
@@ -1691,7 +1696,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
 FlowRendererComponent.displayName = 'FlowRenderer';
 const FlowRenderer = memo(FlowRendererComponent);
 
-const selector$e = (onlyRenderVisible) => (s) => {
+const selector$d = (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());
@@ -1704,13 +1709,13 @@ const selector$e = (onlyRenderVisible) => (s) => {
  * @returns array with visible node ids
  */
 function useVisibleNodeIds(onlyRenderVisible) {
-    const nodeIds = useStore(useCallback(selector$e(onlyRenderVisible), [onlyRenderVisible]), shallow);
+    const nodeIds = useStore(useCallback(selector$d(onlyRenderVisible), [onlyRenderVisible]), shallow);
     return nodeIds;
 }
 
-const selector$d = (s) => s.updateNodeInternals;
+const selector$c = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-    const updateNodeInternals = useStore(selector$d);
+    const updateNodeInternals = useStore(selector$c);
     const [resizeObserver] = useState(() => {
         if (typeof ResizeObserver === 'undefined') {
             return null;
@@ -1911,7 +1916,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$c = (s) => ({
+const selector$b = (s) => ({
     nodesDraggable: s.nodesDraggable,
     nodesConnectable: s.nodesConnectable,
     nodesFocusable: s.nodesFocusable,
@@ -1919,7 +1924,7 @@ const selector$c = (s) => ({
     onError: s.onError,
 });
 function NodeRendererComponent(props) {
-    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$c, shallow);
+    const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$b, shallow);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
     return (jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => {
@@ -2251,9 +2256,9 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandl
         const isTarget = isSourceHandle;
         setReconnecting(true);
         onReconnectStart?.(event, edge, handleType);
-        const _onReconnectEnd = (evt) => {
+        const _onReconnectEnd = (evt, connectionState) => {
             setReconnecting(false);
-            onReconnectEnd?.(evt, edge, handleType);
+            onReconnectEnd?.(evt, edge, handleType, connectionState);
         };
         const onConnectEdge = (connection) => onReconnect?.(edge, connection);
         XYHandle.onPointerDown(event.nativeEvent, {
@@ -2410,7 +2415,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$b = (s) => ({
+const selector$a = (s) => ({
     width: s.width,
     height: s.height,
     edgesFocusable: s.edgesFocusable,
@@ -2420,7 +2425,7 @@ const selector$b = (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$b, shallow);
+    const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$a, 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));
@@ -2429,9 +2434,9 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
 EdgeRendererComponent.displayName = 'EdgeRenderer';
 const EdgeRenderer = memo(EdgeRendererComponent);
 
-const selector$a = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const selector$9 = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
-    const transform = useStore(selector$a);
+    const transform = useStore(selector$9);
     return (jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform }, children: children }));
 }
 
@@ -2451,7 +2456,7 @@ function useOnInitHandler(onInit) {
     }, [onInit, rfInstance.viewportInitialized]);
 }
 
-const selector$9 = (state) => state.panZoom?.syncViewport;
+const selector$8 = (state) => state.panZoom?.syncViewport;
 /**
  * Hook for syncing the viewport with the panzoom instance.
  *
@@ -2459,7 +2464,7 @@ const selector$9 = (state) => state.panZoom?.syncViewport;
  * @param viewport
  */
 function useViewportSync(viewport) {
-    const syncViewport = useStore(selector$9);
+    const syncViewport = useStore(selector$8);
     const store = useStoreApi();
     useEffect(() => {
         if (viewport) {
@@ -2470,19 +2475,30 @@ function useViewportSync(viewport) {
     return null;
 }
 
-const selector$8 = (s) => {
+function storeSelector$1(s) {
     return s.connection.inProgress
         ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
         : { ...s.connection };
-};
+}
+function getSelector(connectionSelector) {
+    if (connectionSelector) {
+        const combinedSelector = (s) => {
+            const connection = storeSelector$1(s);
+            return connectionSelector(connection);
+        };
+        return combinedSelector;
+    }
+    return storeSelector$1;
+}
 /**
  * Hook for accessing the connection state.
  *
  * @public
  * @returns ConnectionState
  */
-function useConnection() {
-    return useStore(selector$8, shallow);
+function useConnection(connectionSelector) {
+    const combinedSelector = getSelector(connectionSelector);
+    return useStore(combinedSelector, shallow);
 }
 
 const selector$7 = (s) => ({
@@ -2700,27 +2716,33 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
     // Every node gets registerd at a ResizeObserver. Whenever a node
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
-    updateNodeInternals: (updates) => {
+    updateNodeInternals: (updates, params = { triggerFitView: true }) => {
         const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, fitViewSync, } = get();
         const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
         if (!updatedInternals) {
             return;
         }
         updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });
-        // we call fitView once initially after all dimensions are set
-        let nextFitViewDone = fitViewDone;
-        if (!fitViewDone && fitViewOnInit) {
-            nextFitViewDone = fitViewSync({
-                ...fitViewOnInitOptions,
-                nodes: fitViewOnInitOptions?.nodes,
-            });
+        if (params.triggerFitView) {
+            // we call fitView once initially after all dimensions are set
+            let nextFitViewDone = fitViewDone;
+            if (!fitViewDone && fitViewOnInit) {
+                nextFitViewDone = fitViewSync({
+                    ...fitViewOnInitOptions,
+                    nodes: fitViewOnInitOptions?.nodes,
+                });
+            }
+            // here we are cirmumventing the onNodesChange handler
+            // in order to be able to display nodes even if the user
+            // has not provided an onNodesChange handler.
+            // Nodes are only rendered if they have a width and height
+            // attribute which they get from this handler.
+            set({ fitViewDone: nextFitViewDone });
+        }
+        else {
+            // we always want to trigger useStore calls whenever updateNodeInternals is called
+            set({});
         }
-        // here we are cirmumventing the onNodesChange handler
-        // in order to be able to display nodes even if the user
-        // has not provided an onNodesChange handler.
-        // Nodes are only rendered if they have a width and height
-        // attribute which they get from this handler.
-        set({ fitViewDone: nextFitViewDone });
         if (changes?.length > 0) {
             if (debug) {
                 console.log('React Flow: trigger node changes', changes);
@@ -2980,7 +3002,7 @@ function useUpdateNodeInternals() {
                 updates.set(updateId, { id: updateId, nodeElement, force: true });
             }
         });
-        requestAnimationFrame(() => updateNodeInternals(updates));
+        requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));
     }, []);
 }
 
@@ -3201,7 +3223,7 @@ 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, }) {
+size, lineWidth = 1, offset = 0, color, bgColor, style, className, patternClassName, }) {
     const ref = useRef(null);
     const { transform, patternId } = useStore(selector$3, shallow);
     const patternSize = size || defaultSize[variant];
@@ -3210,17 +3232,16 @@ size, lineWidth = 1, offset = 2, color, bgColor, style, className, patternClassN
     const gapXY = Array.isArray(gap) ? gap : [gap, gap];
     const scaledGap = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
     const scaledSize = patternSize * transform[2];
+    const offsetXY = Array.isArray(offset) ? offset : [offset, offset];
+    const scaledOffset = [offsetXY[0] * transform[2] || 1, offsetXY[1] * transform[2] || 1];
     const patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
-    const patternOffset = isDots
-        ? [scaledSize / offset, scaledSize / offset]
-        : [patternDimensions[0] / offset, patternDimensions[1] / offset];
     const _patternId = `${patternId}${id ? id : ''}`;
     return (jsxs("svg", { className: cc(['react-flow__background', className]), style: {
             ...style,
             ...containerStyle,
             '--xy-background-color-props': bgColor,
             '--xy-background-pattern-color-props': color,
-        }, ref: ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? (jsx(DotPattern, { radius: scaledSize / offset, className: patternClassName })) : (jsx(LinePattern, { dimensions: patternDimensions, lineWidth: lineWidth, variant: variant, className: patternClassName })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] }));
+        }, ref: ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${scaledOffset[0]},-${scaledOffset[1]})`, children: isDots ? (jsx(DotPattern, { radius: scaledSize / 2, className: patternClassName })) : (jsx(LinePattern, { dimensions: patternDimensions, lineWidth: lineWidth, variant: variant, className: patternClassName })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] }));
 }
 BackgroundComponent.displayName = 'Background';
 const Background = memo(BackgroundComponent);