Rewrite scene switching logic (with bugs!!)

js/main.js

@@ -29,7 +29,6 @@ APP.UI.pauseAudio = function(triggerSelector) {
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
     Map.init('map');
-    Scene.toggleScene('back');
     APP.UI.pauseAudio('[data-bs-dismiss="modal"');
     //APP.UI.showClipper('#clipper');
 };

js/map.js

@@ -2,7 +2,7 @@
 
 import {config} from '../config.js';
 import Scene from './scene.js';
-import { AppState } from './state.js';
+import AppState from './state.js';
 
 const Map = {};
 

js/scene.js

@@ -1,6 +1,6 @@
 // Global ATON
 
-import { AppState, getSceneStatus, setSceneStatus, getCurrentScene, setCurrentScene } from "./state.js";
+import AppState from "./state.js";
 import { config } from "../config.js";
 
 const Scene = {};
@@ -81,16 +81,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                     });
                 } else {
                     AppState.clipping.enabled = false;
-                    ATON.disableClipPlanes();
+                    Scene.resetClipping();
-                    // Disable DragControls to avoid invoking events...
-                    if (AppState.clipping.controls) {
-                        AppState.clipping.controls.deactivate();
-                        AppState.clipping.controls.dispose();
-                        AppState.clipping.controls = null;
-                    }
-                    AppState.root.remove(AppState.clipping.helper);
-                    AppState.clipping.helper = null;
-                    AppState.clipping.plane = null;
                     let noBorder = trigger.className.replace(/ border.*$/g, '');
                     trigger.className = noBorder;
                     Scene.toggleAmbientOcclusion(aoCurrentState);
@@ -422,68 +413,75 @@ Scene.init = function() {
 
     AppState.camera = ATON.Nav._camera;
     AppState.renderer = ATON._renderer;
+
+    ATON.Nav.setUserControl(true);
 }
 /**
  * @param {String} btnId - The back-to-map button id
  */
-Scene.toggleScene = function(btnId) {
+Scene.closeScene = function() {
-    const btn = document.querySelector(`#${btnId}`);
     const scene = document.querySelector('#scene');
-
-    btn.addEventListener('click', () => {
-        const currentScene = getCurrentScene();
-        // Deactivate the current scene before toggling
-        setSceneStatus(currentScene.id, false);
     scene.classList.toggle('d-none');
-        // Pause rendering the 3D scene to free resources (hopefully)
-        // when browsing the map
-        ATON.renderPause();
-        if (AppState.clipping.enabled) {
-            ATON.disableClipPlanes();
-            AppState.clipping.enabled = false;
-            Scene.UI.reset();
-            AppState.root.remove(AppState.clipping.helper);
-            AppState.clipping.helper = null;
-        }
-        AppState.root.setRotation(AppState.initialRotation ?? new THREE.Vector3(0, 1.5, 0));
 
+    const canvas = ATON._renderer?.domElement;
+    Scene.resetClipping();
+    AppState.root.clear();
+    // Ensure GPU resources are freed...
+    ATON.renderPause();
+    AppState.renderer.dispose();
+    ATON._renderer.dispose();
+    ATON.Nav._camera = undefined;
+
+    Scene.UI.reset();
     document.querySelector('#map').classList.toggle('d-none');
     AppState.map.invalidateSize();
-    });
+    AppState.resetSceneState(AppState.map);
+    // Remove ATON's canvas from the DOM
+    if (canvas && canvas.parentElement) {
+        canvas.parentElement.removeChild(canvas);
+    }
+}
+
+Scene.resetClipping = function () {
+    AppState.clipping.controls?.dispose();
+    AppState.clipping.controls = null;
+    ATON.disableClipPlanes();
+    AppState.clipping.enabled = false;
+    AppState.root.remove(AppState.clipping.helper);
+    AppState.clipping.helper = null;
+    AppState.clipping.plane = null;
+    AppState.clipping.vector = null;
+    // Ensure nav controls are reactivated!
+    ATON.Nav.setUserControl(true);
 }
 /**
  * @param {Object} marker - The marker object from config
  */
 Scene.openScene = function(marker) {
-    let canvas = document.querySelector('canvas');
+    //let canvas = document.querySelector('canvas');
     let scene = document.querySelector('#scene');
 
-    if (canvas === null) {
     Scene.init();
-    }
+
+    // Button to go back to the map...
+    const btn = document.querySelector('#back');
+    btn.addEventListener('click', () => {
+        Scene.closeScene('back');
+    });
 
     Scene.UI.toggleClipper('#clipper', '#clipper-bar');
 
     scene.classList.toggle('d-none');
     ATON.renderResume();
-    // TODO: reset scene only if changing to a different model from the map
-    // set scene status to inactive, first get current scene id...
-    let currentScene = getCurrentScene();
-    if (currentScene && currentScene.id !== marker.id) {
-        AppState.root.removeChildren();
-        currentScene.current = false;
-    }
 
     if (!AppState.scenes.find(s => s.id === marker.id)) {
         const newScene = {id: marker.id, active: false, current: true};
         AppState.scenes.push(newScene);
     }
 
-    if (!getSceneStatus(marker.id)) {
+    // Load 3D model then
-        // Set scene as active
+    let mainNode = ATON.createSceneNode(marker.label);
-        setSceneStatus(marker.id, true);
+    mainNode.load(marker.model);
-        // Load 3D model
-        let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
     // TODO: only for the main ('larger') node in the scene
     AppState.mainNodeId = marker.label;
     ATON.setMainPanorama(marker.pano);
@@ -504,9 +502,7 @@ Scene.openScene = function(marker) {
     // ATON.Node.getBound() returns a THREE.Sphere object
     AppState.clipping.boundingSphere = mainNode.getBound();
 
-        // TODO: set the scene as current!!
+    console.log(ATON.Nav._camera);
-        setCurrentScene(marker.id);
-    }
 }
 
 export default Scene;

js/state.js

@@ -1,10 +1,13 @@
-export const AppState = {
+/**
+ * @namespace AppState
+ */
+let AppState = {
     // The root scene object
     root: null,
     mainNodeId: null,
     initialRotation: null,
-    camera: ATON.Nav._camera,
+    camera: null,
-    renderer: ATON._renderer,
+    renderer: null,
     scenes : [],
     ambientOcclusion : true,
     shadows : true,
@@ -16,7 +19,37 @@ export const AppState = {
         controls: null,
         onDrag: null,
         helper : null,
-        // Change to boundingSphere
+        boundingSphere: null,
+        listeners: {
+            button: false,
+            plane: false,
+        },
+        vector: null,
+    },
+    /**
+     * Reset the overall app state
+     * to default values but keep map
+     * 
+     * @param {L.Map} map - The Leaflet map object
+     */
+    resetSceneState(map) {
+        AppState = {
+            root: null,
+            mainNodeId: null,
+            initialRotation: null,
+            camera: null,
+            renderer: null,
+            scenes : [],
+            ambientOcclusion : true,
+            shadows : true,
+            lightProbe : false,
+            map,
+            clipping : {
+                enabled: false,
+                plane : null,
+                controls: null,
+                onDrag: null,
+                helper : null,
                 boundingSphere: null,
                 listeners: {
                     button: false,
@@ -24,40 +57,8 @@ export const AppState = {
                 },
                 vector: null,
             }
+        }
+    }
 }
 
-/**
+export default AppState;
- * @todo Buggyyyyy!!!!
- * @param {String} id 
- * @returns {Boolean}
- */
-export function getSceneStatus(id) {
-    return AppState.scenes.find(s => s.id === id).active;
-}
-
-/**
- * @todo Buggyyyyy!!!!
- * @param {String} id 
- * @param {Boolean} status 
- * @returns {Boolean}
- */
-export function setSceneStatus(id, status) {
-    AppState.scenes.find(s => s.id === id).active = status;
-}
-
-export function getCurrentScene() {
-    return AppState.scenes.find(s => s.current);
-}
-
-/**
- * 
- * @param {String} id The scene's id
- * @returns 
- */
-export function setCurrentScene(id) {
-    // First set the correct status for the other scenes
-    let otherScenes = AppState.scenes.filter(s => s.id !== id);
-    otherScenes.forEach(scene => scene.current = false)
-        
-    AppState.scenes.find(s => s.id === id).current = true;
-}