Add node controller

config.js

@@ -53,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',
                             },
                             {
@@ -114,7 +114,7 @@ export const config = {
                                 }
                             },
                             {
-                                label: 'Boccascena / Proscenio',
+                                label: 'Boccascena / proscenio',
                                 model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
                             },
                             {

src/controllers/menu_controller.js

@@ -270,13 +270,14 @@ export default class extends Controller {
 
         for (let label of sortedItLabels) {
             const instanceItem = document.createElement('div');
-            instanceItem.className = 'border-bottom ps-3 py-2';
+            instanceItem.className = 'border-bottom ps-3 py-2 c-hand';
             instanceItem.textContent = label;
+            instanceItem.setAttribute('data-controller', 'node');
+            instanceItem.setAttribute('data-node-id-value', label);
+            instanceItem.setAttribute('data-action', 'click->node#transition');
 
             instancesTab.appendChild(instanceItem);
         }
-
-        console.debug(ontology.getInstanceById('ex:SSGJP_StructuralBackdrop'), ontology.getInstanceLabels());
     }
 
     /**

src/controllers/node_controller.js

@@ -0,0 +1,29 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+
+/**
+ * Handle events for the clipper toolbar,
+ * related to the clipping module
+ */
+export default class extends Controller {
+    static targets = ['instance', 'node'];
+    static values = {
+        id: String,
+    };
+
+    connect() {
+        console.log('#node controller connected');
+    }
+
+    /**
+     * Transition to this ATON node (request POV)
+     */
+    transition() {
+        const node = ATON.getSceneNode(this.idValue);
+
+        if (node) ATON.Nav.requestPOVbyNode(node);
+    }
+
+}
+

src/controllers/tabs_controller.js

@@ -39,4 +39,3 @@ export default class extends Controller {
         });
     }
 }
-

src/utils/stimulus.js

@@ -4,6 +4,7 @@ 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
@@ -15,4 +16,5 @@ export function initStimulus() {
     Stimulus.register("clipper", ClipperController);
     Stimulus.register("menu", MenuController);
     Stimulus.register("modal", ModalController);
+    Stimulus.register("node", NodeController);
 }

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;
+}