Bpmn-js自定义Palette元素

Bpmn-js作为一个流程编辑器，常规的我们可以将其划分为几个功能区域，每个区域对应的负责不同的功能实现，bpmn-js的设计给我们留下了大量的留白和可扩展区域，其每一部分都可进行组合拼装，同时也支持我们的各种不同层次需求的自定义操作。其常规区域划分如下：

本文主要介绍如何进行左侧工具栏palette的自定义，如何创建一个新的palette。

回顾一下

 同行我们都是通过bpmn-js中提供的modeler来创建编辑器主体，其核心代码如下：

 

<template>
    <div class="my-process-designer__container">
      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
    </div>
<template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";

const bpmnModeler = new BpmnModeler({
        container: this.$refs["bpmn-canvas"],
        keyboard: this.keyboard