聊一聊bpmn-js中的Viewer和Modeler

本篇文章首发于我的个人博客站，点击查看原文

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

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

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

javascript 复制代码

// 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配置参数类型如下：

typescript 复制代码

// 构建参数
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留给开发人员扩展插件的入口，原则上可以完全由开发者自定义实现。

typescript 复制代码

// 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元素的功能，不一定能用得到。

还有几个使用didi或者是diagram-js中的自带功能插件不一一介绍了，若有需要会另外提及。本篇文章先整体对bpmn-js中的模块做一个了解，后续会根据功能需要对其中的单个功能一一介绍使用以及如何扩展我们需要的定制功能。