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

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

前边写了四篇文章介绍了bpmn.js的基本使用，最近陆续有小伙伴加我催更，感谢对我这个半吊子前端的信任，接着更新bpmn.js的一些高级用法，本篇介绍对左侧工具栏Palette的隐藏和自定义修改

隐藏shape

左侧工具栏Palette有些图标我用不到，那该如何隐藏呢？最简单的方法就是直接找到对应的class，通过css隐藏，例如我不需要创建数据存储，可以通过下边的代码隐藏

自定义shape

为了编辑方便，我想在palette上添加一个shape该如何操作呢？这里我们需要自定义Palette，自定义Palette有两种方式可以选择，第一种就是基于默认的Palette来修改，第二种就是完全写个新的Palette来替代默认的Palette，第一种只能在默认的Palette上添加shape，而不能修改或删除，比较鸡肋我们就直接放弃了，来看下完全自定义Palette该如何实现

以下代码基于我们之前搭建好的代码框架，具体可看文章『最好用的流程编辑器bpmn-js系列之基本使用』，

1.在目录下新建目录，在目录下新建目录，每层目录下都新建文件，最终目录结构如下

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

这段代码的意思相信各位前端的大佬比我理解的要深刻，就不过多介绍了，Platte展示的shape就是最后return输出的那个字典数据定义的，一个shape对应的数据格式如下：

其中key为这个shape的名称，value为这个shape定义的一些属性，主要有四个：

group：定义这个shape属于哪个组，主要有tools、event、gateway和activity可以选择

className：定义这个shape的chass名称，可以通过这个class给shape指定具体的样式

title：定义这个shape的title，也就是鼠标移动到shape上的提示

action：用户操作时触发的事件

通过这个数据我们就可以随意添加、删除或者修改Palette的shape了，改位置该样式轻松自如

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

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

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

最终效果如下：

Shape类型

关于Shape总共有哪些类型，以及各自对应的属性都是什么，这个官方没有具体的文档给列出，我在使用的时候通常直接查看源码和文件获取，对于部分类型，需要添加options选项

例如中间时间事件所对应的属性为：

写在最后

接触bpmn-js不久，且第一次用VUE，边学边写，文章难免出错，各位多多包含。想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，欢迎关注