bpmn隐藏工具及菜单选项

默认的工具栏有这些,现在呢,根据情况,想对其进行缩减一部分。比如说简单保留一些。
图片1
没有发现有什么设置可以直接修改,通过研究发现会调用 getPaletteEntries 方法获取工具条目。
所以我们通过重写此方法来达到我们的目的。
① 首先原始的方法要留下来

const _getPaletteEntries = PaletteProvider.prototype.getPaletteEntries;  

② 重写此方法

PaletteProvider.prototype.getPaletteEntries = function() {  
  const entries = _getPaletteEntries.apply(this);  
  delete entries['create.group'];  
  delete entries['create.data-object'];  
  delete entries['create.data-store'];  
  delete entries['create.participant-expanded'];  
  delete entries['create.intermediate-event'];  
  return entries;  
};  

③ 不要忘记了导入
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';

同理类似处理元素选中的菜单选项,找到对应方法。
图片2
① 保留原始方法

const _getContextPadEntries = ContextPadProvider.prototype.getContextPadEntries;  

② 重写方法, 删除不想保留的选项

ContextPadProvider.prototype.getContextPadEntries = function (_ele) {  
  const _tmp = _getContextPadEntries.call(this, _ele);  
  delete _tmp['append.text-annotation'];  
  delete _tmp['connect'];  
  if (_ele['type'] !== 'bpmn:ExclusiveGateway' && _ele['type'] !== 'bpmn:ParallelGateway') {  
    delete _tmp['replace'];  
  }  
  delete _tmp['append.intermediate-event'];  
  return _tmp;  
}  

③ 导入

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

这里还有个问题就是我们想保留的网关不会有这么多,但是元素的菜单里面有个改变类型选项可以选择所有网关,所以这里还需要进行类似处理。
图片3
① 定义想删除的网关类型

const _deleteEntries = ['replace-with-complex-gateway', 'replace-with-event-based-gateway', 'replace-with-inclusive-gateway'];    

② 保留原始方法

const _getEntries = ReplaceMenuProvider.prototype.getEntries;   

③ 重写方法保留网关选项(这里注意跟前面不一样的地方是返回值是对象数组)

ReplaceMenuProvider.prototype.getEntries = function (_ele) {  
  const _tmp = _getEntries.call(this, _ele);  
  return _tmp.filter(obj => !_deleteEntries.includes(obj['id']));  
};  

④ 导入对象

import ReplaceMenuProvider from 'bpmn-js/lib/features/popup-menu/ReplaceMenuProvider';   
0评论