From c77abff4248284183b33aea8b91a62df3137ecc2 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Thu, 29 May 2025 14:29:53 +0530 Subject: [PATCH] Implement rename mode functionality and integrate RenameTooltip component; update state management for renaming and mouse interactions in FloorGroup and Project components. --- .../components/ui/features/RenameTooltip.tsx | 7 ++- app/src/modules/builder/groups/floorGroup.tsx | 19 +++++++- .../modules/builder/groups/floorPlanGroup.tsx | 1 - app/src/pages/Project.tsx | 31 +++++++++++++ app/src/store/builder/store.ts | 5 ++ .../utils/shortcutkeys/handleShortcutKeys.ts | 46 ++++++++++++------- 6 files changed, 87 insertions(+), 22 deletions(-) diff --git a/app/src/components/ui/features/RenameTooltip.tsx b/app/src/components/ui/features/RenameTooltip.tsx index 180ba85..87de122 100644 --- a/app/src/components/ui/features/RenameTooltip.tsx +++ b/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 = ({ 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) => { e.preventDefault(); onSubmit(value.trim()); + setTop(0); + setLeft(0); }; return ( diff --git a/app/src/modules/builder/groups/floorGroup.tsx b/app/src/modules/builder/groups/floorGroup.tsx index 2c2a8df..2cf5586 100644 --- a/app/src/modules/builder/groups/floorGroup.tsx +++ b/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); diff --git a/app/src/modules/builder/groups/floorPlanGroup.tsx b/app/src/modules/builder/groups/floorPlanGroup.tsx index dfb52c3..74f0783 100644 --- a/app/src/modules/builder/groups/floorPlanGroup.tsx +++ b/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"); diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 3b75365..3fa0d0f 100644 --- a/app/src/pages/Project.tsx +++ b/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 (
{!selectedUser && ( @@ -161,6 +191,7 @@ const Project: React.FC = () => { >
+ {isRenameMode && selectedFloorItem?.userData.name && } {selectedUser && } {isLogListVisible && ( diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index 01dc754..e8440ce 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -297,6 +297,11 @@ export const useUserName = create((set: any) => ({ setUserName: (x: any) => set({ userName: x }), })); +export const useRenameModeStore = create((set: any) => ({ + isRenameMode: false, + setIsRenameMode: (state: boolean) => set({ isRenameMode: state }), +})); + export const useObjectPosition = create((set: any) => ({ objectPosition: { x: undefined, y: undefined, z: undefined }, setObjectPosition: (newObjectPosition: any) => diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index eb0e3c3..14403fd 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/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;