自定义bpmn.js左侧工具栏palette样式

一、回顾1.预览2.目录结构二、代码1.paletteProvider.js文件2.css文件3.index.js文件三、总结

一、回顾

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一样，重写原生的类来达到自定义的效果。