From f80654ae31da97745d6e67e31c254b43db794264 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Sat, 6 Dec 2025 21:40:33 -0500
Subject: [PATCH] fix: Prevent image panning when drawing with stylus in mask
 editor (#7216)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Track pen pointer IDs to prevent touch events from triggering pan/zoom
while drawing with a stylus (Apple Pencil, Surface Pen, Android stylus).

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6549,
https://github.com/Comfy-Org/ComfyUI_frontend/issues/7135

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7216-fix-Prevent-image-panning-when-drawing-with-stylus-in-mask-editor-2c26d73d3650813a926bda40ae83832c)
by [Unito](https://www.unito.io)
---
 src/composables/maskeditor/usePanAndZoom.ts  | 17 ++++++++++++++++-
 src/composables/maskeditor/useToolManager.ts |  9 +++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/composables/maskeditor/usePanAndZoom.ts b/src/composables/maskeditor/usePanAndZoom.ts
index 2aa8336477..9a70855234 100644
--- a/src/composables/maskeditor/usePanAndZoom.ts
+++ b/src/composables/maskeditor/usePanAndZoom.ts
@@ -402,6 +402,19 @@ export function usePanAndZoom() {
     }
   )
 
+  const addPenPointerId = (pointerId: number): void => {
+    if (!penPointerIdList.value.includes(pointerId)) {
+      penPointerIdList.value.push(pointerId)
+    }
+  }
+
+  const removePenPointerId = (pointerId: number): void => {
+    const index = penPointerIdList.value.indexOf(pointerId)
+    if (index !== -1) {
+      penPointerIdList.value.splice(index, 1)
+    }
+  }
+
   return {
     initializeCanvasPanZoom,
     handlePanStart,
@@ -411,6 +424,8 @@ export function usePanAndZoom() {
     handleTouchEnd,
     updateCursorPosition,
     zoom,
-    invalidatePanZoom
+    invalidatePanZoom,
+    addPenPointerId,
+    removePenPointerId
   }
 }
diff --git a/src/composables/maskeditor/useToolManager.ts b/src/composables/maskeditor/useToolManager.ts
index e306f3dfbf..f51ce7b15a 100644
--- a/src/composables/maskeditor/useToolManager.ts
+++ b/src/composables/maskeditor/useToolManager.ts
@@ -114,6 +114,10 @@ export function useToolManager(
     event.preventDefault()
     if (event.pointerType === 'touch') return
 
+    if (event.pointerType === 'pen') {
+      panZoom.addPenPointerId(event.pointerId)
+    }
+
     const isSpacePressed = keyboard.isKeyDown(' ')
 
     if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
@@ -207,6 +211,11 @@ export function useToolManager(
   const handlePointerUp = async (event: PointerEvent): Promise<void> => {
     store.isPanning = false
     store.brushVisible = true
+
+    if (event.pointerType === 'pen') {
+      panZoom.removePenPointerId(event.pointerId)
+    }
+
     if (event.pointerType === 'touch') return
     updateCursor()
     store.isAdjustingBrush = false