Skip to content

Commit 078d9e5

Browse files
agviegasagviegas
committed
Merge branch 'angular-example'
2 parents 7fd5ef6 + e898dd2 commit 078d9e5

28 files changed

+763
-521
lines changed

‎examples/simple-angular/config/package.json‎

Lines changed: 63 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,66 @@
11
{
2-
"name": "web-ifc",
3-
"version": "0.0.19",
4-
"description": "ifc loading on the web",
5-
"main": "web-ifc-api.js",
6-
"watch": {
7-
"build-viewer": {
8-
"patterns": [
9-
"./examples/viewer"
10-
],
11-
"extensions": "ts"
12-
},
13-
"build-web-ifc-api-mjs": {
14-
"patterns": [
15-
"./src"
16-
],
17-
"extensions": "ts"
18-
}
2+
"name": "web-ifc",
3+
"version": "0.0.20",
4+
"description": "ifc loading on the web",
5+
"main": "web-ifc-api.js",
6+
"watch": {
7+
"build-viewer": {
8+
"patterns": [
9+
"./examples/viewer"
10+
],
11+
"extensions": "ts"
1912
},
20-
"scripts": {
21-
"gen-schema": "cd src/schema && node gen.js",
22-
"setup-env": "emsdk_env",
23-
"init-repo": "git clone https://github.com/g-truc/glm ./src/wasm/deps/glm && git clone https://github.com/mapbox/earcut.hpp ./src/wasm/deps/earcut && git clone https://github.com/executionunit/csgjs-cpp ./src/wasm/deps/scgjs-cpp && npm run gen-schema",
24-
"build-release": "npm run build-wasm-release && npm run build-api && npm run add-wasm-path",
25-
"build-debug": "npm run build-wasm-debug && npm run build-api && npm run add-wasm-path",
26-
"release_publish": "npm run build-release && cd dist && npm publish",
27-
28-
"build-wasm-debug": "em++ --bind -O3 -g4 -std=c++17 --source-map-base http://localhost:5000/web-ifc-js/wasm-lib/ -flto -fno-exceptions ./src/wasm/web-ifc-api.cpp -s ALLOW_MEMORY_GROWTH=1 -s ASSERTIONS=1 -s FORCE_FILESYSTEM=1 -s EXPORT_NAME=WebIFCWasm -s MODULARIZE=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=[\"FS\"] -O3 -o dist/web-ifc.js",
29-
"build-wasm-release": "em++ --bind -O3 -std=c++17 -flto -fno-exceptions ./src/wasm/web-ifc-api.cpp -s ALLOW_MEMORY_GROWTH=1 -s FORCE_FILESYSTEM=1 -s EXPORT_NAME=WebIFCWasm -s MODULARIZE=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=[\"FS\"] -O3 -o dist/web-ifc.js",
30-
31-
"build-api": "cpy src/*.ts dist && npm run build-ts-api && npm run build-web-ifc-api-mjs && npm run build-web-ifc-api-node && npm run copy-to-dist",
32-
"build-ts-api": "tsc --emitDeclarationOnly && cpy dist/web-ifc-api.d.ts dist && cpy dist/web-ifc-api.d.ts dist --rename=web-ifc-api-node.d.ts",
33-
"build-web-ifc-api-mjs": "esbuild dist/web-ifc-api.ts --bundle --format=esm --external:path --external:fs --outfile=./dist/web-ifc-api.js",
34-
"build-web-ifc-api-node": "esbuild dist/web-ifc-api.ts --bundle --platform=node --outfile=./dist/web-ifc-api-node.js",
35-
"copy-to-dist": "cpy README.md dist && cpy package.json dist && cpy src/ifc2x4.ts dist",
36-
37-
"build-viewer": "npm run bundle-viewer && npm run copy-wasm-viewer",
38-
"bundle-viewer": "esbuild ./examples/viewer/web-ifc-viewer.ts --bundle --platform=node --outfile=./examples/viewer/web-ifc-viewer.js",
39-
"copy-wasm-viewer": "cpy dist/web-ifc.wasm examples/viewer",
40-
"add-wasm-path": "node src/utils/add-wasm-path.js",
41-
"serve-viewer": "serve examples/viewer",
42-
"dev": "concurrently --kill-others \"npm-watch\" \"npm run serve-viewer\""
43-
},
44-
"author": "tomvandig",
45-
"files": [
46-
"web-ifc.wasm",
47-
"web-ifc-api-node.js",
48-
"web-ifc-api-node.d.ts",
49-
"web-ifc-api.js",
50-
"web-ifc-api.d.ts",
51-
"ifc2x4.d.ts",
52-
"ifc2x4_helper.d.ts"
53-
],
54-
"devDependencies": {
55-
"@types/three": "^0.125.3",
56-
"three": "^0.126.0",
57-
"concurrently": "^6.0.0",
58-
"cpy-cli": "^3.1.1",
59-
"esbuild": "^0.8.49",
60-
"npm-watch": "^0.7.0",
61-
"serve": "^11.3.2",
62-
"typescript": "^4.1.5"
63-
},
64-
65-
"browser": {
66-
"crypto": false,
67-
"path": false,
68-
"fs": false
13+
"build-web-ifc-api-mjs": {
14+
"patterns": [
15+
"./src"
16+
],
17+
"extensions": "ts"
6918
}
70-
}
19+
},
20+
"pckg-gui": {},
21+
"scripts": {
22+
"gen-schema": "cd src/schema && node gen.js",
23+
"setup-env": "emsdk_env",
24+
"build-release": "npm run build-wasm-release && npm run build-api && npm run add-wasm-path",
25+
"build-debug": "npm run build-wasm-debug && npm run build-api && npm run add-wasm-path",
26+
"release_publish": "npm run build-release && cd dist && npm publish",
27+
"build-wasm-debug": "em++ --bind -O3 -g4 -std=c++17 --source-map-base http://localhost:5000/web-ifc-js/wasm-lib/ -flto -fno-exceptions ./src/wasm/web-ifc-api.cpp -s ALLOW_MEMORY_GROWTH=1 -s ASSERTIONS=1 -s FORCE_FILESYSTEM=1 -s EXPORT_NAME=WebIFCWasm -s MODULARIZE=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=[\"FS\"] -O3 -o dist/web-ifc.js",
28+
"build-wasm-release": "em++ --bind -O3 -std=c++17 -flto -fno-exceptions ./src/wasm/web-ifc-api.cpp -s ALLOW_MEMORY_GROWTH=1 -s FORCE_FILESYSTEM=1 -s EXPORT_NAME=WebIFCWasm -s MODULARIZE=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=[\"FS\"] -O3 -o dist/web-ifc.js",
29+
"build-api": "cpy src/*.ts dist && npm run build-ts-api && npm run build-web-ifc-api-mjs && npm run build-web-ifc-api-node && npm run copy-to-dist",
30+
"build-ts-api": "tsc --emitDeclarationOnly && cpy dist/web-ifc-api.d.ts dist && cpy dist/web-ifc-api.d.ts dist --rename=web-ifc-api-node.d.ts",
31+
"build-web-ifc-api-mjs": "esbuild dist/web-ifc-api.ts --bundle --format=esm --external:path --external:fs --outfile=./dist/web-ifc-api.js",
32+
"build-web-ifc-api-node": "esbuild dist/web-ifc-api.ts --bundle --platform=node --outfile=./dist/web-ifc-api-node.js",
33+
"copy-to-dist": "cpy README.md dist && cpy package.json dist && cpy src/ifc2x4.ts dist",
34+
"build-viewer": "npm run bundle-viewer && npm run copy-wasm-viewer",
35+
"bundle-viewer": "esbuild ./examples/viewer/web-ifc-viewer.ts --bundle --platform=node --outfile=./examples/viewer/web-ifc-viewer.js",
36+
"copy-wasm-viewer": "cpy dist/web-ifc.wasm examples/viewer",
37+
"add-wasm-path": "node src/utils/add-wasm-path.js",
38+
"serve-viewer": "serve examples/viewer",
39+
"dev": "concurrently --kill-others \"npm-watch\" \"npm run serve-viewer\""
40+
},
41+
"author": "tomvandig",
42+
"files": [
43+
"web-ifc.wasm",
44+
"web-ifc-api-node.js",
45+
"web-ifc-api-node.d.ts",
46+
"web-ifc-api.js",
47+
"web-ifc-api.d.ts",
48+
"ifc2x4.d.ts",
49+
"ifc2x4_helper.d.ts"
50+
],
51+
"devDependencies": {
52+
"@types/three": "^0.125.3",
53+
"three": "^0.126.0",
54+
"concurrently": "^6.0.0",
55+
"cpy-cli": "^3.1.1",
56+
"esbuild": "^0.8.49",
57+
"npm-watch": "^0.7.0",
58+
"serve": "^11.3.2",
59+
"typescript": "^4.1.5"
60+
},
61+
"browser": {
62+
"crypto": false,
63+
"path": false,
64+
"fs": false
65+
}
66+
}

‎examples/simple-angular/package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"build": "ng build",
88
"watch": "ng build --watch --configuration development",
99
"test": "ng test",
10-
"config-web-ifc": "cpy config/package.json ../../node_modules/web-ifc"
10+
"config-web-ifc": "cpy config/package.json ../../node_modules/web-ifc && cpy config/package.json ../node_modules/web-ifc-three/node_modules/web-ifc"
1111
},
1212
"private": true,
1313
"dependencies": {
@@ -23,7 +23,9 @@
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",
28+
"web-ifc": "^0.0.20",
2729
"web-ifc-viewer": "^1.0.11",
2830
"zone.js": "~0.11.4"
2931
},
@@ -40,5 +42,10 @@
4042
"karma-jasmine": "~4.0.0",
4143
"karma-jasmine-html-reporter": "^1.5.0",
4244
"typescript": "~4.2.3"
45+
},
46+
"browser": {
47+
"crypto": false,
48+
"path": false,
49+
"fs": false
4350
}
4451
}

