Skip to content

Commit 672a4fb

Browse files
author
昔梦
committed
fix:API文档补充+globalConfig.handle原来只透传了右边的handle，左边的没有控制，现在左边的handle加上透传控制
1 parent b059fc4 commit 672a4fb

File tree

4 files changed

+64
-10
lines changed

4 files changed

+64
-10
lines changed

‎docs/xflow/api.md‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,21 @@ group:
1111
## XFlow
1212

1313
| 属性 | 描述 | 类型 | 默认值 |
14-
| ------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
15-
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
14+
| --------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
15+
| initialValues | 初始的节点和边数据 | `{nodes:Array<{id:string;type:string;data:Record<string,any>;position:{x:number;y:number}}>,edges:Array<{id:string;source:string;target:string}>}` | - | - |
1616
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
1717
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
1818
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
1919
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
2020
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
21-
| globalConfig | 全局的面板和节点配置 | {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge)} | |
21+
| globalConfig | 全局的面板和节点配置 | {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge),controls:[TControl](#tcontrol),handle:[THandle](#thandle),deleteKeyCode:[TdeleteKeyCode](#tdeletekeycode) } | |
2222
| logPanel | 日志面板配置 | [TLogPanel](#tlogpanel) | |
2323
| onNodeClick | 节点点击事件 | `NodeMouseHandler` | |
2424
| antdVersion | antd 的版本 | `V4 \| V5` | `V5` |
2525
| readOnly | 只读模式 | `boolean` | `false` |
2626
| onTesting | 单点调试方法 | `(node,nodes)=>void` | |
27+
| onMenuItemClick | 点击节点右上角复制粘贴删除功能， 支持自定义和默认行为 | (itemInfo: [ItemInfo](#iteminfo), defaultAction: () => void) => void | - |
28+
| clickAddNode | 自定义添加节点逻辑 | `(type: string, nodeItem: TNodeItem, addNode: (initData?: Record<string,any>) => void) => void` | - |
2729

2830

2931
## TNodePanel
@@ -57,6 +59,32 @@ group:
5759
| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
5860
| deletable | 配置边是否可删除 | `boolean` | false |
5961

62+
## TControl
63+
64+
工具栏控制面板功能的配置。
65+
66+
| 属性 | 描述 | 类型 | 默认值 |
67+
| -------------- | ------------------------------------------ | --------- | ------ |
68+
| hideAddNode | 是否隐藏增加节点功能 | `boolean` | false |
69+
| hideAnnotate | 是否隐藏注释节点功能 | `boolean` | false |
70+
71+
## THandle
72+
73+
Handle 配置继承自 React Flow 的 Handle 配置，用于控制节点连接点的行为。更多 Handle 相关的配置可以参考 [React Flow Handle API](https://reactflow.dev/docs/api/nodes/handle/)。
74+
75+
| 属性 | 描述 | 类型 | 默认值 |
76+
| -------------- | ------------------------------------------ | --------- | ------ |
77+
| isValidConnection | 验证连接是否有效，返回 true 则允许连接 | `(connection: Connection) => boolean` | - |
78+
| onConnect | 连接建立时的回调 | `(params: Connection) => void` | - |
79+
80+
81+
## TDeleteKeyCode
82+
83+
删除键配置，用于控制删除节点和边的快捷键。
84+
85+
| 属性 | 描述 | 类型 | 默认值 |
86+
| -------------- | ------------------------------------------ | --------- | ------ |
87+
| deleteKeyCode | 设置删除节点和边的快捷键，可以是单个键或多个键的数组，设置为 null 则禁用快捷键删除功能 | `string \| string[] \| null` | 'Backspace' |
6088

6189
## TNodeGroup
6290

@@ -94,10 +122,11 @@ group:
94122

95123
## TNodeItem
96124

125+
97126
单个节点配置
98127

99-
| 属性 | 描述 | 类型 | 默认值 |
100-
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
128+
| 属性 | 描述 | 类型 | 默认值 |
129+
| ------------------------------- | ----------------------------------------------------------- | ---------------------------------- | ------ |
101130
| title | 节点名称 | `string` | |
102131
| type | 节点类型 | `string` | |
103132
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
@@ -113,7 +142,7 @@ group:
113142
| switchExtra | 条件节点属性配置 | [TSwitchExtra](#tswitchextra) | |
114143
| parallelExtra | 并行节点属性配置 | [TParallelExtra](#tparallelextra) | |
115144
| showTestingBtn | 是否展示节点的单点调试按钮 | `boolean` | `false` |
116-
145+
| getSettingSchema | 动态获取节点的业务配置信息，返回值同settingSchema。同时设置`settingSchema`和`getSettingSchema`只生效`getSettingSchema` | `(nodeId: string, nodeType: string, nodeItem: TNodeItem, nodeData: any, form: ReturnType<typeof useForm>) => Promise<Schema>` | |
117146

118147

119148

@@ -138,3 +167,12 @@ group:
138167
| -------- | -------------------------------- | --------- | ------ |
139168
| valueKey | 自定义节点 value 的字段 | `string` | |
140169
| titleKey | 自定义节点 title 的字段 | `string` | |
170+
171+
172+
## ItemInfo
173+
174+
| 属性 | 描述 | 类型 | 默认值 |
175+
| -------- | -------------------------------- | --------- | ------ |
176+
| key | 节点菜单项的key | `string` | |
177+
| nodeId | 节点ID | `string` | |
178+
| sourceHandle | 连接头ID | `string` | |

‎packages/x-flow/src/components/CustomNode/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default memo((props: any) => {
3535
const disabledCopy = settingMap[type]?.disabledCopy ?? false;
3636
const disabledDelete = settingMap[type]?.disabledDelete ?? false;
3737
const switchExtra = settingMap[type]?.switchExtra || {};
38+
const handleProps = globalConfig?.handle || {}
3839
// const isConnectableStart = globalConfig?.handle?.isConnectableStart ?? true;
3940
// const isConnectableEnd = globalConfig?.handle?.isConnectableEnd ?? true;
4041

@@ -259,6 +260,7 @@ export default memo((props: any) => {
259260
>
260261
{!settingMap?.[type]?.targetHandleHidden && !isNote && (
261262
<Handle
263+
{...handleProps}
262264
type="target"
263265
position={targetPosition}
264266
isConnectable={connectable}

‎packages/x-flow/src/components/CustomNode/sourceHandle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default memo((props: any) => {
3636

3737
return (
3838
<Handle
39+
{...handleProps}
3940
type="source"
4041
position={position}
4142
isConnectable={isConnectable}
@@ -47,7 +48,6 @@ export default memo((props: any) => {
4748
setIsShowTooltip(false);
4849
setOpenNodeSelectPopover(true);
4950
}}
50-
{...handleProps}
5151
{...rest}
5252
>
5353
{(selected || isHovered || openNodeSelectPopover ) && (

‎packages/x-flow/src/types.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface TNodeItem {
2222
width?: string | number; // 配置面板宽度
2323
hideDesc?: boolean; // 配置面板描述
2424
};
25+
nodeWidget?:string// 自定义节点组件
2526
getSettingSchema?: (nodeId: string, nodeType: string, nodeItem:TNodeItem,nodeData:any,form: ReturnType<typeof useForm>) => Promise<Schema>;
2627
switchExtra: { // 条件节点额外属性配置
2728
hideElse: boolean;
@@ -34,7 +35,8 @@ export interface TNodeItem {
3435
};
3536
disabledCopy?: boolean;
3637
disabledDelete?: boolean;
37-
onTesting: (node,nodes) => void;// 单点调试方法
38+
onTesting: (node, nodes) => void;// 单点调试方法
39+
showTestingBtn?: boolean; // 是否显示单点调试按钮
3840
}
3941

4042
export interface TNodeGroup {
@@ -108,8 +110,20 @@ export interface THandle{
108110
}
109111
export interface FlowProps {
110112
initialValues?: {
111-
nodes: any[];
112-
edges: any;
113+
nodes: Array<{
114+
id: string;
115+
type: string;
116+
data: Record<string, any>;
117+
position: {
118+
x: number;
119+
y: number;
120+
};
121+
}>;
122+
edges: Array<{
123+
id: string;
124+
source: string;
125+
target: string;
126+
}>;
113127
};
114128
layout?: 'LR' | 'TB';
115129
/**

0 commit comments

Comments
 (0)