i am using angular 8 and in this i need when i click on append task so menu will be added so how can i do that
app.comonent.html
Properties Panel
</div
svg image
BPMN diagram
app.component.ts
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 “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’;
@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;
downloadLink = $(’#js-download-diagram’);
downloadSvgLink = $(’#js-download-svg’);
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
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.load();
// this.saveSVG((err, svg)=> {
// this.setEncoded(this.downloadSvgLink, 'diagram.svg', err ? null : svg);
// });
$(document).ready(function(){
console.log('helllo bot')
});
}
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');
}
})
// this.modeler.saveXML((err: any, xml: any) => {
// if(err){
// console.log(‘Error Accurred while saving XML’, err);
// }else{
// console.log('Result of saving XML: ',xml);
// }
// })
}
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');
}
})
}
setEncoded(link, name, data) {
var encodedData = encodeURIComponent(data);
if (data) {
link.addClass('active').attr({
'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
'download': name
});
} else {
link.removeClass('active');
}
}
// saveSVG(done) {
// this.modeler.saveSVG(done);
// }
saveSVG(err, svg) {
this.modeler.saveSVG((err: any, svg: any) => {
const blob = new Blob([svg], {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;
}
}
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'});
}
}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 “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’;
@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;
downloadLink = $(’#js-download-diagram’);
downloadSvgLink = $(’#js-download-svg’);
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
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.load();
// this.saveSVG((err, svg)=> {
// this.setEncoded(this.downloadSvgLink, ‘diagram.svg’, err ? null : svg);
// });
$(document).ready(function(){
console.log(‘helllo bot’)
});
}
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’);
}
})
// this.modeler.saveXML((err: any, xml: any) => {
// if(err){
// console.log(‘Error Accurred while saving XML’, err);
// }else{
// console.log('Result of saving XML: ',xml);
// }
// })
}
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’);
}
})
}
setEncoded(link, name, data) {
var encodedData = encodeURIComponent(data);
if (data) {
link.addClass('active').attr({
'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
'download': name
});
} else {
link.removeClass('active');
}
}
// saveSVG(done) {
// this.modeler.saveSVG(done);
// }
saveSVG(err, svg) {
this.modeler.saveSVG((err: any, svg: any) => {
const blob = new Blob([svg], {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;
}
}
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’});
}
}