Forge Viewer：Autodesk.BoxSelection 扩展错误

Question

On the project where I work (React, TS), we use the viewer and added the Box Selection extension for it.

The first time you activate it with a button in the toolbar, the extension works, the elements are highlighted. Then you can switch to another mode, for example, the orbit mode. And after that, when you click on the button that activates the "box Selection extension", the extension no longer works. The orbit mode remains working.

At the same time, the button is clicked ( console.log() is fired) and the loadExtension('Autodesk.Box Selection') method works.

What could be the problem?

I will give some code snippets

This is the extension code:

 export default function RectangleSelectionExtension( this, viewer, options, ) { window.Autodesk.Viewing.Extension.call(this, viewer, options); } RectangleSelectionExtension.prototype = ( Object.create(window.Autodesk.Viewing.Extension.prototype) ); RectangleSelectionExtension.prototype.constructor = RectangleSelectionExtension; RectangleSelectionExtension.prototype.load = () => true; RectangleSelectionExtension.prototype.unload = () => true; RectangleSelectionExtension.prototype.onToolbarCreated = function onToolbarCreated() { this.group = this.viewer.toolbar.getControl('allExtensionsToolbar'); if (!this.group) { this.group = new window.Autodesk.Viewing.UI.ControlGroup('allExtensionsToolbar'); this.viewer.toolbar.addControl(this.group); } // Add a new button to the toolbar group this.button = new window.Autodesk.Viewing.UI.Button('RectangleSelectionExtension'); this.button.onClick = async () => { const boxSelectionExtension = await this.viewer.loadExtension('Autodesk.BoxSelection'); this.viewer.toolController.activateTool(boxSelectionExtension.boxSelectionTool.getName()); boxSelectionExtension.addToolbarButton(this.viewer); }; this.button.setToolTip('Select within a rectangle area'); this.button.addClass('RectangleSelectionExtension'); this.group.addControl(this.button); }; window.Autodesk.Viewing.theExtensionManager.registerExtension('BoxSelection', RectangleSelectionExtension);

Next, in the Viewer component, we import and register the extension:

window.Autodesk.Viewing.theExtensionManager.registerExtension('RectangleSelectionExtension', RectangleSelectionExtension);

And this is how we initialize the viewer:

  window.Autodesk.Viewing.Initializer(options, () => {
    const container = document.getElementById('forgeViewer');
    if (container) {
      viewer = new window.Autodesk.Viewing.GuiViewer3D(
        container,
        {
          token,
          extensions: [
            /* ...some extensions */
            'RectangleSelectionExtension',
          ],
        },
      );
      const startedCode = viewer.start();
      if (startedCode > 0) {
        return;
      }
      /* ...some eventListeners */
   }

Answer 1

I'm not sure I understand the purpose of your RectangleSelectionExtension . From the code it looks like it just adds a button in the toolbar, and clicking that button repeatedly loads another extension ( Autodesk.BoxSelection ), repeatedly activates the box selection tool, and repeatedly adds the box selection button to the toolbar. That doesn't seem right.

If you're simply interested in the box selection, you can load it (and include it in the toolbar) like so:

// ...

viewer = new window.Autodesk.Viewing.GuiViewer3D(
    container,
    {
        token,
        extensions: [
            /* ...some extensions */
            'Autodesk.BoxSelection',
        ]
    }
);

// and later ...

const boxSelectionExt = viewer.getExtension('Autodesk.BoxSelection');
boxSelectionExt.addToolbarButton(true); // Add the button to the toolbar
boxSelectionExt.addToolbarButton(false); // Remove the button from the toolbar

// ...