Forge Viewer：HTML コンテンツ パネルを持つ Extension

Forge Viewer：ツールバーとパネルを持つスケルトン Extension で作成したスケルトン Extension のパネルにHTML コンテンツを用意して、アイコン画像付きのツールバー ボタンから表示/非表示するよう、 Extension を拡張してみたいと思います。

---

パネルの実装

Forge Viewer 内に表示されるコンテンツは、HTML  として定義したユーザ インタフェースと、ユーザ インタフェースのイベント処理関数を内包する必要があります。

まずは、Viewing.Extension.ViewControl.js ファイルを新規作成して、ViewControlPanel となる次のコードを記入します。

// *******************************************
// View Control Panel
// *******************************************
function ViewControlPanel(viewer, container, id, title, options) {
    this.viewer = viewer;
    Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
    var _myView = viewer.getState();
    // the style of the docking panel
    // use this built-in style to support Themes on Viewer 4+
    this.container.classList.add('docking-panel-container-solid-color-a');
    this.container.style.top = "10px";
    this.container.style.left = "10px";
    this.container.style.width = "240px";
    this.container.style.height = "250px";
    this.container.style.resize = "auto";
    // this is where we should place the content of our panel
    var div = document.createElement('div');
    // and may also append child elements...
    var html = ['< div id="controls" style="position:absolute; width:100%">',
        ' < div style="position:absolute; top:10px; left:10px">',
        '  < button class="docking-panel-tertiary-button" type="button" id="register" style="width:75px; height:30px">ビュー登録',
        '  < button class="docking-panel-tertiary-button" type="button" id="restore" style="width:75px; height:30px">ビュー復元',
        ' < /div>',
        ' < div style="position:absolute; top:50px; left:30px">',
        '  < button class="docking-panel-tertiary-button" id="zoomin" style="position:absolute; top:0px; left:60px; width:30px">∧',
        '  < button class="docking-panel-tertiary-button" id="zoomout" style="position:absolute; top:80px; left:60px; width:30px">∨',
        '  < button class="docking-panel-tertiary-button" id="turnright" style="position:absolute; top:40px; left:140px; width:30px">>',
        '  < button class="docking-panel-tertiary-button" id="turnleft" style="position:absolute; top:40px; left:-20px; width:30px"><',
        '  < input id="step" style="position:absolute; top:52px; left:65px; width:50px; height:20px" size="5" maxlength="4" value="100" type="text" />',
        ' < /div>',
        '< /div>'
    ].join('\n');
    div.innerHTML = html;
    this.container.appendChild(div);

    // Register View
    $(document).on("click", "[id^='register']", function () {
        _myView = viewer.getState();
    });

    // Restore View
    $(document).on("click", "[id^='restore']", function () {
        _viewer.restoreState(_myView);
    });

    // Zoom In
    $(document).on("click", "[id^='zoomin']", function () {
        viewer.canvas.focus();
        console.log(viewer.getActiveNavigationTool());
        viewer.setActiveNavigationTool("dolly");
        var step = document.getElementById('step').value * -1.0;
        var cam = viewer.getCamera();
        cam.translateX(0);
        cam.translateY(0);
        cam.translateZ(step);
        viewer.impl.syncCamera();
        viewer.setActiveNavigationTool("orbit");
    });

    // ↓ Zoom Out
    $(document).on("click", "[id^='zoomout']", function () {
        viewer.canvas.focus();
        viewer.setActiveNavigationTool("dolly");
        var step = document.getElementById('step').value;
        var cam = viewer.getCamera();
        cam.translateX(0);
        cam.translateY(0);
        cam.translateZ(step);
        viewer.impl.syncCamera();
        viewer.setActiveNavigationTool("orbit");
    });

    // Turn Right
    $(document).on("click", "[id^='turnright']", function () {
        viewer.canvas.focus();
        viewer.setActiveNavigationTool("orbit");
        var step = document.getElementById('step').value * -1.0;
        var cam = viewer.getCamera();
        cam.translateX(step);
        cam.translateY(0);
        cam.translateZ(0);
        viewer.impl.syncCamera();
    });

    // Turn Left
    $(document).on("click", "[id^='turnleft']", function () {
        viewer.canvas.focus();
        viewer.setActiveNavigationTool("orbit");
        var step = document.getElementById('step').value;
        var cam = viewer.getCamera();
        cam.translateX(step);
        cam.translateY(0);
        cam.translateZ(0);
        viewer.impl.syncCamera();
    });
}
ViewControlPanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
ViewControlPanel.prototype.constructor = ViewControlPanel;

