Integrating bpmn-js modeler in angular

Developers Modeler
1

I’m trying to use bpmn-js npm package and trying to build camunda modeler in the angular application

I have tried GitHub - bpmn-io/bpmn-js-example-angular: An example how to integrate bpmn-js with an Angular application.
Unable to find the BpmnJs
image

I’m using latest 14.0.0 version of bpmn-js
Any working example or suggested alternative way would be helpful
Thanks in advance

2

Bro, import camunda-bpmn-js, like this:

import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-platform/Modeler’;

3

Hi @Gustavo.rocha Thanks for the suggestion

I have imported modeler as below
import Modeler from ‘bpmn-js/lib/Modeler’;
Angular code

  @ViewChild('ref', { static: true })
  private el!: ElementRef;
  public modeler :any =  new Modeler();
  constructor() {
    this.modeler.on('import.done', ({ }) => {
      this.modeler.get('canvas').zoom('fit-viewport');
    });
  ngOnInit(): void {
     //getting the bpmn content
   this.modeler.importXML(bpmnFileContent);
   this.modeler.get('canvas').zoom('fit-viewport');

}
   }
  ngAfterContentInit(): void {
    this.modeler.attachTo(this.el.nativeElement);
  }

Html

<div class="diagram-parent">
    <div #ref class="diagram-container" ></div>
</div>

I’m getting modeler for desiging as below which is not similar to what we see in camunda modeler

image
image1761×826 11.2 KB

How to get the modeler similar to this with options on left and properties on right , export bpmn
image
image1931×945 32.2 KB

If anybody has done this and know how to do it
Your insights are highly regarded.

4

Man, I´m make like this:
import {
Component,
OnInit,
AfterViewInit,
ViewChild,
ElementRef,
AfterContentInit,
OnDestroy,

} from ‘@angular/core’;

import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-platform/Modeler’;
import minimapModule from ‘diagram-js-minimap’;
import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

// import {
// BpmnPropertiesPanelModule,
// BpmnPropertiesProviderModule,
// } from ‘bpmn-js-properties-panel’;

// import camundaModdleDescriptors from ‘camunda-bpmn-moddle/resources/camunda.json’;
@Component({
selector: ‘lib-modeler’,
templateUrl: ‘./modeler.component.html’,
styleUrls: [‘modeler.component.scss’]
})
export class ModelerComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {

@ViewChild(‘bpmn’, { static: true }) private el: ElementRef;
// @ViewChild(‘pro’, { static: true }) private properties: ElementRef;
public bpmnJS: BpmnModeler;
constructor() {

this.bpmnJS = new BpmnModeler({
  // propertiesPanel: {
  //   parent: '#properties'
  // },
  additionalModules: [
    minimapModule,
    BpmnColorPickerModule,
    // BpmnPropertiesPanelModule,
    // BpmnPropertiesProviderModule,
  ],
  // moddleExtensions: {
  //   camunda: camundaModdleDescriptors
  // }
})

}

ngOnInit(): void {
fetch(‘https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn’)
// fetch(‘…/…/assets/processo-de-vendas.bpmn’)
.then(res => res.text())
.then((xml) => {
this.bpmnJS.importXML(xml)
})
}

ngAfterContentInit(): void {
this.bpmnJS.attachTo(this.el.nativeElement);
// const propertiesPanel: any = this.bpmnJS.get(‘propertiesPanel’);

// propertiesPanel.attachTo(this.properties.nativeElement);

}
ngOnDestroy(): void {
this.bpmnJS.destroy();
}

ngAfterViewInit(): void {

}

}