bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

bpmn基础能力图示

bpmn在项目中使用，以 vue项目为例

npm install --save bpmn-js

项目中引用

//main.js
// 以下为bpmn工作流绘图工具的样式
import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'; // 右边工具栏样式
import 'msp/components/bpmnFlow/css/common.css'; // bpmn公共样式
import 'msp/components/bpmnFlow/css/bpmn-properties-theme-red.css'; // 右侧工具栏自定义样式

流程组件，在使用的地方引入，并传值

//模板代码
<div class="canvas" ref="canvas"></div>

//js代码
let viewer = new BpmnViewer({ container: '#canvas' }); viewer.importXML(testDiagram, function(err) { 
    if (!err) { 
        console.log('success!'); 
        viewer.get('canvas').zoom('fit-viewport'); 
    } else { 
        console.log('something went wrong:', err);
    } 
});

将以上组件在项目页面进行引用，就可以渲染出如上图一个基础的bpmn.js的流程编辑器。

图示1:左侧工具栏

图示2：添加右侧工具栏

bpmn 图解能力自定义拓展

左侧工具栏介绍与拓展 palette

1.左侧工具栏的自定义，针对 PaletteProvider 类进行重构覆写， 2. 获取 PaletteProvider.prototype.getPaletteEntries 方法，该方法中重新定义待选节点的各项DOM属性。

//src\msp\components\bpmnFlow\customModeler\custom\CustomPalette.js
export default function PaletteProvider(
  palette,
  create,
  elementFactory,
  globalConnect,
  bpmnFactory
) {
  this.create = create;
  this.elementFactory = elementFactory;
  this.globalConnect = globalConnect;
  this.bpmnFactory = bpmnFactory;

  palette.registerProvider(this);
}

//覆盖 BpmnModeler 中的 getPaletteEntries 获取调色板项方法
PaletteProvider.prototype.getPaletteEntries = function (element) {
  ......
};

基础效果

自定义效果

render区域自定义 renderer

继承 BaseRenderer 类为自定义类 CustomRenderer

//src\msp\components\bpmnFlow\components\custom\CustomRenderer.js
export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer) {
    super(eventBus, HIGH_PRIORITY);
    this.bpmnRenderer = bpmnRenderer;
  }
  canRender(element) {
    // ignore labels
    return !element.labelTarget;
  }
  drawShape(parentNode, element) {
    const type = element.type;
    if (customElements.includes(type)) {
      const { field, attr } = customConfig[type];
      const customIcon = svgCreate('image', {
        ...attr,
        href: require(`../../assets/${field}.png`),
      });
      element['width'] = attr.width;
      element['height'] = attr.height;
      svgAppend(parentNode, customIcon);
      return customIcon;
    }
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
    setShapeProperties(shape, element);
    // shape.style.setProperty('fill', 'red')//通过这个api在此处进行节点颜色修改
    return shape;
  }
  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
}

右键菜单自定义 ContextPadProvider

//src\msp\components\bpmnFlow\customModeler\custom\CustomContextPadProvider.js
export default function ContextPadProvider(
  contextPad,
  config,
  injector,
  translate,
  bpmnFactory,
  elementFactory,
  create,
  modeling,
  connect
) {
  this.create = create;
  this.elementFactory = elementFactory;
  this.translate = translate;
  this.bpmnFactory = bpmnFactory;
  this.modeling = modeling;
  this.connect = connect;
  config = config || {};
  if (config.autoPlace !== false) {
    this.autoPlace = injector.get('autoPlace', false);
  }

  contextPad.registerProvider(this);
}

重写 ContextPadProvider.prototype.getContextPadEntries 方法

ContextPadProvider.prototype.getContextPadEntries = function (element) {
    ......
}

右侧节点属性栏基础能力及自定义 propertiesPanel

安装，引入

npm install --save bpmn-js-properties-panel
npm install --save camunda-bpmn-moddle
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式

基础能力

//src\msp\components\bpmnFlow\handlerModeler.vue
//html
<div id="js-properties-panel" class="panel"></div>
//js 实例中添加控制板

// 这里引入的是右侧属性栏这个框 
import propertiesPanelModule from 'bpmn-js-properties-panel' 
// 而这个引入的是右侧属性栏里的内容 
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';


this.bpmnModeler = new CustomModeler({
        container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel',
        },
        additionalModules: [ propertiesPanelModule, propertiesProviderModule ], 
        moddleExtensions: { 
        //此处使用 camunda 流程引擎，如果要在属性面板中维护camunda：XXX属性，则需要此 
        camunda: camundaModdleDescriptor }

 
      });

图示：

基础能力拓展对 AuthorityPropertiesProvider 方法进行拓展

//D:\pro\weCode\sampleFrontEnd\portalFe\src\msp\components\bpmnFlow\components\properties-panel-extension\provider\authority\AuthorityPropertiesProvider.js
export default function AuthorityPropertiesProvider(
  eventBus,
  bpmnFactory,
  canvas,
  elementRegistry,
  translate
) {
     ........
}

上述文件已经定义了自定义的属性，我们要针对自定义属性，创建对应的说明文件（有待深入研究作用）代码中为 authority.json 图示为基础拓展的属性

2. 完全自定义

图示：

//src\msp\components\bpmnFlow\handlerModeler.vue
<properties-view v-if="bpmnModeler" :modeler="bpmnModeler"></properties-view>
//src\msp\components\bpmnFlow\components\custom-properties-panel\PropertiesView.vue 为组件详细代码，可搜索查看

总结

以上，主要介绍了，

左侧工具栏 palette

render区域 renderer

右键菜单 ContextPadProvider

右侧节点属性栏 propertiesPanel

四个板块的基础能力和自定义方式和能力，基于这些能力，可以完成流程图的绘制编辑工作。

学习参考：全网最详bpmn.js教材目录 - 掘金 (juejin.cn)

bpmn基础使用和基础能力拓展