Added snippet server

inspector/src/components/actionTabs/tabs/propertyGrids/particleSystems/particleSystemPropertyGridComponent.tsx

@@ -50,6 +50,8 @@ interface IParticleSystemPropertyGridComponentProps {
 }
 
 export class ParticleSystemPropertyGridComponent extends React.Component<IParticleSystemPropertyGridComponentProps> {
+    private _snippetUrl = "https://snippet.babylonjs.com";
+
     constructor(props: IParticleSystemPropertyGridComponentProps) {
         super(props);
     }
@@ -176,6 +178,44 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
         }, undefined, true);
     }
 
+    saveToSnippet() {
+        const system = this.props.system;
+        let content = JSON.stringify(system.serialize());
+
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = () => {
+            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;
+                    system.snippetId = snippet.id;
+                    if (snippet.version && snippet.version != "0") {
+                        newUrl += "#" + snippet.version;
+                    }
+                    this.forceUpdate();
+                }
+                else {
+                    alert("Unable to save your particle system");
+                }
+            }
+        }
+
+        xmlHttp.open("POST", this._snippetUrl + (system.snippetId ? "/" + system.snippetId : ""), true);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+
+        var dataToSend = {
+            payload : JSON.stringify({
+                particleSystem: content
+            }),
+            name: "",
+            description: "",
+            tags: ""
+        };
+
+        xmlHttp.send(JSON.stringify(dataToSend));
+    }
+
     render() {
         const system = this.props.system;
 
@@ -219,6 +259,10 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                 <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
                     <TextLineComponent label="ID" value={system.id} />
                     <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={system} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
+                    {
+                        system.snippetId &&
+                        <TextLineComponent label="Snippet ID" value={system.snippetId} />
+                    }
                     <TextLineComponent label="Class" value={system.getClassName()} />  
                     <TextLineComponent label="Capacity" value={system.getCapacity().toString()} />  
                     <TextLineComponent label="Active count" value={system.getActiveCount().toString()} />  
@@ -237,9 +281,10 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                         system.dispose();
                     }} />
                 </LineContainerComponent>
-                <LineContainerComponent globalState={this.props.globalState} title="SERIALIZATION">
+                <LineContainerComponent globalState={this.props.globalState} title="FILE">
                 <FileButtonLineComponent label="Load" onClick={(file) => this.loadFromFile(file)} accept=".json" />
                     <ButtonLineComponent label="Save" onClick={() => this.saveToFile()} />
+                    <ButtonLineComponent label="Save to snippet server" onClick={() => this.saveToSnippet()} />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="EMITTER">
                 <OptionsLineComponent 

src/Particles/IParticleSystem.ts

@@ -247,6 +247,9 @@ export interface IParticleSystem {
      */
     isLocal: boolean;
 
+    /** Snippet ID if the particle system was created from the snippet server */
+    snippetId: string;
+
     /**
      * Gets the maximum number of particles active at the same time.
      * @returns The max number of active particles.

src/Particles/baseParticleSystem.ts

@@ -63,6 +63,11 @@ export class BaseParticleSystem {
     public name: string;
 
     /**
+     * Snippet ID if the particle system was created from the snippet server
+     */
+    public snippetId: string;
+
+    /**
      * The rendering group used by the Particle system to chose when to render.
      */
     public renderingGroupId = 0;

src/Particles/particleHelper.ts

@@ -10,6 +10,7 @@ import { IParticleSystem } from "./IParticleSystem";
 import { GPUParticleSystem } from "./gpuParticleSystem";
 import { ParticleSystemSet } from "./particleSystemSet";
 import { ParticleSystem } from "./particleSystem";
+import { WebRequest } from '../Misc/webRequest';
 /**
  * This class is made for on one-liner static method to help creating particle system set.
  */
@@ -19,6 +20,9 @@ export class ParticleHelper {
      */
     public static BaseAssetsUrl = ParticleSystemSet.BaseAssetsUrl;
 
+    /** Define the Url to load snippets */
+    public static SnippetUrl = "https://snippet.babylonjs.com";
+
     /**
      * Create a default particle system that you can tweak
      * @param emitter defines the emitter to use
@@ -111,4 +115,39 @@ export class ParticleHelper {
 
         return set;
     }
+
+    /**
+     * Creates a node material from a snippet saved by the node material editor
+     * @param snippetId defines the snippet to load
+     * @param scene defines the hosting scene
+     * @param rootUrl defines the root URL to use to load textures and relative dependencies
+     * @returns a promise that will resolve to the new node material
+     */
+    public static CreateFromSnippetAsync(snippetId: string, scene: Scene, gpu: boolean = false, rootUrl: string = ""): Promise<IParticleSystem> {
+        return new Promise((resolve, reject) => {
+            var request = new WebRequest();
+            request.addEventListener("readystatechange", () => {
+                if (request.readyState == 4) {
+                    if (request.status == 200) {
+                        var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
+                        let serializationObject = JSON.parse(snippet.particleSystem);
+                        let output: IParticleSystem;
+
+                        if (gpu) {
+                            output = GPUParticleSystem.Parse(serializationObject, scene, rootUrl);
+                        } else {
+                            output = ParticleSystem.Parse(serializationObject, scene, rootUrl);
+                        }
+                        output.snippetId = snippetId;
+
+                    } else {
+                        reject("Unable to load the snippet " + snippetId);
+                    }
+                }
+            });
+
+            request.open("GET", this.SnippetUrl + "/" + snippetId.replace("#", "/"));
+            request.send();
+        });
+    }
 }