Skip to content

Commit 0d12aaa

Browse files
lyn-boyulyn-boyu
committed
docs: add custom panel
1 parent df04d4c commit 0d12aaa

File tree

13 files changed

+261
-45
lines changed

13 files changed

+261
-45
lines changed

‎packages/xflow-core/src/common/rx-model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export namespace NsModel {
1616
export interface IModel<T> {
1717
/** 传入一个回调函数来订阅model的变化 */
1818
watch: IWatch<T>
19-
/** 更新model：有两种更新模式 */
19+
/** 更新model: 支持传值或者传入更新函数 */
2020
setValue: ISetValue<T>
2121
/** 获取model的值 */
2222
getValue: () => T | EmptyType

‎packages/xflow-docs/.umirc.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default defineConfig({
88
logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
99
favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
1010
// publicPath: process.env.NODE_ENV === 'production' ? basementPublicPath : '/',
11+
1112
runtimePublicPath: true,
1213
resolve: {
1314
includes: ['docs'],
@@ -36,16 +37,9 @@ export default defineConfig({
3637
['en-US', 'English'],
3738
],
3839
navs: {
39-
'zh-CN': [
40-
null,
41-
{ title: 'GitHub', path: 'https://github.com/alibaba/hooks' },
42-
{ title: '更新日志', path: 'https://github.com/alibaba/hooks/releases' },
43-
],
44-
'en-US': [
45-
null,
46-
{ title: 'GitHub', path: 'https://github.com/alibaba/hooks' },
47-
{ title: 'Changelog', path: 'https://github.com/alibaba/hooks/releases' },
48-
],
40+
zh: [null, { title: 'GitHub', path: 'https://github.com/antvis/XFlow' }],
41+
'zh-CN': [null, { title: 'GitHub', path: 'https://github.com/antvis/XFlow' }],
42+
'en-US': [null, { title: 'GitHub', path: 'https://github.com/antvis/XFlow' }],
4943
},
5044
styles: ['.__dumi-default-previewer-demo{ min-height: 290px }'],
5145
/** css */

‎packages/xflow-docs/docs/api/interface/hook.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@ nav:
1717
/** 如何引入？ */
1818
import { IHookService } from '@antv/xflow'
1919

20-
/** 边数据 */
20+
/** 钩子服务 */
2121
export interface IHookService<T = IHooks> {
22+
/** 注册一个新的插槽 */
2223
registerHookHub: (hookName: string, hook: HookHub) => Disposable
24+
/** 在插槽中插入一个钩子 */
2325
registerHook: (registerHookFunc: IRegsiterHookFn<T>) => Disposable
26+
/** 钩子服务返回所有钩子 */
2427
hookProvider: () => T
2528
}
2629
```

‎packages/xflow-docs/docs/api/interface/model.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,24 @@ export interface IModelService {
2929
findDeferredModel: <T = any>(token: Token<T>) => undefined | Deferred<NsModel.IModel<T>>
3030
}
3131
```
32+
33+
## IModel
34+
35+
```tsx | pure
36+
import { NsModel } from '@ali/xflow'
37+
// NsModel.IModel
38+
39+
/** model的类型 */
40+
export interface IModel<T> {
41+
/** 传入一个回调函数来订阅model的变化 */
42+
watch: IWatch<T>
43+
/** 更新model: 支持传值或者传入更新函数 */
44+
setValue: ISetValue<T>
45+
/** 获取model的值 */
46+
getValue: () => T | EmptyType
47+
/** 是否有非空的值 */
48+
hasValidValue: () => boolean
49+
/** 通过Promise获取一个非空值 */
50+
getValidValue: () => Promise<T>
51+
}
52+
```

‎packages/xflow-docs/docs/index.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ banner:
77
image: https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*Gix7Rry3-5wAAAAAAAAAAABkARQnAQ
88
actions:
99
- text: 快速开始 ->
10-
link: /docs/tutorial/quick-start
10+
link: /docs/tutorial/intro/getting-started
1111
type: primary
1212
notifications:
1313
- type: Heavy Released

‎packages/xflow-docs/docs/index.zh-CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ banner:
77
image: https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*Gix7Rry3-5wAAAAAAAAAAABkARQnAQ
88
actions:
99
- text: 快速开始 ->
10-
link: /docs/tutorial/quick-start
10+
link: /docs/tutorial/intro/getting-started
1111
type: primary
1212
notifications:
1313
- type: Heavy Released

‎packages/xflow-docs/docs/index.zh.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ banner:
77
image: https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*Gix7Rry3-5wAAAAAAAAAAABkARQnAQ
88
actions:
99
- text: 快速开始 ->
10-
link: /docs/tutorial/quick-start
10+
link: /docs/tutorial/intro/getting-started
1111
type: primary
1212
notifications:
1313
- type: Heavy Released

‎packages/xflow-docs/docs/tutorial/advanced/command/index.md‎

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Command
3+
order: 2
34
group:
45
path: /tutorial-advanced
56
title: 自定义组件
@@ -12,10 +13,64 @@ nav:
1213

1314
## Command
1415

16+
<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*_74NSZjuTTQAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 75%"/>
17+
1518
### 概念说明
1619

17-
Command 是
20+
Command 是解耦 UI 组件和 Graph 的关键，所有对 Graph 的操作都通过 CommandService.executeCommand 来完成，我们需要知道：
21+
22+
1. 如何获取 CommandService
23+
2. 如何调用 CommandService
24+
3. 如何使用类型
25+
26+
### 如何使用
27+
28+
### 如何获取 CommandService
29+
30+
CommandService 在 XFlow 内部无处不在，入口分为两种：
31+
32+
1. React 组件内部使用： 通过 useXFlowApp 来获取 CommandService
33+
2. XFlow 组件的配置项中使用：通过函数的参数可以获得 CommandService
34+
35+
#### 第一种：React 组件内部使用
36+
37+
在 XFlow 组件内部我们可以获得 App App 上就有 CommandService 可以使用
38+
39+
```tsx | pure
40+
import { useXFlowApp, XFlowGraphCommands, NsGraphCmd } from '@antv/xflow'
41+
42+
export const GroupNode: NsGraph.INodeRender = props => {
43+
const { cell } = props
44+
const app = useXFlowApp()
45+
return (
46+
<div classname="node">
47+
<button
48+
onClick={() => {
49+
app.executeCommand<NsGraphCmd.GraphMeta.IArgs>(XFlowGraphCommands.LOAD_META.id, {})
50+
}}
51+
>
52+
ExecCommand
53+
</button>
54+
</div>
55+
)
56+
}
57+
```
58+
59+
#### 第二种：组件的配置项中使用
60+
61+
XFlow 的所有组件配置的所有事件函数的参数中都包含了 CommandService，比如 setEvents 的时候，仔细看下 IEvent 的函数签名
1862

19-
### 如何扩展
63+
```tsx | pure
64+
import { createGraphConfig } from '@antv/xflow'
2065

21-
通过以下的方式可以扩展 Command
66+
export const useGraphConfig = createGraphConfig(config => {
67+
const event: IEvent<'node:click'> = {
68+
eventName: 'node:click',
69+
callback: (eventArgs, commandService) => {
70+
console.log('node:click', e)
71+
},
72+
}
73+
/** 这里绑定事件 */
74+
config.setEvents([event])
75+
})
76+
```

‎packages/xflow-docs/docs/tutorial/advanced/hook/index.md‎

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Hook
3+
order: 5
34
group:
45
path: /tutorial-advanced
56
title: 自定义组件
@@ -12,10 +13,80 @@ nav:
1213

1314
## Hook
1415

16+
<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*_74NSZjuTTQAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 75%"/>
17+
1518
### 概念说明
1619

17-
Hook 是
20+
在 XFlow 中扩展逻辑都是通过 Hook 来完成，XFlow 内部可以注册 Hook 逻辑来完成对 Graph 配置和 Command 的 扩展
21+
22+
1. 如何新建 Hook 的配置项
23+
2. 有哪些 hook 可以使用
24+
25+
### 如何使用
26+
27+
### 如何新建 Hook 的配置项
28+
29+
```tsx | pure
30+
import type { NsGraph } from '@antv/xflow'
31+
import { XFlow, createHookConfig, DisposableCollection } from '@antv/xflow'
32+
33+
export const useGraphHookConfig = createHookConfig(config => {
34+
config.setRegisterHook(hooks => {
35+
const disposableList = [
36+
// 注册增加 graph options
37+
hooks.graphOptions.registerHook({
38+
name: 'custom-x6-options',
39+
// before: 'dag-extension-x6-options',
40+
handler: async options => {
41+
options.grid = false
42+
options.keyboard = {
43+
enabled: true,
44+
}
45+
},
46+
}),
47+
]
48+
const toDispose = new DisposableCollection()
49+
toDispose.pushAll(disposableList)
50+
return toDispose
51+
})
52+
})
53+
54+
export const Demo = () => {
55+
const graphHooksConfig = useGraphHookConfig(props)
56+
return <XFlow hookConfig={graphHooksConfig}></XFlow>
57+
}
58+
```
59+
60+
### 有哪些 hook 可以使用
61+
62+
Hook 可以分为两种类型：
63+
64+
1. GraphHook： 配置 Graph 相关的配置项
65+
2. CommandHook：配置可以修改 Command 参数的逻辑
66+
67+
#### GraphHook
68+
69+
```tsx | pure
70+
type IHooks = {
71+
/* x6 graph 配置项 */
72+
graphOptions: HookHub<Graph.Options>
73+
/* 绑定X6的事件 */
74+
x6Events: HookHub<IEventCollection, IEventSubscription>
75+
/* 自定义节点React组件 */
76+
reactNodeRender: HookHub<Map<string, NsGraph.INodeRender>>
77+
/* 自定义连线label的React组件 */
78+
reactEdgeLabelRender: HookHub<Map<string, NsGraph.IEdgeRender>>
79+
/* 在Graph 实例化后执行的逻辑 */
80+
afterGraphInit: HookHub<IGeneralAppService>
81+
/* 在Graph 销毁前执行的逻辑 */
82+
beforeGraphDestory: HookHub<IGeneralAppService>
83+
}
84+
```
85+
86+
#### CommandHook
1887
19-
### 如何扩展
88+
可以配置 Command 执行参数的扩展逻辑
2089
21-
通过以下的方式可以扩展 Hook
90+
```tsx | pure
91+
type IHooks = INodeHooks & IEdgeHooks & IGroupHooks & IGraphHooks & IModelHooks
92+
```

‎packages/xflow-docs/docs/tutorial/advanced/index.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: 如何扩展
3+
order: 1
34
group:
45
path: /tutorial-advanced
56
title: 自定义组件
@@ -14,10 +15,14 @@ nav:
1415

1516
<img loading="lazy" class="ne-image ne-image-preview" src="https://intranetproxy.alipay.com/skylark/lark/0/2021/png/27869/1631779236425-7c9cb2c8-080d-4f27-80fb-b390e3ebdac3.png?x-oss-process=image%2Fresize%2Cw_1072%2Climit_0" alt="image.png" title="image.png" width="536">
1617

18+
### UI 组件 和 Graph 的调用关系
19+
20+
<img src="https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*_74NSZjuTTQAAAAAAAAAAAAAARQnAQ" style="display: block;padding: 12px 0;width: 75%"/>
21+
1722
## 核心模块
1823

19-
| 名称 | 配置项 | 描述 |
20-
| -----------------------------------------: | -------------------------: | -------------------------- |
21-
| [Model](/docs/tutorial-advanced/model) | createContextServiceConfig | 全局状态 |
22-
| [Hook](/docs/tutorial-advanced/hook) | createHookConfig | 扩展 Command 逻辑 |
23-
| [Command](/docs/tutorial-advanced/command) | createCmdConfig | 执行 X6 api/改变 全局 状态 |
24+
| 名称 | 配置项 | 描述 |
25+
| -----------------------------------------: | -----------------------: | --------------------------------------- |
26+
| [Model](/docs/tutorial-advanced/model) | createModelServiceConfig | 使用全局状态 |
27+
| [Command](/docs/tutorial-advanced/command) | createCmdConfig | 使用 Command 执行 X6 api/改变 全局 状态 |
28+
| [Hook](/docs/tutorial-advanced/hook) | createHookConfig | 使用 Hook 扩展 Command 逻辑 |

0 commit comments

Comments
 (0)