自定义bpmn.js左侧工具栏palette样式

矫情吗；* 2022-10-30 15:29 494阅读 0赞

# 自定义bpmn.jspalette样式 #

## 前期准备 ##

我在之前的 `vue-bpmn` 项目的 `git` 仓库下新创建了一个分支 `custom`，用来存放自定义样式的相关内容，项目快速预览[地址][Link 1]

`bpmn.js` 的面板布局了解一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
如果我们想自定义工具栏的样式的话，可以选择在默认的Palette基础上进行修改（或者添加新的备选项），也可以完全自定义工具栏 `palette`

## 在默认的Palette基础上修改 ##

在默认的左侧工具栏里新增一个自定义的项

*  元素类型：`bpmn:Task`
 *  元素名称：`init-task`
 *  样式：沿用 `bpmn:Task` 原有的样式，仅仅将边框改为红色
 *  作用：创建一个类型为 `init-task` 的任务节点

先看看效果怎么样：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]  
另一种自定义样式效果：

![在这里插入图片描述][20210220172637251.png]

### 前期准备 ###

我们直接在新创建的分支 `custom` 上写代码，顺便删除创建分支后复制过来的不必要的文件，相关案例代码[dulily/vue-bpmn][Link 1]

`bpmn.js` 的[修改样式源码参考][Link 2]

**新建文件**：在 `views` 文件夹下新建一个名为 `custom-palette.vue` 的文件（配置路由），然后将之前的基础案例中的内容复制进去；然后在 `components` 文件夹下新建一个文件夹 `custom` 用来放置后面需要的自定义的东西，然后在 `custom` 文件夹下新建 `CustomPalette.js` 文件和 `index.js` 文件

### 编写 `CustomPalette.js` 文件 ###

我们可以在`CustomPalette.js` 文件里边写上我们要自定义的项，这个 `js` 文件是导出一个类（类的名称可以随意去，但是在引用的时候不能随意取）

// CustomPalette.js
    export default class CustomPalette { 
        constructor(bpmnFactory, create, elementFactory, palette, translate) { 
            this.bpmnFactory = bpmnFactory;
            this.create = create;
            this.elementFactory = elementFactory;
            this.translate = translate;
    
            palette.registerProvider(this);
        }
        // 这个函数就是绘制palette的核心
        getPaletteEntries(element) { }
    }
    
    CustomPalette.$inject = [
        'bpmnFactory',
        'create',
        'elementFactory',
        'palette',
        'translate'
    ]

上面代码解析：

*  定义一个类
 *  使用 `$inject` 注入一些需要的变量
 *  在类中使用 `palette.registerProvider(this)` 指定这是一个 `palette`

定义完 `CustomPalette.js` 之后，我们需要在其同级的 `index.js` 中将它导出

// custom/index.js
    import CustomPalette from './CustomPalette'
    
    export default { 
        __init__: ['customPalette'],
        customPalette: ['type', CustomPalette]
    }

**注意：`__init__` 中的名字必须是 `customPalette` ，它下面的属性名也必须是 `customPalette`，否则会报错哦**

### 在页面中使用 ###

在页面中如何使用

<script>
    ...
    import customModule from './custom'
    ...
    this.bpmnModeler = new BpmnModeler({ 
    ...
        additionalModules: [
            // 左边工具栏以及节点
            propertiesProviderModule,
            // 自定义的节点
            customModule
        ]
    })
    
    </script>

### 编写核心函数 `getPaletteEntries` 代码 ###

函数的名称不能变，否则会报错，首先它返回的是一个对象，对象中指定的就是你要自定义的项

// CustomPalette.js
    getPaletteEntries(element) { 
        return { 
            'create.init-task': { 
                group: 'model', // 分组名
                className: 'bpmn-icon-task red', // 样式类名
                title: translate('创建一个类型为init-task的任务节点'),
                action: {  // 操作
                    dragstart: createTask(), // 开始拖拽时调用的事件
                    click: createTask() // 点击时调用的事件
                }
            }
        }
    }

自己定义的项名称为：`create.init-task`，它有几个固定的属性：

*  `group`：属于哪个分组，比如 `tools`、`event`、`gateway`、`activity` 等等，用于分类
 *  `className`：样式类名，我们可以通过设置样式给元素修改样式
 *  `title`：鼠标移动到元素上面给出的提示信息
 *  `action`：用户操作时会触发的事件

