Finish first version of Angular example

Author: agviegas

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

@@ -7,3 +7,8 @@
   width: 100vw;
   height: 100vh;
 }
+
+.stats{
+  visibility: collapse;
+  right: 0;
+}

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

@@ -2,12 +2,18 @@
     <mat-sidenav #sidenav opened="false" mode="side" opened>
         <app-toolbar
             (onOpenIfc)="loadIfc($event)"
+            (onActivateClipping)="activateClipping()"
         ></app-toolbar>
     </mat-sidenav>
-    <mat-sidenav-content>
+    <mat-sidenav-content >
         <button mat-fab color="accent" (click)="sidenav.toggle()" class="navbar-button">
             <mat-icon>menu</mat-icon>
         </button>
-        <div id="viewer-container"></div>
+        <app-spatial-tree #spatialTree [ifc]="ifcViewer"></app-spatial-tree>
+        <app-context-menu
+            (onAddClippingPlane)="addClippingPlane($event)"
+            (onRemoveClippingPlane)="removeClippingPlane($event)"
+        ></app-context-menu>
+        <div #threeContainer id="viewer-container"></div>
     </mat-sidenav-content>
   </mat-sidenav-container>

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

@@ -1,6 +1,8 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { IfcViewerAPI } from 'web-ifc-viewer';
+import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
+
 
 @Component({
   selector: 'app-root',
@@ -9,63 +11,69 @@ import { IfcViewerAPI } from 'web-ifc-viewer';
 })
 export class AppComponent implements OnInit {
   title = 'ifcjs-angular-example';
-  viewer?: IfcViewerAPI;
-  @ViewChild('sidenav', {static: true}) serverContentInput?: MatSidenav;
+  ifcViewer?: IfcViewerAPI;
+
+  @ViewChild('spatialTree', { static: true }) spatialTree?: SpatialTreeComponent;
+  @ViewChild('sidenav', { static: true }) sidenav?: MatSidenav;
+  @ViewChild('threeContainer', { static: true }) container?: ElementRef;
+
+  ngOnInit() {
+    if (this.sidenav) this.sidenav.close();
+    this.setupScene();
+    this.setupInputs();
+  }
+
+  setupScene() {
+    const container = this.getContainer();
+    if (!container) return this.notFoundError('container');
+    this.ifcViewer = new IfcViewerAPI({ container });
+    this.ifcViewer.addAxes();
+    this.ifcViewer.addGrid();
+    this.ifcViewer.addStats('position:absolute;bottom:0px;left:0px;z-index:1;');
+    this.ifcViewer.setWasmPath('assets/');
+  }
+
+  setupInputs() {
+    const container = this.getContainer();
+    if (!container) return this.notFoundError('container');
+    container.onclick = this.handleClick;
+    container.ondblclick = this.handleDoubleClick;
+    container.onmousemove = this.handleMouseMove;
+  }
+
+  activateClipping() {
+    this.ifcViewer?.toggleClippingPlanes();
+  }
+
+  addClippingPlane(event: Event) {
+    this.ifcViewer?.addClippingPlane();
+  }
+
+  removeClippingPlane(event: Event) {
+    this.ifcViewer?.removeClippingPlane();
+  }
+
+  loadIfc(file: File) {
+    this.ifcViewer?.loadIfc(file);
+  }
+
+  private handleClick = (event: Event) => {
+    const id = this.ifcViewer?.getModelID();
+    if (typeof id === 'number') this.spatialTree?.updateSpatialTree(id);
+  };
 
-  ngOnInit(){
+  private handleDoubleClick = (event: Event) => {};
 
-    if(this.serverContentInput) this.serverContentInput.close();
-    
-    const container = document.getElementById("viewer-container")!;
-    this.viewer = new IfcViewerAPI({container});
-    console.log(this.viewer);
-    this.viewer.addAxes();
-    this.viewer.addGrid();
-    this.viewer.setWasmPath("assets/");
+  private handleMouseMove = (_event: Event) => {
+    this.ifcViewer?.preselectIfcItem();
+  };
 
-    // const url = "https://raw.githubusercontent.com/IFCjs/test-ifc-files/main/Revit/TESTED_Simple_project_01.ifc";
-    // this.viewer.loadIfcUrl(url);
-    
-    //Setup loader
-    // const loadIfc = async (event) => {
-    //    await viewer.loadIfc(event.target.files[0], true);
-    // }
-    
-    // const inputElement = document.createElement('input');
-    // inputElement.setAttribute('type', 'file');
-    // inputElement.classList.add('hidden');
-    // inputElement.addEventListener('change', loadIfc, false);
-    // document.body.appendChild(inputElement);
-    
-    // const handleKeyDown = (event) => {
-    //     viewer.removeClippingPlane();
-    // };
-    
-    // window.onmousemove = viewer.preselectIfcItem;
-    // window.onkeydown = handleKeyDown;
-    // window.ondblclick = viewer.addClippingPlane;
-    
-    //Setup UI
-    // const loadButton = createSideMenuButton('./resources/folder-icon.svg');
-    //     loadButton.addEventListener('click', () => {
-    //     loadButton.blur();
-    //     inputElement.click();
-    // });
-    
-    // const sectionButton = createSideMenuButton('./resources/section-plane-down.svg');
-    // sectionButton.addEventListener('click', () => {
-    //     sectionButton.blur();
-    //     viewer.toggleClippingPlanes();
-    // });
-    
-    // const dropBoxButton = createSideMenuButton('./resources/dropbox-icon.svg');
-    // dropBoxButton.addEventListener('click', () => {
-    //     dropBoxButton.blur();
-    //     viewer.openDropboxWindow();
-    // });
+  private notFoundError(item: string) {
+    throw new Error(`ERROR: ${item} could not be found!`);
   }
 
-  loadIfc(file: File){
-    this.viewer?.loadIfc(file);
+  private getContainer() {
+    if (!this.container) return null;
+    return this.container.nativeElement as HTMLElement;
   }
 }

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

@@ -7,18 +7,40 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { ContextMenuComponent } from './context-menu/context-menu.component';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
+import {MatCardModule} from '@angular/material/card';
+import {MatExpansionModule} from '@angular/material/expansion';
+import { ClickStopPropagationDirective } from './directives/click-stop-propagation.directive';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatListModule} from '@angular/material/list';
+import {MatTableModule} from '@angular/material/table';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ToolbarComponent
+    ToolbarComponent,
+    ContextMenuComponent,
+    SpatialTreeComponent,
+    ClickStopPropagationDirective,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatSidenavModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    MatMenuModule,
+    MatTreeModule,
+    MatCheckboxModule,
+    MatCardModule,
+    MatExpansionModule,
+    MatDividerModule,
+    MatListModule,
+    MatTableModule
   ],
   providers: [],
   bootstrap: [AppComponent]

