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: (
+
+ 123
+
+ ),
+ 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(
} 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;
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';