一、BPMN.js的基础使用

主要分为三个类来满足不同的用户需求。

Viewer：BPMN图表查看器，功能最简单，仅用来展示。

NavigatedViewer：在 Viewer 上扩展了导航和缩放的功能，包含鼠标导航工具的图表查看器。

Modeler：融合了Viewer 和 NavigatedViewer，并拥有工具栏、属性面板等，实现建模能力。

1、Viewer 基础用法

BPMN图表查看器，功能最简单，仅用来展示。

import Modeler from 'bpmn-js/lib/Viewer'
import { xmlStr } from './xmlData.js'
 
/**
 * A base viewer for BPMN 2.0 diagrams.
 *
 * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
 * bundles that include actual features.
 *
 * @param {Object} [options] configuration options to pass to the viewer
 * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
 * @param {string|number} [options.width] the width of the viewer
 * @param {string|number} [options.height] the height of the viewer
 * @param {Object} [options.moddleExtensions] extension packages to provide
 * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
 * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
 */


const bpmnViewer = new Modeler(options)  // new一个Viewer对象的实例 options类型为optionsType
const { warnings } = await bpmnViewer.importXML(xmlStr)  // 导出xml文件
bpmnViewer.get('canvas').zoom('fit-viewport', 'auto') // 调整位置在正中间
 
interface optionsType {
  container: DOMElement,
  width: string|number,
  height: string|number,
  moddleExtensions: Object, // 提供的扩展包
  modules: Array<didi.Module>, // 覆盖默认module的一系列module
  additionalModules: Array<didi.Module> // 与默认包一起使用的module
}

2、NavigatedViewer 基础用法

NavigatedViewer 显示和导航 BPMN 图

在 Viewer 的基础上，小小的修改

import Modeler from 'bpmn-js/lib/Viewer'
 
改为
 
import Modeler from 'bpmn-js/lib/NavigatedViewer'

3、Modeler 基础用法

融合了Viewer 和 NavigatedViewer，并拥有工具栏、属性面板等，实现建模能力。

import Modeler from 'bpmn-js/lib/Modeler'
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 { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnModeler: null
    }
  },
  async mounted() {
    this.bpmnModeler = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnModeler.importXML(xmlStr)
      // 调整在正中间
      this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}

二、自定义各个模块

自定义模块，GItHub上有详细的官网文档，主要步骤可以分为如下：

1、复制代码（大部分都是通过修改他俩的代码来实现自定义一些功能我们要的功能基本都在 lib/features/ 或者 lib/core/ 以及 lib/draw/）

2、修改或新增你所需要的功能

3、发布服务（以唯一的名字发布module）

4、初始化的时候引入module

在此仅提供地址。主要说明一些BMPN内部的东西。

bpmn-js 建立在两个重要的库之上：diagram-js 和 bpmn-moddle。

图交互/建模（diagram-js）

在内部，diagram-js 使用依赖注入（DI）来连接和发现图组件。该机制建立在 didi 之上。下面显示了一个与生命周期事件挂钩的服务。它通过另一个标准服务工具 eventBus 注册一个事件：

function MyLoggingPlugin(eventBus) {
  eventBus.on('element.changed', function(event) {
    console.log('element ', event.element, ' changed')
  })
}
// ensure the dependency names are still available after minification
MyLoggingPlugin.$inject = ['eventBus']

我们必须要用模块定义以唯一的名称发布服务

import CoreModule from 'diagram-js/lib/core'
// export as module
export default {
  __depends__: [CoreModule], // {2}
  __init__: ['myLoggingPlugin'], // {3}
  myLoggingPlugin: ['type', MyLoggingPlugin] // {1}
}

该定义告诉 DI 基础设施，该服务称为 myloggingpluging{1}，它依赖于 diagram-js 核心模块{2}，并且应在创建关系图时初始化该服务{3}。有关更多详细信息，请参阅 didi 文档。

现在我们就可以在初始化module的时候传递我们的自定义模块

import MyLoggingModule from 'path-to-my-logging-module'
var diagram = new Diagram({
  modules: [MyLoggingModule]  // 可根据自己的要求换成上述提到的additionalModules参数。
})

BPMN.js的基础说明