First step for particle editor in inspector

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { TextLineComponent } from "../../../lines/textLineComponent";
+import { LockObject } from "../lockObject";
+import { GlobalState } from '../../../../globalState';
+import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
+import { IParticleSystem } from 'babylonjs/Particles/IParticleSystem';
+
+interface IParticleSystemPropertyGridComponentProps {
+    globalState: GlobalState;
+    system: IParticleSystem,
+    lockObject: LockObject,
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+}
+
+export class ParticleSystemPropertyGridComponent extends React.Component<IParticleSystemPropertyGridComponentProps> {
+    constructor(props: IParticleSystemPropertyGridComponentProps) {
+        super(props);
+    }
+
+    render() {
+        const system = this.props.system;
+
+        return (
+            <div className="pane">
+                <CustomPropertyGridComponent globalState={this.props.globalState} target={system}
+                    lockObject={this.props.lockObject}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
+                    <TextLineComponent label="ID" value={system.id} />
+                    <TextLineComponent label="Class" value={system.getClassName()} />                    
+                  
+                </LineContainerComponent>                
+            </div>
+        );
+    }
+}

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -19,6 +19,7 @@ import { FreeCamera } from 'babylonjs/Cameras/freeCamera';
 import { DirectionalLight } from 'babylonjs/Lights/directionalLight';
 import { SSAORenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline';
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
+import { ParticleHelper } from 'babylonjs/Particles/particleHelper';
 
 require("./sceneExplorer.scss");
 
@@ -293,7 +294,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             }
         });
 
-        
+        // Materials
         let materialsContextMenus: { label: string, action: () => void }[] = [];
         materialsContextMenus.push({
             label: "Add new node material",
@@ -313,6 +314,16 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             materials.push(...scene.multiMaterials);
         }
 
+        // Particle systems
+        let particleSystemsContextMenus: { label: string, action: () => void }[] = [];
+        particleSystemsContextMenus.push({
+            label: "Add new particle system",
+            action: () => {
+                let newSystem = ParticleHelper.CreateDefault(Vector3.Zero(), 1000, scene);
+                this.props.globalState.onSelectionChangedObservable.notifyObservers(newSystem);
+            }
+        });
+
         return (
             <div id="tree" onContextMenu={e => e.preventDefault()}>
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
@@ -336,6 +347,9 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                 <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups}
                     contextMenuItems={pipelineContextMenus}
                     selectedEntity={this.state.selectedEntity} items={pipelines} label="Rendering pipelines" offset={1} filter={this.state.filter} />
+                <TreeItemComponent globalState={this.props.globalState} 
+                    contextMenuItems={particleSystemsContextMenus} 
+                    extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.particleSystems} label="Particle systems" offset={1} filter={this.state.filter} />
                 {
                     guiElements && guiElements.length > 0 &&
                     <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} filter={this.state.filter} />

src/Particles/IParticleSystem.ts

@@ -312,6 +312,12 @@ export interface IParticleSystem {
      */
     isReady(): boolean;
     /**
+     * Returns the string "ParticleSystem"
+     * @returns a string containing the class name
+     */
+    getClassName(): string;
+
+    /**
      * Adds a new color gradient
      * @param gradient defines the gradient to use (between 0 and 1)
      * @param color1 defines the color to affect to the specified gradient