feat: Integrate rename functionality in MainScene and AssetsGroup; add RenameTooltip component for user interaction

app/src/components/layout/scenes/MainScene.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import {
   useLoadingProgress,
+  useRenameModeStore,
   useSaveVersion,
+  useSelectedFloorItem,
   useSocketStore,
   useWidgetSubOption,
 } from "../../../store/builder/store";
@@ -30,6 +32,9 @@ import {
 import { useProductContext } from "../../../modules/simulation/products/productContext";
 import { useProductStore } from "../../../store/simulation/useProductStore";
 import RegularDropDown from "../../ui/inputs/RegularDropDown";
+import RenameTooltip from "../../ui/features/RenameTooltip";
+import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { useAssetsStore } from "../../../store/builder/useAssetStore";
 
 function MainScene() {
   const { products } = useProductStore();
@@ -47,13 +52,30 @@ function MainScene() {
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
   const { comparisonProduct } = useComparisonProduct();
-
+  const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
+  const { setName } = useAssetsStore();
+  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
   const handleSelectLayout = (option: string) => {
     const product = products.find((product) => product.productName === option);
     if (product) {
       setMainProduct(product.productUuid, product.productName);
     }
   };
+  const handleObjectRename = async (newName: string) => {
+    const email = localStorage.getItem("email") ?? "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    let response = await setFloorItemApi(
+      organization,
+      selectedFloorItem.userData.modelUuid,
+      newName
+    );
+    console.log('selectedFloorItem: ', selectedFloorItem.userData.modelUuid);
+    selectedFloorItem.userData.modelName = newName;
+    setSelectedFloorItem(selectedFloorItem);
+    setIsRenameMode(false);
+
+    setName(selectedFloorItem.userData.modelUuid, newName);
+  }
 
   return (
     <>
@@ -79,6 +101,7 @@ function MainScene() {
           {(isPlaying || comparisonProduct !== null) &&
             activeModule !== "simulation" && <ControlsPlayer />}
 
+          {isRenameMode && selectedFloorItem?.userData.modelName && <RenameTooltip name={selectedFloorItem?.userData.modelName} onSubmit={handleObjectRename} />}
           {/* remove this later */}
           {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
         </>

app/src/components/ui/features/RenameTooltip.tsx

@@ -12,6 +12,7 @@ type RenameTooltipProps = {
 };
 
 const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
+  console.log('name: ', name);
   const [value, setValue] = useState(name);
 
   const { top, setTop } = useTopData();
@@ -19,6 +20,7 @@ const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    console.log('value.trim(): ', value.trim());
     onSubmit(value.trim());
     setTop(0);
     setLeft(0);

app/src/modules/builder/asset/assetsGroup.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three"
 import { useEffect } from 'react'
 import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
-import { useLoadingProgress, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
+import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
@@ -13,6 +13,7 @@ import { useThree } from "@react-three/fiber";
 import { CameraControls } from "@react-three/drei";
 import addAssetModel from "./functions/addAssetModel";
 import { useParams } from "react-router-dom";
+import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
 
 const gltfLoaderWorker = new Worker(
     new URL(
@@ -31,9 +32,12 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
     const { setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedItem, setSelectedItem } = useSelectedItem();
     const { projectId } = useParams();
+    const { isRenameMode, setIsRenameMode } = useRenameModeStore();
     const email = localStorage.getItem("email");
     const organization = email!.split("@")[1].split(".")[0];
     const userId = localStorage.getItem("userId")!;
+    const { setTop } = useTopData();
+    const { setLeft } = useLeftData();
 
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
@@ -257,6 +261,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
 
     useEffect(() => {
         const canvasElement = gl.domElement;
+
         const onDrop = (event: any) => {
             if (!event.dataTransfer?.files[0]) return;
 
@@ -272,11 +277,28 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         const onDragOver = (event: any) => {
             event.preventDefault();
         };
+        const onMouseMove = (evt: any) => {
+            if (!canvasElement) return;
+            const canvasRect = canvasElement.getBoundingClientRect();
+            const relativeX = evt.clientX - canvasRect.left;
+            const relativeY = evt.clientY - canvasRect.top;
+            if (!isRenameMode) {
+                setTop(relativeY);
+                setLeft(relativeX);
+            }
+
+
+        };
+        const onMouseUp = (evt: any) => {
+            setIsRenameMode(false);
+        }
 
 
         if (activeModule === "builder") {
             canvasElement.addEventListener("drop", onDrop);
             canvasElement.addEventListener("dragover", onDragOver);
+            canvasElement.addEventListener("mousemove", onMouseMove);
+            canvasElement.addEventListener("mouseup", onMouseUp);
         } else {
             if ((controls as CameraControls)) {
                 const target = (controls as CameraControls).getTarget(new THREE.Vector3());
@@ -288,8 +310,10 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         return () => {
             canvasElement.removeEventListener("drop", onDrop);
             canvasElement.removeEventListener("dragover", onDragOver);
+            canvasElement.removeEventListener("mousemove", onMouseMove);
+            canvasElement.removeEventListener("mouseup", onMouseUp);
         };
-    }, [selectedItem, camera, pointer, activeModule, controls]);
+    }, [selectedItem, camera, pointer, activeModule, controls, isRenameMode]);
 
     return (
         <Models />

app/src/modules/builder/groups/floorGroup.tsx

@@ -87,10 +87,10 @@ const FloorGroup = ({
       const canvasRect = canvasElement.getBoundingClientRect();
       const relativeX = evt.clientX - canvasRect.left;
       const relativeY = evt.clientY - canvasRect.top;
-      if (!isRenameMode) {
-        setTop(relativeY);
-        setLeft(relativeX);
-      }
+      // if (!isRenameMode) {
+      //   setTop(relativeY);
+      //   setLeft(relativeX);
+      // }
       if (isLeftMouseDown) {
         drag = true;
       }