Forge Viewer：Extension なしのツールバー ボタン

Forge Viewer：HTML コンテンツ パネルを持つ Extension のブログ記事では、パネルとツールバー ボタンを実装する Extension  をご紹介しましたが、ツールバー ボタンに Extension での実装が必須というわけではありません。例えば、ちょっとした機能をツールバー ボタンで切り替えるだけなら、Extension なしで実装したほうが便利な場合があります。もちろん、そのような実装も可能です。

下記は、新しく作成したツールバー ‘UtilitiesToolbar’ に新しいボタンを追加して、クリック毎に Forge Viewer の UI カラーテーマを切り替える例です。

var css = [
    '.ThemeSwitcherToolbarButton {',
    ' background-image: url(/images/icon_theme.png);',
    ' background-size: 24px;',
    ' background-repeat: no-repeat;',
    ' background-position: center;',
    '}'
].join('\n');
$(' < style type="text/css">' + css + ' ').appendTo('head');
var button = new Autodesk.Viewing.UI.Button('ThemeSwitchToolbarButton');
button.onClick = function (e) {
    console.log(_viewer.theme);
    if (_viewer.theme === 'light-theme') {
        _viewer.setTheme('dark-theme');
        _viewer.theme = 'dark-theme';
    } else {
        _viewer.setTheme('light-theme');
        _viewer.theme = 'light-theme';
    }
};
button.addClass('ThemeSwitcherToolbarButton');
button.setToolTip('Theme Switcher');
var subToolbar = new Autodesk.Viewing.UI.ControlGroup('UtilitiesToolbar');
subToolbar.addControl(button);
_viewer.toolbar.addControl(subToolbar);

Extension での実装かに関係なく、ツールバー ボタンを追加する場合には、新規に作成したツールバーにボタンを追加するのか、既存のツールバーにボタンを追加するのか、を選択することが出来ます。

Forge Viewer：簡単な UI カスタマイズ でも触れたように、ツールバーの id を利用してツールバーを探して、ボタンを追加するだけです。Forge Viewer：HTML コンテンツ パネルを持つ Extension で実装した ‘UtilitiesToolbar’ にボタンを追加すると、次のようになります。

var subToolbar = _viewer.toolbar.getControl('UtilitiesToolbar');
if (subToolbar === null) {
    subToolbar = new Autodesk.Viewing.UI.ControlGroup('UtilitiesToolbar');
    subToolbar.addControl(button);
    _viewer.toolbar.addControl(subToolbar);
} else {
    subToolbar.addControl(button);
}

既存ツールバーの id は、もちろん、デベロッパー ツールで確認することが出来ます。

By Toshiaki Isezaki