@xeokit/xeokit-sdk 2.5.2-beta-3 → 2.5.2-beta-5

package/dist/xeokit-sdk.es.js

@@ -7565,6 +7565,15 @@ function renderScenes() {
 
 (window.requestPostAnimationFrame !== undefined) ? window.requestPostAnimationFrame(frame) : requestAnimationFrame(frame);
 
+function compileScenes() {
+
+    for (let id in core.scenes) {
+        core.scenes[id].compile();
+    }
+}
+
+window.setInterval(compileScenes, 1000 / 60);
+
 /**
  * @desc Base class for all xeokit components.
  *
@@ -28895,7 +28904,7 @@ class Scene extends Component {
     }
 
     _deRegisterColorizedObject(entity) {
-       delete this.colorizedObjects[entity.id];
+        delete this.colorizedObjects[entity.id];
         this._numColorizedObjects--;
         this._colorizedObjectIds = null; // Lazy regenerate
     }
@@ -28912,7 +28921,7 @@ class Scene extends Component {
     }
 
     _deRegisterOpacityObject(entity) {
-      delete  this.opacityObjects[entity.id];
+        delete this.opacityObjects[entity.id];
         this._numOpacityObjects--;
         this._opacityObjectIds = null; // Lazy regenerate
     }
@@ -28929,7 +28938,7 @@ class Scene extends Component {
     }
 
     _deRegisterOffsetObject(entity) {
-       delete this.offsetObjects[entity.id];
+        delete this.offsetObjects[entity.id];
         this._numOffsetObjects--;
         this._offsetObjectIds = null; // Lazy regenerate
     }
@@ -29202,6 +29211,18 @@ class Scene extends Component {
         this._saveAmbientColor();
     }
 
+
+    /**
+     * @private
+     */
+    compile() {
+        if (this._needRecompile) {
+            this._recompile();
+            this._renderer.imageDirty();
+            this._needRecompile = false;
+        }
+    }
+
     _recompile() {
         for (const id in this._compilables) {
             if (this._compilables.hasOwnProperty(id)) {
@@ -113993,6 +114014,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);
@@ -114142,7 +114164,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);
@@ -114346,7 +114368,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````.
@@ -114354,6 +114376,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.
@@ -121056,6 +121079,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 = [];
 
 /**
@@ -121415,6 +121608,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 = {}) {
 
@@ -121454,7 +121648,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;
@@ -121462,10 +121655,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();
@@ -121492,10 +121690,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;
@@ -121504,15 +121701,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;
         });
 
@@ -121532,15 +121726,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;
         });
 
@@ -121564,14 +121751,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;
@@ -121579,27 +121767,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;
@@ -121697,6 +121884,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);
         });
@@ -121718,6 +121910,11 @@ class TreeViewPlugin extends Plugin {
         if (!metaModel) {
             return;
         }
+
+        if (this._rootNames[modelId]) {
+            delete this._rootNames[modelId];
+        }
+
         delete this._metaModels[modelId];
         this._createNodes();
     }
@@ -121739,21 +121936,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;
@@ -121761,20 +121959,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;
     }
 
     /**
@@ -121788,12 +121983,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;
     }
 
@@ -121810,9 +122002,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;
@@ -121967,11 +122158,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;
@@ -121979,17 +122171,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);
         }
     }
 
@@ -122040,7 +122224,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,
@@ -122143,7 +122327,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,
@@ -122224,7 +122408,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,
@@ -122372,112 +122556,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);
     }
 }
 
@@ -126962,9 +127097,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);
  *              },
@@ -127564,13 +127699,14 @@ class XKTLoaderPlugin extends Plugin {
             sceneModel.once("destroyed", () => {
                 this.viewer.metaScene.destroyMetaModel(metaModel.id);
             });
-            sceneModel.scene.once("tick", () => {
+            window.setTimeout(() => {
+
                 if (sceneModel.destroyed) {
                     return;
                 }
                 sceneModel.scene.fire("modelLoaded", sceneModel.id); // FIXME: Assumes listeners know order of these two events
                 sceneModel.fire("loaded", true, false); // Don't forget the event, for late subscribers
-            });
+            }, 100);
         };
 
         const error = (errMsg) => {
@@ -127648,7 +127784,7 @@ class XKTLoaderPlugin extends Plugin {
                                     globalizeObjectIds: options.globalizeObjectIds
                                 });
                                 i++;
-                                this.viewer.scene.once("tick", loadNext);
+                                window.setTimeout( loadNext, 100);
                             }, error);
                         }
                     };
@@ -127663,7 +127799,7 @@ class XKTLoaderPlugin extends Plugin {
                             this._dataSource.getXKT(`${baseDir}${xktFiles[i]}`, (arrayBuffer) => {
                                 this._parseModel(arrayBuffer, params, options, sceneModel, metaModel, manifestCtx);
                                 i++;
-                                this.viewer.scene.once("tick", loadNext);
+                                window.setTimeout(loadNext, 100);
                             }, error);
                         }
                     };