基于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()

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

})

直接看运行图

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

相关推荐
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript