Tentative instance attachment

Keep only one active semantic node
NOTE: no action on sem node click
2026-07-14 10:37:19 +02:00 · 2026-07-14 07:54:34 +02:00 · 2026-07-08 13:01:48 +02:00 · 2026-07-08 09:57:24 +02:00 · 2026-07-07 16:45:34 +02:00 · 2026-06-23 22:47:17 +02:00
30 changed files with 7914 additions and 128 deletions
--- a/assets/img/Rilievo
+++ b/assets/img/Rilievo
--- a/assets/img/rilievo_ssgp_bezzi.webp
+++ b/assets/img/rilievo_ssgp_bezzi.webp
--- a/assets/pano/hemi-green.jpg
+++ b/assets/pano/hemi-green.jpg
--- a/config.js
+++ b/config.js
@@ -16,16 +16,13 @@ const theater2Popup = `
 export const config = {
    scene : {
-        initialExposure: 0.85,
+        initialExposure: 1.2,
        autoLP: false,
        shadows: false,
-        initLightDir: [0.2,-0.3,-0.7],
+        initLightDir: [-0.3,-0.7,0.1],
-        initRotation: [0, 1.5, 0],
+        initRotation: [0, 190, 0],
        ambientOcclusion: false,
    },
    menu : {
        //audioBtn1
    },
    markers : [
        {
            id : "salvador",
@@ -49,12 +46,6 @@ export const config = {
            nodes: {
                label: 'Teatro',
                children: [
                    /*
                    {
                        label: 'Struttura complessiva',
                        model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
                    },
                    */
                    {
                        label: 'Involucro',
                        model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
@@ -62,11 +53,11 @@ export const config = {
                        opacity: 0.2,
                    },
                    {
-                        label: 'Sala / Auditorium',
+                        label: 'Sala / cavea',
                        color: 'rgb(212, 96, 75)',
                        children: [
                            {
-                                label: 'Peplano / Platea',
+                                label: 'Peplano / platea',
                                model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
                            },
                            {
@@ -111,9 +102,19 @@ export const config = {
                            {
                                label: 'Palcoscenico',
                                model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
                                isSemantic: true,
                                // TEMP
                                content: {
                                    type: 'img',
                                    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 SS. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
                                    `
                                }
                            },
                            {
-                                label: 'Boccascena / Proscenio',
+                                label: 'Boccascena / proscenio',
                                model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
                            },
                            {
@@ -162,11 +163,11 @@ export const config = {
                    }
                ]
            },
-            pano: `pano/gradient.jpg`,
+            pano: `pano/hemi-green.jpg`,
        }
    ],
    map : {
-        center: [45.30833, 12.240278],
+        center: [45.42833, 12.340278],
        initialZoom : 12,
        minZoom : 6,
        maxZoom : 18
--- a/css/app.css
+++ b/css/app.css
@@ -57,6 +57,16 @@ input[type="checkbox"] {
    padding-left: 0;
    list-style-position: outside;
 }
 #instances li > a {
    color: #dee2e6;
 }
 #instances li > a:hover {
    color: var(--bs-nav-link-color);
    text-decoration: underline;
 }
 #instance-panel {
    z-index: 999;
 }
 /* Tooltips from https://codepen.io/pure-css/pen/bddggP */
 span:after {
   text-align: left;
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
    <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
 	<!-- Main js entry -->
-	<script type="module" src="js/main.js"></script>
+	<script type="module" src="src/main.js"></script>
 </head>
 <body data-bs-theme="light">
--- a/js/ontology.js
+++ b/js/ontology.js
@@ -1,43 +0,0 @@
 /**
 * @module Ontology
 */
 /**
 * @todo Temporarily returns domains and ontology labels only
 * Traverse an ontology from its JSON description
 * @param {String} jsonPath The path (URI) of the ontology JSON file
 * @returns {Object}
 */
 export async function traverseOntology(jsonPath) {
    const ontology = await loadOntology(jsonPath);
    const domains = [];
    for (const k of Object.keys(ontology)) {
        if (k === 'domains') {
            for (const domainKey of Object.keys(ontology[k])) {
                domains.push({
                    label: domainKey,
                    child: ontology[k][domainKey][0].label,
                });
            }
        }
    }
    return {
        ontology: ontology.ontology,
        domains
    };
 }
 /**
 * Load an ontology from its JSON description
 * @param {String} jsonPath The path (URI) of the ontology JSON file
 * @returns {Object}
 */
 export async function loadOntology(jsonPath) {
    const ontology = await fetch(jsonPath)
        .then(res => res.json())
        .catch(err => console.error(err));
    return ontology;
 }
--- a/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json
+++ b/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json
--- a/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json
+++ b/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json
--- a/scenes/salvador/index.js
+++ b/scenes/salvador/index.js
@@ -1,8 +1,8 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initStimulus } from "../../js/utils/stimulus.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
 initStimulus();
