文章目录
LogicFlow自定义业务节点
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow 支持前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。编辑所必需的功能和灵活的节点自定义、插件等拓展机制。以下是对LogicFlow自定义业务节点的详细笔记：
官网
1、准备工作
1.1、初始化项目：
- 使用合适的工具（如pnpm create vite）创建项目，并选择Vue框架及TypeScript变体。
- 安装LogicFlow核心模块
npm install @logicflow/core 或者 npm install @logicflow/extension
1.2、初始化容器及LogicFlow对象：
1. 准备一个容器（如<div ref="container" class="container"></div>），并通过CSS初始化容器的尺寸。
2. 导入LogicFlow和对应的样式依赖模块。
3. 在onMounted后对LogicFlow对象实例化并进行渲染。
1.3、绘制一个简单的流程图(官网案例)：
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
const lf = new LogicFlow({
container: document.querySelector("#app"),
grid: true,
});
lf.render({
nodes: [
{
id: "1",
type: "rect",
x: 100,
y: 100,
text: "节点1",
},
{
id: "2",
type: "circle",
x: 300,
y: 200,
text: "节点2",
},
],
edges: [
{
sourceNodeId: "1",
targetNodeId: "2",
type: "polyline",
text: "连线",
},
],
});
2.准备自定义模版
新建nodeSetTheme文件夹用于存放自定义的模版文件
2.1自定义TodoNode待办节点
2.1.1、nodeSetTheme=>TodoNode.js待办节点模版文件
创建自定义节点视图（TodoNodeView ）和模型（TodoNodeModel ）类，分别继承自LogicFlow提供的RectNode和RectNodeModel类。
import { RectNode, RectNodeModel,h } from "@logicflow/core";
// 待办
class TodoNodeView extends RectNode {
getShape() {
// 获取XxxNodeModel中定义的形状属性
const { model } = this.props;
const { x, y, width, height, radius } = model;
// 获取XxxNodeModel中定义的样式属性
const style = model.getNodeStyle();
return h('g', {}, [
h('rect', {
...style,
x: x - width / 2,
y: y - height / 2,
width,
height,
rx: radius,
ry: radius,
}),
h(
'svg',
{
x: x - width / 2 + 5,
// y: y - height / 2 + 5,
// width: 25,
// height: 25,
y: y - height / 2 -2,
width: 30,
height: 30,
viewBox: "0 0 1274 1024",
},
h(
'path',
{
fill: '#6f757d',
d:"M735.483537 563.043418c-127.277094 0-230.472576 103.195482-230.472576 230.484006s103.195482 230.472576 230.472576 230.472576 230.472576-103.195482 230.472576-230.461147-103.184053-230.495435-230.472576-230.495435z m104.555573 333.999509a29.99058 29.99058 0 0 1-42.288546 0l-83.434159-83.434159a29.876286 29.876286 0 0 1-8.686296-22.56151V671.679264a29.922004 29.922004 0 0 1 59.832578 0v108.40726l74.576423 74.656428a29.99058 29.99058 0 0 1 0 42.299975z"
// d:
// "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z",
}
),
h(
'path',
{
fill: '#6f757d',
d:"M481.992276 793.538853a253.514119 253.514119 0 0 1 144.318236-228.883898q-8.114829-0.377168-16.321093-0.377169h-204.585129c-191.498538 0-347.360404 152.010179-347.360403 338.856977v19.921335c0 99.709534 153.278836 99.709534 347.360403 99.709534h221.729134A253.468402 253.468402 0 0 1 481.992276 793.538853zM490.118535 546.665178c150.707235 0 273.344019-122.648213 273.344018-273.355447S640.848628 0 490.118535 0 216.785945 122.636784 216.785945 273.309731 339.365583 546.665178 490.118535 546.665178z"
}
)
)
]);
}
}
class TodoNodeModel extends RectNodeModel {
getNodeStyle() {
const style = super.getNodeStyle();
style.fillOpacity=1;//节点填充颜色透明度
style.stroke = '#c6c8cb';//节点边框颜色
style.fillOpacity=1;//节点填充颜色透明度
style.fill = '#ffffff';//填充色
style.opacity=1;//节点整体透明度
style.outlineColor='#c6c8cb'//外框颜色
return style;
}
initNodeData(data) {
super.initNodeData(data);
this.width =100;
// this.width =140;
this.height = 80;
this.radius = 10;
}
}
export default {
type: "TodoNode",
view:TodoNodeView,
model: TodoNodeModel,
}
2.1.2、优先注册&使用：
<script setup lang="ts">
// 导入自定义节点
import TodoNode from "./nodeSetTheme/TodoNode";
// 定义graphData
// 数据中的type为自定义节点导出的type属性的值
// 将节点在坐标为（100,100）的位置显示
const graphData = {
nodes: [
{
id: "fba7fc7b-83a8-4edd-b4be-21f694a5d490",
type: "TodoNode",
x: 100,
y: 100,
},
],
};
onMounted(() => {
// 在执行render前进行注册
lf.value.register(TodoNode);
lf.value.render(graphData);
});
</script>
3. 流程图部分
/**
* 云资源退出（脱敏数据）
* 节点type DoneNode 已处理 processingNode处理中 TodoNode待处理
*/
const graphData = {
// 节点
nodes: [
{
id: "Node_Withdrawal_Application_XXX",
type: "DoneNode",
x: 100,
y: 200,
text: { x: 100, y: 200, value: "资源退出申请_XXX" },
},
{
id: "Node_Audit_Bureau_YYY",
type: "DoneNode",
x: 300,
y: 200,
radius: 50,
text: { x: 300, y: 200, value: "审核局审核_YYY" },
},
{
id: "Node_Records_Group_ZZZ",
type: "DoneNode",
x: 500,
y: 200,
radius: 50,
text: { x: 500, y: 200, value: "记录组记录_ZZZ" },
},
{
id: "Node_Cloud_Provider_Delete_AAA",
type: "processingNode",
x: 700,
y: 200,
radius: 50,
text: { x: 700, y: 200, value: "云提供商删除_AAA" },
},
{
id: "Node_Confirmation_Form_BBB",
type: "TodoNode",
x: 900,
y: 200,
radius: 50,
// 注意：重复节点已删除，确保每个id唯一
text: { x: 900, y: 200, value: "确认单签订_BBB" },
},
{
id: "Node_End_Process_CCC",
type: "TodoNode",
x: 1100,
y: 200,
radius: 50,
text: { x: 1100, y: 200, value: "流程结束_CCC" },
},
],
// 链接线（注意：链接线中的sourceNodeId和targetNodeId需要对应更新后的节点id）
edges: [
{
id: "edge_id2",
type: "DoneLine",
sourceNodeId: "Node_Audit_Bureau_YYY",
targetNodeId: "Node_Records_Group_ZZZ",
text: { value: "同意" },
},
{
id: "edge_id1",
type: "DoneLine",
sourceNodeId: "Node_Withdrawal_Application_XXX",
targetNodeId: "Node_Audit_Bureau_YYY",
text: { value: "提交" },
},
{
id: "edge_id3",
type: "DoneLine",
sourceNodeId: "Node_Records_Group_ZZZ",
targetNodeId: "Node_Cloud_Provider_Delete_AAA",
text: { value: "" },
},
{
id: "edge_id4",
type: "TodoLine",
sourceNodeId: "Node_Cloud_Provider_Delete_AAA",
targetNodeId: "Node_Confirmation_Form_BBB",
text: { value: "" },
},
{
id: "edge_id5",
type: "TodoLine",
sourceNodeId: "Node_Confirmation_Form_BBB",
targetNodeId: "Node_End_Process_CCC",
text: { value: "" },
},
],
};
✒️总结
如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见
扫一扫
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
