diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
index 7854d94..ed16d38 100644
--- a/src/ProFlow/demos/ProFlowDemo.tsx
+++ b/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 (
{
reactFlowInstance,
};
};
+
+export const useMiniMap = () => {
+ const { setMiniMapPosition: setPosition } = useContext(FlowViewContext);
+
+ const setMiniMapPosition = (x: number, y: number) => {
+ setPosition!([x, y]);
+ };
+
+ return {
+ setMiniMapPosition,
+ };
+};
diff --git a/src/ProFlow/index.tsx b/src/ProFlow/index.tsx
index 780585c..9442822 100644
--- a/src/ProFlow/index.tsx
+++ b/src/ProFlow/index.tsx
@@ -1,6 +1,7 @@
import React, {
createContext,
useCallback,
+ useContext,
useMemo,
type MouseEvent as ReactMouseEvent,
} from 'react';
@@ -8,6 +9,7 @@ import ReactFlow, { Background, BackgroundVariant, Edge, Node, useViewport } fro
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> = (props) => {
};
}
}, [mapping, edges]);
+
+ const { miniMapPosition } = useContext(FlowViewContext);
+
// const reactFlowInstance = useReactFlow();
// console.log(reactFlowInstance);
const handleNodeDragStart = useCallback(
@@ -90,7 +95,9 @@ const FlowView: React.FC> = (props) => {
fitView
minZoom={MIN_ZOOM}
>
- {miniMap && }
+ {miniMap && (
+
+ )}
{children}
diff --git a/src/ProFlow/provider/FlowViewProvider.tsx b/src/ProFlow/provider/FlowViewProvider.tsx
index abcb09a..2c366b3 100644
--- a/src/ProFlow/provider/FlowViewProvider.tsx
+++ b/src/ProFlow/provider/FlowViewProvider.tsx
@@ -1,9 +1,10 @@
-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 (
@@ -11,6 +12,8 @@ const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
value={{
isUseProvider: true,
reactFlowInstance,
+ miniMapPosition,
+ setMiniMapPosition,
}}
>
{children}
diff --git a/src/ProFlow/provider/provider.ts b/src/ProFlow/provider/provider.ts
index f2ea101..5570bfb 100644
--- a/src/ProFlow/provider/provider.ts
+++ b/src/ProFlow/provider/provider.ts
@@ -4,6 +4,8 @@ import { ReactFlowInstance } from 'reactflow';
interface FlowViewContextProps {
isUseProvider?: boolean;
reactFlowInstance?: ReactFlowInstance;
+ miniMapPosition?: [number, number];
+ setMiniMapPosition?: React.Dispatch>;
}
export const FlowViewContext = createContext({});
diff --git a/src/ProFlowController/index.tsx b/src/ProFlowController/index.tsx
index 018ea13..f8aad7d 100644
--- a/src/ProFlowController/index.tsx
+++ b/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> = (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();