最好用的流程编辑器bpmn-js系列之Modeler

最好用的流程编辑器bpmn-js系列文章

上一篇文章『最好用的流程编辑器bpmn-js系列之本地文件』介绍了如何将本地的bpmn文件渲染到流程编辑器以及将编辑器内的流程作为图片或bpmn文件保存到本地，这篇文章将会介绍流程编辑界面的一些优化

以下演示代码基于上一节搭建好的vue环境，使用bpmn版本为当前最新版7.3.0

7.3.0之后版本的回调写法

文章开头先说一下我在写本系列教程中除了阅读部分源码和论坛外，还参考了很多网上的优秀文章，在此感谢这些无私的贡献者，目前网上大多数教程都是基于7.3.0之前的版本写的，在使用等方法时用了如下callback的方式

但当将bpmn-js我升级到了7.3.0之后，再使用上边的方式就会出现报错

提示这种回调方式不建议使用，并且会在后续版本中移除，推荐如下这样的写法来代替

除了方法外，其他需要使用上边这种写法的还有、、、、

撤销恢复

在流程编辑的过程中，会出现操作撤销和恢复撤销的需求，bpmn-js提供了和方法来实现，使用比较简单

先添加两个按钮

然后编写对应的方法

放大缩小

当流程比较复杂，元素较多的时候，我们需要放大流程，关注于流程的某一块编辑，这时候就需要用到bpmn-js提供的方法来实现流程图的放大缩小

添加三个按钮，分别为放大、缩小、还原

然后编写对应的方法来控制放大和缩小，放大缩小实际上是通过方法来实现的，方法接收一个num参数，这个参数为显示的比例，默认为1，放大就是增加这个值，缩小就是减小这个值，还原就是将这个值重置为1

需要注意的是这里的就是默认值1，需要在data中定义这个变量

快捷键

bpmn-js除了提供如上一些方法能方便操作画布元素外，还提供键盘快捷键的操作支持，可通过在创建BpmnModeler时添加配置来实现

目前bpmn-js支持如下一些快捷键操作

ctrl + z : 撤销

ctrl + y : 恢复

ctrl + c : 复制

ctrl + v : 粘贴

ctrl + + : 放大

ctrl + - : 缩小

ctrl + 0 : 恢复

ctrl + del : 删除

ctrl + 箭头 : 上下左右移动

除了键盘快捷键外，bpmn-js也支持ctrl+鼠标滚轮来控制放大缩小

网格背景

许多流程图软件的背景都是网格状，bpmn-js如何添加网格背景呢？修改相应class的css即可

功能禁用

如果你想修改或禁用bpmn-js的某些默认功能，例如你不想要左侧的工具栏Palette，则可以通过选项来实现，允许你使用自定义模块来修改或替换现有功能

监听绑定

很多时候我们需要监听用户的操作并给予相应的反馈，例如在bpmn-js本地文件文章中关于监听变化下载文件的介绍中，我们需要监听到流程的变化，并实时将数据补充到a标签中，用到了如下代码

这里的就是个监听方法，能监听到流程的变化，除此之外bpmn-js还提供了来帮助我们做事件监听，用法如下

在渲染完成后调用方法，中添加了监听方法，然后通过来实现对事件的监听，例如这里监听了点击事件

监听到事件后就很方便的进行后续的操作了，例如我想判断如果用户点击了，那么就打印任务id、type、name，则可以这样实现

事件列表

那么究竟有哪些事件类型呢？我们可以通过方法来获取，常用的有如下这些

canvas.destroy

canvas.init

canvas.viewbox.changed

canvas.viewbox.changing

connect.end

connection.added

connection.changed

connection.remove

connection.removed

create.end

diagram.clear

diagram.destroy

diagram.init

element.changed

element.click

element.hover

element.marker.update

element.out

elements.changed

interactionEvents.createHit

interactionEvents.updateHit

render.connection

render.getConnectionPath

render.getShapePath

render.shape

selection.changed

shape.added

shape.changed

shape.move.end

shape.remove

shape.removed

获取节点

当我们需要获取流程中的节点时，可以使用如下方法来获取全部节点或检索指定类型的节点

获取全部节点

获取指定ID节点

修改节点

通过modeling的方法可以修改节点属性，例如这里修改节点为

写在最后

接触bpmn-js不久，且第一次用VUE，边学边写，文章难免出错，各位多多包含。想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，下一篇介绍bpmn-js的Viewer模式下的节点颜色修改、鼠标拖动等内容，欢迎关注