Feature/translation panel whitespace fixes (#253)

Co-authored-by: Victor <victor@storyteller.ai>
This commit is contained in:
Victor OandVictor authored and GitHub committed 2024-04-27 02:29:32 -04:00
1 parent 31792a886e
commit cd856ec2e2
2 files changed
+15 -16

No files matched your search

+5 -4
View File
@@ -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
@@ -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>