From 3f59f5d2dd5e4ad9734b9b8eb49f445c19679913 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Wed, 2 Jul 2025 11:52:57 +0530 Subject: [PATCH] refactor: Clean up console log statements and improve component state management in SideBarRight, AssetProperties, WallInstances, WallCreator, and SocketResponses --- .../layout/sidebarRight/SideBarRight.tsx | 253 +++++++++--------- .../properties/AssetProperties.tsx | 6 +- .../builder/asset/models/model/model.tsx | 7 - .../builder/wall/Instances/wallInstances.tsx | 2 +- .../builder/wall/wallCreator/wallCreator.tsx | 5 - .../socket/socketResponses.dev.tsx | 5 +- 6 files changed, 135 insertions(+), 143 deletions(-) diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 1fa90d3..e237cd3 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -1,8 +1,6 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import Header from "./Header"; -import useModuleStore, { - useSubModuleStore, -} from "../../../store/useModuleStore"; +import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore"; import { AnalysisIcon, MechanicsIcon, @@ -34,6 +32,22 @@ import FloorProperties from "./properties/FloorProperties"; import SelectedWallProperties from "./properties/SelectedWallProperties"; import SelectedFloorProperties from "./properties/SelectedFloorProperties"; +type DisplayComponent = + | "versionHistory" + | "globalProperties" + | "aisleProperties" + | "wallProperties" + | "floorProperties" + | "assetProperties" + | "selectedWallProperties" + | "selectedFloorProperties" + | "zoneProperties" + | "simulations" + | "mechanics" + | "analysis" + | "visualization" + | "none"; + const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); const { toggleUIRight } = useToggleStore(); @@ -46,18 +60,15 @@ const SideBarRight: React.FC = () => { const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore(); const { isVersionSaved } = useSaveVersion(); - // Reset activeList whenever activeModule changes + const [displayComponent, setDisplayComponent] = useState("none"); + useEffect(() => { if (activeModule !== "simulation") setSubModule("properties"); if (activeModule === "simulation") setSubModule("simulations"); }, [activeModule, setSubModule]); useEffect(() => { - if ( - activeModule !== "mechanics" && - selectedEventData && - selectedEventSphere - ) { + if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) { setSubModule("mechanics"); } else if (!selectedEventData && !selectedEventSphere) { if (activeModule === "simulation") { @@ -69,6 +80,104 @@ const SideBarRight: React.FC = () => { } }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); + useEffect(() => { + + if (activeModule === "visualization") { + setDisplayComponent("visualization"); + return; + } + + if (!isVersionSaved && activeModule === "simulation") { + if (subModule === "simulations") { + setDisplayComponent("simulations"); + return; + } + if (subModule === "mechanics") { + setDisplayComponent("mechanics"); + return; + } + if (subModule === "analysis") { + setDisplayComponent("analysis"); + return; + } + } + + if (subModule === "properties" && activeModule !== "visualization") { + if (selectedFloorItem) { + setDisplayComponent("assetProperties"); + return; + } + if (!selectedFloorItem && !selectedFloor && !selectedAisle && selectedWall) { + setDisplayComponent("selectedWallProperties"); + return; + } + if (!selectedFloorItem && !selectedWall && !selectedAisle && selectedFloor) { + setDisplayComponent("selectedFloorProperties"); + return; + } + if (viewVersionHistory) { + setDisplayComponent("versionHistory"); + return; + } + if (!selectedFloorItem && !selectedFloor && !selectedWall) { + if (toolMode === "Aisle") { + setDisplayComponent("aisleProperties"); + return; + } + if (toolMode === "Wall") { + setDisplayComponent("wallProperties"); + return; + } + if (toolMode === "Floor") { + setDisplayComponent("floorProperties"); + return; + } + setDisplayComponent("globalProperties"); + return; + } + } + + if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) { + setDisplayComponent("zoneProperties"); + return; + } + + setDisplayComponent("none"); + }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode,]); + + const renderComponent = () => { + switch (displayComponent) { + case "versionHistory": + return ; + case "globalProperties": + return ; + case "aisleProperties": + return ; + case "wallProperties": + return ; + case "floorProperties": + return ; + case "assetProperties": + return ; + case "selectedWallProperties": + return ; + case "selectedFloorProperties": + return ; + case "zoneProperties": + return ; + case "simulations": + return ; + case "mechanics": + return ; + case "analysis": + return ; + case "visualization": + return ; + default: + return null; + } + }; + return (
{
{toggleUIRight && ( <> - {!isVersionSaved && ( + {(!isVersionSaved || activeModule !== "simulation") && (
{activeModule !== "simulation" && (
)} - {viewVersionHistory && ( + {displayComponent !== "none" && (
- + {renderComponent()}
)} - - {/* process builder */} - {!viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - !selectedFloorItem && - !selectedFloor && - !selectedWall && ( -
-
- {(() => { - if (toolMode === "Aisle") { - return ; - } else if (toolMode === "Wall") { - return ; - } else if (toolMode === "Floor") { - return ; - } else { - return ; - } - })()} -
-
- )} - - {!viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - selectedFloorItem && ( -
-
- -
-
- )} - - {!viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - !selectedFloorItem && - !selectedFloor && - !selectedAisle && - selectedWall && ( -
-
- -
-
- )} - - {!viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - !selectedFloorItem && - !selectedWall && - !selectedAisle && - selectedFloor && ( -
-
- -
-
- )} - - {!viewVersionHistory && - subModule === "zoneProperties" && - (activeModule === "builder" || activeModule === "simulation") && ( -
-
- -
-
- )} - - {/* simulation */} - {!isVersionSaved && - !viewVersionHistory && - activeModule === "simulation" && ( - <> - {subModule === "simulations" && ( -
-
- -
-
- )} - {subModule === "mechanics" && ( -
-
- -
-
- )} - {subModule === "analysis" && ( -
-
- -
-
- )} - - )} - {/* realtime visualization */} - {activeModule === "visualization" && } )}
); }; -export default SideBarRight; +export default SideBarRight; \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx index d0bb364..1ff41e7 100644 --- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx @@ -6,7 +6,6 @@ import PositionInput from "../customInput/PositionInputs"; import RotationInput from "../customInput/RotationInput"; import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store"; import { useSceneContext } from "../../../../modules/scene/sceneContext"; -import { center } from "@turf/turf"; interface UserData { id: number; // Unique identifier for the user data @@ -52,11 +51,14 @@ const AssetProperties: React.FC = () => { }; const handleAnimationClick = (animation: string) => { - if (selectedFloorItem) { + if (selectedFloorItem && selectedFloorItem.animationState) { const isPlaying = selectedFloorItem.animationState?.playing || false; setCurrentAnimation(selectedFloorItem.uuid, animation, !isPlaying); } } + + if (!selectedFloorItem) return null; + return (
{/* Name */} diff --git a/app/src/modules/builder/asset/models/model/model.tsx b/app/src/modules/builder/asset/models/model/model.tsx index 75a8477..3c76664 100644 --- a/app/src/modules/builder/asset/models/model/model.tsx +++ b/app/src/modules/builder/asset/models/model/model.tsx @@ -99,8 +99,6 @@ function Model({ asset }: { readonly asset: Asset }) { const action = mixerRef.current!.clipAction(animation); actions.current[animation.name] = action; }); - } else { - console.log('No animations'); } return; } @@ -211,7 +209,6 @@ function Model({ asset }: { readonly asset: Asset }) { const handleClick = (asset: Asset) => { if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) { - //REST // const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName); @@ -305,7 +302,6 @@ function Model({ asset }: { readonly asset: Asset }) { useEffect(() => { const handlePlay = (clipName: string) => { - console.log('clipName: ', clipName, asset.animationState); if (!mixerRef.current) return; Object.values(actions.current).forEach((action) => action.stop()); @@ -313,9 +309,6 @@ function Model({ asset }: { readonly asset: Asset }) { const action = actions.current[clipName]; if (action && asset.animationState?.playing) { action.reset().setLoop(THREE.LoopOnce, 1).play(); - console.log(`Playing: ${clipName}`); - } else { - console.warn(`No action found for: ${clipName}`); } }; diff --git a/app/src/modules/builder/wall/Instances/wallInstances.tsx b/app/src/modules/builder/wall/Instances/wallInstances.tsx index c5e22bf..001c463 100644 --- a/app/src/modules/builder/wall/Instances/wallInstances.tsx +++ b/app/src/modules/builder/wall/Instances/wallInstances.tsx @@ -41,7 +41,7 @@ function WallInstances() { return ( <> - {!toggleView && walls.length > 1 && ( + {!toggleView && ( <> {walls.map((wall) => ( diff --git a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx index 24a2f95..a80a62d 100644 --- a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx +++ b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx @@ -71,7 +71,6 @@ function WallCreator() { if (wallIntersect && !pointIntersects) { const wall = getWallByPoints(wallIntersect.object.userData.points); - console.log('wall: ', wall); if (wall) { const ThroughPoint = wallIntersect.object.userData.path.getPoints(Constants.lineConfig.lineIntersectionPoints); let intersectionPoint = getClosestIntersection(ThroughPoint, wallIntersect.point); @@ -295,9 +294,7 @@ function WallCreator() { position: [position.x, position.y, position.z], layer: activeLayer }; - console.log('newPoint: ', newPoint); - console.log('snappedPoint: ', snappedPoint); if (snappedPosition && snappedPoint) { newPoint.pointUuid = snappedPoint.pointUuid; newPoint.position = snappedPosition; @@ -319,7 +316,6 @@ function WallCreator() { } } - console.log('tempPoints: ', tempPoints); if (tempPoints.length === 0) { setTempPoints([newPoint]); setIsCreating(true); @@ -334,7 +330,6 @@ function WallCreator() { decals: [] }; addWall(wall); - console.log('wall: ', wall); // API diff --git a/app/src/modules/collaboration/socket/socketResponses.dev.tsx b/app/src/modules/collaboration/socket/socketResponses.dev.tsx index db9e96a..5b8f772 100644 --- a/app/src/modules/collaboration/socket/socketResponses.dev.tsx +++ b/app/src/modules/collaboration/socket/socketResponses.dev.tsx @@ -5,11 +5,12 @@ export default function SocketResponses() { const { socket } = useSocketStore(); useEffect(() => { - socket.on("v1:wall-asset:response:delete", (data: any) => { + socket.on("v1:model-asset:response:add", (data: any) => { + console.log('data: ', data); }); return () => { - socket.off("v1:wall-asset:response:delete"); + socket.off("v1:model-asset:response:add"); } }, [socket])