diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 18fa854a..fe920156 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) => @@ -137,7 +138,8 @@ const BasicFlow = () => { fitView > - +
@@ -151,6 +153,7 @@ const BasicFlow = () => { toggle classnames +
); diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 59b3f34d..a0743d5d 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -67,6 +67,7 @@ function MiniMap({ pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', + inversePan = false }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -120,9 +121,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], diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 394e466e..218ab99a 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -20,6 +20,7 @@ export type MiniMapProps = Omit, ' pannable?: boolean; zoomable?: boolean; ariaLabel?: string | null; + inversePan?: boolean; }; export interface MiniMapNodeProps {