mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 01:34:07 +00:00
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:
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user