Skip to content

Commit c21886f

Browse files
agviegasagviegas
committed
Finish first version of Angular example
1 parent 3f09972 commit c21886f

25 files changed

+524
-227
lines changed

‎examples/simple-angular/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@angular/router": "~12.0.5",
2424
"hammerjs": "^2.0.8",
2525
"rxjs": "~6.6.0",
26+
"three": "^0.129.0",
2627
"tslib": "^2.1.0",
2728
"web-ifc": "^0.0.20",
2829
"web-ifc-viewer": "^1.0.11",

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
.navbar-button {
2-
position: absolute;
3-
margin: 1rem;
1+
.stats{
2+
visibility: collapse;
3+
right: 0;
4+
}
5+
6+
.mat-drawer-inner-container{
7+
padding: 0;
8+
}
9+
10+
.sidemenu{
11+
padding: 0 0 1rem 0;
12+
max-width: 50%;
413
}
514

615
#viewer-container {
716
width: 100vw;
817
height: 100vh;
9-
}
10-
11-
.stats{
12-
visibility: collapse;
13-
right: 0;
1418
}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<mat-sidenav-container class="example-container">
2-
<mat-sidenav #sidenav mode="side" opened>
3-
<app-toolbar></app-toolbar>
1+
<mat-sidenav-container>
2+
<mat-sidenav #sidenav mode="side" class="sidemenu" opened>
3+
<app-property-menu #propMenu></app-property-menu>
4+
<app-spatial-tree #spatialTree></app-spatial-tree>
45
</mat-sidenav>
56
<mat-sidenav-content>
6-
<button mat-fab color="accent" (click)="sidenav.toggle()" class="navbar-button">
7-
<mat-icon>menu</mat-icon>
8-
</button>
9-
<app-spatial-tree #spatialTree></app-spatial-tree>
7+
<app-toolbar (onOpenNavbar)="sidenav.toggle()"></app-toolbar>
108
<app-context-menu></app-context-menu>
119
<div #threeContainer id="viewer-container"></div>
1210
</mat-sidenav-content>

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4-
54
import { AppComponent } from './app.component';
65
import { ToolbarComponent } from './toolbar/toolbar.component';
76
import { MatSidenavModule } from '@angular/material/sidenav';
87
import { MatButtonModule } from '@angular/material/button';
98
import { MatIconModule } from '@angular/material/icon';
109
import { ContextMenuComponent } from './context-menu/context-menu.component';
11-
import {MatMenuModule} from '@angular/material/menu';
12-
import {MatTreeModule} from '@angular/material/tree';
13-
import {MatCheckboxModule} from '@angular/material/checkbox';
10+
import { MatMenuModule } from '@angular/material/menu';
11+
import { MatTreeModule } from '@angular/material/tree';
12+
import { MatCheckboxModule } from '@angular/material/checkbox';
1413
import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
15-
import {MatCardModule} from '@angular/material/card';
16-
import {MatExpansionModule} from '@angular/material/expansion';
14+
import { MatCardModule } from '@angular/material/card';
15+
import { MatExpansionModule } from '@angular/material/expansion';
1716
import { ClickStopPropagationDirective } from './directives/click-stop-propagation.directive';
18-
import {MatDividerModule} from '@angular/material/divider';
19-
import {MatListModule} from '@angular/material/list';
20-
import {MatTableModule} from '@angular/material/table';
21-
import { SpatialTreeNodeComponent } from './spatial-tree/spatial-tree-node/spatial-tree-node.component';
17+
import { MatDividerModule } from '@angular/material/divider';
18+
import { MatListModule } from '@angular/material/list';
19+
import { MatTableModule } from '@angular/material/table';
2220
import { PropertyMenuComponent } from './property-menu/property-menu.component';
2321
import { IfcService } from './services/ifc.service';
22+
import { SummaryPipe } from './pipes/summary';
23+
import {MatTooltipModule} from '@angular/material/tooltip';
2424

