Merge pull request #9075 from BabylonJS/msDestiny14/nme

Adding Copy-Step for Gradient to Inspector View

inspector/src/components/actionTabs/actionTabs.scss

@@ -142,7 +142,7 @@ $line-padding-left: 2px;
             .gradient-step {
                 display: grid;
                 grid-template-rows: 100%;
-                grid-template-columns: 25px 50px 55px 40px auto 20px 5px;
+                grid-template-columns: 20px 30px 40px auto 20px 30px;
                 padding-top: 5px;
                 padding-left: 5px;
                 padding-bottom: 5px;    
@@ -191,14 +191,14 @@ $line-padding-left: 2px;
                 .step-value {       
                     margin-left: 5px;     
                     grid-row: 1;
-                    grid-column: 4;
+                    grid-column: 3;
                     text-align: right;
                     margin-right: 5px;
                 }
         
                 .step-slider {            
                     grid-row: 1;
-                    grid-column: 5;
+                    grid-column: 4;
                     display: grid;
                     justify-content: stretch;
                     align-content: center;
@@ -238,18 +238,38 @@ $line-padding-left: 2px;
                         background: rgb(51, 122, 183);
                         cursor: pointer;
                     }
-
-                  
-
                 }
                
+                .gradient-copy {            
+                    grid-row: 1;
+                    grid-column: 5;
+                    display: grid;
+                    align-content: center;
+                    justify-content: center;
+         
+                    .img {
+                        height: 20px;
+                        width: 20px;
+                    }
+                    .img:hover {
+                        cursor: pointer;
+                    }
         
+                }
                 .gradient-delete {            
                     grid-row: 1;
                     grid-column: 6;
                     display: grid;
                     align-content: center;
                     justify-content: center;
+                    .img {
+                        height: 20px;
+                        width: 20px;
+                    }
+                    .img:hover {
+                        cursor: pointer;
+                    }
+        
                 }
             }
 

inspector/src/components/actionTabs/tabs/gradientNodePropertyComponent.tsx

@@ -28,6 +28,16 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
         }
     }
 
+    copyStep(step: GradientBlockColorStep) {
+        let gradientBlock = this.props.block as GradientBlock;
+
+        let newStep = new GradientBlockColorStep(1.0, step.color);
+        gradientBlock.colorSteps.push(newStep);
+        gradientBlock.colorStepsUpdated();
+        this.forceRebuild();
+        this.forceUpdate();
+    }
+
     addNewStep() {
         let newStep = new GradientBlockColorStep(1.0, Color3.White());
         this._gradientBlock.colorSteps.push(newStep);
@@ -52,7 +62,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
                             <GradientStepComponent globalState={this.props.globalState} 
                             onCheckForReOrder={() => this.checkForReOrder()}
                             onUpdateStep={() => this.forceRebuild()}
-                            key={"step-" + i} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
+                            key={"step-" + i} lineIndex={i} step={c} onCopy={() => this.copyStep(c)} onDelete={() => this.deleteStep(c)}/>
                         )
                     })
                     }

inspector/src/components/actionTabs/tabs/gradientStepComponent.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { GlobalState } from '../../globalState';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { GradientBlockColorStep } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
 import { ColorPickerLineComponent } from '../lines/colorPickerComponent';
 
+const deleteButton = require('../lines/delete.svg');
+const copyIcon = require('../lines/copyStep.svg');
 
 interface IGradientStepComponentProps {
     globalState: GlobalState;
@@ -14,6 +14,7 @@ interface IGradientStepComponentProps {
     onDelete: () => void;
     onUpdateStep: () => void;
     onCheckForReOrder: () => void;
+    onCopy?: () => void;
 }
 
 export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {gradient: number}> {
@@ -66,8 +67,11 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateStep(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
-                    <FontAwesomeIcon icon={faTrash} />
+                <div className="gradient-copy" onClick={() => {if(this.props.onCopy) this.props.onCopy()}} title="Copy Step">
+                    <img className="img" src={copyIcon} />
+                </div>
+                <div className="gradient-delete" onClick={() => this.props.onDelete()} title={"Delete Step"}>
+                    <img className="img" src={deleteButton}/>
                 </div>
             </div>
         )

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -295,7 +295,7 @@
             grid-column: 6;
             display: grid;
             align-content: center;
-            justify-content: center;;
+            justify-content: center;
             .img {
                 height: 20px;
                 width: 20px;