docs/xflow/api.md

metadata

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 | TNodeItem )[ ]
nodeSelector	节点选择器配置，可控制节点的可搜索性	TNodeSelector
iconFontUrl	iconfont url，用于配置图标渲染	String
globalConfig	全局的面板和节点配置	{nodePanel:TNodePanel,nodeView:TNodeView,edge:TEdge,controls:TControl,handle:THandle,deleteKeyCode:TdeleteKeyCode }
logPanel	日志面板配置	TLogPanel
onNodeClick	节点点击事件	NodeMouseHandler
onEdgeClick	边点击事件	EdgeMouseHandler
antdVersion	antd 的版本	V4 | V5	V5
readOnly	只读模式	boolean	false
onTesting	单点调试方法	(node,nodes)=>void
onMenuItemClick	点击节点右上角复制粘贴删除功能， 支持自定义和默认行为	(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。

属性	描述	类型	默认值
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>
loading	日志面板loading效果	boolean	false
logWidget	自定义日志面板展示	string
width	日志面板宽度	number	400
tabsProps	内置日志面板,详情和追踪选项卡切换组件,antd的tabs配置透传	TabsProps
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 文档。同时设置settingSchema和settingWidget只生效settingWidget	SchemaBase
settingWidget	自定义节点的业务配置组件，在弹窗中展示。同时设置settingSchema和settingWidget只生效settingWidget。定义之后需要在widgets中引入自定义组件。	string
settingWidgetProps	用于向settingWidget自定义组件中传递自定义参数	object
nodeWidget	自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在widgets中引入自定义组件。	string
nodePanel	自定义节点的面板配置信息	TNodePanel
switchExtra	条件节点属性配置	TSwitchExtra
parallelExtra	并行节点属性配置	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 | 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	重做