vue里使用bpmn绘制流程图（三）

自定义工具栏和节点形状

工具栏的源码在
bpmn-js\lib\features\palette\PaletteProvider.js中
PaletteProvider中定义了getPaletteEntries方法，用于新增工具栏项目

PaletteProvider.prototype.getPaletteEntries = function(element){
...
//这里就是工具栏内容， 可以针对自己的需求修改样式颜色等
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',
      title: translate('Activate the global connect tool'),
      action: {
        click: function(event) {
          globalConnect.toggle(event);
        }
      }
    },
    'tool-separator': {
      group: 'tools',
      separator: true
    },
    'create.start-event': createAction(
      'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none end',
      translate('开始')
    ),
    // 'create.intermediate-event': createAction(
    //   'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none',
    //   translate('Create Intermediate/Boundary Event')
    // ),
    'create.end-event': createAction(
      'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none end',
      translate('结束')
    ),
    'create.exclusive-gateway': createAction(
      'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
      translate('Create Gateway')
    ),
    'create.complex-gateway': createAction(
      'bpmn:ComplexGateway', 'gateway', 'bpmn-icon-gateway-complex default',
      translate('判断条件')
    ),
    'create.task': createAction(
      'bpmn:Task', 'activity', 'bpmn-icon-task default',
      translate('创建任务')
    ),
    'create.data-object': createAction(
      'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object',
      translate('Create DataObjectReference')
    ),
    'create.data-store': createAction(
      'bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store',
      translate('Create DataStoreReference')
    ),
    'create.subprocess-expanded': createAction(
      'bpmn:SubProcess', 'activity', 'bpmn-icon-subprocess-expanded',
      translate('Create expanded SubProcess'),
      { isExpanded: true }
    ),
    'create.participant-expanded': {
      group: 'collaboration',
      className: 'bpmn-icon-participant',
      title: translate('Create Pool/Participant'),
      action: {
        dragstart: createParticipant,
        click: createParticipant
      }
    },
    'create.group': createAction(
      'bpmn:Group', 'artifact', 'bpmn-icon-group'
    ),
  });
}

自定义了工具栏之后，流程图节点渲染也需要进行自定义
还是在熟悉的bpmn-js/lib/draw/BpmnRenderer.js中进行填充颜色和边框颜色，绘制图形的自定义
在同级的PathMap.js中有预定义的路径的坐标点，自定义的形状坐标集合也可以放到这里，统一管理

---

以上是直接对源码进行修改，问题是有可能改乱掉了

参考官方demo中 https://github.com/bpmn-io/bpmn-js-example-custom-elements

创建专门用于自定义的文件夹，存放自定义的配置；

其中：CustomContextPad.js用于控制自定义元素的后续可新增的元素，如下图

CustomPalette.js文件是控制左侧工具栏显示内容
CustomRenderer.js文件用于控自定义节点的图形的绘制

bpmn采用的是注入式引用，所以需要像上上图中，新增index.js，写入注入的文件

import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';
import CustomRenderer from './CustomRenderer';

export default {
  __init__: [ 'customContextPad', 'customPalette', 'customRenderer' ],
  customContextPad: [ 'type', CustomContextPad ],
  customPalette: [ 'type', CustomPalette ],
  customRenderer: [ 'type', CustomRenderer ]
};

在使用上也要做一点修改

import customModule from './custom';
import BpmnModeler from 'bpmn-js/lib/Modeler';

const bpmnModeler = new BpmnModeler({
  container: containerEl,
  additionalModules: [
    customModule
  ],
  moddleExtensions: {
    qa: qaExtension
  }
});

详细见 https://github.com/haoyanyu/vue-with-bpmn