fix: Prevent image panning when drawing with stylus in mask editor (#7216)

## 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 #6549,
#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)

Author: jtydhr88

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

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