Skip to content

Commit

Permalink
🐛 fix: demo fix, add onNodeInit
Browse files Browse the repository at this point in the history
  • Loading branch information
jiangchu committed Apr 7, 2024
1 parent 0f33eac commit 633ea9f
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down
16 changes: 16 additions & 0 deletions docs/guide/demos/customEdge/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => [
Expand All @@ -27,4 +36,11 @@ export const getEdges = (className) => [
type: 'buttonEdge',
className,
},
{
id: 'e2',
source: 'a1',
target: 'a3',
type: 'buttonEdge',
className,
},
];
4 changes: 2 additions & 2 deletions docs/guide/flowEditor.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ order: 2
description:
---

# FlowView - 图展示组件
# FlowEditor - 图编辑组件

## 基本用法

引入 FlowView 组件,即可在页面上获得一块带有小地图能力的的画布。
引入 FlowEditor 组件,即可在页面上获得一块带有小地图能力的的画布。

```js
import { FlowEditor } from '@ant-design/pro-flow';
Expand Down
3 changes: 2 additions & 1 deletion src/FlowEditor/container/FlowEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,9 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
} else {
instance.setViewport(defaultViewport);
}
}, [nodesInitialized]);

// 然后设定初始化节点的相关状态
useEffect(() => {
if (nodesInitialized) {
onNodesInit?.(editor);
}
Expand Down
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit 633ea9f

Please sign in to comment.