Register custom menu action and trigger a plugin method

BPMN & Modeling Discussion & Questions
1

I would like to register a custom menu action for a menu entry and execute a bpmnjs plugin when this event is emitted.

This is related to Listen to menu event with client plugin in Camunda Modeler. I don’t quite get how to register a new event. What I have so far:

menu.js:

module.exports = function(electronApp, menuState) {
    return [{
      label: 'Do Something',
      enabled: function() {
          return menuState.bpmn;
      },
      action: function() {
        electronApp.emit('menu:action', "do-something");
      }
    }];
  };

ClientPlugin.js:

export default function ClientPlugin(eventBus) {
   eventBus.on("do-something", (event) => {
       console.log(event)
   })
}
 
ClientPlugin.$inject = [
  'eventBus'
];

The plugin as well as the menu entry are correctly loaded.
However, when I click the ‘Do Something’ I get the error message:

do-something is not a registered action
    at o (webpack:///node_modules/diagram-js/lib/features/editor-actions/EditorActions.js:257:9)
    at error (webpack:///node_modules/diagram-js/lib/features/editor-actions/EditorActions.js:167:10)
    at trigger (webpack:///src/app/tabs/bpmn/BpmnEditor.js:630:40)
    at triggerAction (webpack:///src/app/tabs/MultiSheetTab.js:270:18)
    at triggerAction (webpack:///src/app/tabs/EditorTab.js:36:33)
    at triggerAction (webpack:///src/app/App.js:1718:15)
    at fn (webpack:///src/app/App.js:2186:19)
    at file:///C:/Users/alneuman/workspace/camunda-modeler-4.9.0-win-x64/resources/app.asar/public/bundle.js:65:144104
    at exec (webpack:///src/app/AppParent.js:76:11) [ error ]

Is electronApp.emit the right method for my use case? I tried to listen to bpmn.modeler.configure in ClientPlugin.js with eventBus.on to maybe get the editorActions as suggested by the post above but I guess this event has already been processed or is currently processed when the plugin is loaded since the callback is never called.

2

I guess I have a clue how to approach this after some more digging.
I registered another plugin with something like this:

MyPlugin.js

export default {
  __init__: ['my_plugin'],
  my_plugin: ['type', MyPluginImpl]
};

and passed this to registerBpmnJSPlugin:

index.js

import {
  registerBpmnJSPlugin
} from 'camunda-modeler-plugin-helpers';

import MyPlugin from './bpmn-js-extension/MyPlugin';

registerBpmnJSPlugin(MyPlugin);

export default in MyPlugin.js has to be replaced with a more sophisticated PureComponent as shown in camunda-modeler/TestEditorEvents.js at develop · camunda/camunda-modeler · GitHub. I guess this is where bpmn.modeler.configure can be processed.

Update: I had to replace registerBpmnJSPlugin with registerClientExtension to make the PureComponent work and can now process bpmn.modeler.configure and bpmn.modeler.created. I haven’t figured out how and where I have to register my custom do-something event though.

3

It was way easier than expected. I just have to inject editorActions in ClientPlugin and can then call

function ClientPlugin(eventBus, editorActions) {
  // ...
  editorActions.register({
    doSomething: function () {
      console.log("Do something faaast");
    },
  });
  // ...
}
ClientPlugin.$inject = ["eventBus", "editorActions"];

This will be triggered when I call electronApp.emit('menu:action', "doSomething"); from menu.js

2 Likes
4

Thanks for posting the solution!

5