BPMN流程设计器自定义工具栏元素指南

在BPMN流程设计器开发过程中，设计者经常需要根据业务需求对工具栏(Palette)进行定制化调整。本文将以bpmn-process-designer项目为例，详细介绍如何隐藏或移除不需要的工具栏元素。

工具栏定制化需求分析

标准的BPMN设计器通常包含完整的建模元素工具栏，包括各种任务类型、网关、事件等。但在实际业务场景中，我们可能只需要使用其中的部分功能。例如：

• 只需要基础的任务和网关类型
• 需要隐藏高级或复杂元素以简化用户界面
• 需要根据用户权限显示不同的工具集

实现方法

CSS隐藏方案

最简单的实现方式是通过CSS选择器隐藏特定元素：

/* 隐藏不需要的工具项 */
.djs-palette .entry[title="手工任务"],
.djs-palette .entry[title="业务规则任务"],
.djs-palette .entry[title="脚本任务"] {
  display: none !important;
}

这种方法的优点是：

1. 实现简单快捷
2. 不需要修改核心代码
3. 可随时通过CSS调整显示/隐藏状态

重写Palette方案

更彻底的解决方案是重写PaletteProvider，通过编程方式控制显示哪些工具：

import { PaletteProvider } from 'bpmn-js/lib/features/palette';

class CustomPaletteProvider extends PaletteProvider {
  constructor(palette, create, elementFactory, spaceTool, lassoTool) {
    super(palette, create, elementFactory, spaceTool, lassoTool);
    
    // 自定义工具项
    this._entries = {
      'hand-tool': {
        group: 'tools',
        className: 'bpmn-icon-hand-tool',
        title: '激活手动工具',
        action: {
          click: function(event) {
            // 处理逻辑
          }
        }
      },
      // 只保留需要的工具项
    };
  }
  
  getPaletteEntries() {
    // 返回自定义的工具项集合
    return this._entries;
  }
}

方案对比

方案	优点	缺点	适用场景
CSS隐藏	简单快捷，无需修改核心代码	只是视觉隐藏，元素仍存在	快速原型开发，简单需求
重写Palette	彻底移除，性能更好	需要理解BPMN-JS架构	生产环境，复杂定制需求

最佳实践建议

1. 对于简单项目，优先考虑CSS方案
2. 对于企业级应用，建议采用重写Palette方案
3. 可以通过环境变量或配置参数动态控制工具显示
4. 考虑添加自定义工具项来替代被移除的标准工具

通过合理定制工具栏，可以显著提升用户体验，使设计器更加符合特定业务流程需求。