下一步我们要做的就是 ：通过 `className` 来设置样式；通过 `action` 来定义要触发的事情

### 编写 `className` 代码 ###

在 `src`目录下的`assets`文件夹下新建了一个 `css` 文件夹，并在 `css` 文件夹中新建了 一个全局样式文件 `custom.css`，然后在 `main.js` 中引用这个全局样式文件

// main.js 中引入全局css文件
    import '../src/assets/css/custom.css'

然后我们在 `css` 文件中添加样式

/* custom.css */
    .bpmn-icon-task.red { 
        color: #cc0000 !important;
    }

解析：上面的 `className` 之所以用 bpmn-icon-task`，是因为这个图标类是`bpmn.js`中自带的`iconfont`类，可以使图标显示为`task\` 图标的效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 2]  
字体图标改变颜色只需要设置 `color` 就可以了  
如果我们想换一只图片的话也可以使用 `className` 来实现

/* custom.css */
    .icon-custom {  /* 定义一个公共的类名 */
        border-radius: 50%;
        background-size: 65%;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .icon-custom.init-task {  /* 加上背景图 */
        background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png');
    }

然后修改 `create.init-task` 中的 `className`

// CustomPalette.js
     'create.init-task': { 
        className: 'icon-custom init-task' 
     }

这样我们就可以看到自定义的图标了  
![在这里插入图片描述][20210221111539998.png]

### 编写 `action` 代码 ###

此时，页面工具栏上已经能渲染出我们自定义的元素了，但是点击或者拖拽是没有效果的。  
我们希望实现点击或者拖拽元素能在画布中画出一个 `init-task`，因此，得给这个元素加上事件，也就是编写一个函数用来创建 `bpmn:Task`这个元素

// CustomPalette.js
    function createTask() { 
        return function(event) { 
            const businessObject = bpmnFactory.create('bpmn:Task');
            const shape = elementFactory.createShape({ 
                type: 'bpmn:Task',
                businessObject
            });
            console.log(shape) // 只在拖动或者点击时触发
            create.start(event, shape);
        }
    }

这里演示的就是利用 `bpmn.js` 提供的一些方法创建 `shape` 然后将其添加到画布上  
这里创建的是一个类型为 `bpmn:Task` 的元素，还可以用来创建 `bpmn:StartEvent、bpmn:ServiceTask、bpmn:ExclusiveGateway`等  
现在我们拖动或点击 `init-task` 图标就可以在页面上创建一个 `Task` 元素了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 3]  
此时，画布中的元素还是原始状态，后面学习如何自定义渲染

### 完整的 `CustomPalette.js` 代码 ###

整合代码

// CustomPalette.js
    export default class CustomPalette { 
      constructor (bpmnFactory, create, elementFactory, palette, translate) { 
        this.bpmnFactory = bpmnFactory
        this.create = create
        this.elementFactory = elementFactory
        this.translate = translate
    
        palette.registerProvider(this)
      }
      // 这个函数就是绘制palette的核心
      getPaletteEntries(element) { 
        const { 
          bpmnFactory,
          create,
          elementFactory,
          // translate
        } = this
    
        function createTask () { 
          return function (event) { 
            const businessObject = bpmnFactory.create('bpmn:Task') // 这个也可以不要
            const shape = elementFactory.createShape({ 
              type: 'bpmn:Task',
              businessObject
            })
            console.log(shape, element) // 只在拖动或者点击时触发
            create.start(event, shape)
          }
        }
    
        return { 
          'create.init-task': { 
            group: 'model', // 分组名
            className: 'bpmn-icon-task red', // 样式类名
            title: this.translate('创建一个类型为init-task的任务节点'),
            action: {  // 操作
              dragstart: createTask(), // 开始拖拽时调用的事件
              click: createTask() // 点击时调用的事件
            }
          }
        }
      }
    }
    
    CustomPalette.$inject = [
      'bpmnFactory',
      'create',
      'elementFactory',
      'palette',
      'translate'
    ]

[此部分项目案例地址][Link 1]

在默认的 `Palette` 基础上修改的方式，实际上就是定义了一个 `CustomPalette`，然后在 `new BpmnModeler` 生成的对象中引用进去

## 完全自定义Palette ##

如果我们不想使用它提供的默认选项，完全自定义的话就不能使用上面的方法了。需要重写 `BpmnModeler` 这个类，自己实现 `modeler`

### 前期准备 ###

继续在上面的项目基础上在 `components` 下创建一个 `customModeler` 文件夹，在 `customModeler` 文件夹下新建 `custom` 文件夹和 `index.js` 文件，然后在 `views` 文件夹下新建 `custom-modeler.vue` 文件（记得配置路由）  
`customModeler` 文件夹下的文件用来放置自定义的 `modeler`  
项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 4]

### 编写 `CustomPalette.js` 的代码 ###

export default function PaletteProvider (bpmnFactory, palette, create, elementFactory, globalConnect) { 
        this.bpmnFactory = bpmnFactory
        this.create = create
        this.elementFactory = elementFactory
        this.globalConnect = globalConnect
    
        palette.registerProvider(this)
      }
      // 这个函数就是绘制palette的核心
      PaletteProvider.prototype.getPaletteEntries = function (element) { 
        const { 
          bpmnFactory,
          create,
          elementFactory
        } = this
    
        function createTask () { 
          return function (event) { 
            const businessObject = bpmnFactory.create('bpmn:Task') // 这个也可以不要
            const shape = elementFactory.createShape({ 
              type: 'bpmn:Task',
              businessObject
            })
            console.log(shape, element) // 只在拖动或者点击时触发
            create.start(event, shape)
          }
        }
    
        return { 
          'create.init-task': { 
            group: 'model', // 分组名
            className: 'icon-custom init-task', // 样式类名
            title: '创建一个类型为init-task的任务节点',
            action: {  // 操作
              dragstart: createTask(), // 开始拖拽时调用的事件
              click: createTask() // 点击时调用的事件
            }
          }
        }
      }
    
    
    PaletteProvider.$inject = [
      'bpmnFactory',
      'palette',
      'create',
      'elementFactory',
      'globalConnect'
    ]

重写 `PaletteProvider` 类，同时覆盖了其原型上的 `getPaletteEntries` 方法，从而达到覆盖原有的工具栏的效果

### 编写 `custom/index.js` 代码 ###

import CustomPalette from './CustomPalette'
    
    export default { 
      __init__: ['paletteProvider'],
      paletteProvider: ['type', CustomPalette]
    }

导出我们自定义的 `Palette`

### 编写 `customModeler/index.js` 代码 ###

import Modeler from 'bpmn-js/lib/Modeler'
    import inherits from 'inherits'
    import CustomModule from './custom'
    export default function CustomModeler (options) { 
      Modeler.call(this, options)
      this._customElements = []
    }
    inherits(CustomModeler, Modeler)
    CustomModeler.prototype._modules = [].concat(
      CustomModeler.prototype._modules, [
        CustomModule
      ]
    )

导出的类继承了 `Modeler` 核心的类，保证其他功能的实现

### 在页面上引用 ###

需要将我们原本通过 `BpmnModeler` 创建的对象改为通过我们自定义的 `CustomModeler` 来创建，编写 `custom-modeler.vue`

<script>
    ...
    import CustomModeler from './customModeler'
    ...
    this.bpmnModeler = new CustomModeler({  // 原本是用BpmnModeler
        ...
        additionalModules: [] // 可以不用引用任何东西
    })
    </script>

效果如图

![在这里插入图片描述][20210221135944784.png]  
后续学习如何渲染在画布中的问题

[Link 1]: https://gitee.com/dulily/vue-bpmn/tree/custom
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221024/45fba5b923f447a0820e7ef0dc7df82b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: /images/20221024/aac2faa1f7c84b20bd5a54da043d32c4.png
[20210220172637251.png]: /images/20221024/776ea8f649a742f29a0ec66c4e2888f1.png
[Link 2]: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/palette/index.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 2]: /images/20221024/84c3b8c5b9164e81ab1409d7000720aa.png
[20210221111539998.png]: /images/20221024/932ad34dc92743e78fa03c526cacf2f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 3]: /images/20221024/131bd5a112ab45eab9a6746cc0f3d565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 4]: /images/20221024/c2ee236207504a82b808264d72b9f106.png
[20210221135944784.png]: /images/20221024/2bdf9b56a3c1432997220b106e3a888e.png