当前位置：首页 > news >正文

LogicFlow自定义业务节点

news 2024/10/24 12:00:48

文章目录

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: "" },  },  ],  
};