BPMN.io implementation on Angular 13 - Issue-3

Developers
#1

import BpmnModeler from ‘bpmn-js/lib/Modeler’;
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from ‘bpmn-js-properties-panel’;
import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

This is my HTML;

<div #ref class="diagram-container">
    <div #canvas class="canvas" id="js-canvas"></div>
    <div class="properties-panel" id="js-properties-panel"></div>
</div>

I have this snippet of code in my .ts file;

ngOnInit(): void {
this.bpmnModeler = new BpmnModeler({
container : ‘#js-canvas’,
propertiesPanel : {
parent : ‘#js-properties-panel’
},
additionalModules : [
BpmnColorPickerModule,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
]
});
}

ngAfterContentInit(): void {
this.bpmnModeler.on(‘import.done’, ({ error }) => {
if (error) {
this.showSnackBar(‘Failed to render diagram’.concat(error), “x”, “info”)
}
else {
this.bpmnModeler.get(‘canvas’).zoom(‘fit-viewport’);
this.bpmnModeler.attachTo(this.elementRef.nativeElement);
}
});
}

This results in the following run-time error in the console;
image

Note:

  1. Without the code snippet shown in bold above, the Modeler works showing the Toolbox, Diagram & the Color palette
  2. Properties panel doesn’t show up.

Please help.

#2

I was able to solve this. Below are the changes made;

import BpmnModeler from ‘bpmn-js/lib/Modeler’;
import BpmnPropertiesPanelModule from ‘bpmn-js-properties-panel’;
import BpmnPropertiesProviderModule from ‘bpmn-js-properties-panel/lib/provider/bpmn’;
// import BpmnPropertiesProviderModule from ‘bpmn-js-properties-panel/lib/provider/camunda’;
import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

Shift the code snippet under ngAfterContentInit() to ngOnInit() - this is the final code in ngOnInit();

ngOnInit(): void {
this.bpmnModeler = new BpmnModeler({
container : ‘#js-canvas’,
propertiesPanel : {
parent : ‘#js-properties-panel’
},
additionalModules : [
BpmnColorPickerModule,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
]
});
this.bpmnModeler.on(‘import.done’, ({ error }) => {
if (error) {
this.showSnackBar(‘Failed to render diagram’.concat(error), “x”, “info”);
}
else {
this.bpmnModeler.get(‘canvas’).zoom(‘fit-viewport’);
this.bpmnModeler.attachTo(this.elementRef.nativeElement);
}
});
}

Note:

  1. The code shift described above works only for the Modeler & doesn’t work for Viewer (for Viewer retain it under ngAfterContentInit() method)
  2. You can switch between Properties Provider modules (Bpmn / Camunda) by remarking/unremarking the appropriate import statements shown above. Both of them are working as expected.

This issue may be treated as ‘Closed’…