Start building optimized recursive spatial tree

Author: agviegas

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

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild, ElementRef, HostListener } from '@angular/core';
+import { Component, AfterContentInit, ViewChild, ElementRef, HostListener } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { IfcService } from './services/ifc.service';
 import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
@@ -8,7 +8,7 @@ import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterContentInit {
 
   title = 'ifcjs-angular-example';
   ifc: IfcService;
@@ -21,7 +21,7 @@ export class AppComponent implements AfterViewInit {
     this.ifc = service;
   }
 
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     if (this.sidenav) this.sidenav.close();
     const container = this.getContainer();
     if(container) this.ifc.startIfcViewer(container);

examples/simple-angular/src/app/services/ifc.service.ts

@@ -1,8 +1,14 @@
 import { IfcViewerAPI } from 'web-ifc-viewer';
 
 export class IfcService {
+  currentModel = -1;
   ifcViewer?: IfcViewerAPI;
   container?: HTMLElement;
+  onClickActions: ((modelID: number, id: number) => void)[];
+
+  constructor() {
+    this.onClickActions = [];
+  }
 
   startIfcViewer(container: HTMLElement) {
     if (!container) return this.notFoundError('container');
@@ -11,7 +17,7 @@ export class IfcService {
     this.setupInputs();
   }
 
-  setupIfcScene(){
+  setupIfcScene() {
     if (!this.container) return;
     this.ifcViewer = new IfcViewerAPI({ container: this.container });
     this.ifcViewer.addAxes();
@@ -27,9 +33,15 @@ export class IfcService {
     this.container.onmousemove = this.handleMouseMove;
   }
 
+  subscribeOnClick(action: (modelID: number, id: number) => void) {
+    this.onClickActions.push(action);
+  }
+
   private handleClick = (event: Event) => {
-    const id = this.ifcViewer?.getModelID();
-    // if (typeof id === 'number') this.spatialTree?.updateSpatialTree(id);
+    const modelID = this.ifcViewer?.getModelID();
+    if(typeof modelID != 'number') return;
+    this.currentModel = modelID;
+    this.onClickActions.forEach(action => action(modelID, -1));
   };
 
   private handleDoubleClick = (event: Event) => {};

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

@@ -1,26 +1,28 @@
 <mat-accordion>
-  <mat-expansion-panel 
-      (opened)="loadChildren()" 
-      class="mat-elevation-z0 spatial-tree-node" 
-      [ngClass] = "{'root-node': rootNode && clicked}" 
-      hideToggle>
+  <mat-expansion-panel
+    (opened)="loadChildren()"
+    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 }}</mat-checkbox>
+        <mat-checkbox class="example-margin" click-stop-propagation>{{ name }}</mat-checkbox>
       </mat-panel-title>
-      <mat-panel-description> {{"ID: " + ifcID}} </mat-panel-description>
+      <mat-panel-description> {{ 'ID: ' + ifcID }} </mat-panel-description>
     </mat-expansion-panel-header>
 
-
     <app-spatial-tree-node
-    *ngFor="let spatialChild of spatialChildren; index as i"
-    [currentModel]="currentModel"
-    [ifcID]="spatialChildren[i]"
-    [ifc]="ifcViewer"
-    prefix="IfcProject"
-  >
-  </app-spatial-tree-node>
-
+      *ngFor="let spatialChild of spatialChildren; index as i"
+      [ifcID]="spatialChildren[i]"
+      (spatialIndex)="(spatialIndex == 0 || spatialIndex) ? spatialIndex + 1 : 0"
+    >
+    </app-spatial-tree-node>
 
+    <!-- <app-spatial-tree-node
+    *ngFor="let child of children; index as j"
+    [ifcID]="children[j]"
+  >
+  </app-spatial-tree-node> -->
   </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, Output, EventEmitter } from '@angular/core';
+import { Component, Input, AfterContentInit, EventEmitter } from '@angular/core';
+import { IfcService } from 'src/app/services/ifc.service';
 import { IfcViewerAPI } from '../../../../../../viewer/dist';
 
 @Component({
@@ -7,34 +8,37 @@ import { IfcViewerAPI } from '../../../../../../viewer/dist';
   styleUrls: ['./spatial-tree-node.component.css']
 })
 export class SpatialTreeNodeComponent implements AfterContentInit {
-  @Input('currentModel') currentModel: number;
-  @Input('ifcID') ifcID: number;
-  @Input('prefix') prefix: string;
-  @Input('rootNode') rootNode: boolean;
-  @Input('ifc') ifcViewer?: IfcViewerAPI;
-  // @Output('onSelect') onSelect = new EventEmitter();
-  props: object;
-  spatialChildren: number[];
-  clicked: boolean;
+  @Input('ifcID') ifcID: number = -1;
+  @Input('rootNode') rootNode: boolean = false;
+  @Input('spatialIndex') spatialIndex?: number;
 
-  constructor() {
-    this.ifcID = -1;
-    this.currentModel = -1;
-    this.clicked = false;
-    this.rootNode = false;
-    this.spatialChildren = [];
-    this.props = {};
-    this.prefix = '';
+  ifc: IfcService;
+  name: string = '';
+  props: any = {};
+  spatialChildren: number[] = [];
+  children: number[] = [];
+  clicked: boolean = false;
+  spatialStructure: string[] = [
+    'IfcProject',
+    'IfcSite',
+    'IfcBuilding',
+    'IfcBuildingStorey',
+    'IfcSpace'
+  ];
+
+  constructor(service: IfcService) {
+    this.ifc = service;
   }
 
-  ngAfterContentInit(): void {}
+  ngAfterContentInit() {
+    if (this.spatialIndex) this.name = this.spatialStructure[this.spatialIndex] || 'IfcItem';
+  }
 
   loadChildren() {
     this.clicked = true;
-    // this.onSelect.emit(this.ifcID);
     const found = { expressID: this.ifcID, hasChildren: [], hasSpatialChildren: [] };
-    this.ifcViewer?.getAllSpatialChildren(this.currentModel, found, false, true);
-    console.log(found);
+    this.ifc.ifcViewer?.getAllSpatialChildren(this.ifc.currentModel, found, false, true);
     this.spatialChildren = found.hasSpatialChildren;
+    this.children = found.hasChildren;
   }
 }

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

@@ -1,11 +1,8 @@
 <div class="tree-menu">
   <app-spatial-tree-node
     *ngFor="let project of ifcProjects; index as i"
-    [rootNode]="true"
-    [currentModel]="currentModel"
     [ifcID]="ifcProjects[i]"
-    [ifc]="ifcViewer"
-    prefix="IfcProject"
+    [rootNode]="true"
   >
   </app-spatial-tree-node>
 </div>

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

@@ -1,53 +1,30 @@
-import { Component, AfterViewInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { IFCPROJECT } from 'web-ifc';
 import { IfcViewerAPI } from '../../../../../viewer/dist';
+import { IfcService } from '../services/ifc.service';
 // import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'app-spatial-tree',
   templateUrl: './spatial-tree.component.html',
   styleUrls: ['./spatial-tree.component.css']
 })
-export class SpatialTreeComponent implements AfterViewInit {
-  @Input('ifc') ifcViewer?: IfcViewerAPI;
-
-  spatialTree: any;
+export class SpatialTreeComponent {
+  ifc: IfcService;
   currentModel: number;
   ifcProjects: number[];
-  ifcSites: number[];
-  ifcBuildings: number[];
-  ifcStoreys: number[];
-  ifcProducts: {[key: number]: number[]};
-  spatialChildren: {[key: number]: number[]};
 
-  constructor() {
+  constructor(service: IfcService) {
+    this.ifc = service;
     this.currentModel = -1;
-    this.spatialTree = {};
     this.ifcProjects = [];
-    this.ifcSites = [];
-    this.ifcBuildings = [];
-    this.ifcStoreys = [];
-    this.ifcProducts = {};
-    this.spatialChildren = {};
+    this.ifc.subscribeOnClick(this.updateSpatialTree);
   }
 
-  ngAfterViewInit(): void {}
-
-  updateSpatialTree(modelID: number) {
+  updateSpatialTree = (modelID: number, id: number) => {
     if (modelID == this.currentModel) return;
     this.currentModel = modelID;
-    const ifcProjectsIds = this.ifcViewer?.getAllItemsOfType(modelID, IFCPROJECT, false);
+    const ifcProjectsIds = this.ifc.ifcViewer?.getAllItemsOfType(modelID, IFCPROJECT, false);
     if (ifcProjectsIds) this.ifcProjects = ifcProjectsIds;
   }
-
-  // getSpatialChildren(id: number, spatialChildren: number[]){
-  //   const found = { expressID: id, hasChildren: [], hasSpatialChildren: [] };
-  //   this.ifcViewer?.getAllSpatialChildren(this.currentModel, found, false, true);
-  //   console.log(found);
-  //   if(spatialChildren != undefined){
-  //     spatialChildren.length = 0;
-  //     spatialChildren.push(...found.hasSpatialChildren);
-  //   }
-  //   this.ifcProducts[id] = found.hasChildren;
-  // }
 }

examples/simple-angular/src/app/toolbar/toolbar.component.ts

@@ -1,15 +1,14 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 import { IfcService } from '../services/ifc.service';
 
 @Component({
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html',
   styleUrls: ['./toolbar.component.css']
 })
-export class ToolbarComponent implements OnInit {
-  clippingActive: boolean;
+export class ToolbarComponent {
   ifc: IfcService;
-
+  clippingActive: boolean;
   private fileOpener: HTMLInputElement;
 
   constructor(service: IfcService) {
@@ -18,8 +17,6 @@ export class ToolbarComponent implements OnInit {
     this.fileOpener = this.newFileOpener();
   }
 
-  ngOnInit(): void {}
-
   onOpenIfc() {
     this.fileOpener.click();
   }