@xeokit/xeokit-sdk 2.3.9 → 2.4.0-alpha

package/dist/xeokit-sdk.cjs.js

@@ -46,7 +46,7 @@ class Map$1 {
     }
 }
 
-const idMap$1 = new Map$1();
+const idMap = new Map$1();
 
 /**
  * Internal data class that represents the state of a menu or a submenu.
@@ -330,7 +330,7 @@ class ContextMenu {
      */
     constructor(cfg = {}) {
 
-        this._id = idMap$1.addItem();
+        this._id = idMap.addItem();
         this._context = null;
         this._enabled = false;  // True when the ContextMenu is enabled
         this._itemsCfg = [];    // Items as given as configs
@@ -541,7 +541,7 @@ class ContextMenu {
         this._context = null;
         this._clear();
         if (this._id !== null) {
-            idMap$1.removeItem(this._id);
+            idMap.removeItem(this._id);
             this._id = null;
         }
     }
@@ -65656,7 +65656,7 @@ class Dot {
         dotStyle.left = 0 + "px";
         dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
         dotStyle["opacity"] = 1.0;
-        dotStyle["pointer-events"] = "none";
+        dotStyle["pointer-events"] = "all";
         if (cfg.onContextMenu) ;
         parentElement.appendChild(dot);
 
@@ -80423,7 +80423,9 @@ class BCFViewpointsPlugin extends Plugin {
         for (let id in sectionPlanes) {
             if (sectionPlanes.hasOwnProperty(id)) {
                 let sectionPlane = sectionPlanes[id];
-
+                if (!sectionPlane.active) {
+                    continue;
+                }
                 let location = sectionPlane.pos;
 
                 let direction;
@@ -86380,7 +86382,7 @@ class MetaModel {
     /**
      * @private
      */
-    constructor(metaScene, id, projectId, revisionId, author, createdAt, creatingApplication, schema, propertySets, rootMetaObject) {
+    constructor(metaScene, id, projectId, revisionId, author, createdAt, creatingApplication, schema, propertySets) {
 
         /**
          * Globally-unique ID.
@@ -86472,8 +86474,17 @@ class MetaModel {
          *
          * @property rootMetaObject
          * @type {MetaObject}
+         * @deprecated
          */
-        this.rootMetaObject = rootMetaObject;
+        this.rootMetaObject = null;
+
+        /**
+         * The root {@link MetaObject}s in this MetaModel's composition structure hierarchy.
+         *
+         * @property rootMetaObject
+         * @type {MetaObject[]}
+         */
+        this.rootMetaObjects = [];
     }
 
     getJSON() {
@@ -86539,9 +86550,16 @@ class MetaObject {
          *
          * @property metaModel
          * @type {MetaModel}
+         * @deprecated
          */
         this.metaModel = metaModel;
 
+        /**
+         * The MetaModels that share this MetaObject.
+         * @type {MetaModel[]}
+         */
+        this.metaModels = [metaModel];
+
         /**
          * Globally-unique ID.
          *
@@ -86901,466 +86919,17 @@ class MetaScene {
         this.metaObjectsByType = {};
 
         /**
-         * Tracks number of MetaObjects of each type.
-         * @private
-         */
-        this._typeCounts = {};
-
-        /**
-         * Subscriptions to events sent with {@link fire}.
-         * @private
-         */
-        this._eventSubs = {};
-    }
-
-    /**
-     * Subscribes to an event fired at this Viewer.
-     *
-     * @param {String} event The event
-     * @param {Function} callback Callback fired on the event
-     */
-    on(event, callback) {
-        let subs = this._eventSubs[event];
-        if (!subs) {
-            subs = [];
-            this._eventSubs[event] = subs;
-        }
-        subs.push(callback);
-    }
-
-    /**
-     * Fires an event at this Viewer.
-     *
-     * @param {String} event Event name
-     * @param {Object} value Event parameters
-     */
-    fire(event, value) {
-        const subs = this._eventSubs[event];
-        if (subs) {
-            for (let i = 0, len = subs.length; i < len; i++) {
-                subs[i](value);
-            }
-        }
-    }
-
-    /**
-     * Unsubscribes from an event fired at this Viewer.
-     * @param event
-     */
-    off(event) { // TODO
-
-    }
-
-    /**
-     * Creates a {@link MetaModel} in this MetaScene.
-     *
-     * The MetaModel will contain a hierarchy of {@link MetaObject}s, created from the
-     * meta objects in ````metaModelData````.
-     *
-     * The meta object hierarchy in ````metaModelData```` is expected to be non-cyclic, with a single root. If the meta
-     * objects are cyclic, then this method will log an error and attempt to recover by creating a dummy root MetaObject
-     * of type "Model" and connecting all other MetaObjects as its direct children. If the meta objects contain multiple
-     * roots, then this method similarly attempts to recover by creating a dummy root MetaObject of type "Model" and
-     * connecting all the root MetaObjects as its children.
-     *
-     * @param {String} modelId ID for the new {@link MetaModel}, which will have {@link MetaModel#id} set to this value.
-     * @param {Object} metaModelData Data for the {@link MetaModel}.
-     * @param {Object} [options] Options for creating the {@link MetaModel}.
-     * @param {Object} [options.includeTypes] When provided, only create {@link MetaObject}s with types in this list.
-     * @param {Object} [options.excludeTypes] When provided, never create {@link MetaObject}s with types in this list.
-     * @param {Boolean} [options.globalizeObjectIds=false] Whether to globalize each {@link MetaObject#id}. Set this ````true```` when you need to load multiple instances of the same meta model, to avoid ID clashes between the meta objects in the different instances.
-     * @returns {MetaModel} The new MetaModel.
-     */
-    createMetaModel(modelId, metaModelData, options = {}) {
-
-        const projectId = metaModelData.projectId || "none";
-        const revisionId = metaModelData.revisionId || "none";
-        const newPropertySets = metaModelData.propertySets || [];
-        const newObjects = metaModelData.metaObjects || [];
-        const author = metaModelData.author;
-        const createdAt = metaModelData.createdAt;
-        const creatingApplication = metaModelData.creatingApplication;
-        const schema = metaModelData.schema;
-        // if (options.excludeTypes) {
-        //     excludeTypes = {};
-        //     for (let i = 0, len = options.excludeTypes.length; i < len; i++) {
-        //         includeTypes[options.excludeTypes[i]] = true;
-        //     }
-        // }
-
-        const metaModel = new MetaModel(this, modelId, projectId, revisionId, author, createdAt, creatingApplication, schema, [], null);
-
-        this.metaModels[modelId] = metaModel;
-
-        for (let i = 0, len = newPropertySets.length; i < len; i++) {
-            const propertySetCfg = newPropertySets[i];
-            const propertySetId = propertySetCfg.id;
-            const propertySet = new PropertySet(propertySetId, propertySetCfg.originalSystemId, propertySetCfg.name, propertySetCfg.type, propertySetCfg.properties);
-            metaModel.propertySets[propertySetId] = propertySet;
-            this.propertySets[propertySetId] = propertySet;
-        }
-
-        const rootMetaObjects = [];
-
-        for (let i = 0, len = newObjects.length; i < len; i++) {
-            const newObject = newObjects[i];
-            if (newObject.parent === undefined || newObject.parent === null) {
-                rootMetaObjects.push(newObject);
-            }
-        }
-
-        if (rootMetaObjects.length === 0) {
-            this.scene.error("Cyclic containment hierarchy found in metamodel - will flatten the hierarchy and insert fake 'Model' root");
-            const fakeRoot = {
-                "id": modelId + ".fakeRoot",
-                "name": modelId,
-                "type": "Model",
-                "parent": null
-            };
-            for (let i = 0, len = newObjects.length; i < len; i++) {
-                newObjects[i].parent = fakeRoot.id;
-            }
-            newObjects.push(fakeRoot);
-        }
-
-        if (rootMetaObjects.length > 1) {
-            this.scene.error("Multiple containment hierarchy root found in metamodel - will insert fake 'Model' root");
-            const fakeRoot = {
-                "id": modelId + ".fakeRoot",
-                "name": modelId,
-                "type": "Model",
-                "parent": null
-            };
-            newObjects.push(fakeRoot);
-            for (let i = 0, len = rootMetaObjects.length; i < len; i++) {
-                rootMetaObjects[i].parent = fakeRoot.id;
-            }
-        }
-
-        for (let i = 0, len = newObjects.length; i < len; i++) {
-            const newObject = newObjects[i];
-            const type = newObject.type;
-            const objectId = options.globalizeObjectIds ? math.globalizeObjectId(modelId, newObject.id) : newObject.id;
-            const originalSystemId = newObject.id;
-            const name = newObject.name;
-            const propertySets = [];
-            if (newObject.propertySetIds && newObject.propertySetIds.length > 0) {
-                for (let j = 0, lenj = newObject.propertySetIds.length; j < lenj; j++) {
-                    const propertySetId = newObject.propertySetIds[j];
-                    const propertySet = metaModel.propertySets[propertySetId];
-                    if (propertySet) {
-                        propertySets.push(propertySet);
-                    }
-                }
-            }
-            const parent = null;
-            const children = null;
-            const external = newObject.external;
-            const metaObject = new MetaObject(metaModel, objectId, originalSystemId, name, type, propertySets, parent, children, external);
-            this.metaObjects[objectId] = metaObject;
-            (this.metaObjectsByType[type] || (this.metaObjectsByType[type] = {}))[objectId] = metaObject;
-            if (this._typeCounts[type] === undefined) {
-                this._typeCounts[type] = 1;
-            } else {
-                this._typeCounts[type]++;
-            }
-        }
-
-        for (let i = 0, len = newObjects.length; i < len; i++) {
-            const newObject = newObjects[i];
-            const objectId = options.globalizeObjectIds ? math.globalizeObjectId(modelId, newObject.id) : newObject.id;
-            const metaObject = this.metaObjects[objectId];
-            if (!metaObject) {
-                continue;
-            }
-            if (newObject.parent === undefined || newObject.parent === null) {
-                metaModel.rootMetaObject = metaObject;
-            } else if (newObject.parent) {
-                const parentId = options.globalizeObjectIds ? math.globalizeObjectId(modelId, newObject.parent) : newObject.parent;
-                let parentMetaObject = this.metaObjects[parentId];
-                if (parentMetaObject) {
-                    metaObject.parent = parentMetaObject;
-                    parentMetaObject.children = parentMetaObject.children || [];
-                    parentMetaObject.children.push(metaObject);
-                }
-            }
-        }
-
-        this.fire("metaModelCreated", modelId);
-        return metaModel;
-    }
-
-    /**
-     * Removes a {@link MetaModel} from this MetaScene.
-     *
-     * Fires a "metaModelDestroyed" event with the value of the {@link MetaModel#id}.
-     *
-     * @param {String} id ID of the target {@link MetaModel}.
-     */
-    destroyMetaModel(id) {
-        const metaModel = this.metaModels[id];
-        if (!metaModel) {
-            return;
-        }
-        this._removeMetaModel(metaModel);
-        this.fire("metaModelDestroyed", id);
-    }
-
-    _removeMetaModel(metaModel) {
-        const metaObjects = this.metaObjects;
-        const metaObjectsByType = this.metaObjectsByType;
-        let visit = (metaObject) => {
-            delete metaObjects[metaObject.id];
-            const types = metaObjectsByType[metaObject.type];
-            if (types && types[metaObject.id]) {
-                delete types[metaObject.id];
-                if (--this._typeCounts[metaObject.type] === 0) {
-                    delete this._typeCounts[metaObject.type];
-                    delete metaObjectsByType[metaObject.type];
-                }
-            }
-            const children = metaObject.children;
-            if (children) {
-                for (let i = 0, len = children.length; i < len; i++) {
-                    const childMetaObject = children[i];
-                    visit(childMetaObject);
-                }
-            }
-        };
-        visit(metaModel.rootMetaObject);
-        for (let propertySetId in metaModel.propertySets) {
-            if (metaModel.propertySets.hasOwnProperty(propertySetId)) {
-                delete this.propertySets[propertySetId];
-            }
-        }
-        delete this.metaModels[metaModel.id];
-    }
-
-    /**
-     * Gets the {@link MetaObject#id}s of the {@link MetaObject}s that have the given {@link MetaObject#type}.
-     *
-     * @param {String} type The type.
-     * @returns {String[]} Array of {@link MetaObject#id}s.
-     */
-    getObjectIDsByType(type) {
-        const metaObjects = this.metaObjectsByType[type];
-        return metaObjects ? Object.keys(metaObjects) : [];
-    }
-
-    /**
-     * Gets the {@link MetaObject#id}s of the {@link MetaObject}s within the given subtree.
-     *
-     * @param {String} id  ID of the root {@link MetaObject} of the given subtree.
-     * @param {String[]} [includeTypes] Optional list of types to include.
-     * @param {String[]} [excludeTypes] Optional list of types to exclude.
-     * @returns {String[]} Array of {@link MetaObject#id}s.
-     */
-    getObjectIDsInSubtree(id, includeTypes, excludeTypes) {
-        const list = [];
-        const metaObject = this.metaObjects[id];
-        const includeMask = (includeTypes && includeTypes.length > 0) ? arrayToMap(includeTypes) : null;
-        const excludeMask = (excludeTypes && excludeTypes.length > 0) ? arrayToMap(excludeTypes) : null;
-
-        function visit(metaObject) {
-            if (!metaObject) {
-                return;
-            }
-            var include = true;
-            if (excludeMask && excludeMask[metaObject.type]) {
-                include = false;
-            } else if (includeMask && (!includeMask[metaObject.type])) {
-                include = false;
-            }
-            if (include) {
-                list.push(metaObject.id);
-            }
-            const children = metaObject.children;
-            if (children) {
-                for (var i = 0, len = children.length; i < len; i++) {
-                    visit(children[i]);
-                }
-            }
-        }
-
-        visit(metaObject);
-        return list;
-    }
-
-    /**
-     * Iterates over the {@link MetaObject}s within the subtree.
-     *
-     * @param {String} id ID of root {@link MetaObject}.
-     * @param {Function} callback Callback fired at each {@link MetaObject}.
-     */
-    withMetaObjectsInSubtree(id, callback) {
-        const metaObject = this.metaObjects[id];
-        if (!metaObject) {
-            return;
-        }
-        metaObject.withMetaObjectsInSubtree(callback);
-    }
-}
-
-function arrayToMap(array) {
-    const map = {};
-    for (var i = 0, len = array.length; i < len; i++) {
-        map[array[i]] = true;
-    }
-    return map;
-}
-
-/**
- * The 3D Viewer at the heart of the xeokit SDK.
- *
- * * A Viewer wraps a single {@link Scene}
- * * Add {@link Plugin}s to a Viewer to extend its functionality.
- * * {@link Viewer#metaScene} holds metadata about models in the
- * Viewer's {@link MetaScene}.
- * * Use {@link Viewer#cameraFlight} to fly or jump the {@link Scene}'s
- * {@link Camera} to target positions, boundaries or {@link Entity}s.
- *
- * @public
- */
-class Viewer {
-
-    /**
-     * @constructor
-     * @param {Object} cfg Viewer configuration.
-     * @param {String} [cfg.id] Optional ID for this Viewer, defaults to the ID of {@link Viewer#scene}, which xeokit automatically generates.
-     * @param {String} [cfg.canvasId]  ID of an existing HTML canvas for the {@link Viewer#scene} - either this or canvasElement is mandatory. When both values are given, the element reference is always preferred to the ID.
-     * @param {HTMLCanvasElement} [cfg.canvasElement] Reference of an existing HTML canvas for the {@link Viewer#scene} - either this or canvasId is mandatory. When both values are given, the element reference is always preferred to the ID.
-     * @param {HTMLElement} [cfg.keyboardEventsElement] Optional reference to HTML element on which key events should be handled. Defaults to the HTML Document.
-     * @param {String} [cfg.spinnerElementId]  ID of existing HTML element to show the {@link Spinner} - internally creates a default element automatically if this is omitted.
-     * @param {Number} [cfg.passes=1] The number of times the {@link Viewer#scene} renders per frame.
-     * @param {Boolean} [cfg.clearEachPass=false] When doing multiple passes per frame, specifies if to clear the canvas before each pass (true) or just before the first pass (false).
-     * @param {Boolean} [cfg.preserveDrawingBuffer=true]  Whether or not to preserve the WebGL drawing buffer. This needs to be ````true```` for {@link Viewer#getSnapshot} to work.
-     * @param {Boolean} [cfg.transparent=true]  Whether or not the canvas is transparent.
-     * @param {Boolean} [cfg.premultipliedAlpha=false]  Whether or not you want alpha composition with premultiplied alpha. Highlighting and selection works best when this is ````false````.
-     * @param {Boolean} [cfg.gammaInput=true]  When true, expects that all textures and colors are premultiplied gamma.
-     * @param {Boolean} [cfg.gammaOutput=false]  Whether or not to render with pre-multiplied gama.
-     * @param {Number} [cfg.gammaFactor=2.2] The gamma factor to use when rendering with pre-multiplied gamma.
-     * @param {Number[]} [cfg.backgroundColor=[1,1,1]] Sets the canvas background color to use when ````transparent```` is false.
-     * @param {Boolean} [cfg.backgroundColorFromAmbientLight=true] When ````transparent```` is false, set this ````true````
-     * to derive the canvas background color from {@link AmbientLight#color}, or ````false```` to set the canvas background to ````backgroundColor````.
-     * @param {String} [cfg.units="meters"] The measurement unit type. Accepted values are ````"meters"````, ````"metres"````, , ````"centimeters"````, ````"centimetres"````, ````"millimeters"````,  ````"millimetres"````, ````"yards"````, ````"feet"```` and ````"inches"````.
-     * @param {Number} [cfg.scale=1] The number of Real-space units in each World-space coordinate system unit.
-     * @param {Number[]} [cfg.origin=[0,0,0]] The Real-space 3D origin, in current measurement units, at which the World-space coordinate origin ````[0,0,0]```` sits.
-     * @param {Boolean} [cfg.saoEnabled=false] Whether to enable Scalable Ambient Obscurance (SAO) effect. See {@link SAO} for more info.
-     * @param {Boolean} [cfg.antialias=true] Whether to enable anti-aliasing.
-     * @throws {String} Throws an exception when both canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
-     * @param {Boolean} [cfg.alphaDepthMask=true] Whether writing into the depth buffer is enabled or disabled when rendering transparent objects.
-     * @param {Boolean} [cfg.entityOffsetsEnabled=false] Whether to enable {@link Entity#offset}. For best performance, only set this ````true```` when you need to use {@link Entity#offset}.
-     * @param {Boolean} [cfg.pickSurfacePrecisionEnabled=false] Whether to enable full-precision accuracy when surface picking with {@link Scene#pick}. Note that when ````true````, this configuration will increase the amount of browser memory used by the Viewer. The ````pickSurfacePrecision```` option for ````Scene#pick```` only works if this is set ````true````.
-     * @param {Boolean} [cfg.logarithmicDepthBufferEnabled=false] Whether to enable logarithmic depth buffer. When this is true,
-     * you can set huge values for {@link Perspective#far} and {@link Ortho#far}, to push the far clipping plane back so
-     * that it does not clip huge models.
-     * @param {Boolean} [cfg.colorTextureEnabled=true] Whether to enable base color texture rendering.
-     * @param {Boolean} [cfg.pbrEnabled=false] Whether to enable physically-based rendering.
-     * @param {LocaleService} [cfg.localeService=null] Optional locale-based translation service.
-     */
-    constructor(cfg) {
-
-        /**
-         * The Viewer's current language setting.
-         * @property language
-         * @deprecated
-         * @type {String}
-         */
-        this.language = "en";
-
-        /**
-         * The viewer's locale service.
-         *
-         * This is configured via the Viewer's constructor.
+         * The root {@link MetaObject}s belonging to this MetaScene, each mapped to its {@link MetaObject#id}.
          *
-         * By default, this service will be an instance of {@link LocaleService}, which will just return
-         * null translations for all given strings and phrases.
-         *
-         * @property localeService
-         * @type {LocaleService}
-         * @since 2.0
-         */
-        this.localeService = cfg.localeService || new LocaleService();
-
-        /**
-         * The Viewer's {@link Scene}.
-         * @property scene
-         * @type {Scene}
-         */
-        this.scene = new Scene(this, {
-            canvasId: cfg.canvasId,
-            canvasElement: cfg.canvasElement,
-            keyboardEventsElement: cfg.keyboardEventsElement,
-            contextAttr: {
-                preserveDrawingBuffer: cfg.preserveDrawingBuffer !== false,
-                premultipliedAlpha: (!!cfg.premultipliedAlpha),
-                antialias: (cfg.antialias !== false)
-            },
-            spinnerElementId: cfg.spinnerElementId,
-            transparent: (cfg.transparent !== false),
-            gammaInput: true,
-            gammaOutput: false,
-            backgroundColor: cfg.backgroundColor,
-            backgroundColorFromAmbientLight: cfg.backgroundColorFromAmbientLight,
-            ticksPerRender: 1,
-            ticksPerOcclusionTest: 20,
-            units: cfg.units,
-            scale: cfg.scale,
-            origin: cfg.origin,
-            saoEnabled: cfg.saoEnabled,
-            alphaDepthMask: (cfg.alphaDepthMask !== false),
-            entityOffsetsEnabled: (!!cfg.entityOffsetsEnabled),
-            pickSurfacePrecisionEnabled: (!!cfg.pickSurfacePrecisionEnabled),
-            logarithmicDepthBufferEnabled: (!!cfg.logarithmicDepthBufferEnabled),
-            pbrEnabled: (!!cfg.pbrEnabled),
-            colorTextureEnabled: (cfg.colorTextureEnabled !== false)
-        });
-
-        /**
-         * Metadata about the {@link Scene} and the models and objects within it.
-         * @property metaScene
-         * @type {MetaScene}
-         * @readonly
-         */
-        this.metaScene = new MetaScene(this, this.scene);
-
-        /**
-         * The Viewer's ID.
-         * @property id
-         *
-         * @type {String|Number}
-         */
-        this.id = cfg.id || this.scene.id;
-
-        /**
-         * The Viewer's {@link Camera}. This is also found on {@link Scene#camera}.
-         * @property camera
-         * @type {Camera}
-         */
-        this.camera = this.scene.camera;
-
-        /**
-         * The Viewer's {@link CameraFlightAnimation}, which
-         * is used to fly the {@link Scene}'s {@link Camera} to given targets.
-         * @property cameraFlight
-         * @type {CameraFlightAnimation}
+         * @type {{String:MetaObject}}
          */
-        this.cameraFlight = new CameraFlightAnimation(this.scene, {
-            duration: 0.5
-        });
+        this.rootMetaObjects = {};
 
         /**
-         * The Viewer's {@link CameraControl}, which
-         * controls the {@link Scene}'s {@link Camera} with mouse,  touch and keyboard input.
-         * @property cameraControl
-         * @type {CameraControl}
+         * Tracks number of MetaObjects of each type.
+         * @private
          */
-        this.cameraControl = new CameraControl(this.scene, {
-            // panToPointer: true,
-            doublePickFlyTo: true
-        });
-
-        this._plugins = [];
+        this._typeCounts = {};
 
         /**
          * Subscriptions to events sent with {@link fire}.
@@ -87369,15 +86938,467 @@ class Viewer {
         this._eventSubs = {};
     }
 
-    /**
-     * Returns the capabilities of this Viewer.
-     *
-     * @returns {{astcSupported: boolean, etc1Supported: boolean, pvrtcSupported: boolean, etc2Supported: boolean, dxtSupported: boolean, bptcSupported: boolean}}
-     */
-    get capabilities() {
-        return this.scene.capabilities;
-    }
-
+    /**
+     * Subscribes to an event fired at this Viewer.
+     *
+     * @param {String} event The event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event, callback) {
+        let subs = this._eventSubs[event];
+        if (!subs) {
+            subs = [];
+            this._eventSubs[event] = subs;
+        }
+        subs.push(callback);
+    }
+
+    /**
+     * Fires an event at this Viewer.
+     *
+     * @param {String} event Event name
+     * @param {Object} value Event parameters
+     */
+    fire(event, value) {
+        const subs = this._eventSubs[event];
+        if (subs) {
+            for (let i = 0, len = subs.length; i < len; i++) {
+                subs[i](value);
+            }
+        }
+    }
+
+    /**
+     * Unsubscribes from an event fired at this Viewer.
+     * @param event
+     */
+    off(event) { // TODO
+
+    }
+
+    /**
+     * Creates a {@link MetaModel} in this MetaScene.
+     *
+     * The MetaModel will contain a hierarchy of {@link MetaObject}s, created from the
+     * meta objects in ````metaModelData````.
+     *
+     * The meta object hierarchy in ````metaModelData```` is expected to be non-cyclic, with a single root. If the meta
+     * objects are cyclic, then this method will log an error and attempt to recover by creating a dummy root MetaObject
+     * of type "Model" and connecting all other MetaObjects as its direct children. If the meta objects contain multiple
+     * roots, then this method similarly attempts to recover by creating a dummy root MetaObject of type "Model" and
+     * connecting all the root MetaObjects as its children.
+     *
+     * @param {String} modelId ID for the new {@link MetaModel}, which will have {@link MetaModel#id} set to this value.
+     * @param {Object} metaModelData Data for the {@link MetaModel}.
+     * @param {Object} [options] Options for creating the {@link MetaModel}.
+     * @param {Object} [options.includeTypes] When provided, only create {@link MetaObject}s with types in this list.
+     * @param {Object} [options.excludeTypes] When provided, never create {@link MetaObject}s with types in this list.
+     * @param {Boolean} [options.globalizeObjectIds=false] Whether to globalize each {@link MetaObject#id}. Set this ````true```` when you need to load multiple instances of the same meta model, to avoid ID clashes between the meta objects in the different instances.
+     * @returns {MetaModel} The new MetaModel.
+     */
+    createMetaModel(modelId, metaModelData, options = {}) {
+
+        const projectId = metaModelData.projectId || "none";
+        const revisionId = metaModelData.revisionId || "none";
+        const newPropertySets = metaModelData.propertySets || [];
+        const newObjects = metaModelData.metaObjects || [];
+        const author = metaModelData.author;
+        const createdAt = metaModelData.createdAt;
+        const creatingApplication = metaModelData.creatingApplication;
+        const schema = metaModelData.schema;
+        // if (options.excludeTypes) {
+        //     excludeTypes = {};
+        //     for (let i = 0, len = options.excludeTypes.length; i < len; i++) {
+        //         includeTypes[options.excludeTypes[i]] = true;
+        //     }
+        // }
+
+        const metaModel = new MetaModel(this, modelId, projectId, revisionId, author, createdAt, creatingApplication, schema, [], null);
+
+        this.metaModels[modelId] = metaModel;
+
+        for (let i = 0, len = newPropertySets.length; i < len; i++) {
+            const propertySetCfg = newPropertySets[i];
+            const propertySetId = propertySetCfg.id;
+            const propertySet = new PropertySet(propertySetId, propertySetCfg.originalSystemId, propertySetCfg.name, propertySetCfg.type, propertySetCfg.properties);
+            metaModel.propertySets[propertySetId] = propertySet;
+            this.propertySets[propertySetId] = propertySet;
+        }
+
+        const filteredObjectsParams = []; // Params for each new metaobject that passes our filters
+        const existingObjects = []; // List of our metaobjects that are already existing, to which we'll also append new metaobjects we'll create
+        const createObjectsParams = []; // List of params for metaobjects we'll create
+
+
+        // Filter out the parameters we'll create
+
+        for (let i = 0, len = newObjects.length; i < len; i++) {
+            const newObject = newObjects[i];
+            newObject.type;
+            filteredObjectsParams.push(newObject);
+        }
+
+        // Build list of params for metaobjects we'll create
+
+        for (let i = 0, len = filteredObjectsParams.length; i < len; i++) {
+            let filteredObject = filteredObjectsParams[i];
+            const existingObject = this.metaObjects[filteredObject.id];
+            if (existingObject) {
+                existingObject.metaModels.push(metaModel);
+                existingObjects.push(existingObject);
+                continue;
+            }
+            createObjectsParams.push(filteredObject);
+        }
+
+        // Create metaobjects in the creation list, add them to list of existing metaobjects
+
+        for (let i = 0, len = createObjectsParams.length; i < len; i++) {
+            const createObject = createObjectsParams[i];
+            const type = createObject.type;
+            const objectId = createObject.id;
+            const originalSystemId = createObject.id;
+            const name = createObject.name;
+            const propertySets = [];
+            if (createObject.propertySetIds && createObject.propertySetIds.length > 0) {
+                for (let j = 0, lenj = createObject.propertySetIds.length; j < lenj; j++) {
+                    const propertySetId = createObject.propertySetIds[j];
+                    const propertySet = metaModel.propertySets[propertySetId];
+                    if (propertySet) {
+                        propertySets.push(propertySet);
+                    }
+                }
+            }
+            const parent = null;
+            const children = null;
+            const external = createObject.external;
+            const metaObject = new MetaObject(metaModel, objectId, originalSystemId, name, type, propertySets, parent, children, external);
+            metaObject._parentId = createObject.parent;
+            this.metaObjects[objectId] = metaObject;
+            (this.metaObjectsByType[type] || (this.metaObjectsByType[type] = {}))[objectId] = metaObject;
+            if (this._typeCounts[type] === undefined) {
+                this._typeCounts[type] = 1;
+            } else {
+                this._typeCounts[type]++;
+            }
+            existingObjects.push(metaObject);
+            if (createObject.parent === undefined || createObject.parent === null) ;
+        }
+
+        // Ensure that metaobjects in the existing metaobject list are all attached to their parents,
+        // or registered as root metaobjects
+
+        for (let i = 0, len = existingObjects.length; i < len; i++) {
+            const existingObject = existingObjects[i];
+            const objectId = existingObject.id;
+            if ((existingObject._parentId === undefined || existingObject._parentId === null) && !existingObject.parent) {
+                metaModel.rootMetaObject = existingObject; // Deprecated, and won't work for federated models
+                metaModel.rootMetaObjects[objectId] = existingObject;
+                this.rootMetaObjects[objectId] = existingObject;
+            } else if (existingObject._parentId) {
+                const parentId = existingObject._parentId;
+                existingObject._parentId = null;
+                let parentMetaObject = this.metaObjects[parentId];
+                if (parentMetaObject) {
+                    existingObject.parent = parentMetaObject;
+                    parentMetaObject.children = parentMetaObject.children || [];
+                    parentMetaObject.children.push(existingObject);
+                }
+            }
+        }
+
+        this.fire("metaModelCreated", modelId);
+        return metaModel;
+    }
+
+    /**
+     * Removes a {@link MetaModel} from this MetaScene.
+     *
+     * Fires a "metaModelDestroyed" event with the value of the {@link MetaModel#id}.
+     *
+     * @param {String} id ID of the target {@link MetaModel}.
+     */
+    destroyMetaModel(id) {
+        const metaModel = this.metaModels[id];
+        if (!metaModel) {
+            return;
+        }
+        this._removeMetaModel(metaModel);
+        this.fire("metaModelDestroyed", id);
+    }
+
+    _removeMetaModel(metaModel) {
+        const metaObjects = this.metaObjects;
+        const metaObjectsByType = this.metaObjectsByType;
+        let visit = (metaObject) => {
+            delete metaObjects[metaObject.id];
+            const types = metaObjectsByType[metaObject.type];
+            if (types && types[metaObject.id]) {
+                delete types[metaObject.id];
+                if (--this._typeCounts[metaObject.type] === 0) {
+                    delete this._typeCounts[metaObject.type];
+                    delete metaObjectsByType[metaObject.type];
+                }
+            }
+            const children = metaObject.children;
+            if (children) {
+                for (let i = 0, len = children.length; i < len; i++) {
+                    const childMetaObject = children[i];
+                    visit(childMetaObject);
+                }
+            }
+        };
+        visit(metaModel.rootMetaObject);
+        for (let propertySetId in metaModel.propertySets) {
+            if (metaModel.propertySets.hasOwnProperty(propertySetId)) {
+                delete this.propertySets[propertySetId];
+            }
+        }
+        delete this.metaModels[metaModel.id];
+    }
+
+    /**
+     * Gets the {@link MetaObject#id}s of the {@link MetaObject}s that have the given {@link MetaObject#type}.
+     *
+     * @param {String} type The type.
+     * @returns {String[]} Array of {@link MetaObject#id}s.
+     */
+    getObjectIDsByType(type) {
+        const metaObjects = this.metaObjectsByType[type];
+        return metaObjects ? Object.keys(metaObjects) : [];
+    }
+
+    /**
+     * Gets the {@link MetaObject#id}s of the {@link MetaObject}s within the given subtree.
+     *
+     * @param {String} id  ID of the root {@link MetaObject} of the given subtree.
+     * @param {String[]} [includeTypes] Optional list of types to include.
+     * @param {String[]} [excludeTypes] Optional list of types to exclude.
+     * @returns {String[]} Array of {@link MetaObject#id}s.
+     */
+    getObjectIDsInSubtree(id, includeTypes, excludeTypes) {
+        const list = [];
+        const metaObject = this.metaObjects[id];
+        const includeMask = (includeTypes && includeTypes.length > 0) ? arrayToMap(includeTypes) : null;
+        const excludeMask = (excludeTypes && excludeTypes.length > 0) ? arrayToMap(excludeTypes) : null;
+
+        function visit(metaObject) {
+            if (!metaObject) {
+                return;
+            }
+            var include = true;
+            if (excludeMask && excludeMask[metaObject.type]) {
+                include = false;
+            } else if (includeMask && (!includeMask[metaObject.type])) {
+                include = false;
+            }
+            if (include) {
+                list.push(metaObject.id);
+            }
+            const children = metaObject.children;
+            if (children) {
+                for (var i = 0, len = children.length; i < len; i++) {
+                    visit(children[i]);
+                }
+            }
+        }
+
+        visit(metaObject);
+        return list;
+    }
+
+    /**
+     * Iterates over the {@link MetaObject}s within the subtree.
+     *
+     * @param {String} id ID of root {@link MetaObject}.
+     * @param {Function} callback Callback fired at each {@link MetaObject}.
+     */
+    withMetaObjectsInSubtree(id, callback) {
+        const metaObject = this.metaObjects[id];
+        if (!metaObject) {
+            return;
+        }
+        metaObject.withMetaObjectsInSubtree(callback);
+    }
+}
+
+function arrayToMap(array) {
+    const map = {};
+    for (var i = 0, len = array.length; i < len; i++) {
+        map[array[i]] = true;
+    }
+    return map;
+}
+
+/**
+ * The 3D Viewer at the heart of the xeokit SDK.
+ *
+ * * A Viewer wraps a single {@link Scene}
+ * * Add {@link Plugin}s to a Viewer to extend its functionality.
+ * * {@link Viewer#metaScene} holds metadata about models in the
+ * Viewer's {@link MetaScene}.
+ * * Use {@link Viewer#cameraFlight} to fly or jump the {@link Scene}'s
+ * {@link Camera} to target positions, boundaries or {@link Entity}s.
+ *
+ * @public
+ */
+class Viewer {
+
+    /**
+     * @constructor
+     * @param {Object} cfg Viewer configuration.
+     * @param {String} [cfg.id] Optional ID for this Viewer, defaults to the ID of {@link Viewer#scene}, which xeokit automatically generates.
+     * @param {String} [cfg.canvasId]  ID of an existing HTML canvas for the {@link Viewer#scene} - either this or canvasElement is mandatory. When both values are given, the element reference is always preferred to the ID.
+     * @param {HTMLCanvasElement} [cfg.canvasElement] Reference of an existing HTML canvas for the {@link Viewer#scene} - either this or canvasId is mandatory. When both values are given, the element reference is always preferred to the ID.
+     * @param {HTMLElement} [cfg.keyboardEventsElement] Optional reference to HTML element on which key events should be handled. Defaults to the HTML Document.
+     * @param {String} [cfg.spinnerElementId]  ID of existing HTML element to show the {@link Spinner} - internally creates a default element automatically if this is omitted.
+     * @param {Number} [cfg.passes=1] The number of times the {@link Viewer#scene} renders per frame.
+     * @param {Boolean} [cfg.clearEachPass=false] When doing multiple passes per frame, specifies if to clear the canvas before each pass (true) or just before the first pass (false).
+     * @param {Boolean} [cfg.preserveDrawingBuffer=true]  Whether or not to preserve the WebGL drawing buffer. This needs to be ````true```` for {@link Viewer#getSnapshot} to work.
+     * @param {Boolean} [cfg.transparent=true]  Whether or not the canvas is transparent.
+     * @param {Boolean} [cfg.premultipliedAlpha=false]  Whether or not you want alpha composition with premultiplied alpha. Highlighting and selection works best when this is ````false````.
+     * @param {Boolean} [cfg.gammaInput=true]  When true, expects that all textures and colors are premultiplied gamma.
+     * @param {Boolean} [cfg.gammaOutput=false]  Whether or not to render with pre-multiplied gama.
+     * @param {Number} [cfg.gammaFactor=2.2] The gamma factor to use when rendering with pre-multiplied gamma.
+     * @param {Number[]} [cfg.backgroundColor=[1,1,1]] Sets the canvas background color to use when ````transparent```` is false.
+     * @param {Boolean} [cfg.backgroundColorFromAmbientLight=true] When ````transparent```` is false, set this ````true````
+     * to derive the canvas background color from {@link AmbientLight#color}, or ````false```` to set the canvas background to ````backgroundColor````.
+     * @param {String} [cfg.units="meters"] The measurement unit type. Accepted values are ````"meters"````, ````"metres"````, , ````"centimeters"````, ````"centimetres"````, ````"millimeters"````,  ````"millimetres"````, ````"yards"````, ````"feet"```` and ````"inches"````.
+     * @param {Number} [cfg.scale=1] The number of Real-space units in each World-space coordinate system unit.
+     * @param {Number[]} [cfg.origin=[0,0,0]] The Real-space 3D origin, in current measurement units, at which the World-space coordinate origin ````[0,0,0]```` sits.
+     * @param {Boolean} [cfg.saoEnabled=false] Whether to enable Scalable Ambient Obscurance (SAO) effect. See {@link SAO} for more info.
+     * @param {Boolean} [cfg.antialias=true] Whether to enable anti-aliasing.
+     * @throws {String} Throws an exception when both canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
+     * @param {Boolean} [cfg.alphaDepthMask=true] Whether writing into the depth buffer is enabled or disabled when rendering transparent objects.
+     * @param {Boolean} [cfg.entityOffsetsEnabled=false] Whether to enable {@link Entity#offset}. For best performance, only set this ````true```` when you need to use {@link Entity#offset}.
+     * @param {Boolean} [cfg.pickSurfacePrecisionEnabled=false] Whether to enable full-precision accuracy when surface picking with {@link Scene#pick}. Note that when ````true````, this configuration will increase the amount of browser memory used by the Viewer. The ````pickSurfacePrecision```` option for ````Scene#pick```` only works if this is set ````true````.
+     * @param {Boolean} [cfg.logarithmicDepthBufferEnabled=false] Whether to enable logarithmic depth buffer. When this is true,
+     * you can set huge values for {@link Perspective#far} and {@link Ortho#far}, to push the far clipping plane back so
+     * that it does not clip huge models.
+     * @param {Boolean} [cfg.colorTextureEnabled=true] Whether to enable base color texture rendering.
+     * @param {Boolean} [cfg.pbrEnabled=false] Whether to enable physically-based rendering.
+     * @param {LocaleService} [cfg.localeService=null] Optional locale-based translation service.
+     */
+    constructor(cfg) {
+
+        /**
+         * The Viewer's current language setting.
+         * @property language
+         * @deprecated
+         * @type {String}
+         */
+        this.language = "en";
+
+        /**
+         * The viewer's locale service.
+         *
+         * This is configured via the Viewer's constructor.
+         *
+         * By default, this service will be an instance of {@link LocaleService}, which will just return
+         * null translations for all given strings and phrases.
+         *
+         * @property localeService
+         * @type {LocaleService}
+         * @since 2.0
+         */
+        this.localeService = cfg.localeService || new LocaleService();
+
+        /**
+         * The Viewer's {@link Scene}.
+         * @property scene
+         * @type {Scene}
+         */
+        this.scene = new Scene(this, {
+            canvasId: cfg.canvasId,
+            canvasElement: cfg.canvasElement,
+            keyboardEventsElement: cfg.keyboardEventsElement,
+            contextAttr: {
+                preserveDrawingBuffer: cfg.preserveDrawingBuffer !== false,
+                premultipliedAlpha: (!!cfg.premultipliedAlpha),
+                antialias: (cfg.antialias !== false)
+            },
+            spinnerElementId: cfg.spinnerElementId,
+            transparent: (cfg.transparent !== false),
+            gammaInput: true,
+            gammaOutput: false,
+            backgroundColor: cfg.backgroundColor,
+            backgroundColorFromAmbientLight: cfg.backgroundColorFromAmbientLight,
+            ticksPerRender: 1,
+            ticksPerOcclusionTest: 20,
+            units: cfg.units,
+            scale: cfg.scale,
+            origin: cfg.origin,
+            saoEnabled: cfg.saoEnabled,
+            alphaDepthMask: (cfg.alphaDepthMask !== false),
+            entityOffsetsEnabled: (!!cfg.entityOffsetsEnabled),
+            pickSurfacePrecisionEnabled: (!!cfg.pickSurfacePrecisionEnabled),
+            logarithmicDepthBufferEnabled: (!!cfg.logarithmicDepthBufferEnabled),
+            pbrEnabled: (!!cfg.pbrEnabled),
+            colorTextureEnabled: (cfg.colorTextureEnabled !== false)
+        });
+
+        /**
+         * Metadata about the {@link Scene} and the models and objects within it.
+         * @property metaScene
+         * @type {MetaScene}
+         * @readonly
+         */
+        this.metaScene = new MetaScene(this, this.scene);
+
+        /**
+         * The Viewer's ID.
+         * @property id
+         *
+         * @type {String|Number}
+         */
+        this.id = cfg.id || this.scene.id;
+
+        /**
+         * The Viewer's {@link Camera}. This is also found on {@link Scene#camera}.
+         * @property camera
+         * @type {Camera}
+         */
+        this.camera = this.scene.camera;
+
+        /**
+         * The Viewer's {@link CameraFlightAnimation}, which
+         * is used to fly the {@link Scene}'s {@link Camera} to given targets.
+         * @property cameraFlight
+         * @type {CameraFlightAnimation}
+         */
+        this.cameraFlight = new CameraFlightAnimation(this.scene, {
+            duration: 0.5
+        });
+
+        /**
+         * The Viewer's {@link CameraControl}, which
+         * controls the {@link Scene}'s {@link Camera} with mouse,  touch and keyboard input.
+         * @property cameraControl
+         * @type {CameraControl}
+         */
+        this.cameraControl = new CameraControl(this.scene, {
+            // panToPointer: true,
+            doublePickFlyTo: true
+        });
+
+        this._plugins = [];
+
+        /**
+         * Subscriptions to events sent with {@link fire}.
+         * @private
+         */
+        this._eventSubs = {};
+    }
+
+    /**
+     * Returns the capabilities of this Viewer.
+     *
+     * @returns {{astcSupported: boolean, etc1Supported: boolean, pvrtcSupported: boolean, etc2Supported: boolean, dxtSupported: boolean, bptcSupported: boolean}}
+     */
+    get capabilities() {
+        return this.scene.capabilities;
+    }
+
     /**
      * Subscribes to an event fired at this Viewer.
      *
@@ -103174,142 +103195,398 @@ class StoreyViewsPlugin extends Plugin {
 }
 
 /**
- * Tests if {@link TreeViewPlugin} would be able to create a "types" hierarchy for the given {@link MetaModel}.
+ * @desc A {@link Viewer} plugin that provides an HTML tree view to navigate the IFC elements in models.
+ * <br>
  *
- * @param {MetaModel} metaModel The MetaModel.
- * @param {String[]} errors Accumulates messages for validation errors.
- * @return {boolean} Returns ````true```` if no errors found, else ````false````.
- */
-function validateMetaModelForTreeViewTypesHierarchy(metaModel, errors) {
-    const rootMetaObject = metaModel.rootMetaObject;
-    if (!rootMetaObject) {
-        errors.push("Can't build types hierarchy: model is empty");
-        return false;
-    }
-    return true;
-}
-
-/**
- * Tests if {@link TreeViewPlugin} would be able to create a "storeys" hierarchy for the given {@link MetaModel}.
+ * <a href="https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_WestRiverSideHospital" style="border: 1px solid black;"><img src="http://xeokit.io/img/docs/TreeViewPlugin/TreeViewPlugin.png"></a>
  *
- * @param {MetaModel} metaModel The MetaModel.
- * @param {String[]} errors Accumulates messages for validation errors.
- * @return {boolean} Returns ````true```` if no errors found, else ````false````.
- */
-function validateMetaModelForTreeViewStoreysHierarchy(metaModel, errors) {
-    const rootMetaObject = metaModel.rootMetaObject;
-    if (!rootMetaObject) {
-        errors.push("Can't build storeys hierarchy: model is empty");
-        return false;
-    }
-    return _validateMetaModelForStoreysHierarchy(rootMetaObject, errors);
-}
-
-/**
- * Tests if {@link TreeViewPlugin} would be able to create a "containment" hierarchy for the given {@link MetaModel}.
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_WestRiverSideHospital)]
  *
- * @param {MetaModel} metaModel The MetaModel.
- * @param {String[]} errors Accumulates messages for validation errors.
- * @return {boolean} Returns ````true```` if no errors found, else ````false````.
- */
-function validateMetaModelForTreeViewContainmentHierarchy(metaModel, errors) {
-    const rootMetaObject = metaModel.rootMetaObject;
-    if (!rootMetaObject) {
-        errors.push("Can't build containment hierarchy: model is empty");
-        return false;
-    }
-    return true;
-}
-
-/**
- * @private
- */
-function _validateMetaModelForStoreysHierarchy(metaObject, errors, level = 0, ctx, buildingNode) {
-    ctx = ctx || {
-        foundIFCBuildingStoreys: false
-    };
-    const metaObjectType = metaObject.type;
-    const children = metaObject.children;
-    if (metaObjectType === "IfcBuilding") {
-        buildingNode = true;
-    } else if (metaObjectType === "IfcBuildingStorey") {
-        if (!buildingNode) {
-            errors.push("Can't build storeys hierarchy: IfcBuildingStorey found without parent IfcBuilding");
-            return false;
-        }
-        ctx.foundIFCBuildingStoreys = true;
-    }
-    if (children) {
-        for (let i = 0, len = children.length; i < len; i++) {
-            const childMetaObject = children[i];
-            if (!_validateMetaModelForStoreysHierarchy(childMetaObject, errors, level + 1, ctx, buildingNode)) {
-                return false;
-            }
-        }
-    }
-    if (level === 0) {
-        if (!ctx.foundIFCBuildingStoreys) ;
-    }
-    return true;
-}
-
-const idMap = new Map$1();
-
-/**
- * @desc Represents a model tree view within a {@link TreeViewPlugin}.
+ * ## Overview
+ *
+ * * A fast HTML tree view, with zero external dependencies, that works with huge numbers of objects.
+ * * Each tree node has a checkbox to control the visibility of its object.
+ * * Has three hierarchy modes: "containment", "types" and "storeys".
+ * * Automatically contains all models (that have metadata) that are currently in the {@link Scene}.
+ * * Sorts tree nodes by default - spatially, from top-to-bottom for ````IfcBuildingStorey```` nodes, and alphanumerically for other nodes.
+ * * Allows custom CSS styling.
+ * * Use {@link ContextMenu} to create a context menu for the tree nodes.
+ *
+ * ## Credits
+ *
+ * TreeViewPlugin is based on techniques described in [*Super Fast Tree View in JavaScript*](https://chrissmith.xyz/super-fast-tree-view-in-javascript/) by [Chris Smith](https://twitter.com/chris22smith).
+ *
+ * ## Usage
+ *
+ * In the example below, we'll add a TreeViewPlugin which, by default, will automatically show the structural
+ * hierarchy of the IFC elements in each model we load.
+ *
+ * Then we'll use an {@link XKTLoaderPlugin} to load the Schependomlaan model from an
+ * [.xkt file](https://github.com/xeokit/xeokit-sdk/tree/master/examples/models/xkt/schependomlaan).
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_Schependomlaan)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, TreeViewPlugin} from "xeokit-sdk.es.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 TreeViewPlugin(viewer, {
+ *     containerElement: document.getElementById("myTreeViewContainer")
+ * });
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *     id: "myModel",
+ *     src: "./models/xkt/Schependomlaan.xkt",
+ *     edges: true
+ * });
+ * ````
+ *
+ * ## Manually Adding Models
+ *
+ * Instead of adding models automatically, we can control which models appear in our TreeViewPlugin by adding them manually.
+ *
+ * In the next example, we'll configure the TreeViewPlugin to not add models automatically. Then, once the model
+ * has loaded, we'll add it manually using {@link TreeViewPlugin#addModel}.
+ *
+ * ````javascript
+ * const treeView = new TreeViewPlugin(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.xkt",
+ *     edges: true
+ * });
+ *
+ * model.on("loaded", () => {
+ *      treeView.addModel(model.id);
+ * });
+ * ````
+ *
+ * Adding models manually also allows us to set some options for the model. For example, the ````rootName```` option allows us to provide a custom name for
+ * the root node, which is sometimes desirable when the model's "IfcProject" element's name is not suitable:
+ *
+ * ````javascript
+ * model.on("loaded", () => {
+ *      treeView.addModel(model.id, {
+ *          rootName: "Schependomlaan Model"
+ *      });
+ * });
+ * ````
+ *
+ * ## Initially Expanding the Hierarchy
+ *
+ * We can also configure TreeViewPlugin 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:
+ *
+ * ````javascript
+ * const treeView = new TreeViewPlugin(viewer, {
+ *      containerElement: document.getElementById("myTreeViewContainer"),
+ *      autoExpandDepth: 3
+ * });
+ * ````
+ *
+ * ## Showing a Node by ID
+ *
+ * We can show a given node using its ID. This causes the TreeViewPlugin to collapse, then expand and scroll the node into view, then highlight the node.
+ *
+ * See the documentation for the {@link TreeViewPlugin#showNode} method for more information, including how to define a custom highlighted appearance for the node using CSS.
+ *
+ * Let's make the TreeViewPlugin show the node corresponding to whatever object {@link Entity} that we pick:
+ *
+ * ````javascript
+ * viewer.cameraControl.on("picked", function (e) {
+ *     var objectId = e.entity.id;
+ *     treeView.showNode(objectId);
+ * });
+ * ````
+ *
+ * This will de-highlight any node that was previously shown by this method.
+ *
+ * Note that this method only works if the picked {@link Entity} is an object that belongs to a model that's represented in the TreeViewPlugin.
+ *
+ * ## Customizing Appearance
+ *
+ * We can customize the appearance of our TreeViewPlugin by defining custom CSS for its HTML
+ * elements. See our example's [source code](https://github.com/xeokit/xeokit-sdk/blob/master/examples/BIMOffline_XKT_Schependomlaan.html)
+ * for an example of custom CSS rules.
+ *
+ * ## Model Hierarchies
+ *
+ * TreeViewPlugin has three hierarchies for organizing its nodes:
+ *
+ * * "containment" - organizes the tree nodes to indicate the containment hierarchy of the {@link MetaObject}s.
+ * * "types" - groups nodes by their IFC types.
+ * * "storeys" - groups nodes within their ````IfcBuildingStoreys````, and sub-groups them by their IFC types.
+ *
+ * <br>
+ * The table below shows what the hierarchies look like:
+ * <br>
+ *
+ * | 1. Containment Hierarchy | 2. Types Hierarchy | 3. Storeys Hierarchy |
+ * |---|---|---|
+ * | <img src="http://xeokit.io/img/docs/TreeViewPlugin/structureMode.png"> | <img src="http://xeokit.io/img/docs/TreeViewPlugin/typesMode.png"> | <img src="http://xeokit.io/img/docs/TreeViewPlugin/storeysMode.png"> |
+ * <br>
+ *
+ * Let's create a TreeViewPlugin that groups nodes by their building stories and IFC types:
+ *
+ * ````javascript
+ * const treeView = new TreeViewPlugin(viewer, {
+ *      containerElement: document.getElementById("myTreeViewContainer"),
+ *      hierarchy: "stories"
+ * });
+ * ````
+ *
+ * ## Sorting Nodes
+ *
+ * TreeViewPlugin sorts its tree nodes by default. For a "storeys" hierarchy, it orders ````IfcBuildingStorey```` nodes
+ * spatially, with the node for the highest story at the top, down to the lowest at the bottom.
+ *
+ * For all the hierarchy types ("containment", "classes" and "storeys"), TreeViewPlugin sorts the other node types
+ * alphanumerically on their titles.
+ *
+ * If for some reason you need to prevent sorting, create your TreeViewPlugin with the option disabled, like so:
+ *
+ * ````javascript
+ * const treeView = new TreeViewPlugin(viewer, {
+ *      containerElement: document.getElementById("myTreeViewContainer"),
+ *      hierarchy: "stories",
+ *      sortNodes: false // <<------ Disable node sorting
+ * });
+ * ````
+ *
+ * Note that, for all hierarchy modes, node sorting is only done for each model at the time that it is added to the TreeViewPlugin, and will not
+ * update dynamically if we later transform the {@link Entity}s corresponding to the nodes.
+ *
+ * ## Pruning empty nodes
+ *
+ * Sometimes a model contains subtrees of objects that don't have any geometry. These are models whose
+ * {@link MetaModel} contains trees of {@link MetaObject}s that don't have any {@link Entity}s in the {@link Scene}.
+ *
+ * For these models, the tree view would contain nodes that don't do anything in the Scene when we interact with them,
+ * which is undesirable.
+ *
+ * By default, TreeViewPlugin will not create nodes for those objects. However, we can override that behaviour if we want
+ * to have nodes for those objects (perhaps for debugging the model):
+ *
+ * ````javascript
+ * const treeView = new TreeViewPlugin(viewer, {
+ *      containerElement: document.getElementById("myTreeViewContainer"),
+ *      hierarchy: "stories",
+ *      pruneEmptyNodes: false // <<------ Create nodes for object subtrees without geometry
+ * });
+ * ````
+ *
+ * ## Context Menu
+ *
+ * TreeViewPlugin fires a "contextmenu" event whenever we right-click on a tree node.
+ *
+ * The event contains:
+ *
+ * * ````event```` - the original [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+ * * ````viewer```` - the {@link Viewer}
+ * * ````treeViewPlugin```` - the TreeViewPlugin
+ * * ````treeViewNode```` - the {@link TreeViewNode} representing the tree node
+ *<br><br>
+ *
+ * Let's use {@link ContextMenu} to show a simple context menu for the node we clicked.
+ *
+ * [[Run an example](https://xeokit.github.io/xeokit-sdk/examples/#ContextMenu_Canvas_TreeViewPlugin_Custom)]
+ *
+ * ````javascript
+ * import {ContextMenu} from "../src/extras/ContextMenu/ContextMenu.js";
+ *
+ * const treeViewContextMenu = new ContextMenu({
+ *     items: [
+ *         [
+ *             [
+ *                 {
+ *                     title: "Hide",
+ *                     doAction: function (context) {
+ *                         context.treeViewPlugin.withNodeTree(context.treeViewNode, (treeViewNode) => {
+ *                             if (treeViewNode.objectId) {
+ *                                 const entity = context.viewer.scene.objects[treeViewNode.objectId];
+ *                                 if (entity) {
+ *                                     entity.visible = false;
+ *                                 }
+ *                             }
+ *                         });
+ *                     }
+ *                 },
+ *                 {
+ *                     title: "Hide all",
+ *                     doAction: function (context) {
+ *                         context.viewer.scene.setObjectsVisible(context.viewer.scene.visibleObjectIds, false);
+ *                     }
+ *                 }
+ *             ],
+ *             [
+ *                 {
+ *                     title: "Show",
+ *                     doAction: function (context) {
+ *                         context.treeViewPlugin.withNodeTree(context.treeViewNode, (treeViewNode) => {
+ *                             if (treeViewNode.objectId) {
+ *                                 const entity = context.viewer.scene.objects[treeViewNode.objectId];
+ *                                 if (entity) {
+ *                                     entity.visible = true;
+ *                                     entity.xrayed = false;
+ *                                     entity.selected = false;
+ *                                 }
+ *                             }
+ *                         });
+ *                     }
+ *                 },
+ *                 {
+ *                     title: "Show all",
+ *                     doAction: function (context) {
+ *                         const scene = context.viewer.scene;
+ *                         scene.setObjectsVisible(scene.objectIds, true);
+ *                         scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+ *                         scene.setObjectsSelected(scene.selectedObjectIds, false);
+ *                     }
+ *                 }
+ *             ]
+ *         ]
+ *     ]
+ * });
+ *
+ * treeView.on("contextmenu", (e) => {
+ *
+ *     const event = e.event;                           // MouseEvent
+ *     const viewer = e.viewer;                         // Viewer
+ *     const treeViewPlugin = e.treeViewPlugin;         // TreeViewPlugin
+ *     const treeViewNode = e.treeViewNode;             // TreeViewNode
+ *
+ *     treeViewContextMenu.show(e.event.pageX, e.event.pageY);
+ *
+ *     treeViewContextMenu.context = {
+ *         viewer: e.viewer,
+ *         treeViewPlugin: e.treeViewPlugin,
+ *         treeViewNode: e.treeViewNode
+ *     };
+ * });
+ * ````
+ *
+ * ## Clicking Node Titles
+ *
+ * TreeViewPlugin fires a "nodeTitleClicked" event whenever we left-click on a tree node.
+ *
+ * Like the "contextmenu" event, this event contains:
+ *
+ * * ````event```` - the original [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+ * * ````viewer```` - the {@link Viewer}
+ * * ````treeViewPlugin```` - the TreeViewPlugin
+ * * ````treeViewNode```` - the {@link TreeViewNode} representing the tree node
+ *<br><br>
+ *
+ * Let's register a callback to isolate and fit-to-view the {@link Entity}(s) represented by the node. This callback is
+ * going to X-ray all the other Entitys, fly the camera to fit the Entity(s) for the clicked node, then hide the other Entitys.
+ *
+ * [[Run an example](https://xeokit.github.io/xeokit-sdk/examples/#ContextMenu_Canvas_TreeViewPlugin_Custom)]
+ *
+ * ````javascript
+ * treeView.on("nodeTitleClicked", (e) => {
+ *     const scene = viewer.scene;
+ *     const objectIds = [];
+ *     e.treeViewPlugin.withNodeTree(e.treeViewNode, (treeViewNode) => {
+ *         if (treeViewNode.objectId) {
+ *             objectIds.push(treeViewNode.objectId);
+ *         }
+ *     });
+ *     scene.setObjectsXRayed(scene.objectIds, true);
+ *     scene.setObjectsVisible(scene.objectIds, true);
+ *     scene.setObjectsXRayed(objectIds, false);
+ *     viewer.cameraFlight.flyTo({
+ *         aabb: scene.getAABB(objectIds),
+ *         duration: 0.5
+ *     }, () => {
+ *         setTimeout(function () {
+ *             scene.setObjectsVisible(scene.xrayedObjectIds, false);
+ *             scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+ *         }, 500);
+ *     });
+ * });
+ * ````
+ *
+ * To make the cursor change to a pointer when we hover over the node titles, and also to make the titles change to blue, we'll also define this CSS for the ````<span>```` elements
+ * that represent the titles of our TreeViewPlugin nodes:
+ *
+ * ````css
+ * #treeViewContainer ul li span:hover {
+ *      color: blue;
+ *      cursor: pointer;
+ * }
+ * ````
  *
- * * Stored in {@link treeViewPlugin#modelTreeViews}, mapped to the model ID.
- * * Created by each call to {@link TreeViewPlugin#addModel}.
+ * @class TreeViewPlugin
  */
-class ModelTreeView {
+class TreeViewPlugin extends Plugin {
 
     /**
-     * @private
+     * @constructor
+     *
+     * @param {Viewer} viewer The Viewer.
+     * @param {*} cfg Plugin configuration.
+     * @param {HTMLElement} cfg.containerElement DOM element to contain the TreeViewPlugin.
+     * @param {Boolean} [cfg.autoAddModels=true] When ````true```` (default), will automatically add each model as it's created. Set this ````false```` if you want to manually add models using {@link TreeViewPlugin#addModel} instead.
+     * @param {Number} [cfg.autoExpandDepth] Optional depth to which to initially expand the tree.
+     * @param {String} [cfg.hierarchy="containment"] How to organize the tree nodes: "containment", "storeys" or "types". See the class documentation for details.
+     * @param {Boolean} [cfg.sortNodes=true] When true, will sort the children of each node. For a "storeys" hierarchy, the
+     * ````IfcBuildingStorey```` nodes will be ordered spatially, from the highest storey down to the lowest, on the
+     * vertical World axis. For all hierarchy types, other node types will be ordered in the ascending alphanumeric order of their titles.
+     * @param {Boolean} [cfg.pruneEmptyNodes=true] When true, will not contain nodes that don't have content in the {@link Scene}. These are nodes whose {@link MetaObject}s don't have {@link Entity}s.
      */
-    constructor(viewer, treeViewPlugin, model, metaModel, cfg) {
-
-        if (!cfg.containerElement) {
-            throw "Config expected: containerElement";
-        }
+    constructor(viewer, cfg = {}) {
 
-        const rootMetaObject = metaModel.rootMetaObject;
-        if (!rootMetaObject) {
-            return;
-        }
+        super("TreeViewPlugin", viewer);
 
         /**
-         * Contains messages for any errors found in the MetaModel for this ModelTreeView.
+         * Contains messages for any errors found while last rebuilding this TreeView.
          * @type {String[]}
          */
         this.errors = [];
 
         /**
-         * True if errors were found in the MetaModel for this ModelTreeView.
+         * True if errors were found generating this TreeView.
          * @type {boolean}
          */
         this.valid = true;
 
-        /**
-         * The MetaModel corresponding to this ModelTreeView.
-         * @type {MetaModel}
-         */
-        this.metaModel = metaModel;
+        if (!cfg.containerElement) {
+            this.error("Config expected: containerElement");
+            return;
+        }
 
-        this._id = idMap.addItem();
-        this._baseId = "" + this._id;
-        this._viewer = viewer;
-        this._treeViewPlugin = treeViewPlugin;
-        this._rootMetaObject = rootMetaObject;
         this._containerElement = cfg.containerElement;
+        this._metaModels = {};
+        this._autoAddModels = (cfg.autoAddModels !== false);
+        this._autoExpandDepth = (cfg.autoExpandDepth || 0);
+        this._sortNodes = (cfg.sortNodes !== false);
+        this._pruneEmptyNodes = (cfg.pruneEmptyNodes !== false);
+        this._viewer = viewer;
         this._rootElement = null;
         this._muteSceneEvents = false;
         this._muteTreeEvents = false;
         this._rootNodes = [];
-        this._objectNodes = {};
+        this._objectNodes = {}; // Object ID -> Node
         this._rootName = cfg.rootName;
         this._sortNodes = cfg.sortNodes;
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
-
         this._showListItemElementId = null;
 
         this._containerElement.oncontextmenu = (e) => {
@@ -103362,43 +103639,41 @@ class ModelTreeView {
         });
 
         this._onObjectXrayed = this._viewer.scene.on('objectXRayed', (entity) => {
-          if (this._muteSceneEvents) {
-            return;
-          }
-          const objectId = entity.id;
-          const node = this._objectNodes[objectId];
-          if (!node) {
-            return; // Not in this tree
-          }
-    
-          this._muteTreeEvents = true;
-          const xrayed = entity.xrayed;
-          const updated = (xrayed !== node.xrayed);
-          if (!updated) {
-            return;
-          }
-          node.xrayed = xrayed;
-          const listItemElementId = 'node-' + node.nodeId;
-          const listItemElement = document.getElementById(listItemElementId);
-          if (listItemElement !== null) {
-            if (xrayed) {
-              listItemElement.classList.add('xrayed-node');
-            } else {
-              listItemElement.classList.remove('xrayed-node');
+            if (this._muteSceneEvents) {
+                return;
             }
-          }
-    
-          this._muteTreeEvents = false;
+            const objectId = entity.id;
+            const node = this._objectNodes[objectId];
+            if (!node) {
+                return; // Not in this tree
+            }
+            this._muteTreeEvents = true;
+            const xrayed = entity.xrayed;
+            const updated = (xrayed !== node.xrayed);
+            if (!updated) {
+                return;
+            }
+            node.xrayed = xrayed;
+            const listItemElementId = 'node-' + node.nodeId;
+            const listItemElement = document.getElementById(listItemElementId);
+            if (listItemElement !== null) {
+                if (xrayed) {
+                    listItemElement.classList.add('xrayed-node');
+                } else {
+                    listItemElement.classList.remove('xrayed-node');
+                }
+            }
+            this._muteTreeEvents = false;
         });
 
-        this.switchExpandHandler = (event) => {
+        this._switchExpandHandler = (event) => {
             event.preventDefault();
             event.stopPropagation();
             const switchElement = event.target;
             this._expandSwitchElement(switchElement);
         };
 
-        this.switchCollapseHandler = (event) => {
+        this._switchCollapseHandler = (event) => {
             event.preventDefault();
             event.stopPropagation();
             const switchElement = event.target;
@@ -103413,7 +103688,7 @@ class ModelTreeView {
             const checkbox = event.target;
             const visible = checkbox.checked;
             const nodeId = checkbox.id;
-            const checkedObjectId = this._nodeToObjectID(nodeId);
+            const checkedObjectId = nodeId;
             const checkedNode = this._objectNodes[checkedObjectId];
             const objects = this._viewer.scene.objects;
             let numUpdated = 0;
@@ -103456,30 +103731,44 @@ class ModelTreeView {
         this._hierarchy = cfg.hierarchy || "containment";
         this._autoExpandDepth = cfg.autoExpandDepth || 0;
 
-        this._createNodes();
-    }
-
-    _nodeToObjectID(nodeId) {
-        return nodeId.substring(this._baseId.length);
-    }
-
-    _objectToNodeID(objectId) {
-        return this._baseId + objectId;
-    }
+        if (this._autoAddModels) {
+            const modelIds = Object.keys(this.viewer.metaScene.metaModels);
+            for (let i = 0, len = modelIds.length; i < len; i++) {
+                const modelId = modelIds[i];
+                this.addModel(modelId);
+            }
+            this.viewer.scene.on("modelLoaded", (modelId) => {
+                if (this.viewer.metaScene.metaModels[modelId]) {
+                    this.addModel(modelId);
+                }
+            });
+        }
 
-    /**
-     * @private
-     * @param depth
-     */
-    setAutoExpandDepth(depth = 0) {
-        this._autoExpandDepth = depth;
+        this.hierarchy = cfg.hierarchy;
     }
 
     /**
-     * @private
-     * @param hierarchy
+     * Sets how the nodes are organized within this tree view.
+     *
+     * Accepted values are:
+     *
+     * * "containment" - organizes the nodes to indicate the containment hierarchy of the IFC objects.
+     * * "types" - groups the nodes within their IFC types.
+     * * "storeys" - groups the nodes within ````IfcBuildingStoreys```` and sub-groups them by their IFC types.
+     *
+     * <br>
+     * This can be updated dynamically.
+     *
+     * Default value is "containment".
+     *
+     * @type {String}
      */
-    setHierarchy(hierarchy) {
+    set hierarchy(hierarchy) {
+        hierarchy = hierarchy || "containment";
+        if (hierarchy !== "containment" && hierarchy !== "storeys" && hierarchy !== "types") {
+            this.error("Unsupported value for `hierarchy' - defaulting to 'containment'");
+            hierarchy = "containment";
+        }
         if (this._hierarchy === hierarchy) {
             return;
         }
@@ -103487,38 +103776,287 @@ class ModelTreeView {
         this._createNodes();
     }
 
-    _createNodes() {
-        if (this._rootElement) {
-            this._rootElement.parentNode.removeChild(this._rootElement);
-            this._rootElement = null;
-        }
-        this._rootNodes = [];
-        this._objectNodes = {};
-        this._validate();
-        if (this.valid || (this._hierarchy !== "storeys")) {
-            this._createEnabledNodes();
-        } else {
-            this._createDisabledNodes();
-        }
+    /**
+     * Gets how the nodes are organized within this tree view.
+     *
+     * @type {String}
+     */
+    get hierarchy() {
+        return this._hierarchy;
     }
 
-    _validate() {
-        this.errors = [];
-        switch (this._hierarchy) {
-            case "storeys":
-                this.valid = validateMetaModelForTreeViewStoreysHierarchy(this.metaModel, this.errors);
-                break;
-            case "types":
-                this.valid = validateMetaModelForTreeViewTypesHierarchy(this.metaModel, this.errors);
-                break;
-            case "containment":
-            default:
-                this.valid = validateMetaModelForTreeViewContainmentHierarchy(this.metaModel, this.errors);
+    /**
+     * Adds a model to this tree view.
+     *
+     * 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 TreeViewPlugin constructor.
+     *
+     * @param {String} modelId ID of a model {@link Entity} in {@link Scene#models}.
+     * @param {Object} [options] Options for model in the tree view.
+     * @param {String} [options.rootName] Optional display name for the root node. Ordinary, for "containment"
+     * and "storeys" hierarchy types, the tree would derive the root node name from the model's "IfcProject" element
+     * name. This option allows to override that name when it is not suitable as a display name.
+     */
+    addModel(modelId, options = {}) {
+        if (!this._containerElement) {
+            return;
+        }
+        const model = this.viewer.scene.models[modelId];
+        if (!model) {
+            throw "Model not found: " + modelId;
+        }
+        const metaModel = this.viewer.metaScene.metaModels[modelId];
+        if (!metaModel) {
+            this.error("MetaModel not found: " + modelId);
+            return;
+        }
+        if (this._metaModels[modelId]) {
+            this.warn("Model already added: " + modelId);
+            return;
+        }
+        this._metaModels[modelId] = metaModel;
+        model.on("destroyed", () => {
+            this.removeModel(model.id);
+        });
+        this._createNodes();
+    }
+
+    /**
+     * Removes a model from this tree view.
+     *
+     * Does nothing if model not currently in tree view.
+     *
+     * @param {String} modelId ID of a model {@link Entity} in {@link Scene#models}.
+     */
+    removeModel(modelId) {
+        if (!this._containerElement) {
+            return;
+        }
+        const metaModel = this._metaModels[modelId];
+        if (!metaModel) {
+            return;
+        }
+        delete this._metaModels[modelId];
+        this._createNodes();
+    }
+
+    /**
+     * Highlights the tree view node that represents the given object {@link Entity}.
+     *
+     * This causes the tree view to collapse, then expand to reveal the node, then highlight the node.
+     *
+     * If a node is previously highlighted, de-highlights that node and collapses the tree first.
+     *
+     * Note that if the TreeViewPlugin was configured with ````pruneEmptyNodes: true```` (default configuration), then the
+     * node won't exist in the tree if it has no Entitys in the {@link Scene}. in that case, nothing will happen.
+     *
+     * Within the DOM, the node is represented by an ````<li>```` element. This method will add a ````.highlighted-node```` class to
+     * the element to make it appear highlighted, removing that class when de-highlighting it again. See the CSS rules
+     * in the TreeViewPlugin examples for an example of that class.
+     *
+     * @param {String} objectId ID of the {@link Entity}.
+     */
+    showNode(objectId) {
+        if (this._showListItemElementId) {
+            this.unShowNode();
+        }
+        const node = this._objectNodes[objectId];
+        if (!node) {
+            return; // Node may not exist for the given object if (this._pruneEmptyNodes == true)
+        }
+        const nodeId = node.nodeId;
+        const switchElementId = "switch-" + nodeId;
+        const switchElement = document.getElementById(switchElementId);
+        if (switchElement) {
+            this._expandSwitchElement(switchElement);
+            switchElement.scrollIntoView();
+            return;
+        }
+        const path = [];
+        path.unshift(node);
+        let parent = node.parent;
+        while (parent) {
+            path.unshift(parent);
+            parent = parent.parent;
+        }
+        for (let i = 0, len = path.length; i < len; i++) {
+            const node = path[i];
+            const nodeId = node.nodeId;
+            const switchElementId = "switch-" + nodeId;
+            const switchElement = document.getElementById(switchElementId);
+            if (switchElement) {
+                this._expandSwitchElement(switchElement);
+            }
+        }
+        const listItemElementId = 'node-' + nodeId;
+        const listItemElement = document.getElementById(listItemElementId);
+        listItemElement.scrollIntoView({block: "center"});
+        listItemElement.classList.add("highlighted-node");
+        this._showListItemElementId = listItemElementId;
+    }
+
+    /**
+     * De-highlights the node previously shown with {@link TreeViewPlugin#showNode}.
+     *
+     * Does nothing if no node is currently shown.
+     *
+     * If the node is currently scrolled into view, keeps the node in view.
+     */
+    unShowNode() {
+        if (!this._showListItemElementId) {
+            return;
+        }
+        const listItemElement = document.getElementById(this._showListItemElementId);
+        if (!listItemElement) {
+            this._showListItemElementId = null;
+            return;
+        }
+        listItemElement.classList.remove("highlighted-node");
+        this._showListItemElementId = null;
+    }
+
+    /**
+     * Expands the tree to the given depth.
+     *
+     * Collapses the tree first.
+     *
+     * @param {Number} depth Depth to expand to.
+     */
+    expandToDepth(depth) {
+        this.collapse();
+        const expand = (node, countDepth) => {
+            if (countDepth === depth) {
+                return;
+            }
+            const nodeId = node.nodeId;
+            const switchElementId = "switch-" + nodeId;
+            const switchElement = document.getElementById(switchElementId);
+            if (switchElement) {
+                this._expandSwitchElement(switchElement);
+                const childNodes = node.children;
+                for (var i = 0, len = childNodes.length; i < len; i++) {
+                    const childNode = childNodes[i];
+                    expand(childNode, countDepth + 1);
+                }
+            }
+        };
+        for (let i = 0, len = this._rootNodes.length; i < len; i++) {
+            const rootNode = this._rootNodes[i];
+            expand(rootNode, 0);
+        }
+    }
+
+    /**
+     * Closes all the nodes in the tree.
+     */
+    collapse() {
+        for (let i = 0, len = this._rootNodes.length; i < len; i++) {
+            const rootNode = this._rootNodes[i];
+            const objectId = rootNode.objectId;
+            this._collapseNode(objectId);
+        }
+    }
+
+    /**
+     * Iterates over a subtree of the tree view's {@link TreeViewNode}s, calling the given callback for each
+     * node in depth-first pre-order.
+     *
+     * @param {TreeViewNode} node Root of the subtree.
+     * @param {Function} callback Callback called at each {@link TreeViewNode}, with the TreeViewNode given as the argument.
+     */
+    withNodeTree(node, callback) {
+        callback(node);
+        const children = node.children;
+        if (!children) {
+            return;
+        }
+        for (let i = 0, len = children.length; i < len; i++) {
+            this.withNodeTree(children[i], callback);
+        }
+    }
+
+    /**
+     * Destroys this TreeViewPlugin.
+     */
+    destroy() {
+        if (!this._containerElement) {
+            return;
+        }
+        this._metaModels = {};
+        if (this._rootElement && !this._destroyed) {
+            this._rootElement.parentNode.removeChild(this._rootElement);
+            this._viewer.scene.off(this._onObjectVisibility);
+            this._destroyed = true;
+        }
+        super.destroy();
+    }
+
+    _createNodes() {
+        if (this._rootElement) {
+            this._rootElement.parentNode.removeChild(this._rootElement);
+            this._rootElement = null;
+        }
+
+        this._rootNodes = [];
+        this._objectNodes = {};
+        this._validate();
+        if (this.valid || (this._hierarchy !== "storeys")) {
+            this._createEnabledNodes();
+        } else {
+            this._createDisabledNodes();
+        }
+    }
+
+    _validate() {
+        this.errors = [];
+        switch (this._hierarchy) {
+            case "storeys":
+                this.valid = this._validateMetaModelForStoreysHierarchy();
+                break;
+            case "types":
+                this.valid = (this._rootNodes.length > 0);
+                break;
+            case "containment":
+            default:
+                this.valid = (this._rootNodes.length > 0);
                 break;
         }
         return this.valid;
     }
 
+    _validateMetaModelForStoreysHierarchy(level = 0, ctx, buildingNode) {
+        // ctx = ctx || {
+        //     foundIFCBuildingStoreys: false
+        // };
+        // const metaObjectType = metaObject.type;
+        // const children = metaObject.children;
+        // if (metaObjectType === "IfcBuilding") {
+        //     buildingNode = true;
+        // } else if (metaObjectType === "IfcBuildingStorey") {
+        //     if (!buildingNode) {
+        //         errors.push("Can't build storeys hierarchy: IfcBuildingStorey found without parent IfcBuilding");
+        //         return false;
+        //     }
+        //     ctx.foundIFCBuildingStoreys = true;
+        // }
+        // if (children) {
+        //     for (let i = 0, len = children.length; i < len; i++) {
+        //         const childMetaObject = children[i];
+        //         if (!this._validateMetaModelForStoreysHierarchy(childMetaObject, errors, level + 1, ctx, buildingNode)) {
+        //             return false;
+        //         }
+        //     }
+        // }
+        // if (level === 0) {
+        //     if (!ctx.foundIFCBuildingStoreys) {
+        //         // errors.push("Can't build storeys hierarchy: no IfcBuildingStoreys found");
+        //     }
+        // }
+        return true;
+    }
+
     _createEnabledNodes() {
         if (this._pruneEmptyNodes) {
             this._findEmptyNodes();
@@ -103527,7 +104065,7 @@ class ModelTreeView {
             case "storeys":
                 this._createStoreysNodes();
                 if (this._rootNodes.length === 0) {
-                    this._treeViewPlugin.error("Failed to build storeys hierarchy for model '" + this.metaModel.id + "' - perhaps this model is not an IFC model?");
+                    this.error("Failed to build storeys hierarchy");
                 }
                 break;
             case "types":
@@ -103547,32 +104085,42 @@ class ModelTreeView {
 
     _createDisabledNodes() {
 
-        const metaObject = this._rootMetaObject;
-        const metaObjectType = metaObject.type;
-        const metaObjectName = metaObject.name;
-
-        const rootName = ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType);
-
         const ul = document.createElement('ul');
-        const li = document.createElement('li');
-        ul.appendChild(li);
-        this._containerElement.appendChild(ul);
         this._rootElement = ul;
+        this._containerElement.appendChild(ul);
 
-        const switchElement = document.createElement('a');
-        switchElement.href = '#';
-        switchElement.textContent = '!';
-        switchElement.classList.add('warn');
-        switchElement.classList.add('warning');
-        li.appendChild(switchElement);
+        const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+        for (let i = 0, len = rootMetaObjects.length; i < len; i++) {
+            const rootMetaObject = rootMetaObjects[i];
+            const metaObjectType = rootMetaObject.type;
+            const metaObjectName = rootMetaObject.name;
+            const rootName = ((metaObjectName && metaObjectName !== ""
+                && metaObjectName !== "Undefined"
+                && metaObjectName !== "Default") ? metaObjectName : metaObjectType);
+            const li = document.createElement('li');
+            ul.appendChild(li);
+            const switchElement = document.createElement('a');
+            switchElement.href = '#';
+            switchElement.textContent = '!';
+            switchElement.classList.add('warn');
+            switchElement.classList.add('warning');
+            li.appendChild(switchElement);
+            const span = document.createElement('span');
+            span.textContent = rootName;
+            li.appendChild(span);
+        }
+    }
 
-        const span = document.createElement('span');
-        span.textContent = rootName;
-        li.appendChild(span);
+
+    _findEmptyNodes() {
+        const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+        for (let i = 0, len = rootMetaObjects.length; i < len; i++) {
+            this._findEmptyNodes2(rootMetaObjects[i]);
+        }
     }
 
-    _findEmptyNodes(metaObject = this._rootMetaObject, countEntities = 0) {
-        const viewer = this._treeViewPlugin.viewer;
+    _findEmptyNodes2(metaObject, countEntities = 0) {
+        const viewer = this.viewer;
         const scene = viewer.scene;
         const children = metaObject.children;
         const objectId = metaObject.id;
@@ -103584,18 +104132,21 @@ class ModelTreeView {
         if (children) {
             for (let i = 0, len = children.length; i < len; i++) {
                 const childMetaObject = children[i];
-                childMetaObject._countEntities = this._findEmptyNodes(childMetaObject);
+                childMetaObject._countEntities = this._findEmptyNodes2(childMetaObject);
                 metaObject._countEntities += childMetaObject._countEntities;
             }
         }
         return metaObject._countEntities;
     }
 
-    _createStoreysNodes(
-        metaObject = this._rootMetaObject,
-        buildingNode,
-        storeyNode,
-        typeNodes) {
+    _createStoreysNodes() {
+        const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+        for (let id in rootMetaObjects) {
+            this._createStoreysNodes2(rootMetaObjects[id], null, null, null);
+        }
+    }
+
+    _createStoreysNodes2(metaObject, buildingNode, storeyNode, typeNodes) {
         if (this._pruneEmptyNodes && (metaObject._countEntities === 0)) {
             return;
         }
@@ -103605,7 +104156,7 @@ class ModelTreeView {
         const objectId = metaObject.id;
         if (metaObjectType === "IfcBuilding") {
             buildingNode = {
-                nodeId: this._objectToNodeID(objectId),
+                nodeId: objectId,
                 objectId: objectId,
                 title: this._rootName || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
                 type: metaObjectType,
@@ -103620,11 +104171,11 @@ class ModelTreeView {
             this._objectNodes[buildingNode.objectId] = buildingNode;
         } else if (metaObjectType === "IfcBuildingStorey") {
             if (!buildingNode) {
-                this._treeViewPlugin.error("Failed to build storeys hierarchy for model '" + this.metaModel.id + "' - model does not have an IfcBuilding object, or is not an IFC model");
+                this.error("Failed to build storeys hierarchy for model '" + this.metaModel.id + "' - model does not have an IfcBuilding object, or is not an IFC model");
                 return;
             }
             storeyNode = {
-                nodeId: this._objectToNodeID(objectId),
+                nodeId: objectId,
                 objectId: objectId,
                 title: (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
                 type: metaObjectType,
@@ -103647,7 +104198,7 @@ class ModelTreeView {
                     let typeNode = typeNodes[metaObjectType];
                     if (!typeNode) {
                         const typeNodeObjectId = storeyNode.objectId + "." + metaObjectType;
-                        const typeNodeNodeId = this._objectToNodeID(typeNodeObjectId);
+                        const typeNodeNodeId = typeNodeObjectId;
                         typeNode = {
                             nodeId: typeNodeNodeId,
                             objectId: typeNodeObjectId,
@@ -103665,7 +104216,7 @@ class ModelTreeView {
                         typeNodes[metaObjectType] = typeNode;
                     }
                     const node = {
-                        nodeId: this._objectToNodeID(objectId),
+                        nodeId: objectId,
                         objectId: objectId,
                         title: (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
                         type: metaObjectType,
@@ -103684,12 +104235,19 @@ class ModelTreeView {
         if (children) {
             for (let i = 0, len = children.length; i < len; i++) {
                 const childMetaObject = children[i];
-                this._createStoreysNodes(childMetaObject, buildingNode, storeyNode, typeNodes);
+                this._createStoreysNodes2(childMetaObject, buildingNode, storeyNode, typeNodes);
             }
         }
     }
 
-    _createTypesNodes(metaObject = this._rootMetaObject, rootNode, typeNodes) {
+    _createTypesNodes() {
+        const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+        for (let id in rootMetaObjects) {
+            this._createTypesNodes2(rootMetaObjects[id], null, null);
+        }
+    }
+
+    _createTypesNodes2(metaObject, rootNode, typeNodes) {
         if (this._pruneEmptyNodes && (metaObject._countEntities === 0)) {
             return;
         }
@@ -103697,9 +104255,9 @@ class ModelTreeView {
         const metaObjectName = metaObject.name;
         const children = metaObject.children;
         const objectId = metaObject.id;
-        if (metaObject.id === this._rootMetaObject.id) {
+        if (!metaObject.parent) {
             rootNode = {
-                nodeId: this._objectToNodeID(objectId),
+                nodeId: objectId,
                 objectId: objectId,
                 title: this._rootName || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
                 type: metaObjectType,
@@ -103721,7 +104279,7 @@ class ModelTreeView {
                     let typeNode = typeNodes[metaObjectType];
                     if (!typeNode) {
                         typeNode = {
-                            nodeId: this._objectToNodeID(rootNode.objectId + "." + metaObjectType),
+                            nodeId: rootNode.objectId + "." + metaObjectType,
                             objectId: rootNode.objectId + "." + metaObjectType,
                             title: metaObjectType,
                             type: metaObjectType,
@@ -103737,7 +104295,7 @@ class ModelTreeView {
                         typeNodes[metaObjectType] = typeNode;
                     }
                     const node = {
-                        nodeId: this._objectToNodeID(objectId),
+                        nodeId: objectId,
                         objectId: objectId,
                         title: (metaObjectName && metaObjectName !== "" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
                         type: metaObjectType,
@@ -103756,12 +104314,19 @@ class ModelTreeView {
         if (children) {
             for (let i = 0, len = children.length; i < len; i++) {
                 const childMetaObject = children[i];
-                this._createTypesNodes(childMetaObject, rootNode, typeNodes);
+                this._createTypesNodes2(childMetaObject, rootNode, typeNodes);
             }
         }
     }
 
-    _createContainmentNodes(metaObject = this._rootMetaObject, parent) {
+    _createContainmentNodes() {
+        const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+        for (let id in rootMetaObjects) {
+            this._createContainmentNodes2(rootMetaObjects[id], null);
+        }
+    }
+
+    _createContainmentNodes2(metaObject, parent) {
         if (this._pruneEmptyNodes && (metaObject._countEntities === 0)) {
             return;
         }
@@ -103770,7 +104335,7 @@ class ModelTreeView {
         const children = metaObject.children;
         const objectId = metaObject.id;
         const node = {
-            nodeId: this._objectToNodeID(objectId),
+            nodeId: objectId,
             objectId: objectId,
             title: (!parent) ? (this._rootName || metaObjectName) : (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
             type: metaObjectType,
@@ -103791,7 +104356,7 @@ class ModelTreeView {
         if (children) {
             for (let i = 0, len = children.length; i < len; i++) {
                 const childMetaObject = children[i];
-                this._createContainmentNodes(childMetaObject, node);
+                this._createContainmentNodes2(childMetaObject, node);
             }
         }
     }
@@ -103821,7 +104386,7 @@ class ModelTreeView {
     }
 
     _getSpatialSortFunc() { // Creates cached sort func with Viewer in scope
-        const viewer = this._treeViewPlugin.viewer;
+        const viewer = this.viewer;
         const scene = viewer.scene;
         const camera = scene.camera;
         const metaScene = viewer.metaScene;
@@ -103866,8 +104431,7 @@ class ModelTreeView {
     }
 
     _synchNodesToEntities() {
-        const rootMetaObject = this._rootMetaObject;
-        const objectIds = rootMetaObject.getObjectIDsInSubtree();
+        const objectIds = Object.keys(this.viewer.metaScene.metaObjects);
         const metaObjects = this._viewer.metaScene.metaObjects;
         const objects = this._viewer.scene.objects;
         for (let i = 0, len = objectIds.length; i < len; i++) {
@@ -103934,7 +104498,7 @@ class ModelTreeView {
         //const nodeId = this._objectToNodeID(node.objectId);
         const nodeId = node.nodeId;
         if (node.xrayed) {
-          nodeElement.classList.add('xrayed-node');
+            nodeElement.classList.add('xrayed-node');
         }
         nodeElement.id = 'node-' + nodeId;
         if (node.children.length > 0) {
@@ -103944,7 +104508,7 @@ class ModelTreeView {
             switchElement.id = switchElementId;
             switchElement.textContent = '+';
             switchElement.classList.add('plus');
-            switchElement.addEventListener('click', this.switchExpandHandler);
+            switchElement.addEventListener('click', this._switchExpandHandler);
             nodeElement.appendChild(switchElement);
         }
         const checkbox = document.createElement('input');
@@ -103958,19 +104522,19 @@ class ModelTreeView {
         span.textContent = node.title;
         nodeElement.appendChild(span);
         span.oncontextmenu = (e) => {
-            this._treeViewPlugin.fire("contextmenu", {
+            this.fire("contextmenu", {
                 event: e,
                 viewer: this._viewer,
-                treeViewPlugin: this._treeViewPlugin,
+                treeViewPlugin: this,
                 treeViewNode: node
             });
             e.preventDefault();
         };
         span.onclick = (e) => {
-            this._treeViewPlugin.fire("nodeTitleClicked", {
+            this.fire("nodeTitleClicked", {
                 event: e,
                 viewer: this._viewer,
-                treeViewPlugin: this._treeViewPlugin,
+                treeViewPlugin: this,
                 treeViewNode: node
             });
             e.preventDefault();
@@ -103978,103 +104542,6 @@ class ModelTreeView {
         return nodeElement;
     }
 
-    /**
-     * @private
-     * @param depth
-     */
-    expandToDepth(depth) {
-        const expand = (node, countDepth) => {
-            if (countDepth === depth) {
-                return;
-            }
-            const nodeId = node.nodeId;
-            const switchElementId = "switch-" + nodeId;
-            const switchElement = document.getElementById(switchElementId);
-            if (switchElement) {
-                this._expandSwitchElement(switchElement);
-                const childNodes = node.children;
-                for (var i = 0, len = childNodes.length; i < len; i++) {
-                    const childNode = childNodes[i];
-                    expand(childNode, countDepth + 1);
-                }
-            }
-        };
-        for (let i = 0, len = this._rootNodes.length; i < len; i++) {
-            const rootNode = this._rootNodes[i];
-            expand(rootNode, 0);
-        }
-    }
-
-    /**
-     * @private
-     */
-    collapse() {
-        for (let i = 0, len = this._rootNodes.length; i < len; i++) {
-            const rootNode = this._rootNodes[i];
-            const objectId = rootNode.objectId;
-            this._collapseNode(objectId);
-        }
-    }
-
-    /**
-     * @private
-     * @param objectId
-     */
-    showNode(objectId) {
-        if (this._showListItemElementId) {
-            this.unShowNode();
-        }
-        const node = this._objectNodes[objectId];
-        if (!node) {
-            return; // Node may not exist for the given object if (this._pruneEmptyNodes == true)
-        }
-        const nodeId = node.nodeId;
-        const switchElementId = "switch-" + nodeId;
-        const switchElement = document.getElementById(switchElementId);
-        if (switchElement) {
-            this._expandSwitchElement(switchElement);
-            switchElement.scrollIntoView();
-            return;
-        }
-        const path = [];
-        path.unshift(node);
-        let parent = node.parent;
-        while (parent) {
-            path.unshift(parent);
-            parent = parent.parent;
-        }
-        for (let i = 0, len = path.length; i < len; i++) {
-            const node = path[i];
-            const nodeId = node.nodeId;
-            const switchElementId = "switch-" + nodeId;
-            const switchElement = document.getElementById(switchElementId);
-            if (switchElement) {
-                this._expandSwitchElement(switchElement);
-            }
-        }
-        const listItemElementId = 'node-' + nodeId;
-        const listItemElement = document.getElementById(listItemElementId);
-        listItemElement.scrollIntoView({block: "center"});
-        listItemElement.classList.add("highlighted-node");
-        this._showListItemElementId = listItemElementId;
-    }
-
-    /**
-     * @private
-     */
-    unShowNode() {
-        if (!this._showListItemElementId) {
-            return;
-        }
-        const listItemElement = document.getElementById(this._showListItemElementId);
-        if (!listItemElement) {
-            this._showListItemElementId = null;
-            return;
-        }
-        listItemElement.classList.remove("highlighted-node");
-        this._showListItemElementId = null;
-    }
-
     _expandSwitchElement(switchElement) {
         const parentElement = switchElement.parentElement;
         const expanded = parentElement.getElementsByTagName('li')[0];
@@ -104082,7 +104549,7 @@ class ModelTreeView {
             return;
         }
         const nodeId = parentElement.id.replace('node-', '');
-        const objectId = this._nodeToObjectID(nodeId);
+        const objectId = nodeId;
         const switchNode = this._objectNodes[objectId];
         const childNodes = switchNode.children;
         const nodeElements = childNodes.map((node) => {
@@ -104096,12 +104563,12 @@ class ModelTreeView {
         switchElement.classList.remove('plus');
         switchElement.classList.add('minus');
         switchElement.textContent = '-';
-        switchElement.removeEventListener('click', this.switchExpandHandler);
-        switchElement.addEventListener('click', this.switchCollapseHandler);
+        switchElement.removeEventListener('click', this._switchExpandHandler);
+        switchElement.addEventListener('click', this._switchCollapseHandler);
     }
 
     _collapseNode(objectId) {
-        const nodeId = this._objectToNodeID(objectId);
+        const nodeId = objectId;
         const switchElementId = "switch-" + nodeId;
         const switchElement = document.getElementById(switchElementId);
         this._collapseSwitchElement(switchElement);
@@ -104123,641 +104590,8 @@ class ModelTreeView {
         switchElement.classList.remove('minus');
         switchElement.classList.add('plus');
         switchElement.textContent = '+';
-        switchElement.removeEventListener('click', this.switchCollapseHandler);
-        switchElement.addEventListener('click', this.switchExpandHandler);
-    }
-
-    /**
-     * Destroys this ModelTreeView.
-     * @private
-     */
-    destroy() {
-        if (this._rootElement && !this._destroyed) {
-            this._rootElement.parentNode.removeChild(this._rootElement);
-            this._viewer.scene.off(this._onObjectVisibility);
-            this._destroyed = true;
-            idMap.removeItem(this._id);
-        }
-    }
-}
-
-/**
- * @desc A {@link Viewer} plugin that provides an HTML tree view to navigate the IFC elements in models.
- * <br>
- *
- * <a href="https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_WestRiverSideHospital" style="border: 1px solid black;"><img src="http://xeokit.io/img/docs/TreeViewPlugin/TreeViewPlugin.png"></a>
- *
- * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_WestRiverSideHospital)]
- *
- * ## Overview
- *
- * * A fast HTML tree view, with zero external dependencies, that works with huge numbers of objects.
- * * Each tree node has a checkbox to control the visibility of its object.
- * * Has three hierarchy modes: "containment", "types" and "storeys".
- * * Automatically contains all models (that have metadata) that are currently in the {@link Scene}.
- * * Sorts tree nodes by default - spatially, from top-to-bottom for ````IfcBuildingStorey```` nodes, and alphanumerically for other nodes.
- * * Allows custom CSS styling.
- * * Use {@link ContextMenu} to create a context menu for the tree nodes.
- *
- * ## Credits
- *
- * TreeViewPlugin is based on techniques described in [*Super Fast Tree View in JavaScript*](https://chrissmith.xyz/super-fast-tree-view-in-javascript/) by [Chris Smith](https://twitter.com/chris22smith).
- *
- * ## Usage
- *
- * In the example below, we'll add a TreeViewPlugin which, by default, will automatically show the structural
- * hierarchy of the IFC elements in each model we load.
- *
- * Then we'll use an {@link XKTLoaderPlugin} to load the Schependomlaan model from an
- * [.xkt file](https://github.com/xeokit/xeokit-sdk/tree/master/examples/models/xkt/schependomlaan).
- *
- * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_XKT_Schependomlaan)]
- *
- * ````javascript
- * import {Viewer, XKTLoaderPlugin, TreeViewPlugin} from "xeokit-sdk.es.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 TreeViewPlugin(viewer, {
- *     containerElement: document.getElementById("myTreeViewContainer")
- * });
- *
- * const xktLoader = new XKTLoaderPlugin(viewer);
- *
- * const model = xktLoader.load({
- *     id: "myModel",
- *     src: "./models/xkt/Schependomlaan.xkt",
- *     edges: true
- * });
- * ````
- *
- * ## Manually Adding Models
- *
- * Instead of adding models automatically, we can control which models appear in our TreeViewPlugin by adding them manually.
- *
- * In the next example, we'll configure the TreeViewPlugin to not add models automatically. Then, once the model
- * has loaded, we'll add it manually using {@link TreeViewPlugin#addModel}.
- *
- * ````javascript
- * const treeView = new TreeViewPlugin(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.xkt",
- *     edges: true
- * });
- *
- * model.on("loaded", () => {
- *      treeView.addModel(model.id);
- * });
- * ````
- *
- * Adding models manually also allows us to set some options for the model. For example, the ````rootName```` option allows us to provide a custom name for
- * the root node, which is sometimes desirable when the model's "IfcProject" element's name is not suitable:
- *
- * ````javascript
- * model.on("loaded", () => {
- *      treeView.addModel(model.id, {
- *          rootName: "Schependomlaan Model"
- *      });
- * });
- * ````
- *
- * ## Initially Expanding the Hierarchy
- *
- * We can also configure TreeViewPlugin 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:
- *
- * ````javascript
- * const treeView = new TreeViewPlugin(viewer, {
- *      containerElement: document.getElementById("myTreeViewContainer"),
- *      autoExpandDepth: 3
- * });
- * ````
- *
- * ## Showing a Node by ID
- *
- * We can show a given node using its ID. This causes the TreeViewPlugin to collapse, then expand and scroll the node into view, then highlight the node.
- *
- * See the documentation for the {@link TreeViewPlugin#showNode} method for more information, including how to define a custom highlighted appearance for the node using CSS.
- *
- * Let's make the TreeViewPlugin show the node corresponding to whatever object {@link Entity} that we pick:
- *
- * ````javascript
- * viewer.cameraControl.on("picked", function (e) {
- *     var objectId = e.entity.id;
- *     treeView.showNode(objectId);
- * });
- * ````
- *
- * This will de-highlight any node that was previously shown by this method.
- *
- * Note that this method only works if the picked {@link Entity} is an object that belongs to a model that's represented in the TreeViewPlugin.
- *
- * ## Customizing Appearance
- *
- * We can customize the appearance of our TreeViewPlugin by defining custom CSS for its HTML
- * elements. See our example's [source code](https://github.com/xeokit/xeokit-sdk/blob/master/examples/BIMOffline_XKT_Schependomlaan.html)
- * for an example of custom CSS rules.
- *
- * ## Model Hierarchies
- *
- * TreeViewPlugin has three hierarchies for organizing its nodes:
- *
- * * "containment" - organizes the tree nodes to indicate the containment hierarchy of the {@link MetaObject}s.
- * * "types" - groups nodes by their IFC types.
- * * "storeys" - groups nodes within their ````IfcBuildingStoreys````, and sub-groups them by their IFC types.
- *
- * <br>
- * The table below shows what the hierarchies look like:
- * <br>
- *
- * | 1. Containment Hierarchy | 2. Types Hierarchy | 3. Storeys Hierarchy |
- * |---|---|---|
- * | <img src="http://xeokit.io/img/docs/TreeViewPlugin/structureMode.png"> | <img src="http://xeokit.io/img/docs/TreeViewPlugin/typesMode.png"> | <img src="http://xeokit.io/img/docs/TreeViewPlugin/storeysMode.png"> |
- * <br>
- *
- * Let's create a TreeViewPlugin that groups nodes by their building stories and IFC types:
- *
- * ````javascript
- * const treeView = new TreeViewPlugin(viewer, {
- *      containerElement: document.getElementById("myTreeViewContainer"),
- *      hierarchy: "stories"
- * });
- * ````
- *
- * ## Sorting Nodes
- *
- * TreeViewPlugin sorts its tree nodes by default. For a "storeys" hierarchy, it orders ````IfcBuildingStorey```` nodes
- * spatially, with the node for the highest story at the top, down to the lowest at the bottom.
- *
- * For all the hierarchy types ("containment", "classes" and "storeys"), TreeViewPlugin sorts the other node types
- * alphanumerically on their titles.
- *
- * If for some reason you need to prevent sorting, create your TreeViewPlugin with the option disabled, like so:
- *
- * ````javascript
- * const treeView = new TreeViewPlugin(viewer, {
- *      containerElement: document.getElementById("myTreeViewContainer"),
- *      hierarchy: "stories",
- *      sortNodes: false // <<------ Disable node sorting
- * });
- * ````
- *
- * Note that, for all hierarchy modes, node sorting is only done for each model at the time that it is added to the TreeViewPlugin, and will not
- * update dynamically if we later transform the {@link Entity}s corresponding to the nodes.
- *
- * ## Pruning empty nodes
- *
- * Sometimes a model contains subtrees of objects that don't have any geometry. These are models whose
- * {@link MetaModel} contains trees of {@link MetaObject}s that don't have any {@link Entity}s in the {@link Scene}.
- *
- * For these models, the tree view would contain nodes that don't do anything in the Scene when we interact with them,
- * which is undesirable.
- *
- * By default, TreeViewPlugin will not create nodes for those objects. However, we can override that behaviour if we want
- * to have nodes for those objects (perhaps for debugging the model):
- *
- * ````javascript
- * const treeView = new TreeViewPlugin(viewer, {
- *      containerElement: document.getElementById("myTreeViewContainer"),
- *      hierarchy: "stories",
- *      pruneEmptyNodes: false // <<------ Create nodes for object subtrees without geometry
- * });
- * ````
- *
- * ## Context Menu
- *
- * TreeViewPlugin fires a "contextmenu" event whenever we right-click on a tree node.
- *
- * The event contains:
- *
- * * ````event```` - the original [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- * * ````viewer```` - the {@link Viewer}
- * * ````treeViewPlugin```` - the TreeViewPlugin
- * * ````treeViewNode```` - the {@link TreeViewNode} representing the tree node
- *<br><br>
- *
- * Let's use {@link ContextMenu} to show a simple context menu for the node we clicked.
- *
- * [[Run an example](https://xeokit.github.io/xeokit-sdk/examples/#ContextMenu_Canvas_TreeViewPlugin_Custom)]
- *
- * ````javascript
- * import {ContextMenu} from "../src/extras/ContextMenu/ContextMenu.js";
- *
- * const treeViewContextMenu = new ContextMenu({
- *     items: [
- *         [
- *             [
- *                 {
- *                     title: "Hide",
- *                     doAction: function (context) {
- *                         context.treeViewPlugin.withNodeTree(context.treeViewNode, (treeViewNode) => {
- *                             if (treeViewNode.objectId) {
- *                                 const entity = context.viewer.scene.objects[treeViewNode.objectId];
- *                                 if (entity) {
- *                                     entity.visible = false;
- *                                 }
- *                             }
- *                         });
- *                     }
- *                 },
- *                 {
- *                     title: "Hide all",
- *                     doAction: function (context) {
- *                         context.viewer.scene.setObjectsVisible(context.viewer.scene.visibleObjectIds, false);
- *                     }
- *                 }
- *             ],
- *             [
- *                 {
- *                     title: "Show",
- *                     doAction: function (context) {
- *                         context.treeViewPlugin.withNodeTree(context.treeViewNode, (treeViewNode) => {
- *                             if (treeViewNode.objectId) {
- *                                 const entity = context.viewer.scene.objects[treeViewNode.objectId];
- *                                 if (entity) {
- *                                     entity.visible = true;
- *                                     entity.xrayed = false;
- *                                     entity.selected = false;
- *                                 }
- *                             }
- *                         });
- *                     }
- *                 },
- *                 {
- *                     title: "Show all",
- *                     doAction: function (context) {
- *                         const scene = context.viewer.scene;
- *                         scene.setObjectsVisible(scene.objectIds, true);
- *                         scene.setObjectsXRayed(scene.xrayedObjectIds, false);
- *                         scene.setObjectsSelected(scene.selectedObjectIds, false);
- *                     }
- *                 }
- *             ]
- *         ]
- *     ]
- * });
- *
- * treeView.on("contextmenu", (e) => {
- *
- *     const event = e.event;                           // MouseEvent
- *     const viewer = e.viewer;                         // Viewer
- *     const treeViewPlugin = e.treeViewPlugin;         // TreeViewPlugin
- *     const treeViewNode = e.treeViewNode;             // TreeViewNode
- *
- *     treeViewContextMenu.show(e.event.pageX, e.event.pageY);
- *
- *     treeViewContextMenu.context = {
- *         viewer: e.viewer,
- *         treeViewPlugin: e.treeViewPlugin,
- *         treeViewNode: e.treeViewNode
- *     };
- * });
- * ````
- *
- * ## Clicking Node Titles
- *
- * TreeViewPlugin fires a "nodeTitleClicked" event whenever we left-click on a tree node.
- *
- * Like the "contextmenu" event, this event contains:
- *
- * * ````event```` - the original [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- * * ````viewer```` - the {@link Viewer}
- * * ````treeViewPlugin```` - the TreeViewPlugin
- * * ````treeViewNode```` - the {@link TreeViewNode} representing the tree node
- *<br><br>
- *
- * Let's register a callback to isolate and fit-to-view the {@link Entity}(s) represented by the node. This callback is
- * going to X-ray all the other Entitys, fly the camera to fit the Entity(s) for the clicked node, then hide the other Entitys.
- *
- * [[Run an example](https://xeokit.github.io/xeokit-sdk/examples/#ContextMenu_Canvas_TreeViewPlugin_Custom)]
- *
- * ````javascript
- * treeView.on("nodeTitleClicked", (e) => {
- *     const scene = viewer.scene;
- *     const objectIds = [];
- *     e.treeViewPlugin.withNodeTree(e.treeViewNode, (treeViewNode) => {
- *         if (treeViewNode.objectId) {
- *             objectIds.push(treeViewNode.objectId);
- *         }
- *     });
- *     scene.setObjectsXRayed(scene.objectIds, true);
- *     scene.setObjectsVisible(scene.objectIds, true);
- *     scene.setObjectsXRayed(objectIds, false);
- *     viewer.cameraFlight.flyTo({
- *         aabb: scene.getAABB(objectIds),
- *         duration: 0.5
- *     }, () => {
- *         setTimeout(function () {
- *             scene.setObjectsVisible(scene.xrayedObjectIds, false);
- *             scene.setObjectsXRayed(scene.xrayedObjectIds, false);
- *         }, 500);
- *     });
- * });
- * ````
- *
- * To make the cursor change to a pointer when we hover over the node titles, and also to make the titles change to blue, we'll also define this CSS for the ````<span>```` elements
- * that represent the titles of our TreeViewPlugin nodes:
- *
- * ````css
- * #treeViewContainer ul li span:hover {
- *      color: blue;
- *      cursor: pointer;
- * }
- * ````
- *
- * @class TreeViewPlugin
- */
-class TreeViewPlugin extends Plugin {
-
-    /**
-     * @constructor
-     *
-     * @param {Viewer} viewer The Viewer.
-     * @param {*} cfg Plugin configuration.
-     * @param {HTMLElement} cfg.containerElement DOM element to contain the TreeViewPlugin.
-     * @param {Boolean} [cfg.autoAddModels=true] When ````true```` (default), will automatically add each model as it's created. Set this ````false```` if you want to manually add models using {@link TreeViewPlugin#addModel} instead.
-     * @param {Number} [cfg.autoExpandDepth] Optional depth to which to initially expand the tree.
-     * @param {String} [cfg.hierarchy="containment"] How to organize the tree nodes: "containment", "storeys" or "types". See the class documentation for details.
-     * @param {Boolean} [cfg.sortNodes=true] When true, will sort the children of each node. For a "storeys" hierarchy, the
-     * ````IfcBuildingStorey```` nodes will be ordered spatially, from the highest storey down to the lowest, on the
-     * vertical World axis. For all hierarchy types, other node types will be ordered in the ascending alphanumeric order of their titles.
-     * @param {Boolean} [cfg.pruneEmptyNodes=true] When true, will not contain nodes that don't have content in the {@link Scene}. These are nodes whose {@link MetaObject}s don't have {@link Entity}s.
-     */
-    constructor(viewer, cfg = {}) {
-
-        super("TreeViewPlugin", viewer);
-
-        if (!cfg.containerElement) {
-            this.error("Config expected: containerElement");
-            return;
-        }
-
-        this._containerElement = cfg.containerElement;
-        this._modelTreeViews = {};
-        this._autoAddModels = (cfg.autoAddModels !== false);
-        this._autoExpandDepth = (cfg.autoExpandDepth || 0);
-        this._sortNodes = (cfg.sortNodes !== false);
-        this._pruneEmptyNodes = (cfg.pruneEmptyNodes !== false);
-
-        if (this._autoAddModels) {
-            const modelIds = Object.keys(this.viewer.metaScene.metaModels);
-            for (let i = 0, len = modelIds.length; i < len; i++) {
-                const modelId = modelIds[i];
-                this.addModel(modelId);
-            }
-            this.viewer.scene.on("modelLoaded", (modelId) => {
-                if (this.viewer.metaScene.metaModels[modelId]) {
-                    this.addModel(modelId);
-                }
-            });
-        }
-
-        this.hierarchy = cfg.hierarchy;
-    }
-
-    /**
-     * Returns the map of {@link ModelTreeView}s.
-     *
-     * Each ModelTreeView is mapped to the ID of its model.
-     *
-     * @return {*|{}}
-     */
-    get modelTreeViews() {
-        return this._modelTreeViews;
-    }
-
-    /**
-     * Sets how the nodes are organized within this tree view.
-     *
-     * Accepted values are:
-     *
-     * * "containment" - organizes the nodes to indicate the containment hierarchy of the IFC objects.
-     * * "types" - groups the nodes within their IFC types.
-     * * "storeys" - groups the nodes within ````IfcBuildingStoreys```` and sub-groups them by their IFC types.
-     *
-     * <br>
-     * This can be updated dynamically.
-     *
-     * Default value is "containment".
-     *
-     * @type {String}
-     */
-    set hierarchy(hierarchy) {
-        hierarchy = hierarchy || "containment";
-        if (hierarchy !== "containment" && hierarchy !== "storeys" && hierarchy !== "types") {
-            this.error("Unsupported value for `hierarchy' - defaulting to 'containment'");
-            hierarchy = "containment";
-        }
-        this._hierarchy = hierarchy;
-        for (let modelId in this._modelTreeViews) {
-            if (this._modelTreeViews.hasOwnProperty(modelId)) {
-                this._modelTreeViews[modelId].setHierarchy(this._hierarchy);
-            }
-        }
-    }
-
-    /**
-     * Gets how the nodes are organized within this tree view.
-     *
-     * @type {String}
-     */
-    get hierarchy() {
-        return this._hierarchy;
-    }
-
-    /**
-     * Adds a model to this tree view.
-     *
-     * 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 TreeViewPlugin constructor.
-     *
-     * @param {String} modelId ID of a model {@link Entity} in {@link Scene#models}.
-     * @param {Object} [options] Options for model in the tree view.
-     * @param {String} [options.rootName] Optional display name for the root node. Ordinary, for "containment"
-     * and "storeys" hierarchy types, the tree would derive the root node name from the model's "IfcProject" element
-     * name. This option allows to override that name when it is not suitable as a display name.
-     * @returns {ModelTreeView} ModelTreeView for the newly-added model. If this method succeeded in adding the model,
-     * then {@link ModelTreeView#valid} will equal ````true````. Otherwise, that property will be ````false````
-     * and {@link ModelTreeView#errors} will contain error messages.
-     */
-    addModel(modelId, options = {}) {
-        if (!this._containerElement) {
-            return;
-        }
-        const model = this.viewer.scene.models[modelId];
-        if (!model) {
-            throw "Model not found: " + modelId;
-        }
-        const metaModel = this.viewer.metaScene.metaModels[modelId];
-        if (!metaModel) {
-            this.error("MetaModel not found: " + modelId);
-            return;
-        }
-        if (this._modelTreeViews[modelId]) {
-            this.warn("Model already added: " + modelId);
-            return;
-        }
-        const modelTreeView = new ModelTreeView(this.viewer, this, model, metaModel, {
-            containerElement: this._containerElement,
-            autoExpandDepth: this._autoExpandDepth,
-            hierarchy: this._hierarchy,
-            sortNodes: this._sortNodes,
-            pruneEmptyNodes: this._pruneEmptyNodes,
-            rootName: options.rootName
-        });
-        this._modelTreeViews[modelId] = modelTreeView;
-        model.on("destroyed", () => {
-            this.removeModel(model.id);
-        });
-        return modelTreeView;
-    }
-
-    /**
-     * Removes a model from this tree view.
-     *
-     * Does nothing if model not currently in tree view.
-     *
-     * @param {String} modelId ID of a model {@link Entity} in {@link Scene#models}.
-     */
-    removeModel(modelId) {
-        if (!this._containerElement) {
-            return;
-        }
-        const modelTreeView = this._modelTreeViews[modelId];
-        if (!modelTreeView) {
-            return;
-        }
-        modelTreeView.destroy();
-        delete this._modelTreeViews[modelId];
-    }
-
-    /**
-     * Collapses all trees within this tree view.
-     */
-    collapse() {
-        for (let modelId in this._modelTreeViews) {
-            if (this._modelTreeViews.hasOwnProperty(modelId)) {
-                const modelTreeView = this._modelTreeViews[modelId];
-                modelTreeView.collapse();
-            }
-        }
-    }
-
-    /**
-     * Highlights the tree view node that represents the given object {@link Entity}.
-     *
-     * This causes the tree view to collapse, then expand to reveal the node, then highlight the node.
-     *
-     * If a node is previously highlighted, de-highlights that node and collapses the tree first.
-     *
-     * Note that if the TreeViewPlugin was configured with ````pruneEmptyNodes: true```` (default configuration), then the
-     * node won't exist in the tree if it has no Entitys in the {@link Scene}. in that case, nothing will happen.
-     *
-     * Within the DOM, the node is represented by an ````<li>```` element. This method will add a ````.highlighted-node```` class to
-     * the element to make it appear highlighted, removing that class when de-highlighting it again. See the CSS rules
-     * in the TreeViewPlugin examples for an example of that class.
-     *
-     * @param {String} objectId ID of the {@link Entity}.
-     */
-    showNode(objectId) {
-        this.unShowNode();
-        const metaObject = this.viewer.metaScene.metaObjects[objectId];
-        if (!metaObject) {
-            this.error("MetaObject not found: " + objectId);
-            return;
-        }
-        const metaModel = metaObject.metaModel;
-        const modelId = metaModel.id;
-        const modelTreeView = this._modelTreeViews[modelId];
-        if (!modelTreeView) {
-            this.error("Object not in this TreeView: " + objectId);
-            return;
-        }
-        modelTreeView.showNode(objectId);
-    }
-
-    /**
-     * De-highlights the node previously shown with {@link TreeViewPlugin#showNode}.
-     *
-     * Does nothing if no node is currently shown.
-     *
-     * If the node is currently scrolled into view, keeps the node in view.
-     */
-    unShowNode() {
-        for (let modelId in this._modelTreeViews) {
-            if (this._modelTreeViews.hasOwnProperty(modelId)) {
-                const modelTreeView = this._modelTreeViews[modelId];
-                modelTreeView.unShowNode();
-            }
-        }
-    }
-
-    /**
-     * Expands the tree to the given depth.
-     *
-     * Collapses the tree first.
-     *
-     * @param {Number} depth Depth to expand to.
-     */
-    expandToDepth(depth) {
-        for (let modelId in this._modelTreeViews) {
-            if (this._modelTreeViews.hasOwnProperty(modelId)) {
-                const modelTreeView = this._modelTreeViews[modelId];
-                modelTreeView.collapse();
-                modelTreeView.expandToDepth(depth);
-            }
-        }
-    }
-
-    /**
-     * Iterates over a subtree of the tree view's {@link TreeViewNode}s, calling the given callback for each
-     * node in depth-first pre-order.
-     *
-     * @param {TreeViewNode} node Root of the subtree.
-     * @param {Function} callback Callback called at each {@link TreeViewNode}, with the TreeViewNode given as the argument.
-     */
-    withNodeTree(node, callback) {
-        callback(node);
-        const children = node.children;
-        if (!children) {
-            return;
-        }
-        for (let i = 0, len = children.length; i < len; i++) {
-            this.withNodeTree(children[i], callback);
-        }
-    }
-
-    /**
-     * Destroys this TreeViewPlugin.
-     */
-    destroy() {
-        if (!this._containerElement) {
-            return;
-        }
-        for (let modelId in this._modelTreeViews) {
-            if (this._modelTreeViews.hasOwnProperty(modelId)) {
-                this._modelTreeViews[modelId].destroy();
-            }
-        }
-        this._modelTreeViews = {};
-        super.destroy();
+        switchElement.removeEventListener('click', this._switchCollapseHandler);
+        switchElement.addEventListener('click', this._switchExpandHandler);
     }
 }
 
@@ -116460,7 +116294,7 @@ class XKTLoaderPlugin extends Plugin {
         }
 
         options.excludeUnclassifiedObjects = (params.excludeUnclassifiedObjects !== undefined) ? (!!params.excludeUnclassifiedObjects) : this._excludeUnclassifiedObjects;
-        options.globalizeObjectIds = (params.globalizeObjectIds !== undefined) ? (!!params.globalizeObjectIds) : this._globalizeObjectIds;
+        options.globalizeObjectIds = (params.globalizeObjectIds !== undefined && params.globalizeObjectIds !== null) ? (!!params.globalizeObjectIds) : this._globalizeObjectIds;
 
         if (params.metaModelSrc || params.metaModelData) {
 
@@ -116469,7 +116303,7 @@ class XKTLoaderPlugin extends Plugin {
                 const metaModel = this.viewer.metaScene.createMetaModel(modelId, metaModelData, {
                     includeTypes: includeTypes,
                     excludeTypes: excludeTypes,
-                    globalizeObjectIds: this.globalizeObjectIds
+                    globalizeObjectIds: options.globalizeObjectIds
                 });
 
                 if (!metaModel) {