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 { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/store";
-import * as THREE from "three";
 
 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>
-        <PositionInput
+        {objectPosition.x && objectPosition.z &&
-          onChange={() => {}}
+          <PositionInput
-          value1={selectedFloorItem.position.x.toFixed(5)}
+            onChange={() => { }}
-          value2={selectedFloorItem.position.z.toFixed(5)}
+            value1={parseFloat(objectPosition.x.toFixed(5))}
-        />
+            value2={parseFloat(objectPosition.z.toFixed(5))}
-        <RotationInput
+          />
-          onChange={() => {}}
+        }
-          value={parseFloat(
+        {objectRotation.y &&
-            THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
+          <RotationInput
-          )}
+            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

@@ -4,429 +4,425 @@ import { create } from "zustand";
 import { io } from "socket.io-client";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
-  socket: null,
+    socket: null,
-  initializeSocket: (email: string, organization: string) => {
+    initializeSocket: (email: string, organization: string) => {
-    const existingSocket = get().socket;
+        const existingSocket = get().socket;
-    if (existingSocket) {
+        if (existingSocket) {
-      return;
+            return;
-    }
+        }
 
-    const socket = io(
+        const socket = io(
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
+            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
-      {
+            {
-        reconnection: true,
+                reconnection: true,
-        auth: { email, organization },
+                auth: { email, organization },
-      }
+            }
-    );
+        );
 
-    const visualizationSocket = io(
+        const visualizationSocket = io(
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
+            `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
-      {
+            {
-        reconnection: true,
+                reconnection: true,
-        auth: { email, organization },
+                auth: { email, organization },
-      }
+            }
-    );
+        );
 
-    set({ socket, visualizationSocket });
+        set({ socket, visualizationSocket });
-  },
+    },
-  disconnectSocket: () => {
+    disconnectSocket: () => {
-    set((state: any) => {
+        set((state: any) => {
-      state.socket?.disconnect();
+            state.socket?.disconnect();
-      state.visualizationSocket?.disconnect();
+            state.visualizationSocket?.disconnect();
-      return { socket: null };
+            return { socket: null };
-    });
+        });
-  },
+    },
 }));
 
 export const useLoadingProgress = create<{
-  loadingProgress: number;
+    loadingProgress: number;
-  setLoadingProgress: (x: number) => void;
+    setLoadingProgress: (x: number) => void;
 }>((set) => ({
-  loadingProgress: 1,
+    loadingProgress: 1,
-  setLoadingProgress: (x: number) => set({ loadingProgress: x }),
+    setLoadingProgress: (x: number) => set({ loadingProgress: x }),
 }));
 
 export const useOrganization = create<any>((set: any) => ({
-  organization: "",
+    organization: "",
-  setOrganization: (x: any) => set(() => ({ organization: x })),
+    setOrganization: (x: any) => set(() => ({ organization: x })),
 }));
 
 export const useToggleView = create<any>((set: any) => ({
-  toggleView: false,
+    toggleView: false,
-  setToggleView: (x: any) => set(() => ({ toggleView: x })),
+    setToggleView: (x: any) => set(() => ({ toggleView: x })),
 }));
 
 export const useUpdateScene = create<any>((set: any) => ({
-  updateScene: false,
+    updateScene: false,
-  setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
+    setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
 }));
 
 export const useWalls = create<any>((set: any) => ({
-  walls: [],
+    walls: [],
-  setWalls: (x: any) => set(() => ({ walls: x })),
+    setWalls: (x: any) => set(() => ({ walls: x })),
 }));
 
 export const useRoomsState = create<any>((set: any) => ({
-  roomsState: [],
+    roomsState: [],
-  setRoomsState: (x: any) => set(() => ({ roomsState: x })),
+    setRoomsState: (x: any) => set(() => ({ roomsState: x })),
 }));
 
 export const useZones = create<any>((set: any) => ({
-  zones: [],
+    zones: [],
-  setZones: (callback: any) =>
+    setZones: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      zones: typeof callback === "function" ? callback(state.zones) : callback,
+            zones: typeof callback === "function" ? callback(state.zones) : callback,
-    })),
+        })),
 }));
 
 interface ZonePointsState {
-  zonePoints: THREE.Vector3[];
+    zonePoints: THREE.Vector3[];
-  setZonePoints: (points: THREE.Vector3[]) => void;
+    setZonePoints: (points: THREE.Vector3[]) => void;
 }
 
 export const useZonePoints = create<ZonePointsState>((set) => ({
-  zonePoints: [],
+    zonePoints: [],
-  setZonePoints: (points) => set({ zonePoints: points }),
+    setZonePoints: (points) => set({ zonePoints: points }),
 }));
 
 export const useSelectedItem = create<any>((set: any) => ({
-  selectedItem: { name: "", id: "", type: undefined },
+    selectedItem: { name: "", id: "", type: undefined },
-  setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
+    setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
 export const useNavMesh = create<any>((set: any) => ({
-  navMesh: null,
+    navMesh: null,
-  setNavMesh: (x: any) => set({ navMesh: x }),
+    setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
 export const useSelectedAssets = create<any>((set: any) => ({
-  selectedAssets: [],
+    selectedAssets: [],
-  setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
+    setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
 }));
 
 export const useLayers = create<any>((set: any) => ({
-  Layers: 1,
+    Layers: 1,
-  setLayers: (x: any) => set(() => ({ Layers: x })),
+    setLayers: (x: any) => set(() => ({ Layers: x })),
 }));
 
 export const useCamPosition = create<any>((set: any) => ({
-  camPosition: { x: undefined, y: undefined, z: undefined },
+    camPosition: { x: undefined, y: undefined, z: undefined },
-  setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
+    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
 }));
 
 export const useMenuVisible = create<any>((set: any) => ({
-  menuVisible: false,
+    menuVisible: false,
-  setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
+    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
 }));
 
 export const useDeleteTool = create<any>((set: any) => ({
-  deleteTool: false,
+    deleteTool: false,
-  setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
+    setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
 }));
 
 export const useToolMode = create<any>((set: any) => ({
-  toolMode: null,
+    toolMode: null,
-  setToolMode: (x: any) => set(() => ({ toolMode: x })),
+    setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
 export const useNewLines = create<any>((set: any) => ({
-  newLines: [],
+    newLines: [],
-  setNewLines: (x: any) => set(() => ({ newLines: x })),
+    setNewLines: (x: any) => set(() => ({ newLines: x })),
 }));
 
 export const useDeletedLines = create<any>((set: any) => ({
-  deletedLines: [],
+    deletedLines: [],
-  setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
+    setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
 }));
 
 export const useMovePoint = create<any>((set: any) => ({
-  movePoint: false,
+    movePoint: false,
-  setMovePoint: (x: any) => set(() => ({ movePoint: x })),
+    setMovePoint: (x: any) => set(() => ({ movePoint: x })),
 }));
 
 export const useDeletePointOrLine = create<any>((set: any) => ({
-  deletePointOrLine: false,
+    deletePointOrLine: false,
-  setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+    setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
 }));
 
 export const useFloorItems = create<any>((set: any) => ({
-  floorItems: null,
+    floorItems: null,
-  setFloorItems: (callback: any) =>
+    setFloorItems: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      floorItems:
+            floorItems:
-        typeof callback === "function" ? callback(state.floorItems) : callback,
+                typeof callback === "function" ? callback(state.floorItems) : callback,
-    })),
+        })),
 }));
 
 export const useWallItems = create<any>((set: any) => ({
-  wallItems: [],
+    wallItems: [],
-  setWallItems: (callback: any) =>
+    setWallItems: (callback: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      wallItems:
+            wallItems:
-        typeof callback === "function" ? callback(state.wallItems) : callback,
+                typeof callback === "function" ? callback(state.wallItems) : callback,
-    })),
+        })),
 }));
 
 export const useSelectedWallItem = create<any>((set: any) => ({
-  selectedWallItem: null,
+    selectedWallItem: null,
-  setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
+    setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
 }));
 
 export const useSelectedFloorItem = create<any>((set: any) => ({
-  selectedFloorItem: null,
+    selectedFloorItem: null,
-  setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
+    setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
 }));
 
 export const useDeletableFloorItem = create<any>((set: any) => ({
-  deletableFloorItem: null,
+    deletableFloorItem: null,
-  setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
+    setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
 }));
 
 export const useSetScale = create<any>((set: any) => ({
-  scale: null,
+    scale: null,
-  setScale: (x: any) => set(() => ({ scale: x })),
+    setScale: (x: any) => set(() => ({ scale: x })),
 }));
 
 export const useRoofVisibility = create<any>((set: any) => ({
-  roofVisibility: false,
+    roofVisibility: false,
-  setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
+    setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
 }));
 
 export const useWallVisibility = create<any>((set: any) => ({
-  wallVisibility: false,
+    wallVisibility: false,
-  setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
+    setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
 }));
 
 export const useShadows = create<any>((set: any) => ({
-  shadows: false,
+    shadows: false,
-  setShadows: (x: any) => set(() => ({ shadows: x })),
+    setShadows: (x: any) => set(() => ({ shadows: x })),
 }));
 
 export const useSunPosition = create<any>((set: any) => ({
-  sunPosition: { x: undefined, y: undefined, z: undefined },
+    sunPosition: { x: undefined, y: undefined, z: undefined },
-  setSunPosition: (newSuntPosition: any) =>
+    setSunPosition: (newSuntPosition: any) =>
-    set({ sunPosition: newSuntPosition }),
+        set({ sunPosition: newSuntPosition }),
 }));
 
 export const useRemoveLayer = create<any>((set: any) => ({
-  removeLayer: false,
+    removeLayer: false,
-  setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
+    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
 }));
 
 export const useRemovedLayer = create<any>((set: any) => ({
-  removedLayer: null,
+    removedLayer: null,
-  setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
+    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
 }));
 
 export const useActiveLayer = create<any>((set: any) => ({
-  activeLayer: 1,
+    activeLayer: 1,
-  setActiveLayer: (x: any) => set({ activeLayer: x }),
+    setActiveLayer: (x: any) => set({ activeLayer: x }),
 }));
 
 interface RefTextUpdateState {
-  refTextupdate: number;
+    refTextupdate: number;
-  setRefTextUpdate: (
+    setRefTextUpdate: (
-    callback: (currentValue: number) => number | number
+        callback: (currentValue: number) => number | number
-  ) => void;
+    ) => void;
 }
 
 export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
-  refTextupdate: -1000,
+    refTextupdate: -1000,
-  setRefTextUpdate: (callback) =>
+    setRefTextUpdate: (callback) =>
-    set((state) => ({
+        set((state) => ({
-      refTextupdate:
+            refTextupdate:
-        typeof callback === "function"
+                typeof callback === "function"
-          ? callback(state.refTextupdate)
+                    ? callback(state.refTextupdate)
-          : callback,
+                    : callback,
-    })),
+        })),
 }));
 
 export const useResetCamera = create<any>((set: any) => ({
-  resetCamera: false,
+    resetCamera: false,
-  setResetCamera: (x: any) => set({ resetCamera: x }),
+    setResetCamera: (x: any) => set({ resetCamera: x }),
 }));
 
 export const useAddAction = create<any>((set: any) => ({
-  addAction: null,
+    addAction: null,
-  setAddAction: (x: any) => set({ addAction: x }),
+    setAddAction: (x: any) => set({ addAction: x }),
 }));
 
 export const useActiveTool = create<any>((set: any) => ({
-  activeTool: "cursor",
+    activeTool: "cursor",
-  setActiveTool: (x: any) => set({ activeTool: x }),
+    setActiveTool: (x: any) => set({ activeTool: x }),
 }));
 
 export const useActiveSubTool = create<any>((set: any) => ({
-  activeSubTool: "cursor",
+    activeSubTool: "cursor",
-  setActiveSubTool: (x: any) => set({ activeSubTool: x }),
+    setActiveSubTool: (x: any) => set({ activeSubTool: x }),
 }));
 
 export const use2DUndoRedo = create<any>((set: any) => ({
-  is2DUndoRedo: null,
+    is2DUndoRedo: null,
-  set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
+    set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
 }));
 
 export const useElevation = create<any>((set: any) => ({
-  elevation: 45,
+    elevation: 45,
-  setElevation: (x: any) => set({ elevation: x }),
+    setElevation: (x: any) => set({ elevation: x }),
 }));
 
 export const useAzimuth = create<any>((set: any) => ({
-  azimuth: -160,
+    azimuth: -160,
-  setAzimuth: (x: any) => set({ azimuth: x }),
+    setAzimuth: (x: any) => set({ azimuth: x }),
 }));
 
 export const useRenderDistance = create<any>((set: any) => ({
-  renderDistance: 40,
+    renderDistance: 40,
-  setRenderDistance: (x: any) => set({ renderDistance: x }),
+    setRenderDistance: (x: any) => set({ renderDistance: x }),
 }));
 
 export const useCamMode = create<any>((set: any) => ({
-  camMode: "ThirdPerson",
+    camMode: "ThirdPerson",
-  setCamMode: (x: any) => set({ camMode: x }),
+    setCamMode: (x: any) => set({ camMode: x }),
 }));
 
 export const useUserName = create<any>((set: any) => ({
-  userName: "",
+    userName: "",
-  setUserName: (x: any) => set({ userName: x }),
+    setUserName: (x: any) => set({ userName: x }),
 }));
 
 export const useObjectPosition = create<any>((set: any) => ({
-  objectPosition: { x: undefined, y: undefined, z: undefined },
+    objectPosition: { x: undefined, y: undefined, z: undefined },
-  setObjectPosition: (newObjectPosition: any) =>
+    setObjectPosition: (newObjectPosition: any) =>
-    set({ objectPosition: newObjectPosition }),
+        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 },
+    objectRotation: { x: undefined, y: undefined, z: undefined },
-  setObjectRotation: (newObjectRotation: any) =>
+    setObjectRotation: (newObjectRotation: any) =>
-    set({ objectRotation: newObjectRotation }),
+        set({ objectRotation: newObjectRotation }),
 }));
 
 export const useDrieTemp = create<any>((set: any) => ({
-  drieTemp: undefined,
+    drieTemp: undefined,
-  setDrieTemp: (x: any) => set({ drieTemp: x }),
+    setDrieTemp: (x: any) => set({ drieTemp: x }),
 }));
 
 export const useActiveUsers = create<any>((set: any) => ({
-  activeUsers: [],
+    activeUsers: [],
-  setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
+    setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
-    set((state: { activeUsers: any[] }) => ({
+        set((state: { activeUsers: any[] }) => ({
-      activeUsers:
+            activeUsers:
-        typeof callback === "function" ? callback(state.activeUsers) : callback,
+                typeof callback === "function" ? callback(state.activeUsers) : callback,
-    })),
+        })),
 }));
 
 export const useDrieUIValue = create<any>((set: any) => ({
-  drieUIValue: { touch: null, temperature: null, humidity: null },
+    drieUIValue: { touch: null, temperature: null, humidity: null },
 
-  setDrieUIValue: (x: any) =>
+    setDrieUIValue: (x: any) =>
-    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+        set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
 
-  setTouch: (value: any) =>
+    setTouch: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, touch: value },
+            drieUIValue: { ...state.drieUIValue, touch: value },
-    })),
+        })),
-  setTemperature: (value: any) =>
+    setTemperature: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, temperature: value },
+            drieUIValue: { ...state.drieUIValue, temperature: value },
-    })),
+        })),
-  setHumidity: (value: any) =>
+    setHumidity: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      drieUIValue: { ...state.drieUIValue, humidity: value },
+            drieUIValue: { ...state.drieUIValue, humidity: value },
-    })),
+        })),
 }));
 
 export const useStartSimulation = create<any>((set: any) => ({
-  startSimulation: false,
+    startSimulation: false,
-  setStartSimulation: (x: any) => set({ startSimulation: x }),
+    setStartSimulation: (x: any) => set({ startSimulation: x }),
 }));
 
 export const useEyeDropMode = create<any>((set: any) => ({
-  eyeDropMode: false,
+    eyeDropMode: false,
-  setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
+    setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
 }));
 
 export const useEditingPoint = create<any>((set: any) => ({
-  editingPoint: false,
+    editingPoint: false,
-  setEditingPoint: (x: any) => set({ editingPoint: x }),
+    setEditingPoint: (x: any) => set({ editingPoint: x }),
 }));
 
 export const usezoneTarget = create<any>((set: any) => ({
-  zoneTarget: [],
+    zoneTarget: [],
-  setZoneTarget: (x: any) => set({ zoneTarget: x }),
+    setZoneTarget: (x: any) => set({ zoneTarget: x }),
 }));
 
 export const usezonePosition = create<any>((set: any) => ({
-  zonePosition: [],
+    zonePosition: [],
-  setZonePosition: (x: any) => set({ zonePosition: x }),
+    setZonePosition: (x: any) => set({ zonePosition: x }),
 }));
 
 interface EditPositionState {
-  Edit: boolean;
+    Edit: boolean;
-  setEdit: (value: boolean) => void;
+    setEdit: (value: boolean) => void;
 }
 
 export const useEditPosition = create<EditPositionState>((set) => ({
-  Edit: false,
+    Edit: false,
-  setEdit: (value) => set({ Edit: value }),
+    setEdit: (value) => set({ Edit: value }),
 }));
 
 export const useAsset3dWidget = create<any>((set: any) => ({
-  widgetSelect: "",
+    widgetSelect: "",
-  setWidgetSelect: (x: any) => set({ widgetSelect: x }),
+    setWidgetSelect: (x: any) => set({ widgetSelect: x }),
 }));
 
 export const useWidgetSubOption = create<any>((set: any) => ({
-  widgetSubOption: "2D",
+    widgetSubOption: "2D",
-  setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
+    setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
 }));
 export const useLimitDistance = create<any>((set: any) => ({
-  limitDistance: true,
+    limitDistance: true,
-  setLimitDistance: (x: any) => set({ limitDistance: x }),
+    setLimitDistance: (x: any) => set({ limitDistance: x }),
 }));
 
 export const useTileDistance = create<any>((set: any) => ({
-  gridValue: { size: 300, divisions: 75 },
+    gridValue: { size: 300, divisions: 75 },
-  planeValue: { height: 300, width: 300 },
+    planeValue: { height: 300, width: 300 },
 
-  setGridValue: (value: any) =>
+    setGridValue: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      gridValue: { ...state.gridValue, ...value },
+            gridValue: { ...state.gridValue, ...value },
-    })),
+        })),
 
-  setPlaneValue: (value: any) =>
+    setPlaneValue: (value: any) =>
-    set((state: any) => ({
+        set((state: any) => ({
-      planeValue: { ...state.planeValue, ...value },
+            planeValue: { ...state.planeValue, ...value },
-    })),
+        })),
 }));
 
 export const usePlayAgv = create<any>((set, get) => ({
-  PlayAgv: [],
+    PlayAgv: [],
-  setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
+    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
-    set({ PlayAgv: updateFn(get().PlayAgv) }),
+        set({ PlayAgv: updateFn(get().PlayAgv) }),
 }));
+
 // Define the Asset type
 type Asset = {
-  id: string;
+    id: string;
-  name: string;
+    name: string;
-  position?: [number, number, number]; // Optional: 3D position
+    position?: [number, number, number]; // Optional: 3D position
-  rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
+    rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
 };
 
 // Zustand store type
 type ZoneAssetState = {
-  zoneAssetId: Asset | null;
+    zoneAssetId: Asset | null;
-  setZoneAssetId: (asset: Asset | null) => void;
+    setZoneAssetId: (asset: Asset | null) => void;
 };
 
 // Zustand store
 export const useZoneAssetId = create<ZoneAssetState>((set) => ({
-  zoneAssetId: null,
+    zoneAssetId: null,
-  setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
+    setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));