运维咖啡吧
·
最好用的流程编辑器bpmn-js系列之Palette
内容提要
本文介绍了如何自定义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的源码以获取更多信息。
延伸解读
自定义Palette的灵活性
通过自定义bpmn-js的Palette，用户可以根据具体需求添加或删除图标，这为流程编辑器的使用提供了极大的灵活性。尤其是在团队协作中，能够隐藏不必要的工具可以提高工作效率，减少干扰。
代码实现的复杂性
虽然文章提供了详细的代码示例，但自定义Palette的实现仍然需要一定的前端开发基础。用户在进行自定义时，需仔细理解每段代码的功能，特别是如何正确注册和调用自定义的PaletteProvider和Modeler类。
参考源码的重要性
文章提到查看bpmn-js的源码以获取Shape类型及其属性，这一点非常重要。源码不仅能帮助用户理解如何自定义Palette，还能提供更多的灵感和解决方案，尤其是在遇到问题时。
延伸问答
如何自定义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。
