How i could integrate the lib token simulator in viewer bpmn-js?

Hey!
I’m trying to integrate the lib token simulator in viewer bpmn-js, but I could not do it. In the browser “The viewer” works but not the toke simulator. :pensive:

I am basing on the bunding example from bpmn-js-examples/bundling at master · bpmn-io/bpmn-js-examples · GitHub

Next to this I’m import the token simulator to the example with

npm install bpmn-js-token-simulation

then I include the code for add the TokenSimulationModule to ./src/app.js

// we use stringify to inline an example XML document
import exampleXML from '../resources/example.bpmn';


// make sure you added bpmn-js to your your project
// dependencies via npm install --save bpmn-js
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
import TokenSimulationModule from 'bpmn-js-token-simulation';

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


modeler.importXML(exampleXML).then(function(result) {

  const { warnings } = result;

  console.log('success !', warnings);

  modeler.get('canvas').zoom('fit-viewport');
}).catch(function(err) {

  const { warnings, message } = err;

  console.log('something went wrong:', warnings, message);
});

Thanks !

Hi,

you need a different module for the viewer (vs. the modeler):

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

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

You can check out the token simulation documentation. We also have an example that bundles it into a webpage. Maybe that can help you?