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.
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
}