feat: now control rotations as degrees

editor/src/editor/layout/inspector/fields/number.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Scalar } from "babylonjs";
+import { Scalar, Tools } from "babylonjs";
 
 import { registerSimpleUndoRedo } from "../../../../tools/undoredo";
 import { getInspectorPropertyValue, setInspectorEffectivePropertyValue } from "../../../../tools/property";
@@ -12,19 +12,27 @@ export interface IEditorInspectorNumberFieldProps extends IEditorInspectorFieldP
     max?: number;
 
     step?: number;
+    asDegrees?: boolean;
 
     onChange?: (value: number) => void;
 }
 
 export function EditorInspectorNumberField(props: IEditorInspectorNumberFieldProps) {
     const [pointerDown, setPointerDown] = useState(false);
 
-    const [value, setValue] = useState<string>(getInspectorPropertyValue(props.object, props.property)?.toString() ?? "");
-    const [oldValue, setOldValue] = useState<string>(getInspectorPropertyValue(props.object, props.property)?.toString() ?? "");
-
     const step = props.step ?? 0.01;
     const digitCount = props.step?.toString().split(".")[1]?.length ?? 2;
 
+    let startValue = getInspectorPropertyValue(props.object, props.property) ?? 0;
+    if (props.asDegrees) {
+        startValue = Tools.ToDegrees(startValue).toFixed(digitCount);
+    } else {
+        startValue = startValue.toFixed(digitCount);
+    }
+
+    const [value, setValue] = useState<string>(startValue);
+    const [oldValue, setOldValue] = useState<string>(startValue);
+
     const hasMinMax = props.min !== undefined && props.max !== undefined;
     const ratio = hasMinMax ? (Scalar.InverseLerp(props.min!, props.max!, parseFloat(value)) * 100).toFixed(0) : 0;
 
@@ -46,12 +54,16 @@ export function EditorInspectorNumberField(props: IEditorInspectorNumberFieldPro
                     if (!isNaN(float)) {
                         if (props.min !== undefined && float < props.min) {
                             float = props.min;
-                            setValue(float.toString());
+                            setValue(float.toFixed(digitCount));
                         }
 
                         if (props.max !== undefined && float > props.max) {
                             float = props.max;
-                            setValue(float.toString());
+                            setValue(float.toFixed(digitCount));
+                        }
+
+                        if (props.asDegrees) {
+                            float = Tools.ToRadians(float);
                         }
 
                         setInspectorEffectivePropertyValue(props.object, props.property, float);
@@ -66,10 +78,15 @@ export function EditorInspectorNumberField(props: IEditorInspectorNumberFieldPro
                 onKeyUp={(ev) => ev.key === "Enter" && ev.currentTarget.blur()}
                 onBlur={(ev) => {
                     if (ev.currentTarget.value !== oldValue && !props.noUndoRedo) {
-                        const oldValueFloat = parseFloat(oldValue);
-                        const newValueFloat = parseFloat(ev.currentTarget.value);
+                        let oldValueFloat = parseFloat(oldValue);
+                        let newValueFloat = parseFloat(ev.currentTarget.value);
 
                         if (!isNaN(oldValueFloat) && !isNaN(newValueFloat)) {
+                            if (props.asDegrees) {
+                                oldValueFloat = Tools.ToRadians(oldValueFloat);
+                                newValueFloat = Tools.ToRadians(newValueFloat);
+                            }
+
                             registerSimpleUndoRedo({
                                 object: props.object,
                                 property: props.property,
@@ -120,22 +137,34 @@ export function EditorInspectorNumberField(props: IEditorInspectorNumberFieldPro
                         }
 
                         setValue(v.toFixed(digitCount));
-                        setInspectorEffectivePropertyValue(props.object, props.property, v);
-                        props.onChange?.(v);
+
+                        let finalValue = v;
+                        if (props.asDegrees) {
+                            finalValue = Tools.ToRadians(finalValue);
+                        }
+
+                        setInspectorEffectivePropertyValue(props.object, props.property, finalValue);
+                        props.onChange?.(finalValue);
                     });
 
                     document.body.addEventListener("mouseup", mouseUpListener = () => {
                         setPointerDown(false);
-                        setValue(v.toFixed(digitCount));
 
                         if (v !== oldV && !props.noUndoRedo) {
+                            setValue(v.toFixed(digitCount));
+
+                            let finalValue = v;
+                            if (props.asDegrees) {
+                                finalValue = Tools.ToRadians(finalValue);
+                            }
+
                             if (!isNaN(v) && !isNaN(oldV)) {
                                 registerSimpleUndoRedo({
                                     object: props.object,
                                     property: props.property,
 
-                                    oldValue: oldV,
-                                    newValue: v,
+                                    newValue: finalValue,
+                                    oldValue: props.asDegrees ? Tools.ToRadians(oldV) : oldV,
                                 });
 
                                 setOldValue(v.toFixed(digitCount));

editor/src/editor/layout/inspector/fields/vector.tsx

@@ -2,7 +2,8 @@ import { IEditorInspectorFieldProps } from "./field";
 import { EditorInspectorNumberField } from "./number";
 
 export interface IEditorInspectorVectorFieldProps extends IEditorInspectorFieldProps {
-
+    step?: number;
+    asDegrees?: boolean;
 }
 
 export function EditorInspectorVectorField(props: IEditorInspectorVectorFieldProps) {
@@ -13,9 +14,9 @@ export function EditorInspectorVectorField(props: IEditorInspectorVectorFieldPro
             </div>
 
             <div className="flex gap-2">
-                <EditorInspectorNumberField object={props.object} property={`${props.property}.x`} noUndoRedo={props.noUndoRedo} />
-                <EditorInspectorNumberField object={props.object} property={`${props.property}.y`} noUndoRedo={props.noUndoRedo} />
-                <EditorInspectorNumberField object={props.object} property={`${props.property}.z`} noUndoRedo={props.noUndoRedo} />
+                <EditorInspectorNumberField object={props.object} property={`${props.property}.x`} noUndoRedo={props.noUndoRedo} asDegrees={props.asDegrees} step={props.step} />
+                <EditorInspectorNumberField object={props.object} property={`${props.property}.y`} noUndoRedo={props.noUndoRedo} asDegrees={props.asDegrees} step={props.step} />
+                <EditorInspectorNumberField object={props.object} property={`${props.property}.z`} noUndoRedo={props.noUndoRedo} asDegrees={props.asDegrees} step={props.step} />
             </div>
         </div>
     );

editor/src/editor/layout/inspector/transform.tsx

@@ -78,12 +78,12 @@ export class EditorTransformNodeInspector extends Component<IEditorInspectorImpl
             const o = { proxy };
 
             return (
-                <EditorInspectorVectorField label={<div className="w-14">Rotation</div>} object={o} property="proxy" />
+                <EditorInspectorVectorField label={<div className="w-14">Rotation</div>} object={o} property="proxy" asDegrees step={0.1} />
             );
         }
 
         return (
-            <EditorInspectorVectorField label={<div className="w-14">Rotation</div>} object={object} property="rotation" />
+            <EditorInspectorVectorField label={<div className="w-14">Rotation</div>} object={object} property="rotation" asDegrees step={0.1} />
         );
     }
 }