Instance of ModelStructurePanel in div outside the viewer GUI

问题

I am building an html page with model query functionality starting from the viewer. I have implemented some methods including viewer.getProperties () and viewer.getBulkProperties (). Working on these themes I realized that it would be very useful to create instances of the panels (modelstructure, properties etc ...) in elements external to the viewer (not in the docking panels), maintaining the functionality and if possible customizing them (for example showing the elements not -collapsed). First question: is it possible to do this? Second question: suggestions on a general method or tutorial for this theme?

回答1:

For the Q1, it's possible to do that, appending the container of the ModelStructurePanel to a div outside the viewer container, but it's not recommended. It would take extra effort to fix CSS of the ModelStructurePanel after moving it out from viewer container.

For the Q2, you could take advantage of the jstree.js to make a three like UI, and for rebuilding model hierarchy data as the native ModelStructurePanel does, here is a code snippet for you. You would have to modify it to match jstree's data requirement.

function buildModelTree( model ) {

  //builds model tree recursively
  function _buildModelTreeRec( node ) {

    it.enumNodeChildren( node.dbId, function(childId) {
        node.children = node.children || [];

        var childNode = {
          dbId: childId,
          name: it.getNodeName( childId )
        };

        node.children.push( childNode );

        _buildModelTreeRec( childNode );
      });

  }

  //get model instance tree and root component
  var it = model.getData().instanceTree;

  var rootId = it.getRootId();

  var rootNode = {
    dbId: rootId,
    name: it.getNodeName( rootId )
  };

  _buildModelTreeRec( rootNode );

  return rootNode;
}

var root = buildModelTree( viewer.model );

Then you will need to bind those events to change tree UI's look in some particular situations:

Autodesk.Viewing.SELECTION_CHANGED_EVENT: To make tree nodes be selected.
Autodesk.Viewing.ISOLATE_EVENT:
Autodesk.Viewing.HIDE_EVENT: To change tree node look, make tree nodes' text color gray if this node is invisible.
Autodesk.Viewing.SHOW_EVENT: To change selected three node's text color from gray to black
Autodesk.Viewing.ISOLATE_EVENT: a combination of the HIDE_EVENT and SHOW_EVENT.

And bind select_node.jstree event to isolate, fit to view the viewer objects according to the selected three nodes.

Isolate: Viewer3D#isolate( dbIds )
Fit to view: Viewer3D#fitToView( dbIds )

来源：https://stackoverflow.com/questions/60779135/instance-of-modelstructurepanel-in-div-outside-the-viewer-gui

标签

autodesk-forge

autodesk-viewer