Merge pull request #9215 from BabylonJS/msDestiny14/inspector

Adding Input to Sliders in Inspector

inspector/src/components/actionTabs/actionTabs.scss

@@ -972,10 +972,11 @@ $line-padding-left: 2px;
                 }
 
                 .sliderLine {
-                    padding-left: 2px;
+                    padding-left: $line-padding-left;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-rows: 100%;
+                    grid-template-columns: 1fr 40px;
 
                     .label {
                         grid-column: 1;
@@ -983,12 +984,41 @@ $line-padding-left: 2px;
                         align-items: center;
                     }
 
+                    .withMargins {
+                        margin-left: 5px;
+                    }
+
+                    .floatLine {
+                        padding-left: $line-padding-left;
+                    
+                        .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;
+                            }
+                        }
+                    }  
+
                     .slider {
-                        grid-column: 2;
+                        grid-column: 3;
+                        grid-row: 1;
                         margin-right: 5px;
-                        
+                        width: 90%;
                         display: flex;
-                        align-items: center;
+                        align-items: center;            
 
                         .range {
                             -webkit-appearance: none;

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

@@ -20,6 +20,8 @@ interface IFloatLineComponentProps {
     useEuler?: boolean;
     min?: number;
     max?: number;
+    smallUI?: boolean;
+    onEnter?: (newValue:number) => void;
 }
 
 export class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string }> {
@@ -133,6 +135,8 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
             valueAsNumber = parseFloat(this.state.value);
         }
 
+        let className = this.props.smallUI ? "short": "value";
+
         return (
             <div>
                 {
@@ -141,8 +145,22 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
                         <div className="label">
                             {this.props.label}
                         </div>
-                        <div className="value">
-                            <input type="number" step={this.props.step || this.props.isInteger ? "1" : "0.01"} className="numeric-input" value={this.state.value} onBlur={() => this.unlock()} onFocus={() => this.lock()} onChange={evt => this.updateValue(evt.target.value)} />
+                        <div className={className}>
+                            <input type="number" step={this.props.step || this.props.isInteger ? "1" : "0.01"} className="numeric-input"
+                            onKeyDown={evt => {
+                                if (evt.keyCode !== 13) {
+                                    return;
+                                }
+                                if(this.props.onEnter) {
+                                    this.props.onEnter(this._store);
+                                }
+                            }}
+                            value={this.state.value} onBlur={() => {
+                                this.unlock();
+                                if(this.props.onEnter) {
+                                    this.props.onEnter(this._store);
+                                }
+                            }} onFocus={() => this.lock()} onChange={evt => this.updateValue(evt.target.value)} />
                         </div>
                     </div>
                 }
@@ -153,4 +171,4 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
             </div>
         );
     }
-}
+}

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

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 import { Tools } from 'babylonjs/Misc/tools';
-import { SliderLineComponent } from './sliderLineComponent';
+import { FloatLineComponent } from './floatLineComponent';
 
 interface IQuaternionLineComponentProps {
     label: string;
@@ -134,7 +134,7 @@ export class QuaternionLineComponent extends React.Component<IQuaternionLineComp
             <div className="vector3Line">
                 <div className="firstLine">
                     <div className="label">
-                        {this.props.label}
+                        {this.props.label + (" (Using Quaternion)")} 
                     </div>
                     <div className="vector">
                         {
@@ -162,9 +162,9 @@ export class QuaternionLineComponent extends React.Component<IQuaternionLineComp
                 {
                     this.state.isExpanded && this.props.useEuler &&
                     <div className="secondLine">
-                        <SliderLineComponent label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.x)} onChange={value => this.updateStateEulerX(value)} />
-                        <SliderLineComponent label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.y)} onChange={value => this.updateStateEulerY(value)} />
-                        <SliderLineComponent label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.z)} onChange={value => this.updateStateEulerZ(value)} />
+                        <FloatLineComponent label="x" min={0} max={360} target={euler} propertyName='x' onChange={value => {value = Tools.ToDegrees(euler.x); this.updateStateEulerX(value)} } />
+                        <FloatLineComponent label="y" min={0} max={360} target={euler} propertyName='y' onChange={value => {value = Tools.ToDegrees(euler.y); this.updateStateEulerX(value)} } />
+                        <FloatLineComponent label="z" min={0} max={360} target={euler} propertyName='z' onChange={value => {value = Tools.ToDegrees(euler.z); this.updateStateEulerX(value)} } />
                     </div>
                 }
             </div>

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Observable } from "babylonjs/Misc/observable";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 import { Tools } from 'babylonjs/Misc/tools';
+import { FloatLineComponent } from './floatLineComponent';
 
 interface ISliderLineComponentProps {
     label: string;
@@ -16,6 +17,7 @@ interface ISliderLineComponentProps {
     onInput?: (value: number) => void;    
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     decimalCount?: number;
+    margin?: boolean;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -104,14 +106,21 @@ 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">
+                <div className={this.props.margin ? "label withMargins" : "label"}>
                     {this.props.label}
                 </div>
+                <FloatLineComponent smallUI={true} label="" target={this.state} propertyName="value" min={this.props.minimum} max={this.props.maximum}
+                    onEnter={ () => { 
+                        var changed = this.prepareDataToRead(this.state.value); this.onChange(changed);
+                    }
+                } 
+                onChange={evt => {var changed = this.prepareDataToRead(this.state.value); this.onChange(changed)}} > 
+                </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>

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

@@ -134,9 +134,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
                 {
                     this.state.isExpanded && this.props.useEuler && !this.props.noSlider &&
                     <div className="secondLine">
-                        <SliderLineComponent label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.x)} onChange={value => this.updateStateX(Tools.ToRadians(value))} />
-                        <SliderLineComponent label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.y)} onChange={value => this.updateStateY(Tools.ToRadians(value))} />
-                        <SliderLineComponent label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.z)} onChange={value => this.updateStateZ(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.x)} onChange={value => this.updateStateX(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.y)} onChange={value => this.updateStateY(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.z)} onChange={value => this.updateStateZ(Tools.ToRadians(value))} />
                     </div>
                 }
                 {