【引言】

最近一段时间的工作重点在审批流和低代码平台,审批流的话,最开始是使用 Bpmn.js 去构建前端的流程图;使用了一段时间后,也算是得心应手,踩过很多坑,也淌平了很多恶心的需求吧,趁此机会总结一下。

基本上 bpmn 原有的元素从 UI 到功能上面都会有所更改,从左侧元素工具栏到中间的元素,连接线,元素的面板,基本上都要重新覆盖。

最终效果如下:
image

【正文】

任务节点更换皮肤后,文字不显示或者文字不居中问题

最开始想到的解决办法是手动处理每个sharp的样式,手动把 x,y,font-size,fill 给填上,这么做虽然可行,但是每个sharp的坐标,位置,大小,文字长度都得计算,觉得这并不是一个好方案,然后翻阅了 bpmn.js 的源码,看了他的实现,觉得可以在自定义这块重新在调用就可以了,实现如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import TextUtil from 'diagram-js/lib/util/Text.js';
import { assign } from 'min-dash';

const defaultStyle = assign({
fontFamily: 'Arial, sans-serif',
fontSize: 12,
fontWeight: 'normal',
lineHeight: 1.2
});
const textUtil = new TextUtil({
style: defaultStyle
});
const elementStyle = {
size: {
"width": 100
},
box: {
"width": 100,
"height": 80,
"type": "bpmn:Task",
},
align: "center-middle",
padding: 5,
style: {
"fill": "black"
}
}

const text = textUtil.createText(element.businessObject.name, elementStyle);
svgAppend(parentNode, text);
return text;

分支箭头更换皮肤后,箭头不变化


监听bpmnModeler变化时,执行如下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
setArrowColor() {
const marker = svgCreate('marker')

svgAttr(marker, {
id: 'sequenceflow-arrow-normal',
viewBox: '0 0 20 20',
refX: '11',
refY: '10',
markerWidth: '10',
markerHeight: '10',
orient: 'auto'
})

const path = svgCreate('path')

svgAttr(path, {
d: 'M 1 5 L 11 10 L 1 15 Z',
style:
' stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; '
})

const defs = domQuery('defs')
svgAppend(marker, path)
svgAppend(defs, marker)
}

1
2
3
4
5
6
7
8
9
10
#sequenceflow-arrow-normal {
fill: #ACC2FF !important;
stroke: #ACC2FF !important;
}
.djs-connection {
path {
stroke: #ACC2FF !important;
marker-end: url(#sequenceflow-arrow-normal) !important;
}
}

一些元素的显隐问题

因为 bpmn.js 是通过svg实现图形功能的,所以简单的是绝大部分的元素的隐藏都可以通过 css 来处理,只有少部分需要自行操作svg的属性。

svg的添加、删除、增加属性等功能

可以使用内置的tiny-svg这个库来解决,结合min-dom和min-dash其实能解决好多关于svg的问题,都是一些很简单也很好用的库,地址:

【结束】

总的来说,学习和使用 bpmn.js 虽然看上去有一定的难度,但其实多尝试,就能够掌握这个工具,并且可以在其中实现自己的需求。网上的相关资料、源码以及API接口都比较详细,并且开发者的社区也非常活跃,所以我们可以尝试寻找适合自己的解决方案,并且不断尝试和探索最佳的使用方式和技巧。

如果觉得我的文章对您有用,请随意打赏。

Alipay
感谢您的阅读,本文由 李经纶 版权所有。如若转载,请注明出处:李经纶个人博客(https://lijinglun.com/2023/05/19/bpmn-js-使用总结/