264 lines
12 KiB
TypeScript
264 lines
12 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import { useLoadingProgress, useRenameModeStore, useIsComparing, useSelectedComment, useWidgetSubOption, useToggleView, useCreateNewWindow } from "../../../store/builder/store";
|
|
import useModuleStore from "../../../store/ui/useModuleStore";
|
|
import { useSocketStore } from "../../../store/socket/useSocketStore";
|
|
import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore";
|
|
import { useSelectedZoneStore } from "../../../store/visualization/old/useZoneStore";
|
|
import { useFloatingWidget } from "../../../store/visualization/old/useDroppedObjectsStore";
|
|
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
|
|
import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
|
|
import { useSimulationState } from "../../../store/simulation/useSimulationStore";
|
|
import { useSceneContext } from "../../../modules/scene/sceneContext";
|
|
import useRestStates from "../../../hooks/useResetStates";
|
|
import KeyPressListener from "../../../utils/shortcutkeys/handleShortcutKeys";
|
|
import LoadingPage from "../../templates/LoadingPage";
|
|
import ModuleToggle from "../../ui/ModuleToggle";
|
|
import SideBarLeft from "../sidebarLeft/SideBarLeft";
|
|
import SideBarRight from "../sidebarRight/SideBarRight";
|
|
// import RealTimeVisulization from "../../../modules/visualization/RealTimeVisulization";
|
|
import MarketPlace from "../../../modules/market/MarketPlace";
|
|
import Tools from "../../ui/Tools";
|
|
import SimulationPlayer from "../../ui/simulation/simulationPlayer";
|
|
import ControlsPlayer from "../controls/ControlsPlayer";
|
|
import SelectFloorPlan from "../../temporary/SelectFloorPlan";
|
|
import RegularDropDown from "../../ui/inputs/RegularDropDown";
|
|
import RenameTooltip from "../../ui/features/RenameTooltip";
|
|
import VersionSaved from "../sidebarRight/versionHisory/VersionSaved";
|
|
import Footer from "../../footer/Footer";
|
|
import ThreadChat from "../../ui/collaboration/threads/ThreadChat";
|
|
import Scene from "../../../modules/scene/scene";
|
|
|
|
import { recentlyViewedApi } from "../../../services/dashboard/recentlyViewedApi";
|
|
import { setAssetsApi } from "../../../services/builder/asset/floorAsset/setAssetsApi";
|
|
import { getVersionHistoryApi } from "../../../services/builder/versionControl/getVersionHistoryApi";
|
|
import { getUserData } from "../../../functions/getUserData";
|
|
import DashboardEditor from "../../SimulationDashboard/DashboardEditor";
|
|
|
|
function MainScene() {
|
|
const { setMainState, clearComparisonState } = useSimulationState();
|
|
const { isComparing, setIsComparing } = useIsComparing();
|
|
const { activeModule } = useModuleStore();
|
|
const { selectedUser } = useSelectedUserStore();
|
|
const { loadingProgress } = useLoadingProgress();
|
|
const { toggleView } = useToggleView();
|
|
const { isPlaying } = usePlayButtonStore();
|
|
const { widgetSubOption } = useWidgetSubOption();
|
|
const { builderSocket, visualizationSocket } = useSocketStore();
|
|
const { selectedZone } = useSelectedZoneStore();
|
|
const { setFloatingWidget } = useFloatingWidget();
|
|
const { assetStore, productStore, versionStore } = useSceneContext();
|
|
const { products, selectedProduct } = productStore();
|
|
const { versionHistory, setVersions, selectedVersion, setSelectedVersion } = versionStore();
|
|
const { setName, selectedAssets, setSelectedAssets } = assetStore();
|
|
const { projectId } = useParams();
|
|
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
|
|
const { selectedComment, commentPositionState } = useSelectedComment();
|
|
const { resetStates } = useRestStates();
|
|
const { organization, userId } = getUserData();
|
|
const { createNewWindow } = useCreateNewWindow();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
resetStates();
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (builderSocket && projectId) {
|
|
setTimeout(() => {
|
|
builderSocket.emit("joinRoom", { projectId: projectId });
|
|
}, 1000);
|
|
}
|
|
}, [builderSocket, projectId]);
|
|
|
|
useEffect(() => {
|
|
if (activeModule !== "simulation") {
|
|
clearComparisonState();
|
|
setIsComparing(false);
|
|
}
|
|
}, [activeModule, clearComparisonState, setIsComparing]);
|
|
|
|
useEffect(() => {
|
|
if (!projectId) return;
|
|
|
|
getVersionHistoryApi(projectId)
|
|
.then((data) => {
|
|
if (!data.versions) return;
|
|
const versions: VersionHistory = [];
|
|
data.versions.forEach((version: any) => {
|
|
versions.push({
|
|
version: version.version,
|
|
versionId: version.versionId,
|
|
versionName: version.versionName,
|
|
versionDescription: version.description,
|
|
timeStamp: version.createdAt,
|
|
createdBy: version.createdBy.userName,
|
|
});
|
|
});
|
|
setVersions(versions);
|
|
})
|
|
.catch(() => {
|
|
console.error("Error fetching version history");
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [projectId]);
|
|
|
|
useEffect(() => {
|
|
if (versionHistory.length > 0) {
|
|
recentlyViewedApi().then((projects) => {
|
|
const recent_opened_verisionID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?.Present_version._id;
|
|
if (recent_opened_verisionID && projects.RecentlyViewed[0]._id === projectId) {
|
|
const version = versionHistory.find((ver) => ver.versionId === recent_opened_verisionID);
|
|
if (version) {
|
|
setSelectedVersion(version);
|
|
}
|
|
} else {
|
|
setSelectedVersion(versionHistory[0]);
|
|
}
|
|
});
|
|
}
|
|
}, [setSelectedVersion, versionHistory, projectId]);
|
|
|
|
const handleSelectVersion = (option: string) => {
|
|
const version = versionHistory.find((version) => version.versionName === option);
|
|
if (version) {
|
|
setSelectedVersion(version);
|
|
}
|
|
};
|
|
|
|
const handleSelectProduct = (option: string) => {
|
|
const product = products.find((product) => product.productName === option);
|
|
if (product && selectedVersion) {
|
|
const data = {
|
|
productUuid: product.productUuid,
|
|
productName: product.productName,
|
|
versionUuid: selectedVersion.versionId,
|
|
versionName: selectedVersion.versionName,
|
|
};
|
|
setMainState(data);
|
|
}
|
|
};
|
|
|
|
const handleObjectRename = async (newName: string) => {
|
|
if (!projectId) return;
|
|
if (selectedAssets.length === 1) {
|
|
if (!builderSocket?.connected) {
|
|
setAssetsApi({
|
|
modelUuid: selectedAssets[0].userData.modelUuid,
|
|
assetId: selectedAssets[0].userData.assetId,
|
|
modelName: newName,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
})
|
|
.then((data) => {
|
|
if (data.message === "Model updated successfully" && data.data) {
|
|
setSelectedAssets(selectedAssets);
|
|
setIsRenameMode(false);
|
|
setName(selectedAssets[0].userData.modelUuid, newName);
|
|
echo.info(`Asset Renamed: ${newName}`);
|
|
} else {
|
|
echo.error(`Error Renaming Asset`);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
echo.error(`Error Renaming Asset`);
|
|
});
|
|
} else {
|
|
const data = {
|
|
modelUuid: selectedAssets[0].userData.modelUuid,
|
|
assetId: selectedAssets[0].userData.assetId,
|
|
modelName: newName,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
socketId: builderSocket?.id,
|
|
organization: organization,
|
|
userId: userId,
|
|
};
|
|
|
|
setIsRenameMode(false);
|
|
builderSocket.emit("v1:model-asset:add", data);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{!selectedUser && (
|
|
<>
|
|
<KeyPressListener />
|
|
{!createNewWindow && loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
|
|
{!isPlaying && (
|
|
<>
|
|
{!toggleView && !isComparing && <ModuleToggle />}
|
|
{activeModule !== "visualization" && (
|
|
<>
|
|
<SideBarLeft />
|
|
<SideBarRight />
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{/* <RealTimeVisulization /> */}
|
|
{activeModule === "market" && <MarketPlace />}
|
|
{activeModule !== "market" && !isPlaying && !isComparing && <Tools />}
|
|
{isPlaying && activeModule === "simulation" && loadingProgress === 0 && <SimulationPlayer />}
|
|
{isPlaying && activeModule !== "simulation" && <ControlsPlayer />}
|
|
{activeModule === "visualization" && <DashboardEditor />}
|
|
|
|
{isRenameMode && selectedAssets.length === 1 && <RenameTooltip name={selectedAssets[0].userData.modelName} onSubmit={handleObjectRename} />}
|
|
|
|
{activeModule === "builder" && toggleView && <SelectFloorPlan />}
|
|
|
|
{selectedProduct && selectedVersion && isComparing && !isPlaying && activeModule === "simulation" && (
|
|
<div className="selectLayout-wrapper">
|
|
<RegularDropDown header={selectedVersion.versionName} options={versionHistory.map((v) => v.versionName)} onSelect={handleSelectVersion} search={false} />
|
|
<br />
|
|
<RegularDropDown header={selectedProduct.productName} options={products.map((l) => l.productName)} onSelect={handleSelectProduct} search={false} />
|
|
</div>
|
|
)}
|
|
|
|
<VersionSaved />
|
|
</>
|
|
)}
|
|
|
|
{(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
|
|
|
|
{activeModule !== "market" && !selectedUser && <Footer />}
|
|
|
|
<div
|
|
className="scene-container"
|
|
id="work-space-three-d-canvas"
|
|
style={{
|
|
// height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
|
// width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
|
|
// left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
|
// borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
|
|
height: "100vh",
|
|
width: "100vw",
|
|
left: "0%",
|
|
borderRadius: "",
|
|
}}
|
|
role="application"
|
|
onDrop={(event) =>
|
|
createHandleDrop({
|
|
widgetSubOption,
|
|
visualizationSocket,
|
|
selectedZone,
|
|
setFloatingWidget,
|
|
event,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
})
|
|
}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
>
|
|
<Scene layout="Main Layout" />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MainScene;
|