First version of lazy tree structure menu

Author: agviegas

examples/simple-angular/src/app/spatial-tree/spatial-tree-node/spatial-tree-node.component.css

@@ -0,0 +1,8 @@
+.spatial-tree-node {
+  max-height: 100vh;
+  width: 25rem;
+}
+
+.root-node{
+  overflow-y: auto;
+}

examples/simple-angular/src/app/spatial-tree/spatial-tree-node/spatial-tree-node.component.html

@@ -1,10 +1,14 @@
 <mat-accordion>
-  <mat-expansion-panel (opened)="loadChild()" class="mat-elevation-z0" style="height: auto;" hideToggle>
+  <mat-expansion-panel 
+      (opened)="loadChild()" 
+      class="mat-elevation-z0 spatial-tree-node" 
+      [ngClass] = "{'root-node': rootNode && clicked}" 
+      hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
-        <mat-checkbox class="example-margin" click-stop-propagation>{{ prefix + " - " + ifcID }}</mat-checkbox>
+        <mat-checkbox class="example-margin" click-stop-propagation>{{ prefix }}</mat-checkbox>
       </mat-panel-title>
-      <mat-panel-description> This is a summary of the content </mat-panel-description>
+      <mat-panel-description> {{"ID: " + ifcID}} </mat-panel-description>
     </mat-expansion-panel-header>
     <ng-content></ng-content>
   </mat-expansion-panel>

examples/simple-angular/src/app/spatial-tree/spatial-tree-node/spatial-tree-node.component.ts

