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>

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