Merge pull request #6581 from Jaskar/testPG

Playground v4.2

Playground/css/img/logoTS.svg

@@ -1,41 +1,22 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
-<!--
-The MIT License (MIT)
-
-Copyright (c) 2015 Remo H. Jansen <remo.jansen@wolksoftware.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--->
-<rect width="630" height="630" fill="#000"/>
-<g transform="translate(0.000000,630.000000) scale(0.100000,-0.100000)"
-fill="#007ACC" stroke="none">
-<path d="M0 3150 l0 -3150 3150 0 3150 0 0 3150 0 3150 -3150 0 -3150 0 0
--3150z m5077 251 c160 -40 282 -111 394 -227 58 -62 144 -175 151 -202 2 -8
--272 -192 -438 -295 -6 -4 -30 22 -57 62 -81 118 -166 169 -296 178 -191 13
--314 -87 -313 -254 0 -49 7 -78 27 -118 42 -87 120 -139 365 -245 451 -194
-644 -322 764 -504 134 -203 164 -527 73 -768 -100 -262 -348 -440 -697 -499
--108 -19 -364 -16 -480 5 -253 45 -493 170 -641 334 -58 64 -171 231 -164 243
-3 4 29 20 58 37 28 16 134 77 234 135 l181 105 38 -56 c53 -81 169 -192 239
--229 201 -106 477 -91 613 31 58 53 82 108 82 189 0 73 -9 105 -47 160 -49 70
--149 129 -433 252 -325 140 -465 227 -593 365 -74 80 -144 208 -173 315 -24
-89 -30 312 -11 402 67 314 304 533 646 598 111 21 369 13 478 -14z m-1479
--263 l2 -258 -410 0 -410 0 0 -1165 0 -1165 -290 0 -290 0 0 1165 0 1165 -410
-0 -410 0 0 253 c0 140 3 257 7 260 3 4 502 6 1107 5 l1101 -3 3 -257z" />
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M491,400c-24.5-10.6-32.3-15.8-36.5-24.5c-2-4-2.7-6.9-2.7-11.8c-0.1-16.7,12.2-26.7,31.3-25.4
+		c13,0.9,21.5,6,29.6,17.8c2.7,4,5.1,6.6,5.7,6.2c16.6-10.3,44-28.7,43.8-29.5c-0.7-2.7-9.3-14-15.1-20.2
+		c-11.2-11.6-23.4-18.7-39.4-22.7c-10.9-2.7-36.7-3.5-47.8-1.4c-34.2,6.5-57.9,28.4-64.6,59.8c-1.9,9-1.3,31.3,1.1,40.2
+		c2.9,10.7,9.9,23.5,17.3,31.5c12.8,13.8,26.8,22.5,59.3,36.5c28.4,12.3,38.4,18.2,43.3,25.2c3.8,5.5,4.7,8.7,4.7,16
+		c0,8.1-2.4,13.6-8.2,18.9c-13.6,12.2-41.2,13.7-61.3,3.1c-7-3.7-18.6-14.8-23.9-22.9l-3.8-5.6l-18.1,10.5
+		c-10,5.8-20.6,11.9-23.4,13.5c-2.9,1.7-5.5,3.3-5.8,3.7c-0.7,1.2,10.6,17.9,16.4,24.3c14.8,16.4,38.8,28.9,64.1,33.4
+		c11.6,2.1,37.2,2.4,48,0.5c34.9-5.9,59.7-23.7,69.7-49.9c9.1-24.1,6.1-56.5-7.3-76.8C555.4,432.2,536.1,419.4,491,400z"/>
+	<path class="st0" d="M360,342l-0.2-25.8l-0.3-25.7l-110.1-0.3c-60.5-0.1-110.4,0.1-110.7,0.5c-0.4,0.3-0.7,12-0.7,26V342h41h41
+		v116.5V575h29h29V458.5V342h41H360z"/>
+</g>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+</svg>

Playground/css/index.css

@@ -6,7 +6,7 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    font-family: "acumin-pro";
+    font-family: "acumin-pro-condensed";
 }
 #waitDiv {
     position: absolute;
