关于Autodesk.DocumentBrowser样式调整及自动激活定位的技术问询

一、调整样式匹配BIM360 Sheets & Views标签页 #

Autodesk.DocumentBrowser的UI支持通过自定义CSS覆盖默认样式，以此匹配BIM360 Sheets & Views的视觉风格：

• 用浏览器开发者工具定位DocumentBrowser组件的CSS类名（如.adsk-document-browser-tabs、.adsk-document-browser-tab-item等）
• 编写自定义CSS规则，修改标签页的背景色、字体、选中状态样式、侧边栏布局等。示例：

.adsk-document-browser-tabs {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
.adsk-document-browser-tab-item.active {
  border-bottom: 2px solid #0078d4;
  color: #0078d4;
}

二、启动Viewer时自动激活并固定DocumentBrowser #

通过Viewer API可以控制DocumentBrowser的状态，实现启动时自动激活并固定在左侧：

1. 监听Viewer的扩展加载完成事件，确保DocumentBrowser扩展已初始化
2. 获取扩展实例后，调用对应方法激活面板并设置固定状态：

viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (event) => {
  if (event.extensionId === 'Autodesk.DocumentBrowser') {
    const docBrowser = viewer.getExtension('Autodesk.DocumentBrowser');
    // 显示面板
    docBrowser.showPanel();
    // 将面板固定在左侧
    docBrowser.panel.setState(Autodesk.Viewing.UI.Panel.State.FIXED_LEFT);
  }
});

若需更早触发，可在Viewer初始化完成后直接获取扩展（需确保扩展已加载）：

viewer.initialize().then(() => {
  const docBrowser = viewer.getExtension('Autodesk.DocumentBrowser');
  if (docBrowser) {
    docBrowser.showPanel();
    docBrowser.panel.setState(Autodesk.Viewing.UI.Panel.State.FIXED_LEFT);
  }
});

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