BPMNFActory create properties panel

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;

}

}

}