diff --git a/.changeset/fresh-eyes-remain.md b/.changeset/fresh-eyes-remain.md new file mode 100644 index 00000000..8c63fdce --- /dev/null +++ b/.changeset/fresh-eyes-remain.md @@ -0,0 +1,7 @@ +--- +'@xyflow/system': patch +'@xyflow/react': patch +'@xyflow/svelte': patch +--- + +Use 1 as the default for interactive Minimap zoom step diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx index 891f280e..35ded83f 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -65,7 +65,7 @@ function MiniMapComponent({ zoomable = false, ariaLabel, inversePan, - zoomStep = 10, + zoomStep = 1, offsetScale = 5, }: MiniMapProps) { const store = useStoreApi(); diff --git a/packages/system/src/xyminimap/index.ts b/packages/system/src/xyminimap/index.ts index 025cbeee..fc9b2cdb 100644 --- a/packages/system/src/xyminimap/index.ts +++ b/packages/system/src/xyminimap/index.ts @@ -2,6 +2,7 @@ import { type D3ZoomEvent, zoom } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import type { CoordinateExtent, PanZoomInstance, Transform } from '../types'; +import { isMacOs } from '../utils'; export type XYMinimapInstance = { update: (params: XYMinimapUpdate) => void; @@ -33,24 +34,23 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi translateExtent, width, height, - zoomStep = 10, + zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }: XYMinimapUpdate) { // eslint-disable-next-line @typescript-eslint/no-explicit-any const zoomHandler = (event: D3ZoomEvent) => { - const transform = getTransform(); - if (event.sourceEvent.type !== 'wheel' || !panZoom) { return; } - + const transform = getTransform(); + 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 nextZoom = transform[2] * Math.pow(2, pinchDelta); + const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor); panZoom.scaleTo(nextZoom); };