Implement rename mode functionality and integrate RenameTooltip component; update state management for renaming and mouse interactions in FloorGroup and Project components.

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

@@ -4,6 +4,7 @@ import {
   useLeftData,
   useTopData,
 } from "../../../store/visualization/useZone3DWidgetStore";
+import { useRenameModeStore } from "../../../store/builder/store";
 
 type RenameTooltipProps = {
   name: string;
@@ -13,12 +14,14 @@ type RenameTooltipProps = {
 const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
   const [value, setValue] = useState(name);
 
-  const { top } = useTopData();
-  const { left } = useLeftData();
+  const { top, setTop } = useTopData();
+  const { left, setLeft } = useLeftData();
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     onSubmit(value.trim());
+    setTop(0);
+    setLeft(0);
   };
 
   return (

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

@@ -6,6 +6,7 @@ import {
   useToggleView,
   useWallVisibility,
   useUpdateScene,
+  useRenameModeStore,
 } from "../../../store/builder/store";
 import hideRoof from "../geomentries/roofs/hideRoof";
 import hideWalls from "../geomentries/walls/hideWalls";
@@ -15,6 +16,7 @@ import addPillar from "../geomentries/pillars/addPillar";
 import DeletePillar from "../geomentries/pillars/deletePillar";
 import DeletableHoveredPillar from "../geomentries/pillars/deletableHoveredPillar";
 import loadFloor from "../geomentries/floors/loadFloor";
+import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
 
 const FloorGroup = ({
   floorGroup,
@@ -30,6 +32,9 @@ const FloorGroup = ({
   const { addAction } = useAddAction();
   const { deleteTool } = useDeleteTool();
   const { updateScene, setUpdateScene } = useUpdateScene();
+  const { setTop } = useTopData();
+  const { setLeft } = useLeftData();
+  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
 
   useEffect(() => {
     if (updateScene) {
@@ -55,6 +60,7 @@ const FloorGroup = ({
     let isLeftMouseDown = false;
 
     const onMouseDown = (evt: any) => {
+
       if (evt.button === 0) {
         isLeftMouseDown = true;
         drag = false;
@@ -62,6 +68,7 @@ const FloorGroup = ({
     };
 
     const onMouseUp = (evt: any) => {
+      setIsRenameMode(false);
       if (evt.button === 0) {
         isLeftMouseDown = false;
         if (!drag) {
@@ -75,7 +82,15 @@ const FloorGroup = ({
       }
     };
 
-    const onMouseMove = () => {
+    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);
+      }
       if (isLeftMouseDown) {
         drag = true;
       }
@@ -90,7 +105,7 @@ const FloorGroup = ({
       canvasElement.removeEventListener("mouseup", onMouseUp);
       canvasElement.removeEventListener("mousemove", onMouseMove);
     };
-  }, [deleteTool, addAction]);
+  }, [deleteTool, addAction, isRenameMode]);
 
   useFrame(() => {
     hideRoof(roofVisibility, floorGroup, camera);

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

@@ -50,7 +50,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
         getLines(organization).then((data) => {
 
             const Lines: Types.Lines = objectLinesToArray(data);
-            console.log('Lines: ', Lines);
 
             // const data = localStorage.getItem("Lines");
 

app/src/pages/Project.tsx

@@ -15,6 +15,8 @@ import {
   useLoadingProgress,
   useWidgetSubOption,
   useSaveVersion,
+  useRenameModeStore,
+  useSelectedFloorItem,
 } from "../store/builder/store";
 import { useNavigate } from "react-router-dom";
 import { usePlayButtonStore } from "../store/usePlayButtonStore";
@@ -39,6 +41,8 @@ import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import { useProductStore } from "../store/simulation/useProductStore";
+import RenameTooltip from "../components/ui/features/RenameTooltip";
+import { setFloorItemApi } from "../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -50,10 +54,13 @@ const Project: React.FC = () => {
   const { setUserName } = useUserName();
   const { setOrganization } = useOrganization();
   const { setFloorItems } = useFloorItems();
+  const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
   const { setWallItems } = useWallItems();
   const { setZones } = useZones();
   const { isVersionSaved } = useSaveVersion();
   const { products } = useProductStore();
+  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
+  // console.log('isRenameMode: ', isRenameMode);
 
   useEffect(() => {
     if (!isVersionSaved) {
@@ -112,6 +119,29 @@ const Project: React.FC = () => {
     setSelectedLayout(option); // Set selected layout
     console.log("Selected layout:", option);
   };
+
+  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
+    );
+    selectedFloorItem.userData.name = newName;
+    setSelectedFloorItem(selectedFloorItem);
+    setIsRenameMode(false);
+    setFloorItems((prevFloorItems: any[]) =>
+      prevFloorItems.map((floorItems) =>
+        floorItems.modelUuid === selectedFloorItem.userData.modelUuid
+          .id
+          ? { ...floorItems, modelName: response.modelName }
+          : floorItems
+      )
+    );
+  }
+
+
   return (
     <div className="project-main">
       {!selectedUser && (
@@ -161,6 +191,7 @@ const Project: React.FC = () => {
       >
         <Scene />
       </div>
+      {isRenameMode && selectedFloorItem?.userData.name && <RenameTooltip name={selectedFloorItem?.userData.name} onSubmit={handleObjectRename} />}
       {selectedUser && <FollowPerson />}
       {isLogListVisible && (
         <RenderOverlay>

app/src/store/builder/store.ts

@@ -297,6 +297,11 @@ export const useUserName = create<any>((set: any) => ({
   setUserName: (x: any) => set({ userName: x }),
 }));
 
+export const useRenameModeStore = create<any>((set: any) => ({
+  isRenameMode: false,
+  setIsRenameMode: (state: boolean) => set({ isRenameMode: state }),
+}));
+
 export const useObjectPosition = create<any>((set: any) => ({
   objectPosition: { x: undefined, y: undefined, z: undefined },
   setObjectPosition: (newObjectPosition: any) =>

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -6,7 +6,9 @@ import {
   useActiveTool,
   useAddAction,
   useDeleteTool,
+  useRenameModeStore,
   useSaveVersion,
+  useSelectedFloorItem,
   useSelectedWallItem,
   useShortcutStore,
   useToggleView,
@@ -37,6 +39,8 @@ const KeyPressListener: React.FC = () => {
   const { setIsVersionSaved } = useSaveVersion();
   const { isLogListVisible, setIsLogListVisible } = useLogger();
   const { hidePlayer, setHidePlayer } = usePlayerStore();
+  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
+  const { selectedFloorItem } = useSelectedFloorItem();
 
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
@@ -152,9 +156,24 @@ const KeyPressListener: React.FC = () => {
   };
 
   const handleKeyPress = (event: KeyboardEvent) => {
-    if (isTextInput(document.activeElement)) return;
-
     const keyCombination = detectModifierKeys(event);
+
+    if (isTextInput(document.activeElement) && keyCombination !== "ESCAPE")
+      return;
+
+    if (keyCombination === "ESCAPE") {
+      console.log("esc");
+      setWalkMode(false);
+      setActiveTool("cursor");
+      setActiveSubTool("cursor");
+      setIsPlaying(false);
+      clearSelectedZone();
+      setShowShortcuts(false);
+      setIsVersionSaved(false);
+      setIsLogListVisible(false);
+      setIsRenameMode(false);
+    }
+
     if (
       !keyCombination ||
       ["F5", "F11", "F12"].includes(event.key) ||
@@ -186,26 +205,17 @@ const KeyPressListener: React.FC = () => {
       setHidePlayer(!hidePlayer);
     }
 
-    if (keyCombination === "ESCAPE") {
-      setWalkMode(false);
-      setActiveTool("cursor");
-      setActiveSubTool("cursor");
-      setIsPlaying(false);
-      clearSelectedZone();
-      setShowShortcuts(false);
-      setIsVersionSaved(false);
-      setIsLogListVisible(false);
-    }
-
     if (keyCombination === "Ctrl+Shift+?") {
       setShowShortcuts(!showShortcuts);
     }
 
+    if (selectedFloorItem && keyCombination === "F2") {
+      setIsRenameMode(true);
+    }
+
     // Placeholder for future implementation
     if (
-      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(
-        keyCombination
-      )
+      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(keyCombination)
     ) {
       // Implement undo/redo/help/find/shortcuts
     }
@@ -223,7 +233,9 @@ const KeyPressListener: React.FC = () => {
     showShortcuts,
     isPlaying,
     isLogListVisible,
-    hidePlayer
+    hidePlayer,
+    selectedFloorItem,
+    isRenameMode,
   ]);
 
   return null;