运维咖啡吧
·
最好用的流程编辑器bpmn-js系列之ContextPad
💡
原文中文，约7500字，阅读约需18分钟。
📝
内容提要
本文介绍了如何自定义bpmn-js的ContextPad，提供了基于默认ContextPad修改和完全自定义两种方法。通过示例代码，讲解了在Vue环境中实现自定义ContextPad，添加“属性”按钮以关联节点表单数据，并使用Vuex管理状态，最终实现节点名称与表单同步更新，提升流程编辑器功能。
🎯
关键要点
- 本文介绍了如何自定义bpmn-js的ContextPad，提供了基于默认ContextPad修改和完全自定义两种方法。
- 自定义ContextPad的第一步是在custom目录下新建CustomContextPadProvider.js文件，定义ContextPadProvider类。
- ContextPadProvider类中包含getContextPadEntries方法，用于根据元素类型返回不同的ContextPad操作。
- 通过添加“属性”按钮，可以为UserTask和SequenceFlow类型的元素提供属性编辑功能。
- 在store目录下创建bpmn.js文件，使用Vuex管理节点的可见性和信息。
- 通过store.commit方法在点击“属性”按钮时更新store中的状态。
- 使用computed和watch来实现对store数据的获取和页面的动态更新，确保节点名称与表单同步更新。
❓
延伸问答
如何自定义bpmn-js的ContextPad？
可以通过基于默认ContextPad修改或完全自定义两种方式来实现自定义ContextPad。
在Vue环境中如何实现自定义ContextPad？
在custom目录下新建CustomContextPadProvider.js文件，定义ContextPadProvider类，并在custom/index.js中导出自定义的ContextPad。
如何为UserTask和SequenceFlow类型的元素添加属性编辑功能？
通过在ContextPad中添加一个名为“属性”的按钮，可以为这两种元素提供属性编辑功能。
Vuex在自定义ContextPad中的作用是什么？
Vuex用于管理节点的可见性和信息，通过store.commit方法更新状态，实现节点名称与表单的同步更新。
如何实现节点名称与表单数据的同步更新？
通过watch监听表单数据的变化，并使用modeling.updateLabel方法更新节点的名称。
自定义ContextPad的配置需要哪些步骤？
需要在custom/index.js中添加自定义ContextPad的导出配置，并在customModeler/index.js中编写CustomModeler类。
➡️
