2

I am trying to remove toolbar buttons in the new version 7 of Autodesk Forge Viewer.

Please refer my below code: 

 viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, (e) => { console.log(e); let modelTools = e.target.toolbar.getControl('modelTools') console.log(modelTools); modelTools.removeControl('toolbar-explodeTool'); modelTools.removeControl('toolbar-measurementSubmenuTool'); modelTools.removeControl('toolbar-modelStructureTool'); })

From few quick StackOverflow searches, I was able to understand that I have to listen to an event and then get control of the extension and remove it, I think I am trying to do the same but it is not yielding any results, the buttons don't get removed.

Please help!

Improve this question

6 Answers 6

Reset to default
5

The easiest way would be to hide them with styling overrides like below (see live demo here):

.adsk-viewing-viewer #toolbar-modelStructureTool{display:none!important} .adsk-viewing-viewer #toolbar-explodeTool{display:none!important} .adsk-viewing-viewer #toolbar-measurementSubmenuTool{display:none!important}

Another workaround would be to suppress the automatic loading of these default, built-in extensions and load them later with callbacks to hide their controls because we'd be confident that the toolbar would be populated by their controls when the callbacks are fired:

 new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'),{disabledExtensions :{measure:true,explode:true}}) //... viewer.loadExtension('Autodesk.Explode', viewer.config).then(ext=>{ //...hide the controls }); viewer.loadExtension('Autodesk.Measure', viewer.config).then(ext=>{ //...hide the controls });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks. Is there a list of toolbar names such as measure, and explode listed anywhere?
@PrageethJayathissa see my answer to get the list
1

Another way to do this is as follows:

// Viewer instance is `viewer` const toolbarControls = []; if (var i = 0; i < viewer.toolbar.getNumberOfControls(); i++) { toolbarControls.push(viewer.toolbar.getControlId(i)); } // E.g., remove all controls toolbarControls.forEach(control => viewer.toolbar.removeControl(control));
Improve this answer

Comments

0

In case you're using the recently released version of the viewer - v7 - please note that the toolbar creation should now be intercepted using a callback method instead of subscribing to an event. See migration guide for more details.

If you're not ready to migrate to v7 yet, you can hard-code the v6 in your script tag, e.g., <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.*"></script>.

Improve this answer

2 Comments

could you please share an example? that would be really helpful for me to understand, thank you!
I've tested the code and noticed that when subscribing to Autodesk.Viewing.TOOLBAR_CREATED_EVENT, some of the buttons are not created yet... I've contacted the dev team to see if this is a regression in v7. In the meantime you may need to work around the issue by delaying the removal of the controls until they're actually in the toolbar.
0

Please try :

(viewer.toolbar.getControl("modelTools") as Autodesk.Viewing.UI.ControlGroup).removeControl('toolbar-explodeTool');

Improve this answer

Comments

0

Instead of GuiViewer3D use Viewer3D

Improve this answer

Comments

-1

The buttons on a standard toolbar are associated with the loaded extensions. If you remove/hide the buttons you effectively disable using the associated extensions. I propose to unload the extensions instead of removing the buttons. You can try and model that behavior before writing the code in the debug window in the browser interactively by using the NOP_VIEWER object. Try this sequence:

NOP_VIEWER.getLoadedExtensions() NOP_VIEWER.unloadExtension('Autodesk.ModelStructure')

You should notice as soon as you unload an extension the corresponding button will also disappear from the toolbar. Now you need to pick a moment when to unload the extension. I suggest you do it in a onSuccessCallback function of a viewer.start call because this is when the extensions are loaded like this:

this.viewer.start(null, () => { console.log('Forge viewer started'); this.viewer.unloadExtension('Autodesk.ModelStructure'); }, (errorCode, errorMessage) => { console.error(`Forge viewer start error ${errorCode}`, errorMessage); });

The reason why unloading an extension approach is better is because every extension implements a clean up logic on unload that is supposed to remove the UI elements it created when was loaded. See more here https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/toolbar-button/#step-3-cleanup https://forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/Viewer3D/#start-url-options-onsuccesscallback-onerrorcallback-initoptions

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.