version!

wuqianju · Jul 16, 2020 · a8edd3c · a8edd3c
1 parent f582df7
commit a8edd3c
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 4 deletions.
diff --git a/Playground/index-local.html b/Playground/index-local.html
@@ -31,7 +31,6 @@
         <script src="/dist/preview%20release/Oimo.js"></script>
         <script src="/dist/preview%20release/libktx.js"></script>
         <script src="/dist/preview%20release/earcut.min.js"></script>
-        <!-- Monaco -->
 
         <!-- Babylon.js -->
         <script src="/Tools/DevLoader/BabylonLoader.js"></script>

diff --git a/Playground/index.html b/Playground/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Babylon.js Playground</title>
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
+
+        <!-- Pep -->
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!--For canvas/code separator-->
+        <script src="libs/split.js"></script>
+
+        <!-- DatGUI -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- jszip -->
+        <script src="libs/jszip.min.js"></script>
+        <script src="libs/fileSaver.js"></script>
+
+        <!-- Dependencies -->
+        <script src="/dist/preview%20release/ammo.js"></script>
+        <script src="/dist/preview%20release/recast.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="/dist/preview%20release/earcut.min.js"></script>
+
+        <!-- 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/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>
+
+         <!-- Extensions -->
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+             >
+         </script>
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+             ></script>
+
+         <!-- Scene Manager -->
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+         </script>
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+         </script>        
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
+    </head>
+
+    <body>        
+        <div id="host-element">
+        </div>   
+
+        <script src="dist/babylon.playground.js"></script>
+
+        <script src="index.js"></script>
+    </body>
+
+</html>
diff --git a/Playground/index.js b/Playground/index.js
@@ -1,3 +1,87 @@
-var hostElement = document.getElementById("host-element");
+// Version 
+var Versions = {
+    "Latest": [
+        "https://preview.babylonjs.com/babylon.js",
+        "https://preview.babylonjs.com/gui/babylon.gui.min.js",
+        "https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js",
+        "https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js",
+        "https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js",
+        "https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js",
+        "https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"
+    ],
+    "4.1.0": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/serializers/babylonjs.serializers.min.js"
+    ],
+    "4.0.3": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/serializers/babylonjs.serializers.min.js"
+    ],
+    "3.3": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/serializers/babylonjs.serializers.min.js"
+    ]
+};
 
-BABYLON.Playground.Show(hostElement);
+let loadScriptAsync = function(url) {
+    return new Promise((resolve, reject) => {
+        let script = document.createElement('script');
+        script.src = url;
+        script.onload = () => {
+            resolve();
+        }
+        document.head.appendChild(script);
+    });
+}
+
+let readStringFromStore = function(key, defaultValue) {
+    if (localStorage.getItem(key) === null) {
+        return defaultValue;
+    }
+
+    return localStorage.getItem(key);
+}
+
+let checkBabylonVersionAsync= function () {
+    let version = BABYLON.Engine.Version;
+    let activeVersion = readStringFromStore("version", version);
+
+    if (activeVersion === "Latest") {
+        return Promise.resolve();
+    }
+
+    let tasks = [];
+
+    for (var file of Versions[activeVersion]) {
+        tasks.push(loadScriptAsync(file));
+    }
+
+    return Promise.all(tasks);
+}
+
+checkBabylonVersionAsync().then(() => {
+    loadScriptAsync("dist/babylon.playground.js").then(() => {
+        var hostElement = document.getElementById("host-element");
+        BABYLON.Playground.Show(hostElement);
+    });
+});
diff --git a/Playground/src/components/commandBarComponent.tsx b/Playground/src/components/commandBarComponent.tsx
@@ -2,9 +2,12 @@ import * as React from "react";
 import { GlobalState } from '../globalState';
 import { CommandButtonComponent } from './commandButtonComponent';
 import { CommandDropdownComponent } from './commandDropdownComponent';
+import { Utilities } from '../tools/utilities';
 
 require("../scss/commandBar.scss");
 
+declare var Versions: any;
+
 interface ICommandBarComponentProps {
     globalState: GlobalState;
 }
@@ -44,6 +47,19 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
     }
 
     public render() {
+
+        var versionOptions = Object.keys(Versions).map(key => {
+            return {
+                label: key,
+                storeKey: "version",
+                defaultValue: "Latest",
+                onClick: () => {
+                    Utilities.StoreStringToStore("version", key);
+                    window.location.reload();
+                }
+            }
+        });
+
         return (
             <div className={"commands " + (this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
                 <div className="commands-left">
@@ -125,6 +141,7 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                 ]}/>
                 </div>
                 <div className="commands-right">
+                    <CommandDropdownComponent globalState={this.props.globalState} icon="options" tooltip="Options" toRight={true} items={versionOptions} />                    
                     <CommandButtonComponent globalState={this.props.globalState} tooltip="Examples" icon="examples" onClick={()=> this.onExamples()} isActive={false}/>
                 </div>
             </div>

diff --git a/Playground/src/components/commandDropdownComponent.tsx b/Playground/src/components/commandDropdownComponent.tsx
@@ -14,6 +14,7 @@ interface ICommandDropdownComponentProps {
         defaultValue?: boolean | string;
         subItems?: string[];
     }[];
+    toRight?: boolean
 }
 
 export class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {isExpanded: boolean}> {    
@@ -38,7 +39,7 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                     </div>
                     {
                             this.state.isExpanded &&
-                            <div className="command-dropdown-content sub1">
+                            <div className={"command-dropdown-content sub1" + (this.props.toRight ? " toRight" : "")}>
                                 {
                                     this.props.items.map(m => {
                                         return (

diff --git a/Playground/src/scss/commandBar.scss b/Playground/src/scss/commandBar.scss
@@ -123,6 +123,11 @@
         transform: scale(1);
         z-index: 100;
 
+        &.toRight {
+            width: 120px;
+            right:0;
+        }        
+
         .command-dropdown-label {
             font-family: "acumin-pro-extra-condensed";
             color:white;