<fmb-model-tree>

BOM 结构树面板。从引擎模型 API 读出装配层级渲染成树:支持展开/折叠、名称过滤、逐行可见性切换;点选行与引擎选中状态双向同步;装配行显示后代零件计数徽标。

最小用法

<fmb-viewer-context id="ctx">
  <fmb-model-tree></fmb-model-tree>
  <canvas id="canvas"></canvas>
</fmb-viewer-context>

宽度由宿主布局决定(组件自身 display: flex 纵向撑满),阅读器 app 的做法是放进一个 width: var(--fmb-lpanel-w) 的侧栏容器。

属性

名称	类型	property / attribute	默认值	说明
viewer	Viewer | undefined	仅 property(attribute: false)	undefined	通常经 <fmb-viewer-context> 注入(@consume),也可由宿主直接赋值

事件

无对外事件,行为直接作用于 Viewer 实例(点选调 viewer.selection,眼睛按钮调 viewer.model)。

行为细节

• 树的构建:从 model.getRootNodeId() 出发,按 getNodeInfo().childrenIds 深度优先生成可见行。meshId == null 的节点视为装配(蓝色装配图标),其余为零件(立方体图标)。
• 展开/折叠:点击行首 caret 切换;接到 viewer 或引擎触发 model-skeleton-ready 时自动展开根节点(其余折叠)。
• 名称过滤:输入框做大小写不敏感的子串匹配,命中节点连同祖先链一起保留;过滤生效期间所有保留行强制展开,清空过滤后恢复手动展开状态。
• 选中双向同步:点击行调 viewer.selection.apply(..., SelectionMode.Set) 单选该节点;同时订阅引擎 selection-changed,把选中集合里 Node 类型的条目高亮(画布拾取、代码调用引起的选中变化都会同步回树)。
• 可见性切换:行尾眼睛按钮调 model.setNodesVisibility([id], !当前值);隐藏行的名称与图标半透明斜体,眼睛按钮常显并染成主色。刷新由引擎 visibility-changed 事件驱动——右键菜单 Isolate/Show all、代码调用引起的可见性变化同样实时反映到眼睛图标。
• 零件计数徽标:有子节点的装配行显示其后代中 meshId != null 叶子的数量(即零件数),计数结果按节点缓存。
• 订阅的引擎事件:selection-changed(同步选中)、model-skeleton-ready(展开根 + 重渲染)、model-loaded(重渲染)、visibility-changed(可见性变化重渲染)。组件移除或更换 viewer 时自动退订。
• 无虚拟滚动:当前实现渲染全部展开行(折叠分支不渲染);超大模型建议保持深层折叠,或配合过滤使用。
• 空态:viewer 未注入或模型未加载(无根节点)时,只渲染标题与过滤框,树体为空。

可定制点

面板底色/文字/边框走 --fmb-surface、--fmb-fg-1/2/3、--fmb-border;选中行高亮走 --fmb-accent、--fmb-accent-soft、--fmb-accent-fg;过滤框与徽标底色走 --fmb-surface-2,hover 底色走 --fmb-surface-hover;字体与基准字号走 --fmb-font、--fmb-base-fs。全表与覆写方式见主题定制。