浏览代码

adding input to slider

Pamela Wolf 4 年之前
父节点
当前提交
a6c161f418

+ 38 - 7
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 50px;
 
-        .label {
+        .label { 
             grid-column: 1;
             display: flex;
             align-items: center;
         }
 
         .slider {
-            grid-column: 2;
+            grid-column: 3;
+            grid-row: 1;
             margin-right: 5px;
-            
+            width: 100%;
             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,

+ 1 - 1
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();

+ 1 - 1
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();    
                                 }

+ 16 - 1
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,26 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     }
 
     render() {
+
+        const input = this.props.globalState ?
+        <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> : null;
+
         let decimalCount = this.props.decimalCount !== undefined ? this.props.decimalCount : 2;
+        const valueDisplay = this.state.value ? this.prepareDataToRead(this.state.value).toFixed(decimalCount) : "0";
+
         return (
             <div className="sliderLine">
                 <div className="label">
                     {this.props.label}
                 </div>
+                {input}
                 <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)}
+                    {this.props.globalState? null : valueDisplay }&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)}
                         onInput={evt => this.onInput((evt.target as HTMLInputElement).value)}
                         onChange={evt => this.onChange(evt.target.value)} />
                 </div>