bpmn-js中定制工具面板

默认工具面板

以bpmn-js14.2.0版本为例，实例化Modeler

import Modeler from 'bpmn-js/lib/Modeler'
new Modeler({ container: document.querySelector('#contaienr') })

默认渲染效果如下：

如果你的业务需要对工具面板以进行定制，可以通过重写 PaletteProvider类实现，它支持增加、删除工具以及修改工具样式

删除默认工具

PaletteProvider类的实例方法getPaletteEntries()返回一个以工具名称和工具配置组成的对象，如果要删除某个工具，只需要删除工具在对象中对应的属性即可，下面以删除创建组工具为例：

import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'

class CustomPaletteProvider extends PaletteProvider {
    getPaletteEntries() {
        const actions = super.getPaletteEntries()
        delete actions['create.group']
        return actions
    }
}

初始化Modeler时应用上面定义的CustomPaletteProvider

new Modeler({
    container: containerRef.value,
    additionalModules: [
      { paletteProvider: ['type', CustomPaletteProvider] },
    ],
  })

可以看到工具面板右下角的创建组工具已经被删掉了

添加自定义工具

添加自定义工具也是通过修改PaletteProvider类的实例方法getPaletteEntries()的返回值来实现（即向ctions对象添加自定义的工具名称及行为配置）:

import PaletteProvider, type { Create, ElementFactory, GlobalConnect, HandTool, LassoTool, Palette, SpaceTool, Translate } from 'bpmn-js/lib/features/palette/PaletteProvider'
class CustomPaletteProvider extends PaletteProvider {
    create!: Create
    elementFactory!: ElementFactory
    
    constructor(palette: Palette, create: Create, elementFactory: ElementFactory, spaceTool: SpaceTool, lassoTool: LassoTool, handTool: HandTool, globalConnect: GlobalConnect, translate: Translate) {
        super(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate)
        this.create = create
        this.elementFactory = elementFactory
    }
    
    createUserTask(event: Event) {
        const shape = this.elementFactory.createShape({ type: 'bpmn:UserTask' })
        this.create.start(event, shape, null)
    }

    getPaletteEntries() {
        const actions = super.getPaletteEntries()
        delete actions['create.group']
        return {
            ...actions,
            'myAction': {
                className: 'my-action-icon', // 自定义class
                title: '自定义工具', // 工具名称，hover时显示
                action: {
                    dragstart: (event: Event) => this.createUserTask(event), // 拖动时执行
                    click: (event: Event) => this.createUserTask(event), // 点击时执行
                },
            },
        }
    }
}

用上面定义的CustomPaletteProvider初始化Modeler，可以看到右下角多了一个红色的自定义工具，其行为是创建一个用户任务