FMB Viewer

Appearance

<fmb-view-nav> ​

视图导航器(画布左上角)——回答「我在看哪个视图」。它把 viewer.views 的视图集包装成一个可翻页的胶囊:‹ 2/5 爆炸图 ›,点中间展开视图列表,还能自动依次播放。

‹ › 常驻而不是收进下拉,是因为翻页在分享场景里是高频动作,「开下拉再选」两次点击太贵;计数 2/5 本身承担可发现性,所以也不必摊开一条缩略图。

用户转动相机或改了显隐后,组件会转成琥珀色的「已调整」态并给出复位入口——视图既是起点也是退路。

模型没有视图 sidecar 时组件不会留白,而是降级为「自由探索」胶囊 + 标准视角下拉。

最小用法 ​

html
<fmb-viewer-context id="ctx">
  <!-- 容器须 position: relative,组件绝对定位其左上角 -->
  <div class="viewport" style="position: relative">
    <canvas id="canvas"></canvas>
    <fmb-view-nav></fmb-view-nav>
  </div>
</fmb-viewer-context>

视图集通常在加载模型时自动装载(见加载时应用视图),组件订阅 view-changed 自行同步,宿主无需额外接线。

属性 ​

名称类型property / attribute默认值说明
viewerViewer | undefined仅 property(attribute: false)undefined通常经 <fmb-viewer-context> 注入
vocabulary"plain" | "engineering"property + attribute"plain"文案档:plain 走人话(Share 形态),engineering 保留术语(Review 形态)

事件 ​

无对外事件,全部动作直接调用 viewer.views 的 API(next / prev / activate / resetToCurrent)。

行为细节 ​

  • 状态源是 view-changed 事件:切视图、装载 / 清空信封、「已偏离」翻转都由这一个事件驱动,组件不轮询。
  • 偏离态:views.isDirty 为真时点变琥珀 + 显示「已调整」+ 复位入口;点复位调 views.resetToCurrent()。
  • 依次播放:每个视图停留 3.4 秒自动切下一个;到尾停止(不循环)。
  • 无信封降级:views.hasDocument 为假时显示「自由探索」胶囊与标准视角下拉,不是隐藏自己。
  • 定位::host 自带 position: absolute; left: 14px; top: 14px; z-index: 18,必须放在 position: relative 的视口容器内。
  • 外部点击收起:下拉展开时监听 document 的 pointerdown,点到组件外自动收起。

可定制点 ​

胶囊底色与描边走 --fmb-surface / --fmb-border,文字走 --fmb-fg-1 / --fmb-fg-2,偏离态的琥珀色与选中态的强调色分别走告警与 --fmb-accent 令牌。全表见主题定制。

相关 ​