BPMN-JS与Angular集成（3）

    前面两章已将原生BPMN 与Angular集成完成，这章介绍一下如何定制左侧的调色板，使其添加或减少可拖拽生成的元素。

    有时业务开发需要，如只需要定制工作流中的部分任务，同时，有些元素如Service Task原生的操作太隐蔽，需要直接放到调色板上面可以操作，使其能够更直接、方便。那如何定制调色板呢？介绍如下。

    原生的调色板针对标准的BPMN2.0设计，其展示内容如下，它包含了BPMN2.0能够创建的所有元素。

    定制调色板，需要重新实现BPMN的PaletteProvider类，使其指定调色板中可以操作的元素，原生的PaletteProvider路径在bpmn-js/lib/features/palette/PaletteProvider.js定义，在定制时我们可以Copy一份这个文件，自己重新实现这个类，重新定义一下getPaletteEntries这个方法的返回值，其返回值的内容即为调色板中可以操作的元素。

   定义CustomPalette.js，其中删除了一些原生元素，同时，添加直接创建Service Task元素，源码如下：

import {
    assign
} from 'min-dash';


/**
 * A palette that allows you to create BPMN _and_ custom elements.
 */
export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool) {

    this._create = create;
    this._elementFactory = elementFactory;
    this._spaceTool = spaceTool;
    this._lassoTool = lassoTool;

    palette.registerProvider(this);
}

PaletteProvider.$inject = [
    'palette',
    'create',
    'elementFactory',
    'spaceTool',
    'lassoTool'
];


PaletteProvider.prototype.getPaletteEntries = function(element) {

    var actions = {},
        create = this._create,
        elementFactory = this._elementFactory,
        spaceTool = this._spaceTool,
        lassoTool = this._lassoTool;


    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 || 'Create ' + shortType,
            action: {
                dragstart: createListener,
                click: createListener
            }
        };
    }

    function createParticipant(event, collapsed) {
        create.start(event, elementFactory.createParticipantShape(collapsed));
    }

    assign(actions, {
        'create.serviceTask': createAction(
            'bpmn:ServiceTask', 'activity', 'icon-custom-triangle'
        ),
        'space-tool': {
            group: 'tools',
            className: 'bpmn-icon-space-tool',
            title: 'Activate the create/remove space tool',
            action: {
                click: function(event) {
                    spaceTool.activateSelection(event);
                }
            }
        },
        'tool-separator': {
            group: 'tools',
            separator: true
        },
        'create.start-event': createAction(
            'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none'
        ),
        'create.intermediate-event': createAction(
            'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none'
        ),
        'create.end-event': createAction(
            'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none'
        ),
        'create.exclusive-gateway': createAction(
            'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor'
        ),
        'create.task': createAction(
            'bpmn:Task', 'activity', 'bpmn-icon-task'
        ),

        'create.subprocess-expanded': createAction(
            'bpmn:SubProcess', 'activity', 'bpmn-icon-subprocess-expanded', 'Create expanded SubProcess', { isExpanded: true }
        ),
        'create.participant-expanded': {
            group: 'collaboration',
            className: 'bpmn-icon-participant',
            title: 'Create Pool/Participant',
            action: {
                dragstart: createParticipant,
                click: createParticipant
            }
        }
    });

    return actions;
};

源码中创建Service Task内容如下：

style.css中定义的样式如下：

.icon-custom-triangle {
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%233CAA82%22%20width%3D%22270%22%20height%3D%22240%22%3E%3Cpath%20d%3D%22M8%2C40%20l%2015%2C-27%20l%2015%2C27%20z%22%2F%3E%3C%2Fsvg%3E');
}

然后定义index.js将定义的CustomPalette.js导出为paletteProvider组件，其定义如下：

import CustomPalette from './CustomPalette';


export default {
    __init__: [
        'paletteProvider'
    ],
    paletteProvider: ['type', CustomPalette]
};

最后在创建Model的业务页面bpmn.demo.component.ts中引入paletteProvider组件，使其替换默认组件，其引用实现如下：

1. import 定义的paletteProvider组件

   import paletteProvider from '../bpmn-custom';

    

2. new BpmnModeler时additionalModules中引入定义的paletteProvider组件

initBpmn() {
    this.modeler = new BpmnModeler({
      container: '#js-canvas',
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesProvider,
        propertiesPanelModule,
        paletteProvider
      ],
      // needed if you'd like to maintain camunda:XXX properties in the properties panel
      moddleExtensions: {
        camunda: CamundaModdleDescriptor
      }
    });
    this.createDiagram();
  }

最终展示效果如下：

 

代码目录结构如下：