✨ feat: 新增FlowViewProvider

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,11 @@
 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 { useFlowView } from '../hooks/useFlowView';
+import { FlowViewProvider } from '../provider/FlowViewProvider';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -229,14 +231,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) {
@@ -254,16 +254,27 @@ const ProFlowDemo = memo(() => {
     setEdges(edges);
   };
 
+  const res = useFlowView();
+  console.log(res.reactFlowInstance!.getNodes());
+
   return (
     <div className={styles.container}>
       <ProFlow
         onNodeDragStart={(e, node: any) => handleHighlight(node)}
         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,10 @@
+import { useContext } from 'react';
+import { FlowViewContext } from '../provider/provider';
+
+export const useFlowView = () => {
+  const { reactFlowInstance } = useContext(FlowViewContext);
+
+  return {
+    reactFlowInstance,
+  };
+};

src/ProFlow/index.tsx

@@ -1,29 +1,28 @@
-import React, { useCallback, useMemo, type MouseEvent as ReactMouseEvent } from 'react';
-import ReactFlow, {
-  Background,
-  BackgroundVariant,
-  Edge,
-  Node,
-  ReactFlowProvider,
-  useViewport,
-} from 'reactflow';
+import React, {
+  createContext,
+  useCallback,
+  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 { 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();
@@ -45,9 +44,8 @@ const Flow: React.FC<Partial<ProFlowProps>> = (props) => {
       };
     }
   }, [mapping, edges]);
-
-  // const [_edges] = useEdgesState(renderData.edges);
-
+  // const reactFlowInstance = useReactFlow();
+  // console.log(reactFlowInstance);
   const handleNodeDragStart = useCallback(
     (event: ReactMouseEvent, node: Node, nodes: Node[]) => {
       // TODO: 应当把事件中的 node 转换为 ProFlowNode 透出给用户
@@ -94,16 +92,9 @@ const Flow: React.FC<Partial<ProFlowProps>> = (props) => {
     >
       {miniMap && <ProFlowController 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,27 @@
+import { FC, ReactNode } from 'react';
+import { ReactFlowProvider, useReactFlow } from 'reactflow';
+import { FlowViewContext } from './provider';
+
+// 数据处理层
+const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
+  const reactFlowInstance = useReactFlow();
+
+  return (
+    <FlowViewContext.Provider
+      value={{
+        isUseProvider: true,
+        reactFlowInstance,
+      }}
+    >
+      {children}
+    </FlowViewContext.Provider>
+  );
+};
+
+export const FlowViewProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <ReactFlowProvider>
+      <ProviderInner>{children}</ProviderInner>
+    </ReactFlowProvider>
+  );
+};

src/ProFlow/provider/provider.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { ReactFlowInstance } from 'reactflow';
+
+interface FlowViewContextProps {
+  isUseProvider?: boolean;
+  reactFlowInstance?: ReactFlowInstance<any, any>;
+}
+
+export const FlowViewContext = createContext<FlowViewContextProps>({});

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';