From 9303bf1b321ba7f13027536f779fde6c9b731a72 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:27:01 +0300 Subject: [PATCH 1/6] add inverse pan to minimap --- .../vite-app/src/examples/InteractiveMinimap/index.tsx | 7 +++++-- packages/minimap/src/MiniMap.tsx | 6 ++++-- packages/minimap/src/types.ts | 1 + 3 files changed, 10 insertions(+), 4 deletions(-) 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 { From 3663149e2bd5747ef670324b4646511857a6d4c6 Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:33:48 +0300 Subject: [PATCH 2/6] fix example styling --- .../vite-app/src/examples/InteractiveMinimap/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index fe920156..3b63ffae 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -152,8 +152,12 @@ const BasicFlow = () => { - - + + ); From 40139805f373699248bd0e4fa643f5f91447d67d Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:34:00 +0300 Subject: [PATCH 3/6] add zoom step to minimap --- packages/minimap/src/MiniMap.tsx | 5 +++-- packages/minimap/src/types.ts | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index a0743d5d..5e67e133 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -67,7 +67,8 @@ function MiniMap({ pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', - inversePan = false + inversePan = false, + zoomStep = 10 }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -107,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); diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 218ab99a..f86722ed 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -21,6 +21,7 @@ export type MiniMapProps = Omit, ' zoomable?: boolean; ariaLabel?: string | null; inversePan?: boolean; + zoomStep?: number; }; export interface MiniMapNodeProps { From 5da65313ecdc82b1e49baa05789d3a5a94ffb89d Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:42:19 +0300 Subject: [PATCH 4/6] fix memo --- examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 3 ++- packages/minimap/src/MiniMap.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index 3b63ffae..b09e89a1 100644 --- a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx +++ b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx @@ -104,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) => @@ -155,7 +156,7 @@ const BasicFlow = () => { - diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 5e67e133..103ac7a2 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -150,7 +150,7 @@ function MiniMap({ selection.on('zoom', null); }; } - }, [pannable, zoomable]); + }, [pannable, zoomable, inversePan, zoomStep]); const onSvgClick = onClick ? (event: MouseEvent) => { From b2f644b60aede6a0457edb9b8d8da51f8747600e Mon Sep 17 00:00:00 2001 From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:45:55 +0300 Subject: [PATCH 5/6] revert formatting --- examples/vite-app/src/examples/InteractiveMinimap/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vite-app/src/examples/InteractiveMinimap/index.tsx b/examples/vite-app/src/examples/InteractiveMinimap/index.tsx index b09e89a1..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, useState } from "react"; +import { MouseEvent, useCallback, useState } from 'react'; import ReactFlow, { MiniMap, Background, From c1448c2f7415dd3b4b2c54e05404c5ab24e8978d Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 24 Mar 2023 16:15:11 +0100 Subject: [PATCH 6/6] chore(changeset): add --- .changeset/rich-papayas-hope.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-papayas-hope.md 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