摘要：前陣子有些圈的朋友們都在詢問同一個問題要怎么在的自帶右鍵菜單上添加自定義項目或是只顯示自訂義項目以下將針對在自帶右鍵菜單上添加自定義項目和只顯示自訂義項目的右鍵菜單進行說明。

前陣子有些 Autodesk Forge 圈的朋友們都在詢問同一個問題『要怎么在 Viewer 的自帶右鍵菜單上添加自定義項目或是只顯示自訂義項目』～ 以下將針對『在自帶右鍵菜單上添加自定義項目』和『只顯示自訂義項目的右鍵菜單』進行說明。

一、 在自帶右鍵菜單上添加自定義項目:

在自帶右鍵菜單上添加自定義項目是非常容易的，Forge Viewer 提供了一個 API 讓使用者可以非常輕易的在自帶菜單上添加自個的項目，而你需要做的就是像下面這段代碼一樣做一個簡單的 API 調用。下面這個例子會在右鍵菜單上添加兩個新項目，一個是『改變已選構件的顏色成紅色（Override color of selected elements to red）』，另一個是『回復顏色變更（Clear overridden corlor）』：

viewer.registerContextMenuCallback(  "MyChangingColorMenuItems", ( menu, status ) => {
    if( status.hasSelected ) {
        menu.push({
            title: "Override color of selected elements to red",
            target: () => {
                const selSet = this.viewer.getSelection();
                this.viewer.clearSelection();

                const color = new THREE.Vector4( 255 / 255, 0, 0, 1 );
                for( let i = 0; i < selSet.length; i++ ) {
                    this.viewer.setThemingColor( selSet[i], color );
                }
            }
        });
    } else {
        menu.push({
            title: "Clear overridden corlor",
            target: () => {
                this.viewer.clearThemingColors();
            }
        });
    }
});

在執行完上面的代碼后就在右鍵菜單上看到這兩個項目：

『改變已選構件的顏色成紅色（Override color of selected elements to red）』項目將會在有構件被選中時在菜單上顯示：

『回復顏色變更（Clear overridden corlor）』項目會在沒有選中任何構件時出現：

但一般情況下，我們會將上面的代碼放到一個自定義括展里頭，讓我們可以靈活的使用：

class MyMenuItemExtension extends Autodesk.Viewing.Extension {
  constructor( viewer, options ) {
    super( viewer, options );

    this.onBuildingContextMenuItem = this.onBuildingContextMenuItem.bind( this );
  }

  get menuId() {
    return "MyColorContextMenu";
  }

  onBuildingContextMenuItem( menu, status ) {
    if( status.hasSelected ) {
      menu.push({
        title: "Override color of selected elements to red",
        target: () => {
          const selSet = this.viewer.getSelection();
          this.viewer.clearSelection();

          // Change color of selected elements to the red
          const color = new THREE.Vector4( 255 / 255, 0, 0, 1 );
          for( let i = 0; i < selSet.length; i++ ) {
            this.viewer.setThemingColor( selSet[i], color );
          }
        }
      });

    } else {
      menu.push({
        title: "Clear overridden corlor",
        target: () => {
          this.viewer.clearThemingColors();
        }
      });
    }
  }

  load() {
    // Add my owned menu items
    this.viewer.registerContextMenuCallback(
      this.menuId,
      this.onBuildingContextMenuItem
    );

    return true;
  }

  unload() {
    // Remove all menu items added from this extension
    this.viewer.unregisterContextMenuCallback( this.menuId );

    return true;
  }
}

Autodesk.Viewing.theExtensionManager.registerExtension( "DemoMenuExtension", MyMenuItemExtension );

二、 只顯示自訂義項目的右鍵菜單:

如果上頭的代碼與你的需求不符合，你可以考慮編寫一自訂義的右鍵菜單，一樣的他也不會太困難。現在舉個例子來說明，像現在如果我想讓自帶右鍵菜單上除了自帶項目外，還會在點擊到不同構件時顯示不同的項目；我需要做的就是通過繼承 Autodesk.Viewing.Extensions.ViewerObjectContextMenu 和加入 hitTest 相關的邏輯到自定義右鍵菜單的 buildMenu 函數，就像下面這樣：

class MyContextMenu extends Autodesk.Viewing.Extensions.ViewerObjectContextMenu {
  constructor( viewer ) {
    super( viewer );
  }

  isWall( dbId ) {
    //Logics for determining if selected element is wall or not.
    return new Promise( ( resolve, reject ) => {
        $.get(
            "/api/walls/" + dbId,
            ( response ) => {
                if( response && response.id != 0 ) {
                    return resolve( true );
                }
                return resolve( false );
            }
        )
        .error( ( error ) => reject( error ) );
    });
  }

  async buildMenu( event, status ) {
    // Get defulat menu items from the super class
    const menu = super.buildMenu( event, status );

    // Do hitTest to get dbIds
    const viewport = this.viewer.container.getBoundingClientRect();
    const canvasX = event.clientX - viewport.left;
    const canvasY = event.clientY - viewport.top;

    const result = this.viewer.impl.hitTest( canvasX, canvasY, false );

    if( !result || !result.dbId ) return menu;

    let isWall = false;
    try {
        isWall = await this.isWall( result.dbId );
    } catch ( error ) {
        isWall = false;
    }

    if( status.hasSelected && isWall ) {
      menu.push({
          title: "Show current surface temperature map",
          target: () => {
              $.post(
                    "/api/walls/temperature",
                    ( response ) => {
                        ViewerUtil.showWallTemperatureMap( response.values );
                    }
              );
          }
      });
    }

    return menu;
   }

   /**
    * @override
    */
   async show( event ) {
    const numSelected = this.viewer.getSelectionCount();
    const visibility = this.viewer.getSelectionVisibility();
    const status = {
      numSelected: numSelected,
      hasSelected: ( numSelected > 0 ),
      hasVisible: visibility.hasVisible,
      hasHidden: visibility.hasHidden
    };
    const menu = await this.buildMenu( event, status );

    this.viewer.runContextMenuCallbacks( menu, status );

    if( menu && menu.length > 0 ) {
      this.contextMenu.show( event, menu );
    }
   }
}

class MyContextMenuExtension extends Autodesk.Viewing.Extension {
    constructor( viewer, options ) {
        super( viewer, options );
    }

    load() {
        // Use my owned context menu.
        this.viewer.setContextMenu( new MyContextMenu( this.viewer ) );
        return true;
    }

    unload() {
        // Restore default context menu
        this.viewer.setContextMenu( new Autodesk.Viewing.Extensions.ViewerObjectContextMenu( this.viewer ) );
        return true;
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension( "DemoWallMenuExtension", MyContextMenuExtension );

這樣子就會在點擊到墻構件顯示這個項目『Show current surface temperature map』：

相反的，如果你不想顯示菜單上自帶的項目，你可以改成繼承 Autodesk.Viewing.UI.ObjectContextMenu。但你點擊到墻構件的時候就只會顯示『Show current surface temperature map』這個項目，就像下面這個樣子：

希望上面的說明對各位使用 Autodesk Forge 的朋友們有些幫助～