Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Clean up console log statements and improve component state management in SideBarRight, AssetProperties, WallInstances, WallCreator, and SocketResponses

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-07-02 11:52:57 +05:30
parent 0848c453af
commit 3f59f5d2dd
6 changed files with 135 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -1,8 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect, useState } from "react";
import Header from "./Header"; import Header from "./Header";
import useModuleStore, { import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
useSubModuleStore,
} from "../../../store/useModuleStore";
import { import {
AnalysisIcon, AnalysisIcon,
MechanicsIcon, MechanicsIcon,
@@ -34,6 +32,22 @@ import FloorProperties from "./properties/FloorProperties";
import SelectedWallProperties from "./properties/SelectedWallProperties"; import SelectedWallProperties from "./properties/SelectedWallProperties";
import SelectedFloorProperties from "./properties/SelectedFloorProperties"; 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 SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { toggleUIRight } = useToggleStore(); const { toggleUIRight } = useToggleStore();
@@ -46,18 +60,15 @@ const SideBarRight: React.FC = () => {
const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore(); const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
const { isVersionSaved } = useSaveVersion(); const { isVersionSaved } = useSaveVersion();
// Reset activeList whenever activeModule changes const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
useEffect(() => { useEffect(() => {
if (activeModule !== "simulation") setSubModule("properties"); if (activeModule !== "simulation") setSubModule("properties");
if (activeModule === "simulation") setSubModule("simulations"); if (activeModule === "simulation") setSubModule("simulations");
}, [activeModule, setSubModule]); }, [activeModule, setSubModule]);
useEffect(() => { useEffect(() => {
if ( if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
activeModule !== "mechanics" &&
selectedEventData &&
selectedEventSphere
) {
setSubModule("mechanics"); setSubModule("mechanics");
} else if (!selectedEventData && !selectedEventSphere) { } else if (!selectedEventData && !selectedEventSphere) {
if (activeModule === "simulation") { if (activeModule === "simulation") {
@@ -69,6 +80,104 @@ const SideBarRight: React.FC = () => {
} }
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); }, [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 <VersionHistory />;
case "globalProperties":
return <GlobalProperties />;
case "aisleProperties":
return <AisleProperties />;
case "wallProperties":
return <WallProperties />;
case "floorProperties":
return <FloorProperties />;
case "assetProperties":
return <AssetProperties />;
case "selectedWallProperties":
return <SelectedWallProperties />;
case "selectedFloorProperties":
return <SelectedFloorProperties />;
case "zoneProperties":
return <ZoneProperties />;
case "simulations":
return <Simulations />;
case "mechanics":
return <EventProperties />;
case "analysis":
return <Analysis />;
case "visualization":
return <Visualization />;
default:
return null;
}
};
return ( return (
<div <div
className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed" className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
@@ -77,13 +186,12 @@ const SideBarRight: React.FC = () => {
<Header /> <Header />
{toggleUIRight && ( {toggleUIRight && (
<> <>
{!isVersionSaved && ( {(!isVersionSaved || activeModule !== "simulation") && (
<div className="sidebar-actions-container"> <div className="sidebar-actions-container">
{activeModule !== "simulation" && ( {activeModule !== "simulation" && (
<button <button
id="sidebar-action-list-properties" id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : "" className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
}`}
onClick={() => { onClick={() => {
setSubModule("properties"); setSubModule("properties");
setVersionHistoryVisible(false); setVersionHistoryVisible(false);
@@ -97,8 +205,7 @@ const SideBarRight: React.FC = () => {
<> <>
<button <button
id="sidebar-action-list-simulation" id="sidebar-action-list-simulation"
className={`sidebar-action-list ${subModule === "simulations" ? "active" : "" className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""}`}
}`}
onClick={() => { onClick={() => {
setSubModule("simulations"); setSubModule("simulations");
setVersionHistoryVisible(false); setVersionHistoryVisible(false);
@@ -109,8 +216,7 @@ const SideBarRight: React.FC = () => {
</button> </button>
<button <button
id="sidebar-action-list-mechanics" id="sidebar-action-list-mechanics"
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : "" className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""}`}
}`}
onClick={() => { onClick={() => {
setSubModule("mechanics"); setSubModule("mechanics");
setVersionHistoryVisible(false); setVersionHistoryVisible(false);
@@ -121,8 +227,7 @@ const SideBarRight: React.FC = () => {
</button> </button>
<button <button
id="sidebar-action-list-analysis" id="sidebar-action-list-analysis"
className={`sidebar-action-list ${subModule === "analysis" ? "active" : "" className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""}`}
}`}
onClick={() => { onClick={() => {
setSubModule("analysis"); setSubModule("analysis");
setVersionHistoryVisible(false); setVersionHistoryVisible(false);
@@ -136,117 +241,13 @@ const SideBarRight: React.FC = () => {
</div> </div>
)} )}
{viewVersionHistory && ( {displayComponent !== "none" && (
<div className="sidebar-right-container"> <div className="sidebar-right-container">
<div className="sidebar-right-content-container"> <div className="sidebar-right-content-container">
<VersionHistory /> {renderComponent()}
</div> </div>
</div> </div>
)} )}
{/* process builder */}
{!viewVersionHistory &&
subModule === "properties" &&
activeModule !== "visualization" &&
!selectedFloorItem &&
!selectedFloor &&
!selectedWall && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
{(() => {
if (toolMode === "Aisle") {
return <AisleProperties />;
} else if (toolMode === "Wall") {
return <WallProperties />;
} else if (toolMode === "Floor") {
return <FloorProperties />;
} else {
return <GlobalProperties />;
}
})()}
</div>
</div>
)}
{!viewVersionHistory &&
subModule === "properties" &&
activeModule !== "visualization" &&
selectedFloorItem && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<AssetProperties />
</div>
</div>
)}
{!viewVersionHistory &&
subModule === "properties" &&
activeModule !== "visualization" &&
!selectedFloorItem &&
!selectedFloor &&
!selectedAisle &&
selectedWall && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<SelectedWallProperties />
</div>
</div>
)}
{!viewVersionHistory &&
subModule === "properties" &&
activeModule !== "visualization" &&
!selectedFloorItem &&
!selectedWall &&
!selectedAisle &&
selectedFloor && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<SelectedFloorProperties />
</div>
</div>
)}
{!viewVersionHistory &&
subModule === "zoneProperties" &&
(activeModule === "builder" || activeModule === "simulation") && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<ZoneProperties />
</div>
</div>
)}
{/* simulation */}
{!isVersionSaved &&
!viewVersionHistory &&
activeModule === "simulation" && (
<>
{subModule === "simulations" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<Simulations />
</div>
</div>
)}
{subModule === "mechanics" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<EventProperties />
</div>
</div>
)}
{subModule === "analysis" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
<Analysis />
</div>
</div>
)}
</>
)}
{/* realtime visualization */}
{activeModule === "visualization" && <Visualization />}
</> </>
)} )}
</div> </div>

6
app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
View File

@@ -6,7 +6,6 @@ import PositionInput from "../customInput/PositionInputs";
import RotationInput from "../customInput/RotationInput"; import RotationInput from "../customInput/RotationInput";
import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store"; import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
import { useSceneContext } from "../../../../modules/scene/sceneContext"; import { useSceneContext } from "../../../../modules/scene/sceneContext";
import { center } from "@turf/turf";
interface UserData { interface UserData {
id: number; // Unique identifier for the user data id: number; // Unique identifier for the user data
@@ -52,11 +51,14 @@ const AssetProperties: React.FC = () => {
}; };
const handleAnimationClick = (animation: string) => { const handleAnimationClick = (animation: string) => {
if (selectedFloorItem) { if (selectedFloorItem && selectedFloorItem.animationState) {
const isPlaying = selectedFloorItem.animationState?.playing || false; const isPlaying = selectedFloorItem.animationState?.playing || false;
setCurrentAnimation(selectedFloorItem.uuid, animation, !isPlaying); setCurrentAnimation(selectedFloorItem.uuid, animation, !isPlaying);
} }
} }
if (!selectedFloorItem) return null;
return ( return (
<div className="asset-properties-container"> <div className="asset-properties-container">
{/* Name */} {/* Name */}

7
app/src/modules/builder/asset/models/model/model.tsx
View File

@@ -99,8 +99,6 @@ function Model({ asset }: { readonly asset: Asset }) {
const action = mixerRef.current!.clipAction(animation); const action = mixerRef.current!.clipAction(animation);
actions.current[animation.name] = action; actions.current[animation.name] = action;
}); });
} else {
console.log('No animations');
} }
return; return;
} }
@@ -211,7 +209,6 @@ function Model({ asset }: { readonly asset: Asset }) {
const handleClick = (asset: Asset) => { const handleClick = (asset: Asset) => {
if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) { if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
//REST //REST
// const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName); // const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName);
@@ -305,7 +302,6 @@ function Model({ asset }: { readonly asset: Asset }) {
useEffect(() => { useEffect(() => {
const handlePlay = (clipName: string) => { const handlePlay = (clipName: string) => {
console.log('clipName: ', clipName, asset.animationState);
if (!mixerRef.current) return; if (!mixerRef.current) return;
Object.values(actions.current).forEach((action) => action.stop()); Object.values(actions.current).forEach((action) => action.stop());
@@ -313,9 +309,6 @@ function Model({ asset }: { readonly asset: Asset }) {
const action = actions.current[clipName]; const action = actions.current[clipName];
if (action && asset.animationState?.playing) { if (action && asset.animationState?.playing) {
action.reset().setLoop(THREE.LoopOnce, 1).play(); action.reset().setLoop(THREE.LoopOnce, 1).play();
console.log(`Playing: ${clipName}`);
} else {
console.warn(`No action found for: ${clipName}`);
} }
}; };

2
app/src/modules/builder/wall/Instances/wallInstances.tsx
View File

@@ -41,7 +41,7 @@ function WallInstances() {
return ( return (
<> <>
{!toggleView && walls.length > 1 && ( {!toggleView && (
<> <>
{walls.map((wall) => ( {walls.map((wall) => (
<WallInstance key={wall.wallUuid} wall={wall} /> <WallInstance key={wall.wallUuid} wall={wall} />

5
app/src/modules/builder/wall/wallCreator/wallCreator.tsx
View File

@@ -71,7 +71,6 @@ function WallCreator() {
if (wallIntersect && !pointIntersects) { if (wallIntersect && !pointIntersects) {
const wall = getWallByPoints(wallIntersect.object.userData.points); const wall = getWallByPoints(wallIntersect.object.userData.points);
console.log('wall: ', wall);
if (wall) { if (wall) {
const ThroughPoint = wallIntersect.object.userData.path.getPoints(Constants.lineConfig.lineIntersectionPoints); const ThroughPoint = wallIntersect.object.userData.path.getPoints(Constants.lineConfig.lineIntersectionPoints);
let intersectionPoint = getClosestIntersection(ThroughPoint, wallIntersect.point); let intersectionPoint = getClosestIntersection(ThroughPoint, wallIntersect.point);
@@ -295,9 +294,7 @@ function WallCreator() {
position: [position.x, position.y, position.z], position: [position.x, position.y, position.z],
layer: activeLayer layer: activeLayer
}; };
console.log('newPoint: ', newPoint);
console.log('snappedPoint: ', snappedPoint);
if (snappedPosition && snappedPoint) { if (snappedPosition && snappedPoint) {
newPoint.pointUuid = snappedPoint.pointUuid; newPoint.pointUuid = snappedPoint.pointUuid;
newPoint.position = snappedPosition; newPoint.position = snappedPosition;
@@ -319,7 +316,6 @@ function WallCreator() {
} }
} }
console.log('tempPoints: ', tempPoints);
if (tempPoints.length === 0) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
setIsCreating(true); setIsCreating(true);
@@ -334,7 +330,6 @@ function WallCreator() {
decals: [] decals: []
}; };
addWall(wall); addWall(wall);
console.log('wall: ', wall);
// API // API

5
app/src/modules/collaboration/socket/socketResponses.dev.tsx
View File

@@ -5,11 +5,12 @@ export default function SocketResponses() {
const { socket } = useSocketStore(); const { socket } = useSocketStore();
useEffect(() => { useEffect(() => {
socket.on("v1:wall-asset:response:delete", (data: any) => { socket.on("v1:model-asset:response:add", (data: any) => {
console.log('data: ', data);
}); });
return () => { return () => {
socket.off("v1:wall-asset:response:delete"); socket.off("v1:model-asset:response:add");
} }
}, [socket]) }, [socket])