How define the moddleExtensions on a custom-bundle version of BPMN io

Developers
1

Hello, i have been trying to add the Camunda Moddle to my custom modeler, bundled by the rollup.js.
I use the example project from github:

and using the properties panel example to know how to add the camundaModdle and provider:

I ended with this “custom-modeler.js” file:

import inherits from 'inherits';

import Modeler from 'bpmn-js/lib/Modeler';

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import TokenSimulationModule from 'bpmn-js-token-simulation/lib/viewer';
import SimulationSupportModule from 'bpmn-js-token-simulation/lib/simulation-support';
import LogModule from 'bpmn-js-token-simulation/lib/features/log';

import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
CamundaPlatformPropertiesProviderModule} from 'bpmn-js-properties-panel';

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'

/**
 * A viewer that includes mouse navigation and other goodies.
 *
 * @param {Object} options
 */
export default function CustomModeler(options) {
  Modeler.call(this, options);
}

inherits(CustomModeler, Modeler);

CustomModeler.prototype._customModules = [
  ZoomScrollModule,
  MoveCanvasModule,
  LogModule,
  TokenSimulationModule,
  SimulationSupportModule,
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule
];

CustomModeler.prototype._modules = [].concat(
  Modeler.prototype._modules,
  CustomModeler.prototype._customModules
);

CustomModeler.prototype.GetCustomModdleExtensions = function () {
  return CamundaBpmnModdle;
};

// CustomModeler.prototype.moddleExtensions = {
//   camunda: CamundaBpmnModdle,
// };

Noticed that the moddleExtesions prototype is comented cause for some reason the CamundaBpmnModdle ends up not configured in the bundled version, so every time i try to use it in my AngularJS applciation, i got a error saying that “<camundaBpmn…> not regonized” os something like that.

The solution by now was exposing the “CamundaBpmnModdle” through a prototype call “CustomModeler.prototype.GetCustomModdleExtensions” and them pass it to the front end component this way:

  if (that.bpmnJS == undefined) {
            that.bpmnJS = new modeler({
                container: element,
                propertiesPanel: {
                    parent: '#properties-panel'
                },
                keyboard: {
                    bindTo: document
                },
                moddleExtensions: {
                    camunda: modeler.prototype.GetCustomModdleExtensions()
                },
                additionalModules: [
                    customTranslate
                ]
            });
        }

I would like to ask for a better way to configure the camunda, cause the way that a manage to make it work seens pretty messed up.

Thanks o/

2

Why is that necessary in the first place? You could simply import the model extension and pass it when creating the bpmn-js instance.

3

I couldn’t import the moddle Extension the simple way:

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'
...
                moddleExtensions: {
                    camunda: CamundaBpmnModdle,
                },
}

cause i am using and instancing my bpmn js component in a front end application in AngularJS (using plain javascript), so i am not able to use import there.

Also, i am exporting the BPMN nodeJS project as a UMD bundle and importing it in my angularJS application, so i dont have full access to all stuff inside nodeJs aplication, just de global variable “bpmnJS” with it’s scope.

I tried using the same approach used in the bundled example, setting the moddleExtesions in prototype inside de nodeJS application. It worked fine for the properties menu who is a Module, but i was not able to use it for moddleExtensions.

4

You could just bundle the model extension with the Angular app which is where you create the bpmn-js instance. Would that be an option?