---

Extension の実装

上記のパネルを実装することになる ViewControlExtension Extension を実装します。

ここでは、ViewControlPanel 実装の下に、次のコードを追記します。

ViewControlPanel パネルを表示するツールバー ボタンには、サーバー上の images フォルダの icon_ready.png が設定されてます。このアイコン画像は、ツールバー スタイル（CSS）に動的に追加されている点に注意してください。

// *******************************************
// View Control Extension
// *******************************************
function ViewControlExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
    this.panel = null;
}
ViewControlExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
ViewControlExtension.prototype.constructor = ViewControlExtension;
ViewControlExtension.prototype.load = function () {
    if (this.viewer.toolbar) {
        // Toolbar is already available, create the UI
        this.createUI();
    } else {
        // Toolbar hasn't been created yet, wait until we get notification of its creation
        this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
        this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    }
    return true;
};
ViewControlExtension.prototype.onToolbarCreated = function () {
    this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    this.onToolbarCreatedBinded = null;
    this.createUI();
};
ViewControlExtension.prototype.createUI = function () {
    var viewer = this.viewer;
    var panel = this.panel;
    // button to show the docking panel
    var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showViewControlPanel');
    toolbarButtonShowDockingPanel.onClick = function (e) {
        // if null, create it
        if (panel === null) {
            panel = new ViewControlPanel(viewer, viewer.container,
                'viewControlPanel', 'View Control');
        }
        // show/hide docking panel
        panel.setVisible(!panel.isVisible());
    };
    // ViewControlToolbarButton CSS class should be defined on your .css file
    // you may include icons, below is a sample class:
    var css = [
        '.ViewControlToolbarButton {',
        ' background-image: url(/images/icon_ready.png);',
        ' background-size: 24px;',
        ' background-repeat: no-repeat;',
        ' background-position: center;',
        '}'
    ].join('\n');
    $('< style type="text/css">' + css + '< /style>').appendTo('head');
    toolbarButtonShowDockingPanel.addClass('ViewControlToolbarButton');
    toolbarButtonShowDockingPanel.setToolTip('View Control');
    // SubToolbar
    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('UtilitiesToolbar');
    this.subToolbar.addControl(toolbarButtonShowDockingPanel);
    viewer.toolbar.addControl(this.subToolbar);
};
ViewControlExtension.prototype.unload = function () {
    this.viewer.toolbar.removeControl(this.subToolbar);
    return true;
};
Autodesk.Viewing.theExtensionManager.registerExtension('Viewing.Extension.ViewControl', ViewControlExtension);

---

Extension のロード

Viewing.Extension.ViewControl.js ファイルに実装した Extension の ID は、Viewing.Extension.ViewControl です。Extension のロードにも、この Extension ID を使用します。

_viewer.loadExtension('Viewing.Extension.ViewControl');

Extension で実装した ViewControlPanel パネルで配置されたボタンの クリック ハンドラに、JQuery を使用している点に注意してください。このため、ビューアを実装する本体の HTML には、Viewing.Extension.ViewControl.js ファイルとともに、JQuery ライブラリの参照記述も必要になります。

< script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js">
< script type="text/javascript" src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js">
< script type="text/javascript" src="index.js">
< script type="text/javascript" src="Viewing.Extension.ViewControl.js">

作成した Extension のツールバー ボタンとパネルは、Forge Viewer のテーマにも対応しているので、ライトテーマでは次のようになるはずです。

---

By Toshiaki Isezaki