0

Is there any way to use headless viewer with only model browser functionality i used and follow Headless Viewer usage in angular 5

<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js?v=v4.1.*"></script>

i used zoom / pan / fullscreen / rotation functionality for use of setActiveNavigationTool selection but not getting any solution regarding model browser event code ..

Is there any idea to get model browser code in javascript rather than its own panel usage.

Thanks

sanny
  • 3
  • 5
  • Did you want to call model browser in your own way rather than use it on the GuiViewer3D's toolbar? Or you want to fully implement a similar one in angular by yourself? – Eason Kang May 01 '18 at 03:31
  • Yes Eason.. i want to call or get data of model browser tool stuff. so do you have any idea regarding javascript or angular stuff. – sanny May 01 '18 at 05:45
  • and also there is no issue to call navigation tool function to make it display with its own panel. – sanny May 01 '18 at 05:52
  • Here you go, I put some code below for rebuilding the data what you see in the model browser. Hope it helps. – Eason Kang May 01 '18 at 06:15

1 Answers1

0

The data displayed on the model browser panel is actually from the instance tree of the loaded model. Here are two ways to obtain the instance tree:

//To get the instance tree
var it = viewer.model.getData().instanceTree;

//or 
viewer.getObjectTree(function( instanceTree ) {
   console.log( instanceTree );
});

After obtaining the instance tree, you might have to use some tricks to rebuild the tree hierarchy like the below, since Forge Viewer store instance relationships in a flattened data structure.

// To rebuild node tree hierarchy
 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 );

But the above is only the data part. If you want to display them like a tree on somewhere, you can try to use Tree UI libraries such as jstree to get it done.

Hope it helps.

Eason Kang
  • 6,155
  • 1
  • 7
  • 24
  • excellent.. thanks a lot.. it got me its children records... Do you have some other ui onclick zoom of that portion of selection feature .. ??? – sanny May 01 '18 at 06:38
  • The zoom behavior you see in the `Model Browser` is archived by calling `viewer.fitToView( dbIds )` and the select behavior is calling `viewer.select( dbIds )`. – Eason Kang May 01 '18 at 06:51
  • If you use jsTree, you can bind the `select_node.jstree` event and call `viewer.fitToView( dbIds )` inside the event handler, it will do the similar thing like you click on the node of the `Model Browser`. https://stackoverflow.com/questions/23456628/how-to-get-click-event-of-row-element-of-jstree?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Eason Kang May 01 '18 at 06:54
  • I'm not an Angular guy, but you might take a look this library `angular tree component`, it seems to have some event to do the similar thing, too. https://github.com/500tech/angular-tree-component https://angular2-tree.readme.io/docs/action-mapping https://angular2-tree.readme.io/docs/events – Eason Kang May 01 '18 at 06:57
  • thank you so much.. you are solving big stuff very easily... thanks a lot Eason – sanny May 01 '18 at 09:21