添加自定義屬性到Viewer的屬性面板

這是一個常被提起的問題，第一次是在「添加自定義屬性到Viewer的屬性面板」這篇博客被提出，但因自V4開始，Viewer的CSS有重大變動，致使該方法在新版的 Viewer已沒法使用。另外一個相關的是「Viewer屬性檢查器」這篇博客，其是經過創建一個工具欄按鈕的方式來新增面板，它是能夠正常運做的，但它的作法並不是取代現有的屬性面板，不在今天要討論的範圍。

那咱們該怎麼作才能取代現有的屬性面板呢?

事實上，咱們有一個接受內建面板 ViewerPropertyPanel 對象的方法叫 viewer.setPropertyPanel 可使用。所以，最簡單的操做方式是使用 setPropertyPanel 這個方法，再替換 setProperties 這方法的內容。爲了新增更多咱們想要的屬性數據，讓咱們也複寫setNodeProperties 這個接受dbId做爲函數變量的方法，如下是部分程序代碼:

// *******************************************
// Custom Property Panel
// *******************************************
function CustomPropertyPanel(viewer, options) {
    this.viewer = viewer; 
    this.options = options; 
    this.nodeId = -1; // dbId of the current element showing properties
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);
}
CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);
CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;

CustomPropertyPanel.prototype.setProperties = function (properties, options) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options);

    // add your custom properties here
    // for example, let's show the dbId and externalId
    var _this = this;
    // dbId is right here as nodeId
    this.addProperty('dbId', this.nodeId, 'Custom Properties');
    // externalId is under all properties, let's get it!
    this.viewer.getProperties(this.nodeId, function(props){
        _this.addProperty('externalId', props.externalId, 'Custom Properties');
    })
}

CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId);
    this.nodeId = nodeId; // store the dbId for later use
};

爲了方便使用，咱們將之包裝在Viewer擴展中。這裏有篇博客「擴展概念：工具欄與面板」在討論擴充展架的基本概念，這裏咱們只使用它建立擴展的部分(不是工具欄或面板的部分)。如下擴展代碼使用剛纔創建的面板，並經過 setPropertyPanel 使之與 Viewer 連結。(這個擴充將負責註冊和取消註冊咱們的自定義屬性面板。)

// *******************************************
// Custom Property Panel Extension
// *******************************************
function CustomPropertyPanelExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);

    this.viewer = viewer;
    this.options = options;
    this.panel = null;
}

CustomPropertyPanelExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
CustomPropertyPanelExtension.prototype.constructor = CustomPropertyPanelExtension;

CustomPropertyPanelExtension.prototype.load = function () {
    this.panel = new CustomPropertyPanel(this.viewer, this.options);
    this.viewer.setPropertyPanel(this.panel);
    return true;
};

CustomPropertyPanelExtension.prototype.unload = function () {
    this.viewer.setPropertyPanel(null);
    this.panel = null;
    return true;
};

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

最後一步是載入這個擴展。若是您的應用程序依照「基本應用程序教學」創建的，在你的程序代碼裏會有一行像這個樣子的，這裏咱們只需加入擴充設定便可：

// 從這樣
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);

// 改爲這樣
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['CustomPropertyPanelExtension'] });