✨ feat: 新增FlowViewProvider，新增miniMapHook (#20)

* 🐛 fix: readme

* ✨ feat: 新增FlowViewProvider

* ✨ feat: 新增minimap的控制钩子

* ✨ feat: 删除console

---------

Co-authored-by: jiangchu <[email protected]>

src/BloodNode/index.tsx

@@ -90,8 +90,6 @@ const BloodNode: React.FC<Partial<BloodNodeProps>> = ({
 }) => {
   const { styles, cx } = useStyles();
 
-  console.log(zoom);
-
   return (
     <>
       {label && (

src/ProFlow/FlowView.tsx

@@ -0,0 +1,21 @@
+import { ProFlowProps } from '@/constants';
+import { FC, useContext } from 'react';
+import FlowView from '.';
+import { FlowViewProvider } from './provider/FlowViewProvider';
+import { FlowViewContext } from './provider/provider';
+
+const ProFlow: FC<ProFlowProps> = (props) => {
+  const { isUseProvider } = useContext(FlowViewContext);
+
+  if (isUseProvider) {
+    return <FlowView {...props} />;
+  }
+
+  return (
+    <FlowViewProvider>
+      <FlowView {...props} />
+    </FlowViewProvider>
+  );
+};
+
+export default ProFlow;

src/ProFlow/demos/ProFlowDemo.tsx

@@ -1,9 +1,10 @@
 import { NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import ProFlow from '..';
+import { ProFlow } from '../../index';
+import { FlowViewProvider } from '../provider/FlowViewProvider';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -229,14 +230,12 @@ const edges: ProFlowEdge[] = [
   },
 ];
 
-const ProFlowDemo = memo(() => {
+const ProFlowDemo = () => {
   const [_nodes, setNodes] = useState<ProFlowNode[]>([...nodes]);
   const [_edges, setEdges] = useState<ProFlowEdge[]>([...edges]);
   const { styles } = useStyles();
 
   const handleHighlight = (node: ProFlowNode) => {
-    console.log(node);
-
     setEdges(
       edges.map((edge) => {
         if (edge.source === node.id || edge.target === node.id) {
@@ -261,9 +260,17 @@ const ProFlowDemo = memo(() => {
         onPaneClick={handleUnHighlight}
         nodes={_nodes}
         edges={_edges}
-      />
+      ></ProFlow>
     </div>
   );
-});
+};
+
+const FlowDemo = () => {
+  return (
+    <FlowViewProvider>
+      <ProFlowDemo />
+    </FlowViewProvider>
+  );
+};
 
-export default ProFlowDemo;
+export default FlowDemo;

src/ProFlow/helper.tsx

@@ -84,7 +84,6 @@ export function setNodePosition(nodes: Node[], edges: Edge[]) {
 }
 
 function sortEdges(edges: Edge[]) {
-  console.log(edges);
   const highEdges: Edge[] = edges.filter((item) => {
     return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected');
   });

src/ProFlow/hooks/useFlowView.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { FlowViewContext } from '../provider/provider';
+
+export const useFlowView = () => {
+  const { reactFlowInstance } = useContext(FlowViewContext);
+
+  return {
+    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,29 +1,30 @@
-import React, { useCallback, useMemo, type MouseEvent as ReactMouseEvent } from 'react';
-import ReactFlow, {
-  Background,
-  BackgroundVariant,
-  Edge,
-  Node,
-  ReactFlowProvider,
-  useViewport,
-} from 'reactflow';
+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;
-
+export const FlowContext = createContext({});
 const initFn = () => {};
 
-const Flow: React.FC<Partial<ProFlowProps>> = (props) => {
+const FlowView: React.FC<Partial<ProFlowProps>> = (props) => {
   const {
     onNodeDragStart = initFn,
     onPaneClick = initFn,
     onNodeClick = initFn,
     nodes,
     edges,
     miniMap = true,
+    children,
   } = props;
   const { styles, cx } = useStyles();
   const { zoom } = useViewport();
@@ -46,8 +47,10 @@ const Flow: React.FC<Partial<ProFlowProps>> = (props) => {
     }
   }, [mapping, edges]);
 
-  // const [_edges] = useEdgesState(renderData.edges);
+  const { miniMapPosition } = useContext(FlowViewContext);
 
+  // const reactFlowInstance = useReactFlow();
+  // console.log(reactFlowInstance);
   const handleNodeDragStart = useCallback(
     (event: ReactMouseEvent, node: Node, nodes: Node[]) => {
       // TODO: 应当把事件中的 node 转换为 ProFlowNode 透出给用户
@@ -92,18 +95,13 @@ const Flow: 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>
   );
 };
 
-const ProFlow: React.FC<Partial<ProFlowProps>> = (props) => {
-  return (
-    <ReactFlowProvider>
-      <Flow {...props} />
-    </ReactFlowProvider>
-  );
-};
-
-export default ProFlow;
+export default FlowView;

src/ProFlow/provider/FlowViewProvider.tsx

@@ -0,0 +1,30 @@
+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}
+    </FlowViewContext.Provider>
+  );
+};
+
+export const FlowViewProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <ReactFlowProvider>
+      <ProviderInner>{children}</ProviderInner>
+    </ReactFlowProvider>
+  );
+};

src/ProFlow/provider/provider.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+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,55 @@ 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;
+  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();

src/constants.tsx

@@ -51,6 +51,7 @@ export interface ProFlowProps {
   className?: string;
   style?: CSSProperties;
   miniMap?: boolean;
+  children?: React.ReactNode;
 }
 
 export interface ProFlowProps {

src/index.ts

@@ -7,7 +7,7 @@ export { FlowStoreProvider, type FlowEditorStoreProviderProps } from './FlowStor
 export * from './Input';
 export { NodeField, useNodeFieldStyles } from './NodeField';
 export type { ExtraAction } from './NodeField';
-export { default as ProFlow } from './ProFlow';
+export { default as ProFlow } from './ProFlow/FlowView';
 export { default as ProFlowController } from './ProFlowController';
 export { default as RadiusEdge } from './RadiusEdge';
 export * from './constants';