mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 19:21:54 +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 {
|
return {
|
||||||
initializeCanvasPanZoom,
|
initializeCanvasPanZoom,
|
||||||
handlePanStart,
|
handlePanStart,
|
||||||
@@ -411,6 +424,8 @@ export function usePanAndZoom() {
|
|||||||
handleTouchEnd,
|
handleTouchEnd,
|
||||||
updateCursorPosition,
|
updateCursorPosition,
|
||||||
zoom,
|
zoom,
|
||||||
invalidatePanZoom
|
invalidatePanZoom,
|
||||||
|
addPenPointerId,
|
||||||
|
removePenPointerId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -114,6 +114,10 @@ export function useToolManager(
|
|||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
if (event.pointerType === 'touch') return
|
if (event.pointerType === 'touch') return
|
||||||
|
|
||||||
|
if (event.pointerType === 'pen') {
|
||||||
|
panZoom.addPenPointerId(event.pointerId)
|
||||||
|
}
|
||||||
|
|
||||||
const isSpacePressed = keyboard.isKeyDown(' ')
|
const isSpacePressed = keyboard.isKeyDown(' ')
|
||||||
|
|
||||||
if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
|
if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
|
||||||
@@ -207,6 +211,11 @@ export function useToolManager(
|
|||||||
const handlePointerUp = async (event: PointerEvent): Promise<void> => {
|
const handlePointerUp = async (event: PointerEvent): Promise<void> => {
|
||||||
store.isPanning = false
|
store.isPanning = false
|
||||||
store.brushVisible = true
|
store.brushVisible = true
|
||||||
|
|
||||||
|
if (event.pointerType === 'pen') {
|
||||||
|
panZoom.removePenPointerId(event.pointerId)
|
||||||
|
}
|
||||||
|
|
||||||
if (event.pointerType === 'touch') return
|
if (event.pointerType === 'touch') return
|
||||||
updateCursor()
|
updateCursor()
|
||||||
store.isAdjustingBrush = false
|
store.isAdjustingBrush = false
|
||||||
|
|||||||
Reference in New Issue
Block a user