Exporting the Token Simulation log entries

[Andre_Santos_Game_De]

Hello,

I manage to bundle the token simulation example so i can use the functionallity in a angularJS application.

But by now, i have been trying to expose the log generated by the token simulation, in the image bellow:

to my angularJS application, so i can export that as a pdf or any other extension.

The approach that i am trying to implement is append the log module from nodeJS application to the customModules exported in bundle, this way:

import LogModule from 'bpmn-js-token-simulation/lib/features/log';

inherits(CustomModeler, Modeler);

CustomModeler.prototype._customModules = [
  ZoomScrollModule,
  MoveCanvasModule,
  CustomLoggingModule,
  LogModule,
  TokenSimulationModule,
  SimulationSupportModule
];

and them, in angularJS, after create the instance of “CustomBpmnJS”, access the exported Log module, find the eventBus and them append to it a callback.

Unfortunally, i not able to find the eventBus inside the scope three of the Modeler instance:

I need some direction of how to accomplish my task, or some documentation about how the modules are tied to each other, and how can i expose the eventBus outside when i bundle the library.

[nikku]

bpmn-js exposes components through dependency injection / service discovery.

const eventBus = bpmnJS.get('eventBus');

eventBus.on('some-event', (event) => {
  // handle event
});

Is this what you are missing?

[Andre_Santos_Game_De]

hi @nikku,

yeah, that`s exactly what a needed and now it’s working fine.

I would like to take the opportunity to ask for a better approach than the current one that i took for intercept the token-simulation log messages to print them in PDF.

For now, i took the log.js (at “bpmn-js-token-simulation/lib/features/log/log.js”) file and at the function

Log.prototype.log = function(options)

i added a eventBus.fire call at the very botton of the function, this way:

Log.prototype.log = function(options) {
  const {
    text,
    type = 'info',
    icon = ICON_INFO,
    scope
  } = options;

  domClasses(this._placeholder).add('hidden');

  const date = new Date();

  const dateString = date.toLocaleTimeString() + ':' + date.getUTCMilliseconds();

  this._notifications.showNotification(options);

  const iconMarkup = icon.startsWith('<') ? icon : `<i class="${icon}"></i>`;

  const colors = scope && scope.colors;

  const colorMarkup = colors ? `style="background: ${colors.primary}; color: ${colors.auxiliary}"` : '';

  const logEntry = domify(`
    <p class="bts-entry ${ type } ${
      scope && this._scopeFilter.isShown(scope) ? '' : 'inactive'
    }" ${
      scope ? `data-scope-id="${scope.id}"` : ''
    }>
      <span class="bts-date">${ dateString }</span>
      <span class="bts-icon">${iconMarkup}</span>
      <span class="bts-text">${text}</span>
      ${
        scope
          ? `<span class="bts-scope" data-scope-id="${scope.id}" ${colorMarkup}>${scope.id}</span>`
          : ''
      }
    </p>
  `);

  domDelegate.bind(logEntry, '.bts-scope[data-scope-id]', 'click', event => {
    this._scopeFilter.toggle(scope);
  });

  this._content.appendChild(logEntry);

  this._content.scrollTop = this._content.scrollHeight;

  this._eventBus.fire("MyCustomEvent", {
    options,
    dateString,
  });
};

I understand that this is not a good approach cause, when i update the library, this call is going to disapear.

The other approach that i could use to intercept the log messages is subscribe my custom callbacks to each event triggered by the token simulation (SCOPE_CREATE_EVENT, TRACE_EVENT …), but i would have to implement the same logic already implemented inside the log.js, like the “TRACE_EVENT” that have a lot of if and elses to know what element the simualtion is currently processing.

I would like to know if it’s safe to override the “Log.prototype.log” on my frontend application (angularJS) and re-implement the function, but with my customEvent being triggered, or if there’s any other better approach.

Thank you o/

[philippfromme]

Personally, I would simply add my own custom logger. That one might still listen to the same events but you’d have full control. The existing logger is not meant for exporting the logs.

[Andre_Santos_Game_De]

Yes, yesterday i came to the conclusion that writing my custom callbacks for each kind of event is the better approach cause some of them have custom properties that i would like to print in the PDF.

Thanks a lot