From 6121ceea948ddd4c69f9e28e7ad063cf8844b1c7 Mon Sep 17 00:00:00 2001
From: ModestFun <61576426+ModestFun@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:34:47 +0800
Subject: [PATCH] :sparkles: feat: flow props (#47)

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
---
 package.json                      | 1 +
 src/FlowView/hooks/useFlowView.ts | 1 +
 src/FlowView/index.tsx            | 2 ++
 src/constants.tsx                 | 9 +++++++--
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c5b8157..b7b22eb 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
   "dependencies": {
     "@ant-design/icons": "^5",
     "@ant-design/pro-editor": "latest",
+    "@ant-design/pro-flow": "^0.15.0",
     "@babel/runtime": "^7",
     "@dagrejs/dagre": "^1.0.4",
     "@dnd-kit/core": "^6.1.0",
diff --git a/src/FlowView/hooks/useFlowView.ts b/src/FlowView/hooks/useFlowView.ts
index 575fc8f..8c5a3ac 100644
--- a/src/FlowView/hooks/useFlowView.ts
+++ b/src/FlowView/hooks/useFlowView.ts
@@ -84,5 +84,6 @@ export const useFlowViewer = () => {
     zoomToNode,
     fitView,
     setMiniMapPosition,
+    instance: reactFlowInstance,
   };
 };
diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx
index 047caa0..d892220 100644
--- a/src/FlowView/index.tsx
+++ b/src/FlowView/index.tsx
@@ -34,6 +34,7 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
     background = true,
     autoLayout = true,
     stepLessZooming = true,
+    flowProps,
   } = props;
   const {
     miniMapPosition,
@@ -117,6 +118,7 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
       panOnScroll
       fitView
       minZoom={MIN_ZOOM}
+      {...flowProps}
     >
       {miniMap && <MiniMap position={miniMapPosition} className={'pro-flow-controller'} />}
       {children}
diff --git a/src/constants.tsx b/src/constants.tsx
index 29f8fbf..fe377fa 100644
--- a/src/constants.tsx
+++ b/src/constants.tsx
@@ -1,5 +1,9 @@
-import React, { type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react';
-import { Edge, EdgeProps, Node, NodeProps } from 'reactflow';
+import React, {
+  ComponentProps,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
+import ReactFlow, { Edge, EdgeProps, Node, NodeProps } from 'reactflow';
 import { NodeMapItem } from './FlowView/constants';
 
 export enum SelectType {
@@ -80,6 +84,7 @@ export interface FlowViewProps {
   onPaneClick?: (event: ReactMouseEvent) => void;
   onNodeClick?: (event: ReactMouseEvent, node: Node) => void;
   onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
+  flowProps?: ComponentProps<typeof ReactFlow>;
   nodes: FlowViewNode[];
   edges: FlowViewEdge[];
   nodeTypes?: Record<string, React.ComponentType<NodeProps>>;