From 47688fe363ac239652b95af71619aafa12935100 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 4 Nov 2025 14:18:30 -0800
Subject: [PATCH] fix minimap navigation on touch devices (#6580)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes minimap navigation (dragging the viewport box on the minimap) on
touch devices.

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

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 src/renderer/extensions/minimap/MiniMap.vue   |  4 +++-
 .../minimap/composables/useMinimap.ts         |  1 +
 .../composables/useMinimapInteraction.ts      | 20 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 3af666b56..e1eb9b388 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -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()
diff --git a/src/renderer/extensions/minimap/composables/useMinimap.ts b/src/renderer/extensions/minimap/composables/useMinimap.ts
index 343a5ad55..9d572f133 100644
--- a/src/renderer/extensions/minimap/composables/useMinimap.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimap.ts
@@ -244,6 +244,7 @@ export function useMinimap() {
     handlePointerDown: interaction.handlePointerDown,
     handlePointerMove: interaction.handlePointerMove,
     handlePointerUp: interaction.handlePointerUp,
+    handlePointerCancel: interaction.handlePointerCancel,
     handleWheel: interaction.handleWheel,
     setMinimapRef,
     updateOption
diff --git a/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts b/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
index f978cee94..fc9cab1e6 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
@@ -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
   }
 }