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

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

上一篇文章『最好用的流程编辑器bpmn-js系列之Palette』介绍了modeler模式下如何自定义左侧工具栏Palette，这篇文章将会介绍如果自定义ContextPad

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

自定义ContextPad

自定义ContextPad与自定义Palette一样，有两种方式可以选择，第一种就是基于默认的ContextPad来修改，第二种就是完全写个新的ContextPad来替代默认的ContextPad，同样的这里就下完全自定义ContextPad，因为与自定义Palette高度相似，这里以具体代码为主

1.在custom目录下新建文件，内容如下

主要思路依然是构建最终输出的字段数据，可以根据不同类型的shape添加不同的ContextPad，以上代码就是默认所有shape都有删除按钮，然后给类型的shape和连线都添加了一个名为“属性”的按钮

同样的这里所需要的shape数据也可以参考上篇文章最后给出的那两个Github源码链接

2.在文件中添加如下内容将自定义的ContextPad导出

这里只有自定义的配置，如果你是想在自定义的基础上再自定义的话，将以上代码与原本的内容整合即可

3.在文件中编写自定义的类

同样的如果你想在自定义的基础上再自定义，则在之前的代码基础上与以上代码整合

4.在页面上引用自定义的以替代原本引用的类，这样就能用到我们自定义的Palette啦

最终效果如下：

点击处理

bpmn.js给节点关联属性是通过右侧面板来实现的，其核心是对xml文件的修改，但我们并没有这样用，而是直接给每个节点关联一个表单，这个节点的所有数据都保存在这个表单里，后台单独存于数据库，这里所说的节点包含图形shape和连线SequenceFlow等流程图里的元素，节点ID与表单数据一一对应

节点要关联表单数据，就需要用到我们上边添加的名为“属性”的按钮，当点击“属性”按钮时出现表单，因为不同类型的节点需要弹出不同的表单，所以在点击按钮之后主程序也需要知道点击的节点类型等数据，这就涉及到了组件间的数据传递，试了很多方法都不行，最终只能借助于借助于来实现了，具体代码如下

1.在store目录下新建modules目录，modules目录下创建模块化文件，目录结构如下

2.在中编写如下代码

想要了解以上代码的意思，我们需要先了解下Vuex的基本思想：当我们在页面上点击了一个按钮，它会触发一个，随后会执行一个，会去改变，当改变后页面就能根据来进行相应的处理了

然后再来看上边的代码，用到了Vuex基本思想里边的和，其中为单一状态树，简单理解为我们定义的变量，全局变量，其他组件可以获取的到的变量，而想要修改里定义的变量就必须通过来实现，就定义了两个事件来对应修改state里的两个变量

里定义的两个变量分别为用来记录表单展示状态的以及点击节点信息的，默认情况下为false，表示表单为隐藏状态，当点击ContextPad的的“属性”按钮时修改为true，展示表单，同时会把点击的节点信息赋予，这个后边代码会有实现

想要定义的store生效还需要以下两步进行store挂载及引用

3.中编写如下代码挂载store

4.在中引入store

以上就定义好了store，接下来就是使用store了，首先需要处理的是，当点击ContextPad里的“属性”按钮时，修改store里和值

5.修改文件，给action添加方法，方法修改store里定义的state

对store的修改只能通过来实现

6.最后在页面中就可以借助和来实现对store里数据的获取以及对页面的处理

最终实现的效果如下

但这里有一个问题，就是当我在表单里修改了节点名称，也就是节点的name属性时不会同步到左侧的流程图节点上，那该如何实现同步呢？也很简单，修改下watch即可

获取store里的值然后通过方法来更新节点的名称，至此问题完美解决

写在最后

接触bpmn-js不久，且第一次用VUE，边学边写，文章难免出错，各位多多包含。bmpn系列的文章已经写了六篇，至此我们的使用已经基本到此，感谢各位小伙伴的支持。除了这几篇文章外，我还创建了BPMN的主页：https://blog.ops-coffee.cn/bpmn内容更为丰富，包含了一些这系列文章中没有的内容，例如API列表、ICON列表等，欢迎查看