Try different semantic material

config.js

@@ -115,10 +115,10 @@ export const config = {
                                 // TEMP
                                 content: {
                                     type: 'img',
-                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.jpg',
-                                    title: 'Disegno della pianta del teatro',
+                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.webp',
+                                    title: 'Disegno della pianta del teatro SS. Giovanni e Paolo',
                                     description: `
-                                    Tommaso Bezzi: Disegno della pianta del teatro di S. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
+                                    Tommaso Bezzi: Disegno della pianta del teatro di SS. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
                                     `
                                 }
                             },

js/controllers/menu_controller.js

@@ -249,36 +249,4 @@ export default class extends Controller {
             domainList.innerHTML += domainItem;
         }
     }
-    /**
-     * 
-     * @param {Event} event 
-     */
-    showSemanticModal(event) {
-        
-        console.debug('I have been triggered...');
-
-        const modal = document.querySelector('#semanticModal');
-        const title = modal.querySelector('.modal-title');
-        // Clear any existing content first
-        title.innerHTML = '';
-        title.innerHTML = event.content?.title;
-        const body = modal.querySelector('.modal-body');
-        body.innerHTML = '';
-        const contentType = event.content?.type;
-
-        const content = document.createElement(contentType);
-        if (contentType === 'img') {
-            content.src = event.content?.imgSrc;
-            content.classList.add('img-fluid');
-        }
-
-        const description = document.createElement('p');
-        description.textContent = event.content?.description;
-        description.classList.add('py-3', 'my-2', 'fst-italic');
-
-        body.appendChild(content);
-        body.appendChild(description);
-
-        bootstrap.Modal.getOrCreateInstance(modal).show();
-    }
 }

js/controllers/modal_controller.js

@@ -0,0 +1,39 @@
+
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ['modal'];
+
+    connect() {
+        console.log('#modal controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    showSemanticModal(event) {
+        const modal = this.modalTarget;
+        const title = modal.querySelector('.modal-title');
+        // Clear any existing content first
+        title.innerHTML = '';
+        title.innerHTML = event.content?.title;
+        const body = modal.querySelector('.modal-body');
+        body.innerHTML = '';
+        const contentType = event.content?.type;
+
+        const content = document.createElement(contentType);
+        if (contentType === 'img') {
+            content.src = event.content?.imgSrc;
+            content.classList.add('img-fluid');
+        }
+
+        const description = document.createElement('p');
+        description.textContent = event.content?.description;
+        description.classList.add('py-3', 'my-2', 'fst-italic');
+
+        body.appendChild(content);
+        body.appendChild(description);
+
+        bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+}

js/scene.js

@@ -132,7 +132,11 @@ function loadNodes(nodes) {
  */
 function createSemanticNode(model, id) {
     // Default/highlight materials for semantic node
-    let matSemDef = ATON.MatHub.materials.semanticShape;
+    let matSemDef = new THREE.MeshPhongMaterial({
+        color: '#ecee66',
+        transparent: true,
+        opacity: 0.3,
+    });
     let matSemHL  = ATON.MatHub.materials.semanticShapeHL;
 
     const semNode = ATON.createSemanticNode(id)

js/utils/aton.js

@@ -0,0 +1,38 @@
+// Global ATON
+
+import AppState from "../state.js";
+
+/**
+ * @module AtonUtils
+ */
+/**
+ * Initializes required ATON events for interactions
+ * with semantic nodes
+ */
+export function initAtonEvents() {
+    // General hover/leave events handling for all semantic nodes.
+    ATON.on("SemanticNodeHover", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.highlight();
+    });
+
+    ATON.on("SemanticNodeLeave", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.restoreDefaultMaterial();
+    });
+
+    // Triggers on mouse click / tap events
+    ATON.on("Tap", (e) => {
+        let node = ATON.getHoveredSemanticNode();
+        if (node) {
+            // Retrieve semantic node from AppState to trigger a modal with its content
+            const content = AppState.semanticNodes.get(node.nid);
+            
+            // Triggers a modal to show the content (listened by Stimulus)
+            const event = new Event('semantic-modal-show');
+            event.content = content;
+
+            document.dispatchEvent(event);
+        }
+    });
+}

js/utils/stimulus.js

@@ -3,6 +3,7 @@ import SettingController from '../controllers/settings_controller.js';
 import ToolbarController from '../controllers/toolbar_controller.js';
 import ClipperController from '../controllers/clipper_controller.js';
 import MenuController from '../controllers/menu_controller.js';
+import ModalController from '../controllers/modal_controller.js';
 
 /**
  * Initialize Stimulus controllers
@@ -13,4 +14,5 @@ export function initStimulus() {
     Stimulus.register("toolbar", ToolbarController);
     Stimulus.register("clipper", ClipperController);
     Stimulus.register("menu", MenuController);
+    Stimulus.register("modal", ModalController);
 }

scenes/salvador/index.js

@@ -10,6 +10,4 @@ AppState.currentScene = 'salvador';
 const marker = config.markers.find(m => m.id === 'salvador');
 AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
 
-console.debug(AppState.normalizedNodes);
-
 openScene(marker, AppState.normalizedNodes);

scenes/ssgp/index.html

@@ -58,7 +58,7 @@
 	<script type="module" src="./index.js"></script>
 </head>
 
-<body data-bs-theme="light" data-controller="menu" data-action="semantic-modal-show@document->menu#showSemanticModal">
+<body data-bs-theme="light" data-controller="menu modal" data-action="semantic-modal-show@document->modal#showSemanticModal">
     <div id="toolbar" class="aton-toolbar-top w-100"
         data-controller="toolbar clipper" data-clipper-enabled-value="false">
         <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
@@ -158,7 +158,7 @@
     </template>
 
     <!-- TODO Make it a template -->
-   <div class="modal" id="semanticModal" tabindex="-1">
+   <div class="modal" id="semanticModal" tabindex="-1" data-modal-target="modal">
         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
             <div class="modal-content">
                 <div class="modal-header">

scenes/ssgp/index.js

@@ -3,6 +3,7 @@ import { config } from "../../config.js";
 import AppState from "../../js/state.js";
 import { normalizeNodes } from "../../js/utils/nodeUtils.js";
 import { initStimulus } from "../../js/utils/stimulus.js";
+import { initAtonEvents } from "../../js/utils/aton.js";
 
 initStimulus();
 
@@ -16,33 +17,4 @@ AppState.treeNodes = tree;
 
 openScene(marker, AppState.normalizedNodes);
 
-// General hover/leave events handling for all semantic nodes.
-ATON.on("SemanticNodeHover", (semid) => {
-        let node = ATON.getSemanticNode(semid);
-        
-        console.debug('Sem node:', semid);
-
-        if (node) node.highlight();
-    });
-
-ATON.on("SemanticNodeLeave", (semid) => {
-    let node = ATON.getSemanticNode(semid);
-    if (node) node.restoreDefaultMaterial();
-});
-
-// Triggers on mouse click / tap events
-ATON.on("Tap", (e) => {
-    let node = ATON.getHoveredSemanticNode();
-    if (node) {
-        // Retrieve semantic node from AppState to trigger a modal with its content
-        const content = AppState.semanticNodes.get(node.nid);
-        
-        // Triggers a modal to show the content (listened by Stimulus)
-        const event = new Event('semantic-modal-show');
-        event.content = content;
-
-        console.log(event);
-
-        document.dispatchEvent(event);
-    }
-});
+initAtonEvents();