Crude property selection

bim.js

@@ -95,8 +95,18 @@ BIM.setupHighligther = async function (model) {
     const highlighter = this.components.get(OBF.Highlighter);
     highlighter.setup({ world });
 
-    highlighter.events.select.onHighlight.add((property) => {
+    highlighter.events.select.onHighlight.add(async (property) => {
-        console.log(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>
+        `;
     });
 }
 

css/bim.css

@@ -3,12 +3,12 @@
 
 #scene {
     min-height: 93vh;
-    margin-left: 15vw;
+    margin-left: 25vw;
     overflow: hidden;
 }
 #ui {
     position: absolute;
     top: 3.5rem;
-    max-width: 15vw;
+    max-width: 25vw;
     z-index: 5;
 }

index.html

@@ -50,6 +50,12 @@
 						</span>
 					</label>
 				</div>
+				<aside class="menu ml-4">
+					<p class="menu-label">Proprietà IFC (selezione)</p>
+					<ul class="menu-list">
+						<li id="selected-prop"></li>
+					</ul>
+				</aside>
 			</div>
 		</div>
 	</div>