Vue+bpmn.js自定义流程图之palette（二）

一、回顾

1.预览

我们来实现如下左侧工具栏的自定义样式。

2.目录结构

在plugins文件目录下新建palette文件夹。创建一个index.js入口文件和paletteProvider.js自定义palette文件（用来覆盖默认palette）。

二、代码

paletteProvider.js文件是一个导出类,里面是我们自定义的左侧工具栏的代码。

index.js是palette的入口文件，导出初始化的自定义paletteProvider.js

1.paletteProvider.js文件

import {
  assign
} from "min-dash";

export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
  this._palette = palette;
  this._create = create;
  this._elementFactory = elementFactory;
  this._spaceTool = spaceTool;
  this._lassoTool = lassoTool;
  this._handTool = handTool;
  this._globalConnect = globalConnect;
  this._translate = translate;

  palette.registerProvider(this);
}
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];


PaletteProvider.prototype.getPaletteEntries = function () {
  var actions = {},
    create = this._create,
    elementFactory = this._elementFactory,
    spaceTool = this._spaceTool,
    lassoTool = this._lassoTool,
    handTool = this._handTool,
    globalConnect = this._globalConnect,
    translate = this._translate;

  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,
      className,
      title: title || translate("Create {type}", {
        type: shortType
      }),
      action: {
        dragstart: createListener,
        click: createListener
      }
    };
  }

  assign(actions, {
    "hand-tool": {
      group: "tools",
      className: "bpmn-icon-hand-tool",
      title: translate("Activate the hand tool"),
      action: {
        click: function (event) {
          handTool.activateHand(event);
        }
      }
    },
    "lasso-tool": {
      group: "tools",
      className: "bpmn-icon-lasso-tool",
      title: translate("Activate the lasso tool"),
      action: {
        click: function (event) {
          lassoTool.activateSelection(event);
        }
      }
    },
    "space-tool": {
      group: "tools",
      className: "bpmn-icon-space-tool",
      title: translate("Activate the create/remove space tool"),
      action: {
        click: function (event) {
          spaceTool.activateSelection(event);
        }
      }
    },
    //连线样式
    "global-connect-tool": {
      group: "tools",
      // className: "bpmn-icon-connection-multi",
      className: "feelec feel-lianxian coldel",
      title: translate("Activate the global connect tool"),
      action: {
        click: function (event) {
          globalConnect.toggle(event);
        }
      }
    },
    "tool-separator": {
      group: "tools",
      separator: true
    },
    //开始事件 bpmn-icon-start-event-none
    "create.start-event": createAction("bpmn:StartEvent", "event", "icon-custom startNode", translate("Create StartEvent")),
   
    //用户  bpmn-icon-user-task
    "create.user-task": createAction("bpmn:UserTask", "activity", "icon-custom taskNode", translate("Create User Task")),
    // 网关 bpmn-icon-gateway-none
    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "icon-custom gatewayNode", translate("Create Gateway")),
    // 结束事件 bpmn-icon-end-event-none
    "create.end-event": createAction("bpmn:EndEvent", "event", "icon-custom endNode", translate("Create EndEvent")),
  
  });

  return actions;
};

上面代码做的事情：
重写 PaletteProvider 类，同时覆盖了其原型上的 getPaletteEntries 方法

上面代码较多，拆分为两个部分来看更清晰：
第一部分：
首先导出了 PaletteProvider
在类中使用palette.registerProvider(this)指定这是一个palette
使用 $inject 注入一些需要的变量到 PaletteProvider

第二部分：
在PaletteProvider函数原型上编写getPaletteEntries函数；函数返回的是一个对象,对象中就是左侧工具栏的每一项。

我的前四项用的原生项,后四项start-event、user-task、exclusive-gateway、end-event是自定义项；createAction函数是用来创建自定义工具栏shape的方法。

返回的对象中的属性:
group：当前项属于哪个分组
className：样式类名，主要是通过这个类名来修改自定义项的样式
title： 鼠标移动到元素上面给出的提示信息
action：用户操作时会触发的事件

2.css文件

自定义样式文件process-panel.scss里定义了className里面的类来实现自定义样式。

/* process-panel.scss */
.icon-custom {
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}
.startNode {
  background-image: url('../../../../../../public/bpmn_imgs/startNode.png');
}
.endNode {
  background-image: url('../../../../../../public/bpmn_imgs/endNode.png');
}
.taskNode {
  background-image: url('../../../../../../public/bpmn_imgs/taskNode.png');
}
.gatewayNode {
  background-image: url('../../../../../../public/bpmn_imgs/gatewayNode.png');
}

3.index.js文件

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

导出自定义palette

三、总结

到这palette部分就完成了，接下来就是部分renderer、contextPad部分和在页面中的使用了。renderer、contextPad这两部分的思路和palette一样，重写原生的类来达到自定义的效果。