From 9980cff2fe0a6c7a0cd1791622987660813ea99c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 2 Apr 2025 20:46:08 +0200
Subject: [PATCH 1/3] chore(xypanzoom): prevent default for pinch zoom on
 nowheel element #5074

---
 packages/system/src/xypanzoom/eventhandler.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/system/src/xypanzoom/eventhandler.ts b/packages/system/src/xypanzoom/eventhandler.ts
index 751a31c5..78fd9253 100644
--- a/packages/system/src/xypanzoom/eventhandler.ts
+++ b/packages/system/src/xypanzoom/eventhandler.ts
@@ -141,11 +141,20 @@ export function createPanOnScrollHandler({
 
 export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
   return function (this: Element, event: any, d: unknown) {
-    // we still want to enable pinch zooming even if preventScrolling is set to false
-    const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
+    if (event.type === 'wheel') {
+      const isPinch = event.ctrlKey;
+      // we still want to enable pinch zooming even if preventScrolling is set to false
+      const preventZoom = !preventScrolling && !isPinch;
+      const isNoWheel = isWrappedWithClass(event, noWheelClassName);
 
-    if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
-      return null;
+      // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+      if (isPinch && isNoWheel) {
+        event.preventDefault();
+      }
+
+      if (preventZoom || isNoWheel) {
+        return null;
+      }
     }
 
     event.preventDefault();

From 2ac6e155e35256ca436281df16344366e7d05761 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 2 Apr 2025 20:46:53 +0200
Subject: [PATCH 2/3] chore(changeset): add

---
 .changeset/sweet-chicken-lie.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sweet-chicken-lie.md

diff --git a/.changeset/sweet-chicken-lie.md b/.changeset/sweet-chicken-lie.md
new file mode 100644
index 00000000..eccb0db0
--- /dev/null
+++ b/.changeset/sweet-chicken-lie.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/system': patch
+---
+
+Prevent browser zoom for pinch zoom gestures on nowheel elements

From 77701143ca405984d4171fc479829ed4fc52f04b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 2 Apr 2025 20:49:37 +0200
Subject: [PATCH 3/3] chore(xypanzoom): cleanup

---
 packages/system/src/xypanzoom/eventhandler.ts | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/system/src/xypanzoom/eventhandler.ts b/packages/system/src/xypanzoom/eventhandler.ts
index 78fd9253..e6dda425 100644
--- a/packages/system/src/xypanzoom/eventhandler.ts
+++ b/packages/system/src/xypanzoom/eventhandler.ts
@@ -141,20 +141,18 @@ export function createPanOnScrollHandler({
 
 export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
   return function (this: Element, event: any, d: unknown) {
-    if (event.type === 'wheel') {
-      const isPinch = event.ctrlKey;
-      // we still want to enable pinch zooming even if preventScrolling is set to false
-      const preventZoom = !preventScrolling && !isPinch;
-      const isNoWheel = isWrappedWithClass(event, noWheelClassName);
+    const isWheel = event.type === 'wheel';
+    // we still want to enable pinch zooming even if preventScrolling is set to false
+    const preventZoom = !preventScrolling && isWheel && !event.ctrlKey;
+    const hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
 
-      // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
-      if (isPinch && isNoWheel) {
-        event.preventDefault();
-      }
+    // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+    if (event.ctrlKey && isWheel && hasNoWheelClass) {
+      event.preventDefault();
+    }
 
-      if (preventZoom || isNoWheel) {
-        return null;
-      }
+    if (preventZoom || hasNoWheelClass) {
+      return null;
     }
 
     event.preventDefault();