[backport core/1.30] fix minimap navigation on touch devices (#6736)

Backport of #6580 to `core/1.30`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6736-backport-core-1-30-fix-minimap-navigation-on-touch-devices-2af6d73d3650813e80a5f5d3fa6b7269)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Comfy Org PR Bot
2025-11-19 04:10:36 +09:00
committed by GitHub
parent 24144ebeea
commit 30d4b8f600
3 changed files with 23 additions and 2 deletions

View File

@@ -61,11 +61,12 @@
<div class="minimap-viewport" :style="viewportStyles" />
<div
class="absolute inset-0"
class="absolute inset-0 touch-none"
@pointerdown="handlePointerDown"
@pointermove="handlePointerMove"
@pointerup="handlePointerUp"
@pointerleave="handlePointerUp"
@pointercancel="handlePointerCancel"
@wheel="handleWheel"
/>
</div>
@@ -105,6 +106,7 @@ const {
handlePointerDown,
handlePointerMove,
handlePointerUp,
handlePointerCancel,
handleWheel,
setMinimapRef
} = useMinimap()

View File

@@ -244,6 +244,7 @@ export function useMinimap() {
handlePointerDown: interaction.handlePointerDown,
handlePointerMove: interaction.handlePointerMove,
handlePointerUp: interaction.handlePointerUp,
handlePointerCancel: interaction.handlePointerCancel,
handleWheel: interaction.handleWheel,
setMinimapRef,
updateOption

View File

@@ -35,6 +35,10 @@ export function useMinimapInteraction(
const handlePointerDown = (e: PointerEvent) => {
isDragging.value = true
updateContainerRect()
const target = e.currentTarget
if (target instanceof HTMLElement) {
target.setPointerCapture(e.pointerId)
}
handlePointerMove(e)
}
@@ -53,10 +57,23 @@ export function useMinimapInteraction(
centerViewOn(worldX, worldY)
}
const handlePointerUp = () => {
const releasePointer = (e?: PointerEvent) => {
isDragging.value = false
if (!e) return
const target = e.currentTarget
if (
target instanceof HTMLElement &&
target.hasPointerCapture(e.pointerId)
) {
target.releasePointerCapture(e.pointerId)
}
}
const handlePointerUp = releasePointer
const handlePointerCancel = releasePointer
const handleWheel = (e: WheelEvent) => {
e.preventDefault()
@@ -102,6 +119,7 @@ export function useMinimapInteraction(
handlePointerDown,
handlePointerMove,
handlePointerUp,
handlePointerCancel,
handleWheel
}
}