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();