如何在mxGraph中以编程方式添加自定义属性？含侧边栏场景

嘿，看起来你已经搞定了自定义侧边栏组和带下拉菜单的右侧面板UI，接下来要把用户选的下拉值关联到选中形状的自定义属性上对吧？结合你提到的Format.js里的代码逻辑，我给你梳理下具体实现步骤：

1. 监听下拉菜单的选择事件 #

首先得给你的下拉菜单绑定选择变更事件，这样用户选值时我们能立刻拿到选中项。如果是原生HTML的<select>元素，代码大概是这样：

// 假设你的下拉菜单DOM元素id是customShapePropertyDropdown
document.getElementById('customShapePropertyDropdown').addEventListener('change', (e) => {
  const selectedValue = e.target.value;
  // 调用方法把值同步到选中形状
  this.setShapeCustomProperty(selectedValue);
});

如果是你自己封装的下拉组件，就用组件对应的事件监听方式（比如React的onChange、Vue的@change），核心都是获取选中值后触发后续逻辑。

2. 封装形状属性更新方法 #

在Format.js里，你已经知道用this.format.getSelectionState()获取选中状态，那我们把设置属性的逻辑封装成一个方法，确保逻辑清晰且可复用：

setShapeCustomProperty(selectedValue) {
  const selectionState = this.format.getSelectionState();
  // 先判断是否有选中的形状，避免空操作报错
  if (selectionState && selectionState.style) {
    // 将下拉选中值赋值给你的自定义属性myProperty
    selectionState.style.myProperty = selectedValue;
    // 关键！调用applySelectionState保存修改，不然刷新后属性会丢失
    this.format.applySelectionState(selectionState);
    // 如果需要让形状立刻显示属性变化（比如关联了样式渲染），触发重绘
    this.format.refresh();
  }
}

3. 同步选中形状与下拉菜单的值 #

还要考虑用户切换选中形状时，下拉菜单要自动显示当前形状的myProperty值，这样交互更连贯：

// 监听编辑器的选中状态变化事件
this.format.on('selectionChange', () => {
  const selectionState = this.format.getSelectionState();
  const dropdown = document.getElementById('customShapePropertyDropdown');
  if (selectionState && selectionState.style && dropdown) {
    // 将下拉菜单的值同步为当前形状的自定义属性值，默认空字符串
    dropdown.value = selectionState.style.myProperty || '';
  }
});

额外注意点 #

• 如果需要这个自定义属性在文档导出/导入时不丢失，要确保编辑器的序列化逻辑包含myProperty，一般需要在编辑器配置里添加自定义属性白名单，或者修改序列化方法把这个属性包含进去。
• 如果你给myProperty设置的是复杂类型（比如对象），记得处理序列化和反序列化的兼容性问题。

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