diff --git a/.changeset/rich-papayas-hope.md b/.changeset/rich-papayas-hope.md new file mode 100644 index 00000000..231daf67 --- /dev/null +++ b/.changeset/rich-papayas-hope.md @@ -0,0 +1,5 @@ +--- +'@reactflow/minimap': minor +--- + +add inversePan and zoomStep props diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 18fa854a..450758d5 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -1,4 +1,4 @@ -import { MouseEvent, useCallback } from 'react'; +import { MouseEvent, useCallback, useState } from 'react'; import ReactFlow, { MiniMap, Background, @@ -87,6 +87,7 @@ const defaultEdgeOptions = { zIndex: 0 }; const BasicFlow = () => { const instance = useReactFlow(); + const [inverse, setInverse] = useState(false); const updatePos = () => { instance.setNodes((nodes) => @@ -103,6 +104,7 @@ const BasicFlow = () => { const logToObject = () => console.log(instance.toObject()); const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 }); + const toggleInverse = () => setInverse(!inverse); const toggleClassnames = () => { instance.setNodes((nodes) => @@ -137,7 +139,8 @@ const BasicFlow = () => { fitView > - +
@@ -150,7 +153,12 @@ const BasicFlow = () => { - + +
); diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 59b3f34d..103ac7a2 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -67,6 +67,8 @@ function MiniMap({ pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', + inversePan = false, + zoomStep = 10 }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -106,7 +108,7 @@ function MiniMap({ const pinchDelta = -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * - 10; + zoomStep; const zoom = transform[2] * Math.pow(2, pinchDelta); d3Zoom.scaleTo(d3Selection, zoom); @@ -120,9 +122,10 @@ function MiniMap({ } // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround. + const moveScale = viewScaleRef.current * Math.max(1, transform[2]) * (inversePan ? -1 : 1); const position = { - x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]), - y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]), + x: transform[0] - event.sourceEvent.movementX * moveScale, + y: transform[1] - event.sourceEvent.movementY * moveScale, }; const extent: CoordinateExtent = [ [0, 0], @@ -147,7 +150,7 @@ function MiniMap({ selection.on('zoom', null); }; } - }, [pannable, zoomable]); + }, [pannable, zoomable, inversePan, zoomStep]); const onSvgClick = onClick ? (event: MouseEvent) => { diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 394e466e..f86722ed 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -20,6 +20,8 @@ export type MiniMapProps = Omit, ' pannable?: boolean; zoomable?: boolean; ariaLabel?: string | null; + inversePan?: boolean; + zoomStep?: number; }; export interface MiniMapNodeProps {