在Nuxt.JS中为Autodesk Forge Viewer创建自定义工具栏扩展的正确方法是什么？

Question

我在nuxt.js中有一个基本的查看器应用程序。我想自定义工具栏并显示一个附加按钮。我已经关注了一些资源和以前的答案，但仍不清楚如何在nuxt中处理这些问题。

我遵循了本教程-https://learnforge.autodesk.io/#/viewer/extensions/skeleton

注意：即使有可能创建一个没有扩展名的工具栏按钮，这也将对我有所帮助。因为我需要的是自定义工具栏按钮，并且我可以在那儿用js处理事件。

我最初有两个阶段的问题

工具栏扩展有时会正常工作，但有时会收到未定义Autodesk的错误。如何在nuxt.js中处理此错误？我尝试过这样的设置，

// eslintrtc

{
    "globals": {
    "Autodesk": true
    }
}

但是这并非在所有情况下都有效。

2。添加按钮后，我希望处理vue组件（即index.vue文件中的按钮）中的按钮单击事件，或访问extension.js文件中的index.vue组件的数据。

实现此目标的正确方法是什么？我尝试了几次，但没有用，

• 我尝试从静态文件夹添加-但我们无法访问其中的组件
• 试图导入类-Autodesk未定义错误

我将在这里留下一个简化的代码，有人可以帮助我以适合nuxt应用程序的方式纠正此问题吗？

// index.vue

<template>
    <div id="forgeViewer"></div>
</template>
<script>
import AlarmTable from "../components/AlarmTable.vue"
import MyAwesomeExtension from './extensions/myawesomeextension.js';

export default {
  components: {
    AlarmTable
  },
  data(){
    return{
      isActive:false,
      viewer:null
    }
  },
  mounted(){
      let ref = this;
      this.initAutodesk(app,ref);
  },
  methods:{
    initAutodesk(app,ref){
    var htmlDiv = document.getElementById('forgeViewer');
    const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);

//can I register extension something like this outside and use the toolbar button 
    // Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);  

//document.getElementById('MyAwesomeExtensionButton') undefined

    this.viewer = viewer;
    var closable = null;
    var options = {
        env: 'AutodeskProduction',
        api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
        getAccessToken: function(onTokenReady) {
          var token = 'my access token';
          var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
          onTokenReady(token, timeInSeconds);
        }
      };

    Autodesk.Viewing.Initializer(options, function() {
      var startedCode = viewer.start();
      if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
      }
      console.log('Initialization complete, loading a model next...');
    });
    var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, this.onDocumentLoadFailure);
    function onDocumentLoadSuccess(viewerDocument) {
        var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(viewerDocument, defaultModel);
        viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
          console.log(event.dbIdArray.length);

          })
    }
  },

  onDocumentLoadFailure() {
      console.error('Failed fetching Forge manifest');
    }
  }
}
</script>

<style>
body {
    margin: 0;
  }
  #forgeViewer {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #F0F8FF;
  }
.myAwesomeExtensionIcon {
    background-image: url(/img/myAwesomeIcon.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

</style>

// myawesomeextension.js

// Content for 'my-awesome-extension.js'
export default class MyAwesomeExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options);
        this._group = null;
        this._button = null;
    }

    load() {
        console.log('MyAwesomeExtensions has been loaded');
        return true;
    }

    unload() {
        // Clean our UI elements if we added any
        if (this._group) {
            this._group.removeControl(this._button);
            if (this._group.getNumberOfControls() === 0) {
                this.viewer.toolbar.removeControl(this._group);
            }
        }
        console.log('MyAwesomeExtensions has been unloaded');
        return true;
    }

    onToolbarCreated() {
        // Create a new toolbar group if it doesn't exist
        this._group = this.viewer.toolbar.getControl('allMyAwesomeExtensionsToolbar');
        if (!this._group) {
            this._group = new Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar');
            this.viewer.toolbar.addControl(this._group);
        }

        // Add a new button to the toolbar group
        this._button = new Autodesk.Viewing.UI.Button('myAwesomeExtensionButton');
        this._button.onClick = (ev) => {
            // Execute an action here
        };
        this._button.setToolTip('My Awesome Extension');
        this._button.addClass('myAwesomeExtensionIcon');
        this._group.addControl(this._button);
    }
}

Answer 1

我尝试从静态文件夹添加-但我们无法访问其中的组件试图导入类-Autodesk未定义错误

这是预期的，因为在构建/运行时对导入的模块进行评估时（因为尚未加载Viewer库/脚本，因此尚未初始化Autodesk名称空间（因此未定义错误）...

使用dynamic import延迟评估...尝试类似的操作：

async initAutodesk(app,ref){
//...
const MyAwesomeExtension = await import('./extensions/myawesomeextension.js')
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);