LogicFlow自定义业务节点
文章目录
- LogicFlow自定义业务节点
- 1、准备工作
- 1.1、初始化项目:
- 1.2、初始化容器及LogicFlow对象:
- 1.3、绘制一个简单的流程图(官网案例):
- 2.准备自定义模版
- 2.1自定义TodoNode待办节点
- 2.1.1、nodeSetTheme=>TodoNode.js待办节点模版文件
- 2.1.2、优先注册&使用:
- 3. 流程图部分
- ✒️总结
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感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见