运维咖啡吧
·
最好用的流程编辑器bpmn-js系列之Palette
💡
原文中文，约4900字，阅读约需12分钟。
📝
内容提要
本文介绍了如何自定义bpmn-js的左侧工具栏Palette，包括隐藏不需要的图标和添加新形状。通过创建CustomPalette.js和CustomModeler类，用户可以实现对Palette的完全自定义，文章提供了详细的代码示例，以帮助用户根据需求修改和扩展流程编辑器的功能。
🎯
关键要点
- 本文介绍了如何自定义bpmn-js的左侧工具栏Palette，包括隐藏不需要的图标和添加新形状。
- 可以通过CSS隐藏不需要的图标，例如使用代码 .bpmn-icon-data-store { display: none; }。
- 自定义Palette有两种方式：基于默认Palette修改或完全自定义新的Palette。
- 完全自定义Palette需要创建CustomPalette.js和CustomModeler类，提供了详细的代码示例。
- CustomPalette.js中定义了PaletteProvider类，允许添加、删除或修改Palette的shape。
- CustomModeler类用于替代原本的BpmnModeler类，以使用自定义的Palette。
- 文章提供了关于Shape类型及其属性的参考，建议查看bpmn-js的源码以获取更多信息。
❓
延伸问答
如何自定义bpmn-js的左侧工具栏Palette？
可以通过创建CustomPalette.js和CustomModeler类来完全自定义Palette，具体步骤包括定义PaletteProvider类和替代原本的BpmnModeler类。
如何隐藏bpmn-js工具栏中的不需要的图标？
可以使用CSS隐藏不需要的图标，例如使用代码 .bpmn-icon-data-store { display: none; }。
自定义Palette的两种方式是什么？
自定义Palette有两种方式：基于默认Palette修改和完全自定义新的Palette。
CustomPalette.js中PaletteProvider类的作用是什么？
PaletteProvider类用于注册自定义的Palette，允许添加、删除或修改Palette的shape。
如何在bpmn-js中添加新的shape？
可以通过在CustomPalette.js中定义createAction函数来添加新的shape，并在getPaletteEntries中返回相应的定义。
如何替代原本的BpmnModeler类？
通过创建CustomModeler类并在页面上引用它来替代原本的BpmnModeler类，以使用自定义的Palette。
➡️
