File size: 20,282 Bytes
c9d0005 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | ---
order: 1
title: 'API'
mobile: false
group:
title: 'API文档'
order: 3
---
# API
## XFlow
| 属性 | 描述 | 类型 | 默认值 |
| --------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
| initialValues | 初始的节点和边数据 | `{nodes:Array<{id:string;type:string;data:Record<string,any>;position:{x:number;y:number}}>,edges:Array<{id:string;source:string;target:string}>}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
| globalConfig | 全局的面板和节点配置 | {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge),controls:[TControl](#tcontrol),handle:[THandle](#thandle),deleteKeyCode:[TdeleteKeyCode](#tdeletekeycode) } | |
| logPanel | 日志面板配置 | [TLogPanel](#tlogpanel) | |
| onNodeClick | 节点点击事件 | `NodeMouseHandler` | |
| onEdgeClick | 边点击事件 | `EdgeMouseHandler` | |
| antdVersion | antd 的版本 | `V4 \| V5` | `V5` |
| readOnly | 只读模式 | `boolean` | `false` |
| onTesting | 单点调试方法 | `(node,nodes)=>void` | |
| onMenuItemClick | 点击节点右上角复制粘贴删除功能， 支持自定义和默认行为 | (itemInfo: [ItemInfo](#iteminfo), defaultAction: () => void) => void | - |
| clickAddNode | 自定义添加节点逻辑 | `(type: string, nodeItem: TNodeItem, addNode: (initData?: Record<string,any>) => void) => void` | - |
| zoomOnScroll | 是否通过滚动鼠标滚轮来缩放画布 | `boolean` | `true` |
| panOnScroll | 是否通过滚动鼠标滚轮来平移画布 | `boolean` | `false` |
| preventScrolling | 是否阻止浏览器在画布上滚动时的默认行为 | `boolean` | `true` |
| openColorfulMode | 是否开启多彩模式 | `boolean` | `false` |
## TNodePanel
面板相关配置
| 属性 | 描述 | 类型 | 默认值 |
| -------- | ---------------------------------- | ------------------ | ------ |
| showPanel | 是否展示配置面板 | `boolean` | `true` |
| width | 设置配置面板宽度 | `string \| number` | 400 |
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
| onClose | 配置面板关闭事件 | `(nodeID:string)=>void` | |
## TNodeView
节点相关配置
| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ------------------------------------------------------------------------------ | ----------------------------------- | ------ |
| hideTitleTips | 是否隐藏节点标题的tooltip描述信息提示 | `boolean` | false |
| status | 节点状态自定义配置,自定义节点不同状态的颜色展示。name:状态名称，color:颜色值。 | `Array<{name:string;color:string}>` | [] |
## TEdge
边的全局配置
| 属性 | 描述 | 类型 | 默认值 |
| -------------- | ------------------------------------------ | --------- | ------ |
| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
| hideEdgeDelBtn | 是否隐藏两个节点之间，连线上的删除按钮, 需要配合deletable一起使用 | `boolean` | false |
| deletable | 配置边是否可用快捷键删除，如果需要同时隐藏删除按钮，则需要设置deletable为true | `boolean` | true |
## TControl
工具栏控制面板功能的配置。
| 属性 | 描述 | 类型 | 默认值 |
| -------------- | ------------------------------------------ | --------- | ------ |
| hideAddNode | 是否隐藏增加节点功能 | `boolean` | false |
| hideAnnotate | 是否隐藏注释节点功能 | `boolean` | false |
| hideUndoRedoBtns | 是否隐藏撤销和重做按钮 | `boolean` | false |
| hideZoomInOutBtns | 是否隐藏缩放按钮 | `boolean` | false |
| hideControlBtns | 是否隐藏所有控制按钮 | `boolean` | false |
| hideAutoLayout | 是否隐藏整理画布功能 | `boolean` | false |
| hideFullscreen | 是否隐藏全屏功能 | `boolean` | false |
| hideInteractionMode | 是否隐藏指针和手形工具切换功能 | `boolean` | false |
| onAutoLayoutCompleted | 整理画布完成后的回调函数，接收整理后的节点数组作为参数，支持异步函数 | `(nodes: node[]) => void \| Promise<void>` | - |
## THandle
Handle 配置继承自 React Flow 的 Handle 配置，用于控制节点连接点的行为。更多 Handle 相关的配置可以参考 [React Flow Handle API](https://reactflow.dev/docs/api/nodes/handle/)。
| 属性 | 描述 | 类型 | 默认值 |
| -------------- | ------------------------------------------ | --------- | ------ |
| isValidConnection | 验证连接是否有效，返回 true 则允许连接 | `(connection: Connection) => boolean` | - |
| onConnect | 连接建立时的回调 | `(params: Connection) => void` | - |
## TDeleteKeyCode
删除键配置，用于控制删除节点和边的快捷键。
| 属性 | 描述 | 类型 | 默认值 |
| -------------- | ------------------------------------------ | --------- | ------ |
| deleteKeyCode | 设置删除节点和边的快捷键，可以是单个键或多个键的数组，设置为 null 则禁用快捷键删除功能 | `string \| string[] \| null` | 'Backspace' |
## TNodeGroup
节点分组配置
| 属性 | 描述 | 类型 | 默认值 |
| ----- | ------------ | ------------- | ------ |
| title | 分组名称 | `string` | |
| type | 分组类型 | `_group` | _group |
| items | 节点配置信息 | `TNodeItem[]` | |
## TLogPanel
日志面板配置
| 属性 | 描述 | 类型 | 默认值 |
| --------- | ------------------- | ----------------------------- | ------ |
| enable | 是否启用日志面板，设置为`false`时全局禁用日志面板 | `boolean` | true |
| logList | 日志面板数据 | Array<[TLogListItem](#tloglistitem)>| |
| loading | 日志面板loading效果 | `boolean` | false |
| logWidget | 自定义日志面板展示 | `string` | |
| width | 日志面板宽度 | `number` | 400 |
| tabsProps | 内置日志面板,详情和追踪选项卡切换组件,antd的tabs配置透传 | [TabsProps](https://ant.design/components/tabs-cn#tabs) | |
| detailLogWidget | 内置日志面板详情tab，自定义组件会渲染在code面板下方。组件接收参数为：`data`(当前日志详情数据)、`logList`(日志面板数据)、`currentStatus`(当前节点状态)、`logPanel`(日志面板配置) | `string` | |
## TLogListItem
日志面板数据格式
| 属性 | 描述 | 类型 | 默认值 |
| ------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ |
| statusPanel | 日志面板数据,isBadge是否以badge形式展示状态。非必填，不传statusPanel字段不渲染状态面板。 | `{status: Array<{ label: string; value?: string; isBadge?: boolean }>;extra?: string \| ReactNode}` | |
| codePanel | 代码面板数据渲染，如果没有 codePanel，则不渲染代码面板。title:代码面板标题，code:代码面板数据 | `Array<{ title: string; code: string }>` | |
| nodeId | 节点ID，必填。如果`logList`中有多个相同的nodeId,会自动合并相同nodeId的statusPanel、codePanel数据，并以数组的形式渲染 | `string` | |
| groupTitle |当有多个相同的nodeId，每个板块的分组名称，不传不渲染。可以传入字符串，或者传入`widgets`自定义组件名称，自定义渲染组件 | `string` | |
| showDetailLogWidget |是否展示`detailLogWidget`组件 | `boolean` | true |
| _status |当前log的状态，如果没有，则以`data._status`为准 | `string\|number` | |
## TNodeItem
单个节点配置
| 属性 | 描述 | 类型 | 默认值 |
| -------------------------------------------- | ---------------------------- | ------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| description | 节点描述 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| iconSvg | 自定义节点图标组件，可支持图标的SVG形式，IMG形式，从全局 `widgets` 中导入组件 | `string` | |
| className | 节点className | `string` | |
| 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> | |
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| settingWidgetProps | 用于向`settingWidget`自定义组件中传递自定义参数 | `object` | |
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodePanel | 自定义节点的面板配置信息 | [TNodePanel](#tnodepanel) | |
| switchExtra | 条件节点属性配置 | [TSwitchExtra](#tswitchextra) | |
| parallelExtra | 并行节点属性配置 | [TParallelExtra](#tparallelextra) | |
| showTestingBtn | 是否展示节点的单点调试按钮 | `boolean` | `false` |
| getSettingSchema | 动态获取节点的业务配置信息，返回值同settingSchema。同时设置`settingSchema`和`getSettingSchema`只生效`getSettingSchema` | `(nodeId: string, nodeType: string, nodeItem: TNodeItem, nodeData: any, form: ReturnType<typeof useForm>) => Promise<Schema>` | |
| renderHandle | 自定义渲染节点的handle，以实现某个节点自定义的出口数量.`sourceHandle`是原handle组件 | `(sourceHandle: SourceHandleType,sourceHandleProps:ComponentProps<SourceHandleType>,nodeProps: {id: string;type: string;data: any;layout: 'LR';isConnectable: boolean;readOnly: boolean;}) => React.JSX.Element`| |
| disabledShortcutDelete | 是否禁用该节点的快捷键删除功能 | `boolean` | false |
| disabledShortcutCopy | 是否禁用该节点的快捷键复制功能 | `boolean` | false |
## TNodeSelector
| 属性 | 描述 | 类型 | 默认值 |
| ---------- | ---------------- | ----------------------------------------------------------- | ------ |
| showSearch | 节点是否可被搜索 | `boolean` | false |
| items | 节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
## TSwitchExtra
| 属性 | 描述 | 类型 | 默认值 |
| -------- | -------------------------------- | --------- | ------ |
| hideElse | 隐藏条件节点ELSE分支（默认分支） | `boolean` | false |
| valueKey | 自定义节点 value 的字段 | `string` | |
| titleKey | 自定义节点 title 的字段 | `string` | |
## TParallelExtra
| 属性 | 描述 | 类型 | 默认值 |
| -------- | -------------------------------- | --------- | ------ |
| valueKey | 自定义节点 value 的字段 | `string` | |
| titleKey | 自定义节点 title 的字段 | `string` | |
## ItemInfo
| 属性 | 描述 | 类型 | 默认值 |
| -------- | -------------------------------- | --------- | ------ |
| key | 节点菜单项的key | `string` | |
| nodeId | 节点ID | `string` | |
| sourceHandle | 连接头ID | `string` | |
## 画布快捷键
| 快捷键 | 功能描述 |
|----------------------|------------------|
| Ctrl/Cmd + C | 复制选中节点 |
| Ctrl/Cmd + V | 粘贴节点 |
| Delete/Backspace | 删除选中节点或边 |
| Ctrl/Cmd + Z | 撤销 |
| Ctrl/Cmd + Y | 重做 |
|