From f7ef563b468df68187b72fc8fb166750d0ed2f82 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Wed, 13 May 2026 18:24:22 -0400
Subject: [PATCH] FE-657: prevent browser zoom on ctrl+wheel in mask editor
 (#12215)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Wheel events on the mask editor pointer zone now call preventDefault,
matching the main canvas behavior so ctrl+wheel only zooms the mask
canvas instead of also triggering page zoom.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12215-FE-657-prevent-browser-zoom-on-ctrl-wheel-in-mask-editor-35f6d73d36508131a9b8dbf2f6640d72)
by [Unito](https://www.unito.io)
---
 src/components/maskeditor/PointerZone.test.ts | 15 +++++++++++++++
 src/components/maskeditor/PointerZone.vue     |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/maskeditor/PointerZone.test.ts b/src/components/maskeditor/PointerZone.test.ts
index b34982acd8..9a88dcf204 100644
--- a/src/components/maskeditor/PointerZone.test.ts
+++ b/src/components/maskeditor/PointerZone.test.ts
@@ -141,6 +141,21 @@ describe('PointerZone', () => {
         y: 45
       })
     })
+
+    it('should preventDefault on wheel to block browser zoom on ctrl+wheel', () => {
+      renderZone()
+      const zone = getZone()
+
+      const event = new WheelEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+        deltaY: -1,
+        ctrlKey: true
+      })
+      zone.dispatchEvent(event)
+
+      expect(event.defaultPrevented).toBe(true)
+    })
   })
 
   describe('isPanning watcher', () => {
diff --git a/src/components/maskeditor/PointerZone.vue b/src/components/maskeditor/PointerZone.vue
index 137b0bd4cb..b5b393ad66 100644
--- a/src/components/maskeditor/PointerZone.vue
+++ b/src/components/maskeditor/PointerZone.vue
@@ -11,7 +11,7 @@
     @touchstart="handleTouchStart"
     @touchmove="handleTouchMove"
     @touchend="handleTouchEnd"
-    @wheel="handleWheel"
+    @wheel.prevent="handleWheel"
     @contextmenu.prevent
   />
 </template>