bpmn.js基础篇(二)-自定义Palette(1)

张慕伊

哪里需要哪里搬的板砖

前面文章已经介绍了bpmn.js的最基本的使用，今天介绍对左侧工具栏Palette的修改

隐藏shape

左侧工具栏中有一些图标我用不到，那要如何隐藏呢？最简单的方法就是找到对应的class，通过class隐藏

.bpmn-icon-data-store {
  display: none;
}

自定义shape

为了响应方便，我想再Palette上添加一个shape该如何操作呢？这里自定义Palette。自定义Palette有两种方法，一种是基于默认的来修改，第二种就是写个全新的来代替默认的，第一种只能在默认的Palette上添加shape，而不能修改或删除，比较鸡肋所以放弃，所以直接用第二种。

1.在 components 目录下新建 customBpmn 目录，在 customBpmn 目录下新建 custom 目录，每层目录下都新建 index.js 文件，最终目录结构如下

2.在custom目录下新建 CustomPalette.js 文件，内容如下

import { assign } from "min-dash";
export default function PaletteProvider(
  palette,
  create,
  elementFactory,
  handTool,
  lassoTool,
  spaceTool,
  globalConnect,
  translate
  this.create = create;
  this.elementFactory = elementFactory;
  this.handTool = handTool;
  this.lassoTool = lassoTool;
  this.spaceTool = spaceTool;
  this.globalConnect = globalConnect;
  this.translate = translate;
  palette.registerProvider(this);
PaletteProvider.$inject = [
  "palette",
  "create",
  "elementFactory",
  "handTool",
  "lassoTool",
  "spaceTool",
  "globalConnect",
  "translate"
PaletteProvider.prototype.getPaletteEntries = function (element) {
  const {
    create,
    elementFactory,
    handTool,
    lassoTool,
    spaceTool,
    globalConnect,
    translate
  } = this;
  function createAction(type, group, className, title, options) {
    function createListener(event) {
      var shape = elementFactory.createShape(assign({ type: type }, options));
      if (options) {
        shape.businessObject.di.isExpanded = options.isExpanded;
      create.start(event, shape);
    var shortType = type.replace(/^bpmn:/, "");
    return {
      group: group,
      className: className,
      title: title || translate("Create {type}", { type: shortType }),
      action: {
        dragstart: createListener,
        click: createListener
  return {
    "lasso-tool": {
      group: "tools",
      className: "bpmn-icon-lasso-tool",
      title: "Activate the lasso tool",
      action: {
        click: function (event) {
          lassoTool.activateSelection(event);
    "tool-separator": {
      group: "tools",
      separator: true
    "create.start-event": createAction(
      "bpmn:StartEvent",
      "event",
      "bpmn-icon-start-event-none",
      "创建开始节点"
    "create.end-event": createAction(
      "bpmn:EndEvent",
      "event",
      "bpmn-icon-end-event-none",
      "创建结束节点"
    "create.user-task": createAction(
      "bpmn:UserTask",
      "activity",
      "bpmn-icon-user-task",
      "创建用户任务"
    "create.exclusive-gateway": createAction(
      "bpmn:ExclusiveGateway",
      "gateway",
      "bpmn-icon-gateway-xor",
      "创建排他网关"
};

Palette展示的shape就是最够return输出的那个字典定义的，一个shape对应的数据格式：

"lasso-tool": {
  group: "tools",
  className: "bpmn-icon-lasso-tool",
  title: "Activate the lasso tool",
  action: {
    click: function (event) {
      lassoTool.activateSelection(event);

其中key为这个shape的名称，value为这个shape定义的一些属性，主要有四个：

group： 定义这个shape属于哪个组，主要有tools、event、gateway和activity可以选择
className： 定义这个shape的chass名称，可以通过这个class给shape指定具体的样式
title： 定义这个shape的title，也就是鼠标移动到shape上的提示
action： 用户操作时触发的事件

通过这个数据我们就可以随意添加、删除或者修改Palette的shape了，改位置该样式轻松自如

3.在 custom/index.js 文件中添加如下内容将自定义的Palette导出

import CustomPalette from "./CustomPalette";
export default {
  __init__: ["paletteProvider"],
  paletteProvider: ["type", CustomPalette],

4.在 customBpmn/index.js 文件中编写自定义的 CustomModeler 类

import inherits from "inherits";
import Modeler from "bpmn-js/lib/Modeler";
import CustomModule from "./custom";
function CustomModeler(options) {
  Modeler.call(this, options);
  this._customElements = [];
inherits(CustomModeler, Modeler);
CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules, [