如何基于Viewer SDK的ModelStructurePanel开发自定义扩展？

1. 正确继承并重写父类方法 #

通过ES6类继承创建自定义面板，重写关键方法时必须先调用父类对应方法，确保原有功能不丢失：

class CustomModelStructurePanel extends Autodesk.Viewing.Extensions.ModelStructurePanel {
    constructor(viewer, panelTitle) {
        super(viewer, panelTitle);
        this.currentFilter = ''; // 存储当前筛选条件
    }

    // 初始化方法，先执行父类逻辑再添加自定义操作
    initialize() {
        super.initialize();
        // 可在此添加自定义事件监听或数据初始化
    }
}

2. 在保留原有元素的基础上添加筛选控件 #

ModelStructurePanel的工具栏和内容区分开渲染，推荐重写renderToolbar方法插入筛选下拉框，既保留原有SearchBox，又新增自定义筛选：

renderToolbar(toolbarContainer) {
    // 先渲染原有工具栏（包含默认SearchBox）
    super.renderToolbar(toolbarContainer);

    // 创建筛选下拉框
    const filterDropdown = document.createElement('select');
    filterDropdown.className = 'adsk-viewing-widget adsk-viewing-dropdown';
    filterDropdown.style.marginLeft = '10px';
    // 根据你的.nwd模型属性填充选项
    filterDropdown.innerHTML = `
        <option value="">全部构件</option>
        <option value="Structural Column">结构柱</option>
        <option value="Structural Beam">结构梁</option>
        <option value="Wall">墙体</option>
    `;

    // 绑定筛选变更事件
    filterDropdown.addEventListener('change', (e) => {
        this.currentFilter = e.target.value;
        this.refresh(); // 触发面板节点重新渲染
    });

    // 将下拉框添加到工具栏
    toolbarContainer.appendChild(filterDropdown);
}

3. 结合SearchBox实现复合筛选 #

ModelStructurePanel内置的SearchBox可通过this.searchBox访问，重写shouldIncludeNode方法，结合原有搜索逻辑与自定义筛选条件：

shouldIncludeNode(node) {
    // 先执行原有SearchBox的过滤逻辑
    const isIncludedBySearch = super.shouldIncludeNode(node);
    if (!isIncludedBySearch) return false;

    // 无自定义筛选时直接返回
    if (!this.currentFilter) return true;

    // 根据节点属性执行自定义筛选（需匹配你的模型属性名）
    const props = this.viewer.getProperties(node.dbId);
    return props.properties.some(p => p.displayValue === this.currentFilter);
}

4. 注册并加载自定义扩展 #

创建扩展类替换或新增自定义面板：

class CustomModelBrowserExtension extends Autodesk.Viewing.Extension {
    load() {
        // 注册自定义面板
        this.viewer.registerPanel(CustomModelStructurePanel, 'CustomModelStructurePanel');

        // 替换原有模型浏览器按钮的触发逻辑（可选）
        const modelStructBtn = this.viewer.toolbar.getControl('toolbar-modelStructureTool');
        if (modelStructBtn) {
            modelStructBtn.onClick = () => {
                let panel = this.viewer.getPanel('CustomModelStructurePanel');
                if (!panel) {
                    panel = new CustomModelStructurePanel(this.viewer, '自定义模型浏览器');
                }
                panel.setVisible(true);
            };
        }
        return true;
    }

    unload() {
        this.viewer.unregisterPanel('CustomModelStructurePanel');
        return true;
    }
}

// 注册扩展
Autodesk.Viewing.theExtensionManager.registerExtension('CustomModelBrowserExtension', CustomModelBrowserExtension);

关键注意事项 #

• 模型属性名需与实际.nwd模型匹配：可通过Viewer的getProperties方法或Forge Model Derivative API查看构件属性。
• 避免完全覆盖父类方法：所有重写方法必须先调用super.xxx()，确保原有节点渲染、选中、搜索等功能正常。
• 调试SearchBox逻辑：可通过浏览器开发者工具查看ModelStructurePanel的原型方法，或打印this.searchBox查看其可用API（如getValue()、onSearch()）。

内容的提问来源于stack exchange，提问作者Andrés Martínez