Fix PG

Playground/js/main.js

@@ -1,3 +1,186 @@
+var engine = null;
+
+/**
+ * Compile the script in the editor, and run the preview in the canvas
+ */
+compileAndRun = function(parent, fpsLabel) {
+    // If we need to change the version, don't do this
+    if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
+
+    try {
+        parent.menuPG.hideWaitDiv();
+
+        if (!BABYLON.Engine.isSupported()) {
+            parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);
+            return;
+        }
+
+        var showInspector = false;
+        parent.menuPG.showBJSPGMenu();
+        parent.monacoCreator.JsEditor.updateOptions({ readOnly: false });
+
+        if (BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
+            showInspector = true;
+        }
+
+        if (engine) {
+            try {
+                engine.dispose();
+            }
+            catch (ex) { }
+            engine = null;
+        }
+
+        var canvas = document.getElementById("renderCanvas");
+        document.getElementById("errorZone").style.display = 'none';
+        document.getElementById("errorZone").innerHTML = "";
+        document.getElementById("statusBar").innerHTML = "Loading assets... Please wait.";
+        var checkCamera = true;
+        var checkSceneCount = true;
+        var createEngineFunction = "createDefaultEngine";
+        var createSceneFunction;
+
+        parent.monacoCreator.getRunCode(function (code) {
+            var createDefaultEngine = function () {
+                return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+            }
+
+            var scene;
+            var defaultEngineZip = "new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })";
+
+            if (code.indexOf("createEngine") !== -1) {
+                createEngineFunction = "createEngine";
+            }
+
+            // Check for different typos
+            if (code.indexOf("delayCreateScene") !== -1) { // delayCreateScene
+                createSceneFunction = "delayCreateScene";
+                checkCamera = false;
+            } else if (code.indexOf("createScene") !== -1) { // createScene
+                createSceneFunction = "createScene";
+            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                createSceneFunction = "CreateScene";
+            } else if (code.indexOf("createscene") !== -1) { // createscene
+                createSceneFunction = "createscene";
+            }
+
+            if (!createSceneFunction) {
+                // Just pasted code.
+                engine = createDefaultEngine();
+                scene = new BABYLON.Scene(engine);
+                var runScript = null;
+                eval("runScript = function(scene, canvas) {" + code + "}");
+                runScript(scene, canvas);
+
+                parent.zipTool.ZipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+            } else {
+                var __createScene = null;
+                if (parent.settingsPG.ScriptLanguage == "JS") {
+                    code += "\n" + "__createScene = " + createSceneFunction + ";";
+                }
+                else {
+                    __createScene = createSceneFunction;
+                    var startCar = code.search('var ' + createSceneFunction);
+                    code = code.substr(0, startCar) + code.substr(startCar + 4);
+                }
+
+                // Execute the code
+                eval(code);
+
+                // Create engine
+                eval("engine = " + createEngineFunction + "()");
+                if (!engine) {
+                    parent.utils.showError("createEngine function must return an engine.", null);
+                    return;
+                }
+
+                // Create scene
+                eval("scene = " + __createScene + "()");
+
+                if (!scene) {
+                    parent.utils.showError(createSceneFunction + " function must return a scene.", null);
+                    return;
+                }
+
+                // if scene returns a promise avoid checks
+                if (scene.then) {
+                    checkCamera = false;
+                    checkSceneCount = false;
+                }
+
+                var createEngineZip = (createEngineFunction === "createEngine")
+                    ? "createEngine()"
+                    : defaultEngineZip;
+
+                parent.zipTool.zipCode =
+                    code + "\r\n\r\n" +
+                    "var engine = " + createEngineZip + ";\r\n" +
+                    "var scene = " + createSceneFunction + "();";
+
+            }
+
+            engine = engine;
+            engine.runRenderLoop(function () {
+                if (engine.scenes.length === 0) {
+                    return;
+                }
+
+                if (canvas.width !== canvas.clientWidth) {
+                    engine.resize();
+                }
+
+                var scene = engine.scenes[0];
+
+                if (scene.activeCamera || scene.activeCameras.length > 0) {
+                    scene.render();
+                }
+
+                fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
+            }.bind(this));
+
+            if (checkSceneCount && engine.scenes.length === 0) {
+                parent.utils.showError("You must at least create a scene.", null);
+                return;
+            }
+
+            if (checkCamera && engine.scenes[0].activeCamera == null) {
+                parent.utils.showError("You must at least create a camera.", null);
+                return;
+            } else if (scene.then) {
+                scene.then(function () {
+                    document.getElementById("statusBar").innerHTML = "";
+                });
+            } else {
+                engine.scenes[0].executeWhenReady(function () {
+                    document.getElementById("statusBar").innerHTML = "";
+                });
+            }
+
+            if (scene) {
+                if (showInspector) {
+                    if (scene.then) {
+                        // Handle if scene is a promise
+                        scene.then(function (s) {
+                            if (!s.debugLayer.isVisible()) {
+                                s.debugLayer.show({ embedMode: true });
+                            }
+                        })
+                    } else {
+                        if (!scene.debugLayer.isVisible()) {
+                            scene.debugLayer.show({ embedMode: true });
+                        }
+                    }
+                }
+            }
+        }.bind(this));
+
+    } catch (e) {
+        parent.utils.showError(e.message, e);
+        // Also log error in console to help debug playgrounds
+        console.error(e);
+    }
+};
+
 /**
  * This JS file contains the main function
  */
