Improve particle editor

inspector/src/components/actionTabs/actionTabs.scss

@@ -217,7 +217,7 @@ $line-padding-left: 2px;
                     padding-left: $line-padding-left;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-columns: 1fr auto 20px;
 
                     .link {
                         grid-column: 1;
@@ -253,6 +253,12 @@ $line-padding-left: 2px;
                             outline: 0px;
                         } 
                     }
+
+                    .link-icon{
+                        grid-column: 3;
+                        display: grid;
+                        align-content: center;
+                    }
                 }
 
                 .textLine {

inspector/src/components/actionTabs/lines/linkButtonComponent.tsx

@@ -1,10 +1,14 @@
 import * as React from "react";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface ILinkButtonComponentProps {
     label: string;
     buttonLabel: string;
     url?: string;
     onClick: () => void;
+    icon?: IconProp;
+    onIconClick?: () => void;
 }
 
 export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
@@ -27,6 +31,16 @@ export class LinkButtonComponent extends React.Component<ILinkButtonComponentPro
                 <div className="link-button">
                     <button onClick={() => this.props.onClick()}>{this.props.buttonLabel}</button>
                 </div> 
+                {
+                    this.props.icon &&
+                    <div className="link-icon hoverIcon" onClick={() => {
+                        if (this.props.onIconClick) {
+                            this.props.onIconClick();
+                        }
+                    }}>
+                        <FontAwesomeIcon icon={this.props.icon} />
+                    </div> 
+                }
             </div>
         );
     }

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

@@ -127,7 +127,7 @@ export class ColorGradientStepGridComponent extends React.Component<IColorGradie
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateGradient(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
+                <div className="gradient-delete hoverIcon" onClick={() => this.props.onDelete()}>
                     <FontAwesomeIcon icon={faTrash} />
                 </div>
             </div>

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

@@ -107,7 +107,7 @@ export class FactorGradientStepGridComponent extends React.Component<IFactorGrad
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateGradient(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
+                <div className="gradient-delete hoverIcon" onClick={() => this.props.onDelete()}>
                     <FontAwesomeIcon icon={faTrash} />
                 </div>
             </div>

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

@@ -491,8 +491,13 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                         lockObject={this.props.lockObject}/>
                 </LineContainerComponent>                  
                 <LineContainerComponent globalState={this.props.globalState} title="SIZE">
-                    <FloatLineComponent lockObject={this.props.lockObject} label="Min size" target={system} propertyName="minSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent lockObject={this.props.lockObject} label="Max size" target={system} propertyName="maxSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    {
+                        (!system.getSizeGradients() || system.getSizeGradients()?.length === 0)&& 
+                        <>
+                            <FloatLineComponent lockObject={this.props.lockObject} label="Min size" target={system} propertyName="minSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <FloatLineComponent lockObject={this.props.lockObject} label="Max size" target={system} propertyName="maxSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        </>
+                    }
                     <FloatLineComponent lockObject={this.props.lockObject} label="Min scale X" target={system} propertyName="minScaleX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Max scale X" target={system} propertyName="maxScaleX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Min scale Y" target={system} propertyName="minScaleY" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
@@ -552,12 +557,17 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     }                    
                 </LineContainerComponent>    
                 <LineContainerComponent globalState={this.props.globalState} title="COLORS">
-                    <Color4LineComponent label="Color 1" target={system} propertyName="color1" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color4LineComponent label="Color 2" target={system} propertyName="color2" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color4LineComponent label="Color dead" target={system} propertyName="colorDead" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />  
+                    {
+                        (!system.getColorGradients() || system.getColorGradients()?.length === 0) &&
+                        <>
+                            <Color4LineComponent label="Color 1" target={system} propertyName="color1" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <Color4LineComponent label="Color 2" target={system} propertyName="color2" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <Color4LineComponent label="Color dead" target={system} propertyName="colorDead" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />  
+                        </>
+                    }
                     <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorGradients()!} 
                         label="Color gradients"
                         docLink="https://doc.babylonjs.com/babylon101/particles#particle-colors"

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

@@ -10,6 +10,7 @@ import { Color4, Color3 } from 'babylonjs/Maths/math.color';
 import { LinkButtonComponent } from '../../../lines/linkButtonComponent';
 import { IParticleSystem } from 'babylonjs/Particles/IParticleSystem';
 import { GPUParticleSystem } from 'babylonjs/Particles/gpuParticleSystem';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 export enum GradientGridMode {
     Factor,
@@ -138,9 +139,23 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
         return (
             <div>
                 {
-                    gradients &&
+                    gradients && gradients.length > 0 &&
                     <div className="gradient-container">
                         <LinkButtonComponent label={this.props.label} url={this.props.docLink} 
+                            icon={faTrash}
+                            onIconClick={() => {
+                                gradients!.length = 0;
+                                this.forceUpdate();
+
+                                if (this.props.host instanceof GPUParticleSystem) {
+                                    this.props.host.forceRefreshGradients();
+                                }
+                    
+                                this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                    object: this.props.host,
+                                    code: `TARGET.${this.props.codeRecorderPropertyName}.length = 0;`
+                                });
+                            }}
                             buttonLabel="Add new step" onClick={() => this.addNewStep()} />
                         {
                             gradients.map((g, i) => {
@@ -184,7 +199,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                     </div>
                 }
                 {
-                    !gradients &&                    
+                    (!gradients || gradients.length === 0) &&                    
                     <ButtonLineComponent label={"Use " + this.props.label} onClick={() => {
                         this.props.onCreateRequired();
                         this.forceUpdate();

src/Particles/index.ts

@@ -11,4 +11,5 @@ export * from "./solidParticle";
 export * from "./solidParticleSystem";
 export * from "./cloudPoint";
 export * from "./pointsCloudSystem";
-export * from "./subEmitter";
+export * from "./subEmitter";
+export * from "./particleSystemDebugger";

src/Particles/particleHelper.ts

@@ -141,6 +141,7 @@ export class ParticleHelper {
                         }
                         output.snippetId = snippetId;
 
+                        resolve(output);
                     } else {
                         reject("Unable to load the snippet " + snippetId);
                     }

src/Particles/particleSystem.ts

@@ -750,7 +750,7 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
      * @returns the current particle system
      */
     public removeStartSizeGradient(gradient: number): IParticleSystem {
-        this._removeFactorGradient(this._emitRateGradients, gradient);
+        this._removeFactorGradient(this._startSizeGradients, gradient);
 
         return this;
     }

src/Particles/particleSystemDebugger.ts

@@ -0,0 +1,17 @@
+import { IDisposable } from "../scene";
+import { IParticleSystem } from './IParticleSystem';
+
+/**
+ * Represents a set of particle systems working together to create a specific effect
+ */
+export class ParticleSystemDebugger implements IDisposable {
+
+    public constructor(public system: IParticleSystem) {
+
+    }
+
+    /** Clear all the resources */
+    public dispose() {
+
+    }
+}