@@ -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 {