Alternative Model Tree

HOOPS Communicator
, , ,
1

image
image1920Ă—1080 406 KB

A Model Tree Implementation for HOOPS Communicator using jsTree, Tabulator and Goldenlayout.

While the standard model tree in HOOPS Communicator is quite feature-rich it has not been written with customization in mind. The class below implements a model tree using the above mentioned open source libraries and can be fairly easily modified and enhanced.

A few implementation notes:
JsTree is a great library (in fact we used it for the first version of HOOPS Communicator) but it does not support the concept of selection “breadcrums” natively and the way it handles mixed checkbox states does not quite work with the somewhat more complex visibility states in HOOPS Communicator. It required a bit of “wrangling” to make it function and update correctly. In hindsight writing this type of tree control from scratch might be a better option.

An attempt was made to improve on the way IFC relationship data is displayed. Not only does the relationship window display the complete hierachy of the related/relating entities but it allows for selection of those entities without updating the main tree. If you want the main tree (and the relationship window) to update as well simply hold down the “alt” key.

Usage:

The Model Tree itself should be initialized in the modelStructureReady callback of your application:

var scTree = new ScTree(hwv, true, true);

Creates a new ScTree object.
The first parameter is the webviewer object. The second parameter indicates if the GoldenLayout layout manager should be used. If this is set to true all the required divs will be created automatically and the viewer itself will be included in the layout. In this case it expects the viewer div to have the id “content” which is the standard naming for our demo viewer. If you want to manage your own layout instead you need to define three divs with the following ids:

“scTreeModelTreeDiv” for Main Model Tree
“scTreeRelationshipDiv” for IFC relationship info
“scTreePropertyDiv” for Node Properties

The third parameter indicates if the relationship window should be displayed (which is currently only relevant for IFC models).

scTree.refresh();
This function refreshes the model tree. You need to call it after instantiating the scTree class. It also needs to be called whenever nodes are added to the model tree (e.g. when loadSubtreeFromModel() is called)

Below is the main code for the scTree class. To use this class you need to include the following libraries (either via CDN as shown here or directly):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />

<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-light-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js"></script>

It is important to note that this code is not production-ready and provided “as-is”. It is really meant as a starting point for your own development and as an example for some of the functionality and concepts used in HOOPS Communicator.

ScTree.js (23.8 KB)

2

image
image1920Ă—1080 467 KB

I have updated the Model Tree code to now support multiple independent model trees for different parts of the hierarchy. This can be useful for separating the model tree in the case of federated BIM models for example. To make this work the constructor was slightly changed. It now accepts the div id’s for the modeltree, relationshiptree and properties. Those will be used only if useLayout is set to false. The startnode for the model tree is then set in the refresh() function that should be called after the scTree object has been created.

See below for an example that creates two modeltrees, the second one omitting the relationshiptree and the properties.

var scTree1 = new ScTree(hwv, false, true, "modeltreediv", "relationshipdiv", "propertydiv");
var scTree2 = new ScTree(hwv, false, false, "modeltreediv2", null,null);

scTree1.refresh(node1);
scTree1.refresh(node2);

ScTree.js (25.9 KB)

3

image
image1920Ă—1080 373 KB

We have added a few additional features to the model tree to support an upcoming BIM related demo:

  1. There is now a default right-click context menu with functionality similar to the context menu in the default HOOPS Communicator model tree (Isolate/zoom/show/hide). You can provide your own right-click menu functionality by specifying a callback function as in the code below. For more information on the required format for the returned items please see the JStree docs here: link 
 scTree2.setMenuCallback(
      async function (nodeid) {
	
          let items = {
              isolateItem: { 
                  label: "MyIsolate",
                  action: function () {
                      hwv.view.isolateNodes([nodeid], 500, true);
                  }
              }
          };
          return items;
      });
  1. When right-clicking an IFCSPACE element the context menu now contains the option to select all nodes related to this SPACE. If you also include the ClippingBox code into your project (which can be found here) and register it with the Model Tree via the function below the user also has the option to clip to the IFCSPACE’s bounding box:
 myClippingBox = new ClippingBox(hwv);
 ScTree.setClippingBox(myClippingBox);
  1. You can now restrict the nodes that will be displayed in the model tree to a set of predefined nodes with the function below. The model tree will not show the tree hierarchy below the restricted nodes.

myTree.setRestrictToNodes([400,401,402])

As always feel free post any questions around this class here in the forum.
ScTree.js (35.1 KB)

1 Like