BPMN.js：实现序列流条件与名称的联动更新

// custom/SequenceFlowConditionUpdater.js
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';

export default class SequenceFlowConditionUpdater extends CommandInterceptor {
  constructor(eventBus, modeling) {
    super(eventBus); // 继承 CommandInterceptor 必须调用 super(eventBus)

    this.modeling = modeling; // 注入 modeling 服务

    // 监听 'element.updateProperties' 命令的执行后事件
    // 这个命令通常在属性面板更新元素的直接属性时触发
    this.postExecute('element.updateProperties', ({ element, properties }) => {
      if (element.type === 'bpmn:SequenceFlow') {
        // 检查是否是 conditionExpression 属性被更新
        if (properties.conditionExpression !== undefined) {
          // 提取条件表达式的 body 内容，如果不存在则为空字符串
          const conditionBody = properties.conditionExpression?.body || '';

          // 获取序列流的业务对象 (businessObject)
          const sequenceFlowBo = element.businessObject;

          // 只有当当前名称与新的条件体不同时才进行更新，避免不必要的渲染
          if (sequenceFlowBo.name !== conditionBody) {
            // 使用 modeling 服务更新元素的 name 属性
            // 这将确保图形标签正确更新
            this.modeling.updateProperties(element, { name: conditionBody });
          }
        }
      }
    });

    // 监听 'element.updateModdleProperties' 命令的执行后事件
    // 这个命令在直接更新 Moddle 元素的子属性时触发，例如更新 conditionExpression 的 body
    this.postExecute('element.updateModdleProperties', ({ element, moddleElement, properties }) => {
      if (element.type === 'bpmn:SequenceFlow' && moddleElement.$type === 'bpmn:FormalExpression') {
        // 检查是否是 conditionExpression 的 body 属性被更新
        if (properties.body !== undefined) {
          const newConditionBody = properties.body || '';
          const sequenceFlowBo = element.businessObject;

          // 确认 moddleElement 是当前序列流的 conditionExpression
          if (sequenceFlowBo.conditionExpression === moddleElement) {
            if (sequenceFlowBo.name !== newConditionBody) {
              this.modeling.updateProperties(element, { name: newConditionBody });
            }
          }
        }
      }
    });
  }
}

// 注册为 bpmn-js 模块
SequenceFlowConditionUpdater.$inject = [
  'eventBus',
  'modeling'
];

import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn';
// import customTranslateModule from './custom/customTranslate'; // 如果有自定义翻译
import SequenceFlowConditionUpdater from './custom/SequenceFlowConditionUpdater'; // 导入自定义模块

const bpmnModeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule,
    // customTranslateModule, // 可选
    {
      // 注册 SequenceFlowConditionUpdater 模块
      __init__: [ 'sequenceFlowConditionUpdater' ],
      sequenceFlowConditionUpdater: [ 'type', SequenceFlowConditionUpdater ]
    }
  ],
  // ... 其他配置
});