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

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

一、 在自帶右鍵菜單上添加自定義項(xiàng)目:

在自帶右鍵菜單上添加自定義項(xiàng)目是非常容易的，F(xiàn)orge Viewer 提供了一個(gè) API 讓使用者可以非常輕易的在自帶菜單上添加自個(gè)的項(xiàng)目，而你需要做的就是像下面這段代碼一樣做一個(gè)簡單的 API 調(diào)用。下面這個(gè)例子會(huì)在右鍵菜單上添加兩個(gè)新項(xiàng)目，一個(gè)是『改變已選構(gòu)件的顏色成紅色（Override color of selected elements to red）』，另一個(gè)是『回復(fù)顏色變更（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();
            }
        });
    }
});

在執(zhí)行完上面的代碼后就在右鍵菜單上看到這兩個(gè)項(xiàng)目：

『改變已選構(gòu)件的顏色成紅色（Override color of selected elements to red）』項(xiàng)目將會(huì)在有構(gòu)件被選中時(shí)在菜單上顯示：

『回復(fù)顏色變更（Clear overridden corlor）』項(xiàng)目會(huì)在沒有選中任何構(gòu)件時(shí)出現(xiàn)：

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

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 );

二、 只顯示自訂義項(xiàng)目的右鍵菜單:

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

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 );

這樣子就會(huì)在點(diǎn)擊到墻構(gòu)件顯示這個(gè)項(xiàng)目『Show current surface temperature map』：

相反的，如果你不想顯示菜單上自帶的項(xiàng)目，你可以改成繼承 Autodesk.Viewing.UI.ObjectContextMenu。但你點(diǎn)擊到墻構(gòu)件的時(shí)候就只會(huì)顯示『Show current surface temperature map』這個(gè)項(xiàng)目，就像下面這個(gè)樣子：

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