三、Bpmnjs 核心组件与架构介绍
目录
一、bpmnjs整体架构
二、bpmnjs核心层
2.1 Modeler
2.2 Renderer
2.3 Extensions
2.4 Tools
2.5 Properties Panel
总结
一、bpmnjs整体架构
通过上一章“2.bpmnjs简介”中我们可以明白，bpmnjs有两个核心的基础Diagram.js与BPMN模型（bpmn-moddle），bpmnjs在Diagram.js提供的交互、扩展等基础功能之上，对BPMN2.0的语义规则（比如哪几个元素之间可连接）、标准图形库（比如任务元素的图形、网关的图形等）、属性模型（比如流程的属性、任务属性、网关属性等），导入导出（将画布中的模型导出为BPMN2.0XML文件、JSON文件等）、交互逻辑（比如上线文菜单等）等所有元素进行建模和渲染，并设计出符合BPMN2.0协议规范的流程。
bpmnjs整体架构大体图所示：
二、bpmnjs核心层
2.1 Modeler
Modeler是bpmnjs最核心的类，它集成了bpmnjs所有的核心模块，我们进行流程创建时，就是使用的它，它支持流程的创建、编辑、导入、导出等功能，以及属性扩展、交互控制、事件监听等。
在Modeler中又有BpmnModeler模块与BpmnViewer模块，其中BpmnModeler负责整个流程所需元素的创建、交互、扩展、编辑等功能。BpmnViewer负责展示流程图，比如查看某个流程审批中走过的路径、查看某个业务流程图等，它不具备创建、编辑等操作。
2.2 Renderer
BpmnRenderer，主要基于Diagram.js提供的绘图等渲染能力，对BPMN中的所有元素进行可视化处理，比如UserTask（用户任务）、Gateway（网关）、SequenceFlow（连接线）等进行渲染，以及扩展渲染。并且可以通过Renderer组件对所有BPMN元素进行扩展或者自定义渲染，比如将UserTask（用户任务）的矩形改为长方形、原图标替换、修改背景色等等。
2.3 Extensions
Extensions（扩展），是bpmnjs提供的模块扩展机制。bpmnjs是对BPMN的元模型进行创建与渲染的，所创建的元素都来源于BPMN，如果我们想自己定义元素或者修改、覆盖BPMN中的某个元素，则可通过Extensions机制，注册自定义模块到bpmnjs中，实现对BPMN元素的扩展、修改或覆盖。
2.4 Tools
流程设计器，其实就是使用BPMN各种元素进行组合，并且各个元素之间的交互符合BPMN规范，这些元素就存放在Tools中。所以，Tools是bpmnjs的工具箱，里面包括了任务（Task）、网关（Gateway）、事件（Event）、连接（Flow）、快捷键等，用于用户进行可视化流程配置。
2.5 Properties Panel
官方提供的属性面板，用于编辑、扩展各个元素的属性，比如点击UserTask，会展示UserTask的属性，包括名称、ID、处理人、事件、监听等等。
-
总结
本章内容讲到这里，对bpmnjs核心的5个组件类库进行了大体的讲解，这个5大类库主要是负责什么工作的，到这里各位应该对bpmnjs有了个大体的了解，下一章开始，我们将会根据实际的开发，详细讲一下各个组件类库的用法。