Skip to content

Commit 8cca604

Browse files
lhbxslhbxs
authored
Merge pull request #1598 from alibaba/xflow
Xflow
2 parents d080897 + 633841b commit 8cca604

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+4941
-469
lines changed

‎docs/xflow/FlowProvider.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ group:
3535
- fitBounds：适应边界
3636
- screenToFlowPosition：将屏幕坐标转换为画布坐标
3737
- flowToScreenPosition：将画布坐标转换为屏幕坐标
38+
- runAutoLayout：自动布局节点
3839

3940
## useNodes
4041

‎docs/xflow/api.md

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,48 @@ title: API
77

88
## XFlow
99

10-
| 属性 | 描述 | 类型 | 默认值 |
10+
| 属性 | 描述 | 类型 | 默认值 |
1111
| ----------------- | ------------------------------------------ | ----------------------------------------------------------- | ------ |
1212
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
1313
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
1414
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
1515
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
1616
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
1717
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
18-
| configPanelWidth | 统一设置配置面板宽度 | `number` | 400 |
19-
| hideLineInsertBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
18+
| globalConfig | 全局的面板和节点配置 | {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge)} | |
19+
| logPanel | 日志面板配置 | [TLogPanel](#tlogpanel) | |
20+
| onNodeClick | 节点点击事件 | `NodeMouseHandler` | |
21+
| antdVersion | antd 的版本 | `V4 \| V5` | `V4` |
2022

21-
### TNodeGroup
23+
## TNodePanel
24+
25+
面板相关配置
26+
27+
| 属性 | 描述 | 类型 | 默认值 |
28+
| ----- | ------------ | ------------- | ------ |
29+
| width | 设置配置面板宽度 | `string \| number` | 400 |
30+
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
31+
32+
33+
34+
## TNodeView
35+
36+
节点相关配置
37+
38+
| 属性 | 描述 | 类型 | 默认值 |
39+
| ----- | ------------ | ------------- | ------ |
40+
| hideTitleTips | 是否隐藏节点标题的tooltip描述信息提示 | `boolean` | false |
41+
| status | 节点状态自定义配置,自定义节点不同状态的颜色展示。name:状态名称，color:颜色值。 | `Array<{name:string;color:string}>` | [] |
42+
43+
## TEdge
44+
45+
边的全局配置
46+
47+
| 属性 | 描述 | 类型 | 默认值 |
48+
| ----- | ------------ | ------------- | ------ |
49+
| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
50+
51+
## TNodeGroup
2252

2353
节点分组配置
2454

@@ -28,6 +58,28 @@ title: API
2858
| type | 分组类型 | `_group` | _group |
2959
| items | 节点配置信息 | `TNodeItem[]` | |
3060

61+
## TLogPanel
62+
63+
日志面板配置
64+
65+
| 属性 | 描述 | 类型 | 默认值 |
66+
| ----- | ------------ | ------------- | ------ |
67+
| logList | 日志面板数据 | [TLogListItem](#tloglistitem) | |
68+
| loading | 日志面板loading效果 | `boolean` | false |
69+
| logWidget | 自定义日志面板展示 | `string` | |
70+
71+
## TLogListItem
72+
73+
日志面板数据格式
74+
75+
| 属性 | 描述 | 类型 | 默认值 |
76+
| ----- | ------------ | ------------- | ------ |
77+
| statusPanel | 日志面板数据,isBadge是否以badge形式展示状态 | `{status: Array<{ label: string; value?: string; isBadge?: boolean }>;extra?: string \| ReactNode}` | |
78+
| codePanel | 代码面板数据渲染，如果没有 codePanel，则不渲染代码面板。title:代码面板标题，code:代码面板数据 | `Array<{ title: string; code: string }>` | |
79+
| nodeId | 节点ID，必填 | `string` | |
80+
81+
82+
3183
## TNodeItem
3284

3385
单个节点配置
@@ -37,15 +89,14 @@ title: API
3789
| title | 节点名称 | `string` | |
3890
| type | 节点类型 | `string` | |
3991
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
40-
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
4192
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
4293
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
4394
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
4495
| iconSvg | 节点的图标配置Svg格式 | `SVGSVGElement` | |
4596
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
4697
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
4798
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
48-
| nodeConfigPanelWidth | 单独设置节点配置面板宽度 | `string` | 400 |
99+
| nodePanel | 自定义节点的面板配置信息 | [TNodePanel](#tnodepanel) | |
49100

50101
## TNodeSelector
51102

‎docs/xflow/demo/layout/LR/index.tsx

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,8 @@
11
import XFlow from '@xrenders/xflow';
2-
import settings from './setting';
2+
import { settings,nodes,edges } from './setting';
33
import React from 'react';
44

55
export default () => {
6-
const nodes = [
7-
{
8-
type: 'Start',
9-
id: '1',
10-
position: { x: -35, y: 268 },
11-
},
12-
{
13-
type: 'Switch',
14-
id: '2',
15-
position: { x: 277.5, y: 268 },
16-
},
17-
{
18-
type: 'Code',
19-
id: '3',
20-
position: { x: 675, y: 123.75 },
21-
},
22-
{
23-
type: 'tool',
24-
id: '4',
25-
position: { x: 686.25, y: 495 },
26-
},
27-
{
28-
type: 'End',
29-
id: '5',
30-
position: { x: 1176.2499999999998, y: 281.25 },
31-
},
32-
];
33-
const edges = [
34-
{ source: '1', target: '2', id: 'e1-2' },
35-
{
36-
source: '2',
37-
target: '3',
38-
id: 'e2-3',
39-
},
40-
{ source: '2', target: '4', id: 'e2-4' },
41-
{
42-
source: '3',
43-
target: '5',
44-
id: 'e3-5',
45-
},
46-
{
47-
source: '4',
48-
target: '5',
49-
id: 'e4-5',
50-
},
51-
];
526

537
return (
548
<div style={{ height: '600px' }}>

‎docs/xflow/demo/layout/LR/setting.tsx

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default [
1+
export const settings=[
22
{
33
title: '开始',
44
type: 'Start',
@@ -197,3 +197,70 @@ export default [
197197
],
198198
},
199199
];
200+
201+
202+
export const nodes = [
203+
{
204+
type: 'Start',
205+
id: '1',
206+
position: { x: -35, y: 268 },
207+
},
208+
{
209+
type: 'Switch',
210+
id: 'b6zsd6w5ah2b209t',
211+
position: { x: 277.5, y: 268 },
212+
data: {
213+
list: [
214+
{
215+
_conditionId: 'iawoyh5niyi6zjob',
216+
},
217+
],
218+
},
219+
},
220+
{
221+
type: 'Code',
222+
id: '3',
223+
position: { x: 675, y: 123.75 },
224+
},
225+
{
226+
type: 'tool',
227+
id: '4',
228+
position: { x: 686.25, y: 495 },
229+
},
230+
{
231+
type: 'End',
232+
id: '5',
233+
position: { x: 1176.2499999999998, y: 281.25 },
234+
},
235+
];
236+
export const edges = [
237+
{
238+
source: '3',
239+
target: '5',
240+
id: 'e3-5',
241+
},
242+
{
243+
source: '4',
244+
target: '5',
245+
id: 'e4-5',
246+
},
247+
{
248+
id: 'px7fsmha99pju315',
249+
source: '1',
250+
target: 'b6zsd6w5ah2b209t',
251+
},
252+
{
253+
type: 'buttonedge',
254+
source: 'b6zsd6w5ah2b209t',
255+
sourceHandle: 'iawoyh5niyi6zjob',
256+
target: '3',
257+
id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',
258+
},
259+
{
260+
type: 'buttonedge',
261+
source: 'b6zsd6w5ah2b209t',
262+
sourceHandle: 'condition_else',
263+
target: '4',
264+
id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
265+
},
266+
];

‎docs/xflow/demo/layout/TB/index.tsx

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,7 @@
11
import XFlow from '@xrenders/xflow';
2-
import settings from './setting';
3-
import React from 'react';
2+
import { edges, nodes, settings } from './setting';
43

54
export default () => {
6-
const nodes = [
7-
{
8-
type: 'Start',
9-
id: '1',
10-
position: { x: 327.5, y: -14.5 },
11-
},
12-
{
13-
type: 'Switch',
14-
id: '2',
15-
position: { x: 328.75, y: 108 },
16-
},
17-
{
18-
type: 'Code',
19-
id: '3',
20-
position: { x: 638.75, y: 247.5 },
21-
},
22-
{
23-
type: 'tool',
24-
id: '4',
25-
position: { x: 75.00000000000003, y: 261.25 },
26-
},
27-
{
28-
type: 'End',
29-
id: '5',
30-
position: { x: 360, y: 501.25 },
31-
},
32-
];
33-
const edges = [
34-
{
35-
source: '1',
36-
target: '2',
37-
id: 'e1-2',
38-
},
39-
{
40-
source: '2',
41-
target: '3',
42-
id: 'e2-3',
43-
},
44-
{
45-
source: '2',
46-
target: '4',
47-
id: 'e2-4',
48-
},
49-
{
50-
source: '3',
51-
target: '5',
52-
id: 'e3-5',
53-
},
54-
{
55-
source: '4',
56-
target: '5',
57-
id: 'e4-5',
58-
},
59-
];
60-
615
return (
626
<div style={{ height: '600px' }}>
637
<XFlow
@@ -66,7 +10,7 @@ export default () => {
6610
nodeSelector={{
6711
showSearch: true,
6812
}}
69-
layout="LR"
13+
layout="TB"
7014
/>
7115
</div>
7216
);

0 commit comments

Comments
 (0)