Vue+bpmn.js自定义流程图之palette(二)
bpmn.js自定义样式之palette
自定义bpmn.js左侧工具栏palette样式
一、回顾
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一样,重写原生的类来达到自定义的效果。
更多推荐
所有评论(0)