@xeokit/xeokit-sdk 2.5.2-beta-4 → 2.5.2-beta-7

package/dist/xeokit-sdk.es.js

@@ -80319,8 +80319,6 @@ class SceneModel extends Component {
         this._vboBatchingLayers = {};
         this._dtxLayers = {};
 
-        this._meshList = [];
-
         this.layerList = []; // For GL state efficiency when drawing, InstancingLayers are in first part, BatchingLayers are in second
         this._entityList = [];
 
@@ -80333,6 +80331,7 @@ class SceneModel extends Component {
         this._entities = {};
 
         this._scheduledMeshes = {};
+        this._meshesCfgsBeforeMeshCreation = {};
 
         /** @private **/
         this.renderFlags = new RenderFlags();
@@ -81863,7 +81862,7 @@ class SceneModel extends Component {
     /**
      * Creates a new {@link SceneModelMesh} within this SceneModel.
      *
-     * * Stores the new SceneModelMesh in {@link SceneModel#meshes}.
+     * * It prepares and saves data for a SceneModelMesh {@link SceneModel#meshes} creation. SceneModelMesh will be created only once the SceneModelEntity (which references this particular SceneModelMesh) will be created.
      * * The SceneModelMesh can either define its own geometry or share it with other SceneModelMeshes. To define own geometry, provide the
      * various geometry arrays to this method. To share a geometry, provide the ID of a geometry created earlier
      * with {@link SceneModel#createGeometry}.
@@ -81898,18 +81897,18 @@ class SceneModel extends Component {
      * @param {Number} [cfg.opacity=1] Opacity in range ````[0..1]````. Overridden by texture set ````colorTexture````.
      * @param {Number} [cfg.metallic=0] Metallic factor in range ````[0..1]````. Overridden by texture set ````metallicRoughnessTexture````.
      * @param {Number} [cfg.roughness=1] Roughness factor in range ````[0..1]````. Overridden by texture set ````metallicRoughnessTexture````.
-     * @returns {SceneModelMesh} The new mesh.
+     * @returns {Boolean} True if mesh was successfully created, else false if an error occurred.
      */
     createMesh(cfg) {
 
         if (cfg.id === undefined || cfg.id === null) {
             this.error("[createMesh] SceneModel.createMesh() config missing: id");
-            return;
+            return false;
         }
 
         if (this._scheduledMeshes[cfg.id]) {
             this.error(`[createMesh] SceneModel already has a mesh with this ID: ${cfg.id}`);
-            return;
+            return false;
         }
 
         const instancing = (cfg.geometryId !== undefined);
@@ -81924,31 +81923,31 @@ class SceneModel extends Component {
             }
             if (cfg.primitive !== "points" && cfg.primitive !== "lines" && cfg.primitive !== "triangles" && cfg.primitive !== "solid" && cfg.primitive !== "surface") {
                 this.error(`Unsupported value for 'primitive': '${primitive}'  ('geometryId' is absent) - supported values are 'points', 'lines', 'triangles', 'solid' and 'surface'.`);
-                return;
+                return false;
             }
             if (!cfg.positions && !cfg.positionsCompressed && !cfg.buckets) {
                 this.error("Param expected: 'positions',  'positionsCompressed' or `buckets`  ('geometryId' is absent)");
-                return null;
+                return false;
             }
             if (cfg.positions && (cfg.positionsDecodeMatrix || cfg.positionsDecodeBoundary)) {
                 this.error("Illegal params: 'positions' not expected with 'positionsDecodeMatrix'/'positionsDecodeBoundary' ('geometryId' is absent)");
-                return null;
+                return false;
             }
             if (cfg.positionsCompressed && !cfg.positionsDecodeMatrix && !cfg.positionsDecodeBoundary) {
                 this.error("Param expected: 'positionsCompressed' should be accompanied by 'positionsDecodeMatrix'/'positionsDecodeBoundary' ('geometryId' is absent)");
-                return null;
+                return false;
             }
             if (cfg.uvCompressed && !cfg.uvDecodeMatrix) {
                 this.error("Param expected: 'uvCompressed' should be accompanied by `uvDecodeMatrix` ('geometryId' is absent)");
-                return null;
+                return false;
             }
             if (!cfg.buckets && !cfg.indices && cfg.primitive !== "points") {
                 this.error(`Param expected: indices (required for '${cfg.primitive}' primitive type)`);
-                return null;
+                return false;
             }
             if ((cfg.matrix || cfg.position || cfg.rotation || cfg.scale) && (cfg.positionsCompressed || cfg.positionsDecodeBoundary)) {
                 this.error("Unexpected params: 'matrix', 'rotation', 'scale', 'position' not allowed with 'positionsCompressed'");
-                return null;
+                return false;
             }
 
             const useDTX = (!!this._dtxEnabled && (cfg.primitive === "triangles"
@@ -82113,7 +82112,7 @@ class SceneModel extends Component {
                     cfg.textureSet = this._textureSets[cfg.textureSetId];
                     if (!cfg.textureSet) {
                         this.error(`[createMesh] Texture set not found: ${cfg.textureSetId} - ensure that you create it first with createTextureSet()`);
-                        return;
+                        return false;
                     }
                 }
             }
@@ -82124,13 +82123,13 @@ class SceneModel extends Component {
 
             if (cfg.positions || cfg.positionsCompressed || cfg.indices || cfg.edgeIndices || cfg.normals || cfg.normalsCompressed || cfg.uv || cfg.uvCompressed || cfg.positionsDecodeMatrix) {
                 this.error(`Mesh geometry parameters not expected when instancing a geometry (not expected: positions, positionsCompressed, indices, edgeIndices, normals, normalsCompressed, uv, uvCompressed, positionsDecodeMatrix)`);
-                return;
+                return false;
             }
 
             cfg.geometry = this._geometries[cfg.geometryId];
             if (!cfg.geometry) {
                 this.error(`[createMesh] Geometry not found: ${cfg.geometryId} - ensure that you create it first with createGeometry()`);
-                return;
+                return false;
             }
 
             cfg.origin = cfg.origin ? math.addVec3(this._origin, cfg.origin, math.vec3()) : this._origin;
@@ -82144,7 +82143,7 @@ class SceneModel extends Component {
 
                 if (!cfg.transform) {
                     this.error(`[createMesh] Transform not found: ${cfg.transformId} - ensure that you create it first with createTransform()`);
-                    return;
+                    return false;
                 }
 
                 cfg.aabb = cfg.geometry.aabb;
@@ -82212,7 +82211,7 @@ class SceneModel extends Component {
                     cfg.textureSet = this._textureSets[cfg.textureSetId];
                     // if (!cfg.textureSet) {
                     //     this.error(`[createMesh] Texture set not found: ${cfg.textureSetId} - ensure that you create it first with createTextureSet()`);
-                    //     return;
+                    //     return false;
                     // }
                 }
             }
@@ -82220,7 +82219,9 @@ class SceneModel extends Component {
 
         cfg.numPrimitives = this._getNumPrimitives(cfg);
 
-        return this._createMesh(cfg);
+        this._meshesCfgsBeforeMeshCreation[cfg.id] = cfg;
+
+        return true;
     }
 
     _createMesh(cfg) {
@@ -82252,8 +82253,6 @@ class SceneModel extends Component {
             cfg.meshMatrix = cfg.transform.worldMatrix;
         }
         mesh.portionId = mesh.layer.createPortion(mesh, cfg);
-        this._meshes[cfg.id] = mesh;
-        this._meshList.push(mesh);
         return mesh;
     }
 
@@ -82612,10 +82611,15 @@ class SceneModel extends Component {
         let meshes = [];
         for (let i = 0, len = cfg.meshIds.length; i < len; i++) {
             const meshId = cfg.meshIds[i];
-            const mesh = this._meshes[meshId];
+            let mesh = this._meshes[meshId];
             if (!mesh) {
-                this.error(`Mesh with this ID not found: "${meshId}" - ignoring this mesh`);
-                continue;
+                let meshCfg = this._meshesCfgsBeforeMeshCreation[meshId];
+                if (!meshCfg) {
+                    this.error(`Mesh with this ID not found: "${meshId}" - ignoring this mesh`);
+                    continue;
+                }
+                mesh = this._createMesh(meshCfg);
+                this._meshes[cfg.id] = mesh;
             }
             if (mesh.parent) {
                 this.error(`Mesh with ID "${meshId}" already belongs to object with ID "${mesh.parent.id}" - ignoring this mesh`);
@@ -97220,94 +97224,94 @@ function arrayToMap(array) {
  * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
  * Released under MIT License
  */
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || from);
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || from);
 }
 
 var Bounds = /** @class */ (function () {
@@ -114014,6 +114018,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
 
     const cubeColor = "lightgrey";
     const cubeHighlightColor = cfg.hoverColor || "rgba(0,0,0,0.4)";
+    const textColor = cfg.textColor || "black";
 
     const height = 500;
     const width = height + (height / 3);
@@ -114163,7 +114168,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
                 }
             }
             if (area.label) {
-                context.fillStyle = "black";
+                context.fillStyle = textColor;
                 context.font = '60px sans-serif';
                 context.textAlign = "center";
                 var xcenter = xmin + (width * 0.5);
@@ -114367,7 +114372,7 @@ class NavCubePlugin extends Plugin {
      * @param {String} [cfg.cameraFly=true] Whether the {@link Camera} flies or jumps to each selected axis or diagonal.
      * @param {String} [cfg.cameraFitFOV=45] How much of the field-of-view, in degrees, that the 3D scene should fill the {@link Canvas} when the {@link Camera} moves to an axis or diagonal.
      * @param {String} [cfg.cameraFlyDuration=0.5] When flying the {@link Camera} to each new axis or diagonal, how long, in seconds, that the Camera takes to get there.
-     * @param {String} [cfg.color="lightgrey] Custom uniform color for the faces of the NavCube.
+     * @param {String} [cfg.color="lightgrey"] Custom uniform color for the faces of the NavCube.
      * @param {String} [cfg.frontColor="#55FF55"] Custom color for the front face of the NavCube. Overrides ````color````.
      * @param {String} [cfg.backColor="#55FF55"] Custom color for the back face of the NavCube. Overrides ````color````.
      * @param {String} [cfg.leftColor="#FF5555"] Custom color for the left face of the NavCube. Overrides ````color````.
@@ -114375,6 +114380,7 @@ class NavCubePlugin extends Plugin {
      * @param {String} [cfg.topColor="#5555FF"] Custom color for the top face of the NavCube. Overrides ````color````.
      * @param {String} [cfg.bottomColor="#5555FF"] Custom color for the bottom face of the NavCube. Overrides ````color````.
      * @param {String} [cfg.hoverColor="rgba(0,0,0,0.4)"] Custom color for highlighting regions on the NavCube as we hover the pointer over them.
+     * @param {String} [cfg.textColor="black"] Custom text color for labels of the NavCube.
      * @param {Boolean} [cfg.fitVisible=false] Sets whether the axis, corner and edge-aligned views will fit the
      * view to the entire {@link Scene} or just to visible object-{@link Entity}s. Entitys are visible objects when {@link Entity#isObject} and {@link Entity#visible} are both ````true````.
      * @param {Boolean} [cfg.synchProjection=false] Sets whether the NavCube switches between perspective and orthographic projections in synchrony with the {@link Camera}. When ````false````, the NavCube will always be rendered with perspective projection.
@@ -121077,6 +121083,176 @@ class STLLoaderPlugin extends Plugin {
     }
 }
 
+/**
+ * @desc A {@link TreeViewPlugin} render class.
+ * 
+ */
+class RenderService {
+
+  /*
+  * Creates the root node of the tree.
+  * @return {HTMLElement} The root node of the tree.
+  */
+  createRootNode() {
+    return document.createElement('ul')
+  }
+
+  /*
+  * Creates node of the tree.
+  * @param {Object} node The node to create.
+
+  * @return {HTMLElement} The html element for the node.
+  */
+  createNodeElement(node, expandHandler, checkHandler, contextmenuHandler, titleClickHandler) {
+    const nodeElement = document.createElement('li');
+    nodeElement.id = node.nodeId;
+
+    if (node.xrayed) {
+        nodeElement.classList.add('xrayed-node');
+    }
+    
+    if (node.children.length > 0) {
+        const switchElement = document.createElement('a');
+        switchElement.href = '#';
+        switchElement.id = `switch-${node.nodeId}`;
+        switchElement.textContent = '+';
+        switchElement.classList.add('plus');
+        if (expandHandler) switchElement.addEventListener('click', expandHandler);
+        nodeElement.appendChild(switchElement);
+    }
+    
+    const checkbox = document.createElement('input');
+    checkbox.id = `checkbox-${node.nodeId}`;
+    checkbox.type = "checkbox";
+    checkbox.checked = node.checked;
+    checkbox.style["pointer-events"] = "all";
+    if (checkHandler) checkbox.addEventListener("change", checkHandler);
+    nodeElement.appendChild(checkbox);
+    
+    const span = document.createElement('span');
+    span.textContent = node.title;
+    nodeElement.appendChild(span);
+
+    if (contextmenuHandler) {
+      span.oncontextmenu = contextmenuHandler;
+    }
+
+    if (titleClickHandler) {
+      span.onclick = titleClickHandler;
+    }
+
+    return nodeElement;
+  }
+
+  createDisabledNodeElement(rootName) {
+    const li = document.createElement('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);
+
+    return li;
+  }
+
+  addChildren(element, nodes) {
+    const ul = document.createElement('ul');
+    nodes.forEach((nodeElement) => {
+      ul.appendChild(nodeElement);
+    });
+
+    element.parentElement.appendChild(ul);
+  }
+
+  expand(element, expandHandler, collapseHandler) {
+    element.classList.remove('plus');
+    element.classList.add('minus');
+    element.textContent = '-';
+    element.removeEventListener('click', expandHandler);
+    element.addEventListener('click', collapseHandler);
+  }
+
+  collapse(element, expandHandler, collapseHandler) {
+    if (!element) {
+      return;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+        return;
+    }
+    const ul = parent.querySelector('ul');
+    if (!ul) {
+        return;
+    }
+    parent.removeChild(ul);
+    element.classList.remove('minus');
+    element.classList.add('plus');
+    element.textContent = '+';
+    element.removeEventListener('click', collapseHandler);
+    element.addEventListener('click', expandHandler);
+  }
+
+  isExpanded(element) {
+    const parentElement = element.parentElement;
+    return parentElement.getElementsByTagName('li')[0] !== undefined;
+  }
+
+  getId(element) {
+    const parentElement = element.parentElement;
+    return parentElement.id;
+  }
+
+  getIdFromCheckbox(element) {
+    return element.id.replace('checkbox-', '');
+  }
+
+  getSwitchElement(nodeId) {
+    return document.getElementById(`switch-${nodeId}`);
+  }
+
+  isChecked(element) {
+    return element.checked;
+  }
+
+  setCheckbox(nodeId, checked) {
+    const checkbox = document.getElementById(`checkbox-${nodeId}`);
+    if (checkbox) {
+      if (checked !== checkbox.checked) {
+        checkbox.checked = checked;
+      }
+    }
+  }
+
+  setXRayed(nodeId, xrayed) {
+    const treeNode = document.getElementById(nodeId);
+    if (treeNode) {
+      if (xrayed) {
+        treeNode.classList.add('xrayed-node');
+      } else {
+        treeNode.classList.remove('xrayed-node');
+      }
+    }
+  }
+
+  setHighlighted(nodeId, highlighted) { 
+    const treeNode = document.getElementById(nodeId);
+    if (treeNode) {
+      if (highlighted) {
+        treeNode.scrollIntoView({block: "center"});
+        treeNode.classList.add('highlighted-node');
+      } else {
+        treeNode.classList.remove('highlighted-node');
+      }
+    }
+  }
+}
+
 const treeViews = [];
 
 /**
@@ -121436,6 +121612,7 @@ class TreeViewPlugin extends Plugin {
      * ````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.
+     * @param {RenderService} [cfg.renderService] Optional {@link RenderService} to use. Defaults to the {@link TreeViewPlugin}'s default {@link RenderService}.
      */
     constructor(viewer, cfg = {}) {
 
@@ -121475,7 +121652,6 @@ class TreeViewPlugin extends Plugin {
         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;
@@ -121483,10 +121659,15 @@ class TreeViewPlugin extends Plugin {
         this._rootNodes = [];
         this._objectNodes = {}; // Object ID -> Node
         this._nodeNodes = {}; // Node ID -> Node
-        this._rootName = cfg.rootName;
+        this._rootNames = {}; // Node ID -> Root name
         this._sortNodes = cfg.sortNodes;
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
         this._showListItemElementId = null;
+        this._renderService = cfg.renderService || new RenderService();
+
+        if (!this._renderService) {
+            throw new Error('TreeViewPlugin: no render service set');
+        }
 
         this._containerElement.oncontextmenu = (e) => {
             e.preventDefault();
@@ -121513,10 +121694,9 @@ class TreeViewPlugin extends Plugin {
             } else {
                 node.numVisibleEntities--;
             }
-            const checkbox = document.getElementById(`checkbox-${node.nodeId}`);
-            if (checkbox) {
-                checkbox.checked = visible;
-            }
+
+            this._renderService.setCheckbox(node.nodeId, visible);
+
             let parent = node.parent;
             while (parent) {
                 parent.checked = visible;
@@ -121525,15 +121705,12 @@ class TreeViewPlugin extends Plugin {
                 } else {
                     parent.numVisibleEntities--;
                 }
-                const parentCheckbox = document.getElementById(`checkbox-${parent.nodeId}`);
-                if (parentCheckbox) {
-                    const newChecked = (parent.numVisibleEntities > 0);
-                    if (newChecked !== parentCheckbox.checked) {
-                        parentCheckbox.checked = newChecked;
-                    }
-                }
+
+                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0));
+
                 parent = parent.parent;
             }
+
             this._muteTreeEvents = false;
         });
 
@@ -121553,15 +121730,8 @@ class TreeViewPlugin extends Plugin {
                 return;
             }
             node.xrayed = xrayed;
-            const listItemElementId = node.nodeId;
-            const listItemElement = document.getElementById(listItemElementId);
-            if (listItemElement !== null) {
-                if (xrayed) {
-                    listItemElement.classList.add('xrayed-node');
-                } else {
-                    listItemElement.classList.remove('xrayed-node');
-                }
-            }
+
+            this._renderService.setXRayed(node.nodeId, xrayed);
             this._muteTreeEvents = false;
         });
 
@@ -121585,14 +121755,15 @@ class TreeViewPlugin extends Plugin {
             }
             this._muteSceneEvents = true;
             const checkbox = event.target;
-            const visible = checkbox.checked;
-            const nodeId = checkbox.id.replace('checkbox-', '');
+            const visible = this._renderService.isChecked(checkbox);
+            const nodeId = this._renderService.getIdFromCheckbox(checkbox);
+
             const checkedNode = this._nodeNodes[nodeId];
             const objects = this._viewer.scene.objects;
             let numUpdated = 0;
+            
             this._withNodeTree(checkedNode, (node) => {
                 const objectId = node.objectId;
-                const checkBoxId = `checkbox-${node.nodeId}`;
                 const entity = objects[objectId];
                 const isLeaf = (node.children.length === 0);
                 node.numVisibleEntities = visible ? node.numEntities : 0;
@@ -121600,27 +121771,26 @@ class TreeViewPlugin extends Plugin {
                     numUpdated++;
                 }
                 node.checked = visible;
-                const checkbox2 = document.getElementById(checkBoxId);
-                if (checkbox2) {
-                    checkbox2.checked = visible;
-                }
+
+                this._renderService.setCheckbox(node.nodeId, visible);
+                
                 if (entity) {
                     entity.visible = visible;
                 }
             });
+
             let parent = checkedNode.parent;
             while (parent) {
                 parent.checked = visible;
-                const checkbox2 = document.getElementById(`checkbox-${parent.nodeId}`); // Parent checkboxes are always in DOM
+                
                 if (visible) {
                     parent.numVisibleEntities += numUpdated;
                 } else {
                     parent.numVisibleEntities -= numUpdated;
                 }
-                const newChecked = (parent.numVisibleEntities > 0);
-                if (newChecked !== checkbox2.checked) {
-                    checkbox2.checked = newChecked;
-                }
+
+                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0));
+                
                 parent = parent.parent;
             }
             this._muteSceneEvents = false;
@@ -121718,6 +121888,11 @@ class TreeViewPlugin extends Plugin {
             return;
         }
         this._metaModels[modelId] = metaModel;
+
+        if (options && options.rootName) {
+            this._rootNames[modelId] = options.rootName;
+        }
+        
         model.on("destroyed", () => {
             this.removeModel(model.id);
         });
@@ -121739,6 +121914,11 @@ class TreeViewPlugin extends Plugin {
         if (!metaModel) {
             return;
         }
+
+        if (this._rootNames[modelId]) {
+            delete this._rootNames[modelId];
+        }
+
         delete this._metaModels[modelId];
         this._createNodes();
     }
@@ -121760,21 +121940,22 @@ class TreeViewPlugin extends Plugin {
      * @param {String} objectId ID of the {@link Entity}.
      */
     showNode(objectId) {
-        if (this._showListItemElementId) {
-            this.unShowNode();
-        }
+        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);
+
+        const switchElement = this._renderService.getSwitchElement(nodeId);
         if (switchElement) {
             this._expandSwitchElement(switchElement);
             switchElement.scrollIntoView();
-            return;
+            return true;
         }
+        
         const path = [];
         path.unshift(node);
         let parent = node.parent;
@@ -121782,20 +121963,17 @@ class TreeViewPlugin extends Plugin {
             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);
+            const switchElement = this._renderService.getSwitchElement(path[i].nodeId);
             if (switchElement) {
                 this._expandSwitchElement(switchElement);
             }
         }
-        const listItemElementId = nodeId;
-        const listItemElement = document.getElementById(listItemElementId);
-        listItemElement.scrollIntoView({block: "center"});
-        listItemElement.classList.add("highlighted-node");
-        this._showListItemElementId = listItemElementId;
+
+        this._renderService.setHighlighted(nodeId, true);
+
+        this._showListItemElementId = nodeId;
     }
 
     /**
@@ -121809,12 +121987,9 @@ class TreeViewPlugin extends Plugin {
         if (!this._showListItemElementId) {
             return;
         }
-        const listItemElement = document.getElementById(this._showListItemElementId);
-        if (!listItemElement) {
-            this._showListItemElementId = null;
-            return;
-        }
-        listItemElement.classList.remove("highlighted-node");
+
+        this._renderService.setHighlighted(this._showListItemElementId, false);
+        
         this._showListItemElementId = null;
     }
 
@@ -121831,9 +122006,8 @@ class TreeViewPlugin extends Plugin {
             if (countDepth === depth) {
                 return;
             }
-            const nodeId = node.nodeId;
-            const switchElementId = "switch-" + nodeId;
-            const switchElement = document.getElementById(switchElementId);
+
+            const switchElement = this._renderService.getSwitchElement(node.nodeId);
             if (switchElement) {
                 this._expandSwitchElement(switchElement);
                 const childNodes = node.children;
@@ -121988,11 +122162,12 @@ class TreeViewPlugin extends Plugin {
 
     _createDisabledNodes() {
 
-        const ul = document.createElement('ul');
-        this._rootElement = ul;
-        this._containerElement.appendChild(ul);
+        const rootNode = this._renderService.createRootNode();
+        this._rootElement = rootNode;
+        this._containerElement.appendChild(rootNode);
 
         const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
+
         for (let objectId in rootMetaObjects) {
             const rootMetaObject = rootMetaObjects[objectId];
             const metaObjectType = rootMetaObject.type;
@@ -122000,17 +122175,9 @@ class TreeViewPlugin extends Plugin {
             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 childNode = this._renderService.createDisabledNodeElement(rootName);
+            rootNode.appendChild(childNode);
         }
     }
 
@@ -122061,7 +122228,7 @@ class TreeViewPlugin extends Plugin {
             buildingNode = {
                 nodeId: `${this._id}-${objectId}`,
                 objectId: objectId,
-                title: this._rootName || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
+                title: this._rootNames[metaObject.metaModels[0].id] || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
                 type: metaObjectType,
                 parent: null,
                 numEntities: 0,
@@ -122164,7 +122331,7 @@ class TreeViewPlugin extends Plugin {
             rootNode = {
                 nodeId: `${this._id}-${objectId}`,
                 objectId: objectId,
-                title: this._rootName || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
+                title: this._rootNames[metaObject.metaModels[0].id] || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
                 type: metaObjectType,
                 parent: null,
                 numEntities: 0,
@@ -122245,7 +122412,7 @@ class TreeViewPlugin extends Plugin {
         const node = {
             nodeId: `${this._id}-${objectId}`,
             objectId: objectId,
-            title: (!parent) ? (this._rootName || metaObjectName) : (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
+            title: (!parent) ? (this._rootNames[metaObject.metaModels[0].id] || metaObjectName) : (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
             type: metaObjectType,
             parent: parent,
             numEntities: 0,
@@ -122393,112 +122560,63 @@ class TreeViewPlugin extends Plugin {
         const rootNodeElements = this._rootNodes.map((rootNode) => {
             return this._createNodeElement(rootNode);
         });
-        const ul = document.createElement('ul');
+
+        const rootNode = this._renderService.createRootNode();
         rootNodeElements.forEach((nodeElement) => {
-            ul.appendChild(nodeElement);
+            rootNode.appendChild(nodeElement);
         });
-        this._containerElement.appendChild(ul);
-        this._rootElement = ul;
+
+        this._containerElement.appendChild(rootNode);
+        this._rootElement = rootNode;
     }
 
     _createNodeElement(node) {
-        const nodeElement = document.createElement('li');
-        //const nodeId = this._objectToNodeID(node.objectId);
-        const nodeId = node.nodeId;
-        if (node.xrayed) {
-            nodeElement.classList.add('xrayed-node');
-        }
-        nodeElement.id = nodeId;
-        if (node.children.length > 0) {
-            const switchElementId = "switch-" + nodeId;
-            const switchElement = document.createElement('a');
-            switchElement.href = '#';
-            switchElement.id = switchElementId;
-            switchElement.textContent = '+';
-            switchElement.classList.add('plus');
-            switchElement.addEventListener('click', this._switchExpandHandler);
-            nodeElement.appendChild(switchElement);
-        }
-        const checkbox = document.createElement('input');
-        checkbox.id = `checkbox-${nodeId}`;
-        checkbox.type = "checkbox";
-        checkbox.checked = node.checked;
-        checkbox.style["pointer-events"] = "all";
-        checkbox.addEventListener("change", this._checkboxChangeHandler);
-        nodeElement.appendChild(checkbox);
-        const span = document.createElement('span');
-        span.textContent = node.title;
-        nodeElement.appendChild(span);
-        span.oncontextmenu = (e) => {
-            this.fire("contextmenu", {
-                event: e,
+        const contextmenuHandler = (event) =>{
+                this.fire("contextmenu", {
+                event: event,
                 viewer: this._viewer,
                 treeViewPlugin: this,
                 treeViewNode: node
             });
-            e.preventDefault();
+            event.preventDefault();
         };
-        span.onclick = (e) => {
+        const onclickHandler = (event) => {
             this.fire("nodeTitleClicked", {
-                event: e,
+                event: event,
                 viewer: this._viewer,
                 treeViewPlugin: this,
                 treeViewNode: node
             });
-            e.preventDefault();
+            event.preventDefault();
         };
-        return nodeElement;
+
+        return this._renderService.createNodeElement(node, this._switchExpandHandler, this._checkboxChangeHandler, contextmenuHandler, onclickHandler);
     }
 
     _expandSwitchElement(switchElement) {
-        const parentElement = switchElement.parentElement;
-        const expanded = parentElement.getElementsByTagName('li')[0];
+        const expanded = this._renderService.isExpanded(switchElement); 
         if (expanded) {
             return;
         }
-        const nodeId = parentElement.id;
-        const switchNode = this._nodeNodes[nodeId];
-        const childNodes = switchNode.children;
-        const nodeElements = childNodes.map((node) => {
+
+        const nodeId = this._renderService.getId(switchElement);
+
+        const nodeElements = this._nodeNodes[nodeId].children.map((node) => {
             return this._createNodeElement(node);
         });
-        const ul = document.createElement('ul');
-        nodeElements.forEach((nodeElement) => {
-            ul.appendChild(nodeElement);
-        });
-        parentElement.appendChild(ul);
-        switchElement.classList.remove('plus');
-        switchElement.classList.add('minus');
-        switchElement.textContent = '-';
-        switchElement.removeEventListener('click', this._switchExpandHandler);
-        switchElement.addEventListener('click', this._switchCollapseHandler);
-    }
-
-    _collapseNode(objectId) {
-        const nodeId = objectId;
-        const switchElementId = "switch-" + nodeId;
-        const switchElement = document.getElementById(switchElementId);
+
+        this._renderService.addChildren(switchElement, nodeElements);
+
+        this._renderService.expand(switchElement, this._switchExpandHandler, this._switchCollapseHandler);
+    }
+
+    _collapseNode(nodeId) {
+        const switchElement = this._renderService.getSwitchElement(nodeId);
         this._collapseSwitchElement(switchElement);
     }
 
     _collapseSwitchElement(switchElement) {
-        if (!switchElement) {
-            return;
-        }
-        const parent = switchElement.parentElement;
-        if (!parent) {
-            return;
-        }
-        const ul = parent.querySelector('ul');
-        if (!ul) {
-            return;
-        }
-        parent.removeChild(ul);
-        switchElement.classList.remove('minus');
-        switchElement.classList.add('plus');
-        switchElement.textContent = '+';
-        switchElement.removeEventListener('click', this._switchCollapseHandler);
-        switchElement.addEventListener('click', this._switchExpandHandler);
+        this._renderService.collapse(switchElement, this._switchExpandHandler, this._switchCollapseHandler);
     }
 }
 
@@ -126983,9 +127101,9 @@ parsers[ParserV10.version] = ParserV10;
  *      }
  *
  *      // Gets the contents of the given .XKT file in an arraybuffer
- *      getXKT(src, ok, error) {
+ *      getXKT(xKTSrc, ok, error) {
  *          console.log("MyDataSource#getXKT(" + xKTSrc + ", ... )");
- *          utils.loadArraybuffer(src,
+ *          utils.loadArraybuffer(xKTSrc,
  *              (arraybuffer) => {
  *                  ok(arraybuffer);
  *              },