最好用的流程编辑器bpmn-js系列文章
上一篇文章『最好用的流程编辑器bpmn-js系列之Palette』介绍了modeler模式下如何自定义左侧工具栏Palette,这篇文章将会介绍如果自定义ContextPad
以下演示代码基于上一节搭建好的vue环境,使用bpmn版本为当前最新版7.3.0
自定义ContextPad
自定义ContextPad与自定义Palette一样,有两种方式可以选择,第一种就是基于默认的ContextPad来修改,第二种就是完全写个新的ContextPad来替代默认的ContextPad,同样的这里就下完全自定义ContextPad,因为与自定义Palette高度相似,这里以具体代码为主
1.在custom目录下新建CustomContextPadProvider.js
文件,内容如下
import { assign } from "min-dash";
export default function ContextPadProvider(
config,
injector,
contextPad,
modeling,
elementFactory,
connect,
create,
translate) {
this.modeling = modeling;
this.elementFactory = elementFactory;
this.connect = connect;
this.create = create;
this.translate = translate;
config = config || {};
if (config.autoPlace !== false) {
this.autoPlace = injector.get("autoPlace", false);
}
contextPad.registerProvider(this);
}
ContextPadProvider.$inject = [
"config.contextPad",
"injector",
"contextPad",
"modeling",
"elementFactory",
"connect",
"create",
"translate"
];
ContextPadProvider.prototype.getContextPadEntries = function (element) {
const {
autoPlace,
create,
elementFactory,
translate,
modeling,
connect
} = this;
function appendAction(type, className, title, options) {
function appendStart(event, element) {
var shape = elementFactory.createShape(assign({ type: type }, options));
create.start(event, shape, {
source: element
});
}
var append = autoPlace
? function (event, element) {
var shape = elementFactory.createShape(
assign({ type: type }, options)
);
autoPlace.append(element, shape);
}
: appendStart;
return {
group: "model",
className: className,
titl