Autodesk Developer Blog : Forge Viewer：ツールバーとパネルを持つスケルトン Extension

Extension の作成は、ビューアにカスタムコードを追加するための推奨アプローチです。ほとんどの場合、Extension の機能を利用するユーザインタフェースとして、専用のパネルが実装されています。

また、パネルを表示するためのツールバーボタンが用意されています。Forge ポータルからリンクされてブログ記事 Extension Skeleton: Toolbar & Docking Panel では、Extension がパネルとツールバーボタンを実装する方法が紹介されているので、Forge Viewer v7 での使用に必要な情報を追記しながら、和訳するかたちでご紹介しておきたいと思います。

パネルの実装

まず、Autodesk.Viewing.UI.DockingPanel を使用して専用パネルを作成します。メインコンテナがパネルをホストし、document.createElement(‘div’) で動的に生成した <div>～</div> がコンテンツを配置する場所になっているに注意してください。あくまでスケルトンとしてパネルを作成したいので、パネル内のコンテンツには「My content here」のテキストのみが表示されます。なお、ここで使用される CSS クラスは、Viewer 4+でユーザインタフェースのライトテーマとダークテーマに対応すます。

MyAwesomeExtension.js ファイルを作成して、次のコードを記述します（貼り付けます）。

			
// *******************************************
// My Awesome (Docking) Panel
// *******************************************
function MyAwesomePanel(viewer, container, id, title, options) {
    this.viewer = viewer;
    Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
    
    // 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 = "auto";
    this.container.style.height = "auto";
    this.container.style.resize = "auto";
    
    // this is where we should place the content of our panel
    var div = document.createElement('div');
    div.style.margin = '20px';
    div.innerText = "My content here";
    this.container.appendChild(div);
    
    // and may also append child elements...
}
MyAwesomePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
MyAwesomePanel.prototype.constructor = MyAwesomePanel;

		

Extension の実装

上記で定義したパネルを持つ Extension を実装します。MyAwesomeExtension.js ファイルの最後に、次のコードを追記（貼り付け）してください。は、パネルを表示するツールバーボタン自身のスタイル（CSS）は、.cssファイルで定義する必要があります（下記コードではコメントになている部分）。

			
// *******************************************
// My Awesome Extension
// *******************************************
function MyAwesomeExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
    this.panel = null;
}
MyAwesomeExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
MyAwesomeExtension.prototype.constructor = MyAwesomeExtension;
MyAwesomeExtension.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;
};
MyAwesomeExtension.prototype.onToolbarCreated = function () {
    this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    this.onToolbarCreatedBinded = null;
    this.createUI();
};
MyAwesomeExtension.prototype.createUI = function () {
    var viewer = this.viewer;
    var panel = this.panel;
    
    // button to show the docking panel
    var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showMyAwesomePanel');
    
    toolbarButtonShowDockingPanel.onClick = function (e) {
        // if null, create it
        if (panel === null) {
            // Note: MyAwesomePanel function must be defined elsewhere in your code
            panel = new MyAwesomePanel(viewer, viewer.container,
                'awesomeExtensionPanel', 'My Awesome Extension');
        }
        // show/hide docking panel
        panel.setVisible(!panel.isVisible());
    };
    
    // myAwesomeToolbarButton CSS class should be defined on your .css file
    // you may include icons, below is a sample class:
    /*
    .myAwesomeToolbarButton {
        background-image: url(/img/myAwesomeIcon.png);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    }
    */
    toolbarButtonShowDockingPanel.addClass('myAwesomeToolbarButton');
    toolbarButtonShowDockingPanel.setToolTip('My Awesome extension');
    
    // SubToolbar
    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('MyAwesomeAppToolbar');
    this.subToolbar.addControl(toolbarButtonShowDockingPanel);
    viewer.toolbar.addControl(this.subToolbar);
};
MyAwesomeExtension.prototype.unload = function () {
    this.viewer.toolbar.removeControl(this.subToolbar);
    return true;
};
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);

		

Extension のロード

Extension を使用するには、ビューアへのロードが必須です。ただし、ビューアへのロードの前に、Extension を実装する JavaScript ファイル（ここでは MyAwesomeExtension.js ファイル）をビューア本体の HTML ファイルで参照しておく必要があります。

<script src="your_folder/MyExtensionFileName.js"></script>

Extension のロードにはいくつかの方法がありますが、ドキュメントロードの成功時に呼び出される onDocumentLoadSuccess() でロードさせるのが一般的です。Extension が表示するドキュメントデータにアクセスする場合には、onDocumentLoadSuccess() でイベントハンドラ登録した GEOMETRY_LOADED_EVENT イベントで viewer3D.loadExtension() を呼び出すのが確実です。

ここでは、MyAwesomeExtension Extension に options （Extension にカスタムパラメータ）を渡しながらロードする例を示します。

			
_viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onViewerGeometryLoaded);

			
function onViewerGeometryLoaded(event) {
viewer.loadExtension('MyAwesomeExtension', { param1: 'value1' });
}

次回は、このスケルトンを変更して、実際の運用に近づけた実装をご紹介します。

By Toshiaki Isezaki

Forge Viewer：ツールバーとパネルを持つスケルトン Extension

Share this:

Like this:

Discover more from Autodesk Developer Blog