bpmn.js中如何使用鼠标右键在幕布空白处弹出节点选择菜单？

2024-02-04 12:53:49

步骤

给幕布元素添加id
```
<div id="canvas"></div>
```

在bpmn.js中创建一个自定义节点菜单模块

import { MenuItemProvider } from 'bpmn-js/lib/features/context-pad/ContextPadProvider';

export default {
  __init__: ['contextPadProvider'],

  contextPadProvider: [ 'type', MenuItemProvider, function (contextPadProvider) {
    contextPadProvider.registerProvider(this);
  }],

  getContextPadEntries: function (element) {
    if (element.type === 'bpmn:Process') {
      return [
        {
          label: '添加任务',
          action: 'create.task',
          icon: 'bpmn-icon-task'
        },
        {
          label: '添加网关',
          action: 'create.gateway',
          icon: 'bpmn-icon-gateway'
        }
      ];
    }
    return [];
  }
};

注册自定义节点菜单模块

import bpmnModeler from 'bpmn-js/lib/Modeler';

const bpmnJS = new bpmnModeler({
  container: '#canvas',
  modules: [
    CustomNodeMenuModule
  ]
});

监听幕布元素的鼠标右键事件

const canvas = document.getElementById('canvas');

canvas.addEventListener('contextmenu', function (e) {
  e.preventDefault();

  const x = e.clientX;
  const y = e.clientY;

  // 检查是否在幕布空白处右键单击
  if (!e.target.classList.contains('djs-element')) {
    // 显示节点选择菜单
    contextPad.openMenu({
      x: x,
      y: y
    });
  }
});