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 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)
This commit is contained in:
Terry Jia
2025-12-06 21:40:33 -05:00
committed by GitHub
parent 795733b333
commit f80654ae31
2 changed files with 25 additions and 1 deletions

View File

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

View File

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