Fix gradient reorder

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

@@ -57,7 +57,19 @@ export class ColorPickerLineComponent extends React.Component<IColorPickerCompon
     }
 
     shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {
-        return nextProps.value.toHexString() !== this.props.value.toHexString() 
+        let diffProps = nextProps.value.toHexString() !== this.props.value.toHexString();
+
+        if (diffProps) {
+            nextState.color =  {
+                r: nextProps.value.r * 255,
+                g: nextProps.value.g * 255,
+                b: nextProps.value.b * 255,
+                a: nextProps instanceof Color4 ? nextProps.a * 100 : 100,
+            };
+            nextState.hex = nextProps.value.toHexString();
+        }
+
+        return diffProps
             || nextProps.disableAlpha !== this.props.disableAlpha 
             || nextState.hex !== this.state.hex
             || nextState.pickerEnabled !== this.state.pickerEnabled;

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

@@ -27,6 +27,16 @@ export class FactorGradientStepGridComponent extends React.Component<IFactorGrad
         this.state={gradient: props.gradient.gradient, factor1: this.props.gradient.factor1.toString(), factor2: this.props.gradient.factor2?.toString()};
     }
 
+    shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {gradient: number, factor1: string, factor2?: string}) {
+        if (nextProps.gradient !== this.props.gradient) {
+            nextState.gradient = nextProps.gradient.gradient;
+            nextState.factor1 = nextProps.gradient.factor1.toString();
+            nextState.factor2 = nextProps.gradient.factor2?.toString();
+        }
+
+        return true;
+    }
+
     updateFactor1(valueString: string) {
         if (/[^0-9\.\-]/g.test(valueString)) {
             return;

src/Misc/gradients.ts

@@ -113,6 +113,13 @@ export class GradientHelper {
      * @param updateFunc defines the callback function used to get the final value from the selected gradients
      */
     public static GetCurrentGradient(ratio: number, gradients: IValueGradient[], updateFunc: (current: IValueGradient, next: IValueGradient, scale: number) => void) {
+
+        // Use last index if over
+        if (gradients[0].gradient > ratio) {
+            updateFunc(gradients[0], gradients[0], 1.0);
+            return;
+        }
+
         for (var gradientIndex = 0; gradientIndex < gradients.length - 1; gradientIndex++) {
             let currentGradient = gradients[gradientIndex];
             let nextGradient = gradients[gradientIndex + 1];

src/Particles/gpuParticleSystem.ts

@@ -254,24 +254,26 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         let colorGradient = new ColorGradient(gradient, color1);
         this._colorGradients.push(colorGradient);
 
-        this._refreshColorGradient();
+        this._refreshColorGradient(true);
 
         this._releaseBuffers();
 
         return this;
     }
 
-    private _refreshColorGradient() {
+    private _refreshColorGradient(reorder = false) {
         if (this._colorGradients) {
-            this._colorGradients.sort((a, b) => {
-                if (a.gradient < b.gradient) {
-                    return -1;
-                } else if (a.gradient > b.gradient) {
-                    return 1;
-                }
-
-                return 0;
-            });
+            if (reorder) {
+                this._colorGradients.sort((a, b) => {
+                    if (a.gradient < b.gradient) {
+                        return -1;
+                    } else if (a.gradient > b.gradient) {
+                        return 1;
+                    }
+
+                    return 0;
+                });
+            }
 
             if (this._colorGradientsTexture) {
                 this._colorGradientsTexture.dispose();
@@ -330,7 +332,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
 
         this._addFactorGradient(this._sizeGradients, gradient, factor);
 
-        this._refreshFactorGradient(this._sizeGradients, "_sizeGradientsTexture");
+        this._refreshFactorGradient(this._sizeGradients, "_sizeGradientsTexture", true);
 
         this._releaseBuffers();
 
@@ -349,20 +351,22 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         return this;
     }
 
-    private _refreshFactorGradient(factorGradients: Nullable<FactorGradient[]>, textureName: string) {
+    private _refreshFactorGradient(factorGradients: Nullable<FactorGradient[]>, textureName: string, reorder = false) {
         if (!factorGradients) {
             return;
         }
 
-        factorGradients.sort((a, b) => {
-            if (a.gradient < b.gradient) {
-                return -1;
-            } else if (a.gradient > b.gradient) {
-                return 1;
-            }
+        if (reorder) {
+            factorGradients.sort((a, b) => {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                } else if (a.gradient > b.gradient) {
+                    return 1;
+                }
 
-            return 0;
-        });
+                return 0;
+            });
+        }
 
         let that = this as any;
         if (that[textureName]) {
@@ -383,7 +387,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         }
 
         this._addFactorGradient(this._angularSpeedGradients, gradient, factor);
-        this._refreshFactorGradient(this._angularSpeedGradients, "_angularSpeedGradientsTexture");
+        this._refreshFactorGradient(this._angularSpeedGradients, "_angularSpeedGradientsTexture", true);
 
         this._releaseBuffers();
 
@@ -414,7 +418,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         }
 
         this._addFactorGradient(this._velocityGradients, gradient, factor);
-        this._refreshFactorGradient(this._velocityGradients, "_velocityGradientsTexture");
+        this._refreshFactorGradient(this._velocityGradients, "_velocityGradientsTexture", true);
 
         this._releaseBuffers();
 
@@ -445,7 +449,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         }
 
         this._addFactorGradient(this._limitVelocityGradients, gradient, factor);
-        this._refreshFactorGradient(this._limitVelocityGradients, "_limitVelocityGradientsTexture");
+        this._refreshFactorGradient(this._limitVelocityGradients, "_limitVelocityGradientsTexture", true);
 
         this._releaseBuffers();
 
@@ -476,7 +480,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         }
 
         this._addFactorGradient(this._dragGradients, gradient, factor);
-        this._refreshFactorGradient(this._dragGradients, "_dragGradientsTexture");
+        this._refreshFactorGradient(this._dragGradients, "_dragGradientsTexture", true);
 
         this._releaseBuffers();