Reference Source
public class | source

StructureTreeViewPlugin

Extends:

Plugin → StructureTreeViewPlugin

A Viewer plugin that provides an HTML tree view to navigate the structural hierarchy of IFC elements in models.

[Run this example]

Overview

  • A fast HTML tree widget, with zero external dependencies, that works with huge numbers of objects.
  • Each node has a checkbox to control the visibility of its object.
  • Automatically includes all models (that have metadata) that are currently in the Scene.
  • Allows custom CSS styling.

Credits

StructureTreeViewPlugin is based on techniques described in Super Fast Tree View in JavaScript by Chris Smith.

Usage

In the example below we'll add a StructureTreeViewPlugin which, by default, will automatically show the structural hierarchy of the IFC elements in each model we load.

Then we'll use an XKTLoaderPlugin to load the Schependomlaan model from an .xkt file, along with an accompanying JSON IFC metadata file.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
import {StructureTreeViewPlugin} from "../src/plugins/StructureTreeViewPlugin/StructureTreeViewPlugin.js";

const viewer = new Viewer({
     canvasId: "myCanvas",
     transparent: true
});

viewer.camera.eye = [-2.56, 8.38, 8.27];
viewer.camera.look = [13.44, 3.31, -14.83];
viewer.camera.up = [0.10, 0.98, -0.14];

const treeView = new StructureTreeViewPlugin(viewer, {
    containerElement: document.getElementById("myTreeViewContainer")
});

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/schependomlaan/schependomlaan.xkt",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    edges: true
});

Manually Adding Models

We can control which models appear in our StructureTreeViewPlugin by adding them manually.

In the next example, we'll configure the StructureTreeViewPlugin to not automatically add models. Once the model has loaded, we'll add it manually using StructureTreeViewPlugin#addModel.

const treeView = new StructureTreeViewPlugin(viewer, {
     containerElement: document.getElementById("myTreeViewContainer"),
     autoAddModels: false  // <<---------------- Don't auto-add models
});

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/schependomlaan/schependomlaan.xkt",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    edges: true
});

model.on("loaded", () => {
     treeView.addModel(model.id);
});

Initially Expanding Nodes

We can configure StructureTreeViewPlugin to initially expand each model's nodes to a given depth.

Let's automatically expand the first three nodes from the root, for every model added:

const treeView = new StructureTreeViewPlugin(viewer, {
     containerElement: document.getElementById("myTreeViewContainer"),
     autoExpandDepth: 3
});

Customizing Appearance

We can customize the appearance of our StructureTreeViewPlugin by defining custom CSS for its HTML elements. See our example's source code for an example of custom CSS rules.

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: *)

Method Summary

Public Methods
public

addModel(modelId: String)

Adds a model.

public

Destroys this StructureTreeViewPlugin.

public

removeModel(modelId: String)

Removes a model.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object)

Fires an event at this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

on(event: String, callback: Function)

Subscribes to an event fired at this Plugin.

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: *) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg *

Plugin configuration.

cfg.containerElement HTMLElement

DOM element to contain the StructureTreeViewPlugin.

cfg.autoAddModels Boolean
  • optional
  • default: true

When true (default), will automatically add each model as it's created. Set this false if you want to manually add models using StructureTreeViewPlugin#addModel instead.

cfg.autoExpandDepth Number
  • optional

Optional depth to which to initially expand the tree.

Public Methods

public addModel(modelId: String) source

Adds a model.

The model will be automatically removed when destroyed.

To automatically add each model as it's created, instead of manually calling this method each time, provide a autoAddModels: true to the StructureTreeViewPlugin constructor.

Params:

NameTypeAttributeDescription
modelId String

ID of a model Entity in Scene#models.

public destroy() source

Destroys this StructureTreeViewPlugin.

Override:

Plugin#destroy

public removeModel(modelId: String) source

Removes a model.

Params:

NameTypeAttributeDescription
modelId String

ID of a model Entity in Scene#models.