@vitrosoftware/common-ui-ts 1.1.74 → 1.1.77

package/lib/xeokit/VitroTreeViewPlugin.js

@@ -0,0 +1,650 @@
+import { Viewer, Plugin, math, ContextMenu, TreeViewPlugin, MetaObject } from "/resource/bimViewer/js/xeokit/xeokit-sdk.es.js";
+import { BIMModel } from '/resource/bimViewer/js/bim-viewer-models.js';
+
+const processByChildIdList = (treeViewNode, event) => {
+	viewer.scene.canvas.spinner.processes++;
+			
+	const callback = (objIds) => {
+		event(objIds);
+		viewer.scene.canvas.spinner.processes--;
+    };
+
+    const error = (er) => 
+    {
+        viewer.scene.canvas.spinner.processes--;
+    };
+			
+    BIMModel.GetChildIdList(treeViewNode.objectId, true, true, callback, error);	
+};
+
+const treeViewContextMenu = new ContextMenu({
+
+        items: [
+            [
+                {
+                    getTitle: function (context) { return document.webL10n.get('view_fit') },
+                    doAction: function (context) {    
+                        
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, true);
+
+                        const event = (objectIds) => {
+							const scene = context.viewer.scene;
+							
+							scene.setObjectsVisible(objectIds, true);
+							scene.setObjectsHighlighted(objectIds, true);
+							context.viewer.cameraFlight.flyTo({
+								projection: "perspective",
+								aabb: scene.getAABB(objectIds),
+								duration: 0.5
+							}, () => {
+								setTimeout(function () {
+									scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+								}, 500);
+							});
+						};
+						
+						processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('view_fit_all') },
+                    doAction: function (context) {
+                        ViewFitAll(context.viewer);
+                    }
+                }
+            ],
+            [
+                {
+                    getTitle: function (context) { return document.webL10n.get('hide') },
+                    doAction: function (context) {		
+
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, false);
+
+						const event = (objectIds) => {
+							objectIds.forEach((id)=> {
+								const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.visible = false;
+                                };
+							});
+						};
+						processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('hide_others') },
+                    doAction: function (context) {
+
+                        context.treeViewPlugin.setCheckedAll(false);
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, true);
+
+						const event = (objectIds) => {
+                            const scene = context.viewer.scene;
+
+							scene.setObjectsVisible(scene.visibleObjectIds, false);
+							scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+							scene.setObjectsSelected(scene.selectedObjectIds, false);
+							scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+						
+							objectIds.forEach((id)=> {
+								const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.visible = true;
+                                };
+							});
+						};
+						
+						processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('hide_all') },
+                    getEnabled: function (context) {
+                        return (context.viewer.scene.visibleObjectIds.length > 0);
+                    },
+                    doAction: function (context) {
+                        context.treeViewPlugin.setCheckedAll(false);
+                        context.viewer.scene.setObjectsVisible(context.viewer.scene.visibleObjectIds, false);
+                    }
+                }
+            ],
+            [
+                {
+                    getTitle: function (context) { return document.webL10n.get('show') },
+                    doAction: function (context) {
+
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, true);						
+
+						const event = (objectIds) => {
+							objectIds.forEach((id)=> {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.visible = true;
+                                    entity.xrayed = false;
+                                    entity.selected = false;
+                                }
+							});
+						};
+						
+						processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('show_others') },
+                    doAction: function (context) {
+                        context.treeViewPlugin.setCheckedAll(true);
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, false);
+
+                        const scene = context.viewer.scene;
+
+                        scene.setObjectsVisible(scene.objectIds, true);
+                        scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                        scene.setObjectsSelected(scene.selectedObjectIds, false);
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.visible = false;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('show_all') },
+                    getEnabled: function (context) {
+                        const scene = context.viewer.scene;
+                        return (scene.numVisibleObjects < scene.numObjects);
+                    },
+                    doAction: function (context) {
+                        context.treeViewPlugin.setCheckedAll(true);
+
+                        const scene = context.viewer.scene;
+                        scene.setObjectsVisible(scene.objectIds, true);
+                        scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                        scene.setObjectsSelected(scene.selectedObjectIds, false);
+                    }
+                }
+            ],
+            [
+                {
+                    getTitle: function (context) { return document.webL10n.get('x_ray') },
+                    doAction: function (context) {
+
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, true);
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.xrayed = true;
+                                    entity.visible = true;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('x_ray_undo') },
+                    doAction: function (context) {
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.xrayed = false;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('x_ray_others') },
+                    doAction: function (context) {
+                        context.treeViewPlugin.setCheckedAll(true);
+
+                        const scene = context.viewer.scene;
+                        scene.setObjectsVisible(scene.objectIds, true);
+                        scene.setObjectsXRayed(scene.objectIds, true);
+                        scene.setObjectsSelected(scene.selectedObjectIds, false);
+                        scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.xrayed = false;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('x_ray_reset') },
+                    getEnabled: function (context) {
+                        return (context.viewer.scene.numXRayedObjects > 0);
+                    },
+                    doAction: function (context) {
+                        context.viewer.scene.setObjectsXRayed(context.viewer.scene.xrayedObjectIds, false);
+                    }
+                }
+            ],
+            [
+                {
+                    getTitle: function (context) { return document.webL10n.get('select') },
+                    doAction: function (context) {
+                        context.treeViewPlugin.setNodeChecked(context.treeViewNode, true);
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.selected = true;
+                                    entity.visible = true;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('deselect') },
+                    doAction: function (context) {
+
+                        const event = (objectIds) => {
+                            objectIds.forEach((id) => {
+                                const entity = context.viewer.scene.objects[id];
+                                if (entity) {
+                                    entity.selected = false;
+                                }
+                            });
+                        }
+
+                        processByChildIdList(context.treeViewNode, event);
+                    }
+                },
+                {
+                    getTitle: function (context) { return document.webL10n.get('clear_selection') },
+                    getEnabled: function (context) {
+                        return (context.viewer.scene.numSelectedObjects > 0);
+                    },
+                    doAction: function (context) {
+                        context.viewer.scene.setObjectsSelected(context.viewer.scene.selectedObjectIds, false);
+                    }
+                }
+            ]
+        ]
+    });
+
+class VitroTreeViewPlugin extends TreeViewPlugin
+{
+    constructor(viewer, cfg = {}) {
+        super(viewer, cfg);
+
+        this.checked = true;
+
+		this._checkboxChangeHandler = (event) => {
+            if (this._muteTreeEvents) {
+                return;
+            }
+            this._muteSceneEvents = true;
+            const checkbox = event.target;
+            const visible = checkbox.checked;
+            const nodeId = checkbox.id.replace('checkbox-', '');
+            const checkedNode = this._nodeNodes[nodeId];
+            const objects = this._viewer.scene.objects;
+            let numUpdated = 0;
+
+            viewer.scene.canvas.spinner.processes++;
+			
+			const callback = (data) => {
+                for (var i = 0; i < data.length; i++) {
+                    const entity = objects[data[i]];
+
+                    if (entity) {
+                        entity.visible = visible;
+                    }
+                }
+
+                viewer.scene.canvas.spinner.processes--;
+                viewer.scene.fire("reloadSmallScenes");
+			};
+			
+            processByChildIdList(checkedNode, callback);
+
+            this.setNodeChecked(checkedNode, visible);
+
+            /*
+            this._withNodeTree(checkedNode, (node) => {
+                const objectId = node.objectId;
+                const checkBoxId = `checkbox-${node.nodeId}`;
+                const isLeaf = (node.children.length === 0);
+                node.numVisibleEntities = visible ? node.numEntities : 0;
+                if (isLeaf && (visible !== node.checked)) {
+                    numUpdated++;
+                }
+                node.checked = visible;
+                const checkbox2 = document.getElementById(checkBoxId);
+                if (checkbox2) {
+                    checkbox2.checked = 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;
+                }
+                parent = parent.parent;
+            }*/
+            this._muteSceneEvents = false;
+        };
+		
+		// Right-clicking on a tree node shows the context menu for that node
+
+		this.on("contextmenu", (e) => {
+
+			treeViewContextMenu.context = { // Must set context before opening menu
+				viewer: e.viewer,
+				treeViewPlugin: e.treeViewPlugin,
+				treeViewNode: e.treeViewNode,
+				entity: e.viewer.scene.objects[e.treeViewNode.objectId] // Only defined if tree node is a leaf node
+			};
+
+			treeViewContextMenu.show(e.event.pageX, e.event.pageY);
+		});
+
+		// Left-clicking on a tree node isolates that object in the 3D view
+
+		this.on("nodeTitleClicked", (e) => {
+            const scene = viewer.scene;
+
+            e.treeViewPlugin.setCheckedAll(false);
+            e.treeViewPlugin.setNodeChecked(e.treeViewNode, true);
+
+            const event = (objectIds) => {
+				e.treeViewPlugin.unShowNode();
+				scene.setObjectsXRayed(scene.objectIds, true);
+				scene.setObjectsVisible(scene.objectIds, true);
+				scene.setObjectsXRayed(objectIds, false);
+				viewer.cameraFlight.flyTo({
+				aabb: scene.getAABB(objectIds),
+				duration: 0.5
+				}, () => {
+				setTimeout(function () {
+					scene.setObjectsVisible(scene.xrayedObjectIds, false);
+					scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+				}, 500);
+				});
+			}
+			
+			processByChildIdList(e.treeViewNode, event);
+		});
+    }
+    
+    showInTree(objectId) {
+        viewer.scene.canvas.spinner.processes++;
+        BIMModel.GetParentIdList(objectId, true, null,
+            (data) => {
+                for (var i = 0; i < data.length; i++) {
+                    this._expandSwitchElementByObjectId(data[i]);
+                }
+
+                viewer.scene.canvas.spinner.processes--;
+            },
+            (error) => {
+                viewer.scene.canvas.spinner.processes--;
+            }
+        );
+    }
+
+    setCheckedAll(checked) {
+        this.checked = checked;
+
+        this._rootNodes.forEach((rootNode) => {
+            this.setNodeChecked(rootNode, checked);
+        });
+    }
+        
+
+	setNodeChecked(node, checked){
+        this.withNodeTree(node, (node) => {
+            if (node) {
+                const checkbox2 = document.getElementById(`checkbox-${node.nodeId}`);
+
+                if (checkbox2) {
+                    checkbox2.checked = checked;
+                }
+
+                node.checked = checked;
+            }
+        });
+    }
+
+	_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 || node.childCount > 0) { //vitro  || node.childCount > 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,
+                viewer: this._viewer,
+                treeViewPlugin: this,
+                treeViewNode: node
+            });
+            e.preventDefault();
+        };
+        span.onclick = (e) => {
+            this.fire("nodeTitleClicked", {
+                event: e,
+                viewer: this._viewer,
+                treeViewPlugin: this,
+                treeViewNode: node
+            });
+            e.preventDefault();
+        };
+        return nodeElement;
+    }
+	
+	_createContainmentNodes2(metaObject, parent) {
+        if (this._pruneEmptyNodes && (metaObject._countEntities === 0)) {
+            return;
+        }
+        const metaObjectType = metaObject.type;
+        const metaObjectName = metaObject.name || metaObjectType;
+        const children = metaObject.children;
+        const objectId = metaObject.id;
+		const childCount = metaObject.childCount;//vitro
+        const node = {
+            nodeId: `${this._id}-${objectId}`,
+            objectId: objectId,
+            title: (!parent) ? (this._rootName || metaObjectName) : (metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType,
+            type: metaObjectType,
+            parent: parent,
+            numEntities: 0,
+            numVisibleEntities: 0,
+            checked: (parent) ? parent.checked : this.checked,
+            xrayed: false,
+            children: [],
+			childCount:childCount,//vitro
+        };
+        if (parent) {
+            parent.children.push(node);
+        } else {
+            this._rootNodes.push(node);
+        }
+        this._objectNodes[node.objectId] = node;
+        this._nodeNodes[node.nodeId] = node;
+        if (children) {
+            for (let i = 0, len = children.length; i < len; i++) {
+                const childMetaObject = children[i];
+                this._createContainmentNodes2(childMetaObject, node);
+            }
+        }
+    }
+
+	addObjectsToMetaModel(metaObjects, metaModel) {//vitro method
+		const _metaObjectList = [];
+		
+        if (metaObjects) {
+            for (let i = 0, len = metaObjects.length; i < len; i++) {
+                const metaObjectData = metaObjects[i];
+                const id = metaObjectData.id;
+                let metaObject = metaModel.metaScene.metaObjects[id];
+                if (!metaObject) {
+                    const type = metaObjectData.type;
+                    const originalSystemId = metaObjectData.originalSystemId;
+                    const propertySetIds = metaObjectData.propertySets || metaObjectData.propertySetIds;
+                    metaObject = new MetaObject({
+                        id,
+                        originalSystemId,
+                        parentId: metaObjectData.parent,
+                        type,
+                        name: metaObjectData.name,
+                        attributes: metaObjectData.attributes,
+                        propertySetIds,
+                        external: metaObjectData.external,
+                    });
+					metaObject.childCount = metaObjectData.child_count,
+                    metaModel.metaScene.metaObjects[id] = metaObject;
+                }
+                //metaObject.metaModels.push(metaModel); 
+                if ((!metaObjectData.parent) || (metaObjectData.parent === -1)) {
+                    metaModel.rootMetaObjects.push(metaObject);
+                    metaModel.metaScene.rootMetaObjects[id] = metaObject;
+                }
+				
+				metaModel.metaObjects.push(metaObject);
+				_metaObjectList.push(metaObject);
+            }
+        }
+		
+		return _metaObjectList;
+    }
+
+    _expandSwitchElementByObjectId(id){
+        const nodeId = `${this._id}-${id}`;
+        const switchElementId = "switch-" + nodeId;
+
+        const switchElement = document.getElementById(switchElementId);
+
+        if (switchElement) {
+            this._expandSwitchElement(switchElement);
+        }
+    }
+
+	_expandSwitchElement(switchElement) {
+        const parentElement = switchElement.parentElement;
+        const expanded = parentElement.getElementsByTagName('li')[0];
+        if (expanded) {
+            return;
+        }
+        const nodeId = parentElement.id;
+        const switchNode = this._nodeNodes[nodeId];
+        const childNodes = switchNode.children;
+		if(childNodes.length > 0){
+			this.createChildElement(parentElement, childNodes, switchElement)
+		}
+		else{
+			this.loadChildNodes(switchNode.objectId, parentElement, switchElement);
+		}
+    }
+	
+	loadChildNodes(objectId, parentElement, switchElement){
+		viewer.scene.canvas.spinner.processes++;
+
+        const callback = (metaObjects, status, jqXHR) =>
+        {
+			const metaModel = viewer.metaScene.metaModels[window.model.id];
+			const metaObjectList = this.addObjectsToMetaModel(metaObjects, metaModel);
+			const nodeId =`${this._id}-${objectId}`;
+			const parentNode = this._nodeNodes[nodeId];
+			const ul = document.createElement('ul');
+			
+			metaObjectList.forEach((object)=> {
+				this._createContainmentNodes2(object, parentNode);
+				const childNodeId =`${this._id}-${object.id}`;
+				const childNode = this._nodeNodes[childNodeId];
+				const nodeElement = this._createNodeElement(childNode);
+
+				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);	
+			
+			viewer.scene.canvas.spinner.processes--;
+        };
+
+        const error = () => {
+            viewer.scene.canvas.spinner.processes--;
+        };
+
+        BIMModel.GetChildList(objectId, false, null, callback, error);
+	}
+	
+	createChildElement(parentElement, childNodes, switchElement){
+		const nodeElements = childNodes.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);
+	}
+}
+
+export { VitroTreeViewPlugin };