Add Stimulus + basic form

.gitignore

@@ -1,3 +1,4 @@
 *.sql
 *.log
 vendor/
+config.js

bim.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import * as OBC from 'openbim-components';
+import * as OBF from '@thatopen/components-front';
 import * as WEBIFC from 'web-ifc';
 
 /**
@@ -29,26 +30,41 @@ BIM.init = function (container) {
 }
 /**
  * @param {HTMLElement} container The scene container element
- * @returns {OBC.Components}
  */
 BIM.createScene = function (container) {
     this.init(container);
-    this.world.scene.setup();
     // Add a grid to the scene
     const grids = this.components.get(OBC.Grids);
     const grid = grids.create(this.world);
     // (zoom_level, position)
     this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0);
+
+    this.world.scene.setup();
+}
+/**
+ * @param {HTMLElement} container The scene container element
+ */
+BIM.activateClipper = function () {
+    const casters = this.components.get(OBC.Raycasters);
+    casters.get(this.world);
+    // Enable plane clipper
+    const clipper = this.components.get(OBC.Clipper);
+    clipper.enabled = true;
+    clipper.create(this.world);
+    clipper.visible = true;
 }
 /**
  * @todo Serve web-ifc.wasm locally via AJAX
- * @param {OBC.Components} components 
  * @param {ArrayBuffer} buffer The uploaded IFC file 
+ * @param {string} name The filename to be used as the model's name
+ * @returns {OBC.FragmentsGroup} model
  */
-BIM.loadIfc = async function (buffer) {
+BIM.loadIfc = async function (buffer, name) {
+    if (this.fragments) {
+        this.fragments.dispose();
+    }
+
     const fragments = this.components.get(OBC.FragmentsManager);
-    // Clean memory before uploading new file
-    fragments.dispose();
 
     const fragmentIfcLoader = this.components.get(OBC.IfcLoader);
     // NOTE: loads web-ifc WASM from https://unpkg.com/web-ifc@0.0.53/
@@ -72,13 +88,60 @@ BIM.loadIfc = async function (buffer) {
     fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
 
     const model = await fragmentIfcLoader.load(buffer);
-    model.name = "Test";
+    model.name = name;
     this.world.scene.three.add(model);
 
+    for (const fragment of model.items) {
+        this.world.meshes.add(fragment.mesh);
+    }
+
     // Useful?
     this.fragments = fragments;
+    this.model = model;
 
     return model;
 }
 
+/**
+ * @param {OBC.FragmentsGroup} model The loaded IFC model
+ */
+BIM.setupHighligther = async function (model) {
+    const world = this.world;
+    const indexer = this.components.get(OBC.IfcRelationsIndexer);
+    await indexer.process(model);
+
+    let highlighter = null;
+
+    if (!this.highlighter) {
+        highlighter = this.components.get(OBF.Highlighter);
+        highlighter.setup({ world });
+    } else {
+        highlighter = this.highlighter;
+    }
+
+    const li = document.querySelector('#selected-prop');
+    highlighter.events.select.onHighlight.add(async (property) => {
+        const set = property[Object.keys(property)[0]]
+        const expressID = Array.from(set.entries())[0][0];
+        
+        let testProp = await model.getProperties(Number.parseInt(expressID)); 
+
+        // BAD just for testing
+        if (testProp !== null) {
+            li.innerHTML = `
+                <ul>
+                    <li><strong>Name</strong>: ${testProp['Name'].value}</span>
+                    <li><strong>Tag</strong>: ${testProp['Tag'].value}</li>
+                </ul>
+            `;
+        }
+    });
+
+    highlighter.events.select.onClear.add(() => {
+        li.innerHTML = '';
+    });
+
+    this.highlighter = highlighter;
+}
+
 export default BIM;

controllers/form_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+import API_CONFIG from "../config.js";
+
+/**
+ * @todo Handle errors
+ */
+export default class extends Controller {
+    static targets = [
+        'building',
+        'showBuilding',
+        'buildingName',
+        'buildingForm'
+    ];
+
+    API_BASE = API_CONFIG.dev;
+
+    async submit(event) {
+        event.preventDefault();
+
+        if (event.currentTarget === this.buildingFormTarget) {
+            const options = this.prepare(
+                JSON.stringify({name: this.buildingTarget.value}),
+                'POST'
+            );
+
+            const res = await this.send(
+                `${this.API_BASE}/api/buildings`,
+                options
+            );
+
+            if (res.id) {
+                this.buildingTarget.setAttribute('data-id', res.id);
+                this.showBuildingTarget.classList.remove('is-hidden');
+                this.buildingNameTarget.textContent = res.name;
+            }
+        }
+    }
+
+    prepare(data, method) {
+        return {
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: data,
+            method,
+        }
+    }
+
+    /**
+     * @todo Return Exception on response error
+     * @param {string} endpoint 
+     * @param {object} options 
+     * @returns 
+     */
+    async send(endpoint, options) {
+        return await fetch(endpoint, options)
+            .then(res => res.json())
+            .catch(error => console.log(error));
+    }
+}

css/bim.css

@@ -2,13 +2,13 @@
 @import url('../vendor/bulma/css/bulma.min.css');
 
 #scene {
-    min-height: 100vh;
+    min-height: 93vh;
+    margin-left: 20vw;
     overflow: hidden;
 }
 #ui {
     position: absolute;
-    top: 2rem;
+    top: 3.5rem;
-    min-width: 100vw;
+    max-width: 20vw;
-    min-height: 100vh;
     z-index: 5;
 }

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="light">
 <head>
     <meta charset='utf-8'>
     <title>WebArchi</title>