@@ -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);
--- a/scenes/ssgp/index.html
+++ b/scenes/ssgp/index.html
@@ -58,30 +58,36 @@
 	<script type="module" src="./index.js"></script>
 </head>
-<body data-bs-theme="light" data-controller="menu">
+<body data-bs-theme="light" data-controller="menu modal node" 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">
+        <div class="bg-dark-subtle position-absolute opacity-50 mt-1 ms-1 rounded">
-            <i class="bi bi-map-fill"></i>
+            <a class="btn aton-btn fs-5 p-1 text-white" href="/a/scaenae" id="back" title="Torna alla mappa">
-        </a>
+                <i class="bi bi-map-fill"></i>
-        <a class="btn aton-btn fs-5" title="Impostazioni" data-toolbar-target="settings"
+            </a>
-            data-action="toolbar#toggleSettings">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Impostazioni" data-toolbar-target="settings"
-            <i class="bi bi-gear-fill"></i>
+                data-action="toolbar#toggleSettings">
-        </a>
+                <i class="bi bi-gear-fill"></i>
-        <a class="btn aton-btn fs-5" title="Attiva / disattiva sezionamento"
+            </a>
-            data-clipper-target="trigger" data-action="clipper#toggleClipper">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva / disattiva sezionamento"
-            <i class="bi bi-scissors"></i>
+                data-clipper-target="trigger" data-action="clipper#toggleClipper">
-        </a>
+                <i class="bi bi-scissors"></i>
            </a>
            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
                data-action="toolbar#toggleFullscreen">
                <i class="bi bi-fullscreen"></i>
            </a>
        </div>
        <div class="d-none w-25
            position-absolute
            top-0 start-50
            translate-middle bg-light
-            px-4 pt-2 pb-2 bg-opacity-50
+            px-4 pt-2 pb-2 bg-opacity-75
            rounded-bottom-3
            mt-4 text-dark text-center"
        id="clipper-bar"
        data-clipper-target="clipper">
-            <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
+            <span class="pt-5 pb-2 d-block fw-bold">Sezione</span>
            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
                data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
@@ -89,7 +95,7 @@
            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
                data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
        </div>
-        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu"
+        <a class="btn aton-btn fs-5 float-end p-1 mt-1 text-white" id="menu" title="Menu"
            data-menu-target="trigger" data-action="menu#toggleMenu">
            <i class="bi bi-list"></i>
        </a>
@@ -135,30 +141,51 @@
        <!-- Nav tabs -->
        <ul class="nav nav-pills" id="content-tabs" role="tablist">
            <li class="nav-item" role="presentation">
-                <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
+                <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="true">
                    <i class="bi bi-boxes me-1"></i> Elementi 3D
                </button>
            </li>
            <li class="nav-item" role="presentation">
-                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
+                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="false">
-                    <i class="bi bi-diagram-3 me-1"></i> Contenuti
+                    <i class="bi bi-diagram-3 me-1"></i> Ontologia
                </button>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content ps-2 ms-2 overflow-y-auto">
            <div class="tab-pane active ps-3 pt-0 mt-4 ms-0" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
-            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0">
+            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
                <!-- Temporary -->
                <ul class="list-group me-4 ms-0">
                    <li class="list-group-item pt-2 pb-2" id="ontology-list"> </li>
                </ul>
            </div>
        </div>
    </template>
-    <!-- TODO CSS-only popover -->
+    <!-- TODO Make it a template -->
-    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+   <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">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div> 
    <!-- Instance panel (template it...)-->
    <div class="position-absolute top-0 start-0 w-25 h-100 container instance-panel d-none bg-dark" data-node-target="panel">
        <div class="container border-bottom border-secondary-subtle w-100">
            <h1 class="fs-4 py-2 text-center"></h1>
        </div>
        <div class="row h-100">
            <div class="border-end border-secondary-subtle h-100" id="properties-panel">
                <ul id="properties-list"></ul>
            </div>
            <div class="d-none" id="attachment-panel"></div>
        </div>
    </div>
    <div class="aton-poweredby" >
        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
