import {Component, ElementRef, OnInit, ViewChild} from ‘@angular/core’;
import {HttpClient} from ‘@angular/common/http’;
import {Observable} from ‘rxjs’;
import Modeler from “bpmn-js/lib/Modeler”;
import propertiesPanelModule from “bpmn-js-properties-panel”;
import propertiesProviderModule from “bpmn-js-properties-panel/lib/provider/camunda”;
import camundaModdleExtension from “camunda-bpmn-moddle/lib”;
import “bpmn-js/dist/assets/diagram-js.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css”;
import “bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css”;
import * as camundaModdleDescriptor from ‘camunda-bpmn-moddle/resources/camunda.json’;
import * as FileSaver from ‘file-saver’;
import $ from ‘jquery’;
import ReplaceMenuProvider from ‘./popup-menu’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit {
title = ‘Workflow Modeler’;
modeler: Modeler;
collapse1 = true;
@ViewChild(‘canvas’)
private canvesRef: ElementRef;
constructor(private http: HttpClient) {
$('#collapsedPanel').css('right', '-40px');
}
ngOnInit(): void {
this.modeler = new Modeler({
container: '#canvas',
width: '100%',
height: '600px',
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
ReplaceMenuProvider,
camundaModdleExtension
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.load();
}
load(): void {
this.getExample().subscribe(data => {
this.modeler.importXML(data, value => this.handleError(value));
});
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
public getExample(): Observable {
const url = '/assets/bpmn/initial.bpmn'; // local
return this.http.get(url, {responseType: 'text'});
}
save(): void {
this.modeler.saveSVG((err,result)=>{
if(err){
console.log(err,'got gerro')
}
else{
const blob = new Blob([result], {type: 'text/plain;charset=utf-8'});
FileSaver.saveAs(blob, 'bpmnSample.svg');
}
})
}
saveBPMN():void{
this.modeler.saveSVG((err,result)=>{
if(err){
console.log(err,'got gerro')
}
else{
const blob = new Blob([result], {type: 'text/plain;charset=utf-8'});
FileSaver.saveAs(blob, 'bpmnSample.bpmn');
}
})
}
collapsePanel() {
if (this.collapse1) {
$("#properties").css({"display": "none",});
$("#collapsedPanel").css({ "right": "-43px"});
this.collapse1 = false;
} else {
$("#properties").css('display','block');
$("#collapsedPanel").css('right','216px')
this.collapse1 = true;
}
}
}