基于React的工作流 bpmn.js基本使用(3)-流程模拟的使用(运行过程中暂停、继续,多分路运行)

前言

根据运行过程中的节点id、节点类型,我们可以做到完全的自定义控制,动画的运行和暂停,以及多节点的状态改变。以下是所做的几个示例 实例化完成之后 获取bpmnModler的动画实例,get('animation')

1. 引入bpmn.js,构建bpmn图

2. 引入流程模拟的插件

BPMN官方提供了各种各样的模块,比如执行模拟,就使用了流程模拟模块

js 复制代码
// 模拟流转流程
import TokenSimulation from "bpmn-js-token-simulation";

在实例化 BpmnModeler的时候添加动画插件 在 additionalModules:[TokenSimulation]

在这个动画上有很多的集成进去的工具,可以给到我们使用

js 复制代码
animation:提供动画效果,可以在模拟执行期间显示BPMIN元素的状态变化
contextPads:在设计器中显示上下文菜单,可以让您进行一些常见的操作,如添加、删除和复制元素等disableModeling:禁用设计器中的模型编辑功能
elementNotifications:在设计器中显示元素通知,例如错误和警告信息
elementSupport:支持BPMN元素
exclusiveGatewaySettings:提供配置独占网关的功能
log:提供日志记录功能,可以记录在模拟执行期间发生的事件和操作
notifications:提供通知功能,可以在设计器中显示通知消息
pauseSimulation:在模拟执行期间暂停模拟执行
preserveElementColors:保留BPMN元素的颜色
processInstanceIds:提供生成和管理BPMN进程实例ID的功能
processInstanceSettings:提供配置BPMN进程实例的功能
processInstances:提供管理BPMN进程实例的功能
resetsimulation:提供重置模拟执行的功能
setAnimationspeed:提供设置动画速度的功能
showProcessInstance:在设计器中显示BPMN进程实例
simulationstate:提供访问和管理模拟执行状态的功能
toggleMode:提供在设计器中切换模式的功能
tokencount:提供访问和管理模拟执行期间的令牌数量的功能
tokenSimulationBehavior:提供BPMN模拟执行的行为设置
tokenSimulationEditorActions:提供模拟执行期间的编辑操作
tokenSimulationKeyboardBindings:提供模拟执行期间的键盘绑定

开启模拟流程

主要用的是切换模式的工具toggleMode

js 复制代码
this.bpmnModeler.get("toggleMode").toggteMode()  

这样就能切换流程模拟的开、关

怎么控制流程模拟运行的执行动画的,对动画暂停和运行

上面我们将插件集成到bpmnModeler里面,然后我们通过获取 this.bpmnModeler.get('animation'),可以获取到动画执行过程中的动画实例事件的集合,然后给这个动画的事件添加上 监听事件,就可以实时获取到动画执行到的每一个节点,可以通过获取到的这个节点,进行业务校验,是否继续下面的流程

js 复制代码
const animation=this.bpmnModeler.get('animation')
const animationBus=animation._eventBus
// 然后给这个动画的事件添加上 监听事件,就可以实时获取到
animationBus.on('tokenSimulation.generateToken',(e)=>{
// 业务事件处理
...
// 获取进程实例
const pauseSimulation = this.bpmnModeler.get('pauseSimulation');

//暂停方法
pauseSimulation.pause()

// 继续的方法
pauseSimulation.toggle()

// 节点颜色改变等方法   
// 插入错误信息日志等

})

直接看运行图

多条线路运行,其中一条节点业务信息错误暂停,另一条继续运行

相关推荐
代码匠心15 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong16 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode16 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419416 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo16 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭17 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木17 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮17 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati17 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉17 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain