前言
根据运行过程中的节点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()
// 节点颜色改变等方法
// 插入错误信息日志等
})