From d1f081d76f56c82e6377ba557fe16a3943c38f61 Mon Sep 17 00:00:00 2001
From: ModestFun <61576426+ModestFun@users.noreply.github.com>
Date: Sun, 7 Apr 2024 17:47:09 +0800
Subject: [PATCH] :bug: fix: demo fix, add onNodeInit (#99)

* :bug: fix: demo fix, add onNodeInit

* :bug: feat: add layout options params

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
---
 .../pipeline/multiPipe/{data.ts => data.tsx}     | 12 ++++++++++++
 .../demos/pipeline/multiPipe/pipelineDemo.tsx    |  2 +-
 docs/guide/demos/customEdge/data.ts              | 16 ++++++++++++++++
 docs/guide/flowEditor.zh-CN.md                   |  4 ++--
 src/FlowEditor/container/FlowEditor.tsx          |  3 ++-
 src/FlowView/constants.tsx                       | 16 ++++++++++++----
 src/index.ts                                     |  2 ++
 7 files changed, 47 insertions(+), 8 deletions(-)
 rename docs/caseShow/demos/pipeline/multiPipe/{data.ts => data.tsx} (94%)

diff --git a/docs/caseShow/demos/pipeline/multiPipe/data.ts b/docs/caseShow/demos/pipeline/multiPipe/data.tsx
similarity index 94%
rename from docs/caseShow/demos/pipeline/multiPipe/data.ts
rename to docs/caseShow/demos/pipeline/multiPipe/data.tsx
index 77ba116..cf3b26d 100644
--- a/docs/caseShow/demos/pipeline/multiPipe/data.ts
+++ b/docs/caseShow/demos/pipeline/multiPipe/data.tsx
@@ -148,6 +148,18 @@ export const edges = [
     animated: true,
     sourceHandle: 'a1',
     targetHandle: 'a2',
+    markerEnd: {
+      type: 'arrow',
+    },
+    label: (
+      <div style={{ color: 'red', width: '200px', height: '100px', backgroundColor: 'red' }}>
+        123
+      </div>
+    ),
+    markerStart: {
+      type: 'arrow',
+      // orient: 'auto-start-reverse'
+    },
   },
   {
     id: 'e2',
diff --git a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
index 782cdb1..7e0b722 100644
--- a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
+++ b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ant-design/pro-flow';
 import { useCallback } from 'react';
 import useStyles from '../../index.style';
-import { edges, nodes } from './data.ts';
+import { edges, nodes } from './data';
 import { PipeNode } from './pipeNode';
 
 const nodeTypes = { pipeNode: PipeNode };
diff --git a/docs/guide/demos/customEdge/data.ts b/docs/guide/demos/customEdge/data.ts
index bbcf50e..50a158c 100644
--- a/docs/guide/demos/customEdge/data.ts
+++ b/docs/guide/demos/customEdge/data.ts
@@ -17,6 +17,15 @@ export const nodes = [
       description: 'XXX_XXX_XXX_API',
     },
   },
+  {
+    id: 'a3',
+    label: 'a3',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
 ];
 
 export const getEdges = (className) => [
@@ -27,4 +36,11 @@ export const getEdges = (className) => [
     type: 'buttonEdge',
     className,
   },
+  {
+    id: 'e2',
+    source: 'a1',
+    target: 'a3',
+    type: 'buttonEdge',
+    className,
+  },
 ];
diff --git a/docs/guide/flowEditor.zh-CN.md b/docs/guide/flowEditor.zh-CN.md
index 951a973..81a5b6b 100644
--- a/docs/guide/flowEditor.zh-CN.md
+++ b/docs/guide/flowEditor.zh-CN.md
@@ -10,11 +10,11 @@ order: 2
 description:
 ---
 
-# FlowView - 图展示组件
+# FlowEditor - 图编辑组件
 
 ## 基本用法
 
-引入 FlowView 组件，即可在页面上获得一块带有小地图能力的的画布。
+引入 FlowEditor 组件，即可在页面上获得一块带有小地图能力的的画布。
 
 ```js
 import { FlowEditor } from '@ant-design/pro-flow';
diff --git a/src/FlowEditor/container/FlowEditor.tsx b/src/FlowEditor/container/FlowEditor.tsx
index a89b4c5..bed2571 100644
--- a/src/FlowEditor/container/FlowEditor.tsx
+++ b/src/FlowEditor/container/FlowEditor.tsx
@@ -166,8 +166,9 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       } else {
         instance.setViewport(defaultViewport);
       }
+    }, [nodesInitialized]);
 
-      // 然后设定初始化节点的相关状态
+    useEffect(() => {
       if (nodesInitialized) {
         onNodesInit?.(editor);
       }
diff --git a/src/FlowView/constants.tsx b/src/FlowView/constants.tsx
index b94cd49..ee05bce 100644
--- a/src/FlowView/constants.tsx
+++ b/src/FlowView/constants.tsx
@@ -48,10 +48,18 @@ export interface NodeMapItem<T = any, U extends string | undefined = string | un
 }
 
 export interface LayoutOptions {
-  rankdir?: 'TB' | 'BT' | 'LR' | 'RL';
-  align?: 'UL' | 'DL' | 'UR' | 'DR';
-  nodesep?: number;
-  ranksep?: number;
+  width?: number | undefined;
+  height?: number | undefined;
+  compound?: boolean | undefined;
+  rankdir?: string | undefined;
+  align?: string | undefined;
+  nodesep?: number | undefined;
+  edgesep?: number | undefined;
+  ranksep?: number | undefined;
+  marginx?: number | undefined;
+  marginy?: number | undefined;
+  acyclicer?: string | undefined;
+  ranker?: string | undefined;
 }
 
 export type NodeMapping = Record<string, NodeMapItem>;
diff --git a/src/index.ts b/src/index.ts
index 1acd835..01a48f5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,10 +3,12 @@ export {
   EdgeLabelRenderer,
   Handle,
   Position,
+  SmoothStepEdge,
   applyEdgeChanges,
   applyNodeChanges,
   getBezierPath,
   getSmoothStepPath,
+  getStraightPath,
 } from 'reactflow';
 export { default as Background } from './Background';
 export { default as BasicGroupNode } from './BasicGroupNode';