Fix node status sync error (WIP)

TODO: Use Map object to optimize node lookup

config.js

@@ -16,11 +16,12 @@ const theater2Popup = `
 
 export const config = {
     scene : {
-        initialExposure: 0.7,
+        initialExposure: 0.85,
         autoLP: false,
         shadows: false,
         initLightDir: [0.2,-0.3,-0.7],
         initRotation: [0, 1.5, 0],
+        ambientOcclusion: false,
     },
     menu : {
         //audioBtn1
@@ -47,8 +48,6 @@ export const config = {
             coords: [45.4401, 12.3408],
             nodes: {
                 label: 'Teatro',
-                model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
-                opacity: 0.0,
                 children: [
                     /*
                     {
@@ -64,6 +63,7 @@ export const config = {
                     },
                     {
                         label: 'Sala / Auditorium',
+                        color: 'rgb(212, 96, 75)',
                         children: [
                             {
                                 label: 'Peplano / Platea',
@@ -106,6 +106,7 @@ export const config = {
                     },
                     {
                         label: 'Scena',
+                        color: 'rgb(75, 100, 212)',
                         children: [
                             {
                                 label: 'Palcoscenico',
@@ -127,6 +128,7 @@ export const config = {
                     },
                     {
                         label: 'Spazi tecnici',
+                        color: 'rgb(42, 139, 75)',
                         children: [
                             {
                                 label: 'Spazio tecnico superiore',
@@ -140,16 +142,17 @@ export const config = {
                                         label: 'Ballatoio',
                                         model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
                                     },
-                                    {
-                                        label: 'Spazio tecnico inferiore',
-                                        model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
-                                    },
-                                ]
+                                ],
+                            },
+                            {
+                                label: 'Spazio tecnico inferiore',
+                                model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
                             },
                         ]
                     },
                     {
                         label: 'Orchestra',
+                        color: 'rgb(195, 153, 235)',
                         children: [
                             {
                                 label: 'Fossa orchestra',

css/app.css

@@ -1,26 +1,188 @@
+:root {
+    --toggle-background-color-on: #6da0ff;
+    --toggle-background-color-off: darkgray;
+    --toggle-width: 32px;
+    --toggle-height: 15px;
+    --toggle-gutter: 2px;
+    --toggle-radius: 50%;
+    --toggle-control-size: 40px;
+    --toggle-control-color: white;
+    --toggle-control-speed: .15s;
+    --toggle-control-ease: ease-in;
+
+    /** Don't change calculated values! **/
+    --toggle-radius: calc(var(--toggle-height) / 2);
+    --toggle-control-size: calc(var(--toggle-height) - (var(--toggle-gutter) * 2));
+}
+
 body {
     height: 100vh;
 }
-.c-hand {
-    cursor: pointer;
-}
+
 input[type="checkbox"] {
     cursor: pointer;
 }
+
+.c-hand {
+    cursor: pointer;
+}
+
+.w-max-content {
+    width: max-content;
+}
+
 #clipper-bar .btn {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 80%;
 }
+
 #map {
     height: 100%;
 }
+
 #clipX {
     background-image: url('/a/scaenae/assets/icons/section_x.png');
 }
+
 #clipY {
     background-image: url('/a/scaenae/assets/icons/section_y.png');
 }
+
 #clipZ {
     background-image: url('/a/scaenae/assets/icons/section_z.png');
 }
+
+.tab-pane details > summary {
+    padding-left: 0;
+    list-style-position: outside;
+}
+/* Tooltips from https://codepen.io/pure-css/pen/bddggP */
+span:after {
+   text-align: left;
+   white-space: normal;
+}
+
+span:focus {
+   outline: none;
+}
+
+.app-tooltip {
+    cursor: help;
+    position: relative;
+}
+
+/*== common styles for both parts of app-tooltip tip ==*/
+.app-tooltip::before,
+.app-tooltip::after {
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    z-index: -100;
+}
+
+.app-tooltip:hover::before,
+.app-tooltip:focus::before,
+.app-tooltip:hover::after,
+.app-tooltip:focus::after {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+    z-index: 100; 
+}
+
+/*== pointer tip ==*/
+.app-tooltip::before {
+    border-style: solid;
+    border-width: 1em 0.75em 0 0.75em;
+    border-color: #3E474F transparent transparent transparent;
+    bottom: 100%;
+    content: "";
+    margin-left: -0.5em;
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
+    transform:  scale(.6) translateY(-90%);
+} 
+
+.app-tooltip:hover::before,
+.app-tooltip:focus::before {
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+}
+
+/*== speech bubble ==*/
+.app-tooltip::after {
+    background: #3E474F;
+    border-radius: .25em;
+    bottom: 180%;
+    color: #EDEFF0;
+    content: attr(data-tip);
+    margin-left: -4.75em;
+    padding: 1em;
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+    transform:  scale(.6) translateY(50%);  
+    width: 17.5em;
+}
+
+.app-tooltip:hover::after,
+.app-tooltip:focus::after  {
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
+}
+
+@media (max-width: 760px) {
+  .app-tooltip::after { 
+        font-size: .75em;
+        margin-left: -5em;
+        width: 10em; 
+  }
+}
+/**
+* Toggle switch styles
+* From: https://codepen.io/AriTheElk/pen/YmxYZr
+*/
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: var(--toggle-width);
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 18px;
+  user-select: none;
+  color: #fff;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: var(--toggle-background-color-on);
+    
+    &:after {
+      left: calc(var(--toggle-width) - var(--toggle-control-size) - var(--toggle-gutter));
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: 25%;
+    left: 0;
+    height: var(--toggle-height);
+    width: var(--toggle-width);
+    border-radius: var(--toggle-radius);
+    background-color: var(--toggle-background-color-off);
+    transition: background-color var(--toggle-control-speed) var(--toggle-control-ease);
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: var(--toggle-gutter);
+      top: var(--toggle-gutter);
+      width: var(--toggle-control-size);
+      height: var(--toggle-control-size);
+      border-radius: var(--toggle-radius);
+      background: var(--toggle-control-color);
+      transition: left var(--toggle-control-speed) var(--toggle-control-ease);
+    }
+  }
+}

js/controllers/menu_controller.js

@@ -1,5 +1,5 @@
 // Global ATON
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 import AppState from "../state.js";
 import { traverseOntology } from "../ontology.js";
 
@@ -16,27 +16,80 @@ export default class extends Controller {
     }
     /**
      * Open settings panel
-     * @param {Event} event 
      */
     async toggleMenu() {
         ATON.UI.setSidePanelRight();
         ATON.UI.showSidePanel({header: 'Menu'});
         this.#buildMenuPanel(ATON.UI.elSidePanel);
-        this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
+        this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
         this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
     }
     /**
      * @param {Event} event 
      */
     toggleNode(event) {
+
+        console.debug(AppState.treeNodes);
+
         /**
          * The node's id
          * @type {string}
          */
-        const id = event.params.node;
-        const status = event.target.checked;
-        ATON.getSceneNode(id).toggle(status);
-        AppState.normalizedNodes.find(n => n.id === id).active = status;
+        const id = event?.params.node;
+        const status = event?.target?.checked;
+        const node = AppState.normalizedNodes.find(n => n.id === id);
+        /**
+         * @type {HTMLElement|null}
+         */
+        const eye = event.target.parentElement.querySelector('i');
+
+        if (eye) {
+            eye.classList.toggle('bi-eye');
+            eye.classList.toggle('bi-eye-slash');
+        }
+
+        if (node.children.length > 0) {
+            this.#toggleGroup(node, status);
+            this.#syncGroupCheckboxes(node, status, this.layersTarget);
+        } else {
+            ATON.getSceneNode(id).toggle(status);
+            node.active = status;
+        }
+    }
+    /**
+     * Recursively toggle children in a nodes group
+     * @param {Object} groupNode
+     * @param {Boolean} status
+     */
+    #toggleGroup(groupNode, status) {
+        for (const child of groupNode.children) {
+            child.active = status;
+            if (child.model) {
+                ATON.getSceneNode(child.id).toggle(status);
+            }
+            if (child.children.length > 0) {
+                this.#toggleGroup(child, status);
+            }
+        }
+    }
+    /**
+     * Toggles checkboxes in a group based on status
+     * @param {Object} groupNode
+     * @param {Boolean} status
+     * @param {HTMLElement} container
+     */
+    #syncGroupCheckboxes(groupNode, status, container) {
+        for (const child of groupNode.children) {
+            const checkbox = container.querySelector(
+                `[data-menu-node-param="${child.id}"]`
+            );
+
+            if (checkbox) checkbox.checked = status;
+            
+            if (child.children.length > 0) {
+                this.#syncGroupCheckboxes(child, status, container);
+            }
+        }
     }
     /**
      * Clone a <template> by id
@@ -44,7 +97,7 @@ export default class extends Controller {
      * @returns {DocumentFragment}
      */
     #cloneTemplate(id) {
-        return document.getElementById(id).content.cloneNode(true);
+        return document.getElementById(id)?.content?.cloneNode(true);
     }
     /**
      * Create the left-side settings panel
@@ -58,27 +111,115 @@ export default class extends Controller {
     }
     /**
      * @todo Don't rebuild it every time, use caching, return a container with checkboxes
-     * @param {Array} nodes The normalized scene nodes (IDs and status)
+     * @param {Array<import("../state.js").NormalizedSceneNode>} tree The normalized scene nodes tree
      * @param {HTMLElement} tab Tab content element
      */
-    #buildLayersMenu(nodes, tab) {
-        for(let node of nodes) {
-            const menuItem = html`
-                <div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
-                    <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
-                        title="Mostra / nascondi layer"
-                        data-menu-node-param="${node.id}"
-                        data-action="change->menu#toggleNode">
-                    <label class="form-check-label">${node.id}</label>
-                </div>
-            `;
+    #buildLayersMenu(tree, tab) {
+        const heading = document.createElement('h1');
+        heading.classList.add('fs-5', 'fw-bold', 'ms-0');
+        heading.textContent = 'Teatro'; // Hard-coded!!
 
-            // Awful?
+        tab.appendChild(heading);
+
+        for (const node of tree) {
             tab.appendChild(
-                domParser.parseFromString(menuItem, 'text/html').querySelector('div')
+                node.children.length > 0
+                    ? this.#createLayerGroup(node)
+                    : this.#createLayerToggle(node)
             );
         }
     }
+    /**
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @param {boolean} isGroup
+     * @returns {HTMLDivElement}
+     */
+    #createLayerToggle(node, isGroup = false) {
+        // This should be calculated somehow!
+        const labelIndent = node.depth < 3 ? '1.5rem' : '1rem';
+        const labelText = isGroup ? '<i class="bi bi-eye"></i>' : node.id;
+        const toggle = html`
+            <label class="toggle-control ms-${node.depth} ps-${node.depth} mt-1 mb-1">
+                <input id="${node.id}" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
+                    data-menu-node-param="${node.id}"
+                    data-action="change->menu#toggleNode">
+                <span class="control"></span>
+                <span class="ps-2 fs-6" title="Mostra / nascondi ${isGroup ? 'gruppo' : 'layer'}" style="margin-left: ${labelIndent}">
+                    ${labelText}
+                </span>
+            </label>
+        `;
+
+        return domParser.parseFromString(toggle, 'text/html').querySelector('label');
+    }
+    /**
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @returns {HTMLDetailsElement}
+     */
+    #createLayerGroup(node) {
+        const { trigger, collapseDiv } = this.#createNodeCollapse(node);
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('w-max-content', 'ps-1', 'mb-1');
+            
+        collapseDiv.appendChild(this.#createLayerToggle(node, true));
+
+        for (const child of node.children) {
+            collapseDiv.appendChild(
+                child.children.length > 0
+                    ? this.#createLayerGroup(child)
+                    : this.#createLayerToggle(child)
+            );
+        }
+
+        wrapper.appendChild(trigger);
+        wrapper.appendChild(collapseDiv);
+        wrapper.classList.add('border-start', 'border-bottom', 'rounded', `ms-${node.depth}`);
+
+        return wrapper;
+    }
+    /**
+     * 
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @returns {{trigger: HTMLButtonElement, collapseDiv: HTMLDivElement}}
+     */
+    #createNodeCollapse(node) {
+        const cleanId = node.id.replace(/[\s\/\-]+/g, '');
+        const trigger = document.createElement('button');
+        trigger.className = 'btn btn-link p-0 fs-6 fw-bold text-decoration-none text-reset';
+        trigger.setAttribute('data-bs-toggle', 'collapse');
+        trigger.setAttribute('data-bs-target', `#group-${cleanId}`);
+        trigger.setAttribute('data-action', 'menu#toggleChevron');
+        trigger.innerHTML = html`
+            <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"
+                    style="background-color: ${node.color}; height: 15px; width:15px">
+                </div>
+            `;
+        }
+
+        const collapseDiv = document.createElement('div');
+        collapseDiv.className = 'collapse';
+        collapseDiv.id = `group-${cleanId}`;
+
+        return {trigger, collapseDiv};
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    toggleChevron(event) {
+        /**
+         * @type {HTMLButtonElement} collapse
+         */
+        const collapse = event.target;
+        const icon = collapse.querySelector('i');
+        icon.classList.toggle('bi-chevron-down');
+        icon.classList.toggle('bi-chevron-up');
+    }
     /**
      * Temporary implementation to show domains only
      * @todo Don't rebuild it every time, use caching, return a container

js/scene.js

@@ -64,8 +64,8 @@ export function openScene (marker, nodes) {
 
     ATON.setAutoLP(config.scene.autoLP);
     AppState.lightProbe = config.scene.autoLP;
-    toggleAmbientOcclusion(true);
-    AppState.ambientOcclusion = true;
+    toggleAmbientOcclusion(config.scene.ambientOcclusion);
+    AppState.ambientOcclusion = config.scene.ambientOcclusion;
     AppState.root = ATON.getRootScene();
 }
 
@@ -79,6 +79,11 @@ 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) {
             node.setMaterial(new THREE.MeshPhongMaterial({
@@ -88,6 +93,9 @@ function loadNodes(nodes) {
             }));
         }
 
+        // Disable a node for picking (shadows, light probe etc.)
+        if (n.isInvisible) node.hide();
+
         node.attachToRoot();
 
         if (n.isMain) {
@@ -96,7 +104,7 @@ function loadNodes(nodes) {
             AppState.clipping.boundingSphere = node.getBound();
         }
 
-        AppState.nodes.push({id: n.label, active: true});
+        AppState.nodes.push({id: n.label, active: n.isInvisible ? false: true});
     });
     
     if (!AppState.clipping.boundingSphere) {

js/state.js

@@ -23,6 +23,7 @@ let AppState = {
      * @type {NormalizedSceneNode[]} normalizedNodes
      */
     normalizedNodes: [],
