From a477e0c48f251cea611d5ab9d95958e9bb872995 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Fri, 9 May 2025 14:54:45 +0530 Subject: [PATCH] Refactor and enhance zone and wall item management: - Update zone handling in ZoneGroup to include selected zone visibility. - Improve camera transition speed in ZoneCentreTarget. - Add clearSelectedZone functionality in useZoneStore. - Integrate clearSelectedZone in KeyPressListener for ESCAPE key action. - Adjust sidebar and module toggle positioning for better UI layout. - Clean up unused code and comments in Project component. --- app/src/components/ui/list/DropDownList.tsx | 2 +- app/src/modules/builder/groups/floorGroup.tsx | 175 +++---- .../modules/builder/groups/wallItemsGroup.tsx | 455 ++++++++++-------- app/src/modules/builder/groups/zoneGroup.tsx | 21 +- .../visualization/zone/zoneCameraTarget.tsx | 23 +- app/src/pages/Project.tsx | 23 - app/src/store/visualization/useZoneStore.ts | 29 +- app/src/styles/components/moduleToggle.scss | 2 +- app/src/styles/layout/sidebar.scss | 4 +- .../utils/shortcutkeys/handleShortcutKeys.ts | 3 + 10 files changed, 400 insertions(+), 337 deletions(-) diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 89971a2..10ca425 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -141,7 +141,7 @@ const DropDownList: React.FC = ({ value="Buildings" showKebabMenu={false} showAddIcon={false} - items={zoneDataList} + // items={zoneDataList} /> { - const state = useThree(); - const { roofVisibility, setRoofVisibility } = useRoofVisibility(); - const { wallVisibility, setWallVisibility } = useWallVisibility(); - const { toggleView, setToggleView } = useToggleView(); - const { scene, camera, pointer, raycaster, gl } = useThree(); - const { addAction, setAddAction } = useAddAction(); - const { deleteTool, setDeleteTool } = useDeleteTool(); - const { updateScene, setUpdateScene } = useUpdateScene(); +const FloorGroup = ({ + floorGroup, + lines, + referencePole, + hoveredDeletablePillar, +}: any) => { + const state = useThree(); + const { roofVisibility } = useRoofVisibility(); + const { wallVisibility } = useWallVisibility(); + const { toggleView } = useToggleView(); + const { scene, camera, raycaster, gl } = useThree(); + const { addAction } = useAddAction(); + const { deleteTool } = useDeleteTool(); + const { updateScene, setUpdateScene } = useUpdateScene(); - useEffect(() => { - if (updateScene) { - loadFloor(lines, floorGroup); - setUpdateScene(false); + useEffect(() => { + if (updateScene) { + loadFloor(lines, floorGroup); + setUpdateScene(false); + } + }, [updateScene]); + + useEffect(() => { + if (!addAction) { + if (referencePole.current) { + (referencePole.current as any).material.dispose(); + (referencePole.current.geometry as any).dispose(); + floorGroup.current.remove(referencePole.current); + referencePole.current = undefined; + } + } + }, [addAction]); + + useEffect(() => { + const canvasElement = gl.domElement; + let drag = false; + let isLeftMouseDown = false; + + const onMouseDown = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + } + }; + + const onMouseUp = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = false; + if (!drag) { + if (addAction === "pillar") { + addPillar(referencePole, floorGroup); + } + if (deleteTool) { + DeletePillar(hoveredDeletablePillar, floorGroup); + } } - }, [updateScene]) + } + }; - useEffect(() => { - if (!addAction) { - if (referencePole.current) { - (referencePole.current as any).material.dispose(); - (referencePole.current.geometry as any).dispose(); - floorGroup.current.remove(referencePole.current); - referencePole.current = undefined; - } - } - }, [addAction]); + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + }; - useEffect(() => { - const canvasElement = gl.domElement; - let drag = false; - let isLeftMouseDown = false; + canvasElement.addEventListener("mousedown", onMouseDown); + canvasElement.addEventListener("mouseup", onMouseUp); + canvasElement.addEventListener("mousemove", onMouseMove); - const onMouseDown = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = true; - drag = false; - } - }; + return () => { + canvasElement.removeEventListener("mousedown", onMouseDown); + canvasElement.removeEventListener("mouseup", onMouseUp); + canvasElement.removeEventListener("mousemove", onMouseMove); + }; + }, [deleteTool, addAction]); - const onMouseUp = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = false; - if (!drag) { - if (addAction === "pillar") { - addPillar(referencePole, floorGroup); - } - if (deleteTool) { - DeletePillar(hoveredDeletablePillar, floorGroup); - } - } - } - }; + useFrame(() => { + hideRoof(roofVisibility, floorGroup, camera); + hideWalls(wallVisibility, scene, camera); - const onMouseMove = () => { - if (isLeftMouseDown) { - drag = true; - } - }; + if (addAction === "pillar") { + addAndUpdateReferencePillar(raycaster, floorGroup, referencePole); + } + if (deleteTool) { + DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar); + } + }); - canvasElement.addEventListener("mousedown", onMouseDown); - canvasElement.addEventListener("mouseup", onMouseUp); - canvasElement.addEventListener("mousemove", onMouseMove); + return ( + + ); +}; - return () => { - canvasElement.removeEventListener("mousedown", onMouseDown); - canvasElement.removeEventListener("mouseup", onMouseUp); - canvasElement.removeEventListener("mousemove", onMouseMove); - }; - }, [deleteTool, addAction]) - - useFrame(() => { - hideRoof(roofVisibility, floorGroup, camera); - hideWalls(wallVisibility, scene, camera); - - if (addAction === "pillar") { - addAndUpdateReferencePillar(raycaster, floorGroup, referencePole); - } - if (deleteTool) { - DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar); - } - }) - - return ( - - - ) -} - -export default FloorGroup; \ No newline at end of file +export default FloorGroup; diff --git a/app/src/modules/builder/groups/wallItemsGroup.tsx b/app/src/modules/builder/groups/wallItemsGroup.tsx index f993754..76ba502 100644 --- a/app/src/modules/builder/groups/wallItemsGroup.tsx +++ b/app/src/modules/builder/groups/wallItemsGroup.tsx @@ -1,5 +1,13 @@ import { useEffect } from "react"; -import { useDeleteTool, useDeletePointOrLine, useObjectPosition, useObjectRotation, useObjectScale, useSelectedWallItem, useSocketStore, useWallItems } from "../../../store/store"; +import { + useDeleteTool, + useDeletePointOrLine, + useObjectPosition, + useObjectRotation, + useSelectedWallItem, + useSocketStore, + useWallItems, +} from "../../../store/store"; import { Csg } from "../csg/csg"; import * as Types from "../../../types/world/worldTypes"; import * as CONSTANTS from "../../../types/world/worldConstants"; @@ -11,236 +19,277 @@ import loadInitialWallItems from "../IntialLoad/loadInitialWallItems"; import AddWallItems from "../geomentries/walls/addWallItems"; import useModuleStore from "../../../store/useModuleStore"; +const WallItemsGroup = ({ + currentWallItem, + AssetConfigurations, + hoveredDeletableWallItem, + selectedItemsIndex, + setSelectedItemsIndex, + CSGGroup, +}: any) => { + const state = useThree(); + const { socket } = useSocketStore(); + const { pointer, camera, raycaster } = state; + const { deleteTool } = useDeleteTool(); + const { wallItems, setWallItems } = useWallItems(); + const { setObjectPosition } = useObjectPosition(); + const { setObjectRotation } = useObjectRotation(); + const { deletePointOrLine } = useDeletePointOrLine(); + const { setSelectedWallItem } = useSelectedWallItem(); + const { activeModule } = useModuleStore(); -const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletableWallItem, selectedItemsIndex, setSelectedItemsIndex, CSGGroup }: any) => { - const state = useThree(); - const { socket } = useSocketStore(); - const { pointer, camera, raycaster } = state; - const { deleteTool, setDeleteTool } = useDeleteTool(); - const { wallItems, setWallItems } = useWallItems(); - const { objectPosition, setObjectPosition } = useObjectPosition(); - const { objectScale, setObjectScale } = useObjectScale(); - const { objectRotation, setObjectRotation } = useObjectRotation(); - const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); - const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); - const { activeModule } = useModuleStore(); + useEffect(() => { + // Load Wall Items from the backend + loadInitialWallItems(setWallItems, AssetConfigurations); + }, []); - useEffect(() => { - // Load Wall Items from the backend - loadInitialWallItems(setWallItems, AssetConfigurations); - }, []); + ////////// Update the Scale value changes in thewallItems State ////////// + ////////// Update the Position value changes in the selected item ////////// - ////////// Update the Scale value changes in thewallItems State ////////// + ////////// Update the Rotation value changes in the selected item ////////// - ////////// Update the Position value changes in the selected item ////////// + useEffect(() => { + const canvasElement = state.gl.domElement; + function handlePointerMove(e: any) { + if ( + selectedItemsIndex !== null && + !deletePointOrLine && + e.buttons === 1 + ) { + const Raycaster = state.raycaster; + const intersects = Raycaster.intersectObjects( + CSGGroup.current?.children[0].children!, + true + ); + const Object = intersects.find((child) => + child.object.name.includes("WallRaycastReference") + ); - ////////// Update the Rotation value changes in the selected item ////////// + if (Object) { + (state.controls as any)!.enabled = false; + setWallItems((prevItems: any) => { + const updatedItems = [...prevItems]; + let position: [number, number, number] = [0, 0, 0]; - useEffect(() => { - const canvasElement = state.gl.domElement; - function handlePointerMove(e: any) { - if (selectedItemsIndex !== null && !deletePointOrLine && e.buttons === 1) { - const Raycaster = state.raycaster; - const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true); - const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference")); - - if (Object) { - (state.controls as any)!.enabled = false; - setWallItems((prevItems: any) => { - const updatedItems = [...prevItems]; - let position: [number, number, number] = [0, 0, 0]; - - if (updatedItems[selectedItemsIndex].type === "Fixed-Move") { - position = [Object!.point.x, Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) * CONSTANTS.wallConfig.height, Object!.point.z]; - } else if (updatedItems[selectedItemsIndex].type === "Free-Move") { - position = [Object!.point.x, Object!.point.y, Object!.point.z]; - } - - requestAnimationFrame(() => { - setObjectPosition(new THREE.Vector3(...position)); - setObjectRotation({ - x: THREE.MathUtils.radToDeg(Object!.object.rotation.x), - y: THREE.MathUtils.radToDeg(Object!.object.rotation.y), - z: THREE.MathUtils.radToDeg(Object!.object.rotation.z), - }); - }); - - updatedItems[selectedItemsIndex] = { - ...updatedItems[selectedItemsIndex], - position: position, - quaternion: Object!.object.quaternion.clone() as Types.QuaternionType, - }; - - return updatedItems; - }); - } + if (updatedItems[selectedItemsIndex].type === "Fixed-Move") { + position = [ + Object!.point.x, + Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) * + CONSTANTS.wallConfig.height, + Object!.point.z, + ]; + } else if (updatedItems[selectedItemsIndex].type === "Free-Move") { + position = [Object!.point.x, Object!.point.y, Object!.point.z]; } + + requestAnimationFrame(() => { + setObjectPosition(new THREE.Vector3(...position)); + setObjectRotation({ + x: THREE.MathUtils.radToDeg(Object!.object.rotation.x), + y: THREE.MathUtils.radToDeg(Object!.object.rotation.y), + z: THREE.MathUtils.radToDeg(Object!.object.rotation.z), + }); + }); + + updatedItems[selectedItemsIndex] = { + ...updatedItems[selectedItemsIndex], + position: position, + quaternion: + Object!.object.quaternion.clone() as Types.QuaternionType, + }; + + return updatedItems; + }); } + } + } - async function handlePointerUp() { - const Raycaster = state.raycaster; - const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true); - const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference")); - if (Object) { - if (selectedItemsIndex !== null) { - let currentItem: any = null; - setWallItems((prevItems: any) => { - const updatedItems = [...prevItems]; - const WallItemsForStorage = updatedItems.map((item) => { - const { model, ...rest } = item; - return { - ...rest, - modelUuid: model?.uuid, - }; - }); + async function handlePointerUp() { + const Raycaster = state.raycaster; + const intersects = Raycaster.intersectObjects( + CSGGroup.current?.children[0].children!, + true + ); + const Object = intersects.find((child) => + child.object.name.includes("WallRaycastReference") + ); + if (Object) { + if (selectedItemsIndex !== null) { + let currentItem: any = null; + setWallItems((prevItems: any) => { + const updatedItems = [...prevItems]; + const WallItemsForStorage = updatedItems.map((item) => { + const { model, ...rest } = item; + return { + ...rest, + modelUuid: model?.uuid, + }; + }); - currentItem = updatedItems[selectedItemsIndex]; - localStorage.setItem("WallItems", JSON.stringify(WallItemsForStorage)); - return updatedItems; - }); + currentItem = updatedItems[selectedItemsIndex]; + localStorage.setItem( + "WallItems", + JSON.stringify(WallItemsForStorage) + ); + return updatedItems; + }); - setTimeout(async () => { + setTimeout(async () => { + const email = localStorage.getItem("email"); + const organization = email!.split("@")[1].split(".")[0]; - const email = localStorage.getItem('email') - const organization = (email!.split("@")[1]).split(".")[0]; + //REST - //REST + // await setWallItem( + // organization, + // currentItem?.model?.uuid, + // currentItem.modelName, + // currentItem.type!, + // currentItem.csgposition!, + // currentItem.csgscale!, + // currentItem.position, + // currentItem.quaternion, + // currentItem.scale!, + // ) - // await setWallItem( - // organization, - // currentItem?.model?.uuid, - // currentItem.modelName, - // currentItem.type!, - // currentItem.csgposition!, - // currentItem.csgscale!, - // currentItem.position, - // currentItem.quaternion, - // currentItem.scale!, - // ) + //SOCKET - //SOCKET + const data = { + organization: organization, + modelUuid: currentItem.model?.uuid!, + modelName: currentItem.modelName!, + type: currentItem.type!, + csgposition: currentItem.csgposition!, + csgscale: currentItem.csgscale!, + position: currentItem.position!, + quaternion: currentItem.quaternion, + scale: currentItem.scale!, + socketId: socket.id, + }; - const data = { - organization: organization, - modelUuid: currentItem.model?.uuid!, - modelName: currentItem.modelName!, - type: currentItem.type!, - csgposition: currentItem.csgposition!, - csgscale: currentItem.csgscale!, - position: currentItem.position!, - quaternion: currentItem.quaternion, - scale: currentItem.scale!, - socketId: socket.id - } - - socket.emit('v1:wallItems:set', data); - }, 0); - (state.controls as any)!.enabled = true; - } - } + socket.emit("v1:wallItems:set", data); + }, 0); + (state.controls as any)!.enabled = true; } + } + } - canvasElement.addEventListener("pointermove", handlePointerMove); - canvasElement.addEventListener("pointerup", handlePointerUp); + canvasElement.addEventListener("pointermove", handlePointerMove); + canvasElement.addEventListener("pointerup", handlePointerUp); - return () => { - canvasElement.removeEventListener("pointermove", handlePointerMove); - canvasElement.removeEventListener("pointerup", handlePointerUp); - }; - }, [selectedItemsIndex]); + return () => { + canvasElement.removeEventListener("pointermove", handlePointerMove); + canvasElement.removeEventListener("pointerup", handlePointerUp); + }; + }, [selectedItemsIndex]); - useEffect(() => { - const canvasElement = state.gl.domElement; - let drag = false; - let isLeftMouseDown = false; + useEffect(() => { + const canvasElement = state.gl.domElement; + let drag = false; + let isLeftMouseDown = false; - const onMouseDown = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = true; - drag = false; - } - }; + const onMouseDown = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + } + }; - const onMouseUp = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = false; - if (!drag && deleteTool && activeModule === "builder") { - DeleteWallItems(hoveredDeletableWallItem, setWallItems, wallItems, socket); - } - } - }; - - const onMouseMove = () => { - if (isLeftMouseDown) { - drag = true; - } - }; - - const onDrop = (event: any) => { - - if (!event.dataTransfer?.files[0]) return - - pointer.x = (event.clientX / window.innerWidth) * 2 - 1; - pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; - raycaster.setFromCamera(pointer, camera); - - if (AssetConfigurations[(event.dataTransfer.files[0].name.split('.'))[0]]) { - const selected = (event.dataTransfer.files[0].name.split('.'))[0]; - - if (AssetConfigurations[selected]?.type) { - AddWallItems(selected, raycaster, CSGGroup, AssetConfigurations, setWallItems, socket); - } - event.preventDefault(); - } + const onMouseUp = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = false; + if (!drag && deleteTool && activeModule === "builder") { + DeleteWallItems( + hoveredDeletableWallItem, + setWallItems, + wallItems, + socket + ); } + } + }; - const onDragOver = (event: any) => { - event.preventDefault(); - }; + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + }; - canvasElement.addEventListener("mousedown", onMouseDown); - canvasElement.addEventListener("mouseup", onMouseUp); - canvasElement.addEventListener("mousemove", onMouseMove); - canvasElement.addEventListener("drop", onDrop); - canvasElement.addEventListener("dragover", onDragOver); + const onDrop = (event: any) => { + if (!event.dataTransfer?.files[0]) return; - return () => { - canvasElement.removeEventListener("mousedown", onMouseDown); - canvasElement.removeEventListener("mouseup", onMouseUp); - canvasElement.removeEventListener("mousemove", onMouseMove); - canvasElement.removeEventListener("drop", onDrop); - canvasElement.removeEventListener("dragover", onDragOver); - }; - }, [deleteTool, wallItems]) + pointer.x = (event.clientX / window.innerWidth) * 2 - 1; + pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; + raycaster.setFromCamera(pointer, camera); - useEffect(() => { - if (deleteTool && activeModule === "builder") { - handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex); - setSelectedWallItem(null); - setSelectedItemsIndex(null); + if (AssetConfigurations[event.dataTransfer.files[0].name.split(".")[0]]) { + const selected = event.dataTransfer.files[0].name.split(".")[0]; + + if (AssetConfigurations[selected]?.type) { + AddWallItems( + selected, + raycaster, + CSGGroup, + AssetConfigurations, + setWallItems, + socket + ); } - }, [deleteTool]) + event.preventDefault(); + } + }; - return ( - <> - {wallItems.map((item: Types.WallItem, index: number) => ( - - - - ))} - - ) -} + const onDragOver = (event: any) => { + event.preventDefault(); + }; -export default WallItemsGroup; \ No newline at end of file + canvasElement.addEventListener("mousedown", onMouseDown); + canvasElement.addEventListener("mouseup", onMouseUp); + canvasElement.addEventListener("mousemove", onMouseMove); + canvasElement.addEventListener("drop", onDrop); + canvasElement.addEventListener("dragover", onDragOver); + + return () => { + canvasElement.removeEventListener("mousedown", onMouseDown); + canvasElement.removeEventListener("mouseup", onMouseUp); + canvasElement.removeEventListener("mousemove", onMouseMove); + canvasElement.removeEventListener("drop", onDrop); + canvasElement.removeEventListener("dragover", onDragOver); + }; + }, [deleteTool, wallItems]); + + useEffect(() => { + if (deleteTool && activeModule === "builder") { + handleMeshMissed( + currentWallItem, + setSelectedWallItem, + setSelectedItemsIndex + ); + setSelectedWallItem(null); + setSelectedItemsIndex(null); + } + }, [deleteTool]); + + return ( + <> + {wallItems.map((item: Types.WallItem, index: number) => ( + + + + ))} + + ); +}; + +export default WallItemsGroup; diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 3546765..77cca08 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -16,6 +16,7 @@ import { import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; import * as CONSTANTS from "../../../types/world/worldConstants"; +import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; const ZoneGroup: React.FC = () => { const { camera, pointer, gl, raycaster, scene, controls } = useThree(); @@ -24,6 +25,7 @@ const ZoneGroup: React.FC = () => { const { zones, setZones } = useZones(); const { zonePoints, setZonePoints } = useZonePoints(); const [isDragging, setIsDragging] = useState(false); + const { selectedZone } = useSelectedZoneStore(); const [draggedSphere, setDraggedSphere] = useState( null ); @@ -308,7 +310,7 @@ const ZoneGroup: React.FC = () => { true ); - if (intersects.length > 0 && toolMode === 'move') { + if (intersects.length > 0 && toolMode === "move") { const clickedObject = intersects[0].object; const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position) @@ -326,7 +328,7 @@ const ZoneGroup: React.FC = () => { if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) { isLeftMouseDown = false; - if (!startPoint && toolMode !== 'move') { + if (!startPoint && toolMode !== "move") { raycaster.setFromCamera(pointer, camera); const intersectionPoint = new THREE.Vector3(); const point = raycaster.ray.intersectPlane(plane, intersectionPoint); @@ -334,7 +336,7 @@ const ZoneGroup: React.FC = () => { setStartPoint(point); setEndPoint(null); } - } else if (startPoint && toolMode !== 'move') { + } else if (startPoint && toolMode !== "move") { raycaster.setFromCamera(pointer, camera); const intersectionPoint = new THREE.Vector3(); const point = raycaster.ray.intersectPlane(plane, intersectionPoint); @@ -436,7 +438,8 @@ const ZoneGroup: React.FC = () => { intersects.length > 0 && intersects[0].object.name.includes("point") ) { - gl.domElement.style.cursor = toolMode === 'move' ? "pointer" : "default"; + gl.domElement.style.cursor = + toolMode === "move" ? "pointer" : "default"; } else { gl.domElement.style.cursor = "default"; } @@ -476,7 +479,7 @@ const ZoneGroup: React.FC = () => { setEndPoint(null); }; - if (toolMode === "Zone" || deletePointOrLine || toolMode === 'move') { + if (toolMode === "Zone" || deletePointOrLine || toolMode === "move") { canvasElement.addEventListener("mousedown", onMouseDown); canvasElement.addEventListener("mouseup", onMouseUp); canvasElement.addEventListener("mousemove", onMouseMove); @@ -526,7 +529,11 @@ const ZoneGroup: React.FC = () => { {zones.map((zone: any) => ( - + {zone.points .slice(0, -1) .map((point: [number, number, number], index: number) => { @@ -545,7 +552,7 @@ const ZoneGroup: React.FC = () => { const midpoint = new THREE.Vector3( (point1.x + point2.x) / 2, CONSTANTS.zoneConfig.height / 2 + - (zone.layer - 1) * CONSTANTS.zoneConfig.height, + (zone.layer - 1) * CONSTANTS.zoneConfig.height, (point1.z + point2.z) / 2 ); diff --git a/app/src/modules/visualization/zone/zoneCameraTarget.tsx b/app/src/modules/visualization/zone/zoneCameraTarget.tsx index 1417e58..7927dc8 100644 --- a/app/src/modules/visualization/zone/zoneCameraTarget.tsx +++ b/app/src/modules/visualization/zone/zoneCameraTarget.tsx @@ -19,6 +19,8 @@ export default function ZoneCentreTarget() { const { setZoneTarget } = usezoneTarget(); const { Edit } = useEditPosition(); + const TRANSITION_SPEED = 2000; + useEffect(() => { if ( selectedZone.zoneViewPortTarget && @@ -50,30 +52,29 @@ export default function ZoneCentreTarget() { const setCam = async () => { controls.setLookAt( centrePoint[0], - 100, + 26, centrePoint[2], ...centrePoint, - true + true, + TRANSITION_SPEED ); setTimeout(() => { controls?.setLookAt( ...selectedZone.zoneViewPortPosition, - selectedZone.zoneViewPortTarget[0], - selectedZone.zoneViewPortTarget[1], - selectedZone.zoneViewPortTarget[2], - true + ...selectedZone.zoneViewPortTarget, + true, + TRANSITION_SPEED ); - }, 400); + }, 100); }; setCam(); } else { const setCam = async () => { controls?.setLookAt( ...selectedZone.zoneViewPortPosition, - selectedZone.zoneViewPortTarget[0], - selectedZone.zoneViewPortTarget[1], - selectedZone.zoneViewPortTarget[2], - true + ...selectedZone.zoneViewPortTarget, + true, + TRANSITION_SPEED ); }; setCam(); diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index aa203c3..8a432cf 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -136,26 +136,3 @@ const Project: React.FC = () => { }; export default Project; - -// src/global.d.ts -// import { LogType } from "../components/ui/log/LoggerContext"; - -// export declare global { -// const echo: { -// log: (message: string) => void; -// info: (message: string) => void; -// warn: (message: string) => void; -// error: (message: string) => void; -// success: (message: string) => void; -// clear: () => void; -// }; -// } - -// Project.tsx:61 Uncaught ReferenceError: echo is not defined -// at Project.tsx:61:1 -// at commitHookEffectListMount (react-dom.development.js:23189:1) -// at commitPassiveMountOnFiber (react-dom.development.js:24965:1) -// at commitPassiveMountEffects_complete (react-dom.development.js:24930:1) -// at commitPassiveMountEffects_begin (react-dom.development.js:24917:1) -// at commitPassiveMountEffects (react-dom.development.js:24905:1) -// this error occurs some time's diff --git a/app/src/store/visualization/useZoneStore.ts b/app/src/store/visualization/useZoneStore.ts index eb05790..c624941 100644 --- a/app/src/store/visualization/useZoneStore.ts +++ b/app/src/store/visualization/useZoneStore.ts @@ -29,25 +29,40 @@ interface SelectedZoneStore { | Partial | ((prev: SelectedZoneState) => SelectedZoneState) ) => void; + clearSelectedZone: () => void; } export const useSelectedZoneStore = create((set) => ({ selectedZone: { - zoneName: "", // Empty string initially - activeSides: [], // Empty array - panelOrder: [], // Empty array - lockedPanels: [], // Empty array + zoneName: "", + activeSides: [], + panelOrder: [], + lockedPanels: [], points: [], zoneId: "", zoneViewPortTarget: [], zoneViewPortPosition: [], - widgets: [], // Empty array + widgets: [], }, setSelectedZone: (zone) => set((state) => ({ selectedZone: typeof zone === "function" - ? zone(state.selectedZone) // Handle functional updates - : { ...state.selectedZone, ...zone }, // Handle partial updates + ? zone(state.selectedZone) + : { ...state.selectedZone, ...zone }, + })), + clearSelectedZone: () => + set(() => ({ + selectedZone: { + zoneName: "", + activeSides: [], + panelOrder: [], + lockedPanels: [], + points: [], + zoneId: "", + zoneViewPortTarget: [], + zoneViewPortPosition: [], + widgets: [], + }, })), })); diff --git a/app/src/styles/components/moduleToggle.scss b/app/src/styles/components/moduleToggle.scss index 7e5b727..c985974 100644 --- a/app/src/styles/components/moduleToggle.scss +++ b/app/src/styles/components/moduleToggle.scss @@ -8,7 +8,7 @@ gap: 8px; position: fixed; left: 50%; - top: 32px; + top: 22px; transform: translateX(-50%); z-index: #{$z-index-tools}; .module-list { diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index f14d769..a041f78 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -4,7 +4,7 @@ .sidebar-left-wrapper { width: 270px; position: fixed; - top: 32px; + top: 22px; left: 8px; background: var(--background-color); backdrop-filter: blur(20px); @@ -280,7 +280,7 @@ .sidebar-right-wrapper { width: 320px; position: fixed; - top: 32px; + top: 22px; right: 8px; background: var(--background-color); backdrop-filter: blur(20px); diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index a08834c..2ff5f39 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -12,6 +12,7 @@ import { } from "../../store/store"; import { usePlayButtonStore } from "../../store/usePlayButtonStore"; import { detectModifierKeys } from "./detectModifierKeys"; +import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; const KeyPressListener: React.FC = () => { const { activeModule, setActiveModule } = useModuleStore(); @@ -25,6 +26,7 @@ const KeyPressListener: React.FC = () => { const { setAddAction } = useAddAction(); const { setSelectedWallItem } = useSelectedWallItem(); const { setActiveTool } = useActiveTool(); + const { clearSelectedZone} = useSelectedZoneStore(); const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -131,6 +133,7 @@ const KeyPressListener: React.FC = () => { if (keyCombination === "ESCAPE") { setActiveTool("cursor"); setIsPlaying(false); + clearSelectedZone(); } // Placeholder for future implementation