Hello team!
I embed dmn in angular component, i have the following structure:
import { AfterContentInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import DmnJS from 'dmn-js/dist/dmn-modeler.production.min.js';
import { Observable, from } from 'rxjs';
@Component({
selector: 'lib-decision-model-notation',
templateUrl: './decision-model-notation.component.html',
styleUrls: ['./decision-model-notation.component.scss']
})
export class DecisionModelNotationComponent implements AfterContentInit, OnInit, OnChanges, OnDestroy {
@ViewChild('ref', { static: true }) private el: ElementRef = {} as ElementRef;
@Input() decisionModel: string;
private dmnJS: any;
constructor() {
this.dmnJS = new DmnJS();
}
ngOnInit(): void {
this.dmnJS.on('import.done', (error: any) => {
if (!error) {
this.dmnJS.get('canvas').zoom('fit-viewport');
}
});
}
ngAfterContentInit(): void {
this.dmnJS.attachTo(this.el.nativeElement);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.decisionModel) {
this.importDiagram(changes.decisionModel.currentValue).subscribe(result => {
if (result.warnings) {
console.warn(result.warnings);
}
},
(error) => {
console.error(error);
});
}
}
ngOnDestroy(): void {
this.dmnJS.destroy();
}
/**
* Creates a Promise to import the given XML into the current
* BpmnJS instance, then returns it as an Observable.
*
* @see https://github.com/bpmn-io/bpmn-js-callbacks-to-promises#importxml
*/
private importDiagram(xml: string): Observable<{ warnings: Array<any> }> {
return from(this.dmnJS.importXML(xml) as Promise<{ warnings: Array<any> }>);
}
}
It is working, but when trying to drop one the left tools on the canvas, we are getting the next error in console:
