Merge pull request #9164 from BabylonJS/msDestiny14/nme

NME - Adding input to slider

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -88,28 +88,60 @@
         padding-left: $line-padding-left;
         height: 30px;
         display: grid;
-        grid-template-columns: 1fr auto;
+        grid-template-rows: 100%;
+        grid-template-columns: 1fr 40px;
 
-        .label {
+        .label { 
             grid-column: 1;
             display: flex;
             align-items: center;
         }
 
         .slider {
-            grid-column: 2;
+            grid-column: 3;
+            grid-row: 1;
             margin-right: 5px;
-            
+            width: 90%;
             display: flex;
             align-items: center;
-        }                    
+        }
+
+        .floatLine {
+            padding-left: $line-padding-left;
+    
+            .label {
+                grid-column: 1;
+                display: flex;
+                align-items: center;
+            }
+        
+            .short {
+                grid-column: 1; 
+                display: flex;
+                align-items: center;
+                
+                input {
+                    width: 27px;
+                }
+                
+                input::-webkit-outer-spin-button,
+                input::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  margin: 0;
+                }
+    
+                input[type=number] {
+                    -moz-appearance: textfield;
+                }
+            }
+        }  
     }     
 
     .textInputLine {
         padding-left: $line-padding-left;
         height: 30px;
         display: grid;
-        grid-template-columns: 1fr 120px;
+        grid-template-columns: 1fr 120px auto;
 
         .label {
             grid-column: 1;
@@ -366,7 +398,6 @@
             
             input {
                 width: 27px;
-
             }
             
             input::-webkit-outer-spin-button,

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -113,7 +113,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                             {
                                 !block.isBoolean && !cantDisplaySlider &&
                                 <SliderLineComponent key={block.uniqueId} label={block.name} target={block} propertyName="value"
-                                step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max}
+                                step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max} globalState={this.props.globalState}
                                 onChange={() => this.processInputBlockUpdate(block)}/>
                             }
                         </div>
@@ -405,7 +405,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                             }}
                         />
                         <SliderLineComponent label="Grid size" minimum={0} maximum={100} step={5}
-                            decimalCount={0}
+                            decimalCount={0} globalState={this.props.globalState}
                             directValue={gridSize}
                             onChange={(value) => {
                                 DataStorage.WriteNumber("GridSize", value);

nodeEditor/src/diagram/properties/genericNodePropertyComponent.tsx

@@ -110,7 +110,7 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
                         );
                     } else {
                         components.push(
-                            <SliderLineComponent label={displayName} target={this.props.block} propertyName={propertyName} step={Math.abs((options.max as number) - (options.min as number)) / 100.0} minimum={Math.min(options.min as number, options.max as number)} maximum={options.max as number} onChange={() => this.forceRebuild(options.notifiers)}/>
+                            <SliderLineComponent label={displayName} target={this.props.block} globalState={this.props.globalState} propertyName={propertyName} step={Math.abs((options.max as number) - (options.min as number)) / 100.0} minimum={Math.min(options.min as number, options.max as number)} maximum={options.max as number} onChange={() => this.forceRebuild(options.notifiers)}/>
                         );
                     }
                     break;

nodeEditor/src/diagram/properties/gradientStepComponent.tsx

@@ -63,7 +63,7 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
                 <div className="step-value">
                     <FloatLineComponent globalState={this.props.globalState} smallUI={true} label="" target={step} propertyName="step"
                     min={0} max={1}
-                    onEnter={ evt => { 
+                    onEnter={ () => { 
                             this.props.onUpdateStep();
                             this.props.onCheckForReOrder();
                             this.forceUpdate();

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -82,7 +82,7 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
                         }        
                         {
                             !inputBlock.isBoolean && !cantDisplaySlider &&
-                            <SliderLineComponent label="Value" target={inputBlock} propertyName="value" step={Math.abs(inputBlock.max - inputBlock.min) / 100.0} minimum={Math.min(inputBlock.min, inputBlock.max)} maximum={inputBlock.max} onChange={() => {
+                            <SliderLineComponent label="Value" globalState={this.props.globalState} target={inputBlock} propertyName="value" step={Math.abs(inputBlock.max - inputBlock.min) / 100.0} minimum={Math.min(inputBlock.min, inputBlock.max)} maximum={inputBlock.max} onChange={() => {
                                 if (inputBlock.isConstant) {
                                     this.props.globalState.onRebuildRequiredObservable.notifyObservers();    
                                 }

nodeEditor/src/diagram/properties/texturePropertyTabComponent.tsx

@@ -259,7 +259,7 @@ export class TexturePropertyTabComponent extends React.Component<IPropertyCompon
                     }
                     {
                         texture && !isInReflectionMode && !isFrozenTexture &&
-                        <SliderLineComponent label="Rotation U" target={texture} propertyName="uAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
+                        <SliderLineComponent label="Rotation U" target={texture} globalState={this.props.globalState} propertyName="uAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }}
@@ -267,7 +267,7 @@ export class TexturePropertyTabComponent extends React.Component<IPropertyCompon
                     }
                     {
                         texture && !isInReflectionMode && !isFrozenTexture &&
-                        <SliderLineComponent label="Rotation V" target={texture} propertyName="vAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
+                        <SliderLineComponent label="Rotation V" target={texture} globalState={this.props.globalState} propertyName="vAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }}
@@ -275,7 +275,7 @@ export class TexturePropertyTabComponent extends React.Component<IPropertyCompon
                     }                    
                     {
                         texture && !isInReflectionMode && !isFrozenTexture &&
-                        <SliderLineComponent label="Rotation W" target={texture} propertyName="wAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
+                        <SliderLineComponent label="Rotation W" target={texture} globalState={this.props.globalState} propertyName="wAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }}

nodeEditor/src/sharedComponents/matrixLineComponent.tsx

@@ -162,7 +162,7 @@ export class MatrixLineComponent extends React.Component<IMatrixLineComponentPro
                 {
                     this.state.mode !== 0 &&
                     <div className="secondLine">
-                        <SliderLineComponent label="Angle" minimum={0} maximum={2 * Math.PI} useEuler={true} step={0.1} directValue={this.state.angle} onChange={value => this.updateBasedOnMode(value)}/>
+                        <SliderLineComponent label="Angle" minimum={0} maximum={2 * Math.PI} useEuler={true} step={0.1} globalState={this.props.globalState} directValue={this.state.angle} onChange={value => this.updateBasedOnMode(value)}/>
                     </div>
                 }
             </div>

nodeEditor/src/sharedComponents/sliderLineComponent.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { Observable } from "babylonjs/Misc/observable";
 import { Tools } from 'babylonjs/Misc/tools';
 import { PropertyChangedEvent } from './propertyChangedEvent';
+import { FloatLineComponent } from './floatLineComponent';
+import { GlobalState } from '../globalState';
 
 interface ISliderLineComponentProps {
     label: string;
@@ -16,6 +18,7 @@ interface ISliderLineComponentProps {
     onInput?: (value: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     decimalCount?: number;
+    globalState: GlobalState;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -100,14 +103,20 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     }
 
     render() {
-        let decimalCount = this.props.decimalCount !== undefined ? this.props.decimalCount : 2;
+
         return (
             <div className="sliderLine">
                 <div className="label">
                     {this.props.label}
                 </div>
+                <FloatLineComponent globalState={this.props.globalState} smallUI={true} label="" target={this.state} propertyName="value" min={this.prepareDataToRead(this.props.minimum)} max={this.prepareDataToRead(this.props.maximum)}
+                    onEnter={ () => { 
+                        this.onChange(this.state.value)
+                    }
+                } > 
+                </FloatLineComponent>
                 <div className="slider">
-                    {this.state.value ? this.prepareDataToRead(this.state.value).toFixed(decimalCount) : "0"}&nbsp;<input className="range" type="range" step={this.props.step} min={this.prepareDataToRead(this.props.minimum)} max={this.prepareDataToRead(this.props.maximum)} value={this.prepareDataToRead(this.state.value)}
+                    <input className="range" type="range" step={this.props.step} min={this.prepareDataToRead(this.props.minimum)} max={this.prepareDataToRead(this.props.maximum)} value={this.prepareDataToRead(this.state.value)}
                         onInput={evt => this.onInput((evt.target as HTMLInputElement).value)}
                         onChange={evt => this.onChange(evt.target.value)} />
                 </div>