Unable to see pop-up menu in palett or context pad

Developers Modeler
1

Hello

Please HELP

I am unable to see the pop up menu(three dots) option in either the context pad or the pallet. How can it be fixed? I want to show three dots in both the palette and context pad that upon clicking shows the list of elements available.

Thanks in advance for any help.

image
image1623×1210 27.8 KB

Here is the code

import {AfterContentInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
import Modeler from 'bpmn-js/lib/Modeler';
// @ts-ignore
import {BpmnPropertiesPanelModule, BpmnPropertiesProviderModule,} from 'bpmn-js-properties-panel';
import {from, Observable} from 'rxjs';
import { tap } from 'rxjs/operators';
// @ts-ignore
import { layoutProcess } from 'bpmn-auto-layout';  // Use named import
import { HttpClient } from '@angular/common/http'; 
// @ts-ignore
import customPropertiesProvider from '../custom-properties-provider/custom-property-provider'

const custom = require('../custom-properties-provider/descriptors/custom.json');

@Component({
  selector: 'app-bpmn-modeler',
  standalone: true,
  imports: [],
  templateUrl: './bpmn-modeler.component.html',
  styleUrl: './bpmn-modeler.component.css'
})
export class BpmnModelerComponent {

  private bpmnJS: Modeler;

  @ViewChild('diagramRef', { static: true }) private diagramRef: ElementRef | undefined;
  @ViewChild('propertiesRef', { static: true }) private propertiesRef: ElementRef | undefined;

  private xml: string = `<?xml version="1.0" encoding="UTF-8"?>
  <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
    <bpmn2:process id="Process_1" isExecutable="false">
      <bpmn2:startEvent id="StartEvent_1"/>
    </bpmn2:process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
          <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
        </bpmndi:BPMNShape>
      </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
  </bpmn2:definitions>`;

  constructor(private http: HttpClient) {
    this.bpmnJS = new Modeler({
      container: this.diagramRef?.nativeElement,
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        customPropertiesProvider
      ],
      propertiesPanel: {
        parent: this.propertiesRef
      },
      moddleExtensions: {
        custom: custom
      }
    });
  }

  ngAfterContentInit(): void {
    // attach BpmnJS instance to DOM element
    this.bpmnJS.attachTo(this.diagramRef!.nativeElement);

    const propertiesPanel =this.bpmnJS.get('propertiesPanel');

    // @ts-ignore
    propertiesPanel.attachTo(this.propertiesRef!.nativeElement);
    this.importDiagram(this.xml);
  }

  // More code
}
2

Hello there!
Can you provide more info on what are you trying to do (ideally with some screenshots).
Also your code snippet gives very little information to what the customPropertiesProvider and custom are.