Palette and other editing toold from modeler are missing/not showing up

Hi, I’m using BPMN-JS on an Angular project from the Clean UI template.

I’ve got the demo and I have it working on a simple angular project, but when transferring it to my Clean UI project there are things missing

image

If the picture is showing, I’ve got no palette, and the mini options that allow for things like adding panels is also missing, I can only edit text, adjust the lines, and that’s it
Also, it’s not picking the full height, it’s just the minimium to hold what the XML says.

It’s got me weirded out because the code is basically the same, same imports and set up.

image

The only thing that comes to mind here is that the Clean UI template might have something to do with it, but I have found nothing so far that comes in their way.

Any idea on what I might be missing?, I’ll add my code here

import { Component, OnInit, ElementRef, EventEmitter, Output, ViewChild, Input, SimpleChanges, AfterContentInit, OnDestroy, OnChanges } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, catchError, retry } from 'rxjs/operators';

/**
 * You may include a different variant of BpmnJS:
 *
 * bpmn-viewer  - displays BPMN diagrams without the ability
 *                to navigate them
 * bpmn-modeler - bootstraps a full-fledged BPMN editor
 */
import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import bpmnPaletteModule from 'bpmn-js/lib/features/palette';

import { importDiagram } from './rx';

import { throwError } from 'rxjs';

// declare var require:any
// const datas:any = require('./diagram.bpmn')
@Component({
  selector: 'app-diagram',
  templateUrl: './modeler.component.html',
  styleUrls: ['./modeler.component.scss']
})
export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy {
  private bpmnJS: BpmnJS;

  @ViewChild('ref') private el: ElementRef;
  @Output() private importDone: EventEmitter<any> = new EventEmitter();

  @Input() private url: string;

  constructor(private http: HttpClient) {

    this.bpmnJS = new BpmnJS();

    this.bpmnJS.on('import.done', ({ error }) => {
      if (!error) {
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      }
    });
  }

  ngAfterContentInit(): void {
    this.bpmnJS.attachTo(this.el.nativeElement);
  }

  ngOnChanges(changes: SimpleChanges) {
    // re-import whenever the url changes
    if (changes.url) {
      this.loadUrl(changes.url.currentValue);
    }
  }

  ngOnDestroy(): void {
    this.bpmnJS.destroy();
  }

  /**
   * Load diagram from URL and emit completion event
   */
  loadUrl(url: string) {
    return (
      this.http.get(url, { responseType: 'text' }).pipe(
        catchError(err => throwError(err)),
        importDiagram(this.bpmnJS)
      ).subscribe(
        (warnings) => {
          this.importDone.emit({
            type: 'success',
            warnings
          });
        },
        (err) => {
          this.importDone.emit({
            type: 'error',
            error: err
          });
        }
      )
    );
  }
}

@Component({
  selector:'modeler',
  template:`
    <div class="diagram-parent">
      <app-diagram [url]="diagramUrl" (importDone)="handleImported($event)"></app-diagram>
    </div>
    <div class="import-error" *ngIf="importError">
      <strong>Failed to render diagram: </strong>
      {{ importError.message }}
    </div>
  `,
  styles: [`
    .diagram-parent {
      height: 800px;
      border: solid 3px #EEE;
      position: relative;
    }
  `]
})
export class ModelerWrapperComponent{
  diagramUrl = 'assets/diagram.bpmn';
  importError?: Error;

  handleImported(event) {

    const {
      type,
      error,
      warnings
    } = event;

    if (type === 'success') {
      console.log(`Rendered diagram (%s warnings)`, warnings.length);
    }

    if (type === 'error') {
      console.error('Failed to render diagram', error);
    }

    this.importError = error;
  }
}

Ah, I was supossed to upload this instead
image

I have the same issue, are you able to resolve this issue?

I am also facing the same issue when trying to replicate the example to a clean Angular project. Palette is not visible but the bpmn diagram can be loaded. I need to display the palette so that user can create a new diagram itself.
Please help if someone knows the solution.

@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

Please import bpmn style sheets (i have imported these in my global.css file)

and in your component.ts

import BpmnPalletteModule from 'bpmn-js/lib/features/palette';
this.diagramModeler = new BpmnModeler({
      keyboard: { bindTo: document },
      BpmnPalletteModule);

If you still don’t see the palette, Please post your TS and html code here

1 Like

Please see the following thread, where i went throug multiple issues and solved them.

1 Like

The solution provided worked (Added the css to global css file). I spent one day entirely on this. Thank you so much.

Good to know. If you want to change the look and feel of the palette, just inspect element and override the styles in your global.css (such as changing background color etc.,).

2 Likes