@@ -10,11 +10,15 @@ export class SpatialTreeNodeComponent implements AfterContentInit {
 
   @Input('ifcID') ifcID: number;
   @Input('prefix') prefix: string;
+  @Input('rootNode') rootNode: boolean;
   @Input('ifcViewer') ifcViewer?: IfcViewerAPI;
   @Output("onSelect") onSelect = new EventEmitter();
   props: object;
+  clicked: boolean;
 
   constructor() { 
+    this.clicked = false;
+    this.rootNode = false;
     this.props = {};
     this.prefix = "";
     this.ifcID = -1;
@@ -25,6 +29,7 @@ export class SpatialTreeNodeComponent implements AfterContentInit {
   }
 
   loadChild(){
+    this.clicked = true;
     this.onSelect.emit(this.ifcID);
   }
 

examples/simple-angular/src/app/spatial-tree/spatial-tree.component.html

@@ -1,15 +1,32 @@
 <div class="tree-menu">
   <app-spatial-tree-node
-    (onSelect)="updateProperty($event, ifcSites)"
-    *ngFor="let project of ifcProjects; index as i"
+    [rootNode]="true"
     [ifcID]="ifcProjects[i]"
+    (onSelect)="getSpatialChildren($event, ifcSites)"
+    *ngFor="let project of ifcProjects; index as i"
     prefix="IfcProject"
   >
     <app-spatial-tree-node
-      *ngFor="let project of ifcSites; index as j"
+      (onSelect)="getSpatialChildren($event, ifcBuildings)"
+      *ngFor="let site of ifcSites; index as j"
       [ifcID]="ifcSites[j]"
       prefix="IfcSite"
     >
+      <app-spatial-tree-node
+        (onSelect)="getSpatialChildren($event, ifcStoreys)"
+        *ngFor="let building of ifcBuildings; index as k"
+        [ifcID]="ifcBuildings[k]"
+        prefix="IfcBuilding"
+      >
+        <app-spatial-tree-node
+        *ngFor="let storey of ifcStoreys; index as l"
+        [ifcID]="ifcStoreys[l]"
+        prefix="IfcBuildingStorey"
+      >
+      
+      
+      </app-spatial-tree-node>
+      </app-spatial-tree-node>
     </app-spatial-tree-node>
   </app-spatial-tree-node>
 </div>

examples/simple-angular/src/app/spatial-tree/spatial-tree.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit, Input } from '@angular/core';
-import { MatMenuTrigger } from '@angular/material/menu';
 import { IFCPROJECT } from 'web-ifc';
 import { IfcViewerAPI } from '../../../../../viewer/dist';
+// import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'app-spatial-tree',
@@ -17,6 +17,8 @@ export class SpatialTreeComponent implements AfterViewInit {
   ifcSites: number[];
   ifcBuildings: number[];
   ifcStoreys: number[];
+  ifcProducts: {[key: number]: number[]};
+  spatialChildren: {[key: number]: number[]};
 
   constructor() {
     this.currentModel = -1;
@@ -25,6 +27,8 @@ export class SpatialTreeComponent implements AfterViewInit {
     this.ifcSites = [];
     this.ifcBuildings = [];
     this.ifcStoreys = [];
+    this.ifcProducts = {};
+    this.spatialChildren = {};
   }
 
   ngAfterViewInit(): void {}
@@ -36,11 +40,14 @@ export class SpatialTreeComponent implements AfterViewInit {
     if (ifcProjectsIds) this.ifcProjects = ifcProjectsIds;
   }
 
-  updateProperty(id: number, property: number[]){
+  getSpatialChildren(id: number, spatialChildren: number[]){
     const found = { expressID: id, hasChildren: [], hasSpatialChildren: [] };
-    this.ifcViewer?.getAllSpatialChildren(this.currentModel, found, false);
+    this.ifcViewer?.getAllSpatialChildren(this.currentModel, found, false, true);
     console.log(found);
-    property.length = 0;
-    property.push(...found.hasSpatialChildren);
+    if(spatialChildren != undefined){
+      spatialChildren.length = 0;
+      spatialChildren.push(...found.hasSpatialChildren);
+    }
+    this.ifcProducts[id] = found.hasChildren;
   }
 }

viewer/package.json

@@ -31,7 +31,7 @@
     "@types/stats.js": "^0.17.0",
     "stats.js": "^0.17.0",
     "three": "^0.128.0",
-    "web-ifc-three": "0.0.26"
+    "web-ifc-three": "0.0.27"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",

viewer/src/components/ifc/ifc-manager.ts

@@ -73,8 +73,8 @@ export class IfcManager extends IfcComponent {
     return this.loader.getAllItemsOfType(modelID, type, verbose);
   }
 
-  getAllSpatialChildren(modelID: number, item: Node, recursive = false) {
-    return this.loader.getAllSpatialChildren(modelID, item, recursive);
+  getAllSpatialChildren(modelID: number, item: Node, recursive = false, onlyID = false) {
+    return this.loader.getAllSpatialChildren(modelID, item, recursive, onlyID);
   }
 
   prePickIfcItem() {

viewer/src/ifc-viewer-api.ts

@@ -52,8 +52,8 @@ export class IfcViewerAPI {
     return this.ifcManager.getAllItemsOfType(modelID, type, verbose);
   }
 
-  getAllSpatialChildren(modelID: number, item: Node, recursive = false) {
-    return this.ifcManager.getAllSpatialChildren(modelID, item, recursive);
+  getAllSpatialChildren(modelID: number, item: Node, recursive = false, onlyID = false) {
+    return this.ifcManager.getAllSpatialChildren(modelID, item, recursive, onlyID);
   }
 
   addClippingPlane = () => {

yarn.lock

@@ -15955,10 +15955,10 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-web-ifc-three@0.0.26:
-  version "0.0.26"
-  resolved "https://registry.yarnpkg.com/web-ifc-three/-/web-ifc-three-0.0.26.tgz#7e1d771ad6317eb132006bd9e72e7c5e95053908"
-  integrity sha512-WerN11MYnora9S+InsyuQx5drorn7AAZSmISFxftfbupZBlH0YPMOmp1YKY0pY8EmArrg/Y0h/oDso+ZfOvu3w==
+web-ifc-three@0.0.27:
+  version "0.0.27"
+  resolved "https://registry.yarnpkg.com/web-ifc-three/-/web-ifc-three-0.0.27.tgz#0cdd6e6c0262c7498a7317cf1a6aa78a31603c17"
+  integrity sha512-QotYoD3x7XdTCZTM/77EdFHkdvNJft7APw/jTrq2ahhXDIVz5o0MkvzpEXIjd/5JLH7kN1BKKjRZW69XkU+J+Q==
   dependencies:
     stats.js "^0.17.0"
     three "^0.128.0"