Fix #8331

Playground/debug.html

@@ -172,6 +172,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 +255,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 +345,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-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"

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"

Playground/indexWebGPU.html

@@ -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

@@ -407,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();
@@ -457,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();
@@ -476,6 +479,9 @@ class Main {
                 (e.key === 'S' || event.which === 83)
             ) {
                 e.preventDefault();
+                if (!this.checkCTRLSMode()) {
+                    return;
+                }
                 handleSave();
             }
         };
@@ -763,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
      */

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/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