Merge pull request #1 from BabylonJS/master

Pull upstream

.vscode/launch.json

@@ -45,7 +45,21 @@
             "name": "Launch sandbox (Chrome)",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:1338/sandbox/index-local.html",
+            "url": "http://localhost:1338/sandbox/public/index-local.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "preLaunchTask": "run",
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
+        },
+        {
+            "name": "Launch sandbox (Edge)",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/sandbox/public/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",

Playground/css/index.css

@@ -418,7 +418,7 @@ body {
     -ms-user-select: none;
     user-select: none;
     position: relative;
-    z-index: 5;
+    z-index: 11;
 }
 
 .navbar a {

Playground/debug.html

@@ -57,7 +57,6 @@
         <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/gui/babylon.gui.js"></script>
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
@@ -100,6 +99,8 @@
 
         <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
 
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
         <!-- Extensions -->
         <script
             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
@@ -172,6 +173,9 @@
                         <div class="option checked noSubSelect" id="editorButton1280">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1280">Format code</div>
@@ -252,6 +256,9 @@
                         <div class="option checked noSubSelect" id="editorButton1024">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1024">Format code</div>
@@ -339,6 +346,9 @@
                         <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                        
                         <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
                             style="display: none">Fullscreen</div>
                         <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"

Playground/frame.html

@@ -28,7 +28,6 @@
         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
@@ -71,6 +70,8 @@
 
         <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
 
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
         <!-- Extensions -->
         <script
             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"

Playground/full.html

@@ -18,7 +18,6 @@
         <script src="https://preview.babylonjs.com/libktx.js"></script>
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
         <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
@@ -26,6 +25,8 @@
         <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
         <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
 
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
         <!-- Extensions -->
         <script
             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"

Playground/index-local.html

@@ -91,6 +91,9 @@
                         </div>
                         <div class="option checked noSubSelect" id="editorButton1280">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>                     
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
                         </div>
                         <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
@@ -176,6 +179,9 @@
                         <div class="option checked noSubSelect" id="editorButton1024">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1024">Format code</div>
@@ -263,6 +269,9 @@
                         <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                            
                         <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
                             style="display: none">Fullscreen</div>
                         <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"

Playground/index.html

@@ -71,6 +71,9 @@
                         <div class="option checked noSubSelect" id="editorButton1280">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1280">Format code</div>
@@ -157,6 +160,9 @@
                         <div class="option checked noSubSelect" id="editorButton1024">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1024">Format code</div>
@@ -244,6 +250,9 @@
                         <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                            
                         <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
                             style="display: none">Fullscreen</div>
                         <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
@@ -398,7 +407,6 @@
         <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
         <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
@@ -406,6 +414,7 @@
         <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.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/inspector/babylon.inspector.bundle.js"></script>
 
          <!-- Dependencies -->
          <script src="https://preview.babylonjs.com/ammo.js"></script>

Playground/indexStable.html

@@ -72,6 +72,9 @@
                         <div class="option checked noSubSelect" id="editorButton1280">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1280">Format code</div>
@@ -155,6 +158,9 @@
                         <div class="option checked noSubSelect" id="editorButton1024">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1024">Format code</div>
@@ -231,7 +237,10 @@
                         </div>
                         <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
+                        </div>                        
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>    
                         <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
                             style="display: none">Fullscreen</div>
                         <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
@@ -378,12 +387,12 @@
         <!-- Babylon.js -->
         <script src="https://cdn.babylonjs.com/babylon.js"></script>
         <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
-        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
         <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
         <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
         <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
         <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
         <!-- Monaco -->
         <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>

Playground/indexWebGPU.html

@@ -33,13 +33,13 @@
         <script src="https://preview.babylonjs.com/glslang/glslang.js"></script>
         <script src="/js/babylonWebGpu.max.js"></script>
         <!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
         <!-- <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
     <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.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/inspector/babylon.inspector.bundle.js"></script>
 
         <!-- Monaco -->
         <script src="/node_modules/monaco-editor/min/vs/loader.js"></script>
@@ -116,6 +116,9 @@
                         <div class="option checked noSubSelect" id="editorButton1280">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1280">Format code</div>
@@ -200,6 +203,9 @@
                         <div class="option checked noSubSelect" id="editorButton1024">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
                         </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
                         <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
                         <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
                         <div class="option noSubSelect" id="formatButton1024">Format code</div>
@@ -276,7 +282,10 @@
                         </div>
                         <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                             <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
+                        </div>                        
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>    
                         <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
                             style="display: none">Fullscreen</div>
                         <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"

Playground/js/main.js

@@ -101,7 +101,14 @@ compileAndRun = function (parent, fpsLabel) {
 
                 parent.zipTool.ZipCode = zipVariables + defaultEngineZip + "var engine = createDefaultEngine();" + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
             } else {
-                code += "\r\n\r\nengine = " + createEngineFunction + "();";
+                code += `
+var engine;
+try {
+    engine = ${createEngineFunction}();
+} catch(e) {
+    console.log("the available createEngine function failed. Creating the default engine instead");
+    engine = createDefaultEngine();
+}`;
                 code += "\r\nif (!engine) throw 'engine should not be null.';";
 
                 if (parent.settingsPG.ScriptLanguage == "JS") {
@@ -400,16 +407,19 @@ class Main {
             }.bind(this));
         }
         // Safe mode
+        this.parent.settingsPG.restoreSafeMode();
         this.parent.utils.setToMultipleID("safemodeToggle", 'click', function () {
             document.getElementById("safemodeToggle1280").classList.toggle('checked');
-            if (document.getElementById("safemodeToggle1280").classList.contains('checked')) {
-                this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
-            } else {
-                this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
-            }
+            this.parent.settingsPG.setSafeMode(document.getElementById("safemodeToggle1280").classList.contains('checked'));
         }.bind(this));
         // Editor
         this.parent.utils.setToMultipleID("editorButton", "click", this.toggleEditor.bind(this));
+        // CTRL + S        
+        this.parent.settingsPG.restoreCTRLS();
+        this.parent.utils.setToMultipleID("ctrlsToggle", 'click', function () {
+            document.getElementById("ctrlsToggle1280").classList.toggle('checked');            
+            this.parent.settingsPG.setCTRLS(document.getElementById("ctrlsToggle1280").classList.contains('checked'));
+        }.bind(this));        
         // FullScreen
         this.parent.utils.setToMultipleID("fullscreenButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -450,7 +460,7 @@ class Main {
         this.parent.menuPG.resizeBigCanvas();
 
         // HotKeys
-        document.onkeydown = function (e) {
+        document.onkeydown = (e) => {
             // Alt+Enter to Run
             if (e.altKey && (e.key === 'Enter' || event.which === 13)) {
                 handleRun();
@@ -469,6 +479,9 @@ class Main {
                 (e.key === 'S' || event.which === 83)
             ) {
                 e.preventDefault();
+                if (!this.checkCTRLSMode()) {
+                    return;
+                }
                 handleSave();
             }
         };
@@ -566,7 +579,7 @@ class Main {
                         exampleList.appendChild(noResultContainer);
                     }
 
-                    if (!location.hash && restoreVersionResult == false) {
+                    if (!location.hash && restoreVersionResult == false && location.pathname.indexOf('pg/') === -1) {
                         // Query string
                         var queryString = window.location.search;
 
@@ -756,6 +769,14 @@ class Main {
         }
     };
 
+    checkCTRLSMode() {
+        if (document.getElementById("ctrlsToggle" + this.parent.utils.getCurrentSize()) &&
+            document.getElementById("ctrlsToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
+            return true;
+        }
+        return false;
+    };
+
     /**
      * Metadatas form
      */
@@ -1016,12 +1037,11 @@ class Main {
     };
     checkHash() {
         let pgHash = "";
-        if (location.search) {
+        if (location.search && (!location.pathname  || location.pathname === '/') && !location.hash) {
             var query = this.parseQuery(location.search);
             if (query.pg) {
                 pgHash = "#" + query.pg + "#" + (query.revision || "0")
             }
-
         } else if (location.hash) {
             if (this.previousHash !== location.hash) {
                 this.cleanHash();
@@ -1156,4 +1176,4 @@ class Main {
         }
         return query;
     }
-}
+}

Playground/js/mainWebGPU.js

@@ -437,6 +437,9 @@ class Main {
               (e.key === 'S' || event.which === 83)
             ) {
                 e.preventDefault();
+                if (!this.checkCTRLSMode()) {
+                    return;
+                }
                 handleSave();
             }
         };
@@ -709,6 +712,14 @@ class Main {
         }
     };
 
+    checkCTRLSMode() {
+        if (document.getElementById("ctrlsToggle" + this.parent.utils.getCurrentSize()) &&
+            document.getElementById("ctrlsToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
+            return true;
+        }
+        return false;
+    };    
+
     /**
      * Metadatas form
      */

Playground/js/monacoCreator.js

@@ -21,6 +21,7 @@ class MonacoCreator {
         this.blockEditorChange = false;
         this.definitionWorker = null;
         this.deprecatedCandidates = [];
+        this.templates = [];
 
         this.compilerTriggerTimeoutID = null;
 
@@ -113,6 +114,12 @@ class MonacoCreator {
 
         this.setupDefinitionWorker(libContent);
 
+        // Load code templates
+        response = await fetch("/templates.json");
+        if (response.ok) {
+            this.templates = await response.json();
+        }
+
         // WARNING !!! We need the 'dev' version of Monaco, as we use monkey-patching to hook into the suggestion adapter
         require.config({
             paths: {
@@ -127,6 +134,13 @@ class MonacoCreator {
             // This is used for a vscode-like color preview for ColorX types
             this.setupMonacoColorProvider();
 
+            // enhance templates with extra properties
+            for (const template of this.templates) {
+                template.kind = monaco.languages.CompletionItemKind.Snippet,
+                template.sortText = "!" + template.label; // make sure templates are on top of the completion window
+                template.insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
+            }
+
             // As explained above, we need the 'dev' version of Monaco to access this adapter!
             require(['vs/language/typescript/languageFeatures'], module => {
                 this.hookMonacoCompletionProvider(module.SuggestAdapter);
@@ -289,6 +303,17 @@ class MonacoCreator {
                 }
             }
 
+            // add our own templates when invoked without context
+            if (context.triggerKind == monaco.languages.CompletionTriggerKind.Invoke) {
+                for (const template of owner.templates) {
+                    if (template.language && owner.monacoMode != template.language)
+                        continue;
+
+                    template.range = undefined;
+                    suggestions.push(template);
+                }
+            }
+
             // preserve incomplete flag or force it when the definition is not yet analyzed
             const incomplete = (result.incomplete && result.incomplete == true) || owner.deprecatedCandidates.length == 0;
 

Playground/js/settingsPG.js

@@ -26,7 +26,10 @@ class SettingsPG {
         this.elementToTheme = [
             '.wrapper #jsEditor',
             '.wrapper .gutter'
-        ];
+        ];        
+        // Editor font size
+        this.safeMode = localStorage.getItem("bjs-playground-safeMode") || false;
+        this.ctrlS = localStorage.getItem("bjs-playground-ctrlS") || true;
         // Editor font size
         this.fontSize = localStorage.getItem("bjs-playground-font") || 14;
         // Editor theme
@@ -54,6 +57,37 @@ class SettingsPG {
         return this.defaultScene;
     };
 
+    /**
+     * Change safe mode
+     */
+    setSafeMode(value) {
+        localStorage.setItem("bjs-playground-safeMode", value);
+        this.safeMode = value;
+        if (value) {
+            this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+        } else {
+            this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
+        }
+    };
+    restoreSafeMode() {
+        this.setSafeMode(this.safeMode);
+    };    
+
+    /**
+     * Change CTRL+S
+     */
+    setCTRLS(value) {
+        localStorage.setItem("bjs-playground-ctrlS", value);
+        this.ctrlS = value;
+        if (value) {
+            this.parent.utils.setToMultipleID("ctrlsToggle", "innerHTML", 'CTRL+S to save <i class="fa fa-check-square" aria-hidden="true"></i>');
+        } else {
+            this.parent.utils.setToMultipleID("ctrlsToggle", "innerHTML", 'CTRL+S to save <i class="fa fa-square" aria-hidden="true"></i>');
+        }
+    };
+    restoreCTRLS() {
+        this.setSafeMode(this.ctrlS);
+    };   
 
     /**
      * Change font size

Playground/templates.json

@@ -0,0 +1,98 @@
+[
+  {
+    "label" : "Create a sphere",
+    "documentation" : "https://doc.babylonjs.com/how_to/set_shapes",
+    "insertText" : "var sphere = BABYLON.MeshBuilder.CreateSphere(\"${1:sphere}\", {diameter: ${2:1}}, scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a box",
+    "documentation" : "https://doc.babylonjs.com/how_to/set_shapes",
+    "insertText" : "var box = BABYLON.MeshBuilder.CreateBox(\"${1:box}\", {size: ${2:1}}, scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Load CPU Particle System from Snippet Server",
+    "documentation" : "https://doc.babylonjs.com/babylon101/particles#snippet-server",
+    "insertText" : "BABYLON.ParticleHelper.CreateFromSnippetAsync(\"${1:your_snippet_url_no_#}\", scene, false).then(system => {\n\n});",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Load GPU Particle System from Snippet Server",
+    "documentation" : "https://doc.babylonjs.com/babylon101/particles#snippet-server",
+    "insertText" : "BABYLON.ParticleHelper.CreateFromSnippetAsync(\"${1:your_snippet_url_no_#}\", scene, true).then(system => {\n\n});",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a cylinder",
+    "documentation" : "https://doc.babylonjs.com/how_to/set_shapes",
+    "insertText" : "var cylinder = BABYLON.MeshBuilder.CreateCylinder(\"${1:cylinder}\", {height: ${2:2}, diameter: ${3:1}}, scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a ground plane",
+    "documentation" : "https://doc.babylonjs.com/how_to/set_shapes",
+    "insertText" : "var ground = BABYLON.MeshBuilder.CreateGround(\"${1:ground}\", {width: ${2:6}, height: ${3:6}}, scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a point light",
+    "documentation" : "https://doc.babylonjs.com/babylon101/lights#the-point-light",
+    "insertText" : "var pointLight = new BABYLON.PointLight(\"${1:pointLight}\", new BABYLON.Vector3(${2:0},${3:5},${4:0}), scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a directional light",
+    "documentation" : "https://doc.babylonjs.com/babylon101/lights#the-directional-light",
+    "insertText" : "var dirLight = new BABYLON.DirectionalLight(\"${1:dirLight}\", new BABYLON.Vector3(${2:0.25},${3:-1},${4:-0.25}), scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a spot light",
+    "documentation" : "https://doc.babylonjs.com/babylon101/lights#the-spot-light",
+    "insertText" : "var spotLight = new BABYLON.SpotLight(\"${1:spotLight}\", new BABYLON.Vector3(${2:0}, ${3:30}, ${4:-10}), new BABYLON.Vector3(${5:0}, ${6:-1}, ${7:0}), ${8:Math.PI / 3}, ${9:2}, scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create a hemispheric light",
+    "documentation" : "https://doc.babylonjs.com/babylon101/lights#the-hemispheric-light",
+    "insertText" : "var hemiLight = new BABYLON.HemisphericLight(\"${1:hemiLight}\", new BABYLON.Vector3(${2:0}, ${3:1}, ${4:0}), scene);",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Load a Node Material from snippet w/callback",
+    "documentation" : "https://doc.babylonjs.com/how_to/node_material#loading-from-a-file-saved-from-the-node-material-editor",
+    "insertText" : "BABYLON.NodeMaterial.ParseFromSnippetAsync(\"${1:your_snippet_url_no_#}\", scene).then(nodeMaterial => {\n     ${2:mesh_to_apply_node_material_to}.material = nodeMaterial;\n});",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Show the Inspector",
+    "documentation" : "https://doc.babylonjs.com/features/playground_debuglayer",
+    "insertText" : "scene.debugLayer.show({\n     embedMode:true\n});",
+    "language" : "javascript"
+  },
+  {
+    "label" : "Create an Arc Rotate Camera w/Degrees",
+    "documentation" : "https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera",
+    "insertText" : "var camera = new BABYLON.ArcRotateCamera(\"${1:camera}\", BABYLON.Tools.ToRadians(${2:90}), BABYLON.Tools.ToRadians(${3:65}), ${4:10}, ${5:BABYLON.Vector3.Zero()}, scene);",
+    "language" : "javascript"
+  },
+  {
+  "label" : "Create an Arc Rotate Camera w/Radians",
+  "documentation" : "https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera",
+  "insertText" : "var camera = new BABYLON.ArcRotateCamera(\"${1:camera}\", ${2:0}, ${3:Math.PI/2}, ${4:10}, ${5:BABYLON.Vector3.Zero()}, scene);",
+  "language" : "javascript"
+  },
+  {
+  "label" : "Import a Mesh w/callback",
+  "documentation" : "https://doc.babylonjs.com/resources/external_pg_assets",
+  "insertText" : "BABYLON.SceneLoader.ImportMesh(\"${1:meshName}\", \"${2:url to the mesh parent directory}\", \"${3:Mesh filename.fileextension}\", scene, function(newMeshes){\n\n});",
+  "language" : "javascript"
+  },
+  {
+    "label" : "Setup a shadow generator",
+    "documentation" : "https://doc.babylonjs.com/babylon101/shadows",
+    "insertText" : "var shadowGenerator = new BABYLON.ShadowGenerator(${1:size}, ${2:the_light_source});\nshadowGenerator.getShadowMap().renderList.push(${3:the_mesh_that_casts_a_shadow});\n${4:mesh_that_receives_the_shadow}.receiveShadows = true;",
+    "language" : "javascript"
+  }
+]