首頁 探索 說明
註冊 登入
zhangyupeng
/
Babylon.js
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Cleanup, bringing back dev-monaco editor

Raanan Weber 5 年之前
父節點
8bdf14354f
當前提交
44d54a0da4
共有 7 個文件被更改，包括 423 次插入 和 378 次删除
分割檢視 顯示文件統計
  1. 1 1
      Playground/css/index.css
  2. 2 6
      Playground/debug.html
  3. 0 6
      Playground/frame.html
  4. 387 351
      Playground/index-local.html
  5. 2 1
      Playground/index.html
  6. 27 9
      Playground/js/main.js
  7. 4 4
      Playground/js/monacoCreator.js

+ 1 - 1
Playground/css/index.css
查看文件 

@@ -1,4 +1,4 @@
 
-@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");

+

 html,

 body {

     width: 100%;

+ 2 - 6
Playground/debug.html
查看文件 

@@ -1,11 +1,6 @@
 
 <!DOCTYPE html>

 <html>

 

-    <!--

-    The purpose of the Debug.html file is to debug a new Playground feature.

-    // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"

- -->

-

     <head>

         <title>Babylon.js Playground</title>

         <meta charset='utf-8' />

@@ -38,6 +33,7 @@
 
         <meta name="theme-color" content="#ffffff">

 

         <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

         <link rel="stylesheet" href="/css/index.css" />

         <link rel="stylesheet" href="/css/index_mobile.css" />

 

@@ -120,7 +116,7 @@
 
         </script>

 

         <!-- Monaco -->

-        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs/loader.js"></script>

+        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>

 

     </head>

+ 0 - 6
Playground/frame.html
查看文件 

@@ -1,11 +1,5 @@
 
 <!DOCTYPE html>

 <html>

-

-    <!--

-    The purpose of the Frame.html file is to ???

-    // TO DO - Complete that

- -->

-

     <head>

         <title>Babylon.js Playground</title>

         <meta charset='utf-8' />

+ 387 - 351
Playground/index-local.html
查看文件 

@@ -1,406 +1,442 @@
 
 <!DOCTYPE html>

 <html>

 

-<head>

-    <title>Babylon.js Playground</title>

-    <meta charset='utf-8' />

-    <meta name="viewport" content="width=device-width, user-scalable=no">

-    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

-

-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">

-    <link rel="stylesheet" href="css/index.css" />

-    <link rel="stylesheet" href="css/index_mobile.css" />

-

-    <!-- Pep -->

-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

-    <!--For canvas/code separator-->

-    <script src="js/libs/split.js"></script>

-

-    <!-- DatGUI -->

-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

-    <!-- jszip -->

-    <script src="js/libs/jszip.min.js"></script>

-    <script src="js/libs/fileSaver.js"></script>

-

-    <!-- Dependencies -->

-    <script src="../dist/preview%20release/ammo.js"></script>

-    <script src="../dist/preview%20release/recast.js"></script>

-    <script src="../dist/preview%20release/cannon.js"></script>

-    <script src="../dist/preview%20release/Oimo.js"></script>

-    <script src="../dist/preview%20release/earcut.min.js"></script>

-    <!-- Monaco -->

-

-    <!-- Babylon.js -->

-    <script src="../Tools/DevLoader/BabylonLoader.js"></script>

-</head>

-

-<body>

-    <!-- Big screens -->

-    <div class="navbar navBar1280 languageJS">

-        <div class="categoryTitle">

-            <img class="logo" src="css/img/logo_v4.svg">

-            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>

-        </div>

+    <head>

+        <title>Babylon.js Playground</title>

+        <meta charset='utf-8' />

+        <meta name="viewport" content="width=device-width, user-scalable=no">

+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

+

+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

+        <link rel="stylesheet"

+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

+        <link rel="stylesheet" href="/css/index.css" />

+        <link rel="stylesheet" href="/css/index_mobile.css" />

+

+        <!-- Pep -->

+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

+        <!--For canvas/code separator-->

+        <script src="js/libs/split.js"></script>

+

+        <!-- DatGUI -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

+        <!-- jszip -->

+        <script src="js/libs/jszip.min.js"></script>

+        <script src="js/libs/fileSaver.js"></script>

+

+        <!-- Dependencies -->

+        <script src="../dist/preview%20release/ammo.js"></script>

+        <script src="../dist/preview%20release/recast.js"></script>

+        <script src="../dist/preview%20release/cannon.js"></script>

+        <script src="../dist/preview%20release/Oimo.js"></script>

+        <script src="../dist/preview%20release/earcut.min.js"></script>

+        <!-- Monaco -->

+

+        <!-- Babylon.js -->

+        <script src="../Tools/DevLoader/BabylonLoader.js"></script>

+    </head>

+

+    <body>

+        <!-- Big screens -->

+        <div class="navbar navBar1280 languageJS">

+            <div class="categoryTitle">

+                <img class="logo" src="css/img/logo_v4.svg">

+                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>

+            </div>

 

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>

-            <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</div>

-            <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img src="css/img/playButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img src="css/img/saveButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280" title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img src="css/img/newButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img src="css/img/clearButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img src="css/img/diffButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280" title="Previous difference&#10;(Shift+Alt+F5)"><img src="css/img/previousButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280" title="Next difference&#10;(Alt+F5)"><img src="css/img/nextButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img src="css/img/exitButton.svg"></div>

-            <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img src="css/img/optionsButton.svg">

-                <div class="toDisplay languageJS">

-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub languageJS">

-                            <div class="option selected" id="darkTheme1280">Dark</div>

-                            <div class="option" id="lightTheme1280">Light</div>

+            <div class="category languageJS" id="JStoTSbar">

+                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>

+                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</div>

+                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img

+                        src="css/img/playButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img

+                        src="css/img/saveButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"

+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img

+                        src="css/img/newButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img

+                        src="css/img/clearButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img

+                        src="css/img/diffButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"

+                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="css/img/previousButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"

+                    title="Next difference&#10;(Alt+F5)"><img src="css/img/nextButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img

+                        src="css/img/exitButton.svg"></div>

+                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img

+                        src="css/img/optionsButton.svg">

+                    <div class="toDisplay languageJS">

+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>

+                            <div class="toDisplaySub languageJS">

+                                <div class="option selected" id="darkTheme1280">Dark</div>

+                                <div class="option" id="lightTheme1280">Light</div>

+                            </div>

                         </div>

-                    </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">12</div>

-                            <div class="option selected">14</div>

-                            <div class="option">16</div>

-                            <div class="option">18</div>

-                            <div class="option">20</div>

-                            <div class="option">22</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">12</div>

+                                <div class="option selected">14</div>

+                                <div class="option">16</div>

+                                <div class="option">18</div>

+                                <div class="option">20</div>

+                                <div class="option">22</div>

+                            </div>

                         </div>

-                    </div>

-                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode

-                        <i class="fa fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option checked noSubSelect" id="editorButton1280">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>

-                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>

-                    <div class="option noSubSelect" id="formatButton1280">Format code</div>

-                    <div class="option noSubSelect" id="minimapToggle1280">Minimap

-                        <i class="fa fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"

-                            aria-hidden="true"></i>

-                        <div class="toDisplaySub qrCodeImage">

-                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>

+                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode

+                            <i class="fa fa-square" aria-hidden="true"></i>

+                        </div>

+                        <div class="option checked noSubSelect" id="editorButton1280">Editor

+                            <i class="fa fa-check-square" aria-hidden="true"></i>

+                        </div>

+                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>

+                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>

+                        <div class="option noSubSelect" id="formatButton1280">Format code</div>

+                        <div class="option noSubSelect" id="minimapToggle1280">Minimap

+                            <i class="fa fa-square" aria-hidden="true"></i>

                         </div>

+                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"

+                                aria-hidden="true"></i>

+                            <div class="toDisplaySub qrCodeImage">

+                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>

+                            </div>

+                        </div>

+                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>

+                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>

                     </div>

-                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>

-                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>

                 </div>

             </div>

-        </div>

 

-        <div class="category right">

-            <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">

-                <span id="currentVersion1280"></span>

-                <div class="toDisplay currentVersionDisplay" style="display: none"></div>

+            <div class="category right">

+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">

+                    <span id="currentVersion1280"></span>

+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>

+                </div>

+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"

+                        src="css/img/examplesButton.svg"></div>

             </div>

-            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>

         </div>

-    </div>

 

-    <!-- Mid-size screens -->

-    <div class="navbar navBar1024 languageJS">

-        <div class="categoryTitle">

-            <img class="logo" src="css/img/logo_v4.svg">

-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>

-        </div>

+        <!-- Mid-size screens -->

+        <div class="navbar navBar1024 languageJS">

+            <div class="categoryTitle">

+                <img class="logo" src="css/img/logo_v4.svg">

+                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>

+            </div>

 

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>

-            <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>

-            <div class="buttonSpaceKiller"></div>

-            <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img src="css/img/playButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img src="css/img/saveButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024" title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img src="css/img/newButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img src="css/img/clearButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img src="css/img/diffButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img src="css/img/previousButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img src="css/img/nextButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img src="css/img/exitButton.svg"></div>

-

-            <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><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="darkTheme1024">Dark</div>

-                            <div class="option" id="lightTheme1024">Light</div>

+            <div class="category languageJS" id="JStoTSbar">

+                <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>

+                <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>

+                <div class="buttonSpaceKiller"></div>

+                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img

+                        src="css/img/playButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img

+                        src="css/img/saveButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"

+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img

+                        src="css/img/newButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img

+                        src="css/img/clearButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img

+                        src="css/img/diffButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img

+                        src="css/img/previousButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img src="css/img/nextButton.svg">

+                </div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img src="css/img/exitButton.svg">

+                </div>

+

+                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><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="darkTheme1024">Dark</div>

+                                <div class="option" id="lightTheme1024">Light</div>

+                            </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">12</div>

-                            <div class="option selected">14</div>

-                            <div class="option">16</div>

-                            <div class="option">18</div>

-                            <div class="option">20</div>

-                            <div class="option">22</div>

+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>

+                            <div class="toDisplaySub displayFontSize">

+                                <div class="option">12</div>

+                                <div class="option selected">14</div>

+                                <div class="option">16</div>

+                                <div class="option">18</div>

+                                <div class="option">20</div>

+                                <div class="option">22</div>

+                            </div>

                         </div>

-                    </div>

-                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode

-                        <i class="fa fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option checked noSubSelect" id="editorButton1024">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>

-                    <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>

-                    <div class="option noSubSelect" id="formatButton1024">Format code</div>

-                    <div class="option noSubSelect" id="minimapToggle1024">Minimap

-                        <i class="fa fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"

-                            aria-hidden="true"></i>

-                        <div class="toDisplaySub qrCodeImage">

-                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>

+                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode

+                            <i class="fa fa-square" aria-hidden="true"></i>

+                        </div>

+                        <div class="option checked noSubSelect" id="editorButton1024">Editor

+                            <i class="fa fa-check-square" aria-hidden="true"></i>

+                        </div>

+                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>

+                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>

+                        <div class="option noSubSelect" id="formatButton1024">Format code</div>

+                        <div class="option noSubSelect" id="minimapToggle1024">Minimap

+                            <i class="fa fa-square" aria-hidden="true"></i>

+                        </div>

+                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"

+                                aria-hidden="true"></i>

+                            <div class="toDisplaySub qrCodeImage">

+                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>

+                            </div>

                         </div>

+                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>

+                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>

                     </div>

-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>

-                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>

                 </div>

             </div>

-        </div>

 

-        <div class="category right">

-            <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">

-                <span id="currentVersion1024"></span>

-                <div class="toDisplay currentVersionDisplay" style="display: none">

+            <div class="category right">

+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">

+                    <span id="currentVersion1024"></span>

+                    <div class="toDisplay currentVersionDisplay" style="display: none">

+                    </div>

                 </div>

+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"

+                        src="css/img/examplesButton.svg"></div>

             </div>

-            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>

         </div>

-    </div>

-

-    <!-- Mobile -->

-    <div class="navbar navBarMobile languageJS">

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonPG select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">

-                <div class="toDisplay">

-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>

-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>

-                    <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>

-                    <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>

-                    <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download</div>

-                    <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>

-                    <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>

-                    <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img src="css/img/diffButton.svg">Diff</div>

-                    <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img src="css/img/previousButton.svg">Previous</div>

-                    <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img src="css/img/nextButton.svg">Next</div>

-                    <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img src="css/img/exitButton.svg">Exit</div>

-

-                    <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img

-                            src="css/img/inspectorButton.svg">Inspector</div>

-                    <div class="option subSelect removeOnDiff">

-                        <img src="css/img/optionsButton.svg">

-                        <div id="currentVersionMobile"></div>

-                        <div class="toDisplaySub currentVersionDisplay">

+

+        <!-- Mobile -->

+        <div class="navbar navBarMobile languageJS">

+            <div class="category languageJS" id="JStoTSbar">

+                <div class="buttonPG select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">

+                    <div class="toDisplay">

+                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>

+                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>

+                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img

+                                src="css/img/playButton.svg">Run</div>

+                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img

+                                src="css/img/saveButton.svg">Save</div>

+                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img

+                                src="css/img/downloadButton.svg">Download</div>

+                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img

+                                src="css/img/newButton.svg">New</div>

+                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img

+                                src="css/img/clearButton.svg">Clear</div>

+                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img

+                                src="css/img/diffButton.svg">Diff</div>

+                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img

+                                src="css/img/previousButton.svg">Previous</div>

+                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img

+                                src="css/img/nextButton.svg">Next</div>

+                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img

+                                src="css/img/exitButton.svg">Exit</div>

+

+                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img

+                                src="css/img/inspectorButton.svg">Inspector</div>

+                        <div class="option subSelect removeOnDiff">

+                            <img src="css/img/optionsButton.svg">

+                            <div id="currentVersionMobile"></div>

+                            <div class="toDisplaySub currentVersionDisplay">

+                            </div>

                         </div>

-                    </div>

-                    <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Theme

-                        <div class="toDisplaySub">

-                            <div class="option selected" id="darkThemeMobile">Dark</div>

-                            <div class="option" id="lightThemeMobile">Light</div>

+                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Theme

+                            <div class="toDisplaySub">

+                                <div class="option selected" id="darkThemeMobile">Dark</div>

+                                <div class="option" id="lightThemeMobile">Light</div>

+                            </div>

                         </div>

-                    </div>

-                    <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Font size

-                        <div class="toDisplaySub displayFontSize">

-                            <div class="option">8</div>

-                            <div class="option">10</div>

-                            <div class="option selected">12</div>

-                            <div class="option">14</div>

-                            <div class="option">16</div>

-                            <div class="option">18</div>

-                            <div class="option">20</div>

-                            <div class="option">22</div>

+                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Font size

+                            <div class="toDisplaySub displayFontSize">

+                                <div class="option">8</div>

+                                <div class="option">10</div>

+                                <div class="option selected">12</div>

+                                <div class="option">14</div>

+                                <div class="option">16</div>

+                                <div class="option">18</div>

+                                <div class="option">20</div>

+                                <div class="option">22</div>

+                            </div>

                         </div>

-                    </div>

-                    <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="editorButtonMobile">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"

-                        style="display: none">Fullscreen</div>

-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"

-                        style="display: none">Editor

-                        Fullscreen</div>

-                    <div class="option nosubselect removeOnDiff" 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="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link

+                        <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="editorButtonMobile">Editor

+                            <i class="fa fa-check-square" aria-hidden="true"></i>

+                        </div>

+                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"

+                            style="display: none">Fullscreen</div>

+                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"

+                            style="display: none">Editor

+                            Fullscreen</div>

+                        <div class="option nosubselect removeOnDiff" 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="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link

                         <div class="toDisplaySub qrCodeImage">

                             <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>

                         </div>

                     </div> -->

-                    <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img

-                            src="css/img/metadataButton.svg">Metadata</div>

-                    <div class="option nosubselect removeOnDiff"><img class="examplesButton"

-                            src="css/img/examplesButton.svg">Examples</div>

-                    <div class="option subSelect removeOnDiff"><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>

-                            </div>

-                            <div class="option link">

-                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>

-                            </div>

-                            <div class="option link">

-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>

-                            </div>

-                            <div class="option link">

-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

-                            </div>

-                            <div class="option link">

-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

+                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img

+                                src="css/img/metadataButton.svg">Metadata</div>

+                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"

+                                src="css/img/examplesButton.svg">Examples</div>

+                        <div class="option subSelect removeOnDiff"><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>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

+                                </div>

                             </div>

                         </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="categoryTitle">

-                <img class="logo" src="css/img/logo_v4.svg">

-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>

-            </div>

-        </div>

 

-        <div id="switchWrapper" class="languageJS removeOnDiff">

-            <img id="switchWrapperCode" src="css/img/codeButton.svg">

-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">

+            <div id="switchWrapper" class="languageJS removeOnDiff">

+                <img id="switchWrapperCode" src="css/img/codeButton.svg">

+                <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">

+            </div>

         </div>

-    </div>

 

-    <!-- Common things -->

+        <!-- Common things -->

 

-    <div class="wrapper">

-        <div id="jsEditor"></div>

-        <div id="diffView" class="diff-view"></div>

-        <div id="canvasZone">

-            <canvas touch-action="none" id="renderCanvas"></canvas>

-        </div>

-    </div>

-    <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...">

-        <img id="filterBarClear"

-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">

-    </div>

-

-    <div class="fpsLabel languageJS" id="fpsLabel"></div>

-

-    <div id="errorZone">

-    </div>

-

-    <div class="navbarBottom">

-        <div id="statusBar"></div>

-        <div class="links">

-            <div class='link'>

-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>

+        <div class="wrapper">

+            <div id="jsEditor"></div>

+            <div id="diffView" class="diff-view"></div>

+            <div id="canvasZone">

+                <canvas touch-action="none" id="renderCanvas"></canvas>

             </div>

-            <div class='link'>

-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

+        </div>

+        <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...">

+            <img id="filterBarClear"

+                src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">

         </div>

-    </div>

-

-    <div id="saveLayer" class="save-layer">

-        <div class="save-form languageJS ">

-            <img id="saveFormButtonClose" src="css/img/clearButton.svg">

-            <label for="saveFormTitle">TITLE</label>

-            <div class="separator"></div>

-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">

-

-            <label for="saveFormDescription">DESCRIPTION</label>

-            <div class="separator"></div>

-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>

-

-            <label for="saveFormTags">TAGS (separated by comma)</label>

-            <div class="separator"></div>

-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>

-

-            <div class="save-form-buttons" id="saveFormButtons">

-                <div id="saveFormButtonOk">OK</div>

-                <div id="saveFormButtonCancel">Cancel</div>

+

+        <div class="fpsLabel languageJS" id="fpsLabel"></div>

+

+        <div id="errorZone">

+        </div>

+

+        <div class="navbarBottom">

+            <div id="statusBar"></div>

+            <div class="links">

+                <div class='link'>

+                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>

+                </div>

+                <div class='link'>

+                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>

+                </div>

+                <div class='link'>

+                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>

+                </div>

+                <div class='link'>

+                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

+                </div>

+                <div class='link'>

+                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

+                </div>

             </div>

         </div>

-    </div>

 

-    <div id="diffLayer" class="save-layer">

-        <div class="save-form diff-form">

-            <label for="diffFormSource">COMPARISON SOURCE</label>

-            <div class="separator"></div>

-            <input type="text" maxlength="120" id="diffFormSource" placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">

+        <div id="saveLayer" class="save-layer">

+            <div class="save-form languageJS ">

+                <img id="saveFormButtonClose" src="css/img/clearButton.svg">

+                <label for="saveFormTitle">TITLE</label>

+                <div class="separator"></div>

+                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">

+

+                <label for="saveFormDescription">DESCRIPTION</label>

+                <div class="separator"></div>

+                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>

 

-            <label for="diffFormCompareTo">COMPARE TO</label>

-            <div class="separator"></div>

-            <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID" class="save-form-title">

+                <label for="saveFormTags">TAGS (separated by comma)</label>

+                <div class="separator"></div>

+                <textarea id="saveFormTags" rows="4" cols="10"></textarea>

+

+                <div class="save-form-buttons" id="saveFormButtons">

+                    <div id="saveFormButtonOk">OK</div>

+                    <div id="saveFormButtonCancel">Cancel</div>

+                </div>

+            </div>

+        </div>

 

-            <div class="save-form-buttons" id="diffFormButtons">

-                <div id="diffFormButtonOk">OK</div>

-                <div id="diffFormButtonCancel">Cancel</div>

+        <div id="diffLayer" class="save-layer">

+            <div class="save-form diff-form">

+                <label for="diffFormSource">COMPARISON SOURCE</label>

+                <div class="separator"></div>

+                <input type="text" maxlength="120" id="diffFormSource"

+                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">

+

+                <label for="diffFormCompareTo">COMPARE TO</label>

+                <div class="separator"></div>

+                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"

+                    class="save-form-title">

+

+                <div class="save-form-buttons" id="diffFormButtons">

+                    <div id="diffFormButtonOk">OK</div>

+                    <div id="diffFormButtonCancel">Cancel</div>

+                </div>

             </div>

         </div>

-    </div>

 

-    <div id="waitDiv">

-        <div id="logo-part">

-            <img src="css/img/v4.svg" id="waitLogo" />

-            <img src="css/img/spinner.svg" id="waitSpinner" />

+        <div id="waitDiv">

+            <div id="logo-part">

+                <img src="css/img/v4.svg" id="waitLogo" />

+                <img src="css/img/spinner.svg" id="waitSpinner" />

+            </div>

         </div>

-    </div>

-

-    <!-- jQuery -->

-    <script src="https://code.jquery.com/jquery.js"></script>

-    <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

-

-    <!-- Main scripts -->

-    <script src="js/config_versions.js"></script>

-    <script src="js/pbt.js"></script>

-    <script src="js/examples.js"></script>

-    <script src="js/main.js"></script>

-    <script src="js/menuPG.js"></script>

-    <script src="js/monacoCreator.js"></script>

-    <script src="js/settingsPG.js"></script>

-    <script src="js/utils.js"></script>

-    <script src="js/zipTool.js"></script>

-    

-    <script>

-        BABYLONDEVTOOLS.Loader

-            .require('node_modules/monaco-editor/dev/vs/loader.js')

-            .require('js/index.js')

-            .load(function () {

-                BABYLON.DracoCompression.Configuration.decoder = {

-                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",

-                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",

-                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"

-                };

-                BABYLON.GLTFValidation.Configuration = {

-                    url: "../dist/preview%20release/gltf_validator.js"

-                };

-            });

-    </script>

-</body>

+

+        <!-- jQuery -->

+        <script src="https://code.jquery.com/jquery.js"></script>

+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

+

+        <!-- Main scripts -->

+        <script src="js/config_versions.js"></script>

+        <script src="js/pbt.js"></script>

+        <script src="js/examples.js"></script>

+        <script src="js/main.js"></script>

+        <script src="js/menuPG.js"></script>

+        <script src="js/monacoCreator.js"></script>

+        <script src="js/settingsPG.js"></script>

+        <script src="js/utils.js"></script>

+        <script src="js/zipTool.js"></script>

+

+        <script>

+            BABYLONDEVTOOLS.Loader

+                .require('node_modules/monaco-editor/dev/vs/loader.js')

+                .require('js/index.js')

+                .load(function () {

+                    BABYLON.DracoCompression.Configuration.decoder = {

+                        wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",

+                        wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",

+                        fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"

+                    };

+                    BABYLON.GLTFValidation.Configuration = {

+                        url: "../dist/preview%20release/gltf_validator.js"

+                    };

+                });

+        </script>

+    </body>

 

 </html>

+ 2 - 1
Playground/index.html
查看文件 

@@ -11,6 +11,7 @@
 
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

 

         <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />

         <link rel="stylesheet" href="/css/index.css" />

         <link rel="stylesheet" href="/css/index_mobile.css" />

 

@@ -431,7 +432,7 @@
 
         </script>

 

         <!-- Monaco -->

-        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs/loader.js"></script>

+        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>

 

         <!-- jQuery -->

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

+ 27 - 9
Playground/js/main.js
查看文件 

@@ -854,17 +854,35 @@ class Main {
 
         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;

-                    this.currentSnippetToken = snippet.id;

-                    if (snippet.version && snippet.version !== "0") {

-                        newUrl += "#" + snippet.version;

+                    if (location.pathname && location.pathname.indexOf('pg/') !== -1) {

+                        // full path with /pg/??????

+                        if (location.pathname.indexOf('revision') !== -1) {

+                            location.href = location.href.replace(/revision\/(\d+)/, "revision/" + snippet.version);

+                        } else {

+                            location.href = location.href + '/revision/' + snippet.version;

+                        }

+                    } else if (location.search && location.search.indexOf('pg=') !== -1) {

+                        // query string with ?pg=??????

+                        const currentQuery = this.parseQuery(location.search);

+                        if (currentQuery.revision) {

+                            location.href = location.href.replace(/revision=(\d+)/, "revision=" + snippet.version);

+                        } else {

+                            location.href = location.href + '&revision=' + snippet.version;

+                        }

+                    } else {

+                        // default behavior!

+                        var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");

+                        var newUrl = baseUrl + "#" + snippet.id;

+                        this.currentSnippetToken = snippet.id;

+                        if (snippet.version && snippet.version !== "0") {

+                            newUrl += "#" + snippet.version;

+                        }

+                        location.href = newUrl;

+                        // Hide the complete title & co message

+                        this.hideNoMetadata();

+                        compileAndRun(this.parent, this.fpsLabel);

                     }

-                    location.href = newUrl;

-                    // Hide the complete title & co message

-                    this.hideNoMetadata();

-                    compileAndRun(this.parent, this.fpsLabel);

                 } else {

                     this.parent.utils.showError("Unable to save your code. It may be too long.", null);

                 }

+ 4 - 4
Playground/js/monacoCreator.js
查看文件 

@@ -71,15 +71,15 @@ class MonacoCreator {
 
 

         this.setupDefinitionWorker(libContent);

 

-        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs' } });

+        require.config({ paths: { 'vs': '/node_modules/monaco-editor/dev/vs' } });

 

         require(['vs/editor/editor.main'], () => {

             this.setupMonacoCompilationPipeline(libContent);

             this.setupMonacoColorProvider();

 

-            // require(['vs/language/typescript/languageFeatures'], module => {

-            //     this.hookMonacoCompletionProvider(module.SuggestAdapter);

-            // });

+            require(['vs/language/typescript/languageFeatures'], module => {

+                this.hookMonacoCompletionProvider(module.SuggestAdapter);

+            });

 

             this.parent.main.run();

         });