Added support for spritesheet for particle editor

inspector/src/components/actionTabs/actionTabs.scss

@@ -236,8 +236,6 @@ $line-padding-left: 2px;
                     .color-picker-float {
                         z-index: 2;
                         position: absolute;  
-                        width: 300px;
-                        height: 300px;
                     }                
                 }
 
@@ -370,6 +368,7 @@ $line-padding-left: 2px;
 
                         .color2{
                             height: 100%;
+                            padding-left: 5px;
                         }
                             
                         .factor1 {

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

@@ -52,8 +52,8 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
             top = window.innerHeight - height - 10;
         }
 
-        div.style.top = top + "px";
-        div.style.left = "10px";
+        div.style.top = top + "px";        
+        div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
     }
 
     shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {
@@ -84,24 +84,25 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
                 {
                     this.state.pickerEnabled &&
                     <>
-                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}></div>
-                        <div className="color-picker-float" ref={this._floatRef}>
-                            <SketchPicker color={color} 
-                                disableAlpha={this.props.disableAlpha}
-                                onChange={(color) => {
-                                    let hex: string;
-
-                                    if (this.props.disableAlpha) {
-                                        let newColor3 = Color3.FromInts(color.rgb.r, color.rgb.g, color.rgb.b);
-                                        hex = newColor3.toHexString();    
-                                    } else {
-                                        let newColor4 = Color4.FromInts(color.rgb.r, color.rgb.g, color.rgb.b, 255 * (color.rgb.a || 0));
-                                        hex = newColor4.toHexString();   
-                                    }
-                                    this.setState({hex: hex, color: color.rgb});
-                                    this.props.onColorChanged(hex);
-                                }}
-                            />
+                        <div className="color-picker-cover" onClick={() => this.setState({pickerEnabled: false})}>
+                            <div className="color-picker-float" ref={this._floatRef}>
+                                <SketchPicker color={color} 
+                                    disableAlpha={this.props.disableAlpha}
+                                    onChange={(color) => {
+                                        let hex: string;
+
+                                        if (this.props.disableAlpha) {
+                                            let newColor3 = Color3.FromInts(color.rgb.r, color.rgb.g, color.rgb.b);
+                                            hex = newColor3.toHexString();    
+                                        } else {
+                                            let newColor4 = Color4.FromInts(color.rgb.r, color.rgb.g, color.rgb.b, 255 * (color.rgb.a || 0));
+                                            hex = newColor4.toHexString();   
+                                        }
+                                        this.setState({hex: hex, color: color.rgb});
+                                        this.props.onColorChanged(hex);
+                                    }}
+                                />
+                            </div>
                         </div>
                     </>
                 }                

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

@@ -41,6 +41,7 @@ import { Tools } from 'babylonjs/Misc/tools';
 import { FileButtonLineComponent } from '../../../lines/fileButtonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
 import { ParticleHelper } from 'babylonjs/Particles/particleHelper';
+import { NumericInputComponent } from '../../../lines/numericInputComponent';
 
 interface IParticleSystemPropertyGridComponentProps {
     globalState: GlobalState;
@@ -299,10 +300,13 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     <TextLineComponent label="Active count" value={system.getActiveCount().toString()} />  
                     <TextureLinkLineComponent label="Texture" texture={system.particleTexture} onSelectionChangedObservable={this.props.onSelectionChangedObservable}/>
                     <OptionsLineComponent label="Blend mode" options={blendModeOptions} target={system} propertyName="blendMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <Vector3LineComponent label="World offset" target={system} propertyName="worldOffset"
+                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Vector3LineComponent label="Gravity" target={system} propertyName="gravity"
                         onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Is billboard" target={system} propertyName="isBillboardBased" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Is local" target={system} propertyName="isLocal" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Force depth write" target={system} propertyName="forceDepthWrite" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Update speed" target={system} propertyName="updateSpeed" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>                      
                 <LineContainerComponent globalState={this.props.globalState} title="COMMANDS">
@@ -674,6 +678,15 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                         mode={GradientGridMode.Factor}                        
                         lockObject={this.props.lockObject}/>                    
                 </LineContainerComponent>  
+                <LineContainerComponent globalState={this.props.globalState} title="SPRITESHEET" closed={true}>
+                    <CheckBoxLineComponent label="Animation sheet enabled" target={system} propertyName="isAnimationSheetEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="First sprite index" isInteger={true} target={system} propertyName="startSpriteCellID" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Last sprite index" isInteger={true} target={system} propertyName="endSpriteCellID" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <CheckBoxLineComponent label="Random start cell index" target={system} propertyName="spriteRandomStartCell" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Cell width" isInteger={true} target={system} propertyName="spriteCellWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Cell height" isInteger={true} target={system} propertyName="spriteCellHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <SliderLineComponent label="Cell change speed" target={system} propertyName="spriteCellChangeSpeed" minimum={0} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                </LineContainerComponent>
             </div>
         );
     }

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -211,7 +211,7 @@
     .color-picker {
         height: calc(100% - 8px);
         margin: 4px;
-        width: 100%;
+        width: calc(100% - 8px);
 
         .color-rect {
             height: calc(100% - 4px);