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

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

})

直接看运行图

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

相关推荐
LaughingZhu7 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫7 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux7 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水8 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger8 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)9 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态9 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态9 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart9 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe59 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架