From 17905660d6028f2fa188bbdd153dee9463cec136 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 21:23:28 +0100
Subject: [PATCH] feat(minimap): add `inversePan` and `zoomStep` props

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/minimap/src/MiniMap.vue | 12 +++++++++---
 packages/minimap/src/types.ts    |  4 ++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue
index 218e39ab..25c30fce 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/minimap/src/MiniMap.vue
@@ -23,6 +23,8 @@ const {
   pannable = false,
   zoomable = false,
   ariaLabel = 'Vue Flow mini map',
+  inversePan = false,
+  zoomStep = 10,
 } = defineProps<MiniMapProps>()
 
 const emit = defineEmits(['click', 'nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
@@ -111,7 +113,9 @@ watchEffect(
         }
 
         const pinchDelta =
-          -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * 10
+          -event.sourceEvent.deltaY *
+          (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+          zoomStep
         const zoom = viewport.value.zoom * 2 ** pinchDelta
 
         d3Zoom.value.scaleTo(d3Selection.value, zoom)
@@ -122,9 +126,11 @@ watchEffect(
           return
         }
 
+        const moveScale = viewScale.value * Math.max(1, viewport.value.zoom) * (inversePan ? -1 : 1)
+
         const position = {
-          x: viewport.value.x - event.sourceEvent.movementX * viewScale.value * Math.max(1, viewport.value.zoom),
-          y: viewport.value.y - event.sourceEvent.movementY * viewScale.value * Math.max(1, viewport.value.zoom),
+          x: viewport.value.x - event.sourceEvent.movementX * moveScale,
+          y: viewport.value.y - event.sourceEvent.movementY * moveScale,
         }
 
         const extent: CoordinateExtent = [
diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts
index 6679b15d..f50ce4e4 100644
--- a/packages/minimap/src/types.ts
+++ b/packages/minimap/src/types.ts
@@ -38,6 +38,10 @@ export interface MiniMapProps {
   height?: number
 
   ariaLabel?: string | null
+  /** Enable inverse panning, i.e. drag minimap to move viewport in opposite direction */
+  inversePan?: boolean
+  /** Specify zoom step */
+  zoomStep?: number
 }
 
 /** these props are passed to mini map node slots */