From f93f54325f71c66bf178f110be7fd3736319620b Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Sat, 6 Dec 2025 21:23:43 -0500
Subject: [PATCH] fix: Prevent image panning when drawing with stylus in mask
 editor

---
 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