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);
        }