Left side toolbox with bpmn shapes and elements not displayed

Developers
1

Hello I tried basic Modeler implementation in my angular 8 application and successfully imported pizza bpmn flow, but i don’t see left side toolbox to add shapes. Please help me

2

Mind you share a code snippet about your setup? Do you refer to an example?

Without further information its hard to help you.

5

code
code2804×13320 3.21 MB

7

my CSS code
code_css

8

My Html Code

 <div class="diagram-loading" *ngIf="isChartLoading"></div>
 <div class="row">
     <div class="col col-sm-12">
        <button class="btn btn-sm btn-success" (click)="onSaveDiagram()">Save</button>
        <button class="btn btn-sm btn-secondary">Cancel</button>    
        <button class="btn btn-sm btn-secondary" (click)="onElementRegistry()">Display Element Reistry</button>
        <div class="btn btn-sm btn-warning" (click)="onShowChanges()">Show Changes</div>
        <div class="btn btn-sm btn-danger" (click)="onEnableEvents()">{{ eventEnableStatus }} </div>
     </div>
 </div>
 <div class="row">
    <div class="col col-sm-12">
       <p *ngIf="isElementRegistryDisp">{{ diagramElemRegistryString }}</p>
    </div>
</div>
 <div #ref class="diagram-container" *ngIf="!isChartLoading"></div>
9

Output of my above code is generating the below BPMN diagram

  1. No issue with rendering the diagram
  2. The diagram is not visible, unless I Click and scroll a little bit
  3. All the vertices are highlighted with a DOT
  4. Default Palette is not visible
    BPMN_Diagram_Issue
10

Per my further troubleshooting, i found the following error on my developer tools console.

Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
setCTM	@	bpmn-modeler.development.js?e75e:3920
eval	@	bpmn-modeler.development.js?e75e:3867
Canvas._changeViewbox	@	bpmn-modeler.development.js?e75e:3726
Canvas.scroll	@	bpmn-modeler.development.js?e75e:3862
scroll	@	bpmn-modeler.development.js?e75e:21452
handleWheel	@	bpmn-modeler.development.js?e75e:21540
ZoneDelegate.invokeTask	@	zone.js?d135:431
onInvokeTask	@	core.js?f18e:39679
ZoneDelegate.invokeTask	@	zone.js?d135:430
Zone.runTask	@	zone.js?d135:198
ZoneTask.invokeTask	@	zone.js?d135:513
invokeTask	@	zone.js?d135:1671
globalZoneAwareCallback	@	zone.js?d135:1697

It seems transform: marix is not working on my chrome browser. Following is my browser details

Version 80.0.3987.87 (Official Build) (64-bit) (windows)

11

Finally figured out the root cause.

  1. It is not a chrome issue or BPMN.io issue
  2. I have generated angular app using jHisper. jHipster not allowing css to download (default config).
  3. imported bpmn css in the app\content\scss\global.scss
@import 'bootstrap-variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
1 Like
12

I’m loving BPMN.io excellent tool.

BPMN_Diagram_Issue_fixed

2 Likes
13

So, you were able to solve your problem, right?

14

Yes. Its completely my fault. I didn’t import CSS to begin with. After importing BPMN specific CSS, all worked well. Thanks for checking
-Mallesh

1 Like