Hi, I’m using BPMN-JS on an Angular project from the Clean UI template.
I’ve got the demo and I have it working on a simple angular project, but when transferring it to my Clean UI project there are things missing
If the picture is showing, I’ve got no palette, and the mini options that allow for things like adding panels is also missing, I can only edit text, adjust the lines, and that’s it
Also, it’s not picking the full height, it’s just the minimium to hold what the XML says.
It’s got me weirded out because the code is basically the same, same imports and set up.
The only thing that comes to mind here is that the Clean UI template might have something to do with it, but I have found nothing so far that comes in their way.
Any idea on what I might be missing?, I’ll add my code here
import { Component, OnInit, ElementRef, EventEmitter, Output, ViewChild, Input, SimpleChanges, AfterContentInit, OnDestroy, OnChanges } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, catchError, retry } from 'rxjs/operators';
/**
* You may include a different variant of BpmnJS:
*
* bpmn-viewer - displays BPMN diagrams without the ability
* to navigate them
* bpmn-modeler - bootstraps a full-fledged BPMN editor
*/
import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import bpmnPaletteModule from 'bpmn-js/lib/features/palette';
import { importDiagram } from './rx';
import { throwError } from 'rxjs';
// declare var require:any
// const datas:any = require('./diagram.bpmn')
@Component({
selector: 'app-diagram',
templateUrl: './modeler.component.html',
styleUrls: ['./modeler.component.scss']
})
export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy {
private bpmnJS: BpmnJS;
@ViewChild('ref') private el: ElementRef;
@Output() private importDone: EventEmitter<any> = new EventEmitter();
@Input() private url: string;
constructor(private http: HttpClient) {
this.bpmnJS = new BpmnJS();
this.bpmnJS.on('import.done', ({ error }) => {
if (!error) {
this.bpmnJS.get('canvas').zoom('fit-viewport');
}
});
}
ngAfterContentInit(): void {
this.bpmnJS.attachTo(this.el.nativeElement);
}
ngOnChanges(changes: SimpleChanges) {
// re-import whenever the url changes
if (changes.url) {
this.loadUrl(changes.url.currentValue);
}
}
ngOnDestroy(): void {
this.bpmnJS.destroy();
}
/**
* Load diagram from URL and emit completion event
*/
loadUrl(url: string) {
return (
this.http.get(url, { responseType: 'text' }).pipe(
catchError(err => throwError(err)),
importDiagram(this.bpmnJS)
).subscribe(
(warnings) => {
this.importDone.emit({
type: 'success',
warnings
});
},
(err) => {
this.importDone.emit({
type: 'error',
error: err
});
}
)
);
}
}
@Component({
selector:'modeler',
template:`
<div class="diagram-parent">
<app-diagram [url]="diagramUrl" (importDone)="handleImported($event)"></app-diagram>
</div>
<div class="import-error" *ngIf="importError">
<strong>Failed to render diagram: </strong>
{{ importError.message }}
</div>
`,
styles: [`
.diagram-parent {
height: 800px;
border: solid 3px #EEE;
position: relative;
}
`]
})
export class ModelerWrapperComponent{
diagramUrl = 'assets/diagram.bpmn';
importError?: Error;
handleImported(event) {
const {
type,
error,
warnings
} = event;
if (type === 'success') {
console.log(`Rendered diagram (%s warnings)`, warnings.length);
}
if (type === 'error') {
console.error('Failed to render diagram', error);
}
this.importError = error;
}
}