最近有其他的事情在忙,没有坚持下来,今天继续补充bpmn的技术栈 Token Simulation

bpmn-js Token Simulation

符合BPMN 2.0规范的构建器.

Modeler

import BpmnModeler from 'bpmn-js/lib/Modeler';
import TokenSimulationModule from 'bpmn-js-token-simulation';

const modeler = new BpmnModeler({
  container: '#canvas',
  additionalModules: [
    TokenSimulationModule
  ]
});

Viewer

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
import TokenSimulationModule from 'bpmn-js-token-simulation/lib/viewer';

const viewer = new BpmnViewer({
  container: '#canvas',
  additionalModules: [
    TokenSimulationModule
  ]
});

以上是官方提供的下边开始我的理解和修改

这里我基于Viewer说下吧,如果你想基于Modeler实现的话应该也是差不多,毕竟Viewer有的Modeler都有 Modeler是从Viewer中继承下来的.

import TokenSimulationModule from 'bpmn-js-token-simulation/lib/viewer';
import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

const viewer = new BpmnViewer({
  container: '#canvas',
  additionalModules: [
    TokenSimulationModule
  ]
});

首先样式修改:

//import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css"; 
//将原来的样式复制一份换成自己的
import "./style/bpmn-js-token-simulation.css"

代码实现,控制显示仿真和不显示仿真

 this.modeler.get("toggleMode").toggleMode()

通过eventBus 获取流程执行过程

import {
  PLAY_SIMULATION_EVENT,
  SCOPE_DESTROYED_EVENT
} from 'bpmn-js-token-simulation/lib/util/EventHelper.js'//这个里面还有很多事件,有兴趣的可以自己看看
      //开始
      modeler.on(PLAY_SIMULATION_EVENT, e => {
        console.log("tokenSimulation.PLAY_SIMULATION_EVENT", e);
      })
      //点击开始仿真  获取经过每个节点
      bpmnJs.on(SCOPE_DESTROYED_EVENT, e => {
        console.log("tokenSimulation.SCOPE_DESTROYED_EVENT", e);
        //TODO 这里能拿到element对象,可以处理一些自己的事情了
      })

除了上边的eventBus这种方式也可以通过代码实现控制的效果

代码实现

//获取到simulationSupport 操作对象
//具体源码可以
const simulationSupport = modeler.get("simulationSupport");

//设置可以执行
simulationSupport.toggleSimulation(true);

//先将element 触发器设置为暂停状态
simulationSupport.triggerElement("Activity_1jmvmoa");

//执行开始
simulationSupport.triggerElement("StartEvent_1");

//监听目标组件
await simulationSupport.elementEnter("Activity_1jmvmoa");
//运行到目标组件后 的执行操作(这里弹出alert实例)
window.alert("WANT ME TO CONTINUE?");

//让目标组件继续执行
simulationSupport.triggerElement("Activity_1jmvmoa");

另外还找到一个国外实现效果不错的案例 livebpmn.com/ 还没来的急好好研究.有兴趣的小伙伴自己研究吧

如果感觉还不错请点个赞,给个鼓励

Bpmn 实现仿真效果 (bpmn-js Token Simulation)

bpmn-js Token Simulation

Modeler

Viewer

以上是官方提供的下边开始我的理解和修改