‎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: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
1-
<mat-sidenav-container class="example-container">
2-
<mat-sidenav #sidenav opened="false" mode="side" opened>
3-
<app-toolbar
4-
(onOpenIfc)="loadIfc($event)"
5-
(onActivateClipping)="activateClipping()"
6-
></app-toolbar>
7-
</mat-sidenav>
8-
<mat-sidenav-content >
9-
<button mat-fab color="accent" (click)="sidenav.toggle()" class="navbar-button">
10-
<mat-icon>menu</mat-icon>
11-
</button>
12-
<app-spatial-tree #spatialTree [ifc]="ifcViewer"></app-spatial-tree>
13-
<app-context-menu
14-
(onAddClippingPlane)="addClippingPlane($event)"
15-
(onRemoveClippingPlane)="removeClippingPlane($event)"
16-
></app-context-menu>
17-
<div #threeContainer id="viewer-container"></div>
18-
</mat-sidenav-content>
19-
</mat-sidenav-container>
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>
5+
</mat-sidenav>
6+
<mat-sidenav-content>
7+
<app-toolbar (onOpenNavbar)="sidenav.toggle()"></app-toolbar>
8+
<app-context-menu></app-context-menu>
9+
<div #threeContainer id="viewer-container"></div>
10+
</mat-sidenav-content>
11+
</mat-sidenav-container>

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

