safe mode done!

Playground/src/globalState.ts

@@ -23,6 +23,7 @@ export class GlobalState {
     public zipCode = "";
 
     public onRunRequiredObservable = new Observable<void>();
+    public onSavedObservable = new Observable<void>();
     public onNewRequiredObservable = new Observable<void>();
     public onClearRequiredObservable = new Observable<void>();
     public onSaveRequiredObservable = new Observable<void>();

Playground/src/tools/monacoManager.ts

@@ -24,9 +24,11 @@ export class MonacoManager {
         sortText: string, 
         insertTextRules: number}[];
 
+    private _isDirty = false;
+
     public constructor(public globalState: GlobalState) {
         window.addEventListener('beforeunload', (evt) => {
-            if (Utilities.ReadBoolFromStore("safe-mode", false)) {
+            if (this._isDirty && Utilities.ReadBoolFromStore("safe-mode", false)) {
                 var message = 'Are you sure you want to leave. You have unsaved work.';
                 evt.preventDefault();
                 evt.returnValue = message;
@@ -36,6 +38,7 @@ export class MonacoManager {
         globalState.onNewRequiredObservable.add(() => {
             if (this._checkSafeMode("Are you sure you want to create a new playground?")) {
                 this._setNewContent();
+                this._isDirty = true;
             }
         });
 
@@ -43,9 +46,14 @@ export class MonacoManager {
             if (this._checkSafeMode("Are you sure you want to remove all your code?")) {
                 this._editor?.setValue("");
                 location.hash = "";
+                this._isDirty = true;
             }
         });
 
+        globalState.onSavedObservable.add(() => {
+            this._isDirty = false;
+        })
+
         globalState.onCodeLoaded.add(code => {
             if (!code) {
                 this._setDefaultContent();
@@ -153,7 +161,11 @@ export class MonacoManager {
         );     
         
         this._editor.onDidChangeModelContent(() => {
-            this.globalState.currentCode = this._editor.getValue();
+            let newCode = this._editor.getValue();
+            if (this.globalState.currentCode !== newCode) {
+                this.globalState.currentCode = newCode;
+                this._isDirty = true;
+            }
         });
         
         if (!this.globalState.loadingCodeInProgress) {
@@ -218,6 +230,7 @@ export class MonacoManager {
 
 };`
         );
+        this._isDirty = false;
             
         this.globalState.onRunRequiredObservable.notifyObservers();
     }

Playground/src/tools/saveManager.ts

@@ -9,7 +9,7 @@ export class SaveManager {
                     if (status) {
                         this._saveSnippet();
                     }
-                })
+                });
                 this.globalState.onDisplayMetadataObservable.notifyObservers(true);
                 return;
             }
@@ -50,6 +50,8 @@ export class SaveManager {
                         location.href = newUrl;     
                         this.globalState.onRunRequiredObservable.notifyObservers();               
                     }
+                    
+                this.globalState.onSavedObservable.notifyObservers();
                 } else {
                     this.globalState.onErrorObservable.notifyObservers("Unable to save your code. It may be too long.");
                 }

sandbox/__tobedeleted__/animation.js

@@ -1,133 +0,0 @@
-// Animations
-var animationBar = document.getElementById("animationBar");
-var dropdownBtn = document.getElementById("dropdownBtn");
-var chevronUp = document.getElementById("chevronUp");
-var chevronDown = document.getElementById("chevronDown");
-var dropdownLabel = document.getElementById("dropdownLabel");
-var dropdownContent = document.getElementById("dropdownContent");
-var playBtn = document.getElementById("playBtn");
-var slider = document.getElementById("slider");
-var clickInterceptor = document.getElementById("click-interceptor");
-
-clickInterceptor.addEventListener("mousedown", function() {
-    displayDropdownContent(false);
-    displayDropdownContentEnv(false);
-});
-
-// event on the dropdown
-function formatId(name) {
-    return "data-" + name.replace(/\s/g, '');
-}
-
-function displayDropdownContent(display) {
-    if (display) {
-        dropdownContent.style.display = "block";
-        chevronDown.style.display = "inline";
-        chevronUp.style.display = "none";
-        dropdownBtn.classList.add("open");
-        clickInterceptor.classList.remove("hidden");
-    }
-    else {
-        dropdownContent.style.display = "none";
-        chevronDown.style.display = "none";
-        chevronUp.style.display = "inline";
-        dropdownBtn.classList.remove("open");
-        clickInterceptor.classList.add("hidden");
-    }
-}
-dropdownBtn.addEventListener("click", function() {
-    if (dropdownContent.style.display === "block") {
-        displayDropdownContent(false);
-    }
-    else {
-        displayDropdownContent(true);
-    }
-});
-
-function selectCurrentGroup(group, index, animation) {
-    if (currentGroupIndex !== undefined) {
-        document.getElementById(formatId(currentGroup.name + "-" + currentGroupIndex)).classList.remove("active");
-    }
-    playBtn.classList.remove("play");
-    playBtn.classList.add("pause");
-
-    // start the new animation group
-    currentGroup = group;
-    currentGroupIndex = index;
-    animation.classList.add("active");
-    dropdownLabel.innerHTML = currentGroup.name;
-    dropdownLabel.title = currentGroup.name;
-
-    // set the slider
-    slider.setAttribute("min", currentGroup.from);
-    slider.setAttribute("max", currentGroup.to);
-    currentSliderValue = currentGroup.from;
-    slider.value = currentGroup.from;
-}
-
-function createDropdownLink(group, index) {
-    var animation = document.createElement("a");
-    animation.innerHTML = group.name;
-    animation.title = group.name;
-    animation.setAttribute("id", formatId(group.name + "-" + index));
-    animation.addEventListener("click", function() {
-        // stop the current animation group
-        currentGroup.reset();
-        currentGroup.stop();
-
-        group.play(true);
-
-        // hide the content of the dropdown
-        displayDropdownContent(false);
-    });
-    dropdownContent.appendChild(animation);
-
-    group.onAnimationGroupPlayObservable.add(function(grp) {
-        selectCurrentGroup(grp, index, animation);
-    });
-
-    group.onAnimationGroupPauseObservable.add(function(grp) {
-        playBtn.classList.add("play");
-        playBtn.classList.remove("pause");
-    });
-}
-
-// event on the play/pause button
-playBtn.addEventListener("click", function() {
-    // click on the button to run the animation
-    if (this.classList.contains("play")) {
-        currentGroup.play(true);
-    }
-    // click on the button to pause the animation
-    else {
-        currentGroup.pause();
-    }
-});
-
-// event on the slider
-slider.addEventListener("input", function() {
-    var value = parseFloat(this.value);
-
-    if (playBtn.classList.contains("play")) {
-        currentGroup.play(true);
-        currentGroup.goToFrame(value);
-        currentGroup.pause();
-    } else {
-        currentGroup.goToFrame(value);
-    }
-});
-
-var sliderPause = false;
-slider.addEventListener("mousedown", function() {
-    if (playBtn.classList.contains("pause")) {
-        sliderPause = true;
-        playBtn.click();
-    }
-});
-
-slider.addEventListener("mouseup", function() {
-    if (sliderPause) {
-        sliderPause = false;
-        playBtn.click();
-    }
-});

sandbox/__tobedeleted__/debug.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
-    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
-    <meta name="keywords"
-        content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
-
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"
-        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
-
-    <link href="index.css" rel="stylesheet" />
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <script src="https://playground.babylonjs.com/js/libs/split.js"></script>
-
-    <script src="https://preview.babylonjs.com/ammo.js"></script>
-    <script src="https://preview.babylonjs.com/cannon.js"></script>
-    <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/libktx.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.max.js"></script>
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-
-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>
-</head>
-
-<body>
-    <div id="root">
-        <p id="droptext">Drag and drop gltf, glb, obj or babylon files to view them</p>
-        <div id="canvasZone">
-            <canvas id="renderCanvas" touch-action="none"></canvas>
-        </div>
-        <div id="footer" class="footer">
-            <div id="animationBar">
-                <div class="row">
-                    <button id="playBtn" class="pause">
-                        <img id="playImg" src="Assets/Icon_Play.svg">
-                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
-                    </button>
-                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
-                </div>
-                <div class="dropdown">
-                    <div id="dropdownBtn" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown" class="chevronDown">
-                        <div id="dropdownLabel" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent" class="dropdownContent">
-                    </div>
-                </div>
-            </div>
-            <div class="footerRight">
-                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
-                        alt="Display inspector" title="Display inspector" /></a>
-                <a href="javascript:void(null);">
-                    <div class="custom-upload"
-                        title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
-                        <input type="file" id="files" multiple />
-                    </div>
-                </a>
-            </div>
-        </div>
-        <div id="logo">
-        </div>
-        <div id="errorZone"></div>
-    </div>    
-    <script src="environment.js"></script>
-    <script src="animation.js"></script>
-    <script src="index.js"></script>
-</body>
-
-</html>

sandbox/__tobedeleted__/environment.js

@@ -1,89 +0,0 @@
-
-// Environments
-var dropdownContentEnv = document.getElementById("dropdownContent-env");
-var btnEnvironment = document.getElementById("btnEnvironment");
-
-var skyboxes = [
-    "https://assets.babylonjs.com/environments/environmentSpecular.env",
-    "https://assets.babylonjs.com/environments/studio.env",
-];
-
-var skyboxesNames = [
-    "Default",
-    "Studio",
-];
-
-var readLocaStorageValue = function(key, defautlValue) {
-    if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
-        return parseInt(localStorage.getItem(key));
-    }
-
-    return defautlValue;
-}
-
-var defaultSkyboxIndex = readLocaStorageValue("defaultSkyboxId", 0);
-
-function loadSkyboxPathTexture(path, scene) {
-    if (path.indexOf(".hdr") === (path.length - 4)) {
-        return new BABYLON.HDRCubeTexture(path, scene, 256, false, true, false, true);
-    }
-    return BABYLON.CubeTexture.CreateFromPrefilteredData(path, scene);
-}
-
-function displayDropdownContentEnv(display) {
-    if (display) {
-        dropdownContentEnv.classList.remove("hidden");
-        btnEnvironment.classList.add("open");
-        clickInterceptor.classList.remove("hidden");
-    }
-    else {
-        dropdownContentEnv.classList.add("hidden");
-        btnEnvironment.classList.remove("open");
-        clickInterceptor.classList.add("hidden");
-    }
-}
-
-btnEnvironment.addEventListener('click', function() {
-    displayDropdownContentEnv(dropdownContentEnv.classList.contains("hidden"));
-}, false);
-
-addEnvironmentLoader = function(index) {
-    var env = document.createElement("div");
-    env.innerHTML = skyboxesNames[index];
-    env.title = skyboxesNames[index];
-    env.addEventListener("click", function() {
-        // hide the content of the dropdown
-        displayDropdownContentEnv(false);
-        if (typeof (Storage) !== "undefined") {
-            localStorage.setItem("defaultSkyboxId", index);
-        }
-        defaultSkyboxIndex = index;
-        skyboxPath = skyboxes[defaultSkyboxIndex];
-        if (filesInput) {
-            filesInput.reload();
-        }
-        else {
-            var currentScene = BABYLON.Engine.LastCreatedScene;
-            currentScene.environmentTexture = loadSkyboxPathTexture(skyboxPath, currentScene);
-            for (var i = 0; i < currentScene.materials.length; i++) {
-                var material = currentScene.materials[i];
-                if (material.name === "skyBox") {
-                    var reflectionTexture = material.reflectionTexture;
-                    if (reflectionTexture && reflectionTexture.coordinatesMode === BABYLON.Texture.SKYBOX_MODE) {
-                        material.reflectionTexture = currentScene.environmentTexture.clone();
-                        if (material.reflectionTexture) {
-                            material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-                        }
-                    }
-                }
-            }
-        }
-    });
-
-    return env;
-}
-
-for (var index = 0; index < skyboxes.length; index++) {
-    var env = addEnvironmentLoader(index);
-    dropdownContentEnv.appendChild(env);
-}

sandbox/__tobedeleted__/index-local.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <title>BabylonJS - Sandbox</title>
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
-    <link href="index.css" rel="stylesheet" />
-    <link href="index-media.css" rel="stylesheet" />
-    <script src="../dist/preview%20release/ammo.js"></script>
-    <script src="../dist/preview%20release/cannon.js"></script>
-    <script src="../dist/preview%20release/Oimo.js"></script>
-    <script src="../dist/preview%20release/libktx.js"></script>
-    <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-</head>
-
-<body>
-    <div id="root">
-        <p id="droptext">Drag and drop gltf, glb, obj or babylon files to view them</p>
-        <div id="canvasZone">
-            <canvas id="renderCanvas" touch-action="none"></canvas>
-        </div>
-        <div id="click-interceptor" class="hidden">
-        </div>
-        <div id="footer" class="footer">
-            <div class="footerLeft">
-                <img id="logoImg" src="Assets/BabylonIdentity.svg">
-            </div>
-            <div id="animationBar">
-                <div class="row">
-                    <button id="playBtn" class="pause">
-                        <img id="playImg" src="Assets/Icon_Play.svg">
-                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
-                    </button>
-                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
-                </div>
-                <div class="dropdown">
-                    <div id="dropdownBtn" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown" class="chevronDown">
-                        <div id="dropdownLabel" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent" class="dropdownContent">
-                    </div>
-                </div>
-            </div>
-            <div class="footerRight">
-                <a href="javascript:void(null);">
-                    <div class="custom-upload"
-                        title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
-                        <input type="file" id="files" multiple />
-                    </div>
-                </a>
-                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
-                        alt="Select environment" title="Select environment" />
-                </a>
-                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
-                        alt="Display inspector" title="Display inspector" /></a>
-                <div id="dropdownContent-env" class="hidden">
-                </div>
-            </div>
-        </div>
-        <div id="logoContainer">
-            <img id="logo" src='./Assets/Logo_Fullscreen.svg' />
-        </div>
-        <div id="errorZone"></div>
-    </div>
-    <script>
-        // prevent drag and drop of file until local scripts are loaded
-        document.ondragover = function(e) {
-            e.dataTransfer.dropEffect = "none";
-            e.dataTransfer.effectAllowed = "none";
-            e.preventDefault();
-        };
-
-        BABYLONDEVTOOLS.Loader
-            .require('environment.js')
-            .require('animation.js')
-            .require('index.js')
-            .load(function() {
-                BABYLON.DracoCompression.Configuration.decoder = {
-                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
-                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
-                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
-                };
-                BABYLON.GLTFValidation.Configuration = {
-                    url: "../dist/preview%20release/gltf_validator.js"
-                };
-            });
-    </script>
-</body>
-
-</html>

sandbox/__tobedeleted__/index-media.css

@@ -1,19 +0,0 @@
-
-@media (max-width: 768px) {
-    html {
-        --footer-height: 50px;
-        --font-size: 16px;
-    }
-
-    .footer {       
-        grid-template-columns: 0px 1fr 150px
-    }
-
-    .dropdown {        
-        width: 100px;
-    }
-
-    .dropdownBtn {
-        width: 100px;
-    }
-}

sandbox/__tobedeleted__/index.css

@@ -1,479 +0,0 @@
-html {
-    --background: #2A2342;
-    --footer-background: #201936;
-    --footer-height: 70px;
-    --button-hover-color: #BB464B;
-    --button-hover-hover: #e0684b;
-    --button-hover-background:  #162D3A;
-    --font-size: 20px;
-}
-
-html, body, #root {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    font-size: var(--font-size);
-    background: var(--background);
-    font-family: "acumin-pro-condensed";
-    font-weight: normal;
-}
-
-.hidden {
-    display: none !important;
-}
-
-#click-interceptor {
-    position: absolute;
-    width: 100%;
-    height: 100%;    
-    z-index: 99;
-    top:0;
-    left:0;
-}
-
-#canvasZone {
-    display: block;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    width: 100%;
-    height: calc(100% - var(--footer-height));   
-}
-
-#renderCanvas {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    touch-action: none;
-    -ms-touch-action: none;  
-    display: block;
-}
-
-a {
-    color: white;
-}
-
-a:visited {
-    color: white;
-}
-
-.footer {
-    position: relative;
-    width: 100%;
-    height: var(--footer-height);
-    margin: 0;
-    padding: 0;
-    background-color:var(--footer-background);
-    font-size: 0;
-    display: grid;
-    grid-template-rows: 100%;
-    grid-template-columns: 201px 1fr 210px
-}
-
-#logoImg {
-    height: var(--footer-height);
-    width: 161px;
-}
-
-.footerLeft {
-    display: grid;
-    grid-column: 1;
-    grid-row: 1;
-    padding-left: 40px;
-    align-content: center; 
-    overflow: hidden;
-}
-
-.footerRight {
-    display: flex;
-    flex-direction: row-reverse;
-    grid-column: 3;
-    grid-row: 1;
-}
-
-.footerRight a {
-    float: left; /* Float links side by side */
-    width: var(--footer-height);
-    height: var(--footer-height);
-    margin: 0px;
-    padding: 0;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.footerRight a img {
-    width: var(--footer-height);
-    height: var(--footer-height);
-}
-
-.footerRight a:hover {
-    background-color: var(--button-hover-color);
-}
-
-.footerRight a:active {
-    background-color: var(--button-hover-background);
-}
-
-.custom-upload {
-    position: relative;
-    background:url(./Assets/Icon_OpenFile.svg) center right no-repeat;
-    width: var(--footer-height);
-    height: var(--footer-height);
-}
-
-.custom-upload input[type=file]
-{
-    outline:none;
-    position: relative;
-    text-align: right;    
-    -moz-opacity:0 ;
-    opacity: 0;
-    z-index: 2;
-    width:100%;
-    height:100%;
-    filter:alpha(opacity=0);
-}
-
-#logoContainer {
-    position: absolute;
-    top:0;
-    left:0;
-    width: 100%;   
-    height: calc(100% - 70px);
-    pointer-events: none;
-}
-
-#logo {
-    position: absolute;
-    width: 20%;
-    height: 20%;
-    top: 40%;
-    left: 40%;
-    pointer-events: none;
-}
-
-#droptext {
-    position: absolute;
-    text-align: center;
-    color: #fff;
-    height: 50px;
-    width: 100%;
-    bottom: 50px;    
-}
-#btnDownArrow {
-    position: absolute;
-    bottom: 35px;
-    right: 30px;
-}
-
-#errorZone {
-    display:none;
-    position: absolute;
-    width: 50%;
-    left: 25%;
-    bottom: 80px;
-    background-color: #C73228;
-    padding:20px;
-    border-radius: 5px;
-    color:white;
-    font-family: 'Inconsolata';
-}
-#errorZone button {
-    position: absolute;
-    top: 3px;
-    right: 10px;
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    opacity: .4;
-    font-size: 1.8em;
-}
-
-/* animation bar */
-#animationBar {
-    margin-left: 10px;
-    display: none;
-    align-items: center;
-    color: white;
-    min-height: 30px;
-    height: var(--footer-height);
-    background-color: var(--footer-background);    
-    grid-column: 2;
-    grid-row: 1;
-    padding: 0px;
-    margin: 0px;
-}
-
-.row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-grow: 10;
-    align-items: center
-}
-
-#animationBar * {
-    padding: 0px;
-    margin: 0px;
-}
-
-#playBtn img {
-    width: var(--footer-height);
-    height: var(--footer-height);
-}
-
-.dropdown {
-    position: relative;
-    display: inline-block;
-    width: 200px;
-}
-
-#playBtn {
-    display: flex;
-    align-items: center;
-    height: var(--footer-height);
-    width: var(--footer-height);
-}
-
-.dropdownBtn {
-    display: flex;
-    height: var(--footer-height);
-    width: 200px;
-    font-size: var(--font-size);
-}
-
-#playBtn {
-    border: none;
-    background-color: inherit;
-}
-
-    #playBtn:hover {
-        background-color: var(--button-hover-color);   
-    }
-
-    #playBtn:active {
-        background-color: var(--button-hover-background);
-    }
-
-    #playBtn:focus {
-        outline: none !important;
-        border: none;
-    }
-
-#dropdownContent-env {
-    position: absolute;
-    bottom: var(--footer-height);
-    right: 0px;     
-    z-index: 100;
-}
-
-#dropdownContent-env div  {
-    background-color: var(--button-hover-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--font-size);
-    width: calc(2 * var(--footer-height));
-    color: white;
-    cursor: pointer;
-    height: 40px;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-}
-
-#dropdownContent-env div:hover {
-    background-color: var(--button-hover-hover); 
-    transition: all 0.3s ease;
-}
-#dropdownContent-env div:active {
-    background-color: var(--button-hover-background);
-    transition: all 0.3s ease;
-}
-
-#btnEnvironment.open {
-    background-color:var(--button-hover-color); 
-}
-
-.dropdownLabel {
-    align-self: center;
-    justify-self: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.dropdownContent a  {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 10px 15px 10px 46px;
-}
-
-.dropdownBtn:hover {
-    cursor: pointer;
-    background-color:var(--button-hover-color); 
-    transition: all 0.3s ease;
-}
-
-.dropdownBtn.open {
-    background-color:var(--button-hover-color); 
-}
-
-.dropdownContent a {
-    max-width: 1000px;
-    transition: color 0.5s;
-    height: 40px;
-    font-size: var(--font-size);
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-}
-.dropdownContent a:hover {
-    background-color: var(--button-hover-hover); 
-    transition: all 0.3s ease;
-}
-.dropdownContent a:active {
-    background-color: var(--button-hover-background);
-    transition: all 0.3s ease;
-}
-
-.dropdownContent {    
-    background-color: var(--button-hover-color);
-    display: none;
-    position: absolute;      
-    z-index: 100;
-    bottom: var(--footer-height);
-    min-width: 135px;
-    width: 200px;
-    max-height: 50vh;
-    overflow-y: auto;
-    flex-direction: column;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-}
-
-.dropdownContent a,
-#playBtn {
-    cursor: pointer;
-}
-
-.chevronUp {
-    margin-right: 0px;
-    margin-left: 0px;
-    height: var(--footer-height);
-    width: var(--footer-height);
-}
-.chevronDown {
-    display: none;
-    margin-right: 0px;
-    margin-left: 0px;
-    height: var(--footer-height);
-    width: var(--footer-height);
-}
-
-.dropdownLabel {
-    cursor: pointer;
-    width: 200px;
-    padding: 0px 15px 2px 5px;
-}
-
-
-#playBtn.play #pauseImg,
-#playBtn.pause #playImg{
-    display: none;
-}
-
-#slider {
-    -webkit-appearance: none;
-    cursor: pointer;
-    width: 100%;
-    max-width: 820px;
-    height: var(--footer-height);
-    outline: none;
-    margin-left: 20px;
-    margin-right: 10px;
-    background-color: transparent;
-}
-
-/*Chrome -webkit */
-#slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid white;
-    border-radius: 50%;
-    background: var(--footer-background);
-    margin-top: -10px;
-}
-#slider::-webkit-slider-runnable-track {
-    height: 2px;
-    -webkit-appearance: none;
-    background-color: white;
-}
-
-
-/** FireFox -moz */
-#slider::-moz-range-progress {
-  background-color: white;
-  height: 2px; 
-}
-#slider::-moz-range-thumb{
-    width: 20px;
-    height: 20px;
-    border: 2px solid white;
-    border-radius: 50%;
-    background: var(--footer-background);
-}
-#slider::-moz-range-track {
-    background: white;
-    height: 2px;
-}
-
-/** IE -ms */
-#slider::-ms-track {
-    height: 2px;
-    
-    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-    background: transparent;
-    
-    /*leave room for the larger thumb to overflow with a transparent border */
-    border-color: transparent;
-    border-width: 10px 0;
-
-    /*remove default tick marks*/
-    color: transparent;
-}
-#slider::-ms-fill-lower {
-    background: white;
-    border-radius: 5px;
-}
-#slider::-ms-fill-upper {
-    background: white;
-    border-radius: 5px;
-}
-#slider::-ms-thumb {
-    width: 16px;
-    height: 16px;
-    border: 2px solid white;
-    border-radius: 50%;
-    background: var(--footer-background);
-    margin-top: 0px;
-}

sandbox/__tobedeleted__/index.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
-    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
-    <meta name="keywords"
-        content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
-    <link href="index.css" rel="stylesheet" />
-    <link href="index-media.css" rel="stylesheet" />
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <script src="https://playground.babylonjs.com/js/libs/split.js"></script>
-
-    <script src="https://preview.babylonjs.com/ammo.js"></script>
-    <script src="https://preview.babylonjs.com/cannon.js"></script>
-    <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/libktx.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.js"></script>
-    
-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-</head>
-
-<body>
-    <div id="root">
-        <p id="droptext">Drag and drop gltf, glb, obj or babylon files to view them</p>
-        <div id="canvasZone">
-            <canvas id="renderCanvas" touch-action="none"></canvas>
-        </div>
-        <div id="click-interceptor" class="hidden">
-        </div>
-        <div id="footer" class="footer">
-            <div class="footerLeft">
-                <img id="logoImg" src="Assets/BabylonIdentity.svg">
-            </div>
-            <div id="animationBar">
-                <div class="row">
-                    <button id="playBtn" class="pause">
-                        <img id="playImg" src="Assets/Icon_Play.svg">
-                        <img id="pauseImg" src="Assets/Icon_Pause.svg">
-                    </button>
-                    <input id="slider" type="range" min="0" max="100" value="0" step="any">
-                </div>
-                <div class="dropdown">
-                    <div id="dropdownBtn" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown" class="chevronDown">
-                        <div id="dropdownLabel" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent" class="dropdownContent">
-                    </div>
-                </div>
-            </div>
-            <div class="footerRight">
-                <a href="javascript:void(null);">
-                    <div class="custom-upload"
-                        title="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)">
-                        <input type="file" id="files" multiple />
-                    </div>
-                </a>
-                <a href="javascript:void(null);" id="btnEnvironment" class="hidden"><img src="./Assets/IBLicon.svg"
-                        alt="Select environment" title="Select environment" />
-                </a>
-                <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
-                        alt="Display inspector" title="Display inspector" /></a>
-                <div id="dropdownContent-env" class="hidden">
-                </div>
-            </div>
-        </div>
-        <div id="logoContainer">
-            <img id="logo" src='./Assets/Logo_Fullscreen.svg' />
-        </div>
-        <div id="errorZone"></div>
-    </div>
-    <script src="environment.js"></script>
-    <script src="animation.js"></script>
-    <script src="index.js"></script>
-</body>
-
-</html>

sandbox/__tobedeleted__/index.js

@@ -1,377 +0,0 @@
-/// <reference path="../dist/preview release/babylon.d.ts" />
-
-var assetUrl;
-var cameraPosition;
-var kiosk;
-var currentGroup; // animation group
-var currentGroupIndex;
-var currentScene;
-
-// html tags
-var footer = document.getElementById("footer");
-var canvas = document.getElementById("renderCanvas");
-var canvasZone = document.getElementById("canvasZone");
-
-// Check URL
-var indexOf = location.href.indexOf("?");
-if (indexOf !== -1) {
-    var params = location.href.substr(indexOf + 1).split("&");
-    for (var index = 0; index < params.length; index++) {
-        var param = params[index].split("=");
-        var name = param[0];
-        var value = param[1];
-        switch (name) {
-            case "assetUrl": {
-                assetUrl = value;
-                break;
-            }
-            case "cameraPosition": {
-                cameraPosition = BABYLON.Vector3.FromArray(value.split(",").map(function(component) { return +component; }));
-                break;
-            }
-            case "kiosk": {
-                kiosk = value === "true" ? true : false;
-                break;
-            }
-        }
-    }
-}
-
-if (kiosk) {
-    footer.style.display = "none";
-    canvasZone.style.height = "100%";
-}
-
-if (BABYLON.Engine.isSupported()) {
-    var engine = new BABYLON.Engine(canvas, true, { premultipliedAlpha: false, preserveDrawingBuffer: true });
-    var htmlInput = document.getElementById("files");
-    var btnInspector = document.getElementById("btnInspector");
-    var errorZone = document.getElementById("errorZone");
-    var filesInput;
-    var currentScene;
-    var currentSkybox;
-    var currentPluginName;
-    var skyboxPath = skyboxes[defaultSkyboxIndex];
-    var debugLayerEnabled = false;
-
-    engine.loadingUIBackgroundColor = "#2A2342";
-
-    btnInspector.classList.add("hidden");
-    btnEnvironment.classList.add("hidden");
-
-    canvas.addEventListener("contextmenu", function(evt) {
-        evt.preventDefault();
-    }, false);
-
-    BABYLON.Engine.ShadersRepository = "/src/Shaders/";
-
-    // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
-    BABYLON.Animation.AllowMatricesInterpolation = true;
-
-    // Setting up some GLTF values
-    BABYLON.GLTFFileLoader.IncrementalLoading = false;
-    BABYLON.SceneLoader.OnPluginActivatedObservable.add(function(plugin) {
-        currentPluginName = plugin.name;
-        if (currentPluginName === "gltf") {
-            plugin.onValidatedObservable.add(function(results) {
-                if (results.issues.numErrors > 0) {
-                    debugLayerEnabled = true;
-                }
-            });
-        }
-    });
-
-    // Resize
-    window.addEventListener("resize", function() {
-        engine.resize();
-    });
-
-    var anyLoaded = function(babylonScene, playFirstAnimationGroup) {
-        // Clear dropdown that contains animation names
-        dropdownContent.innerHTML = "";
-        animationBar.style.display = "none";
-        currentGroup = null;
-        babylonScene.skipFrustumClipping = true;
-
-        if (babylonScene.animationGroups.length > 0) {
-            animationBar.style.display = "flex";
-            for (var index = 0; index < babylonScene.animationGroups.length; index++) {
-                var group = babylonScene.animationGroups[index];
-                createDropdownLink(group, index);
-            }
-            currentGroupIndex = playFirstAnimationGroup ? 0 : babylonScene.animationGroups.length - 1;
-            currentGroup = babylonScene.animationGroups[currentGroupIndex];
-            currentGroup.play(true);
-        }
-
-        // Sync the slider with the current frame
-        babylonScene.registerBeforeRender(function() {
-            if (currentGroup) {
-                var targetedAnimations = currentGroup.targetedAnimations;
-                if (targetedAnimations.length > 0) {
-                    var runtimeAnimations = currentGroup.targetedAnimations[0].animation.runtimeAnimations;
-                    if (runtimeAnimations.length > 0) {
-                        slider.value = runtimeAnimations[0].currentFrame;
-                    }
-                }
-            }
-        });
-
-        // Clear the error
-        errorZone.style.display = 'none';
-    }
-
-    var assetContainerLoaded = function (sceneFile, babylonScene) {
-        anyLoaded(babylonScene);
-    }
-
-    var sceneLoaded = function (sceneFile, babylonScene) {
-        engine.clearInternalTexturesCache();
-
-        anyLoaded(babylonScene, true);
-
-        // Fix for IE, otherwise it will change the default filter for files selection after first use
-        htmlInput.value = "";
-
-        currentScene = babylonScene;
-
-        babylonScene.onAnimationFileImportedObservable.add(function (scene) {
-            anyLoaded(scene, false);
-        });
-
-        document.title = "Babylon.js - " + sceneFile.name;
-
-        btnInspector.classList.remove("hidden");
-        btnEnvironment.classList.remove("hidden");
-
-        // Attach camera to canvas inputs
-        if (!currentScene.activeCamera || currentScene.lights.length === 0) {
-            currentScene.createDefaultCamera(true);
-
-            if (cameraPosition) {
-                currentScene.activeCamera.setPosition(cameraPosition);
-            }
-            else {
-                if (currentPluginName === "gltf") {
-                    // glTF assets use a +Z forward convention while the default camera faces +Z. Rotate the camera to look at the front of the asset.
-                    currentScene.activeCamera.alpha += Math.PI;
-                }
-
-                // Enable camera's behaviors
-                currentScene.activeCamera.useFramingBehavior = true;
-
-                var framingBehavior = currentScene.activeCamera.getBehaviorByName("Framing");
-                framingBehavior.framingTime = 0;
-                framingBehavior.elevationReturnTime = -1;
-
-                if (currentScene.meshes.length) {
-                    currentScene.activeCamera.lowerRadiusLimit = null;
-
-                    var worldExtends = currentScene.getWorldExtends(function (mesh) {
-                        return mesh.isVisible && mesh.isEnabled();
-                    });
-                    framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
-                }
-            }
-
-            currentScene.activeCamera.pinchPrecision = 200 / currentScene.activeCamera.radius;
-            currentScene.activeCamera.upperRadiusLimit = 5 * currentScene.activeCamera.radius;
-
-            currentScene.activeCamera.wheelDeltaPercentage = 0.01;
-            currentScene.activeCamera.pinchDeltaPercentage = 0.01;
-        }
-
-        currentScene.activeCamera.attachControl(canvas);
-
-        // Lighting
-        if (currentPluginName === "gltf") {
-            if (!currentScene.environmentTexture) {
-                currentScene.environmentTexture = loadSkyboxPathTexture(skyboxPath, currentScene);
-            }
-
-            currentSkybox = currentScene.createDefaultSkybox(currentScene.environmentTexture, true, (currentScene.activeCamera.maxZ - currentScene.activeCamera.minZ) / 2, 0.3, false);
-        }
-        else {
-            var pbrPresent = false;
-            for (var i = 0; i < currentScene.materials.length; i++) {
-                if (currentScene.materials[i]._transparencyMode !== undefined) {
-                    pbrPresent = true;
-                    break;
-                }
-            }
-
-            if (pbrPresent) {
-                if (!currentScene.environmentTexture) {
-                    currentScene.environmentTexture = loadSkyboxPathTexture(skyboxPath, currentScene);
-                }
-            }
-            else {
-                currentScene.createDefaultLight();
-            }
-        }
-
-        // In case of error during loading, meshes will be empty and clearColor is set to red
-        if (currentScene.meshes.length === 0 && currentScene.clearColor.r === 1 && currentScene.clearColor.g === 0 && currentScene.clearColor.b === 0) {
-            document.getElementById("logo").className = "";
-            canvas.style.opacity = 0;
-            debugLayerEnabled = true;
-        }
-        else {
-            if (BABYLON.Tools.errorsCount > 0) {
-                debugLayerEnabled = true;
-            }
-            document.getElementById("logo").className = "hidden";
-            document.getElementById("droptext").className = "hidden";
-            canvas.style.opacity = 1;
-            if (currentScene.activeCamera.keysUp) {
-                currentScene.activeCamera.keysUp.push(90); // Z
-                currentScene.activeCamera.keysUp.push(87); // W
-                currentScene.activeCamera.keysDown.push(83); // S
-                currentScene.activeCamera.keysLeft.push(65); // A
-                currentScene.activeCamera.keysLeft.push(81); // Q
-                currentScene.activeCamera.keysRight.push(69); // E
-                currentScene.activeCamera.keysRight.push(68); // D
-            }
-        }
-
-        if (debugLayerEnabled) {
-            currentScene.debugLayer.show();
-        }
-    };
-
-    var sceneError = function(sceneFile, babylonScene, message) {
-        document.title = "Babylon.js - " + sceneFile.name;
-        document.getElementById("logo").className = "";
-        canvas.style.opacity = 0;
-
-        var errorContent = '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>' + message.replace("file:[object File]", "'" + sceneFile.name + "'") + '</div>';
-
-        errorZone.style.display = 'block';
-        errorZone.innerHTML = errorContent;
-
-        // Close button error
-        errorZone.querySelector('.close').addEventListener('click', function() {
-            errorZone.style.display = 'none';
-        });
-    };
-
-    var loadFromAssetUrl = function() {
-        var rootUrl = BABYLON.Tools.GetFolderPath(assetUrl);
-        var fileName = BABYLON.Tools.GetFilename(assetUrl);
-        BABYLON.SceneLoader.LoadAsync(rootUrl, fileName, engine).then(function(scene) {
-            if (currentScene) {
-                currentScene.dispose();
-            }
-
-            sceneLoaded({ name: fileName }, scene);
-
-            scene.whenReadyAsync().then(function() {
-                engine.runRenderLoop(function() {
-                    scene.render();
-                });
-            });
-        }).catch(function(reason) {
-            sceneError({ name: fileName }, null, reason.message || reason);
-        });
-    };
-
-    if (assetUrl) {
-        loadFromAssetUrl();
-    }
-    else {
-        var startProcessingFiles = function() {
-            BABYLON.Tools.ClearLogCache();
-        };
-
-        filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded, null, null, null, startProcessingFiles, null, sceneError);
-        filesInput.onProcessFileCallback = (function(file, name, extension) {
-            if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) {
-                if (extension.toLowerCase() === "dds" ||
-                    extension.toLowerCase() === "env" ||
-                    extension.toLowerCase() === "hdr") {
-                    BABYLON.FilesInput.FilesToLoad[name] = file;
-                    skyboxPath = "file:" + file.correctName;
-                    return false;
-                }
-            }
-            return true;
-        }).bind(this);
-        filesInput.monitorElementForDragNDrop(canvas);
-
-        htmlInput.addEventListener('change', function(event) {
-            // Handling data transfer via drag'n'drop
-            if (event && event.dataTransfer && event.dataTransfer.files) {
-                filesToLoad = event.dataTransfer.files;
-            }
-            // Handling files from input files
-            if (event && event.target && event.target.files) {
-                filesToLoad = event.target.files;
-            }
-            filesInput.loadFiles(event);
-        }, false);
-    }
-
-    window.addEventListener("keydown", function(event) {
-        // Press R to reload
-        if (event.keyCode === 82 && event.target.nodeName !== "INPUT" && currentScene) {
-            if (assetUrl) {
-                loadFromAssetUrl();
-            }
-            else {
-                filesInput.reload();
-            }
-        }
-    });
-
-    btnInspector.addEventListener('click', function() {
-        if (currentScene) {
-            if (currentScene.debugLayer.isVisible()) {
-                debugLayerEnabled = false;
-                currentScene.debugLayer.hide();
-            }
-            else {
-                currentScene.debugLayer.show();
-                debugLayerEnabled = true;
-            }
-        }
-    }, false);
-
-    window.addEventListener("keydown", function(event) {
-        // Press space to toggle footer
-        if (event.keyCode === 32 && event.target.nodeName !== "INPUT") {
-            if (footer.style.display === "none") {
-                footer.style.display = "grid";
-                canvasZone.style.height = "calc(100% - var(--footer-height))";
-                if (debugLayerEnabled) {
-                    currentScene.debugLayer.show();
-                }
-                engine.resize();
-            }
-            else {
-                footer.style.display = "none";
-                canvasZone.style.height = "100%";
-                errorZone.style.display = "none";
-                engine.resize();
-                if (currentScene.debugLayer.isVisible()) {
-                    currentScene.debugLayer.hide();
-                }
-            }
-        }
-    });
-
-    sizeScene();
-
-    window.onresize = function() {
-        sizeScene();
-    }
-}
-
-function sizeScene() {
-    let divInspWrapper = document.getElementsByClassName('insp-wrapper')[0];
-    if (divInspWrapper) {
-        let divFooter = document.getElementsByClassName('footer')[0];
-        divInspWrapper.style.height = (document.body.clientHeight - divFooter.clientHeight) + "px";
-        divInspWrapper.style['max-width'] = document.body.clientWidth + "px";
-    }
-}
-