Bpmn-js custom popup menu (replace menu provider)

BPMN-custom-popup-menu.md

Bpmn-js custom popup menu (ReplaceMenuProvider)

The only way I found to modify bpmn's popup menu is to copy/paste and edit bpmn's files - ReplaceMenuProvider.js and ReplactOptions.js:

$ mkdir src/bpmn
$ mkdir src/bpmn/popup-menu
$ mkdir src/bpmn/replace
$ cp node_modules/bpmn-js/lib/features/popup-menu/index.js src/bpmn/popup-menu/
$ cp node_modules/bpmn-js/lib/features/popup-menu/ReplaceMenuProvider.js src/bpmn/popup-menu/
$ cp node_modules/bpmn-js/lib/features/replace/ReplaceOptions.js src/bpmn/replace/

Edit src/bpmn/popup-menu/index.js to remove unnecessary imports. My index.js:

import ReplaceMenuProvider from './ReplaceMenuProvider';

export default {
  __depends__: ["popupMenu", "bpmnReplace"],
  __init__: [ 'replaceMenuProvider' ],
  replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
};

Edit src/bpmn/popup-menu/ReplaceMenuProvider.js and update paths to bpmn's modules. There should be bpmn-js/lib/util/ModelUtil instead of ../../util/ModelUtil etc. Here's import section of my ReplaceMenuProvider.js:

import {
  getBusinessObject,
  is
} from 'bpmn-js/lib/util/ModelUtil';

import {
  isEventSubProcess,
  isExpanded
} from 'bpmn-js/lib/util/DiUtil';

import {
  isDifferentType
} from 'bpmn-js/lib/features/popup-menu/util/TypeUtil';

import {
  forEach,
  filter,
  isUndefined
} from 'min-dash';

import * as replaceOptions from '../replace/ReplaceOptions';

The list of popup menu items lives in src/bpmn/replace/ReplaceOptions.js. Edit it on your own.

Finally, import your custom ReplaceMenuProvider.js and add it to additionalModules of BpmnModeler. It should look something like this:

import CustomReplaceMenuProvider from 'src/bpmn/popup-menu';

const modeler = new BpmnModeler({
  ...
  additionalModules: [ CustomReplaceMenuProvider ]
});