React中如何在BPMN.js查看模式下禁用Properties Panel控件并保留查看权限？

方案一：监听元素选择事件，动态禁用控件 #

由于切换画布元素时属性面板会重新渲染，直接DOM操作会失效，因此需要绑定BPMN.js的元素选择事件，每次面板更新后重新执行禁用逻辑。

实现代码 #

const modeler = new Modeler({ /* 你的初始化配置 */ });

// 监听元素选择变化事件
modeler.on('selection.changed', () => {
  // 延迟执行确保面板渲染完成
  setTimeout(() => {
    disablePanelControls();
  }, 100);
});

// 加载BPMN图后也需初始化禁用状态
modeler.importXML(yourBpmnXml).then(() => {
  disablePanelControls();
});

// 封装禁用逻辑函数
function disablePanelControls() {
  // 禁用所有输入框、下拉框
  const inputs = document.querySelectorAll('#properties-panel-container input, #properties-panel-container select');
  inputs.forEach(el => {
    el.disabled = true;
    el.classList.add('disabled-control');
  });

  // 禁用添加/删除类按钮
  const buttons = document.querySelectorAll('#properties-panel-container button.bio-properties-panel-add-entry, #properties-panel-container button.bio-properties-panel-remove-entry');
  buttons.forEach(btn => {
    btn.disabled = true;
    btn.classList.add('disabled-btn');
  });
}

搭配CSS优化禁用样式：

.disabled-control {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.disabled-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

方案二：自定义属性面板模块，全局控制只读状态 #

通过扩展BPMN.js的属性面板模块，从底层覆盖控件渲染逻辑，让查看模式下所有控件默认只读。

实现代码 #

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

// 自定义只读属性面板模块
const ReadOnlyPropertiesModule = {
  __init__: [ 'readOnlyPropertiesProvider' ],
  readOnlyPropertiesProvider: [ 'type', ReadOnlyPropertiesProvider ]
};

function ReadOnlyPropertiesProvider(propertiesPanel, translate) {
  // 获取Camunda平台默认属性提供器
  const defaultProvider = propertiesPanel._providers.find(p => p.id === 'camunda-platform');
  
  // 覆盖分组获取逻辑，修改所有控件为只读
  const originalGetGroups = defaultProvider.getGroups;
  defaultProvider.getGroups = function(element) {
    const groups = originalGetGroups(element);
    
    groups.forEach(group => {
      group.entries.forEach(entry => {
        // 禁用输入框、下拉框
        if (entry.component) {
          entry.component.props.disabled = true;
        }
        // 空实现添加/删除方法，阻止操作
        if (entry.addEntry) entry.addEntry = () => {};
        if (entry.removeEntry) entry.removeEntry = () => {};
      });
    });
    
    return groups;
  };
  
  propertiesPanel.registerProvider(defaultProvider);
}

ReadOnlyPropertiesProvider.$inject = [ 'propertiesPanel', 'translate' ];

初始化Modeler时根据模式加载模块：

// 根据当前模式组装模块列表
const additionalModules = [
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule,
  ElementTemplatesPropertiesProviderModule,
  DisableModeling
];

if (isViewMode) {
  additionalModules.push(ReadOnlyPropertiesModule);
}

const modeler = new Modeler({
  // 其他配置项
  additionalModules: additionalModules
});

方案三：CSS全局禁用（快速实现） #

如果不需要精细控制，直接用CSS禁用属性面板的交互元素，同时保留文本可查看：

#properties-panel-container input,
#properties-panel-container select,
#properties-panel-container button {
  pointer-events: none;
  opacity: 0.7;
  background-color: #f0f0f0;
}

#properties-panel-container input,
#properties-panel-container select {
  user-select: text; /* 保留文本选中能力 */
}

方案对比 #

• 方案一：快速改造，无需修改BPMN.js核心，兼容性好，适合已有项目快速适配；
• 方案二：底层控制，避免DOM操作延迟问题，代码更优雅；
• 方案三：实现成本最低，但对特殊控件可能需要调整选择器。

内容的提问来源于stack exchange，提问作者Sridhar Paiya