bpmnjs+vue之自定义palette、paletteProvider 左侧工具栏，更换容器

项目环境

bpmnjs：7.5.X + vue2

回顾

上一个篇章讲了如何自定义bpmnjs的CustomModeler对象，以及自定义模块CustomModule的简单定义与引用，还没看的同学可以去这里看：

bpmn-js自定义之Modeler以及相关引用

上个篇章简单展示过，要自定义paletteProvider、palette，首先要在自定义模块CustomModule的js里引入自定义的palette、paletteProvider 模块：

import paletteProvider from "../customPalette/paletteprovider";
import customPalette from "../customPalette/palette";

export default {
	__init__: [
            "paletteProvider",
            'palette'
	],
	paletteProvider: ["type", paletteProvider],
	palette: [ 'type', customPalette ],
};

自定义paletteProvider

其中，paletteProvider是自定义左侧工具栏各个工具初始化的名称、图标、class等等，这个模块建议直接去依赖下复制过来修改，bpmn-js/lib/features/palette/paletteprovider.js，内容如下：

import {
  assign
} from 'min-dash';

/**
 * A palette provider for BPMN 2.0 elements.
 */
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(element) {
	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: group,
			className: className,
			title: title || translate('Create {type}', { type: shortType }),
			action: {
				dragstart: createListener,
				click: createListener
			}
		};
	}

	function createSubprocess(event) {
		var subProcess = elementFactory.createShape({
			type: 'bpmn:SubProcess',
			x: 0,
			y: 0,
			isExpanded: true
		});

		var startEvent = elementFactory.createShape({
			type: 'bpmn:StartEvent',
			x: 40,
			y: 82,
			parent: subProcess
		});

		create.start(event, [ subProcess, startEvent ], {
			hints: {
				autoSelect: [ startEvent ]
			}
		});
	}

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

	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',
			translate('Create StartEvent')
		),
		'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',
			translate('Create EndEvent')
		),
		'create.exclusive-gateway': createAction(
			'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
			translate('Create Gateway')
		),
		'create.task': createAction(
			'bpmn:Task', 'activity', 'bpmn-icon-task',
			translate('Create Task')
		),
		'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': {
			group: 'activity',
			className: 'bpmn-icon-subprocess-expanded',
			title: translate('Create expanded SubProcess'),
			action: {
				dragstart: createSubprocess,
				click: createSubprocess
			}
		},
		'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',
			translate('Create Group')
		),
	});

	return actions;
};

自定义palette

palette模块js代码也建议直接去依赖下复制过来修改即可：diagram-js/lib/features/Palette/palette.js，如果要自定义palette的容器（父级），将工具栏放在自己定义的地方，那么首先定义好自己的palette容器：

<div ref="paletteBox" class="palette-box"></div>

然后在自定义的CustomModeler（开头的文章）的参数里加入paletteContainer参数，如下：

let modeler = new CustomModeler({
	container: this.$refs.bpmnbox,
	paletteContainer: this.$refs.paletteBox,
	keyboard: {
		bindTo: window
	},
	height: '100%',
	moddleExtensions: {
		flowable: flowableDescriptor
	},
	additionalModules: [
		flowableMoudle, 
		{ //汉化
			translate: ['value', customTranslate]
		},
		{
			// 禁用滚轮滚动
			zoomScroll: ["value", ""]
		}
	]
})

自定义paletteContainer更换容器

接下来就是怎么定义paletteContainer参数； 加好以上的设置之后，我们来修改刚才的palette.js文件内容，将自定义palette容器替换原有palette容器（拿依赖的palette.js直接修改），看主要的几个地方（paletteContainer与$inject）：

export default function Palette(
	eventBus,
	canvas,
	paletteContainer
) {

	this._eventBus = eventBus;
	this._canvas = canvas;
	this._paletteContainer = paletteContainer;
	var self = this;

	......
	............
	................
}

Palette.$inject = [
	'eventBus',
	'canvas',
	'config.paletteContainer'
];

Palette.prototype._init = function() {
	var self = this;

	var eventBus = this._eventBus;

	var parentContainer = this._paletteContainer || this._getParentContainer();

	var container = this._container = domify(Palette.HTML_MARKUP);

	parentContainer.appendChild(container);

	...
	......
	..........
}

注意 parentContainer的修改，其中HTML_MARKUP变量的内容就是各工具原有的html结构，修改成自己想要的样式即可；具体的可以边调试边修改，难度不是很大，但要细心；

好啦，自定义palette容器与paletteprovider其实都讲啦，需要时间消化，结合自己的理解。