0

How we can show object tree / components tree along with viewer? So that user can click on the tree node and then he can see the object/dbid selected in viewer?

Any thoughts on this?

A DEv
  • 255
  • 1
  • 19
  • The built-in model tree shows the objects in hierarchy, when the node is clicked the corresponding object will highlighted. Does this meet your requirement? or could you clarify 'object/components'? A snapshot or demo file will be helpful to understand the requirement well. – Xiaodong Liang Feb 14 '20 at 01:45
  • yes, it works, how can I show built in model tree with click on object and highlight functionality? – A DEv Feb 14 '20 at 08:46
  • I meant you can use built-in features directly. They are menus in Forge Viewer. and clicking node to highlight an object is also an existing feature. you can just click an object node in the tree. This is a snapshot to show them. https://paste.pics/8995d8fdb5bcf3002bec67742b6d7bbc OR If I misunderstood your question, please elaborate with some more description and snapshots. thanks. – Xiaodong Liang Feb 16 '20 at 16:40
  • sorry just checking your reply now, so not seeing that above snap...can you paste it again...or any example that just shows how to use those built in features...thank you – A DEv Feb 18 '20 at 05:35
  • the snapshot is still there.. maybe your internet has restriction to access some resources. I put the snapshot on our OneDrive, and made a short url. http://shorturl.at/luGTY . If it does not still work, and the snapshot does not meet what you wanted to achieve, please email us at forge.help@autodesk.com with more description on the requirement. – Xiaodong Liang Feb 19 '20 at 11:49
  • okay, can we have something like this url..https://learnforge.autodesk.io/#/tutorials/dashboard ..so that I can see model objects on left side or right side and I can see them highlighted or zoomed onclicking it. – A DEv Feb 20 '20 at 08:29

1 Answers1

1

So, you wanted to build a similar model tree aside by Forge Viewer. The demo you shared is using JStree library to list the files in BIM 360. I believe you are familiar with JsTree.

To dump the model tree nodes of Forge Viewer, the code below could be a reference. It enumerates the hierarchy and gets the nodes name and dbId one by one. 

function getAllLeafComponents(viewer, callback) {
    var cbCount = 0;  
    var tree;  
    var jsData = []

function getLeafComponentsRec(current,parent) {
    cbCount++;
    if (tree.getChildCount(current) != 0) {
        tree.enumNodeChildren(current, function (children) {
            getLeafComponentsRec(children,current);
        }, false);
    } 
    var nodeName = viewer.model.getInstanceTree().getNodeName(current)
    jsData.push({id:current,parent:parent,text:nodeName})  

    if (--cbCount == 0) callback(jsData);
}
viewer.getObjectTree(function (objectTree) {
    tree = objectTree;
    var rootId = tree.getRootId()
    var nodeName = viewer.model.getInstanceTree().getNodeName(rootId)
    jsData.push({id:rootId,parent:'#',text:nodeName}) 
    var allLeafComponents = getLeafComponentsRec(rootId,'#');

 });
}

To use the function,

getAllLeafComponents(viewer, function (jsonData) {
   console.log(jsonData);

})

It dumps the tree, which can be used with JSTree. Since the data tells DbId, when the JStree node is clicked, get out dbId, and call

viewer.fitToView([dbId])

It will zoom to the object.

enter image description here

Xiaodong Liang
  • 2,051
  • 2
  • 9
  • 14
  • Thanks this would work for me. Again one more question here, if we have objects on the tree left side as such as above, would it be possible to show only the associated markups show and other hidden, while clicking on it? So this will be easy for user to view and associate . – A DEv Feb 21 '20 at 06:25
  • From above, what I meant is simply show only the markups on the walls object, while I click on walls objects? Would that be possible as we are restoring markups from svg data we stored in our DB.? – A DEv Feb 21 '20 at 06:32
  • yes, it is feasible to save markup svg data to your DB and load it again. but if you user makes markup for multiple walls in the same time, you might need to calculate the markup elements which are around the area of a specific wall, and hide other elements of the svg data, when a specific wall is selected. Since this is a new question, I would suggest you post a new thread for better discussion – Xiaodong Liang Feb 21 '20 at 12:40
  • regarding with the original question in this thread: object tree. After you play my code and it works, I would appreciate if you could accept it as answer. It will help other customers in the future. – Xiaodong Liang Feb 21 '20 at 12:42