alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Braks
2025-08-12 17:05:10 +02:00
parent 5fbbc826e5
commit 58a52e1374
4 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/dull-swans-march.md Normal file
View File

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

5
.changeset/tender-geckos-sniff.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/minimap": patch
---
Set zoomstep to 1 and apply factor based on macOs (zoomstep \* factor - 10 if macOs)

2
packages/core/src/index.ts
View File

@@ -51,6 +51,8 @@ export {
wheelDelta, wheelDelta,
} from './utils/graph' } 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 * @deprecated - Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead
* Intended for options API * Intended for options API

9
packages/minimap/src/MiniMap.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core' 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 { zoom, zoomIdentity } from 'd3-zoom'
import type { D3ZoomEvent } from 'd3-zoom' import type { D3ZoomEvent } from 'd3-zoom'
import { pointer, select } from 'd3-selection' import { pointer, select } from 'd3-selection'
@@ -26,7 +26,7 @@ const {
zoomable = false, zoomable = false,
ariaLabel = 'Vue Flow mini map', ariaLabel = 'Vue Flow mini map',
inversePan = false, inversePan = false,
zoomStep = 10, zoomStep = 1,
offsetScale = 5, offsetScale = 5,
} = defineProps<MiniMapProps>() } = defineProps<MiniMapProps>()
@@ -126,13 +126,14 @@ watchEffect(
return return
} }
const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1
const pinchDelta = const pinchDelta =
-event.sourceEvent.deltaY * -event.sourceEvent.deltaY *
(event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
zoomStep 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>) => { const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {