上一个篇章讲了如何自定义bpmnjs的CustomModeler对象，以及自定义模块（CustomModule）的简单定义与引用，还没看的同学可以去这里看：
上个篇章简单展示过，要自定义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是自定义左侧工具栏各个工具初始化的名称、图标、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模块js也建议直接去依赖下复制过来修改即可：diagram-js/lib/features/Palette/palette.js，如果要自定义palette的容器（父级），将工具栏放在自己定义的地方，那么首先定义好自己的palette容器：
<div ref="paletteBox" class="palette-box"></div>
然后在自定义的CustomModeler的参数里加入paletteContainer参数，如下：
let modeler = await 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参数；
加好以上的设置之后，我们来修改刚才的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其实都讲啦，需要时间消化，结合自己的理解。
引导：
关于bpmnjs+vue的更多篇章，小编已经全部整理在这里：
bpmnjs+vue中文文档API常见方法使用总结
