Thank you for the response.
Sadly there are no errors or any other kind of indication.
I do remember when I used the sample project from narve and was playing around with the styling to fit my app, sometimes I could see those properties and sometimes I could not. It felt to me like the styling was effecting it in some way.
Between are those properties built into the ‘main’ module or maybe they got their own code section in the implementation?
At the moment I am kinda clueless about the behavior behind those properties and if and how my app effects them.
Here is the “editor” component which I am using for this part ( everything is working except for those properties which aint showing up on click as they should ) :
html file -
<div class="content with-diagram" >
<div class="canvas" id="js-canvas"></div>
</div>
<div fxLayout="column" class="properties-panel-parent" id="js-properties-panel"></div>
<div fxLayout="row">
<ul class="buttons">
<li>
<mat-card style="width:auto">
<section fxLayout="row" [ngStyle]="style">
<button mat-button (click)="save()">
Save
</button>
</section>
</mat-card>
</li>
<li>
<mat-card style="width:auto">
<section fxLayout="row" [ngStyle]="style">
<button mat-button (click)="load()">
Download
</button>
</section>
</mat-card>
</li>
</ul>
</div>
scss file -
.content {
position: fixed;
width: 90%;
height: 90%;
.canvas {
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
}
&.with-diagram {
.canvas,
.properties-panel-parent {
display: block;
}
}
}
.buttons {
position: fixed;
bottom: 20px;
left: 20px;
padding: 0;
margin: 0;
list-style: none;
> li {
display: inline-block;
margin-right: 10px;
}
}
.properties-panel-parent {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 260px;
z-index: 10;
border-left: 1px solid #ccc;
overflow: auto;
&:empty {
display: none;
}
> .djs-properties-panel {
padding-bottom: 70px;
min-height:100%;
}
}
ts file -
import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle';
import FileSaver from 'file-saver';
@Component({
selector: 'app-bpmn-editor',
templateUrl: './bpmn-editor.component.html',
styleUrls: ['./bpmn-editor.component.scss']
})
export class BpmnEditorComponent implements OnInit {
constructor(private http: HttpClient) {
}
bpmnViewer: any;
bpmnData: any;
ngOnInit(): void {
this.bpmnViewer = new BpmnModeler({
container: '#js-canvas',
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
}
load(): void {
const url = '/assets/bpmn/initial.bpmn';
this.http.get(url, {
headers: {observe: 'response'}, responseType: 'text'
}).subscribe(
(x: any) => {
this.bpmnViewer.importXML(x, this.handleError);
},
this.handleError
);
}
save(): void {
this.bpmnViewer.saveXML((err: any, xml: any) => {
const blob = new Blob([xml], {type: 'text/plain;charset=utf-8'});
FileSaver.saveAs(blob, 'bpmnSample.bpmn');
});
} // console.log('Result of saving XML: ', err, xml));
handleError(err: any) {
if (err) {
console.warn('Loading bpmn failed, error: ', err);
}
}
}
Any help will be must appreciated guys!