--- a/scenes/ssgp/index.js
+++ b/scenes/ssgp/index.js
@@ -1,8 +1,9 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initStimulus } from "../../js/utils/stimulus.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
 import { initAtonEvents } from "../../src/utils/aton.js";
 initStimulus();
@@ -15,3 +16,5 @@ AppState.treeNodes = tree;
 // TODO: add Map object for lookup optimization
 openScene(marker, AppState.normalizedNodes);
 initAtonEvents();
--- a/src/controllers/clipper_controller.js
+++ b/src/controllers/clipper_controller.js
@@ -56,16 +56,16 @@ export default class extends Controller {
            btn.classList.remove('border', 'border-2', 'border-warning');
        });
        // AO should be turned off if clipping is enabled
        toggleAmbientOcclusion(!this.enabledValue);
        if (this.enabledValue) {
            // AO should be turned off if clipping is enabled
            toggleAmbientOcclusion(false);
            trigger.className += ' border border-2 border-white';
        }
        if (!this.enabledValue) {
            resetClipping();
            trigger.className = trigger.className.replace(/ border.*$/g, '');
            toggleAmbientOcclusion(AppState.ambientOcclusion);
        }
        AppState.clipping.enabled = this.enabledValue;
--- a/src/controllers/menu_controller.js
+++ b/src/controllers/menu_controller.js
@@ -1,18 +1,20 @@
 // Global ATON
 import { Controller } from "@hotwired/stimulus";
 import AppState from "../state.js";
-import { traverseOntology } from "../ontology.js";
+import { loadOntology, traverseOntology, Ontology } from "../ontology.js";
 const html = String.raw;
 const domParser = new DOMParser;
 // TODO: hard-coded, but follows a convention...
