ソースを参照

adding input to all sliders

Pamela Wolf 4 年 前
コミット
4d24737845

+ 2 - 2
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);

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

+ 1 - 1
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>

+ 8 - 14
nodeEditor/src/sharedComponents/sliderLineComponent.tsx

@@ -18,7 +18,7 @@ interface ISliderLineComponentProps {
     onInput?: (value: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     decimalCount?: number;
-    globalState?: GlobalState;
+    globalState: GlobalState;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -104,25 +104,19 @@ 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}
+                <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.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)}
+                    <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>