Skip to content

Commit 8ccb867

Browse files
lhbxslhbxs
authored
Merge pull request #1591 from alibaba/xflow
Xflow
2 parents ca45064 + 709f02b commit 8ccb867

File tree

47 files changed

+842
-501
lines changed

Some content is hidden

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

47 files changed

+842
-501
lines changed

‎docs/xflow/FlowProvider.md‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,50 @@
11
---
22
order: 3
3-
title: '多实例画布'
3+
title: '<FlowProvider/>'
44
mobile: false
55
group:
66
title: 最佳展示
77
order: 4
88
---
99

10-
# 基础交互
10+
## 基础交互
11+
12+
`<FlowProvider/>` 组件是一个 Context Provider，使得在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。
1113

1214
<code src="./demo/flow-provider/index.tsx"></code>
15+
16+
## useFlow
17+
18+
`useFlow()` 钩子返回 XFlow 实例，包含了一些实用的内部方法。
19+
20+
- setNodes：设置节点
21+
- addNodes：添加一个或多个节点
22+
- setEdges：设置边
23+
- addEdges：添加一个或多个边
24+
- getNodes：获取节点数据
25+
- getEdges：获取边数据
26+
- toObject：将画布数据转换为对象返回
27+
- zoomIn：放大画布
28+
- zoomOut：缩小画布
29+
- zoomTo：缩放画布
30+
- getZoom：获取缩放比例
31+
- setViewport：设置视口
32+
- getViewport：获取视口
33+
- fitView：适应画布
34+
- setCenter：设置画布中心
35+
- fitBounds：适应边界
36+
- screenToFlowPosition：将屏幕坐标转换为画布坐标
37+
- flowToScreenPosition：将画布坐标转换为屏幕坐标
38+
39+
## useNodes
40+
41+
`useFlow` 的 `getNodes` 是瞬时值。想要监听节点状态，请使用 `useNodes` 钩子来返回实时 nodes 状态。
42+
43+
## useEdges
44+
45+
`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。
46+
47+
## 注意
48+
49+
- 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `<FlowProvider/>` 组件放置在路由器外部是至关重要的。
50+
- 如果在同一页面上有多个 `<XFlow/>`，则需要为每个 `<XFlow/>` 使用单独的 `<FlowProvider/>`

‎docs/xflow/api.md‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ title: API
77

88
## XFlow
99

10-
| 属性 | 描述 | 类型 | 默认值 |
11-
| ------------- | ------------------------------------ | ----------------------------------------------------------- | ------ |
12-
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
13-
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
14-
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
15-
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
16-
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`
17-
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
18-
| |
10+
| 属性 | 描述 | 类型 | 默认值 |
11+
| ----------------- | ------------------------------------------ | ----------------------------------------------------------- | ------ |
12+
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
13+
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
14+
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
15+
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
16+
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
17+
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
18+
| configPanelWidth | 统一设置配置面板宽度 | `number` | 400 |
19+
| hideLineInsertBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
1920

2021
### TNodeGroup
2122

@@ -31,17 +32,20 @@ title: API
3132

3233
单个节点配置
3334

34-
| 属性 | 描述 | 类型 | 默认值 |
35-
| ------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
36-
| title | 节点名称 | `string` | |
37-
| type | 节点类型 | `string` | |
38-
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
39-
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
40-
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
41-
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
42-
| 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> | |
43-
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
44-
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
35+
| 属性 | 描述 | 类型 | 默认值 |
36+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
37+
| title | 节点名称 | `string` | |
38+
| type | 节点类型 | `string` | |
39+
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
40+
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
41+
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
42+
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
43+
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
44+
| iconSvg | 节点的图标配置Svg格式 | `SVGSVGElement` | |
45+
| 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> | |
46+
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
47+
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
48+
| nodeConfigPanelWidth | 单独设置节点配置面板宽度 | `string` | 400 |
4549

4650
## TNodeSelector
4751

‎docs/xflow/demo/flow-provider/index.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import * as React from "react";
22

33
import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
44
import { edges as initialEdges } from './edges';
@@ -7,18 +7,18 @@ import settings from './setting';
77

88
const App = () => {
99
return (
10-
<FlowProvider>
11-
<div style={{ height: '600px' }}>
12-
<XFlow
13-
initialValues={{ nodes: initialNodes, edges: initialEdges }}
14-
settings={settings}
15-
nodeSelector={{
16-
showSearch: true,
17-
}}
18-
/>
19-
</div>
20-
<Sidebar />
21-
</FlowProvider>
10+
<FlowProvider>
11+
<div style={{ height: '600px' }}>
12+
<XFlow
13+
initialValues={{ nodes: initialNodes, edges: initialEdges }}
14+
settings={settings as any[]}
15+
nodeSelector={{
16+
showSearch: true,
17+
}}
18+
/>
19+
</div>
20+
<Sidebar />
21+
</FlowProvider>
2222
);
2323
};
2424

@@ -30,9 +30,9 @@ function Sidebar() {
3030
return (
3131
<aside>
3232
{nodes?.map(node => (
33-
<div key={node.id}>
34-
Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
35-
{node.position.y.toFixed(2)}
33+
<div key={node?.id}>
34+
Node {node?.id} - x: {node?.position?.x?.toFixed(2)}, y:{' '}
35+
{node?.position?.y?.toFixed(2)}
3636
</div>
3737
))}
3838
</aside>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ export default () => {
6262
<div style={{ height: '600px' }}>
6363
<XFlow
6464
initialValues={{ nodes, edges }}
65-
settings={settings}
65+
settings={settings as any}
6666
nodeSelector={{
6767
showSearch: true,
6868
}}
69-
layout="TB"
69+
layout="LR"
7070
/>
7171
</div>
7272
);

0 commit comments

Comments
 (0)