updated

2025-06-23 09:37:53 +05:30
parent 2fbdf8ab61
commit 54b02541c1
278 changed files with 10134 additions and 7904 deletions
--- a/app/src/modules/scene/camera/switchView.tsx
+++ b/app/src/modules/scene/camera/switchView.tsx
@@ -5,6 +5,8 @@ import { useThree } from "@react-three/fiber";
 import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
 import * as CONSTANTS from '../../../types/world/worldConstants';
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../functions/getUserData";
+import { CameraControls } from "@react-three/drei";

 export default function SwitchView() {
  const { toggleView } = useToggleView();
@@ -15,6 +17,7 @@ export default function SwitchView() {
  orthoCamera.current = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.01, 1000);
  perspectiveCamera.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
  const { projectId } = useParams();
+  const { organization } = getUserData();

  useEffect(() => {
    if (!perspectiveCamera.current || !orthoCamera.current) return;
@@ -38,15 +41,15 @@ export default function SwitchView() {
      state.controls.mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
    } else {
      try {
-        const email = localStorage.getItem('email');
-        const organization = (email!.split("@")[1]).split(".")[0];
-        getCamera(organization, localStorage.getItem('userId')!,projectId).then((data) => {
+        getCamera(organization, localStorage.getItem('userId')!, projectId).then((data) => {
          if (data && data.position && data.target) {
+            // state.controls?.setLookAt(data.position.x, data.position.y, data.position.z, data.target.x, data.target.y, data.target.z, true)
            state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
            state.controls?.setTarget(data.target.x, data.target.y, data.target.z);
            localStorage.setItem("cameraPosition", JSON.stringify(data.position));
            localStorage.setItem("controlTarget", JSON.stringify(data.target));
          } else {
+            // state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
            state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
            state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
            localStorage.setItem("cameraPosition", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition)));
@@ -56,6 +59,7 @@ export default function SwitchView() {
      } catch (error) {
        echo.error("Failed to retrieve camera position or target");
        console.error("Failed to retrieve camera position or target:", error);
+        // state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
        state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
        state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
      }
--- a/app/src/modules/scene/camera/updateCameraPosition.ts
+++ b/app/src/modules/scene/camera/updateCameraPosition.ts
@@ -1,29 +1,31 @@
 import { Socket } from "socket.io-client";
-import * as THREE from 'three';
+import * as THREE from "three";
+import { getUserData } from "../../../functions/getUserData";

 export default function updateCamPosition(
-    controls: any,
-    socket: Socket,
-    position: THREE.Vector3,
-    rotation: THREE.Euler,
-    projectId?:string
+  controls: any,
+  socket: Socket,
+  position: THREE.Vector3,
+  rotation: THREE.Euler,
+  projectId?: string
 ) {
-    if (!controls.current) return;
-    const target = controls.current.getTarget(new THREE.Vector3());
-    const email = localStorage.getItem("email");
-    const organization = email!.split("@")[1].split(".")[0];
+  const { userId, organization } = getUserData();
+  if (!controls.current) return;
+  const target = controls.current.getTarget(new THREE.Vector3());

-    const camData = {
-        organization: organization,
-        userId: localStorage.getItem("userId")!,
-        position: position,
-        target: new THREE.Vector3(target.x, 0, target.z),
-        rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
-        socketId: socket.id,
-        projectId
-    };
-    // console.log('CameracamData: ', camData);
-    socket.emit("v1:Camera:set", camData);
-    localStorage.setItem("cameraPosition", JSON.stringify(position));
-    localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(target.x, 0, target.z)));
-}
+  const camData = {
+    organization,
+    userId: userId,
+    position: position,
+    target: new THREE.Vector3(target.x, 0, target.z),
+    rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
+    socketId: socket.id,
+    projectId,
+  };
+  socket.emit("v1:Camera:set", camData);
+  localStorage.setItem("cameraPosition", JSON.stringify(position));
+  localStorage.setItem(
+    "controlTarget",
+    JSON.stringify(new THREE.Vector3(target.x, 0, target.z))
+  );
+}
--- a/app/src/modules/scene/controls/controls.tsx
+++ b/app/src/modules/scene/controls/controls.tsx
@@ -12,6 +12,7 @@ import SwitchView from "../camera/switchView";
 import SelectionControls from "./selectionControls/selectionControls";
 import TransformControl from "./transformControls/transformControls";
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../functions/getUserData";

 export default function Controls() {
    const controlsRef = useRef<CameraControls>(null);
@@ -21,16 +22,13 @@ export default function Controls() {
    const { socket } = useSocketStore();
    const state = useThree();
    const { projectId } = useParams();
-
+    const { userId, organization } = getUserData();

    useEffect(() => {
        if (controlsRef.current) {
            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
        }
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
-        const userId = localStorage.getItem("userId")!;

        getCamera(organization, userId, projectId).then((data) => {
            // console.log('data: ', data);
@@ -54,12 +52,8 @@ export default function Controls() {
            localStorage.setItem("cameraPosition", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition)));
            localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget)));

-            const email = localStorage.getItem('email')
-            const organization = (email!.split("@")[1]).split(".")[0];
-            const userId = localStorage.getItem("userId");
-
            const camData = {
-                organization: organization,
+                organization,
                userId: userId,
                position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
                target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
--- a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
@@ -2,12 +2,13 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 const CopyPasteControls = ({
    copiedObjects,
@@ -27,9 +28,13 @@ const CopyPasteControls = ({
    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
    const { socket } = useSocketStore();
-    const { addEvent } = useEventsStore();
+    const { assetStore, eventStore } = useSceneContext();
+    const { addEvent } = eventStore();
    const { projectId } = useParams();
-    const { assets, addAsset } = useAssetsStore();
+    const { assets, addAsset } = assetStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { userId, organization } = getUserData();

    useEffect(() => {
        if (!camera || !scene || toggleView) return;
@@ -146,8 +151,6 @@ const CopyPasteControls = ({

    const addPastedObjects = () => {
        if (pastedObjects.length === 0) return;
-        const email = localStorage.getItem("email");
-        const organization = email ? email.split("@")[1].split(".")[0] : "default";

        pastedObjects.forEach(async (obj: THREE.Object3D) => {
            if (obj) {
@@ -332,10 +335,9 @@ const CopyPasteControls = ({
                    }

                    newFloorItem.eventData = eventData;
+                    //REST

-                    const userId = localStorage.getItem("userId");                    //REST
-
-                    // await setFloorItemApi(
+                    // await setAssetsApi(
                    //     organization,
                    //     obj.uuid,
                    //     obj.userData.name,
@@ -359,7 +361,8 @@ const CopyPasteControls = ({
                        isVisible: true,
                        socketId: socket.id,
                        eventData: eventData,
-                        userId, 
+                        versionId: selectedVersion?.versionId || '',
+                        userId,
                        projectId
                    };

@@ -392,7 +395,7 @@ const CopyPasteControls = ({

                    //REST

-                    // await setFloorItemApi(
+                    // await setAssetsApi(
                    //     organization,
                    //     obj.uuid,
                    //     obj.userData.name,
@@ -404,7 +407,6 @@ const CopyPasteControls = ({
                    // );

                    //SOCKET
-                    const userId = localStorage.getItem("userId");
                    const data = {
                        organization,
                        modelUuid: newFloorItem.modelUuid,
@@ -414,8 +416,9 @@ const CopyPasteControls = ({
                        rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                        isLocked: false,
                        isVisible: true,
-                        socketId: socket.id, 
-                        projectId, 
+                        socketId: socket.id,
+                        versionId: selectedVersion?.versionId || '',
+                        projectId,
                        userId
                    };

--- a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
@@ -2,12 +2,13 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 const DuplicationControls = ({
    duplicatedObjects,
@@ -25,9 +26,13 @@ const DuplicationControls = ({
    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
    const { socket } = useSocketStore();
-    const { addEvent } = useEventsStore();
+    const { assetStore, eventStore } = useSceneContext();
+    const { addEvent } = eventStore();
    const { projectId } = useParams();
-    const { assets, addAsset } = useAssetsStore();
+    const { assets, addAsset } = assetStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { userId, organization } = getUserData();

    useEffect(() => {
        if (!camera || !scene || toggleView) return;
@@ -121,8 +126,6 @@ const DuplicationControls = ({

    const addDuplicatedAssets = () => {
        if (duplicatedObjects.length === 0) return;
-        const email = localStorage.getItem("email");
-        const organization = email ? email.split("@")[1].split(".")[0] : "default";

        duplicatedObjects.forEach(async (obj: THREE.Object3D) => {
            if (obj) {
@@ -307,10 +310,9 @@ const DuplicationControls = ({

                    newFloorItem.eventData = eventData;

-                    const userId = localStorage.getItem("userId");
                    //REST

-                    // await setFloorItemApi(
+                    // await setAssetsApi(
                    //     organization,
                    //     obj.uuid,
                    //     obj.userData.name,
@@ -334,7 +336,8 @@ const DuplicationControls = ({
                        isVisible: true,
                        socketId: socket.id,
                        eventData: eventData,
-                        projectId, 
+                        versionId: selectedVersion?.versionId || '',
+                        projectId,
                        userId
                    };

@@ -358,10 +361,9 @@ const DuplicationControls = ({

                } else {

-                    const userId = localStorage.getItem("userId");
                    //REST

-                    // await setFloorItemApi(
+                    // await setAssetsApi(
                    //     organization,
                    //     obj.uuid,
                    //     obj.userData.name,
@@ -384,7 +386,8 @@ const DuplicationControls = ({
                        isLocked: false,
                        isVisible: true,
                        socketId: socket.id,
-                        userId, 
+                        versionId: selectedVersion?.versionId || '',
+                        userId,
                        projectId
                    };

--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -2,17 +2,17 @@ import * as THREE from "three";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store";
-// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { snapControls } from "../../../../utils/handleSnap";
 import DistanceFindingControls from "./distanceFindingControls";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
 import { useProductContext } from "../../../simulation/products/productContext";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 function MoveControls({
    movedObjects,
@@ -35,12 +35,13 @@ function MoveControls({
    const { selectedProduct } = selectedProductStore();
    const { socket } = useSocketStore();
    const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("");
-    const email = localStorage.getItem("email");
-    const organization = email!.split("@")[1].split(".")[0];
-    const userId = localStorage.getItem("userId");
+    const { userId, organization } = getUserData();
    const { projectId } = useParams();
-    const { updateAsset } = useAssetsStore();
+    const { assetStore, eventStore, productStore } = useSceneContext();
+    const { updateAsset } = assetStore();
    const AssetGroup = useRef<THREE.Group | undefined>(undefined);
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();

    const updateBackend = (
        productName: string,
@@ -53,6 +54,7 @@ function MoveControls({
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

@@ -245,18 +247,18 @@ function MoveControls({
                };

                if (obj.userData.eventData) {
-                    const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
-                    const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productUuid, obj.userData.modelUuid);
+                    const eventData = eventStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+                    const productData = productStore.getState().getEventByModelUuid(selectedProduct.productUuid, obj.userData.modelUuid);

                    if (eventData) {
-                        useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+                        eventStore.getState().updateEvent(obj.userData.modelUuid, {
                            position: [worldPosition.x, worldPosition.y, worldPosition.z],
                            rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                        });
                    }

                    if (productData) {
-                        const event = useProductStore
+                        const event = productStore
                            .getState()
                            .updateEvent(
                                selectedProduct.productUuid,
@@ -287,7 +289,7 @@ function MoveControls({

                //REST

-                // await setFloorItemApi(
+                // await setAssetsApi(
                //     organization,
                //     obj.uuid,
                //     obj.userData.name,
@@ -310,6 +312,7 @@ function MoveControls({
                    isLocked: false,
                    isVisible: true,
                    socketId: socket.id,
+                    versionId: selectedVersion?.versionId || '',
                    projectId,
                    userId
                };
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -2,14 +2,14 @@ import * as THREE from "three";
 import { useEffect, useMemo, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
 import { useProductContext } from "../../../simulation/products/productContext";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 function RotateControls({
    rotatedObjects,
@@ -31,13 +31,13 @@ function RotateControls({
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { socket } = useSocketStore();
-
-    const email = localStorage.getItem('email')
-    const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
-    const userId = localStorage.getItem("userId");
+    const { userId, organization } = getUserData();
    const { projectId } = useParams();
-    const { updateAsset } = useAssetsStore();
+    const { assetStore, eventStore, productStore } = useSceneContext();
+    const { updateAsset } = assetStore();
    const AssetGroup = useRef<THREE.Group | undefined>(undefined);
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();

    const updateBackend = (
        productName: string,
@@ -49,7 +49,8 @@ function RotateControls({
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

@@ -211,17 +212,17 @@ function RotateControls({
                };

                if (obj.userData.eventData) {
-                    const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
-                    const productData = useProductStore.getState().getEventByModelUuid(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid);
+                    const eventData = eventStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+                    const productData = productStore.getState().getEventByModelUuid(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid);

                    if (eventData) {
-                        useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+                        eventStore.getState().updateEvent(obj.userData.modelUuid, {
                            position: [worldPosition.x, worldPosition.y, worldPosition.z],
                            rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                        })
                    }
                    if (productData) {
-                        const event = useProductStore.getState().updateEvent(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid, {
+                        const event = productStore.getState().updateEvent(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid, {
                            position: [worldPosition.x, worldPosition.y, worldPosition.z],
                            rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                        })
@@ -246,7 +247,7 @@ function RotateControls({

                //REST

-                // await setFloorItemApi(
+                // await setAssetsApi(
                //     organization,
                //     obj.uuid,
                //     obj.userData.name,
@@ -269,6 +270,7 @@ function RotateControls({
                    isLocked: false,
                    isVisible: true,
                    socketId: socket.id,
+                    versionId: selectedVersion?.versionId || '',
                    projectId,
                    userId
                };
--- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
@@ -13,10 +13,10 @@ import CopyPasteControls from "./copyPasteControls";
 import MoveControls from "./moveControls";
 import RotateControls from "./rotateControls";
 import useModuleStore from "../../../../store/useModuleStore";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 const SelectionControls: React.FC = () => {
    const { camera, controls, gl, scene, raycaster, pointer } = useThree();
@@ -31,9 +31,12 @@ const SelectionControls: React.FC = () => {
    const boundingBoxRef = useRef<THREE.Mesh>();
    const { activeModule } = useModuleStore();
    const { socket } = useSocketStore();
-    const { removeAsset } = useAssetsStore();
+    const { assetStore, eventStore, productStore } = useSceneContext();
+    const { removeAsset } = assetStore();
    const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
    const { toolMode } = useToolMode();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    const isDragging = useRef(false);
@@ -43,6 +46,7 @@ const SelectionControls: React.FC = () => {
    const rightClickMoved = useRef(false);
    const isCtrlSelecting = useRef(false);
    const isShiftSelecting = useRef(false);
+    const { userId, organization } = getUserData();

    useEffect(() => {
        if (!camera || !scene || toggleView) return;
@@ -151,6 +155,8 @@ const SelectionControls: React.FC = () => {
                        setSelectedAssets(selected);
                    }
                }
+            } else if (controls) {
+                (controls as any).enabled = true;
            }
        };

@@ -251,9 +257,6 @@ const SelectionControls: React.FC = () => {

    const deleteSelection = () => {
        if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
-            const email = localStorage.getItem("email");
-            const organization = email!.split("@")[1].split(".")[0];
-            const userId = localStorage.getItem("userId");

            const storedItems = JSON.parse(localStorage.getItem("FloorItems") ?? "[]");
            const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
@@ -269,18 +272,19 @@ const SelectionControls: React.FC = () => {
                //SOCKET

                const data = {
-                    organization: organization,
+                    organization,
                    modelUuid: selectedMesh.userData.modelUuid,
                    modelName: selectedMesh.userData.modelName,
                    socketId: socket.id,
                    projectId,
+                    versionId: selectedVersion?.versionId || '',
                    userId
                };

                const response = socket.emit("v1:model-asset:delete", data);

-                useEventsStore.getState().removeEvent(selectedMesh.uuid);
-                useProductStore.getState().deleteEvent(selectedMesh.uuid);
+                eventStore.getState().removeEvent(selectedMesh.uuid);
+                productStore.getState().deleteEvent(selectedMesh.uuid);

                if (response) {

--- a/app/src/modules/scene/controls/transformControls/transformControls.tsx
+++ b/app/src/modules/scene/controls/transformControls/transformControls.tsx
@@ -5,13 +5,13 @@ import { useThree } from "@react-three/fiber";

 import { useEffect, useState } from "react";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
-import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+// import { setAssetsApi } from "../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../../store/builder/useAssetStore";
 import { useProductContext } from "../../../simulation/products/productContext";
+import { getUserData } from "../../../../functions/getUserData";
+import { useSceneContext } from "../../sceneContext";
+import { useVersionContext } from "../../../builder/version/versionContext";

 export default function TransformControl() {
    const state = useThree();
@@ -23,11 +23,11 @@ export default function TransformControl() {
    const { socket } = useSocketStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
-    const { updateAsset, getAssetById } = useAssetsStore();
-
-    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
-    const userId = localStorage.getItem("userId");
+    const { assetStore, eventStore, productStore } = useSceneContext();
+    const { updateAsset, getAssetById } = assetStore();
+    const { userId, organization } = getUserData();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    const updateBackend = (
@@ -41,6 +41,7 @@ export default function TransformControl() {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

@@ -67,18 +68,18 @@ export default function TransformControl() {
        const asset = getAssetById(selectedFloorItem?.uuid);
        if (asset) {
            if (asset.eventData) {
-                const eventData = useEventsStore.getState().getEventByModelUuid(asset.modelUuid);
-                const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productUuid, asset.modelUuid);
+                const eventData = eventStore.getState().getEventByModelUuid(asset.modelUuid);
+                const productData = productStore.getState().getEventByModelUuid(selectedProduct.productUuid, asset.modelUuid);

                if (eventData) {
-                    useEventsStore.getState().updateEvent(asset.modelUuid, {
+                    eventStore.getState().updateEvent(asset.modelUuid, {
                        position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
                        rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
                    });
                }

                if (productData) {
-                    const event = useProductStore
+                    const event = productStore
                        .getState()
                        .updateEvent(
                            selectedProduct.productUuid,
@@ -107,7 +108,7 @@ export default function TransformControl() {

            //REST

-            // await setFloorItemApi(
+            // await setAssetsApi(
            //     organization,
            //     asset.modelUuid,
            //     asset.modelName,
@@ -130,6 +131,7 @@ export default function TransformControl() {
                isLocked: false,
                isVisible: true,
                socketId: socket.id,
+                versionId: selectedVersion?.versionId || '',
                userId,
                projectId
            };
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
 import { KeyboardControls } from "@react-three/drei";
-import { SceneProvider } from "./sceneContext";
+import { useSceneContext } from "./sceneContext";

 import Builder from "../builder/builder";
 import Visualization from "../visualization/visualization";
@@ -11,9 +11,9 @@ 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 { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
-import { useAssetsStore } from "../../store/builder/useAssetStore";
+import { Color } from "three";

 export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
    const map = useMemo(() => [
@@ -22,84 +22,58 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
        { name: "left", keys: ["ArrowLeft", "a", "A"] },
        { name: "right", keys: ["ArrowRight", "d", "D"] },
    ], []);
-    const { assets } = useAssetsStore();
+    const { assetStore } = useSceneContext();
+    const { assets } = assetStore();
    const { userId, organization } = getUserData();
-    const { activeModule } = useModuleStore();
    const { projectId } = useParams();
    const { projectSocket } = useSocketStore();
+    const { activeModule } = useModuleStore();
    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];
+    useEffect(() => {
+        if (!projectId && loadingProgress > 1) return;
+        getAllProjects(userId, organization)
+            .then((projects) => {
+                let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
+                const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName('canvas')[0];
+                if (!canvas) return;
                const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
                const updateProjects = {
-                    projectId: projectUuid,
+                    projectId: project.projectUuid,
                    organization,
                    userId,
-                    projectName: projectUuid.projectName,
+                    projectName: project.projectName,
                    thumbnail: screenshotDataUrl,
                };
-                // console.log('screenshotDataUrl: ', screenshotDataUrl);
-                // console.log('updateProjects: ', updateProjects);
                if (projectSocket) {
                    projectSocket.emit("v1:project:update", updateProjects);
                }
-            }
-
-        } catch (error) { }
-    };
-    useEffect(() => {
-        handleUpdatingProject()
+            }).catch((err) => {
+                console.error(err);
+            });
    }, [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>
+        <KeyboardControls map={map}>
+            <Canvas
+                id="sceneCanvas"
+                shadows
+                color="#aaaa"
+                eventPrefix="client"
+                onContextMenu={(e) => {
+                    e.preventDefault();
+                }}
+                onCreated={(e) => {
+                    e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d);
+                }}
+                gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+            >
+                <Setup />
+                <Collaboration />
+                <Builder />
+                <Simulation />
+                <Visualization />
+            </Canvas>
+        </KeyboardControls>
    );
 }
--- a/app/src/modules/scene/sceneContext.tsx
+++ b/app/src/modules/scene/sceneContext.tsx
@@ -1,4 +1,11 @@
 import { createContext, useContext, useMemo } from 'react';
+
+import { createAssetStore, AssetStoreType } from '../../store/builder/useAssetStore';
+import { createAisleStore, AisleStoreType } from '../../store/builder/useAisleStore';
+
+import { createEventStore, EventStoreType } from '../../store/simulation/useEventsStore';
+import { createProductStore, ProductStoreType } from '../../store/simulation/useProductStore';
+
 import { createMaterialStore, MaterialStoreType } from '../../store/simulation/useMaterialStore';
 import { createArmBotStore, ArmBotStoreType } from '../../store/simulation/useArmBotStore';
 import { createMachineStore, MachineStoreType } from '../../store/simulation/useMachineStore';
@@ -7,12 +14,20 @@ import { createVehicleStore, VehicleStoreType } from '../../store/simulation/use
 import { createStorageUnitStore, StorageUnitStoreType } from '../../store/simulation/useStorageUnitStore';

 type SceneContextValue = {
+
+    assetStore: AssetStoreType,
+    aisleStore: AisleStoreType,
+
+    eventStore: EventStoreType,
+    productStore: ProductStoreType,
+
    materialStore: MaterialStoreType;
    armBotStore: ArmBotStoreType;
    machineStore: MachineStoreType;
    conveyorStore: ConveyorStoreType;
    vehicleStore: VehicleStoreType;
    storageUnitStore: StorageUnitStoreType;
+
    layout: 'Main Layout' | 'Comparison Layout';
 };

@@ -25,6 +40,13 @@ export function SceneProvider({
    readonly children: React.ReactNode;
    readonly layout: 'Main Layout' | 'Comparison Layout';
 }) {
+
+    const assetStore = useMemo(() => createAssetStore(), []);
+    const aisleStore = useMemo(() => createAisleStore(), []);
+
+    const eventStore = useMemo(() => createEventStore(), []);
+    const productStore = useMemo(() => createProductStore(), []);
+
    const materialStore = useMemo(() => createMaterialStore(), []);
    const armBotStore = useMemo(() => createArmBotStore(), []);
    const machineStore = useMemo(() => createMachineStore(), []);
@@ -32,17 +54,26 @@ export function SceneProvider({
    const vehicleStore = useMemo(() => createVehicleStore(), []);
    const storageUnitStore = useMemo(() => createStorageUnitStore(), []);

+    const clearStores = useMemo(() => () => {
+        assetStore().clearAssets();
+    }, [assetStore]);
+
    const contextValue = useMemo(() => (
        {
+            assetStore,
+            aisleStore,
+            eventStore,
+            productStore,
            materialStore,
            armBotStore,
            machineStore,
            conveyorStore,
            vehicleStore,
            storageUnitStore,
+            clearStores,
            layout
        }
-    ), [materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout]);
+    ), [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);

    return (
        <SceneContext.Provider value={contextValue}>