如何自己实现一个丝滑的流程图绘制工具（二) 自定义面板

前言

我需要的自定义面板不是固定在左侧，而是右上角，且只有新增节点的操作。采用css取定位更改。
如何自定义面板内容呢？

paltte目录下的两个文件

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)
  }

  getPaletteEntries(element) {
    const { bpmnFactory, create, elementFactory, translate } = this
    function createTask() {
      return function(event) {
        const shape = elementFactory.create('shape', { type: 'bpmn:Task' })
        create.start(event, shape)
      }
    }

    return {
      // 改变的是左侧栏的样式， 拖拽也要改变的话需要配合render
      'create.task': {
        group: 'model',
        className: 'icon-custom custom-task',
        title: translate('创建一个任务节点'),
        action: {
          dragstart: createTask(),
          click: createTask()
        }
      }
    }
  }
}

CustomPalette.$inject = ['bpmnFactory', 'create', 'elementFactory', 'palette', 'translate']

index.js

import CustomPalette from './CustomPalette'

export default {
  __init__: ['paletteProvider'],
  paletteProvider: ['type', CustomPalette]
}

在vue页面中引入放入additionalModules

import palette from './config/custom/palette'
 if (this.isShowPalette) {
   additionalModules.push(palette)
 }
this.bpmnModeler = new CustomModeler({
    container: this.$refs.canvas,
     keyboard: {
       bindTo: this.$el // 键盘操作的对象
     },
     // 添加控制板
     propertiesPanel: {
       parent: '#js-properties-panel'
     },
     // 添加控制板
     overlays: {
       defaults: {
         show: { minZoom: 0.1 },
         scale: true
       }
     },
     additionalModules
   })