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 e80defac..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,25 +34,23 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi translateExtent, width, height, - zoomStep = 10, + zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }: XYMinimapUpdate) { - const _zoomStep = zoomStep / 10; - // eslint-disable-next-line @typescript-eslint/no-explicit-any const zoomHandler = (event: D3ZoomEvent) => { 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); + zoomStep; + const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor); panZoom.scaleTo(nextZoom); };