From a72798e065e63d600596c1cb237f1ad3eaea4af0 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Thu, 15 Jan 2026 11:48:35 +0100
Subject: [PATCH 01/19] find solution and remove log

---
 packages/react/src/container/Pane/index.tsx | 42 ++++++++++++++++++++-
 packages/system/src/xypanzoom/XYPanZoom.ts  |  5 ++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 32a0e6df37..90863f4637 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -9,13 +9,14 @@ import {
 } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getNodesInside, getEventPosition, SelectionMode, areSetsEqual } from '@xyflow/system';
+import { getNodesInside, getEventPosition, SelectionMode, areSetsEqual, calcAutoPan, XYPosition } from '@xyflow/system';
 
 import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils';
 import type { ReactFlowProps, ReactFlowState } from '../../types';
+import { useReactFlow } from '../../hooks/useReactFlow';
 
 type PaneProps = {
   isSelecting: boolean;
@@ -56,6 +57,8 @@ const selector = (s: ReactFlowState) => ({
   elementsSelectable: s.elementsSelectable,
   connectionInProgress: s.connection.inProgress,
   dragging: s.paneDragging,
+  panBy: s.panBy,
+  autoPanSpeed: s.autoPanSpeed,
 });
 
 export function Pane({
@@ -75,8 +78,12 @@ export function Pane({
   onPaneMouseLeave,
   children,
 }: PaneProps) {
+  let autoPanId = useRef<number>(0);
   const store = useStoreApi();
-  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector, shallow);
+  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy, autoPanSpeed } = useStore(
+    selector,
+    shallow
+  );
   const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
 
   const container = useRef<HTMLDivElement | null>(null);
@@ -87,6 +94,14 @@ export function Pane({
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
 
+  // Used for auto pan when approaching the edges of the container
+  // TODO pass as prop
+  const autoPanOnConnect = true;
+  const position = useRef<XYPosition>({ x: 0, y: 0 });
+  const autoPanStarted = useRef<boolean>(false);
+
+  const { setViewport, getViewport } = useReactFlow();
+
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
     // We also prevent click events when a connection is in progress
@@ -157,6 +172,19 @@ export function Pane({
     }
   };
 
+  function autoPan(): void {
+    if (!autoPanOnConnect || !containerBounds.current) {
+      return;
+    }
+    console.log('autoPan');
+    const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
+
+    console.log('x', x, 'y', y);
+    panBy({ x, y });
+
+    autoPanId.current = requestAnimationFrame(autoPan);
+  }
+
   const onPointerMove = (event: ReactPointerEvent): void => {
     const {
       userSelectionRect,
@@ -175,6 +203,7 @@ export function Pane({
     }
 
     const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+    position.current = { x: mouseX, y: mouseY };
     const { startX, startY } = userSelectionRect;
 
     if (!selectionInProgress.current) {
@@ -198,6 +227,11 @@ export function Pane({
       height: Math.abs(mouseY - startY),
     };
 
+    if (!autoPanStarted.current) {
+      autoPan();
+      autoPanStarted.current = true;
+    }
+
     const prevSelectedNodeIds = selectedNodeIds.current;
     const prevSelectedEdgeIds = selectedEdgeIds.current;
 
@@ -266,6 +300,10 @@ export function Pane({
         nodesSelectionActive: selectedNodeIds.current.size > 0,
       });
     }
+
+    cancelAnimationFrame(autoPanId.current);
+    autoPanId.current = 0;
+    autoPanStarted.current = false;
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index ee1a763e5a..3ff408a279 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -108,7 +108,7 @@ export function XYPanZoom({
     paneClickDistance,
     selectionOnDrag,
   }: PanZoomUpdateOptions) {
-    if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
+    if (!zoomPanValues.isZoomingOrPanning) {
       destroy();
     }
 
@@ -139,7 +139,8 @@ export function XYPanZoom({
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
-    if (!userSelectionActive) {
+    // Used to be !userSelectionActive
+    if (true) {
       // pan zoom start
       const startHandler = createPanZoomStartHandler({
         zoomPanValues,

From 6535e5c02001c30c6eef21f751d83e63db94b104 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Thu, 22 Jan 2026 17:39:06 +0100
Subject: [PATCH 02/19] Add prop for autopan on selection

---
 examples/react/src/examples/Basic/index.tsx         |  1 +
 packages/react/src/container/FlowRenderer/index.tsx |  2 ++
 packages/react/src/container/GraphView/index.tsx    |  2 ++
 packages/react/src/container/Pane/index.tsx         | 10 ++++------
 packages/react/src/container/ReactFlow/index.tsx    |  2 ++
 packages/react/src/types/component-props.ts         |  6 ++++++
 packages/system/src/xypanzoom/XYPanZoom.ts          |  2 +-
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index a24c908c89..7553c98f7d 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -162,6 +162,7 @@ const BasicFlow = () => {
         selectNodesOnDrag={false}
         elevateEdgesOnSelect
         elevateNodesOnSelect={false}
+        panOnSelection={true}
         nodeDragThreshold={0}
       >
         <Background variant={BackgroundVariant.Dots} />
diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index 2198ce5eb2..d7145c2f59 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -61,6 +61,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag: _panOnDrag,
+  panOnSelection,
   defaultViewport,
   translateExtent,
   minZoom,
@@ -118,6 +119,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         onPaneContextMenu={onPaneContextMenu}
         onPaneScroll={onPaneScroll}
         panOnDrag={panOnDrag}
+        panOnSelection={panOnSelection}
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index fd0296f170..b94acc1c31 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -80,6 +80,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag,
+  panOnSelection,
   onPaneClick,
   onPaneMouseEnter,
   onPaneMouseMove,
@@ -138,6 +139,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
+      panOnSelection={panOnSelection}
       defaultViewport={defaultViewport}
       translateExtent={translateExtent}
       minZoom={minZoom}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 90863f4637..b45eaaba40 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -28,6 +28,7 @@ type PaneProps = {
     ReactFlowProps,
     | 'selectionMode'
     | 'panOnDrag'
+    | 'panOnSelection'
     | 'onSelectionStart'
     | 'onSelectionEnd'
     | 'onPaneClick'
@@ -66,6 +67,7 @@ export function Pane({
   selectionKeyPressed,
   selectionMode = SelectionMode.Full,
   panOnDrag,
+  panOnSelection,
   paneClickDistance,
   selectionOnDrag,
   onSelectionStart,
@@ -94,9 +96,7 @@ export function Pane({
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
 
-  // Used for auto pan when approaching the edges of the container
-  // TODO pass as prop
-  const autoPanOnConnect = true;
+  // Used for auto pan when approaching the edges of the container during selection
   const position = useRef<XYPosition>({ x: 0, y: 0 });
   const autoPanStarted = useRef<boolean>(false);
 
@@ -173,13 +173,11 @@ export function Pane({
   };
 
   function autoPan(): void {
-    if (!autoPanOnConnect || !containerBounds.current) {
+    if (!panOnSelection || !containerBounds.current) {
       return;
     }
-    console.log('autoPan');
     const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
 
-    console.log('x', x, 'y', y);
     panBy({ x, y });
 
     autoPanId.current = requestAnimationFrame(autoPan);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index b04f295589..7bcb5a4d0e 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -132,6 +132,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
+    panOnSelection,
     autoPanSpeed,
     connectionRadius,
     isValidConnection,
@@ -224,6 +225,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           panOnScrollSpeed={panOnScrollSpeed}
           panOnScrollMode={panOnScrollMode}
           panOnDrag={panOnDrag}
+          panOnSelection={panOnSelection}
           onPaneClick={onPaneClick}
           onPaneMouseEnter={onPaneMouseEnter}
           onPaneMouseMove={onPaneMouseMove}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index effc7ca66c..86cb6ff867 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -634,6 +634,12 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default true
    */
   autoPanOnConnect?: boolean;
+  /**
+   * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+   * viewport while creating a selection box.
+   * @default true
+   */
+  panOnSelection?: boolean;
   /**
    * The speed at which the viewport pans while dragging a node or a selection box.
    * @default 15
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index 3ff408a279..826c611eb6 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -108,7 +108,7 @@ export function XYPanZoom({
     paneClickDistance,
     selectionOnDrag,
   }: PanZoomUpdateOptions) {
-    if (!zoomPanValues.isZoomingOrPanning) {
+    if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
       destroy();
     }
 

From 7249321ca8a3e5fcd3be09ac7e2a80f589cc78cc Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 26 Jan 2026 13:37:54 +0100
Subject: [PATCH 03/19] rename prop

---
 examples/react/src/examples/Basic/index.tsx         | 2 +-
 packages/react/src/container/FlowRenderer/index.tsx | 4 ++--
 packages/react/src/container/GraphView/index.tsx    | 4 ++--
 packages/react/src/container/Pane/index.tsx         | 6 +++---
 packages/react/src/container/ReactFlow/index.tsx    | 4 ++--
 packages/react/src/types/component-props.ts         | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index 7553c98f7d..9c18c31319 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -162,7 +162,7 @@ const BasicFlow = () => {
         selectNodesOnDrag={false}
         elevateEdgesOnSelect
         elevateNodesOnSelect={false}
-        panOnSelection={true}
+        autopanOnSelection={true}
         nodeDragThreshold={0}
       >
         <Background variant={BackgroundVariant.Dots} />
diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index d7145c2f59..17dbc01498 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -61,7 +61,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag: _panOnDrag,
-  panOnSelection,
+  autopanOnSelection,
   defaultViewport,
   translateExtent,
   minZoom,
@@ -119,7 +119,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         onPaneContextMenu={onPaneContextMenu}
         onPaneScroll={onPaneScroll}
         panOnDrag={panOnDrag}
-        panOnSelection={panOnSelection}
+        autopanOnSelection={autopanOnSelection}
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index b94acc1c31..9cf777ef72 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -80,7 +80,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag,
-  panOnSelection,
+  autopanOnSelection,
   onPaneClick,
   onPaneMouseEnter,
   onPaneMouseMove,
@@ -139,7 +139,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
-      panOnSelection={panOnSelection}
+      autopanOnSelection={autopanOnSelection}
       defaultViewport={defaultViewport}
       translateExtent={translateExtent}
       minZoom={minZoom}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index b45eaaba40..54b128e3d3 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -28,7 +28,7 @@ type PaneProps = {
     ReactFlowProps,
     | 'selectionMode'
     | 'panOnDrag'
-    | 'panOnSelection'
+    | 'autopanOnSelection'
     | 'onSelectionStart'
     | 'onSelectionEnd'
     | 'onPaneClick'
@@ -67,7 +67,7 @@ export function Pane({
   selectionKeyPressed,
   selectionMode = SelectionMode.Full,
   panOnDrag,
-  panOnSelection,
+  autopanOnSelection,
   paneClickDistance,
   selectionOnDrag,
   onSelectionStart,
@@ -173,7 +173,7 @@ export function Pane({
   };
 
   function autoPan(): void {
-    if (!panOnSelection || !containerBounds.current) {
+    if (!autopanOnSelection || !containerBounds.current) {
       return;
     }
     const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 7bcb5a4d0e..ade667b3be 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -132,7 +132,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
-    panOnSelection,
+    autopanOnSelection,
     autoPanSpeed,
     connectionRadius,
     isValidConnection,
@@ -225,7 +225,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           panOnScrollSpeed={panOnScrollSpeed}
           panOnScrollMode={panOnScrollMode}
           panOnDrag={panOnDrag}
-          panOnSelection={panOnSelection}
+          autopanOnSelection={autopanOnSelection}
           onPaneClick={onPaneClick}
           onPaneMouseEnter={onPaneMouseEnter}
           onPaneMouseMove={onPaneMouseMove}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 86cb6ff867..742f40c3d8 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -639,7 +639,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * viewport while creating a selection box.
    * @default true
    */
-  panOnSelection?: boolean;
+  autopanOnSelection?: boolean;
   /**
    * The speed at which the viewport pans while dragging a node or a selection box.
    * @default 15

From 5edd31a6320a12c82f9b24813f02b4d21de14dc4 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 26 Jan 2026 16:22:21 +0100
Subject: [PATCH 04/19] svelte implementation

---
 .../svelte/src/lib/container/Pane/Pane.svelte | 30 ++++++++++++++++++-
 .../svelte/src/lib/container/Pane/types.ts    |  1 +
 .../container/SvelteFlow/SvelteFlow.svelte    |  2 ++
 .../src/lib/container/SvelteFlow/types.ts     |  6 ++++
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index b7de8cfac6..be4048ec57 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
-  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+  import { SelectionMode, getEventPosition, getNodesInside, calcAutoPan, type XYPosition } from '@xyflow/system';
 
   import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
@@ -49,6 +49,7 @@
     panOnDrag = true,
     paneClickDistance = 1,
     selectionOnDrag,
+    autopanOnSelection = true,
     onpaneclick,
     onpanecontextmenu,
     onselectionstart,
@@ -78,6 +79,11 @@
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
 
+  // Used for auto pan when approaching the edges of the container during selection
+  let autoPanId: number = 0;
+  let position: XYPosition = { x: 0, y: 0 };
+  let autoPanStarted = false;
+
   // We start the selection process when the user clicks down on the pane
   function onPointerDownCapture(event: PointerEvent) {
     containerBounds = container?.getBoundingClientRect();
@@ -104,6 +110,7 @@
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
     selectionInProgress = false;
+    autoPanStarted = false;
 
     const { x, y } = getEventPosition(event, containerBounds);
 
@@ -122,12 +129,24 @@
     }
   }
 
+  function autoPan(): void {
+    if (!autopanOnSelection || !containerBounds) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
+
+    store.panBy({ x, y });
+
+    autoPanId = requestAnimationFrame(autoPan);
+  }
+
   function onPointerMove(event: PointerEvent) {
     if (!isSelecting || !containerBounds || !store.selectionRect) {
       return;
     }
 
     const mousePos = getEventPosition(event, containerBounds);
+    position = { x: mousePos.x, y: mousePos.y };
     const { startX = 0, startY = 0 } = store.selectionRect;
 
     if (!selectionInProgress) {
@@ -142,6 +161,11 @@
 
     selectionInProgress = true;
 
+    if (!autoPanStarted) {
+      autoPan();
+      autoPanStarted = true;
+    }
+
     const nextUserSelectRect = {
       ...store.selectionRect,
       x: mousePos.x < startX ? mousePos.x : startX,
@@ -214,6 +238,10 @@
     if (selectionInProgress) {
       onselectionend?.(event);
     }
+
+    cancelAnimationFrame(autoPanId);
+    autoPanId = 0;
+    autoPanStarted = false;
   }
 
   const onContextMenu = (event: MouseEvent) => {
diff --git a/packages/svelte/src/lib/container/Pane/types.ts b/packages/svelte/src/lib/container/Pane/types.ts
index f0cef4df0d..1be956656b 100644
--- a/packages/svelte/src/lib/container/Pane/types.ts
+++ b/packages/svelte/src/lib/container/Pane/types.ts
@@ -7,6 +7,7 @@ export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge
   panOnDrag?: boolean | number[];
   paneClickDistance: number;
   selectionOnDrag?: boolean;
+  autopanOnSelection?: boolean;
   onselectionstart?: (event: PointerEvent) => void;
   onselectionend?: (event: PointerEvent) => void;
   children: Snippet;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index a2283be7ef..4849700f2f 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -62,6 +62,7 @@
     panOnScrollSpeed = 0.5,
     panOnDrag = true,
     selectionOnDrag = false,
+    autopanOnSelection = true,
     connectionLineComponent,
     connectionLineStyle,
     connectionLineContainerStyle,
@@ -171,6 +172,7 @@
       {panOnDrag}
       {paneClickDistance}
       {selectionOnDrag}
+      {autopanOnSelection}
     >
       <ViewportComponent bind:store>
         <div class="svelte-flow__viewport-back svelte-flow__container"></div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 8e5c6c8c52..52c1c581bb 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -353,6 +353,12 @@ export type SvelteFlowProps<
      * @default true
      */
     autoPanOnNodeDrag?: boolean;
+    /**
+     * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+     * viewport while creating a selection box.
+     * @default true
+     */
+    autopanOnSelection?: boolean;
     /**
      * Defaults to be applied to all new edges that are added to the flow.
      * Properties on a new edge will override these defaults if they exist.

From 49b929f77a336f8213675077835cc842c4390e14 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Wed, 28 Jan 2026 11:00:55 +0100
Subject: [PATCH 05/19] pass typecheck

---
 packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index b931477440..f055004775 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -97,6 +97,7 @@
     autoPanSpeed,
     panOnScrollSpeed,
     zIndexMode,
+    autopanOnSelection,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */

From 41f61574afd535e55ab9de45e0e62f6268f69926 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Thu, 29 Jan 2026 14:11:43 +0100
Subject: [PATCH 06/19] fix a couple of issues

---
 packages/react/src/container/Pane/index.tsx |  4 +-
 packages/system/src/xypanzoom/XYPanZoom.ts  | 86 ++++++++++-----------
 2 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 54b128e3d3..71b3614efb 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -80,7 +80,7 @@ export function Pane({
   onPaneMouseLeave,
   children,
 }: PaneProps) {
-  let autoPanId = useRef<number>(0);
+  const autoPanId = useRef<number>(0);
   const store = useStoreApi();
   const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy, autoPanSpeed } = useStore(
     selector,
@@ -100,8 +100,6 @@ export function Pane({
   const position = useRef<XYPosition>({ x: 0, y: 0 });
   const autoPanStarted = useRef<boolean>(false);
 
-  const { setViewport, getViewport } = useReactFlow();
-
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
     // We also prevent click events when a connection is in progress
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index 826c611eb6..38f6437e49 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -120,56 +120,56 @@ export function XYPanZoom({
 
     const wheelHandler = isPanOnScroll
       ? createPanOnScrollHandler({
-          zoomPanValues,
-          noWheelClassName,
-          d3Selection,
-          d3Zoom: d3ZoomInstance,
-          panOnScrollMode,
-          panOnScrollSpeed,
-          zoomOnPinch,
-          onPanZoomStart,
-          onPanZoom,
-          onPanZoomEnd,
-        })
+        zoomPanValues,
+        noWheelClassName,
+        d3Selection,
+        d3Zoom: d3ZoomInstance,
+        panOnScrollMode,
+        panOnScrollSpeed,
+        zoomOnPinch,
+        onPanZoomStart,
+        onPanZoom,
+        onPanZoomEnd,
+      })
       : createZoomOnScrollHandler({
-          noWheelClassName,
-          preventScrolling,
-          d3ZoomHandler,
-        });
+        noWheelClassName,
+        preventScrolling,
+        d3ZoomHandler,
+      });
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
     // Used to be !userSelectionActive
-    if (true) {
-      // pan zoom start
-      const startHandler = createPanZoomStartHandler({
-        zoomPanValues,
-        onDraggingChange,
-        onPanZoomStart,
-      });
-      d3ZoomInstance.on('start', startHandler);
+    // if (!userSelectionActive) {
+    // pan zoom start
+    const startHandler = createPanZoomStartHandler({
+      zoomPanValues,
+      onDraggingChange,
+      onPanZoomStart,
+    });
+    d3ZoomInstance.on('start', startHandler);
 
-      // pan zoom
-      const panZoomHandler = createPanZoomHandler({
-        zoomPanValues,
-        panOnDrag,
-        onPaneContextMenu: !!onPaneContextMenu,
-        onPanZoom,
-        onTransformChange,
-      });
-      d3ZoomInstance.on('zoom', panZoomHandler);
+    // pan zoom
+    const panZoomHandler = createPanZoomHandler({
+      zoomPanValues,
+      panOnDrag,
+      onPaneContextMenu: !!onPaneContextMenu,
+      onPanZoom,
+      onTransformChange,
+    });
+    d3ZoomInstance.on('zoom', panZoomHandler);
 
-      // pan zoom end
-      const panZoomEndHandler = createPanZoomEndHandler({
-        zoomPanValues,
-        panOnDrag,
-        panOnScroll,
-        onPaneContextMenu,
-        onPanZoomEnd,
-        onDraggingChange,
-      });
-      d3ZoomInstance.on('end', panZoomEndHandler);
-    }
+    // pan zoom end
+    const panZoomEndHandler = createPanZoomEndHandler({
+      zoomPanValues,
+      panOnDrag,
+      panOnScroll,
+      onPaneContextMenu,
+      onPanZoomEnd,
+      onDraggingChange,
+    });
+    d3ZoomInstance.on('end', panZoomEndHandler);
+    // }
 
     const filter = createFilter({
       zoomActivationKeyPressed,

From 7848d919a3ac77a942941930bdc5096eb313ae84 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 10 Mar 2026 13:42:50 +0100
Subject: [PATCH 07/19] remove comment

---
 packages/system/src/xypanzoom/XYPanZoom.ts | 33 ++++++++++------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index 38f6437e49..368f2918d7 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -120,27 +120,25 @@ export function XYPanZoom({
 
     const wheelHandler = isPanOnScroll
       ? createPanOnScrollHandler({
-        zoomPanValues,
-        noWheelClassName,
-        d3Selection,
-        d3Zoom: d3ZoomInstance,
-        panOnScrollMode,
-        panOnScrollSpeed,
-        zoomOnPinch,
-        onPanZoomStart,
-        onPanZoom,
-        onPanZoomEnd,
-      })
+          zoomPanValues,
+          noWheelClassName,
+          d3Selection,
+          d3Zoom: d3ZoomInstance,
+          panOnScrollMode,
+          panOnScrollSpeed,
+          zoomOnPinch,
+          onPanZoomStart,
+          onPanZoom,
+          onPanZoomEnd,
+        })
       : createZoomOnScrollHandler({
-        noWheelClassName,
-        preventScrolling,
-        d3ZoomHandler,
-      });
+          noWheelClassName,
+          preventScrolling,
+          d3ZoomHandler,
+        });
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
-    // Used to be !userSelectionActive
-    // if (!userSelectionActive) {
     // pan zoom start
     const startHandler = createPanZoomStartHandler({
       zoomPanValues,
@@ -169,7 +167,6 @@ export function XYPanZoom({
       onDraggingChange,
     });
     d3ZoomInstance.on('end', panZoomEndHandler);
-    // }
 
     const filter = createFilter({
       zoomActivationKeyPressed,

From 641520b33973b571601eda0b5cab8d3e3f6c8b54 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 31 Mar 2026 13:48:47 +0200
Subject: [PATCH 08/19] fix start of selection rectangle on flow and not on
 screen, and fix prop name

---
 .../src/routes/examples/overview/Flow.svelte  |   1 +
 packages/react/src/container/Pane/index.tsx   | 124 ++++++++++-------
 .../svelte/src/lib/container/Pane/Pane.svelte | 126 ++++++++++++------
 .../svelte/src/lib/container/Pane/types.ts    |   2 +-
 .../container/SvelteFlow/SvelteFlow.svelte    |   4 +-
 .../lib/container/SvelteFlow/Wrapper.svelte   |   2 +-
 .../src/lib/container/SvelteFlow/types.ts     |   2 +-
 7 files changed, 170 insertions(+), 91 deletions(-)

diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index e83548fdd3..129cb90481 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/examples/svelte/src/routes/examples/overview/Flow.svelte
@@ -216,6 +216,7 @@
 	snapGrid={[25, 25]}
 	autoPanOnConnect
 	autoPanOnNodeDrag
+	autoPanOnSelection={true}
 	connectionMode={ConnectionMode.Strict}
 	attributionPosition={'top-center'}
 	deleteKey={['Backspace', 'd']}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 71b3614efb..016293f73d 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -9,14 +9,22 @@ import {
 } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getNodesInside, getEventPosition, SelectionMode, areSetsEqual, calcAutoPan, XYPosition } from '@xyflow/system';
+import {
+  getNodesInside,
+  getEventPosition,
+  SelectionMode,
+  areSetsEqual,
+  calcAutoPan,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  XYPosition,
+} from '@xyflow/system';
 
 import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils';
 import type { ReactFlowProps, ReactFlowState } from '../../types';
-import { useReactFlow } from '../../hooks/useReactFlow';
 
 type PaneProps = {
   isSelecting: boolean;
@@ -96,6 +104,9 @@ export function Pane({
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
 
+  // In auto-panning, selection start position must stay fixed in flow space, not pane pixels
+  const userSelectionFlowOrigin = useRef<XYPosition | null>(null);
+
   // Used for auto pan when approaching the edges of the container during selection
   const position = useRef<XYPosition>({ x: 0, y: 0 });
   const autoPanStarted = useRef<boolean>(false);
@@ -152,6 +163,8 @@ export function Pane({
     selectionInProgress.current = false;
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
+    const { transform } = store.getState();
+    userSelectionFlowOrigin.current = pointToRendererPoint({ x, y }, transform);
 
     store.setState({
       userSelectionRect: {
@@ -170,20 +183,14 @@ export function Pane({
     }
   };
 
-  function autoPan(): void {
-    if (!autopanOnSelection || !containerBounds.current) {
+  // We commit the user selection rectangle to the store on auto-panning or pointer move during selection.
+  function commitUserSelectionRect(mouseX: number, mouseY: number): void {
+    const flowOrigin = userSelectionFlowOrigin.current;
+    if (!flowOrigin) {
       return;
     }
-    const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
-
-    panBy({ x, y });
-
-    autoPanId.current = requestAnimationFrame(autoPan);
-  }
 
-  const onPointerMove = (event: ReactPointerEvent): void => {
     const {
-      userSelectionRect,
       transform,
       nodeLookup,
       edgeLookup,
@@ -191,43 +198,21 @@ export function Pane({
       triggerNodeChanges,
       triggerEdgeChanges,
       defaultEdgeOptions,
-      resetSelectedElements,
     } = store.getState();
 
-    if (!containerBounds.current || !userSelectionRect) {
-      return;
-    }
-
-    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
-    position.current = { x: mouseX, y: mouseY };
-    const { startX, startY } = userSelectionRect;
-
-    if (!selectionInProgress.current) {
-      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
-      const distance = Math.hypot(mouseX - startX, mouseY - startY);
-      if (distance <= requiredDistance) {
-        return;
-      }
-      resetSelectedElements();
-      onSelectionStart?.(event);
-    }
-
-    selectionInProgress.current = true;
-
+    const screenStart = rendererPointToPoint(flowOrigin, transform);
+    // This has to be in screen cordinates, not in flow coordinates.
+    // We store the selection rectangle in userSelectionFlowOrigin coordinates to be able to
+    // fix the start position of the selection rectangle when we are auto-panning.
     const nextUserSelectRect = {
-      startX,
-      startY,
-      x: mouseX < startX ? mouseX : startX,
-      y: mouseY < startY ? mouseY : startY,
-      width: Math.abs(mouseX - startX),
-      height: Math.abs(mouseY - startY),
+      startX: screenStart.x,
+      startY: screenStart.y,
+      x: mouseX < screenStart.x ? mouseX : screenStart.x,
+      y: mouseY < screenStart.y ? mouseY : screenStart.y,
+      width: Math.abs(mouseX - screenStart.x),
+      height: Math.abs(mouseY - screenStart.y),
     };
 
-    if (!autoPanStarted.current) {
-      autoPan();
-      autoPanStarted.current = true;
-    }
-
     const prevSelectedNodeIds = selectedNodeIds.current;
     const prevSelectedEdgeIds = selectedEdgeIds.current;
 
@@ -240,7 +225,6 @@ export function Pane({
     selectedEdgeIds.current = new Set();
     const edgesSelectable = defaultEdgeOptions?.selectable ?? true;
 
-    // We look for all edges connected to the selected nodes
     for (const nodeId of selectedNodeIds.current) {
       const connections = connectionLookup.get(nodeId);
       if (!connections) continue;
@@ -267,6 +251,55 @@ export function Pane({
       userSelectionActive: true,
       nodesSelectionActive: false,
     });
+  }
+
+  function autoPan(): void {
+    if (!autopanOnSelection || !containerBounds.current) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
+
+    void panBy({ x, y }).then(() => {
+      if (!selectionInProgress.current || !userSelectionFlowOrigin.current) {
+        return;
+      }
+      const { x: mx, y: my } = position.current;
+      commitUserSelectionRect(mx, my);
+    });
+
+    autoPanId.current = requestAnimationFrame(autoPan);
+  }
+
+  const onPointerMove = (event: ReactPointerEvent): void => {
+    const { userSelectionRect, transform, resetSelectedElements } = store.getState();
+
+    if (!containerBounds.current || !userSelectionRect || !userSelectionFlowOrigin.current) {
+      return;
+    }
+
+    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+    position.current = { x: mouseX, y: mouseY };
+
+    const screenStart = rendererPointToPoint(userSelectionFlowOrigin.current, transform);
+
+    if (!selectionInProgress.current) {
+      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
+      const distance = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
+      if (distance <= requiredDistance) {
+        return;
+      }
+      resetSelectedElements();
+      onSelectionStart?.(event);
+    }
+
+    selectionInProgress.current = true;
+
+    if (!autoPanStarted.current) {
+      autoPan();
+      autoPanStarted.current = true;
+    }
+
+    commitUserSelectionRect(mouseX, mouseY);
   };
 
   const onPointerUp = (event: ReactPointerEvent) => {
@@ -300,6 +333,7 @@ export function Pane({
     cancelAnimationFrame(autoPanId.current);
     autoPanId.current = 0;
     autoPanStarted.current = false;
+    userSelectionFlowOrigin.current = null;
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index be4048ec57..7255894f31 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -39,7 +39,15 @@
 </script>
 
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
-  import { SelectionMode, getEventPosition, getNodesInside, calcAutoPan, type XYPosition } from '@xyflow/system';
+  import {
+    SelectionMode,
+    getEventPosition,
+    getNodesInside,
+    calcAutoPan,
+    pointToRendererPoint,
+    rendererPointToPoint,
+    type XYPosition
+  } from '@xyflow/system';
 
   import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
@@ -49,7 +57,7 @@
     panOnDrag = true,
     paneClickDistance = 1,
     selectionOnDrag,
-    autopanOnSelection = true,
+    autoPanOnSelection = true,
     onpaneclick,
     onpanecontextmenu,
     onselectionstart,
@@ -79,6 +87,9 @@
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
 
+  // Position of the selection start in the flow so that it stays fixed on the canvas while auto-panning
+  let userSelectionFlowOrigin: XYPosition | null = null;
+
   // Used for auto pan when approaching the edges of the container during selection
   let autoPanId: number = 0;
   let position: XYPosition = { x: 0, y: 0 };
@@ -114,6 +125,13 @@
 
     const { x, y } = getEventPosition(event, containerBounds);
 
+    // We convert the position to the flow space so that it stays fixed on the canvas while auto-panning
+    userSelectionFlowOrigin = pointToRendererPoint({ x, y }, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
+
     store.selectionRect = {
       width: 0,
       height: 0,
@@ -129,49 +147,24 @@
     }
   }
 
-  function autoPan(): void {
-    if (!autopanOnSelection || !containerBounds) {
+  // We commit the user selection rectangle to the store on auto-panning or pointer move
+  function commitUserSelectionRect(mouseX: number, mouseY: number): void {
+    if (!userSelectionFlowOrigin) {
       return;
     }
-    const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
-
-    store.panBy({ x, y });
-
-    autoPanId = requestAnimationFrame(autoPan);
-  }
-
-  function onPointerMove(event: PointerEvent) {
-    if (!isSelecting || !containerBounds || !store.selectionRect) {
-      return;
-    }
-
-    const mousePos = getEventPosition(event, containerBounds);
-    position = { x: mousePos.x, y: mousePos.y };
-    const { startX = 0, startY = 0 } = store.selectionRect;
-
-    if (!selectionInProgress) {
-      const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance;
-      const distance = Math.hypot(mousePos.x - startX, mousePos.y - startY);
-      if (distance <= requiredDistance) {
-        return;
-      }
-      store.unselectNodesAndEdges();
-      onselectionstart?.(event);
-    }
-
-    selectionInProgress = true;
-
-    if (!autoPanStarted) {
-      autoPan();
-      autoPanStarted = true;
-    }
 
+    const screenStart = rendererPointToPoint(userSelectionFlowOrigin, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
     const nextUserSelectRect = {
-      ...store.selectionRect,
-      x: mousePos.x < startX ? mousePos.x : startX,
-      y: mousePos.y < startY ? mousePos.y : startY,
-      width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY)
+      startX: screenStart.x,
+      startY: screenStart.y,
+      x: mouseX < screenStart.x ? mouseX : screenStart.x,
+      y: mouseY < screenStart.y ? mouseY : screenStart.y,
+      width: Math.abs(mouseX - screenStart.x),
+      height: Math.abs(mouseY - screenStart.y)
     };
 
     const prevSelectedNodeIds = selectedNodeIds;
@@ -215,6 +208,56 @@
     store.selectionRect = nextUserSelectRect;
   }
 
+  function autoPan(): void {
+    if (!autoPanOnSelection || !containerBounds) {
+      return;
+    }
+    const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
+
+    void store.panBy({ x, y }).then(() => {
+      if (!selectionInProgress || !userSelectionFlowOrigin) {
+        return;
+      }
+      commitUserSelectionRect(position.x, position.y);
+    });
+
+    autoPanId = requestAnimationFrame(autoPan);
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (!isSelecting || !containerBounds || !store.selectionRect || !userSelectionFlowOrigin) {
+      return;
+    }
+
+    const mousePos = getEventPosition(event, containerBounds);
+    position = { x: mousePos.x, y: mousePos.y };
+
+    const screenStart = rendererPointToPoint(userSelectionFlowOrigin, [
+      store.viewport.x,
+      store.viewport.y,
+      store.viewport.zoom
+    ]);
+
+    if (!selectionInProgress) {
+      const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance;
+      const distance = Math.hypot(mousePos.x - screenStart.x, mousePos.y - screenStart.y);
+      if (distance <= requiredDistance) {
+        return;
+      }
+      store.unselectNodesAndEdges();
+      onselectionstart?.(event);
+    }
+
+    selectionInProgress = true;
+
+    if (!autoPanStarted) {
+      autoPan();
+      autoPanStarted = true;
+    }
+
+    commitUserSelectionRect(mousePos.x, mousePos.y);
+  }
+
   function onPointerUp(event: PointerEvent) {
     if (event.button !== 0) {
       return;
@@ -242,6 +285,7 @@
     cancelAnimationFrame(autoPanId);
     autoPanId = 0;
     autoPanStarted = false;
+    userSelectionFlowOrigin = null;
   }
 
   const onContextMenu = (event: MouseEvent) => {
diff --git a/packages/svelte/src/lib/container/Pane/types.ts b/packages/svelte/src/lib/container/Pane/types.ts
index 1be956656b..6207eedb68 100644
--- a/packages/svelte/src/lib/container/Pane/types.ts
+++ b/packages/svelte/src/lib/container/Pane/types.ts
@@ -7,7 +7,7 @@ export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge
   panOnDrag?: boolean | number[];
   paneClickDistance: number;
   selectionOnDrag?: boolean;
-  autopanOnSelection?: boolean;
+  autoPanOnSelection?: boolean;
   onselectionstart?: (event: PointerEvent) => void;
   onselectionend?: (event: PointerEvent) => void;
   children: Snippet;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 4849700f2f..11e4c7cdef 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -62,7 +62,7 @@
     panOnScrollSpeed = 0.5,
     panOnDrag = true,
     selectionOnDrag = false,
-    autopanOnSelection = true,
+    autoPanOnSelection = false,
     connectionLineComponent,
     connectionLineStyle,
     connectionLineContainerStyle,
@@ -172,7 +172,7 @@
       {panOnDrag}
       {paneClickDistance}
       {selectionOnDrag}
-      {autopanOnSelection}
+      {autoPanOnSelection}
     >
       <ViewportComponent bind:store>
         <div class="svelte-flow__viewport-back svelte-flow__container"></div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index f055004775..5630753e20 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -97,7 +97,7 @@
     autoPanSpeed,
     panOnScrollSpeed,
     zIndexMode,
-    autopanOnSelection,
+    autoPanOnSelection,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 52c1c581bb..ba22fddd66 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -358,7 +358,7 @@ export type SvelteFlowProps<
      * viewport while creating a selection box.
      * @default true
      */
-    autopanOnSelection?: boolean;
+    autoPanOnSelection?: boolean;
     /**
      * Defaults to be applied to all new edges that are added to the flow.
      * Properties on a new edge will override these defaults if they exist.

From 7650373fe475031bda6282a32b7736cb389c01e6 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 31 Mar 2026 13:49:20 +0200
Subject: [PATCH 09/19] restore comment

---
 packages/react/src/container/Pane/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 016293f73d..fe3d553972 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -225,6 +225,7 @@ export function Pane({
     selectedEdgeIds.current = new Set();
     const edgesSelectable = defaultEdgeOptions?.selectable ?? true;
 
+    // We look for all edges connected to the selected nodes
     for (const nodeId of selectedNodeIds.current) {
       const connections = connectionLookup.get(nodeId);
       if (!connections) continue;

From 21676e6d4ffaafde0966818990c51c72f13c8f0a Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 31 Mar 2026 13:51:13 +0200
Subject: [PATCH 10/19] fix typo

---
 packages/react/src/container/Pane/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index fe3d553972..f6e02a6701 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -201,7 +201,7 @@ export function Pane({
     } = store.getState();
 
     const screenStart = rendererPointToPoint(flowOrigin, transform);
-    // This has to be in screen cordinates, not in flow coordinates.
+    // This has to be in screen coordinates, not in flow coordinates.
     // We store the selection rectangle in userSelectionFlowOrigin coordinates to be able to
     // fix the start position of the selection rectangle when we are auto-panning.
     const nextUserSelectRect = {

From c94847db8ff3df3ba155edb88c883c808ec1a36d Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 31 Mar 2026 13:59:15 +0200
Subject: [PATCH 11/19] correct casing for prop

---
 examples/react/src/examples/Basic/index.tsx         | 2 +-
 packages/react/src/container/FlowRenderer/index.tsx | 4 ++--
 packages/react/src/container/GraphView/index.tsx    | 4 ++--
 packages/react/src/container/Pane/index.tsx         | 6 +++---
 packages/react/src/container/ReactFlow/index.tsx    | 4 ++--
 packages/react/src/types/component-props.ts         | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index 9c18c31319..ac86be9735 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -162,7 +162,7 @@ const BasicFlow = () => {
         selectNodesOnDrag={false}
         elevateEdgesOnSelect
         elevateNodesOnSelect={false}
-        autopanOnSelection={true}
+        autoPanOnSelection={true}
         nodeDragThreshold={0}
       >
         <Background variant={BackgroundVariant.Dots} />
diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index 17dbc01498..93e764a923 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -61,7 +61,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag: _panOnDrag,
-  autopanOnSelection,
+  autoPanOnSelection,
   defaultViewport,
   translateExtent,
   minZoom,
@@ -119,7 +119,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         onPaneContextMenu={onPaneContextMenu}
         onPaneScroll={onPaneScroll}
         panOnDrag={panOnDrag}
-        autopanOnSelection={autopanOnSelection}
+        autoPanOnSelection={autoPanOnSelection}
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index 9cf777ef72..3a43661f15 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -80,7 +80,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag,
-  autopanOnSelection,
+  autoPanOnSelection,
   onPaneClick,
   onPaneMouseEnter,
   onPaneMouseMove,
@@ -139,7 +139,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
-      autopanOnSelection={autopanOnSelection}
+      autoPanOnSelection={autoPanOnSelection}
       defaultViewport={defaultViewport}
       translateExtent={translateExtent}
       minZoom={minZoom}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index f6e02a6701..7da72dbbf3 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -36,7 +36,7 @@ type PaneProps = {
     ReactFlowProps,
     | 'selectionMode'
     | 'panOnDrag'
-    | 'autopanOnSelection'
+    | 'autoPanOnSelection'
     | 'onSelectionStart'
     | 'onSelectionEnd'
     | 'onPaneClick'
@@ -75,7 +75,7 @@ export function Pane({
   selectionKeyPressed,
   selectionMode = SelectionMode.Full,
   panOnDrag,
-  autopanOnSelection,
+  autoPanOnSelection,
   paneClickDistance,
   selectionOnDrag,
   onSelectionStart,
@@ -255,7 +255,7 @@ export function Pane({
   }
 
   function autoPan(): void {
-    if (!autopanOnSelection || !containerBounds.current) {
+    if (!autoPanOnSelection || !containerBounds.current) {
       return;
     }
     const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index ade667b3be..0bc6a30544 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -132,7 +132,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
-    autopanOnSelection,
+    autoPanOnSelection,
     autoPanSpeed,
     connectionRadius,
     isValidConnection,
@@ -225,7 +225,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           panOnScrollSpeed={panOnScrollSpeed}
           panOnScrollMode={panOnScrollMode}
           panOnDrag={panOnDrag}
-          autopanOnSelection={autopanOnSelection}
+          autoPanOnSelection={autoPanOnSelection}
           onPaneClick={onPaneClick}
           onPaneMouseEnter={onPaneMouseEnter}
           onPaneMouseMove={onPaneMouseMove}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 742f40c3d8..4ff095b24f 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -639,7 +639,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * viewport while creating a selection box.
    * @default true
    */
-  autopanOnSelection?: boolean;
+  autoPanOnSelection?: boolean;
   /**
    * The speed at which the viewport pans while dragging a node or a selection box.
    * @default 15

From c33e59459c1be8a51a32b2e9e392857778fc221a Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Tue, 31 Mar 2026 14:07:49 +0200
Subject: [PATCH 12/19] apply some suggestions

---
 packages/react/src/container/Pane/index.tsx           | 4 ++--
 packages/react/src/types/component-props.ts           | 2 +-
 packages/svelte/src/lib/container/Pane/Pane.svelte    | 4 ++--
 packages/svelte/src/lib/container/SvelteFlow/types.ts | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 7da72dbbf3..bcab410cb2 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -260,8 +260,8 @@ export function Pane({
     }
     const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
 
-    void panBy({ x, y }).then(() => {
-      if (!selectionInProgress.current || !userSelectionFlowOrigin.current) {
+    panBy({ x, y }).then((panned) => {
+      if (!selectionInProgress.current || !userSelectionFlowOrigin.current || !panned) {
         return;
       }
       const { x: mx, y: my } = position.current;
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 4ff095b24f..5c49df2c24 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -637,7 +637,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   /**
    * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
    * viewport while creating a selection box.
-   * @default true
+   * @default false
    */
   autoPanOnSelection?: boolean;
   /**
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 7255894f31..ddd12355e2 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -214,8 +214,8 @@
     }
     const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
 
-    void store.panBy({ x, y }).then(() => {
-      if (!selectionInProgress || !userSelectionFlowOrigin) {
+    store.panBy({ x, y }).then((panned) => {
+      if (!selectionInProgress || !userSelectionFlowOrigin || !panned) {
         return;
       }
       commitUserSelectionRect(position.x, position.y);
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index ba22fddd66..8d4b63b726 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -356,7 +356,7 @@ export type SvelteFlowProps<
     /**
      * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
      * viewport while creating a selection box.
-     * @default true
+     * @default false
      */
     autoPanOnSelection?: boolean;
     /**

From f9f69e31c434933b95da937351de0e8b8f2b73d7 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Wed, 1 Apr 2026 11:08:27 +0200
Subject: [PATCH 13/19] set autoPanOnSelection default to true

---
 packages/react/src/container/ReactFlow/index.tsx               | 2 +-
 packages/react/src/types/component-props.ts                    | 2 +-
 packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 2 +-
 packages/svelte/src/lib/container/SvelteFlow/types.ts          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 0bc6a30544..ab7834c16f 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -132,7 +132,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
-    autoPanOnSelection,
+    autoPanOnSelection = true,
     autoPanSpeed,
     connectionRadius,
     isValidConnection,
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 5c49df2c24..4ff095b24f 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -637,7 +637,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   /**
    * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
    * viewport while creating a selection box.
-   * @default false
+   * @default true
    */
   autoPanOnSelection?: boolean;
   /**
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 11e4c7cdef..60f6c7ef22 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -62,7 +62,7 @@
     panOnScrollSpeed = 0.5,
     panOnDrag = true,
     selectionOnDrag = false,
-    autoPanOnSelection = false,
+    autoPanOnSelection = true,
     connectionLineComponent,
     connectionLineStyle,
     connectionLineContainerStyle,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 8d4b63b726..ba22fddd66 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -356,7 +356,7 @@ export type SvelteFlowProps<
     /**
      * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
      * viewport while creating a selection box.
-     * @default false
+     * @default true
      */
     autoPanOnSelection?: boolean;
     /**

From e6661de531212f9a209dba17dd63fbbd4ee16f62 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Thu, 2 Apr 2026 14:00:05 +0200
Subject: [PATCH 14/19] add changeset

---
 .changeset/eighty-crabs-shake.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/eighty-crabs-shake.md

diff --git a/.changeset/eighty-crabs-shake.md b/.changeset/eighty-crabs-shake.md
new file mode 100644
index 0000000000..304d7178b2
--- /dev/null
+++ b/.changeset/eighty-crabs-shake.md
@@ -0,0 +1,11 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': minor
+---
+
+Add `autoPanOnSelection` (default `true`) so the viewport can auto-pan when you drag a selection rectangle near the pane edges, similar to edge auto-pan while dragging nodes.
+
+Keep the selection rectangle anchored in flow coordinates while the viewport moves so the box stays aligned with the graph during auto-pan.
+
+Set `autoPanOnSelection={false}` to restore the previous behavior (no auto-pan during selection).

From 9bb239e06d58f35e4b21b7419c6d6bbada2f9a94 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Wed, 8 Apr 2026 14:13:07 +0200
Subject: [PATCH 15/19] proper async usage

---
 packages/react/src/container/Pane/index.tsx        | 4 ++--
 packages/svelte/src/lib/container/Pane/Pane.svelte | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index bcab410cb2..09bf3476fe 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -262,13 +262,13 @@ export function Pane({
 
     panBy({ x, y }).then((panned) => {
       if (!selectionInProgress.current || !userSelectionFlowOrigin.current || !panned) {
+        autoPanId.current = requestAnimationFrame(autoPan);
         return;
       }
       const { x: mx, y: my } = position.current;
       commitUserSelectionRect(mx, my);
+      autoPanId.current = requestAnimationFrame(autoPan);
     });
-
-    autoPanId.current = requestAnimationFrame(autoPan);
   }
 
   const onPointerMove = (event: ReactPointerEvent): void => {
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index ddd12355e2..d0ddd8c3d7 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -216,12 +216,12 @@
 
     store.panBy({ x, y }).then((panned) => {
       if (!selectionInProgress || !userSelectionFlowOrigin || !panned) {
+        autoPanId = requestAnimationFrame(autoPan);
         return;
       }
       commitUserSelectionRect(position.x, position.y);
+      autoPanId = requestAnimationFrame(autoPan);
     });
-
-    autoPanId = requestAnimationFrame(autoPan);
   }
 
   function onPointerMove(event: PointerEvent) {

From 0ad1f47b4356b57524ff7426aa3f270b950e780f Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Wed, 8 Apr 2026 17:50:23 +0200
Subject: [PATCH 16/19] add pointer cancel events and refactor away cleanup of
 autopan handler

---
 packages/react/src/container/Pane/index.tsx   | 23 +++++++++++++++----
 .../svelte/src/lib/container/Pane/Pane.svelte | 23 +++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 09bf3476fe..2aa9ca0046 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -1,4 +1,5 @@
 import {
+  useEffect,
   useRef,
   type MouseEventHandler,
   type MutableRefObject,
@@ -271,6 +272,17 @@ export function Pane({
     });
   }
 
+  const cleanupAutoPan = (): void => {
+    cancelAnimationFrame(autoPanId.current);
+    autoPanId.current = 0;
+    autoPanStarted.current = false;
+    userSelectionFlowOrigin.current = null;
+  };
+
+  useEffect(() => {
+    return () => cleanupAutoPan();
+  }, []);
+
   const onPointerMove = (event: ReactPointerEvent): void => {
     const { userSelectionRect, transform, resetSelectedElements } = store.getState();
 
@@ -331,10 +343,12 @@ export function Pane({
       });
     }
 
-    cancelAnimationFrame(autoPanId.current);
-    autoPanId.current = 0;
-    autoPanStarted.current = false;
-    userSelectionFlowOrigin.current = null;
+    cleanupAutoPan();
+  };
+
+  const onPointerCancel = (event: ReactPointerEvent) => {
+    (event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
@@ -348,6 +362,7 @@ export function Pane({
       onPointerEnter={isSelectionEnabled ? undefined : onPaneMouseEnter}
       onPointerMove={isSelectionEnabled ? onPointerMove : onPaneMouseMove}
       onPointerUp={isSelectionEnabled ? onPointerUp : undefined}
+      onPointerCancel={isSelectionEnabled ? onPointerCancel : undefined}
       onPointerDownCapture={isSelectionEnabled ? onPointerDownCapture : undefined}
       onClickCapture={isSelectionEnabled ? onClickCapture : undefined}
       onPointerLeave={onPaneMouseLeave}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index d0ddd8c3d7..248b3aa62a 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -39,6 +39,7 @@
 </script>
 
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
+  import { onDestroy } from 'svelte';
   import {
     SelectionMode,
     getEventPosition,
@@ -224,6 +225,17 @@
     });
   }
 
+  function cleanupAutoPan(): void {
+    cancelAnimationFrame(autoPanId);
+    autoPanId = 0;
+    autoPanStarted = false;
+    userSelectionFlowOrigin = null;
+  }
+
+  onDestroy(() => {
+    cleanupAutoPan();
+  });
+
   function onPointerMove(event: PointerEvent) {
     if (!isSelecting || !containerBounds || !store.selectionRect || !userSelectionFlowOrigin) {
       return;
@@ -282,10 +294,12 @@
       onselectionend?.(event);
     }
 
-    cancelAnimationFrame(autoPanId);
-    autoPanId = 0;
-    autoPanStarted = false;
-    userSelectionFlowOrigin = null;
+    cleanupAutoPan();
+  }
+
+  function onPointerCancel(event: PointerEvent) {
+    (event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
   }
 
   const onContextMenu = (event: MouseEvent) => {
@@ -331,6 +345,7 @@
   onpointerdowncapture={isSelectionEnabled ? onPointerDownCapture : undefined}
   onpointermove={isSelectionEnabled ? onPointerMove : undefined}
   onpointerup={isSelectionEnabled ? onPointerUp : undefined}
+  onpointercancel={isSelectionEnabled ? onPointerCancel : undefined}
   oncontextmenu={wrapHandler(onContextMenu, container)}
   onclickcapture={isSelectionEnabled ? onClickCapture : undefined}
 >

From fba4d29c5727c65f2179bb7089c90ca5a7506aff Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Apr 2026 12:06:15 +0200
Subject: [PATCH 17/19] chore(pane): simplify start pos handling

---
 packages/react/src/container/Pane/index.tsx | 40 ++++++++++-----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 2aa9ca0046..8552cbf4d7 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -105,9 +105,6 @@ export function Pane({
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
 
-  // In auto-panning, selection start position must stay fixed in flow space, not pane pixels
-  const userSelectionFlowOrigin = useRef<XYPosition | null>(null);
-
   // Used for auto pan when approaching the edges of the container during selection
   const position = useRef<XYPosition>({ x: 0, y: 0 });
   const autoPanStarted = useRef<boolean>(false);
@@ -146,7 +143,7 @@ export function Pane({
   // We are using capture here in order to prevent other pointer events
   // to be able to create a selection above a node or an edge
   const onPointerDownCapture = (event: ReactPointerEvent): void => {
-    const { domNode } = store.getState();
+    const { domNode, transform } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
     if (!containerBounds.current) return;
 
@@ -164,15 +161,14 @@ export function Pane({
     selectionInProgress.current = false;
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
-    const { transform } = store.getState();
-    userSelectionFlowOrigin.current = pointToRendererPoint({ x, y }, transform);
+    const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform);
 
     store.setState({
       userSelectionRect: {
         width: 0,
         height: 0,
-        startX: x,
-        startY: y,
+        startX: userSelectionStartPosition.x,
+        startY: userSelectionStartPosition.y,
         x,
         y,
       },
@@ -186,8 +182,8 @@ export function Pane({
 
   // We commit the user selection rectangle to the store on auto-panning or pointer move during selection.
   function commitUserSelectionRect(mouseX: number, mouseY: number): void {
-    const flowOrigin = userSelectionFlowOrigin.current;
-    if (!flowOrigin) {
+    const { userSelectionRect } = store.getState();
+    if (!userSelectionRect) {
       return;
     }
 
@@ -201,17 +197,18 @@ export function Pane({
       defaultEdgeOptions,
     } = store.getState();
 
-    const screenStart = rendererPointToPoint(flowOrigin, transform);
+    const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };
+    const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform);
     // This has to be in screen coordinates, not in flow coordinates.
-    // We store the selection rectangle in userSelectionFlowOrigin coordinates to be able to
+    // We store the selection rectangle in userSelectionStartPosition coordinates to be able to
     // fix the start position of the selection rectangle when we are auto-panning.
     const nextUserSelectRect = {
-      startX: screenStart.x,
-      startY: screenStart.y,
-      x: mouseX < screenStart.x ? mouseX : screenStart.x,
-      y: mouseY < screenStart.y ? mouseY : screenStart.y,
-      width: Math.abs(mouseX - screenStart.x),
-      height: Math.abs(mouseY - screenStart.y),
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
+      x: mouseX < screenStartX ? mouseX : screenStartX,
+      y: mouseY < screenStartY ? mouseY : screenStartY,
+      width: Math.abs(mouseX - screenStartX),
+      height: Math.abs(mouseY - screenStartY),
     };
 
     const prevSelectedNodeIds = selectedNodeIds.current;
@@ -262,7 +259,7 @@ export function Pane({
     const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
 
     panBy({ x, y }).then((panned) => {
-      if (!selectionInProgress.current || !userSelectionFlowOrigin.current || !panned) {
+      if (!selectionInProgress.current || !panned) {
         autoPanId.current = requestAnimationFrame(autoPan);
         return;
       }
@@ -276,7 +273,6 @@ export function Pane({
     cancelAnimationFrame(autoPanId.current);
     autoPanId.current = 0;
     autoPanStarted.current = false;
-    userSelectionFlowOrigin.current = null;
   };
 
   useEffect(() => {
@@ -286,14 +282,14 @@ export function Pane({
   const onPointerMove = (event: ReactPointerEvent): void => {
     const { userSelectionRect, transform, resetSelectedElements } = store.getState();
 
-    if (!containerBounds.current || !userSelectionRect || !userSelectionFlowOrigin.current) {
+    if (!containerBounds.current || !userSelectionRect) {
       return;
     }
 
     const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
     position.current = { x: mouseX, y: mouseY };
 
-    const screenStart = rendererPointToPoint(userSelectionFlowOrigin.current, transform);
+    const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform);
 
     if (!selectionInProgress.current) {
       const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;

From c114b6e415cb6ecd2da65ec8acf67c85b16aca96 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Apr 2026 12:10:56 +0200
Subject: [PATCH 18/19] chore(pane): simplify start pos handling

---
 .../svelte/src/lib/container/Pane/Pane.svelte | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 248b3aa62a..2728dff560 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -88,9 +88,6 @@
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
 
-  // Position of the selection start in the flow so that it stays fixed on the canvas while auto-panning
-  let userSelectionFlowOrigin: XYPosition | null = null;
-
   // Used for auto pan when approaching the edges of the container during selection
   let autoPanId: number = 0;
   let position: XYPosition = { x: 0, y: 0 };
@@ -127,7 +124,7 @@
     const { x, y } = getEventPosition(event, containerBounds);
 
     // We convert the position to the flow space so that it stays fixed on the canvas while auto-panning
-    userSelectionFlowOrigin = pointToRendererPoint({ x, y }, [
+    const userSelectionFlowOrigin = pointToRendererPoint({ x, y }, [
       store.viewport.x,
       store.viewport.y,
       store.viewport.zoom
@@ -136,8 +133,8 @@
     store.selectionRect = {
       width: 0,
       height: 0,
-      startX: x,
-      startY: y,
+      startX: userSelectionFlowOrigin.x,
+      startY: userSelectionFlowOrigin.y,
       x,
       y
     };
@@ -150,18 +147,19 @@
 
   // We commit the user selection rectangle to the store on auto-panning or pointer move
   function commitUserSelectionRect(mouseX: number, mouseY: number): void {
-    if (!userSelectionFlowOrigin) {
+    if (store.selectionRect?.startX === undefined || store.selectionRect.startY === undefined) {
       return;
     }
 
-    const screenStart = rendererPointToPoint(userSelectionFlowOrigin, [
+    const userStartPosition = { x: store.selectionRect?.startX, y: store.selectionRect?.startY };
+    const screenStart = rendererPointToPoint(userStartPosition, [
       store.viewport.x,
       store.viewport.y,
       store.viewport.zoom
     ]);
     const nextUserSelectRect = {
-      startX: screenStart.x,
-      startY: screenStart.y,
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
       x: mouseX < screenStart.x ? mouseX : screenStart.x,
       y: mouseY < screenStart.y ? mouseY : screenStart.y,
       width: Math.abs(mouseX - screenStart.x),
@@ -216,7 +214,7 @@
     const [x, y] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
 
     store.panBy({ x, y }).then((panned) => {
-      if (!selectionInProgress || !userSelectionFlowOrigin || !panned) {
+      if (!selectionInProgress || !panned) {
         autoPanId = requestAnimationFrame(autoPan);
         return;
       }
@@ -229,7 +227,6 @@
     cancelAnimationFrame(autoPanId);
     autoPanId = 0;
     autoPanStarted = false;
-    userSelectionFlowOrigin = null;
   }
 
   onDestroy(() => {
@@ -237,14 +234,15 @@
   });
 
   function onPointerMove(event: PointerEvent) {
-    if (!isSelecting || !containerBounds || !store.selectionRect || !userSelectionFlowOrigin) {
+    if (!isSelecting || !containerBounds || !store.selectionRect) {
       return;
     }
 
     const mousePos = getEventPosition(event, containerBounds);
     position = { x: mousePos.x, y: mousePos.y };
 
-    const screenStart = rendererPointToPoint(userSelectionFlowOrigin, [
+    const userStartPosition = { x: store.selectionRect.startX, y: store.selectionRect.startY };
+    const screenStart = rendererPointToPoint(userStartPosition, [
       store.viewport.x,
       store.viewport.y,
       store.viewport.zoom

From 41d05240d32f87848ec8f6b36f4b62ea3ef09236 Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Mon, 4 May 2026 13:19:28 +0200
Subject: [PATCH 19/19] Modify autoPanOnSelection behavior and update versions

Update '@xyflow/system' version from minor to patch. Add 'autoPanOnSelection' to enable auto-panning when dragging a selection near the viewport edges.
---
 .changeset/eighty-crabs-shake.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/.changeset/eighty-crabs-shake.md b/.changeset/eighty-crabs-shake.md
index 304d7178b2..7e7a86c13c 100644
--- a/.changeset/eighty-crabs-shake.md
+++ b/.changeset/eighty-crabs-shake.md
@@ -1,11 +1,7 @@
 ---
 '@xyflow/react': minor
 '@xyflow/svelte': minor
-'@xyflow/system': minor
+'@xyflow/system': patch
 ---
 
-Add `autoPanOnSelection` (default `true`) so the viewport can auto-pan when you drag a selection rectangle near the pane edges, similar to edge auto-pan while dragging nodes.
-
-Keep the selection rectangle anchored in flow coordinates while the viewport moves so the box stays aligned with the graph during auto-pan.
-
-Set `autoPanOnSelection={false}` to restore the previous behavior (no auto-pan during selection).
+Add `autoPanOnSelection` to auto-pan when user drags a selection close to the edge of the viewport.