Properties not showing up - angular with bpmn.js


#1

Hello,

I looked on some of the examples including the one made by @narve
And i implemented something similar ( pretty basic for now ).

My problem is that I dont have the ‘pop up’ for the components, for example when i drag a task there is no pop up from which I can choose to make it a service task etc…

I was wondering and would like to understand a little better,
which component / part is being responsible for showing that?

Example - I only got the bigger component without all the attached ‘properties’ which can be seen in the image below on the right side of it.
image


#2

Please ensure the developer console (F12 in your Browser, if you’re on Windows/Linux) does not show any error.


#3

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!


#4

Can you be more specific about exactly you’re missing? The context pad seems to be there. Are you referring to the context menu?

2018-10-09_08-51-51


#5

Hello,

The context menu aint showing up for me ( the menu with all the icons - the tool icon, the arrow icons, the trash can icon and the others )

P.S.
I am assuming that if those will show up then the context pad where i can choose Send task, service task etc… will show up as well.

Maybe I am missing certain styles or extra module?
In my anguar.json file I included the following files -

            "styles": [
              "src/styles.scss",
              "node_modules/bpmn-js/dist/assets/diagram-js.css",
              "node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css",
              "node_modules/bpmn-js-properties-panel/styles/properties.less"
            ],

#6

Can you please share your project? To me it’s not reasonable why the context pad shouldn’t work.


#7

I sadly cant,

A simplified version which I planned to share with you is actually working as intended. I loaded narve angular 5 project with my package.json npm versions and I also simplified the code in it (It works), I then simplified the code on the same section in my app and that context still aint showing up.

I compared and I see no visible difference at all.
My only suspicion is that the global styling is somehow damaging the modeler styling which in return is not showing those contexts.

Maybe the global material design styling is somehow doing it, It is the only thing which I cant disable to make sure ( I disabled all the other styles while testing ).

I will try to test it on the sample app, and to ‘recreate’ the same problem there so I can share it.