Move UI to Stimulus + progress bar

assets/bim.js

@@ -152,8 +152,8 @@ BIM.setupHighligther = async function (model) {
             li.innerHTML = `
                 <ul>
                     <li><strong>Name</strong>: ${testProp['Name'].value}</span>
-                    <li><strong>Type</strong>: ${testProp['ObjectType']?.value}</span>
-                    <li><strong>Tag</strong>: ${testProp['Tag'].value}</li>
+                    <li><strong>Type</strong>: ${testProp['ObjectType']?.value ?? 'N/A'}</span>
+                    <li><strong>Tag</strong>: ${testProp['Tag']?.value ?? 'N/A'}</li>
                 </ul>
             `;
         }

assets/controllers/modal_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ModalController extends Controller {
+    static targets = ['close', 'modal'];
+
+    current(id) {
+        return this.modalTargets.find(m => m.getAttribute('data-id') === id);
+    }
+
+    open() {
+        console.log('Modal: I am triggered...');
+        this.modalTarget.classList.add('is-active');
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+}

assets/controllers/scene_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import UI from '../ui.js';
+//import UI from '../ui.js';
 import BIM from '../bim.js';
 
 /*
@@ -11,19 +11,18 @@ import BIM from '../bim.js';
  *
  * Delete this file or adapt it for your use!
  */
-export default class extends Controller {
-    static targets = ['scene'];
+export default class SceneController extends Controller {
+    static targets = ['scene', 'load', 'building', 'modal'];
 
     connect() {
     }
 
     /**
-     * 
      * @param {Element} container 
      */
     sceneTargetConnected(container) {
-        UI.setScene(container);
-        const model = UI.ifcLoader(container);
+        this.setScene(container);
+        //this.model = this.loadIfc();
         container.ondblclick = () => BIM.activateClipper();
         container.onkeydown = event => {
             console.log(event);
@@ -32,7 +31,31 @@ export default class extends Controller {
             }
         }
     }
+    /**
+     * @param {Element} container 
+     */
+    setScene(container) {
+        BIM.createScene(container);
+    }
 
+    /**
+     * @param {Element} container 
+     * @param {String} btnId 
+     */
+    async loadIfc(event) {
+        this.openModal();
+        const nameInput = this.buildingTarget;
+        let model = null;
+        const files = event.target.files;
+        model = await BIM.loadIfc(new Uint8Array(await files[0].arrayBuffer()), files[0].name);
+        // Set a raycaster to select objects
+        BIM.setupHighligther(model);
+        localStorage.setItem('loaded-ifc', files[0].name);
+        nameInput.value = files[0].name.replace('.ifc', '');
+        this.closeModal();
+
+        return model;
+    }
     /**
      * 
      * @param {Event} event 
@@ -40,4 +63,16 @@ export default class extends Controller {
     keyboard(event) {
         console.log(event);
     }
+    /**
+     * @todo Should be handled by ModalController...
+     */
+    openModal() {
+        this.modalTarget.classList.add('is-active');
+    }
+    /**
+     * @todo Should be handled by ModalController...
+     */
+    closeModal() {
+        this.modalTarget.classList.remove('is-active');
+    }
 }