bpmn-js 介绍BPMN：业务流程建模与标注,包括这些图元如何组合成一个业务流程图(BusinessProcessD

BPMN：业务流程建模与标注,包括这些图元如何组合成一个业务流程图(Business Process Diagram);讨论BPMN的各种的用途，包括以何种精度来影响一个流程图中的模型;

github 例子:

xml 结构通过importXML 可以转换流程图

使用方法

yarn add install --save bpmn-js

import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';
var viewer = new BpmnViewer({
    container: '#canvas',
    keyboard:{
        bindTo:window,    
    },    
    //load custom module 自定义module
    additionalModules:[CliModule,CustomModule],
    moddleExtensions: {
        camunda: camundaModdleDescriptor    
    },
    cli:{
        bindTo:'cli',
    },
    bpmnRender:{
      defaultFillColor: '#F7F9FE',
      defaultStrokeColor: '#333',
    },
});

初始化引入：

// 初始化引入xml
viewer.importXML(testDiagram, function(err) {
    if (!err) {
        console.log('success!');
        viewer.get('canvas').zoom('fit-viewport');  // 使其视图保证合适的大小
    } else {
        console.log('something went wrong:', err);
    }});
    let modeling = viewer.get('modeling')    // 用于绘制流程图 创建 删除 修改 节点操作
 let commandStack = viewer.get('commandStack') // bpmn 执行栈 可回退 前进
 let eventBus = viewer.get('eventBus') // 事件总线 监听事件

自定义module

import InteractionEvents from './InteractionEvents' //
import ContextPadProvider from './ContextPadProvider' // 查看面板
import BpmnRules from './BpmnRules' // bpmn流程图规则
import BpmnRenderer from './BpmnRenderer' //流程图渲染
import PopupMenuModule from '@bpmn/bpmn-js/lib/features/popup-menu/' //流程图弹出菜单框
import Modeling from '@bpmn/bpmn-js/lib/features/modeling/' //
export default {  
 __depends__: [PopupMenuModule, Modeling],
 __init__: ['interactionEvents', 'keyboardBindings'],  // custom contextPadProvider 自定义面板
  contextPadProvider: ['type', ContextPadProvider],
  interactionEvents: ['type', InteractionEvents],  // disable label content editing 编辑禁用
  labelEditingProvider: ['value', ''],  //
  labelEditingPreview: ['value', ''],  
  // disable left palette 禁用
  paletteProvider: ['value', ''],  
  // disable scroll zoom 滚轮禁用
  zoomScroll: ['value', ''],  
  // disable multiple connections between two nodes 多次连接禁用，连接线规则修改
  bpmnRules: ['type', BpmnRules],
  // custom BpmnRenderer for node styles 自定义元素样式
  bpmnRenderer: ['type', BpmnRenderer],
}