@@ -286,7 +286,6 @@ body {
     cursor: default;
     pointer-events: none;
     user-select: none;
-    box-shadow: 0 2px 5px #000;
 }
 .fpsLabel.languageJS {
     background-color: #3f3461;
@@ -306,7 +305,6 @@ body {
     user-select: none;
     position: relative;
     z-index:5;
-    box-shadow: 0 3px 10px #000;
 }
 .navbar a {
     text-decoration: none;
@@ -314,6 +312,7 @@ body {
 }
 .navbar .categoryTitle {
     display: inline-block;
+    width: 410px;
     vertical-align: top;
     background-color: #201936;
     padding-right: 20px;
@@ -324,7 +323,7 @@ body {
     float: left;
 }
 .navbar .version {
-    display: inline-block;
+    float: right;
     vertical-align: top;
     height: 55px;
     margin-right: 20px;
@@ -418,6 +417,7 @@ body {
     position: relative; 
 }
 .navbar .select .toDisplay {
+    font-family: "acumin-pro-extra-condensed";
     position: absolute;
     z-index: 10;
     right: 0;
@@ -446,7 +446,7 @@ body {
 .navbar .select .subSelect .toDisplaySub {
     position: absolute;
     z-index: 10;
-    right: 100%;
+    left: 100%;
     top: 0;
     min-width: 100%;
     display: none;
@@ -478,7 +478,7 @@ body {
 }
 
 .navbar .select .toDisplay .option {
-    font-size: 16px;
+    font-size: 20px;
     height: 35px;
     line-height: 35px;
     padding: 1px 5px 1px 15px;
@@ -656,7 +656,6 @@ body {
     border-radius: 4px;
     color: white;
     font-size: 14px;
-    box-shadow: 0 3px 10px #000;
 }
 .save-layer .save-form .separator {
     width: 350px;
@@ -683,11 +682,10 @@ body {
 
 /* Media queries */
 
-@media (min-width: 1180px) {
+@media (min-width: 1270px) {
     .navBar1280 { display: block; }
-    .navBar920 { display: none; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: none; }
 
     #qrCodeImage {
         height:auto;
@@ -699,11 +697,10 @@ body {
         column-count: 3;
     }
 }
-@media (max-width: 1180px) and (min-width: 920px) {
+@media (max-width: 1270px) and (min-width: 1025px) {
     .navBar1280 { display: none; }
-    .navBar920 { display: block; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
+    .navBar1024 { display: block; }
+    .navBarMobile { display: none; }
 
     #qrCodeImage {
         height:auto;
@@ -711,41 +708,15 @@ body {
         padding-bottom: 10px;
     }
 
-    .navbar .select .toDisplayBig ul {
-        column-count: 2;
+    .navbar .categoryTitle {
+        width: 315px;
     }
 
-    .navbar .category .buttonJStoTS {
-        width: 70px;
-    }
-}
-@media (max-width: 920px) {
-    .navBar1280 { display: none; }
-    .navBar920 { display: block; }
-    .navBar710 { display: none; }
-    .navBar550 { display: none; }
-    
     .navbar .select .toDisplayBig ul {
         column-count: 2;
     }
-    .navbar .categoryTitle {
-        padding-right: 15px;
-    }
-    .navbar .version {
-        margin-right: 10px;
-        margin-left: -10px;
-    }
-    .navbar .versionSub {
-        font-size: 14px;
-    }
-    .navbar .category .buttonJStoTS {
-        width: 65px;
-    }
 
-    .button {
-        width: 45px;
-    }
-    .buttonSpaceKiller {
-        display: inline-block;
+    .navbar .category .buttonJStoTS {
+        width: 70px;
     }
 }

Playground/css/index710.css

@@ -1,46 +0,0 @@
-@media (max-width: 710px) {
-    .navBar1280 { display: none; }
-    .navBar920 { display: none; }
-    .navBar710 { display: block; }
-    .navBar400 { display: none; }
-
-    .removeOnPhone {
-        display : none !important;
-    }
-
-    #fpsLabel {
-        top: 60px;
-    }
-    #exampleList {
-        width: 100%;
-    }
-
-    .navbar {
-        box-shadow: 0 2px 5px #000;
-    }
-
-    .navbarBottom .links .link a {
-        font-size: 14px;
-    }
-}
-
-.navbar.navBar710 .categoryTitle {
-    width: 155px;
-    height: 100%;
-    text-align: center;
-}
-.navbar.navBar710 .categoryTitle .logo {
-    margin-top: -7px;
-    margin-left: -5px;
-}
-.navbar.navBar710 .categoryTitle .version {
-    position: relative;
-    top: -35px;
-    left: 20px;
-}
-.navbar.navBar710 .select .toDisplayBig {
-    width:350px;
-}    
-.navbar.navBar710 .select .toDisplayBig ul {
-    column-count: 1;
-}

Playground/css/index550.css

@@ -1,11 +1,11 @@
-@media (max-width: 550px) {
+@media (max-width: 1025px) {
     .navBar1280 { display: none; }
-    .navBar920 { display: none; }
-    .navBar710 { display: none; }
-    .navBar550 { display: block; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: block; }
 
     #exampleList {
         height: calc(100% - 40px);
+        width: 100%;
         top: 40px;
         bottom: 0;
     }
@@ -20,13 +20,12 @@
     }
     #fpsLabel {
         position: fixed;
-        top: 40px;
+        top: 60px;
         right: 0;
         line-height: 32px;
         height: 35px;
         padding: 0;
         padding-right: 5px;
-        box-shadow: none;
     }
     .wrapper #jsEditor {
         width: 100%;
@@ -97,7 +96,7 @@
     .navbar .select img:hover {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
-    .navbar .select img:hover {
+    .navbar .select:hover img {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
     .navbar .select .toDisplay {
@@ -105,23 +104,32 @@
         left: 0;
         top: 40px;
         width: 180px;
-        height: auto;
+        height: 500px;
         min-height: 100px;
         max-height: calc(100% - 40px);
         text-align: left;
         overflow-y: auto;
+        overflow-x: hidden;
     }
     .navbar .select .toDisplay.languageJS .option {
         background-color: #3f3461;
     }
+    .navbar .select .toDisplay.languageJS .option:active {
+        background-color: #9379e6;
+    }
     .navbar .select .toDisplay.languageTS .option {
         background-color: #bb464b;
     }
+    .navbar .select .toDisplay.languageTS .option:active {
+        background-color: #e0684b;
+    }
     .navbar .select .toDisplay .option {
         padding: 1px;
         font-size: 15px;
         height: 33px;
         line-height: 33px;
+        width: 180px;
+        box-sizing: border-box;
     }
     .navbar .select .toDisplay .option  img {
         float: left;
@@ -137,16 +145,19 @@
 
     .navbar .select .subSelect .toDisplaySub {
         position: fixed;
-        top: 75px;
+        top: 40px;
         left: 180px;
         min-width: 180px;
         width: 180px;
         height: auto;
-        max-height: calc(100% - 55px);
         text-align: left;
-        overflow-y: auto;
+        overflow: hidden;
         color: white;
     }
+    .navbar .select .subSelect .toDisplaySub .option {
+        padding-left: 5px;
+        box-sizing: border-box;
+    }
     .navbar .select .subSelect .toDisplaySub.languageJS {
         background-color: #9379e6;
     }

Playground/debug.html

@@ -37,7 +37,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
@@ -108,344 +108,6 @@
 </head>
 
 <body>
-    <!-- TO DO : Be sure this can be removed -->
-    <!-- <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-            v3.0-alpha
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-            v3.0-alpha
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1475">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1030">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div> -->
-
     <!-- Big screens -->
     <div class="navbar navBar1280 languageJS">
         <div class="categoryTitle">
@@ -472,12 +134,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
@@ -519,51 +181,51 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <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>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -572,17 +234,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -592,139 +254,62 @@
         </div>
     </div>
 
-    <!-- Little screens -->
-    <div class="navbar navBar710 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
-        </div>
-
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme710">Dark</div>
-                            <div class="option" id="lightTheme710">Light</div>
-                        </div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton710">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton710">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle710">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
                     </div>
-                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion710">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
-                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
                                 <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
@@ -745,17 +330,25 @@
                     </div>
                 </div>
             </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -767,9 +360,9 @@
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
-            <h1>Examples</h1>
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
@@ -804,7 +397,7 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <div class="save-form languageJS ">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -818,9 +411,8 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
@@ -841,9 +433,14 @@
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <!-- Main scripts -->
-    <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/index-local.html

@@ -4,7 +4,7 @@
 <!--
     The purpose of the index-local.html file is to ???
     // TO DO - Complete that
-    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)"
+    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)". File exist, Wamp can't read it
  -->
 
 <head>
@@ -16,7 +16,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
@@ -68,12 +68,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
@@ -115,51 +115,51 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <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>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -168,17 +168,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -188,139 +188,62 @@
         </div>
     </div>
 
-    <!-- Little screens -->
-    <div class="navbar navBar710 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
-        </div>
-
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme710">Dark</div>
-                            <div class="option" id="lightTheme710">Light</div>
-                        </div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton710">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton710">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle710">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion710">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
-                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
                                 <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
@@ -341,17 +264,25 @@
                     </div>
                 </div>
             </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -365,7 +296,7 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples</h1>
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
@@ -437,10 +368,21 @@
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
+    <!-- jQuery -->
+    <script src="js/libs/jquery.min.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+
     <!-- Main scripts -->
-    <script src="js/actions.js"></script>
-    <script src="js/libs/typescript.js"></script>
     <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
+    <script src="js/index.js"></script>
     
     <script>
         BABYLONDEVTOOLS.Loader

Playground/index.html

@@ -9,8 +9,7 @@
 
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/index_mobile.css" />
 
     <!-- Pep -->
     <script src="js/libs/pep.min.js"></script>
@@ -127,29 +126,29 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
@@ -162,16 +161,16 @@
                             <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <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>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
@@ -180,91 +179,17 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Little screens -->
-    <div class="navbar navBar710 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme710">Dark</div>
-                            <div class="option" id="lightTheme710">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton710">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton710">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle710">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion710">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -275,24 +200,24 @@
     </div>
 
     <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
+    <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
             <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbutton550"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbutton550"><img src="css/img/logoJS.svg">JavaScript</div>
-                    <div class="option noSubSelect run" id="runButton550"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButton550"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButton550"><img src="css/img/downloadButton.svg">Download
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option noSubSelect" id="newButton550"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButton550"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButton550"><img src="css/img/inspectorButton.svg">Inspector
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
@@ -307,17 +232,17 @@
                             <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div style="display: none;" class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option checked noSubSelect" id="editorButton550">Editor
+                    <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="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550"><img src="css/img/optionsButton.svg">Format code</div>
-                    <div style="display: none;" class="option nosubselect" id="minimapToggle550">Minimap
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
@@ -325,7 +250,7 @@
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option nosubselect" id="metadataButton550"><img
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
                             src="css/img/examplesButton.svg">Examples</div>
@@ -352,13 +277,13 @@
             </div>
             <div class="categoryTitle">
                 <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -462,6 +387,7 @@
     <script src="js/settingsPG.js"></script>
     <script src="js/menuPG.js"></script>
     <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/indexStable.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
     <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="css/index710.css" />
-    <link rel="stylesheet" href="css/index550.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
 
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
@@ -84,12 +84,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
@@ -104,7 +104,8 @@
                     <div class="option noSubSelect" id="minimapToggle1280">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -130,69 +131,70 @@
     </div>
 
     <!-- Mid-size screens -->
-    <div class="navbar navBar920 languageJS">
+    <div class="navbar navBar1024 languageJS">
         <div class="categoryTitle">
             <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
             <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+            <div class="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
             <div class="button select"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme920">Dark</div>
-                            <div class="option" id="lightTheme920">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton920">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                    <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>
+                    <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion920">v.</span>
+                <span id="currentVersion1024">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
@@ -202,136 +204,62 @@
         </div>
     </div>
 
-    <!-- Little screens -->
-    <div class="navbar navBar710 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
-        </div>
-
+    <!-- Mobile -->
+    <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                        <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme710">Dark</div>
-                            <div class="option" id="lightTheme710">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked noSubSelect" id="editorButton710">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
-                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
-                    <div class="option noSubSelect" id="formatButton710">Format code</div>
-                    <div class="option noSubSelect" id="minimapToggle710">Minimap
-                        <i class="fa fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
-                        </div>
-                    </div>
-                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select" style="display: none;">
-                <span id="currentVersion710">v.</span>
-                <div class="toDisplay currentVersionDisplay">
-                    <div class="option" onclick="setVersion('4.0');">4.0</div>
-                    <div class="option" onclick="setVersion('3.0');">3.0</div>
-                </div>
-            </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
-        </div>
-    </div>
-
-    <!-- Mobile -->
-    <div class="navbar navBar550 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
-        </div>
-
-        <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option selected" id="darkTheme550">Dark</div>
-                            <div class="option" id="lightTheme550">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
-                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="metadataButtonMobile"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
                                 <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
@@ -352,17 +280,25 @@
                     </div>
                 </div>
             </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+            </div>
         </div>
 
         <div class="category right">
             <div class="button select" style="display: none;">
-                <span id="currentVersion550">v.</span>
+                <span id="currentVersionMobile">v.</span>
                 <div class="toDisplay currentVersionDisplay">
                     <div class="option" onclick="setVersion('4.0');">4.0</div>
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -376,11 +312,12 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples</h1>
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
@@ -447,15 +384,20 @@
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
-    <!-- TO DO : Comment this. What is it ? -->
+    <!-- TO DO : Why is this a split here ? It's already in the JS code -->
     <script>
         Split(['#jsEditor', '#canvasZone']);
     </script>
 
-<!-- Main scripts -->
-    <script src="js/actions.js"></script>
+    <!-- Main scripts -->
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/js/examples.js

@@ -70,7 +70,7 @@ class Examples {
     /**
      * Function to display the examples menu
      */
-    displayExamples = function() {
+    displayExamples() {
         this.isExamplesDisplayed = true;
         document.getElementById("fpsLabel").style.display = "none";
         document.getElementById("exampleList").style.display = "block";
@@ -84,7 +84,7 @@ class Examples {
     /**
      * Function to hide the examples menu
      */
-    hideExamples = function() {
+    hideExamples() {
         this.isExamplesDisplayed = false;
         document.getElementById("fpsLabel").style.display = "block";
         document.getElementById("exampleList").style.display = "none";

Playground/js/frame.js

@@ -8,7 +8,7 @@
     var refreshAnchor = document.getElementById("refresh");
     var editAnchor = document.getElementById("edit");
     var scripts;
-    var zipCode;
+    var zipCode; // TO DO - Rewrite frame.js with classes ... And zipTool.js
 
     if (location.href.toLowerCase().indexOf("noui") > -1) {
         fpsLabel.style.visibility = "hidden";

Playground/js/index.js

@@ -3,109 +3,20 @@ utils = new Utils();
 monacoCreator = new MonacoCreator();
 settingsPG = new SettingsPG(monacoCreator);
 menuPG = new MenuPG();
-
-/**
- * Apply things to the differents menu sizes
- */
-var multipleSize = [1280, 920, 710, 550];
-var setToMultipleID = function (id, thingToDo, param) {
-    multipleSize.forEach(function (size) {
-        if (thingToDo == "innerHTML") {
-            document.getElementById(id + size).innerHTML = param
-        }
-        else if (thingToDo == "click") {
-            if (param.length > 1) {
-                for (var i = 0; i < param.length; i++) {
-                    document.getElementById(id + size).addEventListener("click", param[i]);
-                }
-            }
-            else
-                document.getElementById(id + size).addEventListener("click", param);
-        }
-        else if (thingToDo == "addClass") {
-            document.getElementById(id + size).classList.add(param);
-        }
-        else if (thingToDo == "removeClass") {
-            document.getElementById(id + size).classList.remove(param);
-        }
-        else if (thingToDo == "display") {
-            document.getElementById(id + size).style.display = param;
-        }
-    });
-};
+zipTool = new zipTool();
 
 /**
  * View split
  */
 var splitInstance = Split(['#jsEditor', '#canvasZone']);
 
-/**
- * Language of the script
- */
-if (settingsPG.scriptLanguage == "TS") {
-    var compilerTriggerTimeoutID;
-    function triggerCompile(d, func) {
-        if (compilerTriggerTimeoutID !== null) {
-            window.clearTimeout(compilerTriggerTimeoutID);
-        }
-        compilerTriggerTimeoutID = window.setTimeout(function () {
-            try {
-
-                var output = transpileModule(d, {
-                    module: ts.ModuleKind.AMD,
-                    target: ts.ScriptTarget.ES5,
-                    noLib: true,
-                    noResolve: true,
-                    suppressOutputPathCheck: true
-                });
-                if (typeof output === "string") {
-                    func(output);
-                }
-            }
-            catch (e) {
-                utils.showError(e.message, e);
-            }
-        }, 100);
-    }
-    function transpileModule(input, options) {
-        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
-        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
-        // Output
-        var outputText;
-        var program = ts.createProgram([inputFileName], options, {
-            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
-            writeFile: function (_name, text) { outputText = text; },
-            getDefaultLibFileName: function () { return "lib.d.ts"; },
-            useCaseSensitiveFileNames: function () { return false; },
-            getCanonicalFileName: function (fileName) { return fileName; },
-            getCurrentDirectory: function () { return ""; },
-            getNewLine: function () { return "\r\n"; },
-            fileExists: function (fileName) { return fileName === inputFileName; },
-            readFile: function () { return ""; },
-            directoryExists: function () { return true; },
-            getDirectories: function () { return []; }
-        });
-        // Emit
-        program.emit();
-        if (outputText === undefined) {
-            throw new Error("Output generation failed");
-        }
-        return outputText;
-    }
-    function getRunCode(callBack) {
-        triggerCompile(monacoCreator.JsEditor.getValue(), function (result) {
-            callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
-        });
-    }
-
-}
-
-
-function getRunCode(callBack) {
-    var code = monacoCreator.JsEditor.getValue();
-    callBack(code);
-}
-
+// TO DO - Make it work on small screens and mobile
+showQRCode = function () {
+    $("#qrCodeImage").empty();
+    var playgroundCode = window.location.href.split("#");
+    playgroundCode.shift();
+    $("#qrCodeImage").qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
+};
 
 var run = function () {
 
@@ -117,14 +28,21 @@ var run = function () {
     var engine;
     var fpsLabel = document.getElementById("fpsLabel");
     var scripts;
-    var zipCode;
     BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
+    window.addEventListener("resize",
+        function () {
+            if (engine) {
+                engine.resize();
+            }
+        }
+    );
+
     // TO DO : Rewrite this with unpkg.com
     if (location.href.indexOf("indexStable") !== -1) {
-        setToMultipleID("currentVersion", "innerHTML", "v.3.0");
+        utils.setToMultipleID("currentVersion", "innerHTML", "v.3.0");
     } else {
-        setToMultipleID("currentVersion", "innerHTML", "v.4.0");
+        utils.setToMultipleID("currentVersion", "innerHTML", "v.4.0");
     }
 
     var checkTypescriptSupport = function (xhr) {
@@ -143,7 +61,7 @@ var run = function () {
             }
         }
         return true;
-    }
+    };
 
     var loadScript = function (scriptURL, title) {
         var xhr = new XMLHttpRequest();
@@ -328,24 +246,12 @@ var run = function () {
                     settingsPG.restoreTheme(monacoCreator);
                     // Restore language
                     settingsPG.setScriptLanguage();
-
-                    // TO DO - Check why this doesn't work.
-                    // // Remove editor if window size is less than 850px
-                    // var removeEditorForSmallScreen = function () {
-                    //     if (mq.matches) {
-                    //         splitInstance.collapse(0);
-                    //     } else {
-                    //         splitInstance.setSizes([50, 50]);
-                    //     }
-                    // }
-                    // var mq = window.matchMedia("(max-width: 850px)");
-                    // mq.addListener(removeEditorForSmallScreen);
                 }
             }
         };
 
         xhr.send(null);
-    }
+    };
 
     var createNewScript = function () {
         // check if checked is on
@@ -365,7 +271,7 @@ var run = function () {
         monacoCreator.JsEditor.setPosition({ lineNumber: 11, column: 0 });
         monacoCreator.JsEditor.focus();
         compileAndRun();
-    }
+    };
 
     var clear = function () {
         // check if checked is on
@@ -376,7 +282,7 @@ var run = function () {
         monacoCreator.JsEditor.setValue('');
         monacoCreator.JsEditor.setPosition({ lineNumber: 0, column: 0 });
         monacoCreator.JsEditor.focus();
-    }
+    };
 
     // TO DO - Is this really usefull ? Safe mode only available in full HD screen, not for small screen ? Why ?!
     var checkSafeMode = function (message) {
@@ -392,8 +298,11 @@ var run = function () {
         } else {
             return true;
         }
-    }
+    };
 
+    /**
+     * Metadatas form
+     */
     var showNoMetadata = function () {
         if (currentSnippetTitle) {
             document.getElementById("saveFormTitle").value = currentSnippetTitle;
@@ -422,17 +331,86 @@ var run = function () {
         document.getElementById("saveFormButtons").style.display = "block";
         document.getElementById("saveFormButtonOk").style.display = "inline-block";
     };
-    showNoMetadata();
-
     var hideNoMetadata = function () {
         document.getElementById("saveFormTitle").readOnly = true;
         document.getElementById("saveFormDescription").readOnly = true;
         document.getElementById("saveFormTags").readOnly = true;
         document.getElementById("saveFormButtonOk").style.display = "none";
-        setToMultipleID("metadataButton", "display", "inline-block");
+        utils.setToMultipleID("metadataButton", "display", "inline-block");
+    };
+    showNoMetadata();
+    
+    /*
+     * Metadatas save
+     */
+    // TO DO - Search what is the appropriate place for this code
+    var save = function () {
+
+        // Retrieve title if necessary
+        if (document.getElementById("saveLayer")) {
+            currentSnippetTitle = document.getElementById("saveFormTitle").value;
+            currentSnippetDescription = document.getElementById("saveFormDescription").value;
+            currentSnippetTags = document.getElementById("saveFormTags").value;
+        }
+
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = function () {
+            if (xmlHttp.readyState === 4) {
+                if (xmlHttp.status === 200) {
+                    var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
+                    var snippet = JSON.parse(xmlHttp.responseText);
+                    var newUrl = baseUrl + "#" + snippet.id;
+                    currentSnippetToken = snippet.id;
+                    if (snippet.version && snippet.version !== "0") {
+                        newUrl += "#" + snippet.version;
+                    }
+                    location.href = newUrl;
+                    // Hide the complete title & co message
+                    hideNoMetadata();
+                    compileAndRun();
+                } else {
+                    utils.showError("Unable to save your code. It may be too long.", null);
+                }
+            }
+        }
+
+        xmlHttp.open("POST", snippetV3Url + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+
+        var dataToSend = {
+            payload: JSON.stringify({
+                code: monacoCreator.JsEditor.getValue()
+            }),
+            name: currentSnippetTitle,
+            description: currentSnippetDescription,
+            tags: currentSnippetTags
+        };
+
+        xmlHttp.send(JSON.stringify(dataToSend));
     };
+    var askForSave = function () {
+        if (currentSnippetTitle == null
+            || currentSnippetDescription == null
+            || currentSnippetTags == null) {
 
-    compileAndRun = function () {
+            document.getElementById("saveLayer").style.display = "block";
+        }
+        else {
+            save();
+        }
+    };
+    document.getElementById("saveFormButtonOk").addEventListener("click", function () {
+        document.getElementById("saveLayer").style.display = "none";
+        save();
+    });
+    document.getElementById("saveFormButtonCancel").addEventListener("click", function () {
+        document.getElementById("saveLayer").style.display = "none";
+    });
+
+    /**
+     * Compile the script in the editor, and run the preview in the canvas
+     */
+    var compileAndRun = function () {
         try {
             var waitRing = document.getElementById("waitDiv");
             if (waitRing) {
@@ -466,7 +444,7 @@ var run = function () {
             var createEngineFunction = "createDefaultEngine";
             var createSceneFunction;
 
-            getRunCode(function (code) {
+            monacoCreator.getRunCode(function (code) {
                 var createDefaultEngine = function () {
                     return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
                 }
@@ -497,7 +475,7 @@ var run = function () {
                     eval("runScript = function(scene, canvas) {" + code + "}");
                     runScript(scene, canvas);
 
-                    zipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+                    zipTool.ZipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
                 } else {
                     //execute the code
                     eval(code);
@@ -526,7 +504,7 @@ var run = function () {
                         ? "createEngine()"
                         : defaultEngineZip;
 
-                    zipCode =
+                    zipTool.zipCode =
                         code + "\r\n\r\n" +
                         "var engine = " + createEngineZip + ";\r\n" +
                         "var scene = " + createSceneFunction + "();";
@@ -595,190 +573,11 @@ var run = function () {
         }
     };
 
-    window.addEventListener("resize",
-        function () {
-            if (engine) {
-                engine.resize();
-            }
-        });
-
-    // Load scripts list
-    loadScriptsList();
-
-    // Zip
-    var addContentToZip = function (zip, name, url, replace, buffer, then) {
-        if (url.substring(0, 5) == "data:" || url.substring(0, 5) == "http:" || url.substring(0, 5) == "blob:" || url.substring(0, 6) == "https:") {
-            then();
-            return;
-        }
-
-        var xhr = new XMLHttpRequest();
-
-        xhr.open('GET', url, true);
-
-        if (buffer) {
-            xhr.responseType = "arraybuffer";
-        }
-
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-                if (xhr.status === 200) {
-                    var text;
-                    if (!buffer) {
-                        if (replace) {
-                            var splits = replace.split("\r\n");
-                            for (var index = 0; index < splits.length; index++) {
-                                splits[index] = "        " + splits[index];
-                            }
-                            replace = splits.join("\r\n");
-
-                            text = xhr.responseText.replace("####INJECT####", replace);
-                        } else {
-                            text = xhr.responseText;
-                        }
-                    }
-
-                    zip.file(name, buffer ? xhr.response : text);
-
-                    then();
-                }
-            }
-        };
-
-        xhr.send(null);
-    }
-
-    var addTexturesToZip = function (zip, index, textures, folder, then) {
-
-        if (index === textures.length || !textures[index].name) {
-            then();
-            return;
-        }
-
-        if (textures[index].isRenderTarget || textures[index] instanceof BABYLON.DynamicTexture || textures[index].name.indexOf("data:") !== -1) {
-            addTexturesToZip(zip, index + 1, textures, folder, then);
-            return;
-        }
-
-        if (textures[index].isCube) {
-            if (textures[index].name.indexOf("dds") === -1) {
-                if (textures[index]._extensions) {
-                    for (var i = 0; i < 6; i++) {
-                        textures.push({ name: textures[index].name + textures[index]._extensions[i] });
-                    }
-                } else if (textures[index]._files) {
-                    for (var i = 0; i < 6; i++) {
-                        textures.push({ name: textures[index]._files[i] });
-                    }
-                }
-            }
-            else {
-                textures.push({ name: textures[index].name });
-            }
-            addTexturesToZip(zip, index + 1, textures, folder, then);
-            return;
-        }
-
-
-        if (folder == null) {
-            folder = zip.folder("textures");
-        }
-        var url;
-
-        if (textures[index].video) {
-            url = textures[index].video.currentSrc;
-        } else {
-            // url = textures[index].name;
-            url = textures[index].url ? textures[index].url : textures[index].name;
-        }
-
-        var name = textures[index].name.replace("textures/", "");
-        // var name = url.substr(url.lastIndexOf("/") + 1);
-
-        if (url != null) {
-            addContentToZip(folder,
-                name,
-                url,
-                null,
-                true,
-                function () {
-                    addTexturesToZip(zip, index + 1, textures, folder, then);
-                });
-        }
-        else {
-            addTexturesToZip(zip, index + 1, textures, folder, then);
-        }
-    }
-
-    var addImportedFilesToZip = function (zip, index, importedFiles, folder, then) {
-        if (index === importedFiles.length) {
-            then();
-            return;
-        }
-
-        if (!folder) {
-            folder = zip.folder("scenes");
-        }
-        var url = importedFiles[index];
-
-        var name = url.substr(url.lastIndexOf("/") + 1);
-
-        addContentToZip(folder,
-            name,
-            url,
-            null,
-            true,
-            function () {
-                addImportedFilesToZip(zip, index + 1, importedFiles, folder, then);
-            });
-    }
-
-    var getZip = function () {
-        if (engine.scenes.length === 0) {
-            return;
-        }
-
-        var zip = new JSZip();
-
-        var scene = engine.scenes[0];
-
-        var textures = scene.textures;
-
-        var importedFiles = scene.importedMeshesFiles;
-
-        document.getElementById("statusBar").innerHTML = "Creating archive... Please wait.";
-
-        if (zipCode.indexOf("textures/worldHeightMap.jpg") !== -1) {
-            textures.push({ name: "textures/worldHeightMap.jpg" });
-        }
-
-        addContentToZip(zip,
-            "index.html",
-            "zipContent/index.html",
-            zipCode,
-            false,
-            function () {
-                addTexturesToZip(zip,
-                    0,
-                    textures,
-                    null,
-                    function () {
-                        addImportedFilesToZip(zip,
-                            0,
-                            importedFiles,
-                            null,
-                            function () {
-                                var blob = zip.generate({ type: "blob" });
-                                saveAs(blob, "sample.zip");
-                                document.getElementById("statusBar").innerHTML = "";
-                            });
-                    });
-            });
-    }
-
-    // Versions
+    /**
+     * BJS version
+     */
     // TO DO - Rewrite that
-    setVersion = function (version) {
+    var setVersion = function (version) {
         // switch (version) {
         //     case "stable":
         //         location.href = "indexStable.html" + location.hash;
@@ -788,62 +587,24 @@ var run = function () {
         //         break;
         // }
     }
+    utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
 
-    // TO DO - Make it work on small screens and mobile
-    showQRCode = function () {
-        $("#qrCodeImage").empty();
-        var playgroundCode = window.location.href.split("#");
-        playgroundCode.shift();
-        $("#qrCodeImage").qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
-    };
-
-    // Fullscreen
-    document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
-        if (document.webkitIsFullScreen) goFullPage();
-        else exitFullPage();
-    }, false);
-
-    var goFullPage = function () {
-        var canvasElement = document.getElementById("renderCanvas");
-        canvasElement.style.position = "absolute";
-        canvasElement.style.top = 0;
-        canvasElement.style.left = 0;
-        canvasElement.style.zIndex = 100;
-    }
-    var exitFullPage = function () {
-        document.getElementById("renderCanvas").style.position = "relative";
-        document.getElementById("renderCanvas").style.zIndex = 0;
-    }
-    var goFullscreen = function () {
-        if (engine) {
-            engine.switchFullscreen(true);
-        }
-    }
-    var editorGoFullscreen = function () {
-        var editorDiv = document.getElementById("jsEditor");
-        if (editorDiv.requestFullscreen) {
-            editorDiv.requestFullscreen();
-        } else if (editorDiv.mozRequestFullScreen) {
-            editorDiv.mozRequestFullScreen();
-        } else if (editorDiv.webkitRequestFullscreen) {
-            editorDiv.webkitRequestFullscreen();
-        }
-
-    }
-
+    /**
+     * Toggle the code editor
+     */
     var toggleEditor = function () {
         var editorButton = document.getElementById("editorButton1280");
         var scene = engine.scenes[0];
 
         // If the editor is present
         if (editorButton.classList.contains('checked')) {
-            setToMultipleID("editorButton", "removeClass", 'checked');
+            utils.setToMultipleID("editorButton", "removeClass", 'checked');
             splitInstance.collapse(0);
-            setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-square" aria-hidden="true"></i>');
+            utils.setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-square" aria-hidden="true"></i>');
         } else {
-            setToMultipleID("editorButton", "addClass", 'checked');
+            utils.setToMultipleID("editorButton", "addClass", 'checked');
             splitInstance.setSizes([50, 50]);  // Reset
-            setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>');
+            utils.setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
         engine.resize();
 
@@ -852,8 +613,9 @@ var run = function () {
         }
     }
 
-    
-
+    /**
+     * Toggle the BJS debug layer
+     */
     var toggleDebug = function () {
         // Always showing the debug layer, because you can close it by itself
         var scene = engine.scenes[0];
@@ -865,111 +627,14 @@ var run = function () {
         }
     }
 
-    var toggleMetadata = function () {
-        document.getElementById("saveLayer").style.display = "block";
-    }
-
-    var formatCode = function () {
-        monacoCreator.JsEditor.getAction('editor.action.formatDocument').run();
-    }
-
-    var toggleMinimap = function () {
-        var minimapToggle = document.getElementById("minimapToggle1280");
-        if (minimapToggle.classList.contains('checked')) {
-            monacoCreator.JsEditor.updateOptions({ minimap: { enabled: false } });
-            setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
-        } else {
-            monacoCreator.JsEditor.updateOptions({ minimap: { enabled: true } });
-            setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
-        }
-        minimapToggle.classList.toggle('checked');
-    }
-
-
-    //Navigation Overwrites
-    var exitPrompt = function (e) {
-        var safeToggle = document.getElementById("safemodeToggle1280");
-        if (safeToggle.classList.contains('checked')) {
-            e = e || window.event;
-            var message =
-                'This page is asking you to confirm that you want to leave - data you have entered may not be saved.';
-            if (e) {
-                e.returnValue = message;
-            }
-            return message;
-        }
-    };
-
-    window.onbeforeunload = exitPrompt;
-
-    // Snippet
-    var save = function () {
-
-        // Retrieve title if necessary
-        if (document.getElementById("saveLayer")) {
-            currentSnippetTitle = document.getElementById("saveFormTitle").value;
-            currentSnippetDescription = document.getElementById("saveFormDescription").value;
-            currentSnippetTags = document.getElementById("saveFormTags").value;
-        }
-
-        var xmlHttp = new XMLHttpRequest();
-        xmlHttp.onreadystatechange = function () {
-            if (xmlHttp.readyState === 4) {
-                if (xmlHttp.status === 200) {
-                    var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
-                    var snippet = JSON.parse(xmlHttp.responseText);
-                    var newUrl = baseUrl + "#" + snippet.id;
-                    currentSnippetToken = snippet.id;
-                    if (snippet.version && snippet.version !== "0") {
-                        newUrl += "#" + snippet.version;
-                    }
-                    location.href = newUrl;
-                    // Hide the complete title & co message
-                    hideNoMetadata();
-                    compileAndRun();
-                } else {
-                    utils.showError("Unable to save your code. It may be too long.", null);
-                }
-            }
-        }
-
-        xmlHttp.open("POST", snippetV3Url + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
-        xmlHttp.setRequestHeader("Content-Type", "application/json");
-
-        var dataToSend = {
-            payload: JSON.stringify({
-                code: monacoCreator.JsEditor.getValue()
-            }),
-            name: currentSnippetTitle,
-            description: currentSnippetDescription,
-            tags: currentSnippetTags
-        };
-
-        xmlHttp.send(JSON.stringify(dataToSend));
-    }
-
-    var askForSave = function () {
-        if (currentSnippetTitle == null
-            || currentSnippetDescription == null
-            || currentSnippetTags == null) {
-
-            document.getElementById("saveLayer").style.display = "block";
-        }
-        else {
-            save();
-        }
-    };
-    document.getElementById("saveFormButtonOk").addEventListener("click", function () {
-        document.getElementById("saveLayer").style.display = "none";
-        save();
-    });
-    document.getElementById("saveFormButtonCancel").addEventListener("click", function () {
-        document.getElementById("saveLayer").style.display = "none";
-    });
-    setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
+    // Load scripts list
+    loadScriptsList();
 
+    /**
+     * HASH part
+     */
+    // TO DO - Rewrite / move this code
     var previousHash = "";
-
     var cleanHash = function () {
         var splits = decodeURIComponent(location.hash.substr(1)).split("#");
 
@@ -979,7 +644,6 @@ var run = function () {
 
         location.hash = splits.join("#");
     }
-
     var checkHash = function (firstTime) {
         if (location.hash) {
             if (previousHash !== location.hash) {
@@ -1036,7 +700,7 @@ var run = function () {
                                 monacoCreator.BlockEditorChange = false;
                                 compileAndRun();
 
-                                // setToMultipleID("currentScript", "innerHTML", "Custom");
+                                // utils.setToMultipleID("currentScript", "innerHTML", "Custom");
                             }
                         }
                     };
@@ -1055,25 +719,27 @@ var run = function () {
         }
         setTimeout(checkHash, 200);
     }
-
     checkHash(true);
 
 
     // ---------- UI
+    // TO DO - A proper UI class
 
     // Run
-    setToMultipleID("runButton", "click", compileAndRun);
+    utils.setToMultipleID("runButton", "click", compileAndRun);
     // New
-    setToMultipleID("newButton", "click", createNewScript);
+    utils.setToMultipleID("newButton", "click", createNewScript);
     // Clear 
-    setToMultipleID("clearButton", "click", clear);
+    utils.setToMultipleID("clearButton", "click", clear);
     // Save
-    setToMultipleID("saveButton", "click", askForSave);
+    utils.setToMultipleID("saveButton", "click", askForSave);
     // Zip
-    setToMultipleID("zipButton", "click", getZip);
-    // // Themes
-    setToMultipleID("darkTheme", "click", [settingsPG.setTheme.bind(settingsPG, 'dark'), menuPG.clickOptionSub.bind(menuPG)]);
-    setToMultipleID("lightTheme", "click", [settingsPG.setTheme.bind(settingsPG, 'light'), menuPG.clickOptionSub.bind(menuPG)]);
+    utils.setToMultipleID("zipButton", "click", function() {
+        zipTool.getZip(engine);
+    });
+    // Themes
+    utils.setToMultipleID("darkTheme", "click", [settingsPG.setTheme.bind(settingsPG, 'dark'), menuPG.clickOptionSub.bind(menuPG)]);
+    utils.setToMultipleID("lightTheme", "click", [settingsPG.setTheme.bind(settingsPG, 'light'), menuPG.clickOptionSub.bind(menuPG)]);
     // Size
     var displayFontSize = document.getElementsByClassName('displayFontSize');
     for (var i = 0; i < displayFontSize.length; i++) {
@@ -1092,43 +758,43 @@ var run = function () {
         }
     }
     // Language (JS / TS)
-    setToMultipleID("toTSbutton", "click", function () {
+    utils.setToMultipleID("toTSbutton", "click", function () {
         settingsPG.ScriptLanguage = "TS";
         location.reload();
     });
-    setToMultipleID("toJSbutton", "click", function () {
+    utils.setToMultipleID("toJSbutton", "click", function () {
         settingsPG.ScriptLanguage = "JS";
         location.reload();
     });
     // Safe mode
-    setToMultipleID("safemodeToggle", 'click', function () {
+    utils.setToMultipleID("safemodeToggle", 'click', function () {
         document.getElementById("safemodeToggle1280").classList.toggle('checked');
         if (document.getElementById("safemodeToggle1280").classList.contains('checked')) {
-            setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+            utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
         } else {
-            setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
+            utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
         }
     });
     // Editor
-    setToMultipleID("editorButton", "click", toggleEditor);
+    utils.setToMultipleID("editorButton", "click", toggleEditor);
     // FullScreen
-    setToMultipleID("fullscreenButton", "click", goFullscreen);
+    utils.setToMultipleID("fullscreenButton", "click", menuPG.goFullscreen);
     // Editor fullScreen
-    setToMultipleID("editorFullscreenButton", "click", editorGoFullscreen);
+    utils.setToMultipleID("editorFullscreenButton", "click", menuPG.editorGoFullscreen);
     // Format
-    setToMultipleID("formatButton", "click", formatCode);
+    utils.setToMultipleID("formatButton", "click", monacoCreator.formatCode.bind(monacoCreator));
     // Format
-    setToMultipleID("minimapToggle", "click", toggleMinimap);
+    utils.setToMultipleID("minimapToggle", "click", monacoCreator.toggleMinimap.bind(monacoCreator));
     // Debug
-    setToMultipleID("debugButton", "click", toggleDebug);
+    utils.setToMultipleID("debugButton", "click", toggleDebug);
     // Metadata
-    setToMultipleID("metadataButton", "click", toggleMetadata);
+    utils.setToMultipleID("metadataButton", "click", menuPG.displayMetadata);
 
     // Restore theme
     settingsPG.restoreTheme(monacoCreator);
     // Restore language
     settingsPG.setScriptLanguage();
-
+    //
     menuPG.resizeBigCanvas();
 }
 

Playground/js/menuPG.js

@@ -9,31 +9,53 @@ class MenuPG {
         this.allSubItems = document.querySelectorAll('.toDisplaySub');
         this.allSubSelect = document.querySelectorAll('.subSelect');
         this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
-        
+
         this.jsEditorElement = document.getElementById('jsEditor');
         this.canvasZoneElement = document.getElementById('canvasZone');
         this.switchWrapperCode = document.getElementById('switchWrapperCode');
         this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
         this.fpsLabelElement = document.getElementById('fpsLabel');
-        this.navBar550 = document.getElementsByClassName('navBar550')[0];
-        
+        this.navBarMobile = document.getElementsByClassName('navBarMobile')[0];
+
+        // Check if mobile version
+        this.isMobileVersion = false;
+        if (this.navBarMobile.offsetHeight > 0) this.isMobileVersion = true;
+        window.onresize = function () {
+            if (!this.isMobileVersion && this.navBarMobile.offsetHeight > 0) {
+                this.isMobileVersion = true;
+                this.resizeBigCanvas();
+            }
+            else if (this.isMobileVersion && this.navBarMobile.offsetHeight == 0) {
+                this.isMobileVersion = false;
+                this.resizeSplitted();
+            }
+        }.bind(this);
+
+        // Click on BJS logo redirection to BJS homepage
+        let logos = document.getElementsByClassName('logo');
+        for (var i = 0; i < logos.length; i++) {
+            logos[i].addEventListener('click', function () {
+                window.open("https://babylonjs.com", "_target");
+            });
+        }
+
         // On click anywhere, remove displayed options
         window.addEventListener('click', this.removeallOptions);
 
         // In mobile mode, resize JSEditor and canvas
         this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
         this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
-        document.getElementById('runButton550').addEventListener('click', this.resizeBigCanvas.bind(this));
-        
+        document.getElementById('runButtonMobile').addEventListener('click', this.resizeBigCanvas.bind(this));
+
         // Code editor by default.
         // TO DO - Check why it doesn't work.
-        if(this.navBar550.offsetHeight > 0) this.resizeBigJsEditor();
-        
+        if (this.navBarMobile.offsetHeight > 0) this.resizeBigJsEditor();
+
         // Handle click on select elements
         for (var index = 0; index < this.allSelect.length; index++) {
             this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
         }
-        
+
         // Handle mouseover / click on subSelect
         for (var index = 0; index < this.allSubSelect.length; index++) {
             var ss = this.allSubSelect[index];
@@ -44,18 +66,27 @@ class MenuPG {
             var ss = this.allNoSubSelect[index];
             ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
         }
-        
+
         // Examples must remove all the other menus
         var examplesButton = document.getElementsByClassName("examplesButton");
         for (var i = 0; i < examplesButton.length; i++) {
             examplesButton[i].addEventListener("click", this.removeallOptions);
         }
+
+        // Fullscreen
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
+            if (document.webkitIsFullScreen) this.goFullPage();
+            else this.exitFullPage();
+        }.bind(this), false);
+
+        // Message before unload
+        window.onbeforeunload = this.exitPrompt;
     }
 
     /**
      * Display children menu of the caller
      */
-    displayMenu = function (evt) {
+    displayMenu(evt) {
         if (evt.target.nodeName != "IMG") {
             evt.preventDefault();
             evt.stopPropagation();
@@ -85,27 +116,47 @@ class MenuPG {
     /**
      * Display children subMenu of the caller
      */
-    displaySubitems = function (evt) {
+    displaySubitems(evt) {
         // If it's in mobile mode, avoid the "mouseenter" bug
-        if(evt.type == "mouseenter" && this.navBar550.offsetHeight > 0) return;
+        if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
         this.removeAllSubItems();
-    
-        var toDisplay = evt.target.querySelector('.toDisplaySub');
-        if (toDisplay) toDisplay.style.display = 'block';
+
+        var target = evt.target;
+        if (target.nodeName == "IMG") target = evt.target.parentNode;
+
+        var toDisplay = target.querySelector('.toDisplaySub');
+        if (toDisplay) {
+            toDisplay.style.display = 'block';
+
+            if (document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) {
+                var height = toDisplay.children.length * 33;
+                var parentTop = toDisplay.parentNode.getBoundingClientRect().top;
+                if ((height + parentTop) <= window.innerHeight) {
+                    toDisplay.style.top = parentTop + "px";
+                }
+                else {
+                    toDisplay.style.top = window.innerHeight - height + "px";
+                }
+            }
+        }
 
         evt.preventDefault();
         evt.stopPropagation();
     };
-    // Handle click on subOptions
-    clickOptionSub = function(evt) {
-        if(!this.navBar550.offsetHeight > 0) return; // If is not in mobile, this doesnt apply
-        if(!this.classList) return;
-    
-        if (this.classList.contains('link')) {
-            window.open(this.querySelector('a').href, '_new');
+    /**
+     * Handle click on subOptions
+     */
+    clickOptionSub(evt) {
+        var target = evt.target;
+        if (evt.target.tagName == "A") target = evt.target.parentNode;
+        if (!document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if (!target.classList) return;
+
+        if (target.classList.contains('link')) {
+            window.open(target.querySelector('a').href, '_new');
         }
-        if (!this.classList.contains('subSelect') && this.parentNode.style.display == 'block') {
-            this.parentNode.style.display = 'none'
+        if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
+            target.parentNode.style.display = 'none'
         }
 
         evt.preventDefault();
@@ -115,7 +166,7 @@ class MenuPG {
     /**
      * Remove displayed subItems
      */
-    removeAllSubItems = function () {
+    removeAllSubItems() {
         for (var index = 0; index < this.allSubItems.length; index++) {
             this.allSubItems[index].style.display = 'none';
         }
@@ -123,9 +174,9 @@ class MenuPG {
     /**
      * Remove displayed options
      */
-    removeAllOptions = function () {
+    removeAllOptions() {
         this.removeAllSubItems();
-    
+
         for (var index = 0; index < this.allToDisplay.length; index++) {
             var a = this.allToDisplay[index];
             if (a.style.display == 'block') {
@@ -143,27 +194,106 @@ class MenuPG {
     /**
      * Hide the canvas and display JS editor
      */
-    resizeBigJsEditor = function() {
-        if(this.navBar550.offsetHeight > 0) {
+    resizeBigJsEditor() {
+        if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.canvasZoneElement.style.width = '0';
             this.switchWrapperCode.style.display = 'none';
             this.fpsLabelElement.style.display = 'none';
             this.jsEditorElement.style.width = '100%';
+            this.jsEditorElement.style.display = 'block';
+            if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'block';
         }
     };
     /**
      * Hide the JS editor and display the canvas
      */
-    resizeBigCanvas = function() {
-        if(this.navBar550.offsetHeight > 0) {
+    resizeBigCanvas() {
+        if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.jsEditorElement.style.width = '0';
+            this.jsEditorElement.style.display = 'none';
+            document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'none';
             this.canvasZoneElement.style.width = '100%';
             this.switchWrapperCode.style.display = 'block';
             this.fpsLabelElement.style.display = 'block';
         }
     };
+    /**
+     * When someone resize from mobile to large screen version
+     */
+    resizeSplitted() {
+        this.removeAllOptions();
+        this.jsEditorElement.style.width = '50%';
+        this.jsEditorElement.style.display = 'block';
+        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'block';
+        this.switchWrapperCanvas.style.display = 'block';
+        this.canvasZoneElement.style.width = '50%';
+        this.switchWrapperCode.style.display = 'block';
+        this.fpsLabelElement.style.display = 'block';
+    };
+
+    /**
+     * Canvas full page
+     */
+    goFullPage () {
+        var canvasElement = document.getElementById("renderCanvas");
+        canvasElement.style.position = "absolute";
+        canvasElement.style.top = 0;
+        canvasElement.style.left = 0;
+        canvasElement.style.zIndex = 100;
+    };
+    /**
+     * Canvas exit full page
+     */
+    exitFullPage () {
+        document.getElementById("renderCanvas").style.position = "relative";
+        document.getElementById("renderCanvas").style.zIndex = 0;
+    };
+    /**
+     * Canvas full screen
+     */
+    goFullscreen (engine) {
+        engine.switchFullscreen(true);
+    };
+    /**
+     * Editor full screen
+     */
+    editorGoFullscreen () {
+        var editorDiv = document.getElementById("jsEditor");
+        if (editorDiv.requestFullscreen) {
+            editorDiv.requestFullscreen();
+        } else if (editorDiv.mozRequestFullScreen) {
+            editorDiv.mozRequestFullScreen();
+        } else if (editorDiv.webkitRequestFullscreen) {
+            editorDiv.webkitRequestFullscreen();
+        }
+
+    };
+
+    /**
+     * Display the metadatas form
+     */
+    displayMetadata () {
+        document.getElementById("saveLayer").style.display = "block";
+    };
+
+    /**
+     * Navigation Overwrites
+     */
+    // TO DO - Apply this when click on TS / JS button
+    exitPrompt (e) {
+        var safeToggle = document.getElementById("safemodeToggle1280");
+        if (safeToggle.classList.contains('checked')) {
+            e = e || window.event;
+            var message =
+                'This page is asking you to confirm that you want to leave - data you have entered may not be saved.';
+            if (e) {
+                e.returnValue = message;
+            }
+            return message;
+        }
+    };
 };

Playground/js/monacoCreator.js

@@ -6,7 +6,9 @@ class MonacoCreator {
         this.jsEditor = null;
         this.monacoMode = "javascript";
         this.blockEditorChange = false;
-        
+
+        this.compilerTriggerTimeoutID = null;
+
         this.loadMonaco();
     }
 
@@ -20,8 +22,8 @@ class MonacoCreator {
         return this.monacoMode;
     };
     set MonacoMode(mode) {
-        if(this.monacoMode != "javascript"
-        && this.monacoMode != "typescript")
+        if (this.monacoMode != "javascript"
+            && this.monacoMode != "typescript")
             console.warn("Error while defining Monaco Mode");
         this.monacoMode = mode;
     };
@@ -38,7 +40,7 @@ class MonacoCreator {
     /**
      * Load the Monaco Node module.
      */
-    loadMonaco = function () {
+    loadMonaco() {
         var xhr = new XMLHttpRequest();
 
         xhr.open('GET', "babylon.d.txt", true);
@@ -65,9 +67,9 @@ class MonacoCreator {
     /**
      * Function to (re)create the editor
      */
-    createMonacoEditor = function() {
+    createMonacoEditor() {
         var oldCode = "";
-        if(this.jsEditor) {
+        if (this.jsEditor) {
             oldCode = this.jsEditor.getValue();
             this.jsEditor.dispose();
         }
@@ -98,4 +100,100 @@ class MonacoCreator {
             utils.markDirty();
         });
     };
+
+    /**
+     * Format the code in the editor
+     */
+    formatCode () {
+        this.jsEditor.getAction('editor.action.formatDocument').run();
+    };
+
+    /**
+     * Toggle the minimap
+     */
+    toggleMinimap () {
+        var minimapToggle = document.getElementById("minimapToggle1280");
+        if (minimapToggle.classList.contains('checked')) {
+            this.jsEditor.updateOptions({ minimap: { enabled: false } });
+            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
+        } else {
+            this.jsEditor.updateOptions({ minimap: { enabled: true } });
+            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
+        }
+        minimapToggle.classList.toggle('checked');
+    };
+
+    /**
+     * Get the code in the editor
+     * @param {Function} callBack : Function that will be called after retrieving the code.
+     */
+    getRunCode(callBack) {
+        if (settingsPG.ScriptLanguage == "JS")
+            callBack(this.jsEditor.getValue());
+        else if (settingsPG.ScriptLanguage == "TS") {
+            this.triggerCompile(this.JsEditor.getValue(), function (result) {
+                callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+            });
+        }
+    };
+
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} codeValue 
+     * @param {*} callback 
+     */
+    triggerCompile(codeValue, callback) {
+        if (this.compilerTriggerTimeoutID !== null) {
+            window.clearTimeout(this.compilerTriggerTimeoutID);
+        }
+        this.compilerTriggerTimeoutID = window.setTimeout(function () {
+            try {
+
+                var output = this.transpileModule(codeValue, {
+                    module: ts.ModuleKind.AMD,
+                    target: ts.ScriptTarget.ES5,
+                    noLib: true,
+                    noResolve: true,
+                    suppressOutputPathCheck: true
+                });
+                if (typeof output === "string") {
+                    callback(output);
+                }
+            }
+            catch (e) {
+                utils.showError(e.message, e);
+            }
+        }.bind(this), 100);
+    };
+    
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} input 
+     * @param {*} options 
+     */
+    transpileModule(input, options) {
+        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
+        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
+        // Output
+        var outputText;
+        var program = ts.createProgram([inputFileName], options, {
+            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
+            writeFile: function (_name, text) { outputText = text; },
+            getDefaultLibFileName: function () { return "lib.d.ts"; },
+            useCaseSensitiveFileNames: function () { return false; },
+            getCanonicalFileName: function (fileName) { return fileName; },
+            getCurrentDirectory: function () { return ""; },
+            getNewLine: function () { return "\r\n"; },
+            fileExists: function (fileName) { return fileName === inputFileName; },
+            readFile: function () { return ""; },
+            directoryExists: function () { return true; },
+            getDirectories: function () { return []; }
+        });
+        // Emit
+        program.emit();
+        if (outputText === undefined) {
+            throw new Error("Output generation failed");
+        }
+        return outputText;
+    }
 };

Playground/js/settingsPG.js

@@ -47,20 +47,20 @@ class SettingsPG {
 
     get ScriptLanguage() {
         return this.scriptLanguage;
-    }
+    };
     set ScriptLanguage(value) {
-        localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+        localStorage.setItem("bjs-playground-scriptLanguage", value);
         this.scriptLanguage = value;
-    }
+    };
     get DefaultScene() {
         return this.defaultScene;
-    }
+    };
 
 
     /**
      * Change font size
      */
-    setFontSize = function (size) {
+    setFontSize(size) {
         this.fontSize = size;
         this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
         var array = document.getElementsByClassName("displayFontSize");
@@ -76,7 +76,7 @@ class SettingsPG {
     /**
      * Toggle Typescript / Javascript language
      */
-    setScriptLanguage = function () {
+    setScriptLanguage() {
         for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
             var obj = this.elementForscriptLanguage[index];
             var domObjArr = document.querySelectorAll(obj);
@@ -88,28 +88,28 @@ class SettingsPG {
             }
         }
         if (this.scriptLanguage == "JS") {
-            setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+            utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
         }
         else if (this.scriptLanguage == "TS") {
-            setToMultipleID("toJSbutton", "addClass", "floatLeft");
+            utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
         }
     };
     /**
      * Set the theme (dark / light)
      */
-    setTheme = function (theme) {
+    setTheme(theme) {
         localStorage.setItem("bjs-playground-theme", theme);
         // Get the Monaco theme name.
         // Change the selected button style
-        setToMultipleID("darkTheme", "removeClass", "selected");
-        setToMultipleID("lightTheme", "removeClass", "selected");
+        utils.setToMultipleID("darkTheme", "removeClass", "selected");
+        utils.setToMultipleID("lightTheme", "removeClass", "selected");
         if (theme == 'dark') {
             this.vsTheme = 'vs-dark';
-            setToMultipleID("darkTheme", "addClass", "selected");
+            utils.setToMultipleID("darkTheme", "addClass", "selected");
         }
         else {
             this.vsTheme = 'vs';
-            setToMultipleID("lightTheme", "addClass", "selected");
+            utils.setToMultipleID("lightTheme", "addClass", "selected");
         }
 
         this.monacoCreator.createMonacoEditor();
@@ -127,7 +127,7 @@ class SettingsPG {
             }
         }
     };
-    restoreTheme = function(monacoCreator) {
+    restoreTheme(monacoCreator) {
         this.setTheme(this.vsTheme, monacoCreator);
     };
 };

Playground/js/utils.js

@@ -3,16 +3,17 @@
  */
 class Utils {
     constructor() {
+        this.multipleSize = [1280, 1024, 'Mobile'];
     }
 
     // TO DO - Comment this
-    markDirty = function () {
+    markDirty() {
         if (monacoCreator.BlockEditorChange) return;
 
         // setToMultipleID("currentScript", "innerHTML", "Custom");
-        setToMultipleID("safemodeToggle", "addClass", "checked");
+        this.setToMultipleID("safemodeToggle", "addClass", "checked");
         // setToMultipleID("minimapToggle", "addClass", "checked"); // Why ?!
-        setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+        this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
     };
 
     /**
@@ -20,7 +21,7 @@ class Utils {
      * @param {String} errorMessage 
      * @param {String} errorEvent 
      */
-    showError = function(errorMessage, errorEvent) {
+    showError(errorMessage, errorEvent) {
         var errorContent =
             '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
         if (errorEvent) {
@@ -46,4 +47,33 @@ class Utils {
             document.getElementById("errorZone").style.display = 'none';
         });
     };
+
+    /**
+     * Apply things to the differents menu sizes
+     */
+    setToMultipleID(id, thingToDo, param) {
+        this.multipleSize.forEach(function (size) {
+            if (thingToDo == "innerHTML") {
+                document.getElementById(id + size).innerHTML = param
+            }
+            else if (thingToDo == "click") {
+                if (param.length > 1) {
+                    for (var i = 0; i < param.length; i++) {
+                        document.getElementById(id + size).addEventListener("click", param[i]);
+                    }
+                }
+                else
+                    document.getElementById(id + size).addEventListener("click", param);
+            }
+            else if (thingToDo == "addClass") {
+                document.getElementById(id + size).classList.add(param);
+            }
+            else if (thingToDo == "removeClass") {
+                document.getElementById(id + size).classList.remove(param);
+            }
+            else if (thingToDo == "display") {
+                document.getElementById(id + size).style.display = param;
+            }
+        });
+    };
 }

Playground/js/zipTool.js

@@ -0,0 +1,178 @@
+/**
+ * This JS file contains the ZIP tools
+ */
+class zipTool {
+    constructor() {
+        this.zipCode;
+    }
+
+    set ZipCode(value) {
+        this.zipCode = value;
+    }
+
+     
+    addContentToZip (zip, name, url, replace, buffer, then) {
+        if (url.substring(0, 5) == "data:" || url.substring(0, 5) == "http:" || url.substring(0, 5) == "blob:" || url.substring(0, 6) == "https:") {
+            then();
+            return;
+        }
+
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', url, true);
+
+        if (buffer) {
+            xhr.responseType = "arraybuffer";
+        }
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    var text;
+                    if (!buffer) {
+                        if (replace) {
+                            var splits = replace.split("\r\n");
+                            for (var index = 0; index < splits.length; index++) {
+                                splits[index] = "        " + splits[index];
+                            }
+                            replace = splits.join("\r\n");
+
+                            text = xhr.responseText.replace("####INJECT####", replace);
+                        } else {
+                            text = xhr.responseText;
+                        }
+                    }
+
+                    zip.file(name, buffer ? xhr.response : text);
+
+                    then();
+                }
+            }
+        };
+
+        xhr.send(null);
+    };
+    addTexturesToZip (zip, index, textures, folder, then) {
+
+        if (index === textures.length || !textures[index].name) {
+            then();
+            return;
+        }
+
+        if (textures[index].isRenderTarget || textures[index] instanceof BABYLON.DynamicTexture || textures[index].name.indexOf("data:") !== -1) {
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+            return;
+        }
+
+        if (textures[index].isCube) {
+            if (textures[index].name.indexOf("dds") === -1) {
+                if (textures[index]._extensions) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index].name + textures[index]._extensions[i] });
+                    }
+                } else if (textures[index]._files) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index]._files[i] });
+                    }
+                }
+            }
+            else {
+                textures.push({ name: textures[index].name });
+            }
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+            return;
+        }
+
+
+        if (folder == null) {
+            folder = zip.folder("textures");
+        }
+        var url;
+
+        if (textures[index].video) {
+            url = textures[index].video.currentSrc;
+        } else {
+            // url = textures[index].name;
+            url = textures[index].url ? textures[index].url : textures[index].name;
+        }
+
+        var name = textures[index].name.replace("textures/", "");
+        // var name = url.substr(url.lastIndexOf("/") + 1);
+
+        if (url != null) {
+            this.addContentToZip(folder,
+                name,
+                url,
+                null,
+                true,
+                function () {
+                    this.addTexturesToZip(zip, index + 1, textures, folder, then);
+                });
+        }
+        else {
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+        }
+    };
+    addImportedFilesToZip (zip, index, importedFiles, folder, then) {
+        if (index === importedFiles.length) {
+            then();
+            return;
+        }
+
+        if (!folder) {
+            folder = zip.folder("scenes");
+        }
+        var url = importedFiles[index];
+
+        var name = url.substr(url.lastIndexOf("/") + 1);
+
+        this.addContentToZip(folder,
+            name,
+            url,
+            null,
+            true,
+            function () {
+                this.addImportedFilesToZip(zip, index + 1, importedFiles, folder, then);
+            });
+    };
+    getZip (engine) {
+        if (engine.scenes.length === 0) {
+            return;
+        }
+
+        var zip = new JSZip();
+
+        var scene = engine.scenes[0];
+        var textures = scene.textures;
+        var importedFiles = scene.importedMeshesFiles;
+
+        document.getElementById("statusBar").innerHTML = "Creating archive... Please wait.";
+
+        if (this.zipCode.indexOf("textures/worldHeightMap.jpg") !== -1) {
+            textures.push({ name: "textures/worldHeightMap.jpg" });
+        }
+
+        this.addContentToZip(zip,
+            "index.html",
+            "zipContent/index.html",
+            this.zipCode,
+            false,
+            function () {
+                this.addTexturesToZip(zip,
+                    0,
+                    textures,
+                    null,
+                    function () {
+                        this.addImportedFilesToZip(zip,
+                            0,
+                            importedFiles,
+                            null,
+                            function () {
+                                var blob = zip.generate({ type: "blob" });
+                                saveAs(blob, "sample.zip");
+                                document.getElementById("statusBar").innerHTML = "";
+                            }.bind(this));
+                    }.bind(this));
+            }.bind(this));
+    };
+}

Playground/ts-local.html

@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    // TO DO - Delete this ? It's not used anymore. It's now included in the index.html with a switch button JS / TS
+ -->
+
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />

dist/preview release/gui/babylon.gui.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-gui"] = factory(require("babylonjs"));
 	else
 		root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -355,7 +355,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -498,7 +498,7 @@ var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
 /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
@@ -1619,7 +1619,7 @@ var Button = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -1800,7 +1800,7 @@ var Checkbox = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
@@ -3187,7 +3187,7 @@ var ColorPicker = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -3592,7 +3592,7 @@ var Container = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -5783,7 +5783,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -6239,7 +6239,7 @@ var Grid = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 
@@ -7014,7 +7014,7 @@ var InputPassword = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8023,7 +8023,7 @@ var InputText = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8291,7 +8291,7 @@ var Line = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
@@ -8558,7 +8558,7 @@ var MultiLine = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -8903,7 +8903,7 @@ var Rectangle = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return ScrollViewer; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../rectangle */ "./2D/controls/rectangle.ts");
 /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../grid */ "./2D/controls/grid.ts");
@@ -9994,7 +9994,7 @@ var SelectionPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -10895,7 +10895,7 @@ var Slider = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -11153,7 +11153,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -11593,7 +11593,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
@@ -11974,7 +11974,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -12198,7 +12198,7 @@ var Matrix2D = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -12331,7 +12331,7 @@ var Measure = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12474,7 +12474,7 @@ var MultiLinePoint = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12781,7 +12781,7 @@ var ValueAndUnit = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -12824,7 +12824,7 @@ var AbstractButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
 /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
@@ -13001,7 +13001,7 @@ var Button3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -13158,7 +13158,7 @@ var Container3D = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
 
@@ -13564,7 +13564,7 @@ var Control3D = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -13649,7 +13649,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
 /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
@@ -14125,7 +14125,7 @@ var MeshButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
@@ -14180,7 +14180,7 @@ var PlanePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14307,7 +14307,7 @@ var ScatterPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14392,7 +14392,7 @@ var SpherePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14517,7 +14517,7 @@ var StackPanel3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14708,7 +14708,7 @@ var VolumeBasedPanel = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
 
@@ -14975,7 +14975,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
 /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
@@ -15297,7 +15297,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentPixelShader';
@@ -15319,7 +15319,7 @@ var fluentPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentVertexShader';
@@ -15342,7 +15342,7 @@ var fluentVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -15636,14 +15636,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/observable":
+/***/ "babylonjs/Maths/math":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__;
 
 /***/ })
 

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":252171,"sceneOnly":510391,"minGridMaterial":639301,"minStandardMaterial":765370}
+{"engineOnly":252171,"sceneOnly":510337,"minGridMaterial":639247,"minStandardMaterial":765316}

src/Materials/PBR/pbrBaseMaterial.ts

@@ -1782,7 +1782,12 @@ export abstract class PBRBaseMaterial extends PushMaterial {
 
                 ubo.updateColor3("vEmissiveColor", MaterialFlags.EmissiveTextureEnabled ? this._emissiveColor : Color3.BlackReadOnly);
                 ubo.updateColor3("vReflectionColor", this._reflectionColor);
-                ubo.updateColor4("vAlbedoColor", this._albedoColor, this.alpha);
+                if (!defines.SS_REFRACTION && this.subSurface.linkRefractionWithTransparency) {
+                    ubo.updateColor4("vAlbedoColor", this._albedoColor, 1);
+                }
+                else {
+                    ubo.updateColor4("vAlbedoColor", this._albedoColor, this.alpha);
+                }
 
                 // Visibility
                 ubo.updateFloat("visibility", mesh.visibility);

src/Meshes/transformNode.ts

@@ -686,9 +686,6 @@ export class TransformNode extends Node {
         var scale = Tmp.Vector3[1];
 
         if (!node) {
-            if (this.parent && this.parent.computeWorldMatrix) {
-                this.parent.computeWorldMatrix(true);
-            }
             this.computeWorldMatrix(true);
             this.getWorldMatrix().decompose(scale, quatRotation, position);
         } else {
@@ -998,6 +995,9 @@ export class TransformNode extends Node {
 
         // Parent
         if (parent && parent.getWorldMatrix) {
+            if (force) {
+                parent.computeWorldMatrix();
+            }
             if (useBillboardPath) {
                 if (this._transformToBoneReferal) {
                     parent.getWorldMatrix().multiplyToRef(this._transformToBoneReferal.getWorldMatrix(), Tmp.Matrix[7]);