fix minimap navigation on touch devices (#6580)

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 <[email protected]>

Author: christian-byrne

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()

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

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