reworking

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

@@ -5,20 +5,19 @@ import { PropertyChangedEvent } from "../../propertyChangedEvent";
 import { LockObject } from "../tabs/propertyGrids/lockObject";
 import { SliderLineComponent } from './sliderLineComponent';
 import { Tools } from 'babylonjs/Misc/tools';
-import { GlobalState } from '../../globalState';
-
 
 interface IFloatLineComponentProps {
     label: string;
     target: any;
     propertyName: string;
+    lockObject?: LockObject;
     onChange?: (newValue: number) => void;
     isInteger?: boolean;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     additionalClass?: string;
-    step?: string;
+    step?: string,
     digits?: number;
-    globalState: GlobalState;
+    useEuler?: boolean;
     min?: number
     max?: number
     smallUI?: boolean;
@@ -28,22 +27,17 @@ interface IFloatLineComponentProps {
 export class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string }> {
     private _localChange = false;
     private _store: number;
-    private _regExp: RegExp;
 
     constructor(props: IFloatLineComponentProps) {
         super(props);
+
         let currentValue = this.props.target[this.props.propertyName];
-        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 2)) : "0" };
+        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : "0" };
         this._store = currentValue;
+    }
 
-        let rexp = "(.*\\.";
-        let numDigits = this.props.digits || 2;
-        while (numDigits--) {
-            rexp += ".";
-        }
-        rexp += ").+";
-
-        this._regExp = new RegExp(rexp);
+    componentWillUnmount() {
+        this.unlock();
     }
 
     shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string }) {
@@ -53,7 +47,7 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
         }
 
         const newValue = nextProps.target[nextProps.propertyName];
-        const newValueString = newValue ? this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 2) : "0";
+        const newValueString = newValue ? this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3) : "0";
 
         if (newValueString !== nextState.value) {
             nextState.value = newValueString;
@@ -79,12 +73,11 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
     }
 
     updateValue(valueString: string) {
+
         if (/[^0-9\.\-]/g.test(valueString)) {
             return;
         }
 
-        valueString = valueString.replace(this._regExp, "$1");
-
         let valueAsNumber: number;
 
         if (this.props.isInteger) {
@@ -93,18 +86,27 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
             valueAsNumber = parseFloat(valueString);
         }
 
+        if (!isNaN(valueAsNumber)) {
+            if (this.props.min !== undefined) {
+                if (valueAsNumber < this.props.min) {
+                    valueAsNumber = this.props.min;
+                    valueString = valueAsNumber.toString();
+                }            
+            }
+            if (this.props.max !== undefined) {
+                if (valueAsNumber > this.props.max) {
+                    valueAsNumber = this.props.max;
+                    valueString = valueAsNumber.toString();
+                }            
+            }
+        }
+
         this._localChange = true;
-        this.setState({ value: valueString});
+        this.setState({ value: valueString });
 
         if (isNaN(valueAsNumber)) {
             return;
         }
-        if(this.props.max != undefined && (valueAsNumber > this.props.max)) {
-            valueAsNumber = this.props.max;
-        }
-        if(this.props.min != undefined && (valueAsNumber < this.props.min)) {
-            valueAsNumber = this.props.min;
-        }
 
         this.props.target[this.props.propertyName] = valueAsNumber;
         this.raiseOnPropertyChanged(valueAsNumber, this._store);
@@ -112,24 +114,39 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
         this._store = valueAsNumber;
     }
 
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+
     render() {
+        let valueAsNumber: number;
+
+        if (this.props.isInteger) {
+            valueAsNumber = parseInt(this.state.value);
+        } else {
+            valueAsNumber = parseFloat(this.state.value);
+        }
+
         let className = this.props.smallUI ? "short": "value";
 
         return (
             <div>
                 {
+                    !this.props.useEuler &&
                     <div className={this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine"}>
                         <div className="label">
                             {this.props.label}
                         </div>
                         <div className={className}>
-                            <input type="number" step={this.props.step || "0.01"} className="numeric-input"
-                            onBlur={(evt) => {
-                                this.props.globalState.blockKeyboardEvents = false;
-                                if(this.props.onEnter) {
-                                    this.props.onEnter(this._store);
-                                }
-                            }}
+                            <input type="number" step={this.props.step || this.props.isInteger ? "1" : "0.01"} className="numeric-input"
                             onKeyDown={evt => {
                                 if (evt.keyCode !== 13) {
                                     return;
@@ -138,13 +155,15 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
                                     this.props.onEnter(this._store);
                                 }
                             }}
-                            onFocus={() => this.props.globalState.blockKeyboardEvents = true}
-                            value={this.state.value} onChange={(evt) => this.updateValue(evt.target.value)} />
+                            value={this.state.value} onBlur={() => this.unlock()} onFocus={() => this.lock()} onChange={evt => this.updateValue(evt.target.value)} />
                         </div>
                     </div>
                 }
+                {
+                    this.props.useEuler &&
+                    <SliderLineComponent label={this.props.label} minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(valueAsNumber)} onChange={value => this.updateValue(Tools.ToRadians(value).toString())} />
+                }
             </div>
         );
     }
-}
-
+}

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

@@ -164,9 +164,9 @@ export class QuaternionLineComponent extends React.Component<IQuaternionLineComp
                 {
                     this.state.isExpanded && this.props.useEuler &&
                     <div className="secondLine">
-                        <SliderLineComponent globalState={this.props.globalState} label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.x)} onChange={value => this.updateStateEulerX(value)} />
-                        <SliderLineComponent globalState={this.props.globalState} label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.y)} onChange={value => this.updateStateEulerY(value)} />
-                        <SliderLineComponent globalState={this.props.globalState} label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(euler.z)} onChange={value => this.updateStateEulerZ(value)} />
+                        <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)} />
                     </div>
                 }
             </div>

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

@@ -3,7 +3,7 @@ import { Observable } from "babylonjs/Misc/observable";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 import { Tools } from 'babylonjs/Misc/tools';
 import { FloatLineComponent } from './floatLineComponent';
-import { GlobalState } from '../../globalState';
+
 
 interface ISliderLineComponentProps {
     label: string;
@@ -18,7 +18,6 @@ interface ISliderLineComponentProps {
     onInput?: (value: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     decimalCount?: number;
-    globalState: GlobalState;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -105,7 +104,7 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     render() {
 
         var 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)}
+        <FloatLineComponent 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)
         }

inspector/src/components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx

@@ -35,7 +35,7 @@ export class CustomPropertyGridComponent extends React.Component<ICustomProperty
                 )
             case InspectableType.Slider:
                 return (
-                    <SliderLineComponent globalState={this.props.globalState} key={inspectable.label} label={inspectable.label} target={this.props.target} propertyName={inspectable.propertyName}
+                    <SliderLineComponent key={inspectable.label} label={inspectable.label} target={this.props.target} propertyName={inspectable.propertyName}
                         step={inspectable.step !== undefined ? inspectable.step : 0.1}
                         minimum={inspectable.min !== undefined ? inspectable.min : 0} maximum={inspectable.max !== undefined ? inspectable.max : 1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 )

inspector/src/components/globalState.ts

@@ -73,7 +73,6 @@ export class GlobalState {
     public recorder = new ReplayRecorder();
 
     private _onlyUseEulers: Nullable<boolean> = null;
-    public blockKeyboardEvents = false;
 
     public get onlyUseEulers(): boolean {
         if (this._onlyUseEulers === null) {