@@ -11,7 +194,6 @@ class Main {
         this.currentSnippetTitle = null;
         this.currentSnippetDescription = null;
         this.currentSnippetTags = null;
-        this.engine = null;
         this.fpsLabel = document.getElementById("fpsLabel");
         this.scripts;
         this.previousHash = "";
@@ -39,8 +221,8 @@ class Main {
         // Resize the render view when resizing the window
         window.addEventListener("resize",
             function () {
-                if (this.engine) {
-                    this.engine.resize();
+                if (engine) {
+                    engine.resize();
                 }
             }.bind(this)
         );
@@ -59,7 +241,7 @@ class Main {
         // Display BJS version - Need a check in case of version selection
         if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
-        this.parent.utils.setToMultipleID("runButton", "click", this.compileAndRun.bind(this));
+        this.parent.utils.setToMultipleID("runButton", "click", () => compileAndRun(this.parent, this.fpsLabel));
         // New
         this.parent.utils.setToMultipleID("newButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -74,7 +256,7 @@ class Main {
         this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
         // Zip
         this.parent.utils.setToMultipleID("zipButton", "click", function () {
-            this.parent.zipTool.getZip(this.engine);
+            this.parent.zipTool.getZip(engine);
         }.bind(this));
         // Themes
         this.parent.utils.setToMultipleID("darkTheme", "click", function () {
@@ -131,7 +313,7 @@ class Main {
         // FullScreen
         this.parent.utils.setToMultipleID("fullscreenButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
-            this.parent.menuPG.goFullscreen(this.engine);
+            this.parent.menuPG.goFullscreen(engine);
         }.bind(this));
         // Editor fullScreen
         this.parent.utils.setToMultipleID("editorFullscreenButton", "click", function () {
@@ -211,7 +393,7 @@ class Main {
                     this.parent.monacoCreator.JsEditor.setValue(xhr.responseText);
                     this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 0, column: 0 });
                     this.parent.monacoCreator.BlockEditorChange = false;
-                    this.compileAndRun();
+                    compileAndRun(this.parent, this.fpsLabel);
 
                     this.currentSnippetToken = null;
                 }
@@ -399,7 +581,7 @@ class Main {
         }
         this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 11, column: 0 });
         this.parent.monacoCreator.JsEditor.focus();
-        this.compileAndRun();
+        compileAndRun(this.parent, this.fpsLabel);
     };
 
     clear() {
@@ -494,7 +676,7 @@ class Main {
                     location.href = newUrl;
                     // Hide the complete title & co message
                     this.hideNoMetadata();
-                    this.compileAndRun();
+                    compileAndRun(this.parent, this.fpsLabel);
                 } else {
                     this.parent.utils.showError("Unable to save your code. It may be too long.", null);
                 }
@@ -527,200 +709,14 @@ class Main {
         }
     };
 
-    /**
-         * Compile the script in the editor, and run the preview in the canvas
-         */
-    compileAndRun() {
-        // If we need to change the version, don't do this
-        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
-
-        try {
-            this.parent.menuPG.hideWaitDiv();
-
-            if (!BABYLON.Engine.isSupported()) {
-                this.parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);
-                return;
-            }
-
-            var showInspector = false;
-            this.parent.menuPG.showBJSPGMenu();
-            this.parent.monacoCreator.JsEditor.updateOptions({ readOnly: false });
-
-            if (BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
-                showInspector = true;
-            }
-
-            if (this.engine) {
-                try {
-                    this.engine.dispose();
-                }
-                catch (ex) { }
-                this.engine = null;
-            }
-
-            var canvas = document.getElementById("renderCanvas");
-            document.getElementById("errorZone").style.display = 'none';
-            document.getElementById("errorZone").innerHTML = "";
-            document.getElementById("statusBar").innerHTML = "Loading assets... Please wait.";
-            var checkCamera = true;
-            var checkSceneCount = true;
-            var createEngineFunction = "createDefaultEngine";
-            var createSceneFunction;
-
-            this.parent.monacoCreator.getRunCode(function (code) {
-                // Need these variables for "eval" purpose
-                var engine = this.engine;
-                var delayCreateScene = null;
-                var createScene = null;
-                var CreateScene = null;
-                var createscene = null;
-
-                var createDefaultEngine = function () {
-                    return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
-                }
-
-                var scene;
-                var defaultEngineZip = "new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })";
-
-                if (code.indexOf("createEngine") !== -1) {
-                    createEngineFunction = "createEngine";
-                }
-
-                // Check for different typos
-                if (code.indexOf("delayCreateScene") !== -1) { // delayCreateScene
-                    createSceneFunction = "delayCreateScene";
-                    checkCamera = false;
-                } else if (code.indexOf("createScene") !== -1) { // createScene
-                    createSceneFunction = "createScene";
-                } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
-                    createSceneFunction = "CreateScene";
-                } else if (code.indexOf("createscene") !== -1) { // createscene
-                    createSceneFunction = "createscene";
-                }
-
-                if (!createSceneFunction) {
-                    // Just pasted code.
-                    engine = createDefaultEngine();
-                    scene = new BABYLON.Scene(engine);
-                    var runScript = null;
-                    eval("runScript = function(scene, canvas) {" + code + "}");
-                    runScript(scene, canvas);
-
-                    this.parent.zipTool.ZipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
-                } else {
-                    var __createScene = null;
-                    if (this.parent.settingsPG.ScriptLanguage == "JS") {
-                        code += "\n" + "__createScene = " + createSceneFunction + ";";
-                    }
-                    else {
-                        __createScene = createSceneFunction;
-                        var startCar = code.search('var ' + createSceneFunction);
-                        code = code.substr(0, startCar) + code.substr(startCar + 4);
-                    }
-
-                    // Execute the code
-                    eval(code);
-
-                    // Create engine
-                    eval("engine = " + createEngineFunction + "()");
-                    if (!engine) {
-                        this.parent.utils.showError("createEngine function must return an engine.", null);
-                        return;
-                    }
-
-                    // Create scene
-                    eval("scene = " + __createScene + "()");
-
-                    if (!scene) {
-                        this.parent.utils.showError(createSceneFunction + " function must return a scene.", null);
-                        return;
-                    }
-
-                    // if scene returns a promise avoid checks
-                    if (scene.then) {
-                        checkCamera = false;
-                        checkSceneCount = false;
-                    }
-
-                    var createEngineZip = (createEngineFunction === "createEngine")
-                        ? "createEngine()"
-                        : defaultEngineZip;
-
-                    this.parent.zipTool.zipCode =
-                        code + "\r\n\r\n" +
-                        "var engine = " + createEngineZip + ";\r\n" +
-                        "var scene = " + createSceneFunction + "();";
-
-                }
-
-                this.engine = engine;
-                this.engine.runRenderLoop(function () {
-                    if (this.engine.scenes.length === 0) {
-                        return;
-                    }
 
-                    if (canvas.width !== canvas.clientWidth) {
-                        this.engine.resize();
-                    }
-
-                    var scene = this.engine.scenes[0];
-
-                    if (scene.activeCamera || scene.activeCameras.length > 0) {
-                        scene.render();
-                    }
-
-                    this.fpsLabel.innerHTML = this.engine.getFps().toFixed() + " fps";
-                }.bind(this));
-
-                if (checkSceneCount && this.engine.scenes.length === 0) {
-                    this.parent.utils.showError("You must at least create a scene.", null);
-                    return;
-                }
-
-                if (checkCamera && this.engine.scenes[0].activeCamera == null) {
-                    this.parent.utils.showError("You must at least create a camera.", null);
-                    return;
-                } else if (scene.then) {
-                    scene.then(function () {
-                        document.getElementById("statusBar").innerHTML = "";
-                    });
-                } else {
-                    this.engine.scenes[0].executeWhenReady(function () {
-                        document.getElementById("statusBar").innerHTML = "";
-                    });
-                }
-
-                if (scene) {
-                    if (showInspector) {
-                        if (scene.then) {
-                            // Handle if scene is a promise
-                            scene.then(function (s) {
-                                if (!s.debugLayer.isVisible()) {
-                                    s.debugLayer.show({ embedMode: true });
-                                }
-                            })
-                        } else {
-                            if (!scene.debugLayer.isVisible()) {
-                                scene.debugLayer.show({ embedMode: true });
-                            }
-                        }
-                    }
-                }
-            }.bind(this));
-
-        } catch (e) {
-            this.parent.utils.showError(e.message, e);
-            // Also log error in console to help debug playgrounds
-            console.error(e);
-        }
-    };
 
     /**
          * Toggle the code editor
          */
     toggleEditor() {
         var editorButton = document.getElementById("editorButton1280");
-        var scene = this.engine.scenes[0];
+        var scene = engine.scenes[0];
 
         // If the editor is present
         if (editorButton.classList.contains('checked')) {
@@ -732,7 +728,7 @@ class Main {
             this.parent.splitInstance.setSizes([50, 50]);  // Reset
             this.parent.utils.setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
-        this.engine.resize();
+        engine.resize();
 
         if (scene.debugLayer.isVisible()) {
             scene.debugLayer.show({ embedMode: true });
@@ -744,7 +740,7 @@ class Main {
      */
     toggleDebug() {
         // Always showing the debug layer, because you can close it by itself
-        var scene = this.engine.scenes[0];
+        var scene = engine.scenes[0];
         if (scene.debugLayer.isVisible()) {
             scene.debugLayer.hide();
         }
@@ -819,7 +815,7 @@ class Main {
 
                                 this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 0, column: 0 });
                                 this.parent.monacoCreator.BlockEditorChange = false;
-                                this.compileAndRun();
+                                compileAndRun(this.parent, this.fpsLabel);
                             }
                         }
                     }.bind(this);