插件系统简介
鸿图是万物互联时代的通用可视化编程语言,开发者通过编写鸿图插件,实现自定义的节点、流程控制、处理逻辑。通过插件系统,鸿图可以真正做到赋能千行百业。
插件接口
开发者需要编写一个实现 BPPlugin 的类,BPPlugin 定义如下:
ts
interface BPPlugin {
createNodes(): BPNode[];
createMenu(language: string);
}
- createNodes 返回一个自定义节点列表,节点接口定义如下。
ts
interface BPNode {
type: string;
component: any;
parse(executionData: ExecutionData, currentNode: Node);
evaluate(eventData: EventData, executionData: ExecutionData, currentNode: Node): Promise<EvaluationResult>;
execute(eventData: EventData, executionData: ExecutionData, currentNode: Node): Promise<ExecutionResult>;
export(executionData: ExecutionData, currentNode: Node): string;
}
- createMenu 可以在右键弹出的节点菜单里面添加自定义菜单项。如下图:
示例插件
ts
import { Node } from "reactflow";
export class MyPlugin implements BPPlugin {
createNodes(): BPNode[] {
return [
{
type: 'MyCustomeNodeType',
component: MyNode,
parse(executionData: ExecutionData, currentNode: Node) {
},
evaluate: async (eventData: EventData, executionData: ExecutionData, currentNode: Node): Promise<EvaluationResult> => {
return { result: 'demo' };
},
execute: async (eventData: EventData, executionData: ExecutionData, currentNode: Node): Promise<ExecutionResult> => {
return null;
},
export: (executionData: ExecutionData, currentNode: Node): string => {
return 'demo';
}
}
];
}
createMenu(language: string) {
return {
label: '自定义节点列表',
children: [
{
label: '我的自定义节点',
searchKeys: 'my custom node',
nodeType: 'MyCustomeNodeType'
},
]
}
}
}
上面示例定义了一个 MyPlugin
类,它实现了 BPPlugin 接口,并返回了一个自定义节点列表。目前只包含一个自定义节点,类型为 MyCustomeNodeType
。
MyNode
是自定义节点的实现,如何实现自定义节点请参考 实现自定义节点
getNodeTrees() 函数返回的菜单对象。鸿图对菜单数据有一定规范,详情参考 扩展节点菜单。
节点执行
根据需要,自定义节点可以实现 parse
、evaluate
、execute
、export
四个函数。
evaluate
evaluate
函数用于解析节点数据,返回结果是一个 JS 对象,必须包含result
属性,如:
ts
{ result: your_actual_data }
提示
自定义节点几乎总是要实现 evaluate 函数,否则就只是纯展示节点,不具备交互能力。