+    treeNodes: {},
     mainNodeId: null,
     currentScene: null,
     sceneHasAudio: false,

js/utils/clipping.js

@@ -31,12 +31,14 @@ function createClippingPlaneMesh (boundingSphere) {
  * @param {String} axis 
  */
 function dragClipper (planeMesh, axis) {
-    const controls = new THREE.DragControls(
-        [planeMesh],
+    const controls = new THREE.TransformControls(
         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);

js/utils/environment.js

@@ -1,3 +1,5 @@
+/** @import { Vector3 } from 'three' */
+
 // Global ATON and THREE
 
 import AppState from "../state.js";
@@ -7,8 +9,7 @@ import AppState from "../state.js";
  */
 
 /**
- * 
- * @param {THREE.Vector3} vector - An object with x,y,z coordinates
+ * @param {Vector3} vector - An object with x,y,z coordinates
  */
 export function changeLightDirection(vector) {
     ATON.setMainLightDirection(vector);
@@ -26,14 +27,12 @@ export function toggleAmbientOcclusion(isEnabled) {
  * Slider to change light direction, based on ATON.UI
  * @param {String} direction - The axis direction, one of 'x','y','z'
  * @param {String} label - The slider label
- * @param {Array<Number>} range - The slider's range
+ * @param {[number, number]} range - The slider's range
  * @param {Number} step - The slider's step
  */
 export function createLightSlider(direction, label, range, step) {
     const currentVal = AppState.lightDirection[direction];
 
-    console.debug(currentVal);
-
     const lightSlider = ATON.UI.createSlider({
         range,
         label,
@@ -48,19 +47,20 @@ export function createLightSlider(direction, label, range, step) {
         },
     });
 
-    lightSlider.classList.add('ms-4');
-    lightSlider.querySelector('input').step = step;
+    lightSlider.classList.add('ms-1');
+    const input = lightSlider.querySelector('input');
+    if (input) input.step = step;
 
     return lightSlider;
 }
 /**
  * Slider to change the env exposure level, based on ATON.UI
  * @param {String} label - The slider label
- * @param {Array<Number>} range - The slider's range
+ * @param {[number, number]} range - The slider's range
  * @param {Number} step - The slider's step
  */
 export function createExposureSlider(label, range, step = 0.05) {
-    const currentVal = AppState.exposure;
+    const currentVal = String(AppState.exposure);
 
     const exposureSlider = ATON.UI.createSlider({
         range,
@@ -74,8 +74,9 @@ export function createExposureSlider(label, range, step = 0.05) {
         },
     });
 
-    exposureSlider.classList.add('ms-4');
-    exposureSlider.querySelector('input').step = step;
+    exposureSlider.classList.add('ms-1');
+    let input = exposureSlider.querySelector('input');
+    if (input) input.step = step;
 
     return exposureSlider;
 }

js/utils/nodeUtils.js

@@ -28,41 +28,49 @@
  * @param {Array} flatList 
  * @param {Number} depth
  */
-function traverse(node, flatList, depth = 1) {
+function traverseTree(node, flatList, depth = 1, inheritedColor = null) {
     if (!node.label) {
         console.error("Node missing label:", node);
         return;
     }
 
+    const color = node.color ?? inheritedColor;
+
     const normNode = {
         ...node,
         id: node.id ?? node.label,
         isMain: node.isMain ?? false,
         active: true,
+        color: color ?? null,
+        depth,
+        children: [],
     };
     if (node.model) {
        normNode.model = node.model; 
     }
-    flatList.push({
-        ...normNode,
-        depth
-    });
+
+    flatList.push(normNode);
+
     if (node.children && Array.isArray(node.children)) {
-        for(let child of node.children) {
-            traverse(child, flatList, depth + 1);
+        for(const child of node.children) {
+            normNode.children.push(
+                traverseTree(child, flatList, depth + 1, color)
+            );
         }
     }
+
+    return normNode;
 }
 
 /**
  * Create a flat list of nodes from
  * the nested structure in config
  * @param {Array} nodes
- * @returns {NormalizedSceneNode[]} A flat list of nodes
+ * @returns {{flat: NormalizedSceneNode[], tree: NormalizedSceneNode[]}} A flat list of nodes
 **/
 export function normalizeNodes (nodes) {
     let flatList = [];
-    traverse(nodes, flatList);
+    const normNode = traverseTree(nodes, flatList);
 
-    return flatList;
+    return {flat: flatList, tree: normNode.children};
 }

scenes/salvador/index.html

@@ -46,6 +46,13 @@
     <script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
     <script type="text/javascript" src="/dist/ATON.min.js"></script>
 
+    <script type="importmap">
+        {
+            "imports": {
+                "@hotwired/stimulus": "../../vendor/@hotwired/stimulus/dist/stimulus.js"
+            }
+        }
+    </script>
 	<!-- Main js entry -->
 	<script type="module" src="./index.js"></script>
 </head>

scenes/salvador/index.js

@@ -2,13 +2,14 @@ import { openScene } from "../../js/scene.js";
 import { config } from "../../config.js";
 import AppState from "../../js/state.js";
 import { normalizeNodes } from "../../js/utils/nodeUtils.js";
-import { initUI, pauseAudio } from "../../js/ui.js";
+import { initStimulus } from "../../js/utils/stimulus.js";
+
+initStimulus();
 
 AppState.currentScene = 'salvador';
-AppState.sceneHasAudio = true;
 const marker = config.markers.find(m => m.id === 'salvador');
-AppState.normalizedNodes = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
+
+console.debug(AppState.normalizedNodes);
 
 openScene(marker, AppState.normalizedNodes);
-initUI();
-pauseAudio('[data-bs-dismiss="modal"]');

scenes/ssgp/index.html

@@ -98,30 +98,36 @@
     <!-- Settings menu template (except dynamic light sliders) -->
     <template id="tmpl-settings">
         <div data-controller="settings">
-            <h2 class="fs-5 ms-2 mb-3 mt-3">
-                <i class="bi bi-lightbulb me-1"></i> Illuminazione
-            </h2>
-            <h3 class="fs-6 ms-4 mb-3 mt-3">
-                Direzione (x, y, z)
-            </h3>
-            <div data-sliders-container></div>
-            <h3 class="fs-6 ms-4 mb-3 mt-3">
-                Intensità
-            </h3>
-            <div data-slider-exposure-container></div>
-            <h2 class="fs-5 ms-2 mb-3 mt-3">
-                <i class="bi bi-brightness-high me-1"></i> Ambiente
-            </h2>
-            <div class="form-check form-switch ms-4 mt-2">
-                <input class="form-check-input" type="checkbox" role="switch"
-                    data-settings-target="ao" data-action="change->settings#toggleAO">
-                <label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
-            </div>
-            <div class="form-check form-switch ms-4 mt-2">
-                <input class="form-check-input" type="checkbox" role="switch"
-                    data-settings-target="shadows" data-action="change->settings#toggleShadows">
-                <label class="form-check-label" for="shadowsSwitch">Ombre</label>
-            </div>
+            <details class="w-max-content">
+                <summary class="fs-5 ms-3 mb-3 mt-3">
+                    <i class="bi bi-lightbulb me-1"></i> Illuminazione
+                </summary>
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
+                    Direzione (x, y, z)
+                </h3>
+                <div class="border border-1 rounded ms-4" data-sliders-container></div>
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
+                    Intensità <span class="d-inline app-tooltip" data-tip="Le modifiche di intensità hanno effetto solo se Ambient Occlusion non è attivo" tabindex="1"><i class="bi bi-info-circle ms-1"></i></span>
+                </h3>
+                <div class="ms-4 border border-1 rounded" data-slider-exposure-container></div>
+            </details>
+            <details>
+                <summary class="fs-5 ms-3 mb-3 mt-3">
+                    <i class="bi bi-brightness-high me-1"></i> Ambiente
+                </summary>
+                <div class="form-check form-switch ms-4 mt-4">
+                    <input class="form-check-input" type="checkbox" role="switch"
+                        data-settings-target="ao" data-action="change->settings#toggleAO">
+                    <label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
+                </div>
+                <div class="form-check form-switch ms-4 mt-2">
+                    <input class="form-check-input" type="checkbox" role="switch"
+                        data-settings-target="shadows" data-action="change->settings#toggleShadows">
+                    <label class="form-check-label" for="shadowsSwitch">
+                        Ombre <span class="d-inline app-tooltip" data-tip="Attivare le ombre può rallentare l'applicazione" tabindex="2"><i class="bi bi-info-circle ms-1"></i></span>
+                    </label>
+                </div>
+            </details>
         </div>
     </template>
 
@@ -140,8 +146,8 @@
             </li>
         </ul>
         <!-- Tab panes -->
-        <div class="tab-content ps-4 ms-3 overflow-y-auto">
-            <div class="tab-pane active p-3 ms-2" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
+        <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">
                 <!-- Temporary -->
                 <ul class="list-group me-4 ms-0">

scenes/ssgp/index.js

@@ -8,6 +8,10 @@ initStimulus();
 
 AppState.currentScene = 'ssgp';
 const marker = config.markers.find(m => m.id === 'ssgp');
-AppState.normalizedNodes = normalizeNodes(marker.nodes);
+const {flat, tree} = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = flat;
+AppState.treeNodes = tree;
+
+// TODO: add Map object for lookup optimization
 
 openScene(marker, AppState.normalizedNodes);