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

* refactor(core): expose isMacOs

Signed-off-by: braks <[email protected]>

* chore(changeset): add

* chore(changeset): add

---------

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

.changeset/dull-swans-march.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Expose `isMacOs` utility

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

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

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>) => {