Merge pull request #7096 from sailro/diff

Initial support for diffing snippets

Playground/css/index.css

@@ -745,6 +745,20 @@ body {
 .save-layer .save-form .save-form-buttons div:hover {
     font-weight: bold;
 }
+.save-layer .diff-form {
+    height: 200px;
+}
+.diff-view {
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+}
 
 /* Media queries */
 

Playground/index-local.html

@@ -57,6 +57,7 @@
             <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
             <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
             <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="diffButton1280"><img src="css/img/diffButton.svg"></div>
             <div class="buttonPG select" id="menuButton1280"><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>
@@ -124,6 +125,7 @@
             <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
             <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
             <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="diffButton1024"><img src="css/img/diffButton.svg"></div>
 
             <div class="buttonPG select" id="menuButton1024"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
@@ -192,6 +194,8 @@
                     <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="diffButtonMobile"><img src="css/img/DiffButton.svg">Diff
+                    </div>
                     <div class="option noSubSelect" id="debugButtonMobile"><img
                             src="css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect">
@@ -342,6 +346,26 @@
         </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">
+
+            <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 id="diffView" class="diff-view">
+    </div>
+
     <div id="waitDiv">
         <div id="logo-part">
             <img src="css/img/v4.svg" id="waitLogo" />

Playground/index.html

@@ -69,6 +69,7 @@
             <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
             <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
             <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="diffButton1280"><img src="css/img/diffButton.svg"></div>
             <div class="buttonPG select" id="menuButton1280"><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>
@@ -136,6 +137,7 @@
             <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
             <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
             <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="diffButton1024"><img src="css/img/diffButton.svg"></div>
 
             <div class="buttonPG select" id="menuButton1024"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
@@ -204,6 +206,8 @@
                     <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="diffButtonMobile"><img src="css/img/DiffButton.svg">Diff
+                    </div>
                     <div class="option noSubSelect" id="debugButtonMobile"><img
                             src="css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect">
@@ -354,6 +358,26 @@
         </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">
+
+            <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 id="diffView" class="diff-view">
+    </div>    
+
     <div id="waitDiv">
         <div id="logo-part">
             <img src="css/img/v4.svg" id="waitLogo" />

Playground/js/main.js

@@ -232,6 +232,13 @@ class Main {
         document.getElementById("saveFormButtonCancel").addEventListener("click", function () {
             document.getElementById("saveLayer").style.display = "none";
         });
+        document.getElementById("diffFormButtonOk").addEventListener("click", function () {
+            document.getElementById("diffLayer").style.display = "none";
+            this.diff();
+        }.bind(this));
+        document.getElementById("diffFormButtonCancel").addEventListener("click", function () {
+            document.getElementById("diffLayer").style.display = "none";
+        });
 
         // Resize the render view when resizing the window
         window.addEventListener("resize",
@@ -271,6 +278,8 @@ class Main {
         }.bind(this));
         // Save
         this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
+        // Diff
+        this.parent.utils.setToMultipleID("diffButton", "click", this.askForDiff.bind(this));
         // Zip
         this.parent.utils.setToMultipleID("zipButton", "click", function () {
             this.parent.zipTool.getZip(engine);
@@ -768,7 +777,53 @@ class Main {
         }
     };
 
+    askForDiff() {
+        const diffLayer = document.getElementById("diffLayer");
+        const right = document.getElementById("diffFormCompareTo");
+
+        if (this.previousHash && right.value === "") {
+            // Use the previous snippet hash for right comparison, if present
+            right.value = this.previousHash;
+        } 
+
+        diffLayer.style.display = "block";
+    }
+
+    async loadSnippetCode(snippetid) {
+        if (!snippetid || snippetid === "")
+            return "";
+
+        let response = await fetch(`${this.snippetV3Url}/${snippetid.replace(/#/g, "/")}`);
+        if (!response.ok)
+            throw new Error(`Unable to load snippet ${snippetid}`)
 
+        let result = await response.json();
+        return JSON.parse(result.jsonPayload).code.toString();
+    }
+	
+	async getSnippetCode(value) {
+        if (!value || value === "") {
+            // use current snippet
+            return this.parent.monacoCreator.JsEditor.getValue();
+        } else {
+            // load script
+            return await this.loadSnippetCode(value);
+        }
+    }
+
+    async diff() {
+        try {
+            const leftText = await this.getSnippetCode(document.getElementById("diffFormSource").value);
+            const rightText = await this.getSnippetCode(document.getElementById("diffFormCompareTo").value);
+            const diffView = document.getElementById("diffView");
+
+            diffView.style.display = "block";
+            this.parent.monacoCreator.createDiff(leftText, rightText, diffView);
+        } catch(e) {
+            // only pass the message, we don't want to inspect the stacktrace in this case
+            this.parent.utils.showError(e.message, null);
+        }
+    }
 
     /**
          * Toggle the code editor

Playground/js/monacoCreator.js

@@ -137,11 +137,11 @@ class MonacoCreator {
                 return [ { label: label } ];
             },
 
-            provideDocumentColors: () => {
+            provideDocumentColors: (model) => {
                 const digitGroup = "\\s*(\\d*(?:\\.\\d+)?)\\s*";
                 // we add \n{0} to workaround a Monaco bug, when setting regex options on their side
                 const regex = `BABYLON\\.Color(?:3|4)\\s*\\(${digitGroup},${digitGroup},${digitGroup}(?:,${digitGroup})?\\)\\n{0}`;
-                const matches = this.jsEditor.getModel().findMatches(regex, null, true, true, null, true);
+                const matches = model.findMatches(regex, null, true, true, null, true);
 
                 const converter = (g) => g === undefined ? undefined : Number(g);
 
@@ -168,6 +168,41 @@ class MonacoCreator {
         }.bind(this));
     };
 
+    detectLanguage(text) {
+        return text && text.indexOf("class Playground") >= 0 ? "typescript" : "javascript";
+    }
+
+    createDiff(left, right, diffView) {
+        const language = this.detectLanguage(left);
+        let leftModel = monaco.editor.createModel(left, language);
+        let rightModel = monaco.editor.createModel(right, language);
+        const diffOptions = {
+            contextmenu: false,
+            lineNumbers: true,
+            readOnly: true,
+            theme: this.parent.settingsPG.vsTheme,
+            contextmenu: false,
+            fontSize: this.parent.settingsPG.fontSize
+        }
+       
+        const diffEditor = monaco.editor.createDiffEditor(diffView, diffOptions);
+        diffEditor.setModel({
+            original: leftModel,
+            modified: rightModel
+        });
+
+        const cleanup = function() {
+            diffView.style.display = "none";
+            // We need to properly dispose, else the monaco script editor will use those models in the editor compilation pipeline!
+            leftModel.dispose();
+            rightModel.dispose();
+            diffEditor.dispose();
+        }
+
+        diffEditor.addCommand(monaco.KeyCode.Escape, cleanup);
+        diffEditor.focus();
+    }
+
     /**
      * Format the code in the editor
      */

dist/preview release/what's new.md

@@ -81,6 +81,7 @@
 - Bumped Monaco Editor to 0.18.1 and improved TypeScript compilation pipeline in the playground ([sailro](http://www.github.com/sailro))
 - Added support for clickable errors in the playground ([sailro](http://www.github.com/sailro))
 - Added a color picker and previewer for BABYLON.ColorX invocations in the playground ([sailro](http://www.github.com/sailro))
+- Added support for diffing snippets in the playground ([sailro](http://www.github.com/sailro))
 
 ### Meshes