From 58a52e137421e5939313760c91f6da2791d3777d Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 12 Aug 2025 17:05:10 +0200
Subject: [PATCH] fix(minimap): use 1 as zoomstep for minimap and apply factor
 based on macOs (#1923)

* fix(minimap): use 1 as zoomstep for minimap and apply factor based on macOs

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* refactor(core): expose isMacOs

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

* chore(changeset): add

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/dull-swans-march.md    | 5 +++++
 .changeset/tender-geckos-sniff.md | 5 +++++
 packages/core/src/index.ts        | 2 ++
 packages/minimap/src/MiniMap.vue  | 9 +++++----
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dull-swans-march.md
 create mode 100644 .changeset/tender-geckos-sniff.md

diff --git a/.changeset/dull-swans-march.md b/.changeset/dull-swans-march.md
new file mode 100644
index 00000000..48c7433f
--- /dev/null
+++ b/.changeset/dull-swans-march.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Expose `isMacOs` utility
diff --git a/.changeset/tender-geckos-sniff.md b/.changeset/tender-geckos-sniff.md
new file mode 100644
index 00000000..6bc3473b
--- /dev/null
+++ b/.changeset/tender-geckos-sniff.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": patch
+---
+
+Set zoomstep to 1 and apply factor based on macOs (zoomstep \* factor - 10 if macOs)
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index a5b9c50a..cc2ecf14 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -51,6 +51,8 @@ export {
   wheelDelta,
 } from './utils/graph'
 
+export { isMacOs } from './utils/general'
+
 /**
  * @deprecated - Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead
  * Intended for options API
diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue
index af06395a..d21587a6 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/minimap/src/MiniMap.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
-import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow, wheelDelta } from '@vue-flow/core'
+import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, isMacOs, useVueFlow, wheelDelta } from '@vue-flow/core'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
@@ -26,7 +26,7 @@ const {
   zoomable = false,
   ariaLabel = 'Vue Flow mini map',
   inversePan = false,
-  zoomStep = 10,
+  zoomStep = 1,
   offsetScale = 5,
 } = defineProps<MiniMapProps>()
 
@@ -126,13 +126,14 @@ watchEffect(
           return
         }
 
+        const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1
         const pinchDelta =
           -event.sourceEvent.deltaY *
           (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
           zoomStep
-        const zoom = viewport.value.zoom * 2 ** pinchDelta
+        const nextZoom = viewport.value.zoom * 2 ** (pinchDelta * factor)
 
-        d3Zoom.value.scaleTo(d3Selection.value, zoom)
+        d3Zoom.value.scaleTo(d3Selection.value, nextZoom)
       }
 
       const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {