Custom PopUp Menu on Right Click

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.

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

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.

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');
								  });