@@ -8,10 +8,12 @@
     <script type="importmap">
         {
           "imports": {
+            "@hotwired/stimulus": "./vendor/@hotwired/stimulus/dist/stimulus.js",
             "three": "./vendor/three/build/three.module.js",
             "@thatopen/fragments": "./vendor/@thatopen/fragments/dist/index.mjs",
             "web-ifc": "./vendor/web-ifc/web-ifc-api.js",
             "openbim-components": "./vendor/@thatopen/components/dist/index.mjs",
+            "@thatopen/components-front": "./vendor/@thatopen/components-front/dist/index.js",
             "lit": "./vendor/@lit-labs/ssr-dom-shim/index.js"
           }
         }
@@ -19,26 +21,78 @@
     <script src='main.js' type="module"></script>
 </head>
 <body>
-    <div id="scene"></div>
+	<nav class="navbar has-background-light" role="navigation" aria-label="main navigation">
-    <div id="ui" data-theme="light">
+		<div class="navbar-brand">
-		<div class="file ml-4">
+			<a class="navbar-item" href="/">
-			<label class="file-label">
+				<span class="icon mr-2">
-				<input class="file-input"
+					<i class="fas fa-home"></i>
-					type="file"
-					name="load-ifc"
-				 	id="load-ifc"
-					accept=".ifc" />
-				<span class="file-cta">
-				<span class="file-icon">
-					<i class="fas fa-upload"></i>
 				</span>
-				<span class="file-label">Apri file IFC...</span>
+				WebArchi
-				</span>
+			</a>
-			</label>
+			<!-- navbar items, navbar burger... -->
 		</div>
-		<div class="container p-3" style="min-height: 200px;">
+	</nav>
-			<span class="is-large"></span>
+	<div class="columns">
+		<div class="column is-full">
+			<div id="scene"></div>
+			<div id="ui" data-theme="light" data-controller="form">
+				<aside class="menu ml-4 mt-3">
+					<p class="menu-label is-size-6">Progetto</p>
+					<div class="file mt-4 is-link">
+						<label class="file-label">
+							<input class="file-input"
+								type="file"
+								name="load-ifc"
+								id="load-ifc"
+								accept=".ifc" />
+							<span class="file-cta">
+							<span class="file-icon">
+								<i class="fas fa-upload"></i>
+							</span>
+							<span class="file-label">Apri file IFC...</span>
+							</span>
+						</label>
+					</div>
+					<form class="form" data-form-target="buildingForm" data-action="submit->form#submit" method="post">
+						<div class="field has-addons">
+							<div class="control">
+								<input class="input" type="text"
+								placeholder="Nome edificio" data-id="" data-form-target="building">
+							</div>
+							<div class="control">
+								<button class="button is-primary">
+									Salva
+									<span class="icon ml-1">
+										<i class="fa fa-save"></i>
+									</span>
+								</button>
+							</div>
+						</div>
+					</form>
+					<div class="is-hidden" data-form-target="showBuilding">
+						<p class="mt-4 p-3 is-size-6 has-background-light">
+							<strong>Edificio:</strong>
+							<span data-form-target="buildingName"></span>
+						</p>
+					</div>
+					<ul class="menu-list ml-4">
+						<li>
+						</li>
+					</ul>
+					<p class="menu-label is-size-6">Proprietà IFC (selezione)</p>
+					<ul class="menu-list">
+						<li id="selected-prop"></li>
+					</ul>
+				</aside>
+			</div>
 		</div>
-    </div>
+	</div>
+	<footer class="footer">
+		<div class="content has-text-centered">
+			<p>
+				<strong>WebArchi</strong> by <a href="https://ispc.cnr.it">ISPC punks</a>.
+			</p>
+		</div>
+	</footer>
 </body>
 </html>

main.js

@@ -1,8 +1,21 @@
 'use strict';
 
 import UI from './ui.js';
+import BIM from './bim.js';
+import { Application } from '@hotwired/stimulus';
+import FormController from './controllers/form_controller.js';
 
 document.addEventListener('DOMContentLoaded', () => {
-    UI.setScene(document.querySelector('#scene'));
+    // Register Stimulus controllers
-    UI.ifcLoader();
+    initStimulus();
+
+    const container = document.querySelector('#scene');
+    UI.setScene(container);
+    const model = UI.ifcLoader(container);
+    container.ondblclick = () => BIM.activateClipper();
 });
+
+function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register('form', FormController);
+}

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
     "@thatopen/components": "^2.0.1",
     "@thatopen/components-front": "^2.0.2",
     "@thatopen/fragments": "^2.0.0",

ui.js

@@ -14,14 +14,21 @@ UI.setScene = function (container) {
     BIM.createScene(container);
 }
 /**
+ * Returns the loaded model
+ * @param {HTMLElement} container The container element
  * @param {string} btnId The loading button's id
  */
-UI.ifcLoader = function (btnId = 'load-ifc') {
+UI.ifcLoader = function (container, btnId = 'load-ifc') {
     const loadBtn = document.querySelector(`#${btnId}`);
+    let model = null;
     loadBtn.onchange = async function () {
         const files = this.files;
-        BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()));
+        model = await BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()), files[0].name);
+        // Set a raycaster to select objects
+        BIM.setupHighligther(model);
     }
+
+    return model;
 };
 
 export default UI;

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@lit-labs/ssr-dom-shim@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz#353ce4a76c83fadec272ea5674ede767650762fd"