Skip to content

<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默认值说明
viewerViewer | 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 体系见主题定制