聊一聊bpmn-js中的Viewer和Modeler

通过之前对于bpmn-js的学习，可以完成一个基础的Bpmn编辑器(或者叫建模器)的显示和简单绘制，若需要做更多工作还需加强对其的内部实现的了解。通过使用我们可以知道bpmn-js中有两个比较重要的操作对象：bpmnViewer和bpmnModeler。

Viewer：一般习惯性对齐命名对象称之为bpmnViewer，这是bpmn-js提供的一个基础的bpmn流程图的查看器，其主要是用于控制流程图绘制的显示区域部分。
Modeler：Bpmn建模器，这是整个流程编辑的核心构成部分，负责流程图的构建编辑，也是我们操作较多的部分。

我们使用的常规逻辑：viewer负责展示，modeler负责构建。仔细查看bpmn-js的实现可以看出Modeler我们可以理解成在Viewer上的一层扩展。

// viewer 创建
var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });

// Viewer源码：构造函数
export default function Viewer(options) {
  BaseViewer.call(this, options);
}

// modeler 创建
var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});

// Modeler.js源码：构建函数
export default function Modeler(options) {
  BaseModeler.call(this, options);
}

// BaseModler.js源码：构建函数
export default function BaseModeler(options) {
  BaseViewer.call(this, options);

  // hook ID collection into the modeler
  this.on('import.parse.complete', function(event) {
    if (!event.error) {
      this._collectIds(event.definitions, event.elementsById);
    }
  }, this);

  this.on('diagram.destroy', function() {
    this.get('moddle').ids.clear();
  }, this);
}

上述代码可以看出无论是Viewer还是Modeler其构建核心都是由BaseViewer提供的，查看BaseViewer构建的options配置参数类型如下：

// 构建参数
export type BaseViewerOptions = {
    width?: number | string; 
    height?: number | string;
    position?: string;
    container?: string | HTMLElement; // 绘制挂载父节点
    moddleExtensions?: ModdleExtensions; // 格式定义，通常适用于描述Activiti、flowable、camunda的描述文件
    additionalModules?: ModuleDeclaration[];// 扩展插件，这是bpmn-js中的核心功能
} & Record<string, any>;


// 默认参数
const DEFAULT_OPTIONS = {
  width: '100%',
  height: '100%',
  position: 'relative'
};

Modeler就是基于additionalModules功能给BaseViewer扩展了编辑建模功能，它扩展了Palette、AutoPlace、ContextPad、Move、Modeling等等模块来组件成一个建模器，这也是Bpmn-js留给开发人员扩展插件的入口，原则上可以完全由开发者自定义实现。

// additionalModules 扩展支持插件格式
export type ModuleDeclaration = {
  [name: string]: ServiceDeclaration<unknown> | unknown;
  __init__?: Array<string|InitializerFunction>;
  __depends__?: Array<ModuleDeclaration>;
  __exports__?: Array<string>;
  __modules__?: Array<ModuleDeclaration>;
};

如下为Modeler中的内置扩展模块，又或者叫建模组件：

AlignElements：这是几个元素对齐方式功能的插件的集合，包含contenxtpad部分、bpmn图形图像部分、popupMenu部分。
AutoPlace：bpmn元素自动放置行为插件
AutoScroll：这个是使用的diagram-js中的auto-scroll特性功能插件
AutoResize：BPMN特定的调整大小行为
ContextPad：BPMN特定的上下文填充提供程序【即元素选择右侧快捷面板操作区域】。
CopyPaste：BPMN中的复制粘贴功能
DistributElements：为当前不支持分发的元素注册元素排除筛选器
EditorActions：注册并执行BPMN特定的编辑器操作。
GridSnapping：追踪网格移动事件，本质就是一个eventbus的监听器插件
InteractionEvents：BPMN特定的命中区域和交互修复。
Keyboard：键盘绑定插件
LabelEditing：BPMN流程图元素SVG中绘制label的展示和编辑插件
Modeling：这是BPMN的Modeler的核心功能插件，实现modeler的主要功能：更新编辑
Palette：这是Modeler的工具栏区域，用于提供可绘制的BPMN元素来绘制BPMN流程图
ReplacePreview：替换上下文中所有可替换元素的视觉效果
Search：提供搜索BPMN元素的功能，不一定能用得到。