Appearance
<fmb-viewer-context>
接线根组件(provider)。它持有 Viewer 实例,经 @lit/context 注入所有后代 viewer-ui 组件;宿主创建引擎后给它的 viewer property 赋值一次,树、工具条、属性面板等全部自动激活。它自身不渲染任何 UI——只是把子内容原样放在 light DOM 里。
最小用法
html
<fmb-viewer-context id="ctx">
<!-- 任意布局,viewer-ui 组件放在任意深度都能拿到 viewer -->
<fmb-model-tree></fmb-model-tree>
<canvas id="canvas"></canvas>
</fmb-viewer-context>ts
const viewer = await Viewer.create(canvas);
(document.getElementById("ctx") as FmbViewerContext).viewer = viewer;属性
| 名称 | 类型 | property / attribute | 默认值 | 说明 |
|---|---|---|---|---|
viewer | Viewer | undefined | 仅 property(attribute: false) | undefined | 要注入的引擎实例;对象值无法作为 HTML 属性序列化 |
事件
无对外事件。组件本身也不消费引擎事件——它只做依赖注入。
行为细节
- light DOM 渲染:
createRenderRoot()返回this,即不创建 shadow root,子内容保持在 light DOM。这保证后代组件发出的context-request事件能可靠冒泡到 provider。 - 后到的 viewer 也能生效:所有 consumer 组件以
subscribe: true订阅,viewer赋值(或更换)时会推送给全部后代;组件先挂载、引擎后创建是受支持的时序,注入前各组件渲染空态。 - 可重复赋值:给
viewer赋新实例即整体切换引擎,后代组件会各自重新接线(退订旧实例事件、订阅新实例)。
可定制点
本组件无样式、不消费任何 --fmb-* token(light DOM,无 shadow root)。布局样式直接写在宿主 CSS 上即可;token 体系见主题定制。