216 lines
10 KiB
TypeScript
216 lines
10 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useLoadingProgress, useRenameModeStore, useSaveVersion, useSelectedComment, useSocketStore, useWidgetSubOption } from "../../../store/builder/store";
|
|
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/ThreadChat";
|
|
import Scene from "../../../modules/scene/scene";
|
|
import useModuleStore, { useThreeDStore } from "../../../store/useModuleStore";
|
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
|
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
|
import { useFloatingWidget } from "../../../store/visualization/useDroppedObjectsStore";
|
|
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
|
|
import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
|
|
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
|
|
import { useProductContext } from "../../../modules/simulation/products/productContext";
|
|
import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
|
|
import { useParams } from "react-router-dom";
|
|
import { useSceneContext } from "../../../modules/scene/sceneContext";
|
|
import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
|
|
import { useVersionContext } from "../../../modules/builder/version/versionContext";
|
|
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
|
import { recentlyViewed } from "../../../services/dashboard/recentlyViewed";
|
|
import { getUserData } from "../../../functions/getUserData";
|
|
import useRestStates from "../../../hooks/useResetStates";
|
|
|
|
function MainScene() {
|
|
const { setMainProduct } = useMainProduct();
|
|
const { selectedProductStore } = useProductContext();
|
|
const { selectedProduct } = selectedProductStore();
|
|
const { isVersionSaved, setIsVersionSaved } = useSaveVersion();
|
|
const { activeModule } = useModuleStore();
|
|
const { selectedUser } = useSelectedUserStore();
|
|
const { loadingProgress } = useLoadingProgress();
|
|
const { toggleThreeD } = useThreeDStore();
|
|
const { isPlaying } = usePlayButtonStore();
|
|
const { widgetSubOption } = useWidgetSubOption();
|
|
const { visualizationSocket } = useSocketStore();
|
|
const { selectedZone } = useSelectedZoneStore();
|
|
const { setFloatingWidget } = useFloatingWidget();
|
|
const { clearComparisonProduct } = useComparisonProduct();
|
|
const { selectedFloorAsset, setSelectedFloorAsset } = useBuilderStore();
|
|
const { assetStore, productStore } = useSceneContext();
|
|
const { products } = productStore();
|
|
const { setName, selectedAssets, setSelectedAssets } = assetStore();
|
|
const { projectId } = useParams();
|
|
const { organization, userId } = getUserData();
|
|
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
|
|
const { versionHistory } = useVersionHistoryStore();
|
|
const { selectedVersionStore } = useVersionContext();
|
|
const { selectedVersion, setSelectedVersion } = selectedVersionStore();
|
|
const { selectedComment, commentPositionState } = useSelectedComment();
|
|
const { resetStates } = useRestStates();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
resetStates();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (activeModule !== "simulation") {
|
|
clearComparisonProduct();
|
|
setIsVersionSaved(false);
|
|
}
|
|
}, [activeModule, clearComparisonProduct, setIsVersionSaved]);
|
|
|
|
useEffect(() => {
|
|
if (versionHistory.length > 0 && organization && userId) {
|
|
recentlyViewed(organization, userId).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) {
|
|
setMainProduct(product.productUuid, product.productName);
|
|
}
|
|
};
|
|
|
|
const handleObjectRename = async (newName: string) => {
|
|
if (!projectId) return;
|
|
if (selectedFloorAsset) {
|
|
setAssetsApi({
|
|
modelUuid: selectedFloorAsset.userData.modelUuid,
|
|
modelName: newName,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
}).then(() => {
|
|
selectedFloorAsset.userData = { ...selectedFloorAsset.userData, modelName: newName };
|
|
setSelectedFloorAsset(selectedFloorAsset);
|
|
setIsRenameMode(false);
|
|
setName(selectedFloorAsset.userData.modelUuid, newName);
|
|
});
|
|
} else if (selectedAssets.length === 1) {
|
|
setAssetsApi({
|
|
modelUuid: selectedAssets[0].userData.modelUuid,
|
|
modelName: newName,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
}).then(() => {
|
|
selectedAssets[0].userData = { ...selectedAssets[0].userData, modelName: newName };
|
|
setSelectedAssets(selectedAssets);
|
|
setIsRenameMode(false);
|
|
setName(selectedAssets[0].userData.modelUuid, newName);
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{!selectedUser && (
|
|
<>
|
|
<KeyPressListener />
|
|
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
|
|
{!isPlaying && (
|
|
<>
|
|
{toggleThreeD && !isVersionSaved && <ModuleToggle />}
|
|
<SideBarLeft />
|
|
<SideBarRight />
|
|
</>
|
|
)}
|
|
<RealTimeVisulization />
|
|
{activeModule === "market" && <MarketPlace />}
|
|
{activeModule !== "market" && !isPlaying && !isVersionSaved && <Tools />}
|
|
{isPlaying && activeModule === "simulation" && loadingProgress === 0 && <SimulationPlayer />}
|
|
{isPlaying && activeModule !== "simulation" && <ControlsPlayer />}
|
|
|
|
{isRenameMode && (selectedFloorAsset?.userData.modelName || selectedAssets.length === 1) && <RenameTooltip name={selectedFloorAsset?.userData.modelName || selectedAssets[0].userData.modelName} onSubmit={handleObjectRename} />}
|
|
{/* remove this later */}
|
|
{activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
|
|
</>
|
|
)}
|
|
<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",
|
|
}}
|
|
role="application"
|
|
onDrop={(event) =>
|
|
createHandleDrop({
|
|
widgetSubOption,
|
|
visualizationSocket,
|
|
selectedZone,
|
|
setFloatingWidget,
|
|
event,
|
|
projectId,
|
|
versionId: selectedVersion?.versionId || "",
|
|
})
|
|
}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
>
|
|
<Scene layout="Main Layout" />
|
|
</div>
|
|
|
|
{selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (
|
|
<div className="selectLayout-wrapper">
|
|
<RegularDropDown
|
|
header={selectedVersion.versionName}
|
|
options={versionHistory.map((v) => v.versionName)} // Pass layout names as options
|
|
onSelect={handleSelectVersion}
|
|
search={false}
|
|
/>
|
|
<br />
|
|
<RegularDropDown
|
|
header={selectedProduct.productName}
|
|
options={products.map((l) => l.productName)} // Pass layout names as options
|
|
onSelect={handleSelectProduct}
|
|
search={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activeModule !== "market" && !selectedUser && <Footer />}
|
|
|
|
<VersionSaved />
|
|
|
|
{(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MainScene;
|