Custom PopUp Menu on Right Click

Users
1

Hi,

Is there any way to display pop menu with menu items, when user right clicks on element.
I saw examples but unable to find such.

Regards,
Raja.

2

Hi Raja,

Could you explain more explicitly what you’re trying to achieve?
From what I understood, this could help you : https://codesandbox.io/s/bpmn-js-context-pad-on-context-menu-bkxo5?file=/src/index.js

3

Hi Azeghers,

yes I have seen the example before coming here.

Let me mention what I need exactly.

When user right clicks on element

a menu should pop up like

image

When I click on each menu item, a event should occur. Only challenging part is getting the popup menu item which I am still unable to figure it out.

4

Finally able to figure it out

added this snippet in PopupMenu.prototype.open

if(position == 'fetch')	{
		position = assign(getStartEventPosition(element), {
			cursor: { x: event.x, y: event.y }
		});
	}

then

const popupMenuProvider = {
								getPopupMenuEntries: function(element) {
									return {
										'entry-1': {
											label: 'Menu 1',
											action: function() {
												popupMenu.close();
												alert("I have been Menu1 clicked!");
											}
										},
										'entry-2': {
											label: 'Menu 2',
											action: function() {
												popupMenu.close();
												alert("I have been clicked Menu 2!");
											}
										}
									}
								}
							};

popupMenu.registerProvider('myMenuID', popupMenuProvider);

var eventBus = bpmnModeler.get('eventBus');

eventBus.on("element.contextmenu", event => {
									event.preventDefault();
									event.stopPropagation();

									const { element } = event;
									popupMenu.open(element, 'myMenuID', 'fetch');
								  });
1 Like
5

Hi @Raja. I am looking for a similar solution. I am trying to implement it. But I have a doubt related to the bpmnModeler. Where it is declared? In the bpmn library?

6

bpmnModeler should be declared. I hope the below code helps you.


var bpmnModeler = getBPMNModeler('#canvas');
// canvas is div id
function getBPMNModeler(container){
    return new BpmnJS({
        container: container,
        keyboard: {
            bindTo: window
        }                
    });
}
1 Like