From d7a3172a60db32ec30d5d8507b063e134280b00e Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 25 Aug 2025 19:12:33 +0200
Subject: [PATCH] prevent pinch zooming while making a new conection

---
 packages/react/src/container/ZoomPane/index.tsx    | 5 ++++-
 packages/svelte/src/lib/actions/zoom/index.ts      | 1 +
 packages/svelte/src/lib/container/Zoom/Zoom.svelte | 3 ++-
 packages/system/src/types/panzoom.ts               | 1 +
 packages/system/src/xypanzoom/XYPanZoom.ts         | 2 ++
 packages/system/src/xypanzoom/filter.ts            | 7 +++++++
 6 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/container/ZoomPane/index.tsx b/packages/react/src/container/ZoomPane/index.tsx
index 61af78e6..bce2b2b7 100644
--- a/packages/react/src/container/ZoomPane/index.tsx
+++ b/packages/react/src/container/ZoomPane/index.tsx
@@ -25,6 +25,7 @@ type ZoomPaneProps = Omit<
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,
   lib: s.lib,
+  connectionInProgress: s.connection.inProgress,
 });
 
 export function ZoomPane({
@@ -51,7 +52,7 @@ export function ZoomPane({
 }: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
-  const { userSelectionActive, lib } = useStore(selector, shallow);
+  const { userSelectionActive, lib, connectionInProgress } = useStore(selector, shallow);
   const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
   const panZoom = useRef<PanZoomInstance>();
 
@@ -126,6 +127,7 @@ export function ZoomPane({
       noWheelClassName,
       lib,
       onTransformChange,
+      connectionInProgress,
     });
   }, [
     onPaneContextMenu,
@@ -143,6 +145,7 @@ export function ZoomPane({
     noWheelClassName,
     lib,
     onTransformChange,
+    connectionInProgress,
   ]);
 
   return (
diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts
index 34ead520..27d7328f 100644
--- a/packages/svelte/src/lib/actions/zoom/index.ts
+++ b/packages/svelte/src/lib/actions/zoom/index.ts
@@ -37,6 +37,7 @@ type ZoomParams = {
   paneClickDistance: number;
   onTransformChange: (transform: Transform) => void;
   onDraggingChange: (dragging: boolean) => void;
+  connectionInProgress: boolean;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
index 42a644a6..9c159c99 100644
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -70,7 +70,8 @@
     paneClickDistance,
     onTransformChange: (transform: Transform) => {
       store.viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
-    }
+    },
+    connectionInProgress: store.connection.inProgress
   }}
 >
   {@render children()}
diff --git a/packages/system/src/types/panzoom.ts b/packages/system/src/types/panzoom.ts
index ae968fc8..7fa54e97 100644
--- a/packages/system/src/types/panzoom.ts
+++ b/packages/system/src/types/panzoom.ts
@@ -42,6 +42,7 @@ export type PanZoomUpdateOptions = {
   zoomActivationKeyPressed: boolean;
   lib: string;
   onTransformChange: OnTransformChange;
+  connectionInProgress: boolean;
 };
 
 export type PanZoomInstance = {
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index 09d28dc2..85b8ba1c 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -108,6 +108,7 @@ export function XYPanZoom({
     zoomActivationKeyPressed,
     lib,
     onTransformChange,
+    connectionInProgress,
   }: PanZoomUpdateOptions) {
     if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
       destroy();
@@ -178,6 +179,7 @@ export function XYPanZoom({
       noPanClassName,
       noWheelClassName,
       lib,
+      connectionInProgress,
     });
     d3ZoomInstance.filter(filter);
 
diff --git a/packages/system/src/xypanzoom/filter.ts b/packages/system/src/xypanzoom/filter.ts
index 57f92486..8446f20c 100644
--- a/packages/system/src/xypanzoom/filter.ts
+++ b/packages/system/src/xypanzoom/filter.ts
@@ -12,6 +12,7 @@ export type FilterParams = {
   noWheelClassName: string;
   noPanClassName: string;
   lib: string;
+  connectionInProgress: boolean;
 };
 
 export function createFilter({
@@ -25,6 +26,7 @@ export function createFilter({
   noWheelClassName,
   noPanClassName,
   lib,
+  connectionInProgress,
 }: FilterParams) {
   return (event: any): boolean => {
     const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
@@ -48,6 +50,11 @@ export function createFilter({
       return false;
     }
 
+    // we want to disable pinch-zooming while making a connection
+    if (connectionInProgress) {
+      return false;
+    }
+
     // if the target element is inside an element with the nowheel class, we prevent zooming
     if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
       return false;