ATON utils + optimize image asset

config.js

@@ -115,10 +115,10 @@ export const config = {
                                 // TEMP
                                 content: {
                                     type: 'img',
-                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.jpg',
+                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.webp',
-                                    title: 'Disegno della pianta del teatro',
+                                    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/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);
+        }
+    });
+}

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.
+initAtonEvents();
-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);
-    }
-});