From cd856ec2e29d39bf43869c3604415ff754c113b6 Mon Sep 17 00:00:00 2001
From: Victor O <olivicmic@deuski.net>
Date: Fri, 26 Apr 2024 23:29:32 -0700
Subject: [PATCH] Feature/translation panel whitespace fixes (#253)

Co-authored-by: Victor <victor@storyteller.ai>
---
 app/components/InputVector.tsx                |  9 ++++----
 .../ControlPanelSceneObject.tsx               | 22 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index d25b4c0d37..66a9ff5f0f 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -33,10 +33,11 @@ export const InputVector = ({
 
   function handleOnChange() {
     const newVector = {
-      x: Number(xRef.current?.value),
-      y: Number(yRef.current?.value),
-      z: Number(zRef.current?.value),
+      x: xRef.current.value === "" ? "" : Number(xRef.current?.value),
+      y: yRef.current.value === "" ? "" : Number(yRef.current?.value),
+      z: zRef.current.value === "" ? "" : Number(zRef.current?.value),
     };
+
     onChange(newVector);
   }
 
@@ -97,7 +98,7 @@ export const InputVector = ({
   };
 
   return (
-    <div className="flex w-full flex-col justify-between gap-1.5">
+    <div className="translation-panel flex w-full flex-col justify-between gap-1.5">
       <span className={twMerge(wrapperCommonClasses, "before:bg-axis-x")}>
         <div className="absolute left-3.5 z-10 font-semibold">X</div>
         <input
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 05a6064983..41ea97f233 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -27,7 +27,7 @@ const formatNumber = (input: string): number => {
   // Convert the number back to a string with at least two decimal places
   const str = num.toFixed(2);
   return parseFloat(str);
-}
+};
 
 // console.log(formatNumber("000123.4567"));  // Outputs: "123.46"
 // console.log(formatNumber("000123.4"));     // Outputs: "123.40"
@@ -44,7 +44,6 @@ export const ControlPanelSceneObject = () => {
     setIsCollapsed(!isCollapsed);
   };
 
-
   const position =
     appUiState.controlPanel.currentSceneObject?.objectVectors?.position;
   const rotation =
@@ -53,7 +52,6 @@ export const ControlPanelSceneObject = () => {
     appUiState.controlPanel.currentSceneObject?.objectVectors?.scale;
   const currentSceneObject = appUiState.controlPanel.currentSceneObject;
 
-
   useEffect(() => {
     // TODO this causes a subtle bug because it renders way too many times.
     if (!appUiState.controlPanel.currentSceneObject) {
@@ -229,9 +227,9 @@ export const ControlPanelSceneObject = () => {
         <div className="flex flex-col gap-1">
           <H5>Location</H5>
           <InputVector
-            x={position?.x || 0}
-            y={position?.y || 0}
-            z={position?.z || 0}
+            x={position ? (position.x === "" ? "" : position.x) : 0}
+            y={position ? (position.y === "" ? "" : position.y) : 0}
+            z={position ? (position.z === "" ? "" : position.z) : 0}
             onChange={handlePositionChange}
           />
         </div>
@@ -239,9 +237,9 @@ export const ControlPanelSceneObject = () => {
         <div className="flex flex-col gap-1">
           <H5>Rotation</H5>
           <InputVector
-            x={rotation?.x || 0}
-            y={rotation?.y || 0}
-            z={rotation?.z || 0}
+            x={rotation ? (rotation.x === "" ? "" : rotation.x) : 0}
+            y={rotation ? (rotation.y === "" ? "" : rotation.y) : 0}
+            z={rotation ? (rotation.z === "" ? "" : rotation.z) : 0}
             onChange={handleRotationChange}
             increment={1}
           />
@@ -250,9 +248,9 @@ export const ControlPanelSceneObject = () => {
         <div className="flex flex-col gap-1">
           <H5>Scale</H5>
           <InputVector
-            x={scale?.x || 0}
-            y={scale?.y || 0}
-            z={scale?.z || 0}
+            x={scale ? (scale.x === "" ? "" : scale.x) : 0}
+            y={scale ? (scale.y === "" ? "" : scale.y) : 0}
+            z={scale ? (scale.z === "" ? "" : scale.z) : 0}
             onChange={handleScaleChange}
           />
         </div>