examples/simple-angular/src/app/context-menu/context-menu.component.css

@@ -0,0 +1,11 @@
+<!-- <button mat-raised-button [matMenuTriggerFor]="menu">Menu</button> -->
+<mat-menu #menu="matMenu" class="contextMenu">
+    <button (click)="onAddClippingPlane($event)" mat-menu-item>Add clipping plane</button>
+    <button (click)="onRemoveClippingPlane($event)" mat-menu-item>Remove clipping plane</button>
+</mat-menu>
+
+<!-- an hidden div is created to set the position of appearance of the menu--> 
+<div style="visibility: hidden; position: fixed;" 
+[style.left]="menuTopLeftPosition.x" 
+[style.top]="menuTopLeftPosition.y" 
+[matMenuTriggerFor]="menu"></div> 

examples/simple-angular/src/app/context-menu/context-menu.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContextMenuComponent } from './context-menu.component';
+
+describe('ContextMenuComponent', () => {
+  let component: ContextMenuComponent;
+  let fixture: ComponentFixture<ContextMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContextMenuComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/simple-angular/src/app/context-menu/context-menu.component.spec.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, Output, ViewChild, EventEmitter } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+
+//source: https://marco.dev/angular-right-click-menu
+
+@Component({
+  selector: 'app-context-menu',
+  templateUrl: './context-menu.component.html',
+  styleUrls: ['./context-menu.component.css']
+})
+export class ContextMenuComponent implements OnInit {
+
+  menuTopLeftPosition =  {x: '0', y: '0'} 
+  @ViewChild(MatMenuTrigger, {static: true}) matMenuTrigger?: MatMenuTrigger; 
+  @Output('onAddClippingPlane') onAddClipping = new EventEmitter();
+  @Output('onRemoveClippingPlane') onRemoveClipping = new EventEmitter();
+
+  constructor() {
+    this.setupEvents();
+   }
+
+  ngOnInit(): void { }
+
+  onAddClippingPlane(event: Event){
+    console.log(event);
+    this.onAddClipping.emit(event);
+  }
+
+  onRemoveClippingPlane(event: Event){
+    console.log(event);
+    this.onRemoveClipping.emit(event);
+  }
+
+  setupEvents(){
+    window.oncontextmenu = this.popup;
+  }
+
+  popup = (event: MouseEvent) => { 
+    // preventDefault avoids to show the visualization of the right-click menu of the browser 
+    event.preventDefault(); 
+    this.matMenuTrigger?.closeMenu();
+    setTimeout(() => this.openMenu(event), 200);
+  } 
+
+  openMenu(event: MouseEvent){
+    if(!this.matMenuTrigger) return;
+    this.menuTopLeftPosition.x = event.clientX + 'px'; 
+    this.menuTopLeftPosition.y = event.clientY + 'px';
+    this.matMenuTrigger.openMenu(); 
+  }
+}

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

@@ -0,0 +1,8 @@
+import { ClickStopPropagationDirective } from './click-stop-propagation.directive';
+
+describe('ClickStopPropagationDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ClickStopPropagationDirective();
+    expect(directive).toBeTruthy();
+  });
+});

examples/simple-angular/src/app/directives/click-stop-propagation.directive.spec.ts

@@ -0,0 +1,14 @@
+import {Directive, HostListener} from "@angular/core";
+
+@Directive({
+  selector: '[click-stop-propagation]'
+})
+export class ClickStopPropagationDirective {
+
+  @HostListener("click", ["$event"])
+  public onClick(event: any): void
+  {
+      event.stopPropagation();
+  }
+
+}