bpmn.js 使用总结

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

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

最终效果如下：

【正文】

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

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

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变化时，执行如下代码即可

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)
}

#sequenceflow-arrow-normal {
  fill: #ACC2FF !important;
  stroke: #ACC2FF !important;
}
.djs-connection {
  path {
    stroke: #ACC2FF !important;
    marker-end: url(#sequenceflow-arrow-normal) !important;
  }
}