✨ feat: 新增minimap的控制钩子

src/ProFlow/demos/ProFlowDemo.tsx

@@ -4,7 +4,6 @@ import { createStyles } from 'antd-style';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { ProFlow } from '../../index';
-import { useFlowView } from '../hooks/useFlowView';
 import { FlowViewProvider } from '../provider/FlowViewProvider';
 
 const useStyles = createStyles(({ css }) => ({
@@ -254,9 +253,6 @@ const ProFlowDemo = () => {
     setEdges(edges);
   };
 
-  const res = useFlowView();
-  console.log(res.reactFlowInstance!.getNodes());
-
   return (
     <div className={styles.container}>
       <ProFlow

src/ProFlow/hooks/useFlowView.ts

@@ -8,3 +8,15 @@ export const useFlowView = () => {
     reactFlowInstance,
   };
 };
+
+export const useMiniMap = () => {
+  const { setMiniMapPosition: setPosition } = useContext(FlowViewContext);
+
+  const setMiniMapPosition = (x: number, y: number) => {
+    setPosition!([x, y]);
+  };
+
+  return {
+    setMiniMapPosition,
+  };
+};

src/ProFlow/index.tsx

@@ -1,13 +1,15 @@
 import React, {
   createContext,
   useCallback,
+  useContext,
   useMemo,
   type MouseEvent as ReactMouseEvent,
 } from 'react';
 import ReactFlow, { Background, BackgroundVariant, Edge, Node, useViewport } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { ProFlowController, ProFlowProps } from '../index';
 import { convertMappingFrom, getRenderData } from './helper';
+import { FlowViewContext } from './provider/provider';
 import { useStyles } from './styles';
 
 const MIN_ZOOM = 0.1;
@@ -44,6 +46,9 @@ const FlowView: React.FC<Partial<ProFlowProps>> = (props) => {
       };
     }
   }, [mapping, edges]);
+
+  const { miniMapPosition } = useContext(FlowViewContext);
+
   // const reactFlowInstance = useReactFlow();
   // console.log(reactFlowInstance);
   const handleNodeDragStart = useCallback(
@@ -90,7 +95,9 @@ const FlowView: React.FC<Partial<ProFlowProps>> = (props) => {
       fitView
       minZoom={MIN_ZOOM}
     >
-      {miniMap && <ProFlowController className={'pro-flow-controller'} />}
+      {miniMap && (
+        <ProFlowController position={miniMapPosition} className={'pro-flow-controller'} />
+      )}
       <Background id="1" gap={10} color="#f1f1f1" variant={BackgroundVariant.Lines} />
       {children}
     </ReactFlow>

src/ProFlow/provider/FlowViewProvider.tsx

@@ -1,16 +1,19 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import { ReactFlowProvider, useReactFlow } from 'reactflow';
 import { FlowViewContext } from './provider';
 
 // 数据处理层
 const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
+  const [miniMapPosition, setMiniMapPosition] = useState<[number, number]>([0, 0]);
   const reactFlowInstance = useReactFlow();
 
   return (
     <FlowViewContext.Provider
       value={{
         isUseProvider: true,
         reactFlowInstance,
+        miniMapPosition,
+        setMiniMapPosition,
       }}
     >
       {children}

src/ProFlow/provider/provider.ts

@@ -4,6 +4,8 @@ import { ReactFlowInstance } from 'reactflow';
 interface FlowViewContextProps {
   isUseProvider?: boolean;
   reactFlowInstance?: ReactFlowInstance<any, any>;
+  miniMapPosition?: [number, number];
+  setMiniMapPosition?: React.Dispatch<React.SetStateAction<[number, number]>>;
 }
 
 export const FlowViewContext = createContext<FlowViewContextProps>({});

src/ProFlowController/index.tsx

@@ -4,50 +4,56 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 import { MiniMap, useReactFlow, useViewport } from 'reactflow';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    position: absolute;
-    bottom: 0px;
-    z-index: 100;
-    right: 10px;
-    transition: right 0.2s ease;
-  `,
+const useStyles = createStyles(({ css }, props: { x: number; y: number }) => {
+  const { x, y } = props;
+  console.log(x, y);
+  return {
+    container: css`
+      position: absolute;
+      bottom: ${y}px;
+      right: ${10 + x}px;
 
-  visible: css`
-    right: 387px;
-  `,
+      z-index: 100;
+      transition: right 0.2s ease;
+    `,
 
-  controlAction: css`
-    height: 80px;
-    padding: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `,
+    visible: css`
+      right: 387px;
+    `,
 
-  measureMap: css`
-    border-radius: 4px;
-    height: 180px;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    right: 0;
-    bottom: 0;
-    position: relative;
-  `,
-}));
+    controlAction: css`
+      height: 80px;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+
+    measureMap: css`
+      border-radius: 4px;
+      height: 180px;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      margin: 0;
+      right: 0;
+      bottom: 0;
+      position: relative;
+    `,
+  };
+});
 
 interface ProFlowControllerProps {
   visible?: boolean;
   className?: string;
+  position?: [number, number];
 }
 
 const ProFlowController: React.FC<Partial<ProFlowControllerProps>> = (props) => {
-  const { visible = false, className = '' } = props;
+  const { visible = false, className = '', position = [0, 0] } = props;
   const reactFlow = useReactFlow();
   const { zoom } = useViewport();
-  const { styles, cx } = useStyles();
+  const { styles, cx } = useStyles({ x: position[0], y: position[1] });
 
   const handleZoomIn = () => {
     reactFlow.zoomIn();