Merge pull request #6136 from leon/feature/smaller-step-size-for-rotation

Allow smaller step size for rotation values in inspector

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

@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 
 export interface IBooleanLineComponentProps {
-    label: string,
-    value: boolean
+    label: string;
+    value: boolean;
 }
 
 export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 
 export interface IButtonLineComponentProps {
-    label: string,
-    onClick: () => void
+    label: string;
+    onClick: () => void;
 }
 
 export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 
 interface IFileButtonLineComponentProps {
-    label: string,
-    onClick: (file: File) => void,
-    accept: string
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
 }
 
 export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {

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

@@ -3,9 +3,9 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface IMessageLineComponentProps {
-    text: string,
-    color?: string,
-    icon?: IconProp
+    text: string;
+    color?: string;
+    icon?: IconProp;
 }
 
 export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {

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

@@ -1,12 +1,18 @@
 import * as React from "react";
 
 interface INumericInputComponentProps {
-    label: string,
-    value: number,
-    onChange: (value: number) => void
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
 }
 
 export class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {
+
+    static defaultProps = {
+        step: 1,
+    };
+
     private _localChange = false;
     constructor(props: INumericInputComponentProps) {
         super(props);
@@ -56,8 +62,8 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
                         {`${this.props.label}: `}
                     </div>
                 }
-                <input type="number" step="1" className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt)} />
+                <input type="number" step={this.props.step} className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt)} />
             </div>
         )
     }
-}
+}

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

@@ -7,10 +7,10 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 interface IQuaternionLineComponentProps {
-    label: string,
-    target: any,
-    propertyName: string,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class QuaternionLineComponent extends React.Component<IQuaternionLineComponentProps, { isExpanded: boolean, value: Quaternion }> {

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

@@ -3,10 +3,10 @@ import { Nullable } from "babylonjs/types";
 import { Observer, Observable } from "babylonjs/Misc/observable";
 
 interface IRadioButtonLineComponentProps {
-    onSelectionChangedObservable: Observable<RadioButtonLineComponent>,
-    label: string,
-    isSelected: () => boolean,
-    onSelect: () => void
+    onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
+    label: string;
+    isSelected: () => boolean;
+    onSelect: () => void;
 }
 
 export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, { isSelected: boolean }> {

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

@@ -3,17 +3,17 @@ import { Observable } from "babylonjs/Misc/observable";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 interface ISliderLineComponentProps {
-    label: string,
-    target?: any,
-    propertyName?: string,
-    minimum: number,
-    maximum: number,
-    step: number,
-    directValue?: number,
-    onChange?: (value: number) => void,
-    onInput?: (value: number) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
-    decimalCount?: number
+    label: string;
+    target?: any;
+    propertyName?: string;
+    minimum: number;
+    maximum: number;
+    step: number;
+    directValue?: number;
+    onChange?: (value: number) => void;
+    onInput?: (value: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    decimalCount?: number;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {

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

@@ -4,13 +4,13 @@ import { PropertyChangedEvent } from "../../../components/propertyChangedEvent";
 import { LockObject } from "../tabs/propertyGrids/lockObject";
 
 interface ITextInputLineComponentProps {
-    label: string,
-    lockObject: LockObject,
-    target?: any,
-    propertyName?: string,
-    value?: string,
-    onChange?: (value: string) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    lockObject: LockObject;
+    target?: any;
+    propertyName?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, { value: string }> {

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 
 interface ITextLineComponentProps {
-    label: string,
-    value: string,
-    color?: string,
-    underline?: boolean,
-    onLink?: () => void
+    label: string;
+    value: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
 }
 
 export class TextLineComponent extends React.Component<ITextLineComponentProps> {

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

@@ -10,10 +10,10 @@ import { PassPostProcess, PassCubePostProcess } from "babylonjs/PostProcesses/pa
 import { GlobalState } from "../../../components/globalState";
 
 interface ITextureLineComponentProps {
-    texture: BaseTexture,
-    width: number,
-    height: number,
-    globalState: GlobalState
+    texture: BaseTexture;
+    width: number;
+    height: number;
+    globalState: GlobalState;
 }
 
 export class TextureLineComponent extends React.Component<ITextureLineComponentProps, { displayRed: boolean, displayGreen: boolean, displayBlue: boolean, displayAlpha: boolean, face: number }> {

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 
 interface IValueLineComponentProps {
-    label: string,
-    value: number,
-    color?: string,
-    fractionDigits?: number,
-    units?: string
+    label: string;
+    value: number;
+    color?: string;
+    fractionDigits?: number;
+    units?: string;
 }
 
 export class ValueLineComponent extends React.Component<IValueLineComponentProps> {

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

@@ -8,11 +8,11 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 interface IVector2LineComponentProps {
-    label: string,
-    target: any,
-    propertyName: string,
-    onChange?: (newvalue: Vector2) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    target: any;
+    propertyName: string;
+    onChange?: (newvalue: Vector2) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, { isExpanded: boolean, value: Vector2 }> {

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

@@ -8,14 +8,20 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 interface IVector3LineComponentProps {
-    label: string,
-    target: any,
-    propertyName: string,
-    onChange?: (newvalue: Vector3) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newvalue: Vector3) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, { isExpanded: boolean, value: Vector3 }> {
+
+    static defaultProps = {
+        step: 1,
+    };
+
     private _localChange = false;
 
     constructor(props: IVector3LineComponentProps) {
@@ -107,9 +113,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
                 {
                     this.state.isExpanded &&
                     <div className="secondLine">
-                        <NumericInputComponent label="x" value={this.state.value.x} onChange={value => this.updateStateX(value)} />
-                        <NumericInputComponent label="y" value={this.state.value.y} onChange={value => this.updateStateY(value)} />
-                        <NumericInputComponent label="z" value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
+                        <NumericInputComponent label="x" step={this.props.step} value={this.state.value.x} onChange={value => this.updateStateX(value)} />
+                        <NumericInputComponent label="y" step={this.props.step} value={this.state.value.y} onChange={value => this.updateStateY(value)} />
+                        <NumericInputComponent label="z" step={this.props.step} value={this.state.value.z} onChange={value => this.updateStateZ(value)} />
                     </div>
                 }
             </div>

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/bonePropertyGridComponent.tsx

@@ -36,7 +36,7 @@ export class BonePropertyGridComponent extends React.Component<IBonePropertyGrid
                     <Vector3LineComponent label="Position" target={bone} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         !bone.rotationQuaternion &&
-                        <Vector3LineComponent label="Rotation" target={bone} propertyName="rotation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Vector3LineComponent label="Rotation" target={bone} propertyName="rotation" step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     {
                         bone.rotationQuaternion &&

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -222,7 +222,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     <Vector3LineComponent label="Position" target={mesh} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         !mesh.rotationQuaternion &&
-                        <Vector3LineComponent label="Rotation" target={mesh} propertyName="rotation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Vector3LineComponent label="Rotation" target={mesh} propertyName="rotation" step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     {
                         mesh.rotationQuaternion &&

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/transformNodePropertyGridComponent.tsx

@@ -43,7 +43,7 @@ export class TransformNodePropertyGridComponent extends React.Component<ITransfo
                     <Vector3LineComponent label="Position" target={transformNode} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         !transformNode.rotationQuaternion &&
-                        <Vector3LineComponent label="Rotation" target={transformNode} propertyName="rotation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Vector3LineComponent label="Rotation" target={transformNode} propertyName="rotation" step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     {
                         transformNode.rotationQuaternion &&