Forge Viewer：プロパティパネル

Forge Viewer Extension の作成 などのブログ記事で、過去に Forge Viewer 上にプロパティを表示する例をご紹介したことがあります。

Forge Viewer は、その後も更新され続けていて、現在の最新バージョンでは、複数オブジェクトの選択（ノードの選択）もサポートされていて、同記事でご紹介したエクステンション（Extension）内のコードが動作しなくなっています。そこで、ここでは、代替となるエクステンションコードをご紹介しておきたいと思います。

class WorkshopExtension extends Autodesk.Viewing.Extension {

constructor(viewer, options) {

super(viewer, options);

}

load() {

this.viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (ev) => {

if (ev.extensionId === 'Autodesk.PropertiesManager') {

const ext = this.viewer.getExtension('Autodesk.PropertiesManager');

ext.setPanel(new CustomPropertyPanel(this.viewer));

}

});

return true;

}

unload() {

var ext = this.viewer.getExtension('Autodesk.PropertiesManager');

ext.setDefaultPanel();

return true;

}

}

class CustomPropertyPanel extends Autodesk.Viewing.Extensions.ViewerPropertyPanel {

constructor(viewer) {

super(viewer);

}

setAggregatedProperties(props) {

super.setAggregatedProperties(props);

var _this = this;

this.addProperty('dbId', this.propertyNodeId, 'デバッグ情報');

this.viewer.getProperties(this.propertyNodeId, function (props2) {

_this.addProperty("externalId", props2.externalId, 'デバッグ情報');

})

}

}

Autodesk.Viewing.theExtensionManager.registerExtension('WorkshopExtension', WorkshopExtension);

このエクステンションでは、既存の "Autodesk.PropertiesManager" エクステンションを流用してオブジェクトプロパティ（PropertyPanel オブジェクト）を表示しているほか、「デバッグ情報」と題して、PropertyPanel.addProperty() メソッドで、追加のプロパティ dbId と externalId を表示します。ここで使用しているのが、従来使用していた setProperties() メソッドではなく、複数モデルのプロパティに対応する setAggregatedProperties() メソッドになっている点にご注意ください。

上記コードをエクステンションとして動作させるためには、まず、WorkshopExtension.js の名前でエンコード付きで保存してみてください。（ANSI 形式で保存すると「デバッグ情報」の文字が文字化けしてしまいます。）

続いて、Forge Viewer のカンバスを定義する HTML ファイルヘッダーセクション（<head>～</head>）ので、次のように WorkshopExtension.js を参照します。

<script type="text/javascript" src="/WorkshopExtension.js"></script>

エクステンションを Viewer にロードする部分は、"Autodesk.PropertiesManager" エクステンションのロードの確認処理を EXTENSION_LOADED_EVENT イベントで実装している都合で、Viewer の初回表示時に機能しない場合があるため、Autodesk.Viewing.Document.load 成功時のコールバック関数でロードしてみてください。

：

// Load viewable

var documentId = 'urn:' + urn;

Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

});

function onDocumentLoadSuccess(viewerDocument) {

：

：
_viewer.loadExtension("WorkshopExtension");

：

：