2525
@NgModule({
2626
declarations: [
@@ -29,8 +29,8 @@ import { IfcService } from './services/ifc.service';
2929
ContextMenuComponent,
3030
SpatialTreeComponent,
3131
ClickStopPropagationDirective,
32-
SpatialTreeNodeComponent,
3332
PropertyMenuComponent,
33+
SummaryPipe
3434
],
3535
imports: [
3636
BrowserModule,
@@ -45,9 +45,10 @@ import { IfcService } from './services/ifc.service';
4545
MatExpansionModule,
4646
MatDividerModule,
4747
MatListModule,
48-
MatTableModule
48+
MatTableModule,
49+
MatTooltipModule
4950
],
5051
providers: [IfcService],
5152
bootstrap: [AppComponent]
5253
})
53-
export class AppModule { }
54+
export class AppModule {}

‎examples/simple-angular/src/app/pipes/summary.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Pipe, PipeTransform } from "@angular/core";
2+
3+
@Pipe({
4+
name: "summary"
5+
})
6+
export class SummaryPipe implements PipeTransform {
7+
transform(value: string, limit: number = 50){
8+
if(!value) return "undefined";
9+
if(value.length < limit) return value;
10+
return value.substr(0, limit) + "...";
11+
}
12+
}

‎examples/simple-angular/src/app/property-menu/property-menu.component.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
table {
2+
width: 100%;
3+
}
4+
5+
.prop-menu {
6+
min-height: 50%;
7+
max-height: 50%;
8+
width: 100%;
9+
overflow-y: scroll;
10+
border-bottom: solid 1px rgb(179, 179, 179);
11+
}
12+
13+
.props-table {
14+
right: 0;
15+
}
16+
17+
.align-right{
18+
text-align: right !important;
19+
}
20+
21+
::ng-deep .tooltip {
22+
position: absolute;
23+
right: 1rem;
24+
}

‎examples/simple-angular/src/app/property-menu/property-menu.component.html‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,50 @@
11
<mat-accordion>
2-
<mat-expansion-panel class="mat-elevation-z0" hideToggle>
2+
<div class="prop-menu">
3+
<mat-expansion-panel
4+
*ngFor="let propertyGroup of properties; index as i"
5+
class="mat-elevation-z0"
6+
hideToggle
7+
>
38
<mat-expansion-panel-header>
4-
<mat-panel-title> Properties </mat-panel-title>
9+
<mat-panel-title> {{ propertyGroup.name }} </mat-panel-title>
510
<mat-panel-description> This is a summary of the content </mat-panel-description>
611
</mat-expansion-panel-header>
712

813
<mat-divider></mat-divider>
9-
<!--
10-
<table mat-table [dataSource]="spatialTree.properties" class="mat-elevation-z0 props-table">
11-
<ng-container matColumnDef="name">
12-
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
13-
</ng-container>
1414

15-
<ng-container matColumnDef="value">
16-
<td mat-cell *matCellDef="let element" class="header-align-right">
17-
{{ element.value }}
18-
</td>
19-
</ng-container>
15+
<div class="prop-menu-content">
16+
<table mat-table [dataSource]="dataSources[i]" class="mat-elevation-z0">
17+
<ng-container matColumnDef="name">
18+
<th mat-header-cell *matHeaderCellDef>Name</th>
19+
<td
20+
mat-cell
21+
*matCellDef="let element"
22+
matTooltip="{{ element.value }}"
23+
matTooltipClass="tooltip"
24+
matTooltipPosition="right"
25+
>
26+
{{ element.name | summary: 20 }}
27+
</td>
28+
</ng-container>
2029

