Fix gradient control mode

nodeEditor/src/diagram/properties/gradientNodePropertyComponent.tsx

@@ -41,6 +41,23 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
         this.forceUpdate();
     }
 
+    checkForReOrder() {
+        let gradientBlock = this.props.block as GradientBlock;
+        gradientBlock.colorSteps.sort((a, b) => {
+            if (a.step === b.step) {
+                return 0;
+            }
+
+            if (a.step > b.step) {
+                return 1;
+            }
+
+            return -1;
+        });
+
+        this.forceUpdate();
+    }
+
     render() {
         let gradientBlock = this.props.block as GradientBlock;
       
@@ -53,8 +70,9 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
                         gradientBlock.colorSteps.map((c, i) => {
                             return (
                                 <GradientStepComponent globalState={this.props.globalState} 
+                                onCheckForReOrder={() => this.checkForReOrder()}
                                 onUpdateStep={() => this.forceRebuild()}
-                                key={c.step} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
+                                key={"step-" + i} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
                             )
                         })
                     }

nodeEditor/src/diagram/properties/gradientStepComponent.tsx

@@ -11,6 +11,7 @@ interface IGradientStepComponentProps {
     lineIndex: number;
     onDelete: () => void;
     onUpdateStep: () => void;
+    onCheckForReOrder: () => void;
 }
 
 export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {gradient: number}> {
@@ -36,6 +37,10 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
         this.props.onUpdateStep();
     }
 
+    onPointerUp() {
+        this.props.onCheckForReOrder();
+    }
+
     render() {
         let step = this.props.step;
 
@@ -50,6 +55,7 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
                 </div>
                 <div className="step-slider">
                     <input className="range" type="range" step={0.01} min={0} max={1.0} value={step.step}
+                        onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateStep(parseFloat(evt.target.value))} />
                 </div>
                 <div className="gradient-delete" onClick={() => this.props.onDelete()}>