上回记录到在页面上生成并编辑流程图;
但是实际使用中,往往需要进行自定义;
下面就根据实际需求来一步一步实现自定义。
不同的节点用不同的颜色区分
- 插件提供的接口方法 官方demo: https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors
this.viewer.importXML(diagramXml, err => {
if (err) {
throw (err)
}
var overlays = this.viewer.get('overlays'),
canvas = this.viewer.get('canvas'),
elementRegistry = this.viewer.get('elementRegistry'),
modeling = this.viewer.get('modeling');
this.viewer.get('canvas').zoom('fit-viewport')
var elementToColor = elementRegistry.get('ServiceTask_appPushDelegate_0wulpvm');
modeling.setColor([ elementToColor], {
stroke: 'green',
fill: 'rgba(0, 80, 0, 0.4)'
});
})
- 修改源码 详细见 https://github.com/haoyanyu/vue-with-bpmn
'bpmn-js/lib/draw/BpmnRenderer.js’中有对应的节点绘制方法
var StartEvent_StrokeColor = '#8F99AA',
EndEvent_StrokeColor = '#8F99AA',
SendTask_StrokeColor = 'green',
UserTask_StrokeColor = '#ff9900',
Start_FillColor = '#8F99AA',
ComplexGateway_FillColor = "#374A5E",
Gateway_FillColor = "#86CD69";
var handlers = this.handlers = {
'bpmn:Event': function (parentGfx, element, attrs = {}) {
if (!('fillOpacity' in attrs)) {
attrs.fillOpacity = DEFAULT_FILL_OPACITY;
}
//由此可知,还可以自定义节点绘制的图形形状
return drawCircle(parentGfx, element.width, element.height, attrs);
},
// 开始
'bpmn:StartEvent': function (parentGfx, element) {
var attrs = {
//注释掉原有的
//fill: getFillColor(element, defaultFillColor),
//stroke: getStrokeColor(element, defaultStrokeColor)
//根据需求新增变量定义颜色
fill: getFillColor(element, Start_FillColor),
stroke: getStrokeColor(element, StartEvent_StrokeColor)
};
var semantic = getSemantic(element);
if (!semantic.isInterrupting) {
attrs = {
strokeDasharray: '6',
strokeLinecap: 'round',
fill: getFillColor(element, Start_FillColor),
stroke: getStrokeColor(element, defaultStrokeColor)
};
}
var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
renderEventContent(element, parentGfx);
return circle;
},
...
}
修改文字label的位置(任务节点默认在框框内)
修改源码 详细见 https://github.com/haoyanyu/vue-with-bpmn
双击时进入编辑状态,控制的代码位置如下
bpmnjs/lib/features/label-editing/labelEditingProvider.js
// internal labels for tasks and collapsed call activities,
// sub processes and participants
if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity']) ||
isCollapsedPool(element) ||
isCollapsedSubProcess(element)) {
//源代码
//assign(bounds, {
// width: bbox.width,
// height: bbox.height
//});
//自定义 根据需求,修改label的位置
assign(bounds, {
width: bbox.width,
height: bbox.height / 2,
y: bbox.height + bounds.y
});
assign(style, {
fontSize: defaultFontSize + 'px',
lineHeight: defaultLineHeight,
paddingTop: (7 * zoom) + 'px',
paddingBottom: (7 * zoom) + 'px',
paddingLeft: (5 * zoom) + 'px',
paddingRight: (5 * zoom) + 'px'
});
}
编辑完成后,label的显示位置
diagramjs/lib/util/Textjs
Text.prototype.layoutText = function(text, options) {
...
if (align.vertical === 'middle') {
padding.top = padding.bottom = 0;
}
//新增代码, 通过传入的参数来控制显示的位置///////////////////////////////////
if (align.vertical === 'bottom') {
y = box.height + 5;
}
...
var dimensions = {
width: maxLineWidth,
height: totalHeight
};
return {
dimensions: dimensions,
element: textElement
};
};
BpmnRenderer.js中传入参数控制位置
'bpmn:Task': function (parentGfx, element, attr = {}) {
var strokeColor = attr.strokeColor || 'red'
var attrs = {
fill: getFillColor(element, '#fff'),
stroke: getStrokeColor(element, strokeColor)
};
var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
//通过传入参数来配合控制label内容显示位置
renderEmbeddedLabel(parentGfx, element, 'center-bottom');
attachTaskMarkers(parentGfx, element);
return rect;
},