Don't setup highlighter if it already exists

bim.js

@@ -44,14 +44,16 @@ BIM.createScene = function (container) {
 }
 /**
  * @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/
@@ -75,11 +77,12 @@ 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);
 
     // Useful?
     this.fragments = fragments;
+    this.model = model;
 
     return model;
 }
@@ -92,22 +95,36 @@ BIM.setupHighligther = async function (model) {
     const indexer = this.components.get(OBC.IfcRelationsIndexer);
     await indexer.process(model);
 
-    const highlighter = this.components.get(OBF.Highlighter);
-    highlighter.setup({ world });
+    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 expressID = property[Object.keys(property)[0]].entries().next().value[0];
         let testProp = await model.getProperties(expressID); 
 
         // BAD just for testing
-        const li = document.querySelector('#selected-prop');
-        li.innerHTML = `
-            <ul>
-                <li><strong>${testProp['Name'].name}</strong>: ${testProp['Name'].value}</span>
-                <li><strong>Tipo</strong>: ${testProp['PredefinedType'].value}</li>
-            </ul>
-        `;
+        if (testProp !== null) {
+            li.innerHTML = `
+                <ul>
+                    <li><strong>${testProp['Name'].name}</strong>: ${testProp['Name'].value}</span>
+                    <li><strong>Tipo</strong>: ${testProp['PredefinedType']? testProp['PredefinedType'].value : 'Nessuno'}</li>
+                </ul>
+            `;
+        }
     });
+
+    highlighter.events.select.onClear.add(() => {
+        li.innerHTML = '';
+    });
+
+    this.highlighter = highlighter;
 }
 
 export default BIM;

ui.js

@@ -22,7 +22,7 @@ UI.ifcLoader = function (btnId = 'load-ifc') {
     let model = null;
     loadBtn.onchange = async function () {
         const files = this.files;
-        model = await 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);
     }