在bpmn-js中自定义用户任务节点：大小调整与图标替换

引言

在BPMN流程图可视化开发中，bpmn-js库提供了强大的模型编辑能力，但默认的用户任务节点样式往往无法满足实际业务需求。本文将分享我在项目中如何通过bpmn-js的API实现用户任务节点的尺寸调整和图标自定义，解决实际开发中的痛点。

一、用户任务节点大小调整

1. 问题背景

默认的用户任务节点尺寸（width: 100px; height: 80px）在显示复杂文本时显得局促，特别是在需要展示多行文本或长流程名称的场景下。

2. 解决方案

通过自定义渲染模块中CustomElementFactory修改元素渲染的width和height属性：

import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
import {is} from 'bpmn-js/lib/util/ModelUtil';;


export default class CustomElementFactory extends ElementFactory{
    constructor(bpmnFactory, moddle, translate){
        super(bpmnFactory, moddle, translate)
        this.state={}
    }

    _getDefaultSize(semantic){
        if(is(semantic, 'bpmn:Task')){
            return {width:100, height:55}
        }
        if(is(semantic, 'bpmn:UserTask')){
            return {width:100, height:55}
        }
        if(is(semantic, 'bpmn:CallActivity')){
            return {width:100, height:55}
        }
        if(is(semantic, 'bpmn:ExclusiveGateway')){
            return {width:41, height:41}
        }
        if(is(semantic, 'bpmn:StartEvent')){
            return {width:33, height:33}
        }
        if(is(semantic, 'bpmn:EndEvent')){
            return {width:33, height:33}
        }
        return super._getDefaultSize(semantic)
    }
}

ElementFactory.$inject=['bpmnFactory', 'moddle','translate']

二、用户任务图标替换

1. 默认图标问题

默认的用户任务图标是内置的SVG图形，无法直接替换为自定义图标。

2. 解决方案

修改自定义渲染PathMap.js文件中TASK_TYPE_USER_1，TASK_TYPE_USER_2，TASK_TYPE_USER_3三个线条，用户任务图标时这三个线条组成，可以自己画一个，或者把原来的图标数值缩小对应比例，直接替换即可

三、完整示例代码

初始化modeler时引用自定义渲染模块

const modeler = new Modeler({
      container: document.getElementById("worksheetXml"),
      // width: "70%",
      height: zoom ? "400px" : "200px",
      additionalModules: [
        customModule,
        {
          paletteProvider: ["value", ""], // 禁用左面板
          labelEditingProvider: ["value", ""], // 禁用编辑
          contextPadProvider: ["value", ""], // 禁用点击出现的contextPad
          // interactionEvents: ["type", InteractionEvents],
          connectionSegmentMove: ["value", ""], // 禁止拖拽连线
          zoomScroll: ["value", ""], // 禁用滚轮滚动
          bendpoints: ["value", ""], // 禁止拖动线
          bpmnSearch: ["value", ""],
          move: ["value", ""],
        },
      ],
    });

四、性能优化建议

图标缓存‌：使用Icon Font或SVG Sprite替代独立图片文件 按需渲染‌：只在元素可见时才加载图标资源 批量更新‌：避免频繁调用setProperties，使用debounce优化 结语

通过bpmn-js提供的API和Overlay机制，我们可以灵活地定制用户任务节点的外观和行为。本文介绍的尺寸调整和图标替换方法已在多个生产环境中验证，能够有效提升BPMN流程图的用户体验。实际开发中，建议结合业务需求设计统一的图标规范，保持流程图的可读性和一致性。

延伸思考‌：如何进一步扩展这些方法，实现更复杂的节点自定义，比如根据用户角色显示不同图标？欢迎在评论区分享你的见解！