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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.5.2-beta-3",
+  "version": "2.5.2-beta-5",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/plugins/NavCubePlugin/CubeTextureCanvas.js

@@ -7,6 +7,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);
@@ -158,7 +159,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);

package/src/plugins/NavCubePlugin/NavCubePlugin.js

@@ -88,7 +88,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````.
@@ -96,6 +96,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.

package/src/plugins/TreeViewPlugin/RenderService.js

@@ -0,0 +1,169 @@
+/**
+ * @desc A {@link TreeViewPlugin} render class.
+ * 
+ */
+export 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');
+      }
+    }
+  }
+}

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -1,4 +1,5 @@
 import {Plugin} from "../../viewer/Plugin.js";
+import {RenderService} from "./RenderService.js";
 
 const treeViews = [];
 
@@ -359,6 +360,7 @@ export 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 = {}) {
 
@@ -398,7 +400,6 @@ export 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;
@@ -406,10 +407,15 @@ export 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();
@@ -436,10 +442,9 @@ export 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;
@@ -448,15 +453,12 @@ export 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;
         });
 
@@ -476,15 +478,8 @@ export 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;
         });
 
@@ -508,14 +503,15 @@ export 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;
@@ -523,27 +519,26 @@ export 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;
@@ -641,6 +636,11 @@ export 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);
         });
@@ -662,6 +662,11 @@ export class TreeViewPlugin extends Plugin {
         if (!metaModel) {
             return;
         }
+
+        if (this._rootNames[modelId]) {
+            delete this._rootNames[modelId];
+        }
+
         delete this._metaModels[modelId];
         this._createNodes();
     }
@@ -683,21 +688,22 @@ export 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;
@@ -705,20 +711,17 @@ export 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;
     }
 
     /**
@@ -732,12 +735,9 @@ export 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;
     }
 
@@ -754,9 +754,8 @@ export 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;
@@ -911,11 +910,12 @@ export 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;
@@ -923,17 +923,9 @@ export 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);
         }
     }
 
@@ -984,7 +976,7 @@ export 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,
@@ -1087,7 +1079,7 @@ export 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,
@@ -1168,7 +1160,7 @@ export 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,
@@ -1316,112 +1308,63 @@ export 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);
+
+        this._renderService.addChildren(switchElement, nodeElements)
+
+        this._renderService.expand(switchElement, this._switchExpandHandler, this._switchCollapseHandler);
     }
 
-    _collapseNode(objectId) {
-        const nodeId = objectId;
-        const switchElementId = "switch-" + nodeId;
-        const switchElement = document.getElementById(switchElementId);
+    _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);
     }
 }