编辑bpmn_最好用的流程编辑器bpmnjs系列之ContextPad

最好用的流程编辑器bpmn-js系列文章

上一篇文章『最好用的流程编辑器bpmn-js系列之Palette』介绍了modeler模式下如何自定义左侧工具栏Palette，这篇文章将会介绍如果自定义ContextPad

以下演示代码基于上一节搭建好的vue环境，使用bpmn版本为当前最新版7.3.0

自定义ContextPad

自定义ContextPad与自定义Palette一样，有两种方式可以选择，第一种就是基于默认的ContextPad来修改，第二种就是完全写个新的ContextPad来替代默认的ContextPad，同样的这里就下完全自定义ContextPad，因为与自定义Palette高度相似，这里以具体代码为主

1.在custom目录下新建CustomContextPadProvider.js文件，内容如下

import { assign } from "min-dash";

export default function ContextPadProvider(
  config,
  injector,
  contextPad,
  modeling,
  elementFactory,
  connect,
  create,
  translate) {
    
  this.modeling = modeling;
  this.elementFactory = elementFactory;
  this.connect = connect;
  this.create = create;
  this.translate = translate;
  config = config || {};

  if (config.autoPlace !== false) {
    
    this.autoPlace = injector.get("autoPlace", false);
  }

  contextPad.registerProvider(this);
}

ContextPadProvider.$inject = [
  "config.contextPad",
  "injector",
  "contextPad",
  "modeling",
  "elementFactory",
  "connect",
  "create",
  "translate"
];

ContextPadProvider.prototype.getContextPadEntries = function (element) {
    
  const {
    
    autoPlace,
    create,
    elementFactory,
    translate,
    modeling,
    connect
  } = this;

  function appendAction(type, className, title, options) {
    
    function appendStart(event, element) {
    
      var shape = elementFactory.createShape(assign({ type: type }, options));
      create.start(event, shape, {
    
        source: element
      });
    }

    var append = autoPlace
      ? function (event, element) {
    
        var shape = elementFactory.createShape(
          assign({ type: type }, options)
        );
        autoPlace.append(element, shape);
      }
      : appendStart;

    return {
    
      group: "model",
      className: className,
      titl