如何在Forge Viewer中重新排序上下文菜单项并添加分组分隔线？

一、重新排序上下文菜单项 #

可以通过Viewer的上下文菜单扩展API实现菜单项排序：

• 首先获取上下文菜单扩展实例：const contextMenuExt = viewer.getExtension('Autodesk.Viewing.ContextMenu')
• 拿到菜单项配置数组后，根据自定义规则调整元素顺序（比如按优先级、标签名称排序）
• 修改完成后重新设置菜单项并刷新菜单

示例代码：

const contextMenuExt = viewer.getExtension('Autodesk.Viewing.ContextMenu');
// 假设customMenuItems是包含所有菜单项的数组，按优先级字段排序
customMenuItems.sort((a, b) => a.priority - b.priority);
// 重新设置菜单项
contextMenuExt.setMenuItems(customMenuItems);

二、添加分隔线实现分组 #

在菜单项配置数组中插入类型为'separator'的项，即可在菜单中显示分隔线实现分组：

• 在需要分隔的两组菜单项之间加入{ type: 'separator' }

示例代码：

const customMenuItems = [
  { id: 'group1-item1', label: '第一组选项1', callback: () => { /* 逻辑处理 */ } },
  { id: 'group1-item2', label: '第一组选项2', callback: () => { /* 逻辑处理 */ } },
  { type: 'separator' }, // 分隔线
  { id: 'group2-item1', label: '第二组选项1', callback: () => { /* 逻辑处理 */ } },
  { id: 'group2-item2', label: '第二组选项2', callback: () => { /* 逻辑处理 */ } }
];
const contextMenuExt = viewer.getExtension('Autodesk.Viewing.ContextMenu');
contextMenuExt.setMenuItems(customMenuItems);

注意事项 #

• 若要修改Viewer自带的菜单项，需先获取原有菜单项数组，调整顺序后插入分隔线，再重新设置
• 所有菜单操作需在Viewer初始化完成后执行，比如绑定Autodesk.Viewing.GEOMETRY_LOADED_EVENT事件后处理

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