Bpmn.io implementation on Angular 13 - Issue-1

Developers
1

Am implementing bpmn.io with bpmn-js-properties-panel in Angular 13;
Following are my imports;

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

This 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;

constructor(private http : HttpClient) {
this.bpmnModeler = new BpmnModeler({
additionalModules : [
BpmnColorPickerModule
]
});

Above code works showing;

  1. Diagram tool box on the left hand side
  2. Bpmn Diagram on the left hand side
  3. Color palette on each component in the diagram
  4. No Properties Panel on the right hand side (which is probably correct for the existing code)

I am trying to figure out how to get Diagram tool box for New, Open, Delete Bpmn Diagrams - do I have to install a separate package like I did for bpmn-js-color-picker and bpmn-js-properties-panel ?
Please guide me.
If you have a link to a complete guide for implementing bpmn.io in Angular 13, please share.

2

Do you relate to the tools inside our demo?

These are not part of any library but simply added to the demo as buttons, using the bpmn-js API under the hood. You’d have to create them on your own.

3

Ok.

  1. Is the code shareable, this will help me incorporate other features like ‘full screen’, ‘zoom’ …
  2. Please share the link describing the bpmn-js APIs. I have been searching for this on Bpmn.io without success.

Thanks for the reply.

4

Is the code shareable, this will help me incorporate other features like ‘full screen’, ‘zoom’ …

I doubt so, sorry. We have examples in place that show various use cases, e.g. the Modeler example or the Modeling API example. You may also find this answer helpful: How to add zoom in, zoom out , Reset Zoom ,Toggle Full Screen , Download as SVG , Download BPMN Diagram shortcut keys in angular bpmn js plugin? - #2 by barmac

  1. Please share the link describing the bpmn-js APIs. I have been searching for this on Bpmn.io without success.

There exists no dedicated documentation at the moment for all the services bpmn-js provides. You would have to scan the source code to find out about the API.