Lines changed: 10 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,30 @@
1-
import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
1+
import { Component, AfterContentInit, ViewChild, ElementRef, HostListener } from '@angular/core';
22
import { MatSidenav } from '@angular/material/sidenav';
3-
import { IfcViewerAPI } from 'web-ifc-viewer';
3+
import { IfcService } from './services/ifc.service';
44
import { SpatialTreeComponent } from './spatial-tree/spatial-tree.component';
55

6-
76
@Component({
87
selector: 'app-root',
98
templateUrl: './app.component.html',
109
styleUrls: ['./app.component.css']
1110
})
12-
export class AppComponent implements OnInit {
11+
export class AppComponent implements AfterContentInit {
12+
1313
title = 'ifcjs-angular-example';
14-
ifcViewer?: IfcViewerAPI;
14+
ifc: IfcService;
1515

1616
@ViewChild('spatialTree', { static: true }) spatialTree?: SpatialTreeComponent;
1717
@ViewChild('sidenav', { static: true }) sidenav?: MatSidenav;
1818
@ViewChild('threeContainer', { static: true }) container?: ElementRef;
1919

20-
ngOnInit() {
21-
if (this.sidenav) this.sidenav.close();
22-
this.setupScene();
23-
this.setupInputs();
24-
}
25-
26-
setupScene() {
27-
const container = this.getContainer();
28-
if (!container) return this.notFoundError('container');
29-
this.ifcViewer = new IfcViewerAPI({ container });
30-
this.ifcViewer.addAxes();
31-
this.ifcViewer.addGrid();
32-
this.ifcViewer.addStats('position:absolute;bottom:0px;left:0px;z-index:1;');
33-
this.ifcViewer.setWasmPath('assets/');
20+
constructor(service: IfcService){
21+
this.ifc = service;
3422
}
3523

36-
setupInputs() {
24+
ngAfterContentInit() {
25+
if (this.sidenav) this.sidenav.close();
3726
const container = this.getContainer();
38-
if (!container) return this.notFoundError('container');
39-
container.onclick = this.handleClick;
40-
container.ondblclick = this.handleDoubleClick;
41-
container.onmousemove = this.handleMouseMove;
42-
}
43-
44-
activateClipping() {
45-
this.ifcViewer?.toggleClippingPlanes();
46-
}
47-
48-
addClippingPlane(event: Event) {
49-
this.ifcViewer?.addClippingPlane();
50-
}
51-
52-
removeClippingPlane(event: Event) {
53-
this.ifcViewer?.removeClippingPlane();
54-
}
55-
56-
loadIfc(file: File) {
57-
this.ifcViewer?.loadIfc(file);
58-
}
59-
60-
private handleClick = (event: Event) => {
61-
const id = this.ifcViewer?.getModelID();
62-
if (typeof id === 'number') this.spatialTree?.updateSpatialTree(id);
63-
};
64-
65-
private handleDoubleClick = (event: Event) => {};
66-
67-
private handleMouseMove = (_event: Event) => {
68-
this.ifcViewer?.preselectIfcItem();
69-
};
70-
71-
private notFoundError(item: string) {
72-
throw new Error(`ERROR: ${item} could not be found!`);
27+
if(container) this.ifc.startIfcViewer(container);
7328
}
7429

7530
private getContainer() {

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +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';
17+
import { MatDividerModule } from '@angular/material/divider';
18+
import { MatListModule } from '@angular/material/list';
19+
import { MatTableModule } from '@angular/material/table';
20+
import { PropertyMenuComponent } from './property-menu/property-menu.component';
21+
import { IfcService } from './services/ifc.service';
22+
import { SummaryPipe } from './pipes/summary';
23+
import {MatTooltipModule} from '@angular/material/tooltip';
2124

2225
@NgModule({
2326
declarations: [
@@ -26,6 +29,8 @@ import {MatTableModule} from '@angular/material/table';
2629
ContextMenuComponent,
2730
SpatialTreeComponent,
2831
ClickStopPropagationDirective,
32+
PropertyMenuComponent,
33+
SummaryPipe
2934
],
3035
imports: [
3136
BrowserModule,
@@ -40,9 +45,10 @@ import {MatTableModule} from '@angular/material/table';
4045
MatExpansionModule,
4146
MatDividerModule,
4247
MatListModule,
43-
MatTableModule
48+
MatTableModule,
49+
MatTooltipModule
4450
],
45-
providers: [],
51+
providers: [IfcService],
4652
bootstrap: [AppComponent]
4753
})
48-
export class AppModule { }
54+
export class AppModule {}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- <button mat-raised-button [matMenuTriggerFor]="menu">Menu</button> -->
22
<mat-menu #menu="matMenu" class="contextMenu">
3-
<button (click)="onAddClippingPlane($event)" mat-menu-item>Add clipping plane</button>
4-
<button (click)="onRemoveClippingPlane($event)" mat-menu-item>Remove clipping plane</button>
3+
<button (click)="onAddClippingPlane()" mat-menu-item>Add clipping plane</button>
4+
<button (click)="onRemoveClippingPlane()" mat-menu-item>Remove clipping plane</button>
55
</mat-menu>
66

77
<!-- an hidden div is created to set the position of appearance of the menu-->

0 commit comments

Comments
 (0)