Dwinzo_dev/app/src/modules/scene/scene.tsx

105 lines
4.4 KiB
TypeScript

import { useEffect, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { KeyboardControls } from "@react-three/drei";
import { SceneProvider } from "./sceneContext";
import Builder from "../builder/builder";
import Visualization from "../visualization/visualization";
import Setup from "./setup/setup";
import Simulation from "../simulation/simulation";
import Collaboration from "../collaboration/collaboration";
import useModuleStore from "../../store/useModuleStore";
import { useParams } from "react-router-dom";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { getUserData } from "../../components/Dashboard/functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { useAssetsStore } from "../../store/builder/useAssetStore";
export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
const map = useMemo(() => [
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
{ name: "right", keys: ["ArrowRight", "d", "D"] },
], []);
const { assets } = useAssetsStore();
const { userId, organization } = getUserData();
const { activeModule } = useModuleStore();
const { projectId } = useParams();
const { projectSocket } = useSocketStore();
const { loadingProgress } = useLoadingProgress();
const handleUpdatingProject = async () => {
if (!projectId) return;
try {
const projects = await getAllProjects(userId, organization);
let projectUuid = projects.Projects.find(
(val: any) => val.projectUuid === projectId || val._id === projectId
);
if (activeModule === "builder" && loadingProgress !== 1) {
const canvas =
document.getElementById("sceneCanvas")?.children[0]?.children[0];
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
setTimeout(() => {
const updateProjects = {
projectId: projectUuid,
organization,
userId,
projectName: projectUuid.projectName,
thumbnail: screenshotDataUrl,
};
if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects);
}
}, 8000);
} else {
const canvas =
document.getElementById("sceneCanvas")?.children[0]?.children[0];
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
const updateProjects = {
projectId: projectUuid,
organization,
userId,
projectName: projectUuid.projectName,
thumbnail: screenshotDataUrl,
};
// console.log('screenshotDataUrl: ', screenshotDataUrl);
// console.log('updateProjects: ', updateProjects);
if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects);
}
}
} catch (error) { }
};
useEffect(() => {
handleUpdatingProject()
}, [activeModule, assets, loadingProgress])
return (
<SceneProvider layout={layout}>
<KeyboardControls map={map}>
<Canvas
id="sceneCanvas"
shadows
color="#aaaa"
eventPrefix="client"
onContextMenu={(e) => {
e.preventDefault();
}}
onCreated={(e) => {
e.scene.background = null;
}}
gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
>
<Setup />
<Collaboration />
<Builder />
<Simulation />
<Visualization />
</Canvas>
</KeyboardControls>
</SceneProvider>
);
}