leyoliu的博客

同上一节overlays的使用方法，可以使用overlays来修改指定的BPMN元素的颜色，这种需要用的position进行定位，可以修改position的值查看效果，会发现相对位置会变动。以元素左上角为原点。有时需要对特定元素显示不同的颜色，特别是业务中有分组的情况时，起一个标识作用，比如哪些任务是异步执行的，哪些是同步的。下面介绍三种方式来修改元素的颜色。通过canvas的addMarker来给元素添加标识，其实就相当于添加了class。以下是同时使用三种方式的完整代码。

通过this.bpmnModeler.get('overlays')可以获取到overlays对象，再使用其add函数进行添加html内容与位置信息等，add第一个参数为bpmn元素的唯一ID。以上overlays添加的html标签中都有class="diagram-note"，现在通过这个class进行css样式添加，如下。有时候对web上显示的BPMN元素信息进行补充展示或样式的修改，可以使用html结合overlay技术进行定制。运行后可以有如下效果，元素增加了一些注释并有相应的样式。

现在将bpmnModeler.importXML()的bpmn参数改为远程服务器获取，使用axios异步获取，代码如下，重点关注这部分代码try...catch内部的相关代码。生产环境中，流程图一般存储在server端，需要通过http请求获取然后加载。使用流行的axios（ajax框架）来远程请求，使用npm i axios进行安装。npm run serve运行后访问，可以正常获取到远程的BPMN并正常加载。

在methods中添加两个异步方法saveToBpmn saveToPic，新版的bpmn-js推荐使用async+await方式代替老式的callback写法，具体参考。在页面标签中添加两个button，用于点击触发保存。这里为了简单，防止button被bpmn的svg重叠，把button放在properties内部。通常来讲，设计的BPMN流程图需要下载保存到指定的地方，bpmn原生的xml格式与图片格式都有可能。点击右上角的保存按钮能对应保存并下载为对应的格式的流程文件。

当光标hover在元素上时会实时更新console框中的内容，使用click事件点击"pay the pizza"元素时，会弹出alert，说明以上两种方式都监听成功。业务上在预览流程时经常需要实时展示元素信息，比如光标移动到某个BPMN元素上，或者点击元素时，实时提取元素信息。每个bpmn元素都有唯一ID，如果要对某个固定的任务元素进行监听，可以使用如下方式。添加一个div>textarea用来展示提取信息。有两种方式可以实现事件监听。

确保模型中特定于Camunda Platform 7和8的部分得到维护，需要引入camunda-bpmn-js-behaviors依赖，运行npm i camunda-bpmn-js-behaviors；BPMN流程图元素属性面板，需要先安装bpmn-js-properties-panel，再引入相关样式与模块。3.安装camunda-bpmn-moddle，camunda-bpmn-js-behaviors。由于camunda扩展使用了一些特有的标签语法，bpmn-js不能识别，需要额外引入，运行。

src/componets目录添加BpmnViewerComponent.vue文件，删掉原来的HelloWorld.vue，并添加vue模版内容。以上是加载的bpmn xml字符串，实际工作中我们可能直接加载*.bpmn文件，vue默认不能加载这种文件，需要通过配置raw-loader加载。2.安装好node js，版本不太旧就行，我本地node -v (v16.18.1)，npm -v(8.19.2)，配置好taobao镜像地址。3.熟悉前端npm技术，了解vue，安装好vue。以上这些前提可以参考。

如下图所示，bpmn-js构建在两个重要的库之上:diagram-js和bpmn-moddle。3.定制流程图的样式（比如颜色，布局等）与语言（比如中文显示）1.工作流落地过程中业务系统需要实时展示流程执行过程；2.项目运营过程中需要动态在线修改流程改变业务；