Right click context menu

Hello,
is it possible to include a right click context menu in order to rename or change events of the selected shape.

kind regards,

Hi,

Context menu is provided by backend part of the Camunda Modeler, so you could add some custom menu entries to trigger bpmn-js internal custom module, that, in turn, would show some sort of rename dialog or events list (N.B. none of this is available out of the box).

Here is context menu entry file, that is forwarding initial right click trigger to backend for creating context menu.

Hope this gives you a hint on where to start looking.

Cheers,
Vladimir

1 Like

Thank you,.
the provided implmentation will trigger a context menu to the browser DOM object, can i restrict only it for the bpmn events (e.g: task)

kind regards,

You would need to modify this method to pass event through to some modeler component and examine element that has been clicked and pass a default implementation as a fallback (if still required).

This looks to be tricky, but should be doable.

Cheers,
Vladimir

1 Like

Hello Vladimirs,
Which node js packages shall i include into the custom element project in order to integrate the context menu features.

Thanks.
Kind regards,

Hi,

Method of showing context menu in Camunda Modeler is specific to underlying framework used (Electron).

Native browser support is not there yet for manipulating context menu, so different mechanism should be used, if you would like to implement it for web application.

In order to show some sort of context menu, you should listen for contextmenu event and toggle your custom context menu. Here is JSFiddle to ilustrate this.

Hope this helps,
Vladimir

1 Like

Hello,
As far as i understand, the context menu in Camunda modler is attaching the context menu feature to the app variable which is an instance of require(‘electron’)
is there any other node js packages i can use to perform the right click and override the native browser menu.

thank you very much for your quick replies :slight_smile:

‘use strict’;

var browser = require('util/browser');

var debug = require('debug')('context-menu');


/**
 * Application Window Menu integration
 */
function ContextMenu(app) {

  // Updating Menu
  app.on('context-menu:open', function(type, attrs) {
    debug('[context-menu] open');

    browser.send('context-menu:open', type, attrs);
  });
}

module.exports = ContextMenu;

Hi @dhaker,

I’ve worked with this plugin for context menus. I applied it to the repo, check it out here.

All the code is in the angular side in these files: 1, 2, 3

Hope it helps,
Regards.

1 Like

thanks a ton David, i really appreciate your effort and time :slight_smile:.

Hello David,

When i right click the context menu is shown, but i could not get the instance of the selected bpmn object in order for example to call the removeElement action from the ContextPadProvider,
How i could pass this action (modeling#removeElement(e)) to the context menu item callback.

Thanks and regards,

Hi Dhaker,

I updated my repo, you can see the changelog here.

Let me know if you have any question about it.

Regards.

1 Like

Thank you so much David that’s make sense,
it works well but when i tried to set the icon it is not showing up?

“delete”: {
name: “Delete”,
icon: “bpmn-icon-trash”
},

Can you have a look to this post :wink: