「翻译」新增自订义工具列及按钮

这篇文章翻译自 Autodesk Forge 官方教程 Add Toolbar Button，更多细节请参考原文。

在这个教程里，我们会透过自定的扩展在 Viewer 的画面上新增一个自订义的工具列，这个工具列会有两个按钮，每个按钮会有自个的提示，也有自个的点击事件，可以让摄像头绕著标的旋转90度。以下示例会分成3个片段一一介绍：

第一步 - 取得工具列：
在扩展被载入的时候，工具列可能还没产生。在这个情况下你必需去监听 TOOLBAR_CREATED_EVENT，等到这个事件被触发后才能将将自订义的内容加上去，下面是这部份的代码片段：

load() {
  if( this.viewer.toolbar ) {
    // Toolbar is already available, create the UI
    this.createUI();
  } else {
    // Toolbar hasn't been created yet, wait until we get notification of its creation
    this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
    this.viewer.addEventListener( Autoesek.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded );
  }

  return true;
}

onToolbarCreated = () => {
  this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
  this.onToolbarCreatedBinded = null;
  this.createUI();
};

第二步 - 新增按钮：
实作 createUI 函数，当这个函数被调用的时候，就会在画面上产生自订义的工具列及按钮。

createUI() {
  const viewer = this.viewer;

  // 自订义按钮 1
  const button1 = new Autodesk.Viewing.UI.Button( 'my-view-front-button' );
  button1.onClick = () => {
      viewer.setViewCube( 'front' );
  };
  button1.addClass( 'my-view-front-button' );
  button1.setToolTip( 'View front' );

  // 自订义按钮 2
  const button2 = new Autodesk.Viewing.UI.Button( 'my-view-back-button' );
  button2.onClick = () => {
      viewer.setViewCube('back');
  };
  button2.addClass( 'my-view-back-button' );
  button2.setToolTip( 'View Back' );

  // 自订义工具列
  this.subToolbar = new Autodesk.Viewing.UI.ControlGroup( 'my-custom-view-toolbar' );
  this.subToolbar.addControl( button1 );
  this.subToolbar.addControl( button2 );

  viewer.toolbar.addControl(this.subToolbar);
}

你可能有注意到在上面示例里有调用到 addClass 函数，这个函数是用来设置一个 CSS 样示到自定义的按钮上来定义按钮的外观。但在那之前我们还没有新增这个样示到我们的网页页面上，所以我们必需将下面的样示新增到页面上，自订义的按钮才会长个像我们想要的样子：

<style>
  .my-view-front-button {
    background: red;
  }
  .my-view-back-button {
    background: blue;
  }
</style>

第三步 - 清除自订义工具列及按钮：
透过下方的代码片段就可以将上面新增的自订义工具列及按钮从画面上移除：

unload() {
  this.viewer.toolbar.removeControl( this.subToolbar );
  return true;
}

上面的扩展全貌（使用 ES6 语法）

export default class ToolbarExtension extends Autodesk.Viewing.Extension {
    constructor( viewer, options ) {
        super( viewer, options );
    }
    
    createUI() {
      const viewer = this.viewer;
    
      // 自订义按钮 1
      const button1 = new Autodesk.Viewing.UI.Button( 'my-view-front-button' );
      button1.onClick = () => {
          viewer.setViewCube( 'front' );
      };
      button1.addClass( 'my-view-front-button' );
      button1.setToolTip( 'View front' );
    
      // 自订义按钮 2
      const button2 = new Autodesk.Viewing.UI.Button( 'my-view-back-button' );
      button2.onClick = () => {
          viewer.setViewCube('back');
      };
      button2.addClass( 'my-view-back-button' );
      button2.setToolTip( 'View Back' );
    
      // 自订义工具列
      this.subToolbar = new Autodesk.Viewing.UI.ControlGroup( 'my-custom-view-toolbar' );
      this.subToolbar.addControl( button1 );
      this.subToolbar.addControl( button2 );
    
      viewer.toolbar.addControl(this.subToolbar);
    }
    
    onToolbarCreated = () => {
      this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
      this.onToolbarCreatedBinded = null;
      this.createUI();
    };
    
    load() {
      if( this.viewer.toolbar ) {
        // Toolbar is already available, create the UI
        this.createUI();
      } else {
        // Toolbar hasn't been created yet, wait until we get notification of its creation
        this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
        this.viewer.addEventListener( Autoesek.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded );
      }
    
      return true;
    }
    
    unload() {
      this.viewer.toolbar.removeControl( this.subToolbar );
      return true;
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension( 'Autodesk.ADN.Demo.ToolbarExtension', ToolbarExtension );

附註：上面样例使用到浏览器尚未支持的语法，如遇到无法加载的问题请改用下面样例

class ToolbarExtension extends Autodesk.Viewing.Extension {
    constructor( viewer, options ) {
        super( viewer, options );
        this.onToolbarCreated = this.onToolbarCreated.bind( this );
    }
    
    createUI() {
      const viewer = this.viewer;
    
      // 自订义按钮 1
      const button1 = new Autodesk.Viewing.UI.Button( 'my-view-front-button' );
      button1.onClick = () => {
          viewer.setViewCube( 'front' );
      };
      button1.addClass( 'my-view-front-button' );
      button1.setToolTip( 'View front' );
    
      // 自订义按钮 2
      const button2 = new Autodesk.Viewing.UI.Button( 'my-view-back-button' );
      button2.onClick = () => {
          viewer.setViewCube('back');
      };
      button2.addClass( 'my-view-back-button' );
      button2.setToolTip( 'View Back' );
    
      // 自订义工具列
      this.subToolbar = new Autodesk.Viewing.UI.ControlGroup( 'my-custom-view-toolbar' );
      this.subToolbar.addControl( button1 );
      this.subToolbar.addControl( button2 );
    
      viewer.toolbar.addControl(this.subToolbar);
    }
    
    onToolbarCreated() {
      this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
      this.onToolbarCreatedBinded = null;
      this.createUI();
    }
    
    load() {
      if( this.viewer.toolbar ) {
        // Toolbar is already available, create the UI
        this.createUI();
      } else {
        // Toolbar hasn't been created yet, wait until we get notification of its creation
        this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
        this.viewer.addEventListener( Autoesek.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded );
      }
    
      return true;
    }
    
    unload() {
      this.viewer.toolbar.removeControl( this.subToolbar );
      return true;
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension( 'Autodesk.ADN.Demo.ToolbarExtension', ToolbarExtension );