21-
<tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
22-
</table> -->
30+
<ng-container matColumnDef="value">
31+
<th mat-header-cell *matHeaderCellDef class="align-right">Value</th>
32+
<td
33+
mat-cell
34+
*matCellDef="let element"
35+
matTooltip="{{ element.value }}"
36+
matTooltipPosition="right"
37+
matTooltipClass="tooltip"
38+
class="align-right"
39+
>
40+
{{ element.value | summary: 10 }}
41+
</td>
42+
</ng-container>
43+
44+
<tr mat-header-row *matHeaderRowDef="['name', 'value']"></tr>
45+
<tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
46+
</table>
47+
</div>
2348
</mat-expansion-panel>
24-
</mat-accordion>
49+
</div>
50+
</mat-accordion>

‎examples/simple-angular/src/app/property-menu/property-menu.component.ts‎

Lines changed: 86 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,98 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
2+
import { MatTableDataSource } from '@angular/material/table';
3+
import { IfcService } from '../services/ifc.service';
4+
5+
interface ifcProperty {
6+
[key: string]: string;
7+
}
8+
9+
interface ifcPropertyGroup {
10+
name: string;
11+
props: ifcProperty[];
12+
}
213

314
@Component({
415
selector: 'app-property-menu',
516
templateUrl: './property-menu.component.html',
617
styleUrls: ['./property-menu.component.css']
718
})
819
export class PropertyMenuComponent implements OnInit {
20+
dataSources: MatTableDataSource<ifcProperty>[] = [];
21+
properties: ifcPropertyGroup[] = [
22+
{
23+
name: '01',
24+
props: [
25+
{ name: 'asdf', value: 'asdf' },
26+
{ name: 'asdf', value: 'asdf' },
27+
{ name: 'asdf', value: 'asdf' },
28+
{ name: 'asdf', value: 'asdf' }
29+
]
30+
},
31+
{
32+
name: '02',
33+
props: [
34+
{ name: 'asdf', value: 'asdf' },
35+
{ name: 'asdf', value: 'asdf' },
36+
{ name: 'asdf', value: 'asdf' },
37+
{ name: 'asdf', value: 'asdf' }
38+
]
39+
}
40+
];
941

10-
constructor() { }
42+
ifc: IfcService;
1143

12-
ngOnInit(): void {
44+
constructor(service: IfcService) {
45+
this.ifc = service;
46+
this.ifc.subscribeOnSelect(this.updateProperties);
47+
this.dataSources = this.properties.map((p) => {
48+
const source = new MatTableDataSource<ifcProperty>();
49+
source.data = p.props;
50+
return source;
51+
});
1352
}
1453

54+
ngOnInit(): void {}
55+
56+
updateProperties = (modelID: number, id: number) => {
57+
if (modelID == null || id == null) return;
58+
const props = this.ifc.ifcViewer?.getProperties(modelID, id, true);
59+
this.properties.length = 0;
60+
this.dataSources = [];
61+
const allGroups = this.getPropertyGroups(props);
62+
this.properties.push(...allGroups);
63+
this.dataSources = this.properties.map((p) => {
64+
const source = new MatTableDataSource<ifcProperty>();
65+
source.data = p.props;
66+
return source;
67+
});
68+
};
69+
70+
getPropertyGroups(props: any): ifcPropertyGroup[] {
71+
const psets = props.psets.map((p: any) => {
72+
return { name: 'Property set', props: this.getProps(p) };
73+
});
74+
delete props.psets;
75+
const type = props.type.map((p: any) => {
76+
return { name: 'Type properties', props: this.getProps(p) };
77+
});
78+
delete props.type;
79+
props = { name: 'Native properties', props: this.getProps(props) };
80+
return [props, ...psets, ...type];
81+
}
82+
83+
getProps(props: any) {
84+
for (let i in props) {
85+
props[i] = this.getProp(props[i]);
86+
}
87+
return Object.keys(props).map((p) => {
88+
return { name: p, value: props[p] };
89+
});
90+
}
91+
92+
getProp(prop: any) {
93+
if (prop == null || prop == undefined) return 'undefined';
94+
if (prop.value != undefined) return '' + prop.value;
95+
if (typeof prop == 'number') return '' + prop;
96+
return 'undefined';
97+
}
1598
}

0 commit comments

Comments
 (0)