Forge Viewer：簡単な UI カスタマイズ

ここでは、Forge Viewer で比較的簡単にカスタマイズ出来る内容についてご紹介しておきます。

まずは、一番よくあるのが、ビューア領域のツールバーを含めたユーザ インタフェース関連のご質問です。Forge Viewer 標準では、表示されるツールバーやパレット ダイアログは、背景が黒い半透明で表示される「ダーク テーマ」が既定値になっています。BIM 360 Docs では、背景が黒い半透明で表示される「ライト テーマ」が既定値になっています。

ダーク テーマとライト テーマの切り替えは、Viewer3D クラスの setTheme メソッドで変更することが出来ます。パラメータとして指定する値は、ダーク テーマが ”dark-theme”、ライト テーマが ”light-theme” です。

_viewer.setTheme("dark-theme"); // ダーク テーマ

標準ツールバーはビューア領域の中央下を既定値として表示されますが、縦に表示させることも出来ます。縦に表示させるには、Viewer3D.toolbar.addClass メソッドで ‘adsk-toolbar-vertical’ クラスを追加することで実現することが出来ます。

_viewer.toolbar.addClass('adsk-toolbar-vertical'); // 縦

_viewer.toolbar.removeClass('adsk-toolbar-vertical'); // 横（縦解除）

この際には、ビューア領域の右側に表示されることになりますが、水平ツールバーも含め、スタイルシートの値を変更して指定することが可能です。この場合、Web ブラウザに搭載されているデベロッパーツールを活用して、ツールバー要素を検索語、指定可能な値や状態を動的に確認することが出来ます。

もし、標準ツールバーの中から、特定のツールセットやボタンを消去したい場合には、デベロッパーツールで対象のツールセットやボタンの id やクラス名を確認後、それらを消去することも出来ます。

例えば、次のコードで標準ツールバー左の ‘navTools’ ツールセットを非表示にすることが出来ます。

_tools = _viewer.toolbar.getControl('navTools');
_tools.setVisible(false);

同じく、次のコードで標準ツールバー右にある ‘settingsTools’ ツールセット内の設定ボタン ‘toolbar-settingsTool’ を非表示にすることが出来ます。

const settingsTools = _viewer.toolbar.getControl('settingsTools');
_tool = settingsTools.getControl('toolbar-settingsTool');
_tool.setVisible(false);

By Toshiaki Isezaki