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

This commit is contained in:
Poovizhi99 2025-06-11 10:44:13 +05:30
parent d147d73907
commit ef6c0c6cbb
4 changed files with 56 additions and 7 deletions

View File

@ -1,7 +1,9 @@
import React from "react"; import React from "react";
import { import {
useLoadingProgress, useLoadingProgress,
useRenameModeStore,
useSaveVersion, useSaveVersion,
useSelectedFloorItem,
useSocketStore, useSocketStore,
useWidgetSubOption, useWidgetSubOption,
} from "../../../store/builder/store"; } from "../../../store/builder/store";
@ -30,6 +32,9 @@ import {
import { useProductContext } from "../../../modules/simulation/products/productContext"; import { useProductContext } from "../../../modules/simulation/products/productContext";
import { useProductStore } from "../../../store/simulation/useProductStore"; import { useProductStore } from "../../../store/simulation/useProductStore";
import RegularDropDown from "../../ui/inputs/RegularDropDown"; 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() { function MainScene() {
const { products } = useProductStore(); const { products } = useProductStore();
@ -47,13 +52,30 @@ function MainScene() {
const { selectedZone } = useSelectedZoneStore(); const { selectedZone } = useSelectedZoneStore();
const { setFloatingWidget } = useFloatingWidget(); const { setFloatingWidget } = useFloatingWidget();
const { comparisonProduct } = useComparisonProduct(); const { comparisonProduct } = useComparisonProduct();
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { setName } = useAssetsStore();
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
const handleSelectLayout = (option: string) => { const handleSelectLayout = (option: string) => {
const product = products.find((product) => product.productName === option); const product = products.find((product) => product.productName === option);
if (product) { if (product) {
setMainProduct(product.productUuid, product.productName); 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 ( return (
<> <>
@ -79,6 +101,7 @@ function MainScene() {
{(isPlaying || comparisonProduct !== null) && {(isPlaying || comparisonProduct !== null) &&
activeModule !== "simulation" && <ControlsPlayer />} activeModule !== "simulation" && <ControlsPlayer />}
{isRenameMode && selectedFloorItem?.userData.modelName && <RenameTooltip name={selectedFloorItem?.userData.modelName} onSubmit={handleObjectRename} />}
{/* remove this later */} {/* remove this later */}
{activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />} {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
</> </>

View File

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

View File

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

View File

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