自訂義 Forge Viewer ModelStructurePanel 的交互行為

xialong 發(fā)布于2019-08-22 13:55 / 2796人閱讀

摘要：在官方釋出版的同時(shí)發(fā)布了新版本的，這個(gè)面版已被整個(gè)重新改寫，這次更新也加入一些新的交互行為，下面我們將會稍作解釋。

這禮拜的小技巧是關(guān)于如何以不加入太多的 JavaScript 的方式自訂義 ModelStructurePanel 的交互行為，這個(gè)小技巧受到這篇問與答的啟發(fā)：Prevent zoom in Forge viewer when clicking in Model Browser。

在官方釋出 3.2.1 版 Viewer 的同時(shí)發(fā)布了新版本的 ModelStructurePanel，這個(gè)面版已被整個(gè)重新改寫，這次更新也加入一些新的交互行為，下面我們將會稍作解釋。那回到主題，如果想要自定義用戶點(diǎn)擊面板上節(jié)點(diǎn)時(shí)的行為時(shí)要怎么做呢？

但在開始自定這些交戶行為前，我們先來看看 Autodesk.Viewing.Extensions.ViewerModelStructurePanel 在 Viewer3D.js 里是如何被實(shí)作的。首先看 onClick 的部份，我們可以看到這個(gè)方法會去檢查輔助按鍵 [Ctrl, Shift, Alt] 并將其加到事件里頭，所以我們可以通過組合點(diǎn)擊（click）和這些輔助按鍵的方式來實(shí)作、處理不同的交互行為。

ViewerModelStructurePanel.prototype.onClick = function (node, event) {

  if (this.isMac && event.ctrlKey) {
    return;
  }

  var that = this;

  var key = "click";

  if (that.ctrlDown(event)) {
    key += "Ctrl";
  }

  if (event.shiftKey) {
    key += "Shift";
  }

  if (event.altKey) {
    key += "Alt";
  }

  if (this.clickConfig && this.clickConfig[key]) {

    that.handleAction(this.clickConfig[key]["onObject"], node);

  } else {

    this.viewer.select(node);
  }
};

同時(shí)，如果上頭代碼里的 key 與 clickConfig 有匹配，這個(gè)方法會去調(diào)用 handleAction 這個(gè)函數(shù)；而這個(gè) clickConfig 就是用來訂義 ModelStructurePanel 點(diǎn)擊交互行為的設(shè)置對象，它會在面板初始化時(shí)被帶入。

var kDefaultDocStructureConfig = {
  "click": {
    "onObject": ["toggleLeavesSelection"]
  },
  "clickShift": {
    "onObject": ["toggleMultipleLeavesSelection"]
  },
  "clickCtrl": {
    "onObject": ["toggleMultipleLeavesSelection"]
  }
};

function ViewerModelStructurePanel(viewer, title, options) {

  // ... skipping stuff for clarity ...

  this.clickConfig = (options && options.docStructureConfig) 
      ? options.docStructureConfig 
      : kDefaultDocStructureConfig;

這邊是 ` 這個(gè)函數(shù)的實(shí)作，我們可以從這邊看到 ModelStructurePanel` 有哪些默認(rèn)的交互行為：

ViewerModelStructurePanel.prototype.handleAction = function (actionArray, dbId) {

  for (var action in actionArray) {
    switch (actionArray[action]) {
      case "toggleLeavesSelection":
        toggleLeavesSelection(this, dbId);
        break;
      case "toggleMultipleLeavesSelection":
        toggleMultipleLeavesSelection(this, dbId);
        break;
      case "selectOnly":
        this.ignoreNextSelectionChange = true;
        this.viewer.select(dbId);
        break;
      case "deselectAll":
        this.ignoreNextSelectionChange = true;
        this.viewer.select([]);
        break;
      case "selectToggle":
        this.ignoreNextSelectionChange = true;
        this.viewer.toggleSelect(dbId);
        break;
      case "isolate":
        this.viewer.isolate(dbId);
        break;
      case "showAll":
        this.viewer.isolate(null);
        break;
      case "focus":
        this.viewer.fitToView();
        break;
      case "hide":
        this.viewer.hide(dbId);
        break;
      case "show":
        this.viewer.show(dbId);
        break;
      case "toggleVisibility":
        this.viewer.toggleVisibility(dbId);
        break;
    }
  }
};

講到這邊你可能會問，到底要怎么自訂這些點(diǎn)擊交互行為呢？這其實(shí)頗容易的～基于上面講述的內(nèi)容，你可以通過下面的代碼在 Forge Viewer 觸發(fā) Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT 事件時(shí)，將產(chǎn)生一個(gè)新的 ModelStructurePanel 取代 Forge Viewer 默認(rèn)的那一個(gè)。

備注：對 Forge Viewer 有些熟悉的朋友可能知道，默認(rèn)的 ModelStructurePanel 是在這個(gè)事件觸發(fā)時(shí)被建立的。

viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, function() {

    var options = {
      docStructureConfig: {
          click: {
              onObject: ["selectOnly"] //instead of toggleOverlayedSelection
          },
          clickShift: {
            onObject: ["isolate"] //instead of toggleMultipleOverlayedSelection
        },
          clickCtrl: {
          onObject: ["selectToggle"] //instead of toggleMultipleOverlayedSelection
        }
      }
    }

    var customModelStructurePanel =
      new Autodesk.Viewing.Extensions.ViewerModelStructurePanel(
        viewer, "Browser", options)

    viewer.setModelStructurePanel(customModelStructurePanel)
  })

最后，當(dāng)然如果 ModelStructurePanel 自帶的交互行為不滿足你的需求時(shí)，你也可以將整個(gè) ModelStructurePanel 復(fù)制出來，在 handleAction 這個(gè)方法里頭加入自個(gè)的交互內(nèi)容。如果不知道如何開始，你可以參到這篇英文博客：Supporting multiple models in the new ModelStructurePanel