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() 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 */