Refactor AssetProperties and TransformControl to improve object position and rotation handling; streamline socket store structure for better maintainability

app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
-import { useSelectedFloorItem } from "../../../../store/store";
-import * as THREE from "three";
+import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/store";
 
 interface UserData {
   id: number; // Unique identifier for the user data
@@ -17,6 +16,8 @@ const AssetProperties: React.FC = () => {
   const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
   const [nextId, setNextId] = useState(1); // Unique ID for new entries
   const { selectedFloorItem } = useSelectedFloorItem();
+  const { objectPosition } = useObjectPosition();
+  const { objectRotation } = useObjectRotation();
   // Function to handle adding new user data
   const handleAddUserData = () => {
     const newUserData: UserData = {
@@ -49,17 +50,19 @@ const AssetProperties: React.FC = () => {
       {/* Name */}
       <div className="header">{selectedFloorItem.userData.name}</div>
       <section>
+        {objectPosition.x && objectPosition.z &&
           <PositionInput
-          onChange={() => {}}
-          value1={selectedFloorItem.position.x.toFixed(5)}
-          value2={selectedFloorItem.position.z.toFixed(5)}
+            onChange={() => { }}
+            value1={parseFloat(objectPosition.x.toFixed(5))}
+            value2={parseFloat(objectPosition.z.toFixed(5))}
           />
+        }
+        {objectRotation.y &&
           <RotationInput
-          onChange={() => {}}
-          value={parseFloat(
-            THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
-          )}
+            onChange={() => { }}
+            value={parseFloat(objectRotation.y.toFixed(5))}
           />
+        }
       </section>
 
       <section>

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -167,6 +167,12 @@ export default function TransformControl() {
 
         if (selectedFloorItem) {
             window.addEventListener("keydown", handleKeyDown);
+            setObjectPosition(selectedFloorItem.position);
+            setObjectRotation({
+                x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
+                y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
+                z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
+            });
         } else {
             setTransformMode(null);
         }

app/src/store/store.ts

@@ -297,11 +297,6 @@ export const useObjectPosition = create<any>((set: any) => ({
         set({ objectPosition: newObjectPosition }),
 }));
 
-export const useObjectScale = create<any>((set: any) => ({
-  objectScale: { x: undefined, y: undefined, z: undefined },
-  setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
-}));
-
 export const useObjectRotation = create<any>((set: any) => ({
     objectRotation: { x: undefined, y: undefined, z: undefined },
     setObjectRotation: (newObjectRotation: any) =>
@@ -411,6 +406,7 @@ export const usePlayAgv = create<any>((set, get) => ({
     setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
         set({ PlayAgv: updateFn(get().PlayAgv) }),
 }));
+
 // Define the Asset type
 type Asset = {
     id: string;