bpmn.js之修改contextPad popup-menu 笔记前言：本博客只为记录修改contextPad 弹

前言：

本博客只为记录修改contextPad 弹出菜单修改过程方便日后项目的维护修改方式为复制粘贴源码修改我不知道官方是否提供自定义接口没时间研究

摘要：

修改前效果

修改后效果

具体步骤：

1. 目录结构

如上图所示为整个自定义bpmn.js的所有自定义控件目录，translate目录为中文翻译文件目录，customModeler文件夹下的index.js为整个自定义bpmnjs的控件入口文件，custom下的CustomPalette.js为自定义Palette文件。 custom下的CustomContextPadProvider.js为自定义 contextPad文件。本文章对于自定义Palette 、Renderer、contextPad不在赘述，网上都有文章。本文章涉及文件为popup-menu文件夹和CustomContextPadProvider.js文件。

2. 文件创建

1. 复制源码文件 node_modules/bpmn-js/lib/features/context-pad/ContextPadProvider.js 到【目录结构】中的 BpmnCustom/customModeler/custom文件夹下。

2. 复制源码文文件夹 node_modules/bpmn-js/lib/features/popup-menu到【目录结构】中的文件夹 BpmnCustom/customModeler/custom 下并删除复制过来的子文件夹util

3. 复制源码文件夹 node_modules/diagram-js/lib/features/popup-menu 到【目录结构】中的 BpmnCustom/customModeler/custom/popup-menu下并重命名为 diagram-popup-menu。

3. 文件修改

1. 修改BpmnCustom/customModeler/custom/index.js 文件如下

import CustomPalette from './CustomPalette'
import CustomContextPadProvider from './CustomContextPadProvider'
import PopupMenuModule from './popup-menu';

export default {
  __depends__: [
    PopupMenuModule
  ],
  __init__: ['paletteProvider'],
  paletteProvider: ['type', CustomPalette],
  contextPadProvider: ['type', CustomContextPadProvider]
}

2. 修改 BpmnCustom/customModeler/custom/CustomContextPadProvider.js 文件顶部import如下

import {
  assign,
  forEach,
  isArray
} from 'min-dash';

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

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

import {
  isAny
} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';

import {
  getChildLanes
} from 'bpmn-js/lib/features/modeling/util/LaneUtil';

import {
  hasPrimaryModifier
} from 'diagram-js/lib/util/Mouse';

3. 修改src/pages/BpmnCustom/customModeler/custom/popup-menu/ReplaceMenuProvider.js文件顶部 import 如下

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
} from 'min-dash';

import * as replaceOptions from 'bpmn-js/lib/features/replace/ReplaceOptions';

再修改此文件的 ReplaceMenuProvider.prototype._getLoopEntries函数（主要是为了修改label名字）

4. 修改文件 BpmnCustom/customModeler/custom/popup-menu/diagram-popup-menu/PopupMenu.js

(1). 注释以前 PopupMenu.prototype._getEntries 函数
(2). 复制粘贴函数 PopupMenu.prototype._getHeaderEntries 修改其中一份函数名为 _getEntries
(3). 修改_getEntries函数如下地方

（4）. 修改函数 _getHeaderEntries 如下地方

bpmn.js之修改contextPad popup-menu 笔记

前言：

摘要：