✨ feat: flow props (#47)

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>

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",

src/FlowView/hooks/useFlowView.ts

@@ -84,5 +84,6 @@ export const useFlowViewer = () => {
     zoomToNode,
     fitView,
     setMiniMapPosition,
+    instance: reactFlowInstance,
   };
 };

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}

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