-const ontologyJsonPath = location.pathname + 'ontology.json';
+const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json';
 export default class extends Controller {
    static targets = ['trigger', 'layers', 'ontology'];
-    connect() {
+    async connect() {
        console.log('#menu controller connected');
        this.ontologyObject = await loadOntology(ontologyJsonPath);
        AppState.ontology = this.ontologyObject;
    }
    /**
     * Open settings panel
@@ -22,7 +24,7 @@ export default class extends Controller {
        ATON.UI.showSidePanel({header: 'Menu'});
        this.#buildMenuPanel(ATON.UI.elSidePanel);
        this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
-        this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
+        this.#buildOntologyMenu(await traverseOntology(this.ontologyObject), this.ontologyTarget);
    }
    /**
     * @param {Event} event 
@@ -193,6 +195,7 @@ export default class extends Controller {
            <i class="bi bi-chevron-down me-1"></i>${node.id}
        `;
        // Add color "swatch" only for first level groups
        /*
        if (node.depth === 2) {
            trigger.innerHTML += html`
                <div class="d-inline-block border rounded ms-2"
@@ -200,6 +203,7 @@ export default class extends Controller {
                </div>
            `;
        }
        */
        const collapseDiv = document.createElement('div');
        collapseDiv.className = 'collapse';
@@ -223,28 +227,90 @@ export default class extends Controller {
    /**
     * Temporary implementation to show domains only
     * @todo Don't rebuild it every time, use caching, return a container
-     * @param {Object} ontology The traversed ontology object (temp)
+     * @param {Array<{id: string, tree: Array<Object>}>} domains The traversed ontology domains
     * @param {HTMLElement} tab Tab content element
     */
-    #buildOntologyMenu(ontology, tab) {
+    #buildOntologyMenu(domains, tab) {
-        console.debug(ontology);
+        const ontology = new Ontology;
        ontology.data = this.ontologyObject; 
-        const mainNode = tab.querySelector('#ontology-list');
+        const tabs = this.#createOntologyTabs().tabs;
-        mainNode.textContent = ontology.ontology;
+        const content = this.#createOntologyTabs().content;
-        let domainList = html`
+        tab.appendChild(tabs);
-            <ul class="list-group mt-2" id="domains-list"></ul>
+        tab.appendChild(content);
        `;
-        // Very fragile and ugly!!
+        const classesTab = content.querySelector('#classes');
        mainNode.innerHTML += domainList;
        domainList = tab.querySelector('#domains-list');
-        for(let domain of ontology.domains) {
+        for (let domain of domains) {
-            const domainItem = html`
+            const heading = document.createElement('span');
-                <li class="list-group-item">${domain.label}</li>
+            heading.className ="fs-5 fw-bold";
            heading.textContent = domain.id;
            classesTab.appendChild(heading);
            let domainList = document.createElement('div');
            // Traverse class trees for each domain
            for (let item of domain.tree) {
                const domainItem = document.createElement('div');
                domainItem.className = 'border-start border-bottom rounded border-1 border-light-subtle';
                domainItem.textContent = item.label.it ?? item.label.en;
                // Indentation...
                domainItem.classList.add(`ms-${item.depth}`, `ps-${item.depth}`, 'py-2');
                if (item.depth === 1) domainItem.classList.add('fw-bold');
                domainList.appendChild(domainItem);
            }
            classesTab.appendChild(domainList);
        }
        const instancesTab = content.querySelector('#instances');
        const navList = instancesTab.querySelector('ul');
        const sortedItLabels = ontology.getInstanceLabels().map(l => l.it).sort();
        for (let label of sortedItLabels) {
            const instanceItem = document.createElement('li');
            instanceItem.className = 'nav-item border-bottom ps-3 py-2 c-hand';
            instanceItem.innerHTML = html`
                <a class="nav-link">${label}</a>
            `;
-            domainList.innerHTML += domainItem;
+            instanceItem.setAttribute('data-node-id-param', label);
            instanceItem.setAttribute('data-action', 'click->node#open');
            navList.appendChild(instanceItem);
        }
    }
    /**
     * @returns {{tabs: HTMLUListElement, content: HTMLDivElement}}
     */
    #createOntologyTabs() {
        const tabs = html`
            <ul class="nav nav-pills" role="tablist" id="ontoTabs">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="classes-tab" data-bs-toggle="tab" data-bs-target="#classes" type="button"
                        role="tab" aria-controls="classes-tab-pane" aria-selected="true">Classi</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="instances-tab" data-bs-toggle="tab" data-bs-target="#instances" type="button"
                        role="tab" aria-controls="instances-tab-pane" aria-selected="true">Istanze</button>
                </li>
            </ul>
        `;
        const content = html`
            <div class="tab-content" id="ontoTabsContent">
                <div class="tab-pane fade p-3 show active" id="classes" role="tabpanel" aria-labelledby="classes-tab" tabindex="0"></div>
                <div class="tab-pane fade" id="instances" role="tabpanel" aria-labelledby="instances-tab" tabindex="0">
                    <ul class="nav flex-column"></ul>
                </div>
            </div>
        `;
        return {
            tabs: domParser.parseFromString(tabs, 'text/html').querySelector('ul'),
            content: domParser.parseFromString(content, 'text/html').querySelector('div'), 
        };
    }
 }
--- a/src/controllers/modal_controller.js
+++ b/src/controllers/modal_controller.js
@@ -0,0 +1,41 @@
 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.alt = event.content?.description.trim();
            content.classList.add('img-fluid');
        }
        body.appendChild(content);
        const description = document.createElement('p');
        description.textContent = event.content?.description.trim();
        description.classList.add('py-3', 'my-0', 'fst-italic');
        body.appendChild(description);
        bootstrap.Modal.getOrCreateInstance(modal).show();
    }
 }
--- a/src/controllers/node_controller.js
+++ b/src/controllers/node_controller.js
@@ -0,0 +1,130 @@
 // Global ATON
 import { Controller } from "@hotwired/stimulus"
 import AppState from "../state.js";
 import { createSemanticNode } from "../scene.js";
 import { Ontology } from "../ontology.js";
 const html = String.raw;
 const assetsBase = "/a/scaenae/assets";
 /**
 * Handle events for the clipper toolbar,
 * related to the clipping module
 */
 export default class extends Controller {
    static targets = ['instance', 'node', 'panel'];
    static values = {
        id: String,
    };
    connect() {
        console.log('#node controller connected');
    }
    /**
     * Transition to ATON node (request POV)
     * if instance is architectural and
     * open the instance panel
     */
    open({ params: {id} }) {
        // First disable transparent envelope node, if active
        ATON.getSceneNode(AppState.mainNodeId).toggle(false);
        const node = ATON.getSceneNode(id);
        const normNode = AppState.normalizedNodes.find(n => n.id === id);
        if (node) ATON.Nav.requestPOVbyNode(node);
        if (normNode) this.addSemanticNode(normNode);
        const ontology = new Ontology;
        ontology.data = AppState.ontology;
        const instance = ontology.getInstanceByLabel(id, 'it');
        if (instance) this.openInstancePanel(instance);
    }
    /**
     * Attaches a semantic node to
     * an existing scene node using
     * its 3D model for the semantic shape
     * @param {import("../state.js").NormalizedSceneNode} normNode
     */
    addSemanticNode(normNode) {
        // First remove any existing sem node
        if (AppState.currentSemNodeId) {
            ATON.SemFactory.deleteSemanticNode(AppState.currentSemNodeId);
        }
        createSemanticNode(normNode.model, normNode.label);
        AppState.currentSemNodeId = normNode.label;
    }
    /**
     * Populates an instance panel based on the
     * instance data and opens it
     * @param {Object} instance 
     */
    openInstancePanel(instance) {
        const properties = instance.literalProperties;
        // Populate left side properties column
        /**
         * @type {HTMLDivElement}
         */
        const panel = this.panelTarget;
        const propPanel = panel.querySelector('#properties-panel');
        const attachmentPanel = panel.querySelector('#attachment-panel');
        const list = panel.querySelector('#properties-list');
        list.innerHTML = '';
        panel.querySelector('h1').textContent = instance.label.it;
        let attachment = '';
        // Reset attachment panel if previously activated...
        attachmentPanel.classList.add('d-none');
        attachmentPanel.classList.remove('col-7');
        propPanel.classList.remove('col-5');
        for (const prop of properties) {
            // Include only DC properties (OK?)
            const [schema, term] = prop.property.split(':');
            if (schema === 'dcterms' && Object.keys(prop.propertyLabel).length !== 0) {
                const item = document.createElement('li');
                item.className = 'py-2';
                item.innerHTML = html`
                    <span class="text-primary-emphasis d-inline-block">${prop.propertyLabel.it ?? prop.propertyLabel.en}</span>
                    <br />
                    ${prop.value.value}
                `;
                list.appendChild(item);
                // This will spawn bugs!!
                if (term === 'identifier'
                    && (prop.value.value.includes('.jpeg') || prop.value.value.includes('.pdf'))) {
                        attachment = prop.value.value;
                }
            }
            if (term === 'format') {
                propPanel.classList.add('col-5');
                attachmentPanel.classList.add('col-7');
                attachmentPanel.classList.remove('d-none');
                const attachmentType = prop.value.value;
                // Idiotic!!
                const folder = attachmentType.includes('image') ? assetsBase + '/img/' : assetsBase + '/pdf/';
                const attachmentItem = document.createElement('img');
                attachmentItem.className = 'img-fluid mt-3';
                attachmentItem.src = folder + attachment;
                attachmentPanel.appendChild(attachmentItem);
            }
        }
        panel.classList.remove('d-none');
    }
    closeInstancePanel() {
    }
 }
--- a/src/controllers/settings_controller.js
+++ b/src/controllers/settings_controller.js
--- a/src/controllers/tabs_controller.js
+++ b/src/controllers/tabs_controller.js
@@ -39,4 +39,3 @@ export default class extends Controller {
        });
    }
 }
--- a/src/controllers/toolbar_controller.js
+++ b/src/controllers/toolbar_controller.js
@@ -9,7 +9,7 @@ const panelHeader = html`
 `;
 export default class extends Controller {
-    static targets = ['settings'];
+    static targets = ['settings', 'fullscreen'];
    connect() {
        console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
        ATON.UI.showSidePanel({header: panelHeader});
        this.#buildSettingsPanel(ATON.UI.elSidePanel);
    }
    toggleFullscreen() {
        /**
         * @type {HTMLAnchorElement}
         */
        const target = this.fullscreenTarget;
        const icon = target.querySelector('i');
        if (!document.fullscreenElement) {
            document.body.requestFullscreen();
            icon.classList.remove('bi-fullscreen');
            icon.classList.add('bi-fullscreen-exit');
            target.title = 'Esci da schermo intero';
        } else {
            document.exitFullscreen();
            icon.classList.remove('bi-fullscreen-exit');
            icon.classList.add('bi-fullscreen');
            target.title = 'Attiva schermo intero';
        }
    }
    /**
     * Clone a <template> by id
     * @param {String} id
--- a/src/main.js
+++ b/src/main.js
--- a/src/map.js
+++ b/src/map.js
--- a/src/ontology.js
+++ b/src/ontology.js
@@ -0,0 +1,124 @@
 /**
 * @module Ontology
 */
 export class Ontology {
    #data;
    /**
     * @param {Object} data The parsed ontology object (from JSON)
     */
    set data(data) {
        this.#data = data;
    }
    /**
     * @param {String} id 
     */
    getInstanceById(id) {
        return this.#data.instancesById[id];
    }
    /**
     * @todo Revise loop approach... 
     * @param {String} label
     * @param {String} lang The language identifier, either 'en' or 'it'
     * @returns {Object} The instance object as per onto JSON... (document it!!)
     */
    getInstanceByLabel(label, lang) {
        if (!['en','it'].includes(lang)) {
            throw new Error(`Invalid language string provided: '${lang}'`);
        }
        let instance = {};
        for (const key of Object.keys(this.#data.instancesById)) {
            const currentInstance = this.#data.instancesById[key]; 
            const currentLabel = currentInstance.label[lang]; 
            if (currentLabel === label) {
                instance = currentInstance;
                break;
            }
        }
        return instance;
    }
    /**
     * @returns {Array<{en: string, it: string}>} The bloody array of label objects
     */
    getInstanceLabels() {
        const data = this.#data;
        const instances = [];
        for (const key of Object.keys(data.instancesById)) {
            instances.push(data.instancesById[key]?.label);
        }
        return instances;
    }
 }
 /**
 * @todo Temporarily returns domains and ontology labels only
 * Traverse an ontology from its JSON description
 * @param {Object} ontologyObject The parsed ontology JSON
 * @returns {Object}
 */
 export async function traverseOntology(ontologyObject) {
    //const ontology = await loadOntology(jsonPath);
    const modules = ontologyObject.domains;
    const domains = [];
    for (const module of modules) {
        let tree = [];
        for (const classTree of module.classTrees) {
            traverseClasses(classTree, tree);
        }
        domains.push({
            id: module.label.it ?? module.label.en,
            tree
        });
    }
    return domains;
 }
 /**
 * 
 * @param {Object} ontologyClass 
 * @param {Array<Object>} tree 
 * @param {Number} depth
 */
 function traverseClasses(ontologyClass, tree, depth = 1) {
    const ontologyNode = {
        id: ontologyClass.id,
        label: ontologyClass.label,
        depth,
        children: [],
    };
    tree.push(ontologyNode);
    if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
        for(const child of ontologyClass.children) {
            ontologyNode.children.push(
                traverseClasses(child, tree, depth + 1)
            );
        }
    }
 }
 /**
 * Load an ontology from its JSON description
 * @param {String} jsonPath The path (URI) of the ontology JSON file
 * @returns {Object}
 */
 export async function loadOntology(jsonPath) {
    const ontology = await fetch(jsonPath)
        .then(res => res.json())
        .catch(err => console.error(err));
    return ontology;
 }
--- a/src/scene.js
+++ b/src/scene.js
@@ -37,7 +37,6 @@ function init () {
    ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
    ATON.toggleShadows(config.scene.shadows);
    ATON.setExposure(config.scene.initialExposure);
    // Open settings side panel when clicking on settings btn
    AppState.camera = ATON.Nav._camera;
    AppState.renderer = ATON._renderer;
@@ -46,6 +45,8 @@ function init () {
    AppState.exposure = config.scene.initialExposure;
    ATON.Nav.setUserControl(true);
    // Avoid semantic occlusion
    ATON._bQuerySemOcclusion = false;
 }
 /**
 * @param {Object} marker - The marker object from config
@@ -79,10 +80,12 @@ function loadNodes(nodes) {
        node.load(n.model);
        node.setRotation(...config.scene.initRotation);
        /*
        node.setMaterial(new THREE.MeshPhongMaterial({
            transparent: false,
            color: n.color ?? '#fff',
        }));
        */
        // Apply any transparency before attaching to scene
        if (n.opacity !== undefined && n.opacity !== null) {
@@ -104,10 +107,44 @@ function loadNodes(nodes) {
            AppState.clipping.boundingSphere = node.getBound();
        }
-        AppState.nodes.push({id: n.label, active: n.isInvisible ? false: true});
+        AppState.nodes.push({
            id: n.label,
            active: n.isInvisible ? false: true,
            isSemantic: n.isSemantic
        });
    });
    if (!AppState.clipping.boundingSphere) {
        console.error("No bounding sphere computed, clipping will fail. Ensure one node has 'isMain: true'.");
    }
 }
 /**
 * Creates a semantic annotation from a model
 * @param {string} model The model's path to load
 * @param {string} id The original scene node ID (3D object)
 * @returns {ATON.SceneNode}
 */
 export function createSemanticNode(model, id) {
    // Default/highlight materials for semantic node
    let matSemDef = new THREE.MeshStandardMaterial({
        color: '#81eb81',
        transparent: true,
        opacity: 0.4,
    });
    let matSemHL  = new THREE.MeshStandardMaterial({
        color: '#e9757b',
        transparent: true,
        opacity: 0.5,
    });
    const semNode = ATON.createSemanticNode(id)
        .setCloneOnLoadHit(false)
        .load(model)
        .setDefaultAndHighlightMaterials(matSemDef, matSemHL)
        .attachToRoot();
    semNode.setRotation(...config.scene.initRotation);
    return semNode;
 }
--- a/src/state.js
+++ b/src/state.js
@@ -23,7 +23,17 @@ let AppState = {
     * @type {NormalizedSceneNode[]} normalizedNodes
     */
    normalizedNodes: [],
    /**
     * The loaded ontology object
     */
    ontology: {},
    treeNodes: {},
    // Redundant??
    semanticNodes: new Map,
    /**
     * @type {String|null}
     */
    currentSemNodeId: null,
    mainNodeId: null,
    currentScene: null,
    sceneHasAudio: false,
--- a/src/utils/aton.js
+++ b/src/utils/aton.js
@@ -0,0 +1,40 @@
 // 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);
        }
    });
    */
 }
--- a/src/utils/clipping.js
+++ b/src/utils/clipping.js
@@ -31,14 +31,12 @@ function createClippingPlaneMesh (boundingSphere) {
 * @param {String} axis 
 */
 function dragClipper (planeMesh, axis) {
-    const controls = new THREE.TransformControls(
+    const controls = new THREE.DragControls(
        [planeMesh],
        ATON.Nav._camera,
        ATON._renderer.domElement,
    ); 
    controls.attach(planeMesh);
    controls.setMode('translate');
    const startPosition = new THREE.Vector3();
    // Only move along the selected axis (exlude the others)
    const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
--- a/src/utils/environment.js
+++ b/src/utils/environment.js
--- a/src/utils/nodeUtils.js
+++ b/src/utils/nodeUtils.js
@@ -20,6 +20,7 @@
 * @property {Boolean} isMain
 * @property {Number|null} opacity
 * @property {Boolean} active
 * @property {String} content
 */
 /**
--- a/src/utils/stimulus.js
+++ b/src/utils/stimulus.js
@@ -3,6 +3,8 @@ 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';
 import NodeController from '../controllers/node_controller.js';
 /**
 * Initialize Stimulus controllers
@@ -13,4 +15,6 @@ export function initStimulus() {
    Stimulus.register("toolbar", ToolbarController);
    Stimulus.register("clipper", ClipperController);
    Stimulus.register("menu", MenuController);
    Stimulus.register("modal", ModalController);
    Stimulus.register("node", NodeController);
 }
--- a/types/aton.d.ts
+++ b/types/aton.d.ts
@@ -0,0 +1,59 @@
 declare global {
    const THREE: typeof import('three');
 }
 declare namespace ATON {
    function realize(): void;
    function setPathCollection(path: string): void;
    function setMainLightDirection(v: THREE.Vector3): void;
    function getMainLightDirection(): THREE.Vector3;
    function toggleShadows(enabled: boolean): void;
    function setExposure(value: number): void;
    function setMainPanorama(path: string): void;
    function setAutoLP(enabled: boolean): void;
    function enableClipPlanes(): void;
    function disableClipPlanes(): void;
    function addClipPlane(normal: THREE.Vector3, point: THREE.Vector3): THREE.Plane;
    function createSceneNode(id: string): SceneNode;
    function getSceneNode(id: string): SceneNode;
    function getRootScene(): THREE.Object3D;
    interface SceneNode {
        load(path: string): SceneNode;
        setRotation(x: number, y: number, z: number): SceneNode;
        setMaterial(material: THREE.Material): SceneNode;
        attachToRoot(): SceneNode;
        toggle(visible: boolean): SceneNode;
        getBound(): THREE.Sphere;
        add(object: THREE.Object3D): void;
        remove(object: THREE.Object3D): void;
    }
    namespace Nav {
        let _camera: THREE.Camera;
        function setUserControl(enabled: boolean): void;
        function requestPOVbyNode(n: ATON.SceneNode, duration: number): void;
    }
    namespace UI {
        let elSidePanel: HTMLElement;
        function init(): void;
        function addBasicEvents(): void;
        function setSidePanelLeft(): void;
        function setSidePanelRight(): void;
        function showSidePanel(options: { header: string }): void;
        function createSlider(options: {
            range: [number, number];
            label: string;
            value: number | string;
            oninput: (val: string) => void;
        }): HTMLElement;
    }
    namespace FX {
        const PASS_AO: number;
        function togglePass(pass: number, enabled: boolean): void;
    }
    let _renderer: THREE.WebGLRenderer;
 }
Author	SHA1	Message	Date
Nicolò P	faf9c3acea	Tentative instance attachment	2026-07-14 10:37:19 +02:00
Nicolò P.	5a72c91891	Keep only one active semantic node NOTE: no action on sem node click	2026-07-14 07:54:34 +02:00
Nicolò P	8fec26f69f	Idiotic instance panel...	2026-07-08 13:01:48 +02:00
Nicolò P.	56d3f0a20f	Add node controller	2026-07-08 09:57:24 +02:00
Nicolò P.	6a8acfeb0f	Classes and instances in ontology menu	2026-07-07 16:45:34 +02:00
Nicolò P.	60646cebf6	Keep all ontology domains in menu	2026-06-23 22:47:17 +02:00
Nicolò P.	28a34905c7	Minor adjustments	2026-06-10 09:24:42 +02:00
Nicolò P.	8aa3f7cde8	WIP ontology tree in menu	2026-06-10 09:18:03 +02:00
Nicolò P.	0c3a049d12	Rename js to src	2026-05-21 13:25:17 +02:00
Nicolò P.	3305e74776	Add fullscreen option	2026-05-21 13:19:11 +02:00
Nicolò P.	8ce7492f4e	Minor changes	2026-05-21 13:03:32 +02:00
Nicolò P.	03b9b9157b	Change pano again...	2026-05-21 12:28:23 +02:00
Nicolò P.	eb7efbf616	Style toolbar	2026-05-21 11:42:52 +02:00
Nicolò P.	b80504aec4	Reduce default lighting a bit	2026-05-21 11:23:40 +02:00
Nicolò P.	db2fc2d066	Change pano	2026-05-21 10:38:35 +02:00
Nicolò P.	491371e495	Change default env settings	2026-05-21 10:35:59 +02:00
Nicolò P.	fc4dd8af62	Try different semantic material	2026-05-21 09:47:32 +02:00
Nicolò P.	c837a6e55f	Add modal controller	2026-05-21 09:36:25 +02:00
Nicolò P.	4dccd58bf3	ATON utils + optimize image asset	2026-05-21 09:30:25 +02:00
Nicolò P.	9a0d769e0f	Sample semantic modal	2026-05-20 20:34:46 +02:00
Nicolò P	55f10e62d9	Listen for ATON Tap event	2026-05-20 18:32:07 +02:00
Nicolò P	b90d1614e9	Semantic node on 'palcoscenico'	2026-05-20 14:16:01 +02:00
Nicolò P	f5f105e786	Test semantic node	2026-05-20 11:45:51 +02:00
Nicolò P.	aa9a6f56b6	clipping: Fix wrong AO handling	2026-05-19 07:49:40 +02:00
Nicolò P.	106841f6ef	Disable colors + restore clipping	2026-05-19 07:40:45 +02:00