From bf73261ecb52d88858bc2aef3bf4096d5748295d Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Mon, 29 Sep 2025 18:49:07 +0200
Subject: [PATCH] Prevent UI pinch-to-zoom while keeping canvas zoomable

- Add touch-action CSS to prevent pinch-zoom on UI elements
- Apply touch-action: pan-x pan-y to html, body, and editor
- Apply touch-action: none to canvas for custom gestures
- Add JavaScript prevention for touchpad pinch on non-canvas areas
- Block Ctrl+wheel events outside the workspace chart
---
 .../node_modules/@node-red/editor-client/src/js/ui/view.js | 7 +++++++
 .../@node-red/editor-client/src/sass/base.scss             | 4 +++-
 .../@node-red/editor-client/src/sass/workspace.scss        | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index eee88a20d..a18292f51 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -757,6 +757,13 @@ RED.view = (function() {
         var wheelEventContinuityThreshold = 100; // Events within 100ms are same gesture
         var gestureEndThreshold = 500; // 500ms+ gap means gesture ended
         
+        // Prevent browser zoom on non-canvas areas
+        document.addEventListener("wheel", function(e) {
+            if (e.ctrlKey && !e.target.closest('#red-ui-workspace-chart')) {
+                e.preventDefault();
+            }
+        }, { passive: false });
+        
         chart.on("wheel", function(evt) {
             // ctrlKey is set during pinch gestures on trackpads
             if (evt.ctrlKey || evt.altKey || spacebarPressed) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index afbafe049..fecedf883 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -17,8 +17,9 @@
 **/
 
 
-body {
+html, body {
     overflow: hidden;
+    touch-action: pan-x pan-y;
 }
 
 .red-ui-editor {
@@ -29,6 +30,7 @@ body {
     background: var(--red-ui-primary-background);
     color: var(--red-ui-primary-text-color);
     line-height: 20px;
+    touch-action: pan-x pan-y;
 }
 
 #red-ui-editor {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index 95b8b4b45..7e03b063f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -37,6 +37,7 @@
    right:0px;
    box-sizing:border-box;
    transition: right 0.2s ease;
+   touch-action: none;
    &:focus {
        outline: none;
    }