folder structure change

2025-04-21 11:53:42 +05:30
parent 31561428ef
commit 54cc3deb98
118 changed files with 3014 additions and 13419 deletions
--- a/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx
+++ b/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx
@@ -0,0 +1,64 @@
+import { Line } from "@react-three/drei";
+import { useMemo } from "react";
+import * as THREE from "three";
+import { useSelectedAssets } from "../../../../store/store";
+
+const BoundingBox = ({ boundingBoxRef }: any) => {
+    const { selectedAssets } = useSelectedAssets();
+
+    const { points, boxProps } = useMemo(() => {
+        if (selectedAssets.length === 0) return { points: [], boxProps: {} };
+
+        const box = new THREE.Box3();
+        selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));
+
+        const size = new THREE.Vector3();
+        box.getSize(size);
+        const center = new THREE.Vector3();
+        box.getCenter(center);
+
+        const halfSize = size.clone().multiplyScalar(0.5);
+        const min = center.clone().sub(halfSize);
+        const max = center.clone().add(halfSize);
+
+        const points: any = [
+            [min.x, min.y, min.z], [max.x, min.y, min.z],
+            [max.x, min.y, min.z], [max.x, max.y, min.z],
+            [max.x, max.y, min.z], [min.x, max.y, min.z],
+            [min.x, max.y, min.z], [min.x, min.y, min.z],
+
+            [min.x, min.y, max.z], [max.x, min.y, max.z],
+            [max.x, min.y, max.z], [max.x, max.y, max.z],
+            [max.x, max.y, max.z], [min.x, max.y, max.z],
+            [min.x, max.y, max.z], [min.x, min.y, max.z],
+
+            [min.x, min.y, min.z], [min.x, min.y, max.z],
+            [max.x, min.y, min.z], [max.x, min.y, max.z],
+            [max.x, max.y, min.z], [max.x, max.y, max.z],
+            [min.x, max.y, min.z], [min.x, max.y, max.z],
+        ];
+
+        return {
+            points,
+            boxProps: { position: center.toArray(), args: size.toArray() }
+        };
+    }, [selectedAssets]);
+
+    const savedTheme: string | null = localStorage.getItem("theme") || "light";
+    
+    return (
+        <>
+            {points.length > 0 && (
+                <>
+                    <Line points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
+                    <mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
+                        <boxGeometry args={boxProps.args} />
+                        <meshBasicMaterial />
+                    </mesh>
+                </>
+            )}
+        </>
+    );
+};
+
+export default BoundingBox;
--- a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
@@ -0,0 +1,211 @@
+import * as THREE from "three";
+import { useEffect, useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
+import { toast } from "react-toastify";
+// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+import * as Types from "../../../../types/world/worldTypes";
+import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+
+const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
+    const { camera, controls, gl, scene, pointer, raycaster } = useThree();
+    const { toggleView } = useToggleView();
+    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+    const { floorItems, setFloorItems } = useFloorItems();
+    const { socket } = useSocketStore()
+
+    useEffect(() => {
+        if (!camera || !scene || toggleView) return;
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        let isMoving = false;
+
+        const onPointerDown = () => {
+            isMoving = false;
+        };
+
+        const onPointerMove = () => {
+            isMoving = true;
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (!isMoving && pastedObjects.length > 0 && event.button === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+                event.preventDefault();
+                addPastedObjects();
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(event);
+
+            if (keyCombination === "Ctrl+C" && movedObjects.length === 0 && rotatedObjects.length === 0) {
+                copySelection();
+            }
+            if (keyCombination === "Ctrl+V" && copiedObjects.length > 0 && pastedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+                pasteCopiedObjects();
+            }
+        };
+
+        if (!toggleView) {
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+            canvasElement.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+            canvasElement.removeEventListener("keydown", onKeyDown);
+        };
+
+    }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, movedObjects, socket, floorItems, rotatedObjects]);
+
+    useFrame(() => {
+        if (pastedObjects.length > 0) {
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+            if (point) {
+                const position = new THREE.Vector3();
+                if (boundingBoxRef.current) {
+                    boundingBoxRef.current?.getWorldPosition(position)
+                    selectionGroup.current.position.set(point.x - (position.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (position.z - selectionGroup.current.position.z));
+                } else {
+                    const box = new THREE.Box3();
+                    pastedObjects.forEach((obj: THREE.Object3D) => box.expandByObject(obj.clone()));
+                    const center = new THREE.Vector3();
+                    box.getCenter(center);
+                    selectionGroup.current.position.set(point.x - (center.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (center.z - selectionGroup.current.position.z));
+                }
+            }
+        }
+    });
+
+    const copySelection = () => {
+        if (selectedAssets.length > 0) {
+            const newClones = selectedAssets.map((asset: any) => {
+                const clone = asset.clone();
+                clone.position.copy(asset.position);
+                return clone;
+            });
+            setCopiedObjects(newClones);
+            toast.info("Objects copied!");
+        }
+    };
+
+    const pasteCopiedObjects = () => {
+        if (copiedObjects.length > 0 && pastedObjects.length === 0) {
+            const newClones = copiedObjects.map((obj: THREE.Object3D) => {
+                const clone = obj.clone();
+                clone.position.copy(obj.position);
+                return clone;
+            });
+            selectionGroup.current.add(...newClones);
+            setpastedObjects([...newClones]);
+            setSelectedAssets([...newClones]);
+
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+            if (point) {
+                const position = new THREE.Vector3();
+                if (boundingBoxRef.current) {
+                    boundingBoxRef.current?.getWorldPosition(position)
+                    selectionGroup.current.position.set(point.x - (position.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (position.z - selectionGroup.current.position.z));
+                } else {
+                    const box = new THREE.Box3();
+                    newClones.forEach((obj: THREE.Object3D) => box.expandByObject(obj.clone()));
+                    const center = new THREE.Vector3();
+                    box.getCenter(center);
+                    selectionGroup.current.position.set(point.x - (center.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (center.z - selectionGroup.current.position.z));
+                }
+            }
+        }
+    };
+
+    const addPastedObjects = () => {
+        if (pastedObjects.length === 0) return;
+        pastedObjects.forEach(async (obj: THREE.Object3D) => {
+            const worldPosition = new THREE.Vector3();
+            obj.getWorldPosition(worldPosition);
+            obj.position.copy(worldPosition);
+
+            if (itemsGroupRef.current) {
+
+                const newFloorItem: Types.FloorItemType = {
+                    modeluuid: obj.uuid,
+                    modelname: obj.userData.name,
+                    modelfileID: obj.userData.modelId,
+                    position: [worldPosition.x, worldPosition.y, worldPosition.z],
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
+                    isLocked: false,
+                    isVisible: true
+                };
+
+                setFloorItems((prevItems: Types.FloorItems) => {
+                    const updatedItems = [...(prevItems || []), newFloorItem];
+                    localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+                    return updatedItems;
+                });
+
+                const email = localStorage.getItem("email");
+                const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+                //REST
+
+                // await setFloorItemApi(
+                //     organization,
+                //     obj.uuid,
+                //     obj.userData.name,
+                //     [worldPosition.x, worldPosition.y, worldPosition.z],
+                //     { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+                //     obj.userData.modelId,
+                //     false,
+                //     true,
+                // );
+
+                //SOCKET
+
+                const data = {
+                    organization,
+                    modeluuid: newFloorItem.modeluuid,
+                    modelname: newFloorItem.modelname,
+                    modelfileID: newFloorItem.modelfileID,
+                    position: newFloorItem.position,
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+                    isLocked: false,
+                    isVisible: true,
+                    socketId: socket.id,
+                };
+
+                socket.emit("v2:model-asset:add", data);
+
+                obj.userData.modeluuid = newFloorItem.modeluuid;
+                itemsGroupRef.current.add(obj);
+            }
+        });
+
+        toast.success("Object added!");
+        clearSelection();
+    };
+
+    const clearSelection = () => {
+        selectionGroup.current.children = [];
+        selectionGroup.current.position.set(0, 0, 0);
+        selectionGroup.current.rotation.set(0, 0, 0);
+        setMovedObjects([]);
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setRotatedObjects([]);
+        setSelectedAssets([]);
+    }
+
+    return null; // No visible output, but the component handles copy-paste functionality
+};
+
+export default CopyPasteControls;
--- a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
@@ -0,0 +1,189 @@
+import * as THREE from "three";
+import { useEffect, useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
+import { toast } from "react-toastify";
+// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+import * as Types from "../../../../types/world/worldTypes";
+import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+
+const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedObjects, setpastedObjects, selectionGroup, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
+    const { camera, controls, gl, scene, pointer, raycaster } = useThree();
+    const { toggleView } = useToggleView();
+    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+    const { floorItems, setFloorItems } = useFloorItems();
+    const { socket } = useSocketStore();
+
+    useEffect(() => {
+        if (!camera || !scene || toggleView) return;
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        let isMoving = false;
+
+        const onPointerDown = () => {
+            isMoving = false;
+        };
+
+        const onPointerMove = () => {
+            isMoving = true;
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (!isMoving && duplicatedObjects.length > 0 && event.button === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+                event.preventDefault();
+                addDuplicatedAssets();
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(event);
+
+            if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+                duplicateSelection();
+            }
+        };
+
+        if (!toggleView) {
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+            canvasElement.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+            canvasElement.removeEventListener("keydown", onKeyDown);
+        };
+
+    }, [camera, controls, scene, toggleView, selectedAssets, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects]);
+
+    useFrame(() => {
+        if (duplicatedObjects.length > 0) {
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+            if (point) {
+                const position = new THREE.Vector3();
+                if (boundingBoxRef.current) {
+                    boundingBoxRef.current?.getWorldPosition(position)
+                    selectionGroup.current.position.set(point.x - (position.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (position.z - selectionGroup.current.position.z));
+                } else {
+                    const box = new THREE.Box3();
+                    duplicatedObjects.forEach((obj: THREE.Object3D) => box.expandByObject(obj.clone()));
+                    const center = new THREE.Vector3();
+                    box.getCenter(center);
+                    selectionGroup.current.position.set(point.x - (center.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (center.z - selectionGroup.current.position.z));
+                }
+            }
+        }
+    });
+
+    const duplicateSelection = () => {
+        if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
+            const newClones = selectedAssets.map((asset: any) => {
+                const clone = asset.clone();
+                clone.position.copy(asset.position);
+                return clone;
+            });
+
+            selectionGroup.current.add(...newClones);
+            setDuplicatedObjects(newClones);
+
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+            if (point) {
+                const position = new THREE.Vector3();
+                boundingBoxRef.current?.getWorldPosition(position)
+                selectionGroup.current.position.set(point.x - (position.x - selectionGroup.current.position.x), selectionGroup.current.position.y, point.z - (position.z - selectionGroup.current.position.z));
+            }
+        }
+    };
+
+    const addDuplicatedAssets = () => {
+        if (duplicatedObjects.length === 0) return;
+        duplicatedObjects.forEach(async (obj: THREE.Object3D) => {
+            const worldPosition = new THREE.Vector3();
+            obj.getWorldPosition(worldPosition);
+            obj.position.copy(worldPosition);
+
+            if (itemsGroupRef.current) {
+
+                const newFloorItem: Types.FloorItemType = {
+                    modeluuid: obj.uuid,
+                    modelname: obj.userData.name,
+                    modelfileID: obj.userData.modelId,
+                    position: [worldPosition.x, worldPosition.y, worldPosition.z],
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
+                    isLocked: false,
+                    isVisible: true
+                };
+
+                setFloorItems((prevItems: Types.FloorItems) => {
+                    const updatedItems = [...(prevItems || []), newFloorItem];
+                    localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+                    return updatedItems;
+                });
+
+                const email = localStorage.getItem("email");
+                const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+                //REST
+
+                // await setFloorItemApi(
+                //     organization,
+                //     obj.uuid,
+                //     obj.userData.name,
+                //     [worldPosition.x, worldPosition.y, worldPosition.z],
+                //     { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+                //     obj.userData.modelId,
+                //     false,
+                //     true,
+                // );
+
+                //SOCKET
+
+                const data = {
+                    organization,
+                    modeluuid: newFloorItem.modeluuid,
+                    modelname: newFloorItem.modelname,
+                    modelfileID: newFloorItem.modelfileID,
+                    position: newFloorItem.position,
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+                    isLocked: false,
+                    isVisible: true,
+                    socketId: socket.id,
+                };
+
+                socket.emit("v2:model-asset:add", data);
+
+                obj.userData.modeluuid = newFloorItem.modeluuid;
+                itemsGroupRef.current.add(obj);
+            }
+        });
+
+        toast.success("Object duplicated!");
+        clearSelection();
+    }
+
+    const clearSelection = () => {
+        selectionGroup.current.children = [];
+        selectionGroup.current.position.set(0, 0, 0);
+        selectionGroup.current.rotation.set(0, 0, 0);
+        setMovedObjects([]);
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setRotatedObjects([]);
+        setSelectedAssets([]);
+    }
+
+    return null; // This component does not render any UI
+};
+
+export default DuplicationControls;
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -0,0 +1,240 @@
+import * as THREE from "three";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
+// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+import { toast } from "react-toastify";
+import * as Types from "../../../../types/world/worldTypes";
+import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+
+function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
+    const { camera, controls, gl, scene, pointer, raycaster } = useThree();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+
+    const { toggleView } = useToggleView();
+    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const { floorItems, setFloorItems } = useFloorItems();
+    const { socket } = useSocketStore();
+    const itemsData = useRef<Types.FloorItems>([]);
+
+    useEffect(() => {
+        if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
+
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        let isMoving = false;
+
+        const onPointerDown = () => {
+            isMoving = false;
+        };
+
+        const onPointerMove = () => {
+            isMoving = true;
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (!isMoving && movedObjects.length > 0 && event.button === 0) {
+                event.preventDefault();
+                placeMovedAssets();
+            }
+            if (!isMoving && movedObjects.length > 0 && event.button === 2) {
+                event.preventDefault();
+
+                clearSelection();
+                movedObjects.forEach((asset: any) => {
+                    if (itemsGroupRef.current) {
+                        itemsGroupRef.current.attach(asset);
+                    }
+                });
+
+                setFloorItems([...floorItems, ...itemsData.current]);
+
+                setMovedObjects([]);
+                itemsData.current = [];
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(event);
+
+            if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return;
+            if (keyCombination === "G") {
+                if (selectedAssets.length > 0) {
+                    moveAssets();
+                    itemsData.current = floorItems.filter((item: { modeluuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+                }
+            }
+            if (keyCombination === "ESCAPE") {
+                event.preventDefault();
+
+                clearSelection();
+                movedObjects.forEach((asset: any) => {
+                    if (itemsGroupRef.current) {
+                        itemsGroupRef.current.attach(asset);
+                    }
+                });
+
+                setFloorItems([...floorItems, ...itemsData.current]);
+
+                setMovedObjects([]);
+                itemsData.current = [];
+            }
+        };
+
+        if (!toggleView) {
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+            canvasElement.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+            canvasElement.removeEventListener("keydown", onKeyDown);
+        };
+    }, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects]);
+
+    const gridSize = 0.25;
+    const moveSpeed = 0.25;
+    const isGridSnap = false;
+
+    useFrame(() => {
+        if (movedObjects.length > 0) {
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+            if (point) {
+                let targetX = point.x;
+                let targetZ = point.z;
+
+                if (isGridSnap) {
+                    targetX = Math.round(point.x / gridSize) * gridSize;
+                    targetZ = Math.round(point.z / gridSize) * gridSize;
+                }
+
+                const position = new THREE.Vector3();
+                if (boundingBoxRef.current) {
+                    boundingBoxRef.current.getWorldPosition(position);
+                    selectionGroup.current.position.lerp(
+                        new THREE.Vector3(
+                            targetX - (position.x - selectionGroup.current.position.x),
+                            selectionGroup.current.position.y,
+                            targetZ - (position.z - selectionGroup.current.position.z)
+                        ),
+                        moveSpeed
+                    );
+                } else {
+                    const box = new THREE.Box3();
+                    movedObjects.forEach((obj: THREE.Object3D) => box.expandByObject(obj));
+                    const center = new THREE.Vector3();
+                    box.getCenter(center);
+
+                    selectionGroup.current.position.lerp(
+                        new THREE.Vector3(
+                            targetX - (center.x - selectionGroup.current.position.x),
+                            selectionGroup.current.position.y,
+                            targetZ - (center.z - selectionGroup.current.position.z)
+                        ),
+                        moveSpeed
+                    );
+                }
+            }
+        }
+    });
+
+
+    const moveAssets = () => {
+        const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+        setFloorItems(updatedItems);
+        setMovedObjects(selectedAssets);
+        selectedAssets.forEach((asset: any) => { selectionGroup.current.attach(asset); });
+    }
+
+    const placeMovedAssets = () => {
+        if (movedObjects.length === 0) return;
+
+        movedObjects.forEach(async (obj: THREE.Object3D) => {
+            const worldPosition = new THREE.Vector3();
+            obj.getWorldPosition(worldPosition);
+
+            selectionGroup.current.remove(obj);
+            obj.position.copy(worldPosition);
+
+            if (itemsGroupRef.current) {
+
+                const newFloorItem: Types.FloorItemType = {
+                    modeluuid: obj.uuid,
+                    modelname: obj.userData.name,
+                    modelfileID: obj.userData.modelId,
+                    position: [worldPosition.x, worldPosition.y, worldPosition.z],
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
+                    isLocked: false,
+                    isVisible: true
+                };
+
+                setFloorItems((prevItems: Types.FloorItems) => {
+                    const updatedItems = [...(prevItems || []), newFloorItem];
+                    localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+                    return updatedItems;
+                });
+
+                const email = localStorage.getItem("email");
+                const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+                //REST
+
+                // await setFloorItemApi(
+                //     organization,
+                //     obj.uuid,
+                //     obj.userData.name,
+                //     [worldPosition.x, worldPosition.y, worldPosition.z],
+                //     { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+                //     obj.userData.modelId,
+                //     false,
+                //     true,
+                // );
+
+                //SOCKET
+
+                const data = {
+                    organization,
+                    modeluuid: newFloorItem.modeluuid,
+                    modelname: newFloorItem.modelname,
+                    modelfileID: newFloorItem.modelfileID,
+                    position: newFloorItem.position,
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+                    isLocked: false,
+                    isVisible: true,
+                    socketId: socket.id,
+                };
+
+                socket.emit("v2:model-asset:add", data);
+
+                itemsGroupRef.current.add(obj);
+            }
+        });
+        toast.success("Object moved!");
+
+        itemsData.current = [];
+        clearSelection();
+    }
+
+    const clearSelection = () => {
+        selectionGroup.current.children = [];
+        selectionGroup.current.position.set(0, 0, 0);
+        selectionGroup.current.rotation.set(0, 0, 0);
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setMovedObjects([]);
+        setRotatedObjects([]);
+        setSelectedAssets([]);
+    }
+
+    return null; // No need to return anything, as this component is used for its side effects
+}
+
+export default MoveControls
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -0,0 +1,241 @@
+import * as THREE from "three";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/store";
+// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
+import { toast } from "react-toastify";
+import * as Types from "../../../../types/world/worldTypes";
+import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+
+function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
+    const { camera, controls, gl, scene, pointer, raycaster } = useThree();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+
+    const { toggleView } = useToggleView();
+    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const { floorItems, setFloorItems } = useFloorItems();
+    const { socket } = useSocketStore();
+    const itemsData = useRef<Types.FloorItems>([]);
+
+    const prevPointerPosition = useRef<THREE.Vector2 | null>(null);
+
+    useEffect(() => {
+        if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
+
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        let isMoving = false;
+
+        const onPointerDown = () => {
+            isMoving = false;
+        };
+
+        const onPointerMove = () => {
+            isMoving = true;
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (!isMoving && rotatedObjects.length > 0 && event.button === 0) {
+                event.preventDefault();
+                placeRotatedAssets();
+            }
+            if (!isMoving && rotatedObjects.length > 0 && event.button === 2) {
+                event.preventDefault();
+
+                clearSelection();
+                rotatedObjects.forEach((asset: any) => {
+                    if (itemsGroupRef.current) {
+                        itemsGroupRef.current.attach(asset);
+                    }
+                });
+
+                setFloorItems([...floorItems, ...itemsData.current]);
+
+                setRotatedObjects([]);
+                itemsData.current = [];
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || movedObjects.length > 0) return;
+            if (event.key.toLowerCase() === "r") {
+                if (selectedAssets.length > 0) {
+                    rotateAssets();
+                    itemsData.current = floorItems.filter((item: { modeluuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+                }
+            }
+            if (event.key.toLowerCase() === "escape") {
+                event.preventDefault();
+
+                clearSelection();
+                rotatedObjects.forEach((asset: any) => {
+                    if (itemsGroupRef.current) {
+                        itemsGroupRef.current.attach(asset);
+                    }
+                });
+
+                setFloorItems([...floorItems, ...itemsData.current]);
+
+                setRotatedObjects([]);
+                itemsData.current = [];
+            }
+        };
+
+        if (!toggleView) {
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+            canvasElement.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+            canvasElement.removeEventListener("keydown", onKeyDown);
+        };
+    }, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, rotatedObjects, movedObjects]);
+
+    useFrame(() => {
+        if (rotatedObjects.length > 0) {
+            const intersectionPoint = new THREE.Vector3();
+            raycaster.setFromCamera(pointer, camera);
+            const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+            if (point && prevPointerPosition.current) {
+                const box = new THREE.Box3();
+                rotatedObjects.forEach((obj: THREE.Object3D) => box.expandByObject(obj));
+                const center = new THREE.Vector3();
+                box.getCenter(center);
+
+                const delta = new THREE.Vector3().subVectors(point, center);
+                const prevPointerPosition3D = new THREE.Vector3(prevPointerPosition.current.x, 0, prevPointerPosition.current.y);
+
+                const angle = Math.atan2(delta.z, delta.x) - Math.atan2(prevPointerPosition3D.z - center.z, prevPointerPosition3D.x - center.x);
+
+                selectionGroup.current.rotation.y += -angle;
+
+                selectionGroup.current.position.sub(center);
+                selectionGroup.current.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), -angle);
+                selectionGroup.current.position.add(center);
+
+                prevPointerPosition.current = new THREE.Vector2(point.x, point.z);
+            }
+        }
+    });
+
+    const rotateAssets = () => {
+        const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedAssets.some((asset: any) => asset.uuid === item.modeluuid));
+        setFloorItems(updatedItems);
+
+        const box = new THREE.Box3();
+        selectedAssets.forEach((asset: any) => box.expandByObject(asset));
+        const center = new THREE.Vector3();
+        box.getCenter(center);
+
+        const intersectionPoint = new THREE.Vector3();
+        raycaster.setFromCamera(pointer, camera);
+        const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+        if (point) {
+            prevPointerPosition.current = new THREE.Vector2(point.x, point.z);
+        }
+
+        selectedAssets.forEach((asset: any) => {
+            selectionGroup.current.attach(asset);
+        });
+
+        setRotatedObjects(selectedAssets);
+    };
+
+    const placeRotatedAssets = () => {
+        if (rotatedObjects.length === 0) return;
+
+        rotatedObjects.forEach(async (obj: THREE.Object3D) => {
+            const worldPosition = new THREE.Vector3();
+            const worldQuaternion = new THREE.Quaternion();
+
+            obj.getWorldPosition(worldPosition);
+            obj.getWorldQuaternion(worldQuaternion);
+
+            selectionGroup.current.remove(obj);
+
+            obj.position.copy(worldPosition);
+            obj.quaternion.copy(worldQuaternion);
+
+
+            if (itemsGroupRef.current) {
+
+                const newFloorItem: Types.FloorItemType = {
+                    modeluuid: obj.uuid,
+                    modelname: obj.userData.name,
+                    modelfileID: obj.userData.modelId,
+                    position: [worldPosition.x, worldPosition.y, worldPosition.z],
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
+                    isLocked: false,
+                    isVisible: true
+                };
+
+                setFloorItems((prevItems: Types.FloorItems) => {
+                    const updatedItems = [...(prevItems || []), newFloorItem];
+                    localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+                    return updatedItems;
+                });
+
+                const email = localStorage.getItem("email");
+                const organization = email ? email.split("@")[1].split(".")[0] : "default";
+
+                //REST
+
+                // await setFloorItemApi(
+                //     organization,
+                //     obj.uuid,
+                //     obj.userData.name,
+                //     [worldPosition.x, worldPosition.y, worldPosition.z],
+                //     { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
+                //     obj.userData.modelId,
+                //     false,
+                //     true,
+                // );
+
+                //SOCKET
+
+                const data = {
+                    organization,
+                    modeluuid: newFloorItem.modeluuid,
+                    modelname: newFloorItem.modelname,
+                    modelfileID: newFloorItem.modelfileID,
+                    position: newFloorItem.position,
+                    rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
+                    isLocked: false,
+                    isVisible: true,
+                    socketId: socket.id,
+                };
+
+                socket.emit("v2:model-asset:add", data);
+
+                itemsGroupRef.current.add(obj);
+            }
+        });
+        toast.success("Object rotated!");
+
+        itemsData.current = [];
+        clearSelection();
+    }
+
+    const clearSelection = () => {
+        selectionGroup.current.children = [];
+        selectionGroup.current.position.set(0, 0, 0);
+        selectionGroup.current.rotation.set(0, 0, 0);
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setMovedObjects([]);
+        setRotatedObjects([]);
+        setSelectedAssets([]);
+    }
+
+    return null; // No need to return anything, as this component is used for its side effects
+}
+
+export default RotateControls
--- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
@@ -0,0 +1,272 @@
+import * as THREE from "three";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
+import { SelectionHelper } from "./selectionHelper";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/store";
+import BoundingBox from "./boundingBoxHelper";
+import { toast } from "react-toastify";
+// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
+import * as Types from "../../../../types/world/worldTypes";
+
+import DuplicationControls from "./duplicationControls";
+import CopyPasteControls from "./copyPasteControls";
+import MoveControls from "./moveControls";
+import RotateControls from "./rotateControls";
+import useModuleStore from "../../../../store/useModuleStore";
+
+const SelectionControls: React.FC = () => {
+    const { camera, controls, gl, scene, pointer } = useThree();
+    const itemsGroupRef = useRef<THREE.Group | undefined>(undefined);
+    const selectionGroup = useRef() as Types.RefGroup;
+    const { toggleView } = useToggleView();
+    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]);
+    const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
+    const [copiedObjects, setCopiedObjects] = useState<THREE.Object3D[]>([]);
+    const [pastedObjects, setpastedObjects] = useState<THREE.Object3D[]>([]);
+    const [duplicatedObjects, setDuplicatedObjects] = useState<THREE.Object3D[]>([]);
+    const boundingBoxRef = useRef<THREE.Mesh>();
+    const { floorItems, setFloorItems } = useFloorItems();
+    const { activeModule } = useModuleStore();
+    const { socket } = useSocketStore();
+    const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
+
+    useEffect(() => {
+        if (!camera || !scene || toggleView) return;
+
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        const itemsGroup: any = scene.getObjectByName("itemsGroup");
+        itemsGroupRef.current = itemsGroup;
+
+        let isSelecting = false;
+        let isRightClick = false;
+        let rightClickMoved = false;
+        let isCtrlSelecting = false;
+
+        const helper = new SelectionHelper(gl);
+
+        if (!itemsGroup) {
+            toast.warn("itemsGroup not found in the scene.");
+            return;
+        }
+
+        const onPointerDown = (event: PointerEvent) => {
+            if (event.button === 2) {
+                isRightClick = true;
+                rightClickMoved = false;
+            } else if (event.button === 0) {
+                isSelecting = false;
+                isCtrlSelecting = event.ctrlKey;
+                if (event.ctrlKey && duplicatedObjects.length === 0) {
+                    if (controls) (controls as any).enabled = false;
+                    selectionBox.startPoint.set(pointer.x, pointer.y, 0);
+                }
+            }
+        };
+
+        const onPointerMove = (event: PointerEvent) => {
+            if (isRightClick) {
+                rightClickMoved = true;
+            }
+            isSelecting = true;
+            if (helper.isDown && event.ctrlKey && duplicatedObjects.length === 0 && isCtrlSelecting) {
+                selectionBox.endPoint.set(pointer.x, pointer.y, 0);
+            }
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (event.button === 2) {
+                isRightClick = false;
+                if (!rightClickMoved) {
+                    clearSelection();
+                }
+                return;
+            }
+
+            if (isSelecting && isCtrlSelecting) {
+                isCtrlSelecting = false;
+                isSelecting = false;
+                if (event.ctrlKey && duplicatedObjects.length === 0) {
+                    selectAssets();
+                }
+            } else if (!isSelecting && selectedAssets.length > 0 && ((pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) || event.button !== 0)) {
+                clearSelection();
+                helper.enabled = true;
+                isCtrlSelecting = false;
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (movedObjects.length > 0 || rotatedObjects.length > 0) return;
+            if (event.key.toLowerCase() === "escape") {
+                event.preventDefault();
+                clearSelection();
+            }
+            if (event.key.toLowerCase() === "delete") {
+                event.preventDefault();
+                deleteSelection();
+            }
+        };
+
+        const onContextMenu = (event: MouseEvent) => {
+            event.preventDefault();
+            if (!rightClickMoved) {
+                clearSelection();
+            }
+        };
+
+        if (!toggleView && activeModule === "builder") {
+            helper.enabled = true;
+            if (duplicatedObjects.length === 0 && pastedObjects.length === 0) {
+                canvasElement.addEventListener("pointerdown", onPointerDown);
+                canvasElement.addEventListener("pointermove", onPointerMove);
+                canvasElement.addEventListener("pointerup", onPointerUp);
+            } else {
+                helper.enabled = false;
+                helper.dispose();
+            }
+            canvasElement.addEventListener("contextmenu", onContextMenu);
+            canvasElement.addEventListener("keydown", onKeyDown);
+        } else {
+            helper.enabled = false;
+            helper.dispose();
+        }
+
+        return () => {
+            canvasElement.removeEventListener("pointerdown", onPointerDown);
+            canvasElement.removeEventListener("pointermove", onPointerMove);
+            canvasElement.removeEventListener("contextmenu", onContextMenu);
+            canvasElement.removeEventListener("pointerup", onPointerUp);
+            canvasElement.removeEventListener("keydown", onKeyDown);
+            helper.enabled = false;
+            helper.dispose();
+        };
+    }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects, activeModule,]);
+
+    useEffect(() => {
+        if (activeModule !== "builder") {
+            clearSelection();
+        }
+    }, [activeModule]);
+
+    useFrame(() => {
+        if (pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
+            selectionGroup.current.position.set(0, 0, 0);
+        }
+    });
+
+    const selectAssets = () => {
+        selectionBox.endPoint.set(pointer.x, pointer.y, 0);
+        if (controls) (controls as any).enabled = true;
+
+        let selectedObjects = selectionBox.select();
+        let Objects = new Set<THREE.Object3D>();
+
+        selectedObjects.map((object) => {
+            let currentObject: THREE.Object3D | null = object;
+            while (currentObject) {
+                if (currentObject.userData.modelId) {
+                    Objects.add(currentObject);
+                    break;
+                }
+                currentObject = currentObject.parent || null;
+            }
+        });
+
+        if (Objects.size === 0) {
+            clearSelection();
+            return;
+        }
+
+        const updatedSelections = new Set(selectedAssets);
+        Objects.forEach((obj) => { updatedSelections.has(obj) ? updatedSelections.delete(obj) : updatedSelections.add(obj); });
+
+        const selected = Array.from(updatedSelections);
+
+        setSelectedAssets(selected);
+    };
+
+    const clearSelection = () => {
+        selectionGroup.current.children = [];
+        selectionGroup.current.position.set(0, 0, 0);
+        selectionGroup.current.rotation.set(0, 0, 0);
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setSelectedAssets([]);
+    };
+
+    const deleteSelection = () => {
+        if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
+            const email = localStorage.getItem("email");
+            const organization = email!.split("@")[1].split(".")[0];
+
+            const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
+            const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
+
+            const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
+            localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
+
+            selectedAssets.forEach((selectedMesh: THREE.Object3D) => {
+                //REST
+
+                // const response = await deleteFloorItem(organization, selectedMesh.uuid, selectedMesh.userData.name);
+
+                //SOCKET
+
+                const data = {
+                    organization: organization,
+                    modeluuid: selectedMesh.uuid,
+                    modelname: selectedMesh.userData.name,
+                    socketId: socket.id,
+                };
+
+                socket.emit("v2:model-asset:delete", data);
+
+                selectedMesh.traverse((child: THREE.Object3D) => {
+                    if (child instanceof THREE.Mesh) {
+                        if (child.geometry) child.geometry.dispose();
+                        if (Array.isArray(child.material)) {
+                            child.material.forEach((material) => {
+                                if (material.map) material.map.dispose();
+                                material.dispose();
+                            });
+                        } else if (child.material) {
+                            if (child.material.map) child.material.map.dispose();
+                            child.material.dispose();
+                        }
+                    }
+                });
+
+                itemsGroupRef.current?.remove(selectedMesh);
+            });
+
+            const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
+            setFloorItems(updatedItems);
+        }
+        toast.success("Selected models removed!");
+        clearSelection();
+    };
+
+    return (
+        <>
+            <group name="SelectionGroup">
+                <group ref={selectionGroup} name="selectionAssetGroup">
+                    <BoundingBox boundingBoxRef={boundingBoxRef} />
+                </group>
+            </group>
+
+            <MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
+
+            <RotateControls rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
+
+            <DuplicationControls itemsGroupRef={itemsGroupRef} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
+
+            <CopyPasteControls itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
+        </>
+    );
+};
+
+export default SelectionControls;
--- a/app/src/modules/scene/controls/selectionControls/selectionHelper.ts
+++ b/app/src/modules/scene/controls/selectionControls/selectionHelper.ts
@@ -0,0 +1,115 @@
+import { Vector2, WebGLRenderer } from 'three';
+
+class SelectionHelper {
+	element: HTMLDivElement;
+	renderer: WebGLRenderer;
+	startPoint: Vector2;
+	pointTopLeft: Vector2;
+	pointBottomRight: Vector2;
+	isDown: boolean;
+	enabled: boolean;
+
+	constructor(renderer: WebGLRenderer) {
+		this.element = document.createElement('div');
+		this.element.style.position = 'fixed';
+		this.element.style.border = '1px solid #55aaff';
+		this.element.style.backgroundColor = 'rgba(75, 160, 255, 0.3)';
+		this.element.style.pointerEvents = 'none';
+		this.element.style.display = 'none';
+
+		this.renderer = renderer;
+
+		this.startPoint = new Vector2();
+		this.pointTopLeft = new Vector2();
+		this.pointBottomRight = new Vector2();
+
+		this.isDown = false;
+		this.enabled = true;
+
+		this.onPointerDown = this.onPointerDown.bind(this);
+		this.onPointerMove = this.onPointerMove.bind(this);
+		this.onPointerUp = this.onPointerUp.bind(this);
+
+		this.renderer.domElement.addEventListener('pointerdown', this.onPointerDown);
+		this.renderer.domElement.addEventListener('pointermove', this.onPointerMove);
+		this.renderer.domElement.addEventListener('pointerup', this.onPointerUp);
+		window.addEventListener("blur", this.cleanup.bind(this));
+	}
+
+	dispose() {
+		this.enabled = false;
+		this.isDown = false;
+		this.cleanup();
+
+		this.renderer.domElement.removeEventListener("pointerdown", this.onPointerDown);
+		this.renderer.domElement.removeEventListener("pointermove", this.onPointerMove);
+		this.renderer.domElement.removeEventListener("pointerup", this.onPointerUp);
+		window.removeEventListener("blur", this.cleanup);
+	}
+
+	private cleanup() {
+		this.isDown = false;
+		this.element.style.display = 'none';
+		if (this.element.parentElement) {
+			this.element.parentElement.removeChild(this.element);
+		}
+	}
+
+	onPointerDown(event: PointerEvent) {
+		if (!this.enabled || !event.ctrlKey || event.button !== 0) return;
+
+		this.isDown = true;
+		this.onSelectStart(event);
+	}
+
+	onPointerMove(event: PointerEvent) {
+		if (!this.enabled || !this.isDown || !event.ctrlKey) return;
+
+		this.onSelectMove(event);
+	}
+
+	onPointerUp() {
+		if (!this.enabled) return;
+
+		this.isDown = false;
+		this.onSelectOver();
+	}
+
+	onSelectStart(event: PointerEvent) {
+		this.element.style.display = 'none';
+		this.renderer.domElement.parentElement?.appendChild(this.element);
+
+		this.element.style.left = `${event.clientX}px`;
+		this.element.style.top = `${event.clientY}px`;
+		this.element.style.width = '0px';
+		this.element.style.height = '0px';
+
+		this.startPoint.x = event.clientX;
+		this.startPoint.y = event.clientY;
+	}
+
+	onSelectMove(event: PointerEvent) {
+		if (!this.isDown) return;
+
+		this.element.style.display = 'block';
+
+		this.pointBottomRight.x = Math.max(this.startPoint.x, event.clientX);
+		this.pointBottomRight.y = Math.max(this.startPoint.y, event.clientY);
+		this.pointTopLeft.x = Math.min(this.startPoint.x, event.clientX);
+		this.pointTopLeft.y = Math.min(this.startPoint.y, event.clientY);
+
+		this.element.style.left = `${this.pointTopLeft.x}px`;
+		this.element.style.top = `${this.pointTopLeft.y}px`;
+		this.element.style.width = `${this.pointBottomRight.x - this.pointTopLeft.x}px`;
+		this.element.style.height = `${this.pointBottomRight.y - this.pointTopLeft.y}px`;
+	}
+
+	onSelectOver() {
+		this.element.style.display = 'none';
+		if (this.element.parentElement) {
+			this.element.parentElement.removeChild(this.element);
+		}
+	}
+}
+
+export { SelectionHelper };