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) {
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.loadaExtension() を呼び出すのが確実です。
ここでは、MyAwesomeExtension Extension に options (Extension にカスタムパラメータ)を渡しながらロードする例を示します。
_viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onViewerGeometryLoaded);
function onViewerGeometryLoaded(event) {
viewer.loadExtension('MyAwesomeExtension', { param1: 'value1' });
}
次回は、このスケルトンを変更して、実際の運用に近づけた実装をご紹介します。
By Toshiaki Isezaki
コメント