Merge branch 'main' into feat/packages

packages/minimap/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @reactflow/minimap
 
+## 11.5.0
+
+### Minor Changes
+
+- [#2944](https://github.com/wbkd/react-flow/pull/2944) Thanks [@Elringus](https://github.com/Elringus)! - add `inversePan` and `zoomStep` props
+
+### Patch Changes
+
+- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
+  - @reactflow/core@11.7.0
+
+## 11.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.4.0
 
 ### Minor Changes

packages/minimap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.4.0",
+  "version": "11.5.0",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",

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<SVGSVGElement>(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) => {

packages/minimap/src/types.ts

@@ -20,6 +20,8 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   pannable?: boolean;
   zoomable?: boolean;
   ariaLabel?: string | null;
+  inversePan?: boolean;
+  zoomStep?: number;
 };
 
 export interface MiniMapNodeProps {