Autodesk Viewer UI Code Location and Edit Suggestions Needed

Question

I need some help tweaking the Autodesk Viewer UI. I am working on the files as provided by a localised version output from http://extract.autodesk.io/. I have not done any custom editing. I need help locating the relevant code and suggestions for the changes in the following areas:

1. The Model Browser docking panel. This opens by default with the first group in the tree Expanded (see picture). I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
2. Staying in Model Browser. The Scroll Bars, (seen when model elements names are listed beyond the Model Browser window size) display correctly in the Opera and Chrome browsers, however, they display unstyled as wide windows style scroll bars in the Firefox browser. What is needed for Firefox to display scrollbars as intended?
3. What code might override camera zoom property AFTER correctly loading default zoom value ? The viewer version from http://extract.autodesk.io/ imports the scene camera properties for the start view ok, but overrides the Zoom property with another value shortly after intial page load.

Answer 1

1.I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.

Unfortunately far as I know there's no straightforward, native config option in Viewer to achieve this. However you can:

• Hook an one-off click listener onto Model Browser button to programmatically fire a click on the corresponding notes you'd like to collapse, or directly add ‘.collapsed’ class to them. You can get a hold of the nodes either by their lmv-nodeid or their label text:

  <div lmv-nodeid="9" class="collapsed group visible"> <lmvheader style="padding-left: 13px;"> <div class="visibility"></div> <label>Switch:1</label> </lmvheader> </div>

• Extend and build your own browser using the instanceTree and Autodesk.Viewing.UI.DockingPanel, see an example here

2.What is needed for Firefox to display scrollbars as intended?

Here is a great answer to your question. But looks like the status quo is still far from perfect, with no definite hack discovered so far. So again for a thorough solution you'd need to create your own styling (can do so with the help of something like) and apply them to .docking-panel and append .model-structure-panel or any other panels you'd like to narrow the scope to.

3.What code might override camera zoom property AFTER correctly loading default zoom value ?

This should be the code you are after.

You can manipulate camera with viewer.autocam.goToView( newView ), and see below for a sample view config:

const newView = {
    position: newPosition,                     
    up: currentView.up,
    center: newCenter,                          
    pivot: newPivotPoint,                           
    fov: currentView.fov,
    worldUp: currentView.worldUp,
    isOrtho: (currentView.isOrtho === false)
}