bpmn-js 阅读指南:
- bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
- 使用bpmn-js 配置颜色
- Bpmn-js 属性控制
- Bpmn-js自定义Palette
- bpmn-js 事件总线处理
- 聊一聊bpmn-js中的Viewer和Modeler
- 聊一聊bpmn-js中的Palette
- 聊一聊bpmn-js中的elementFactory模块
- bpmn-js通过moddle插件实现自定义元素和自定义属性
通过之前对于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-scrol
l特性功能插件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
中的模块做一个了解,后续会根据功能需要对其中的单个功能一一介绍使用以及如何扩展我们需要的定制功能。