diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index d299dc9..02c034a 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/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" && } + {isRenameMode && selectedFloorItem?.userData.modelName && } {/* remove this later */} {activeModule === "builder" && !toggleThreeD && } diff --git a/app/src/components/ui/features/RenameTooltip.tsx b/app/src/components/ui/features/RenameTooltip.tsx index 87de122..0419071 100644 --- a/app/src/components/ui/features/RenameTooltip.tsx +++ b/app/src/components/ui/features/RenameTooltip.tsx @@ -12,6 +12,7 @@ type RenameTooltipProps = { }; const RenameTooltip: React.FC = ({ name, onSubmit }) => { + console.log('name: ', name); const [value, setValue] = useState(name); const { top, setTop } = useTopData(); @@ -19,6 +20,7 @@ const RenameTooltip: React.FC = ({ name, onSubmit }) => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); + console.log('value.trim(): ', value.trim()); onSubmit(value.trim()); setTop(0); setLeft(0); diff --git a/app/src/modules/builder/asset/assetsGroup.tsx b/app/src/modules/builder/asset/assetsGroup.tsx index c83eb64..b1533a4 100644 --- a/app/src/modules/builder/asset/assetsGroup.tsx +++ b/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 ( diff --git a/app/src/modules/builder/groups/floorGroup.tsx b/app/src/modules/builder/groups/floorGroup.tsx index 2cf5586..eb77f03 100644 --- a/app/src/modules/builder/groups/floorGroup.tsx +++ b/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; }