Start tree menu node component

Author: agviegas

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

@@ -1,10 +1,11 @@
-<mat-accordion class="tree-menu">
-  <mat-expansion-panel class="mat-elevation-z0" hideToggle>
+<mat-accordion>
+  <mat-expansion-panel (opened)="loadChild()" class="mat-elevation-z0" style="height: auto;" hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
         <mat-checkbox class="example-margin" click-stop-propagation>{{ prefix + " - " + ifcID }}</mat-checkbox>
       </mat-panel-title>
       <mat-panel-description> This is a summary of the content </mat-panel-description>
     </mat-expansion-panel-header>
+    <ng-content></ng-content>
   </mat-expansion-panel>
 </mat-accordion>

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

@@ -1,4 +1,5 @@
-import { Component, AfterContentInit, Input } from '@angular/core';
+import { Component, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
+import { IfcViewerAPI } from '../../../../../../viewer/dist';
 
 @Component({
   selector: 'app-spatial-tree-node',
@@ -9,6 +10,8 @@ export class SpatialTreeNodeComponent implements AfterContentInit {
 
   @Input('ifcID') ifcID: number;
   @Input('prefix') prefix: string;
+  @Input('ifcViewer') ifcViewer?: IfcViewerAPI;
+  @Output("onSelect") onSelect = new EventEmitter();
   props: object;
 
   constructor() { 
@@ -21,4 +24,8 @@ export class SpatialTreeNodeComponent implements AfterContentInit {
 
   }
 
+  loadChild(){
+    this.onSelect.emit(this.ifcID);
+  }
+
 }

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

@@ -1,8 +1,4 @@
 .tree-menu {
-  min-width: 20rem;
   position: absolute;
-  padding: 0;
-  right: 0rem;
-  height: 100vh;
-  overflow: auto;
+  right: 0;
 }

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

@@ -1,7 +1,15 @@
-
-<app-spatial-tree-node 
-class="tree-menu" 
-*ngFor="let project of ifcProjects; index as i" 
-[ifcID]="ifcProjects[i]" 
-prefix="IfcProject"
-></app-spatial-tree-node>
+<div class="tree-menu">
+  <app-spatial-tree-node
+    (onSelect)="updateProperty($event, ifcSites)"
+    *ngFor="let project of ifcProjects; index as i"
+    [ifcID]="ifcProjects[i]"
+    prefix="IfcProject"
+  >
+    <app-spatial-tree-node
+      *ngFor="let project of ifcSites; index as j"
+      [ifcID]="ifcSites[j]"
+      prefix="IfcSite"
+    >
+    </app-spatial-tree-node>
+  </app-spatial-tree-node>
+</div>

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

@@ -12,13 +12,19 @@ export class SpatialTreeComponent implements AfterViewInit {
   @Input('ifc') ifcViewer?: IfcViewerAPI;
 
   spatialTree: any;
-  currentModel?: number;
+  currentModel: number;
   ifcProjects: number[];
+  ifcSites: number[];
+  ifcBuildings: number[];
+  ifcStoreys: number[];
 
   constructor() {
     this.currentModel = -1;
     this.spatialTree = {};
     this.ifcProjects = [];
+    this.ifcSites = [];
+    this.ifcBuildings = [];
+    this.ifcStoreys = [];
   }
 
   ngAfterViewInit(): void {}
@@ -30,35 +36,11 @@ export class SpatialTreeComponent implements AfterViewInit {
     if (ifcProjectsIds) this.ifcProjects = ifcProjectsIds;
   }
 
-  // createTreeBranche(item: any) {
-  //   const name = item.__proto__.constructor.name;
-  //   const properties = this.getProperties(item);
-  //   const spatialChildren = item.hasSpatialChildren.map((child: any) => this.createTreeBranche(child));
-  //   const children = item.hasChildren;
-  //   return {name, properties, spatialChildren, children};
-  // }
-
-  // getGuid(item: any) {
-  //   if (item.GlobalId) return item.GlobalId.value as string;
-  //   return '';
-  // }
-
-  // getProperties(item: any) {
-  //   if (!item) return '';
-  //   const result: any = [];
-  //   Object.keys(item).forEach((i) => {
-  //     if (i != 'hasChildren' && i != 'hasSpatialChildren')
-  //       result.push({ name: i, value: this.getValue(item[i]) });
-  //   });
-  //   return result;
-  // }
-
-  // getValue(prop: any) {
-  //   if (prop === null || prop === undefined) return 'undefined';
-  //   if (typeof prop === 'number') return prop;
-  //   if (Array.isArray(prop)) return prop.map(p => p.value);
-  //   if (typeof prop === 'string' && prop.length > 0) return prop;
-  //   if (typeof prop === 'object' && prop.value) return prop.value;
-  //   return 'undefined';
-  // }
+  updateProperty(id: number, property: number[]){
+    const found = { expressID: id, hasChildren: [], hasSpatialChildren: [] };
+    this.ifcViewer?.getAllSpatialChildren(this.currentModel, found, false);
+    console.log(found);
+    property.length = 0;
+    property.push(...found.hasSpatialChildren);
+  }
 }