Merge pull request #9833 from msDestiny14/msDestiny14/snippet

Adding snippet server loading from URL

dist/preview release/what's new.md

@@ -63,6 +63,7 @@
 - Moving GUI property tab components into GUIEditor. ([msDestiny14](https://github.com/msDestiny14))
 - Adding basic saving and loading funtionality. ([msDestiny14](https://github.com/msDestiny14))
 - Adding more GUI controls. ([msDestiny14](https://github.com/msDestiny14))
+- Adding snippet server from url functionality ([msDestiny14](https://github.com/msDestiny14))
 
 ### GUI
 

guiEditor/public/index.html

@@ -10,7 +10,7 @@
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css"></link>
     <script src="https://preview.babylonjs.com/babylon.js"></script>
-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
     <script src="https://preview.babylonjs.com/guiEditor/babylon.guiEditor.js"></script>    
     
     <style>

guiEditor/public/index.js

@@ -21,26 +21,9 @@ var checkHash = function () {
             cleanHash();
 
             previousHash = location.hash;
-
-            try {
-                var xmlHttp = new XMLHttpRequest();
-                xmlHttp.onreadystatechange = function () {
-                    if (xmlHttp.readyState == 4) {
-                        if (xmlHttp.status == 200) {
-
-                            //var snippet = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload);
-                            showEditor();
-                        }
-                    }
-                }
-
-                var hash = location.hash.substr(1);
-                currentSnippetToken = hash.split("#")[0];
-                xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
-                xmlHttp.send();
-            } catch (e) {
-
-            }
+            var hash = location.hash.substr(1);
+            currentSnippetToken = hash.split("#")[0];
+            showEditor();
         }
     }
 
@@ -54,6 +37,7 @@ var showEditor = function() {
     BABYLON.GuiEditor.Show({
         hostElement: hostElement,
         customLoadObservable: customLoadObservable,
+        currentSnippetToken: currentSnippetToken,
         customSave: {
             label: "Save as unique URL",
             action: (data) => {

guiEditor/src/diagram/workbench.tsx

@@ -139,10 +139,8 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 
     constructor(props: IWorkbenchComponentProps) {
         super(props);
-
         props.globalState.onSelectionChangedObservable.add(selection => {  
             console.log(selection);
-            
             this.selectedGuiNodes.forEach(element => {
                 element.isSelected = false;
             }); 
@@ -202,18 +200,25 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 			return position;
 		}
 		return gridSize * Math.ceil(position / gridSize);
-	}
+    }
+    
+    clearGuiTexture()
+    {
+        while(this._guiNodes.length > 0) {
+            this._guiNodes[this._guiNodes.length-1].dispose();
+            this._guiNodes.pop();
+        }
+    }
 
     loadFromJson(serializationObject: any) {
         this.globalState.onSelectionChangedObservable.notifyObservers(null);
-        this._guiNodes = [];
+        this.clearGuiTexture();
         this.globalState.guiTexture.parseContent(serializationObject);
         this.props.globalState.workbench.loadFromGuiTexture();
-    }
-    
+    }    
     async loadFromSnippet(snippedID: string){
         this.globalState.onSelectionChangedObservable.notifyObservers(null);
-        this._guiNodes = [];
+        this.clearGuiTexture();
         await this.globalState.guiTexture.parseFromSnippetAsync(snippedID);
         this.props.globalState.workbench.loadFromGuiTexture();
     }
@@ -532,7 +537,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         window.addEventListener("resize", function () {
         engine.resize();
         });
-
+        this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(`Please note: This editor is still a work in progress. You may submit feedback to msDestiny14 on GitHub.`);
         engine.runRenderLoop(() => {this.updateGUIs(); scene.render()});
     }
     

guiEditor/src/guiEditor.ts

@@ -4,12 +4,14 @@ import { GlobalState } from "./globalState";
 import { WorkbenchEditor } from "./workbenchEditor";
 import { Popup } from "./sharedUiComponents/lines/popup";
 import { Observable } from "babylonjs/Misc/observable";
+
 /**
  * Interface used to specify creation options for the gui editor
  */
 export interface IGUIEditorOptions {
     hostElement?: HTMLElement;
     customSave?: { label: string; action: (data: string) => Promise<void> };
+    currentSnippetToken?: string;
     customLoadObservable?: Observable<any>;
 }
 
@@ -29,6 +31,14 @@ export class GUIEditor {
             if (popupWindow) {
                 popupWindow.close();
             }
+            if(options.currentSnippetToken) {
+                try {
+                    this._CurrentState.workbench.loadFromSnippet(options.currentSnippetToken);
+                } catch (error) {
+                    //swallow and continue
+                }
+            }
+            return;
         }
 
         let hostElement = options.hostElement;
@@ -46,17 +56,23 @@ export class GUIEditor {
         const graphEditor = React.createElement(WorkbenchEditor, {
             globalState: globalState,
         });
-
+    
         ReactDOM.render(graphEditor, hostElement);
-
         // create the middle workbench canvas
         if (!globalState.guiTexture) {
             globalState.workbench.createGUICanvas();
+            if(options.currentSnippetToken) {
+                try {
+                    globalState.workbench.loadFromSnippet(options.currentSnippetToken);
+                
+                } catch (error) {
+                    //swallow and continue
+                }
+            }
         }
 
         if (options.customLoadObservable) {
             options.customLoadObservable.add((data) => {
-                //TODO: Add deserilization here.
                 globalState.onResetRequiredObservable.notifyObservers();
                 globalState.onBuiltObservable.notifyObservers();
             });