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

package/dist/xeokit-sdk.cjs.js

@@ -80323,8 +80323,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 = [];
 
@@ -80337,6 +80335,7 @@ class SceneModel extends Component {
         this._entities = {};
 
         this._scheduledMeshes = {};
+        this._meshesCfgsBeforeMeshCreation = {};
 
         /** @private **/
         this.renderFlags = new RenderFlags();
@@ -81867,7 +81866,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}.
@@ -81902,18 +81901,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 = successfully mesh was created. False = error during creation of a mesh.
      */
     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);
@@ -81928,31 +81927,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"
@@ -82117,7 +82116,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;
                     }
                 }
             }
@@ -82128,13 +82127,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;
@@ -82148,7 +82147,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;
@@ -82216,7 +82215,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;
                     // }
                 }
             }
@@ -82224,7 +82223,9 @@ class SceneModel extends Component {
 
         cfg.numPrimitives = this._getNumPrimitives(cfg);
 
-        return this._createMesh(cfg);
+        this._meshesCfgsBeforeMeshCreation[cfg.id] = cfg;
+
+        return true;
     }
 
     _createMesh(cfg) {
@@ -82256,8 +82257,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;
     }
 
@@ -82616,10 +82615,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];
-            if (!mesh) {
-                this.error(`Mesh with this ID not found: "${meshId}" - ignoring this mesh`);
-                continue;
+            let mesh = this._meshes[meshId]; // Trying to get already created mesh
+            if (!mesh) { // Checks if there is already created mesh for this meshId
+                let meshCfg = this._meshesCfgsBeforeMeshCreation[meshId]; // Trying to get already created cfg
+                if (!meshCfg) { // Checks if there is already created cfg for this meshId
+                    this.error(`Mesh with this ID not found: "${meshId}" - ignoring this mesh`); // There is no such cfg
+                    continue;
+                }
+                mesh = this._createMesh(meshCfg); // There is no such mesh yet, but there is already created cfg, so it creates this mesh
+                this._meshes[cfg.id] = mesh; // Now it will also add this mesh to dictionary of created meshes
             }
             if (mesh.parent) {
                 this.error(`Mesh with ID "${meshId}" already belongs to object with ID "${mesh.parent.id}" - ignoring this mesh`);
@@ -114018,6 +114022,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);
@@ -114167,7 +114172,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);
@@ -114371,7 +114376,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````.
@@ -114379,6 +114384,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.
@@ -121081,6 +121087,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 = [];
 
 /**
@@ -121440,6 +121616,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 = {}) {
 
@@ -121479,7 +121656,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;
@@ -121487,10 +121663,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();
@@ -121517,10 +121698,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;
@@ -121529,15 +121709,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;
         });
 
@@ -121557,15 +121734,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;
         });
 
@@ -121589,14 +121759,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;
@@ -121604,27 +121775,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;
@@ -121722,6 +121892,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);
         });
@@ -121743,6 +121918,11 @@ class TreeViewPlugin extends Plugin {
         if (!metaModel) {
             return;
         }
+
+        if (this._rootNames[modelId]) {
+            delete this._rootNames[modelId];
+        }
+
         delete this._metaModels[modelId];
         this._createNodes();
     }
@@ -121764,21 +121944,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;
@@ -121786,20 +121967,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;
     }
 
     /**
@@ -121813,12 +121991,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;
     }
 
@@ -121835,9 +122010,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;
@@ -121992,11 +122166,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;
@@ -122004,17 +122179,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);
         }
     }
 
@@ -122065,7 +122232,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,
@@ -122168,7 +122335,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,
@@ -122249,7 +122416,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,
@@ -122397,112 +122564,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);
     }
 }
 
@@ -126987,9 +127105,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);
  *              },