Merge remote-tracking branch 'origin/main-dev' into main-demo

app/src/assets/cursors/comment.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15H2C1.44772 15 1 14.5523 1 14V8C1 4.13401 4.13401 1 8 1Z" fill="black" stroke="white" stroke-width="2"/>
+</svg>

app/src/assets/cursors/default.svg

@@ -1,4 +1,4 @@
-<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 16.8284L4.5 11.5L11.4142 11.4142L0 0V16.8284Z" fill="white"/>
+<path d="M1.70849 18.2848L6.01914 13.9573C6.20421 13.7715 6.45487 13.6658 6.71711 13.663L13.3181 13.5936C14.2439 13.5839 14.6604 12.4297 13.9542 11.8309L1.64669 1.39613C0.996961 0.845261 0 1.30706 0 2.15888V17.5791C0 18.4709 1.07909 18.9167 1.70849 18.2848Z" fill="white"/>
-<path d="M1 14.4141V2.41406L9 10.4141L4 10.5L1 14.4141Z" fill="black"/>
+<path d="M1.30078 14.5353V5.02997C1.30078 4.17815 2.29774 3.71636 2.94747 4.26722L10.4817 10.655C11.1864 11.2525 10.7733 12.4042 9.84957 12.4177L5.94136 12.4746C5.66374 12.4787 5.40031 12.5979 5.21412 12.8039L3.04259 15.206C2.42871 15.885 1.30078 15.4507 1.30078 14.5353Z" fill="black"/>
 </svg>

app/src/modules/builder/line/line.tsx

@@ -10,6 +10,7 @@ import { useVersionContext } from '../version/versionContext';
 import { useParams } from 'react-router-dom';
 import { getUserData } from '../../../functions/getUserData';
 import { handleCanvasCursors } from '../../../utils/mouseUtils/handleCanvasCursors';
+import { useSelectedPoints } from '../../../store/simulation/useSimulationStore';
 
 // import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
 // import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
@@ -39,6 +40,7 @@ function Line({ points }: Readonly<LineProps>) {
     const { projectId } = useParams();
     const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
     const { hoveredLine, setHoveredLine, hoveredPoint } = useBuilderStore();
+    const { selectedPoints } = useSelectedPoints();
 
     const path = useMemo(() => {
         const [start, end] = points.map(p => new THREE.Vector3(...p.position));
@@ -373,8 +375,8 @@ function Line({ points }: Readonly<LineProps>) {
                 onClick={() => {
                     handlePointClick(points);
                 }}
-                onPointerOver={() => {
+                onPointerOver={(e) => {
-                    if (!hoveredLine) {
+                    if (!hoveredLine && selectedPoints.length === 0 && e.buttons === 0 && !e.ctrlKey) {
                         setHoveredLine(points);
                         setIsHovered(true)
                         if (toolMode === 'move' && !hoveredPoint) {
@@ -385,7 +387,9 @@ function Line({ points }: Readonly<LineProps>) {
                 onPointerOut={() => {
                     if (hoveredLine) {
                         setHoveredLine(null);
-                        handleCanvasCursors('default');
+                        if(!hoveredPoint){
+                            handleCanvasCursors('default');
+                        }
                     }
                     setIsHovered(false)
                 }}

app/src/modules/builder/point/point.tsx

@@ -5,6 +5,7 @@ import { useSocketStore, useToolMode } from '../../../store/builder/store';
 import { DragControls } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { useSelectedPoints } from '../../../store/simulation/useSimulationStore';
 import { usePointSnapping } from './helpers/usePointSnapping';
 import { useParams } from 'react-router-dom';
 import { useVersionContext } from '../version/versionContext';
@@ -27,6 +28,7 @@ function Point({ point }: { readonly point: Point }) {
     const { raycaster, camera, pointer } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
+    const [isSelected, setIsSelected] = useState(false);
     const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
     const { socket } = useSocketStore();
     const { toolMode } = useToolMode();
@@ -36,7 +38,8 @@ function Point({ point }: { readonly point: Point }) {
     const { setPosition: setFloorPosition, removePoint: removeFloorPoint, getFloorsByPointId } = floorStore();
     const { setPosition: setZonePosition, removePoint: removeZonePoint, getZonesByPointId } = zoneStore();
     const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle, snapFloorPoint, snapFloorAngle, snapZonePoint, snapZoneAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
-    const { hoveredPoint, setHoveredPoint } = useBuilderStore();
+    const { hoveredPoint,hoveredLine, setHoveredPoint } = useBuilderStore();
+    const { selectedPoints } = useSelectedPoints();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
@@ -407,50 +410,63 @@ function Point({ point }: { readonly point: Point }) {
         }
     }, [hoveredPoint])
 
+    useEffect(() => {
+        if (selectedPoints.length > 0 && selectedPoints.some((selectedPoint) => (selectedPoint.userData.pointUuid && selectedPoint.userData.pointUuid === point.pointUuid))) {
+            setIsSelected(true);
+        } else {
+            setIsSelected(false);
+        }
+    }, [selectedPoints])
+
     if (!point) {
         return null;
     }
 
+
     return (
-        <DragControls
+        <>
-            axisLock='y'
+            {!isSelected ?
-            autoTransform={false}
+                <DragControls
-            onDragStart={() => handleDragStart(point)}
+                    axisLock='y'
-            onDrag={() => handleDrag(point)}
+                    autoTransform={false}
-            onDragEnd={() => handleDragEnd(point)}
+                    onDragStart={() => handleDragStart(point)}
-        >
+                    onDrag={() => handleDrag(point)}
-            <mesh
+                    onDragEnd={() => handleDragEnd(point)}
-                key={point.pointUuid}
+                >
-                uuid={point.pointUuid}
+                    <mesh
-                name={`${point.pointType}-Point`}
+                        key={point.pointUuid}
-                position={new THREE.Vector3(...point.position)}
+                        uuid={point.pointUuid}
-                onClick={() => {
+                        name={`${point.pointType}-Point`}
-                    handlePointClick(point);
+                        position={[...point.position]}
-                }}
+                        onClick={() => {
-                onPointerOver={() => {
+                            handlePointClick(point);
-                    if (!hoveredPoint) {
+                        }}
-                        setHoveredPoint(point);
+                        onPointerOver={(e) => {
-                        setIsHovered(true);
+                            if (!hoveredPoint && selectedPoints.length === 0 && e.buttons === 0 && !e.ctrlKey) {
-                        if (toolMode === 'move') {
+                                setHoveredPoint(point);
-                            handleCanvasCursors('grab');
+                                setIsHovered(true);
-                        }
+                                if (toolMode === 'move') {
-                    }
+                                    handleCanvasCursors('grab');
-                }}
+                                }
-                onPointerOut={() => {
+                            }
-                    if (hoveredPoint) {
+                        }}
-                        setHoveredPoint(null);
+                        onPointerOut={() => {
-                        handleCanvasCursors('default');
+                            if (hoveredPoint) {
-                    }
+                                setHoveredPoint(null);
-                    setIsHovered(false)
+                                if(!hoveredLine){
-                }}
+                                    handleCanvasCursors('default');
-                userData={point}
+                                }
-            >
+                            }
-                <boxGeometry args={boxScale} />
+                            setIsHovered(false)
-                <shaderMaterial
+                        }}
-                    ref={materialRef}
+                        userData={point}
-                    uniforms={uniforms}
+                    >
-                    vertexShader={
+                        <boxGeometry args={boxScale} />
-                        `
+                        <shaderMaterial
+                            ref={materialRef}
+                            uniforms={uniforms}
+                            vertexShader={
+                                `
                             varying vec2 vUv;
 
                             void main() {
@@ -458,9 +474,9 @@ function Point({ point }: { readonly point: Point }) {
                                 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                             }
                         `
-                    }
+                            }
-                    fragmentShader={
+                            fragmentShader={
-                        `
+                                `
                             varying vec2 vUv;
                             uniform vec3 uOuterColor;
                             uniform vec3 uInnerColor;
@@ -475,10 +491,32 @@ function Point({ point }: { readonly point: Point }) {
                                     }
                                 }
                         `
-                    }
+                            }
-                />
+                        />
-            </mesh>
+                    </mesh>
-        </DragControls>
+                </DragControls>
+                :
+                <group
+                    key={point.pointUuid}
+                    uuid={point.pointUuid}
+                    name={`${point.pointType}-Point`}
+                    position={[point.position[0], 0.3, point.position[2]]}
+                    userData={point}
+                    rotation={[Math.PI / 2, 0, 0]}
+                >
+                    <mesh>
+                        <torusGeometry args={[0.4, 0.1, 2, 16]} />
+                        <meshBasicMaterial color="#6F42C1" />
+                    </mesh>
+
+                    <mesh position={[0, 0, 0]}>
+                        <sphereGeometry args={[0.3, 8, 16]} />
+                        <meshBasicMaterial color="white" />
+                    </mesh>
+                </group>
+
+            }
+        </>
     );
 }
 

app/src/modules/scene/controls/controls.tsx

@@ -9,10 +9,11 @@ import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi"
 import updateCamPosition from "../camera/updateCameraPosition";
 import CamMode from "../camera/camMode";
 import SwitchView from "../camera/switchView";
-import SelectionControls from "./selectionControls/selectionControls";
+import SelectionControls3D from "./selectionControls/selection3D/selectionControls3D";
 import TransformControl from "./transformControls/transformControls";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../functions/getUserData";
+import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
@@ -137,7 +138,9 @@ export default function Controls() {
 
             </CameraControls>
 
-            <SelectionControls />
+            <SelectionControls3D />
+
+            <SelectionControls2D />
 
             <TransformControl />
 

app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx

@@ -0,0 +1,341 @@
+import * as THREE from "three";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
+import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../../functions/getUserData";
+import { useSceneContext } from "../../../sceneContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
+import { useSelectedPoints } from "../../../../../store/simulation/useSimulationStore";
+import useModuleStore from "../../../../../store/useModuleStore";
+
+// import { upsertAisleApi } from "../../../../../services/factoryBuilder/aisle/upsertAisleApi";
+// import { upsertWallApi } from "../../../../../services/factoryBuilder/wall/upsertWallApi";
+// import { upsertFloorApi } from "../../../../../services/factoryBuilder/floor/upsertFloorApi";
+// import { upsertZoneApi } from "../../../../../services/factoryBuilder/zone/upsertZoneApi";
+
+function MoveControls2D({
+    movedObjects,
+    setMovedObjects,
+    pastedObjects,
+    setpastedObjects,
+    duplicatedObjects,
+    setDuplicatedObjects,
+    rotatedObjects,
+    setRotatedObjects,
+}: any) {
+    const { camera, controls, gl, scene, pointer, raycaster } = useThree();
+    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
+    const { toolMode } = useToolMode();
+    const { toggleView } = useToggleView();
+    const { activeModule } = useModuleStore();
+    const { selectedPoints, clearSelectedPoints } = useSelectedPoints();
+    const { socket } = useSocketStore();
+    const { userId, organization } = getUserData();
+    const { projectId } = useParams();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { aisleStore, wallStore, floorStore, zoneStore } = useSceneContext();
+    const { setPosition: setAislePosition, getAislesByPointId } = aisleStore();
+    const { setPosition: setWallPosition, getWallsByPointId } = wallStore();
+    const { setPosition: setFloorPosition, getFloorsByPointId } = floorStore();
+    const { setPosition: setZonePosition, getZonesByPointId } = zoneStore();
+    const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
+    const [initialPositions, setInitialPositions] = useState<Record<string, THREE.Vector3>>({});
+    const [initialStates, setInitialStates] = useState<Record<string, { position: THREE.Vector3; rotation?: THREE.Euler; }>>({});
+    const [isMoving, setIsMoving] = useState(false);
+
+    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 && movedObjects.length > 0 && event.button === 0) {
+                event.preventDefault();
+                placeMovedAssets();
+            }
+            if (!isMoving && movedObjects.length > 0 && event.button === 2) {
+                event.preventDefault();
+
+                clearSelection();
+                setMovedObjects([]);
+                resetToInitialPositions();
+            }
+        };
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(event);
+
+            if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return;
+
+            if (keyCombination === "G") {
+                if (selectedPoints.length > 0) {
+                    moveAssets();
+                }
+            }
+
+            if (keyCombination === "ESCAPE") {
+                event.preventDefault();
+
+                clearSelection();
+                setMovedObjects([]);
+                resetToInitialPositions();
+            }
+        };
+
+        if (toggleView && selectedPoints.length > 0) {
+            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, selectedPoints, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects]);
+
+    useEffect(() => {
+        if (toolMode !== 'move' || !toggleView) {
+            if (movedObjects.length > 0) {
+                resetToInitialPositions();
+            }
+            clearSelection();
+        }
+    }, [activeModule, toolMode, toggleView, movedObjects]);
+
+    useFrame(() => {
+        if (!isMoving || movedObjects.length === 0 || !dragOffset) return;
+
+        raycaster.setFromCamera(pointer, camera);
+        const intersectionPoint = new THREE.Vector3();
+        const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+        if (hit) {
+            const baseNewPosition = new THREE.Vector3().addVectors(hit, dragOffset);
+
+            movedObjects.forEach((movedPoint: THREE.Object3D) => {
+                if (movedPoint.userData.pointUuid) {
+                    const point: Point = movedPoint.userData as Point;
+                    const initialPosition = initialPositions[movedPoint.uuid];
+
+                    if (initialPosition) {
+                        const relativeOffset = new THREE.Vector3().subVectors(
+                            initialPosition,
+                            initialPositions[movedObjects[0].uuid]
+                        );
+
+                        const newPosition = new THREE.Vector3().addVectors(baseNewPosition, relativeOffset);
+                        const positionArray: [number, number, number] = [newPosition.x, newPosition.y, newPosition.z];
+
+                        if (point.pointType === 'Aisle') {
+                            setAislePosition(point.pointUuid, positionArray);
+                        } else if (point.pointType === 'Wall') {
+                            setWallPosition(point.pointUuid, positionArray);
+                        } else if (point.pointType === 'Floor') {
+                            setFloorPosition(point.pointUuid, positionArray);
+                        } else if (point.pointType === 'Zone') {
+                            setZonePosition(point.pointUuid, positionArray);
+                        }
+                    }
+                }
+            });
+        }
+    });
+
+    const calculateDragOffset = useCallback((point: THREE.Object3D, hitPoint: THREE.Vector3) => {
+        const pointPosition = new THREE.Vector3().copy(point.position);
+        return new THREE.Vector3().subVectors(pointPosition, hitPoint);
+    }, []);
+
+    const moveAssets = useCallback(() => {
+        if (selectedPoints.length === 0) return;
+
+        const states: Record<string, { position: THREE.Vector3; rotation?: THREE.Euler; }> = {};
+
+        selectedPoints.forEach((point: THREE.Object3D) => {
+            states[point.uuid] = {
+                position: new THREE.Vector3().copy(point.position),
+                rotation: point.rotation ? new THREE.Euler().copy(point.rotation) : undefined
+            };
+        });
+        setInitialStates(states);
+
+        const positions: Record<string, THREE.Vector3> = {};
+        selectedPoints.forEach((point: THREE.Object3D) => { positions[point.uuid] = new THREE.Vector3().copy(point.position); });
+        setInitialPositions(positions);
+
+        raycaster.setFromCamera(pointer, camera);
+        const intersectionPoint = new THREE.Vector3();
+        const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
+
+        if (hit && selectedPoints[0]) {
+            const offset = calculateDragOffset(selectedPoints[0], hit);
+            setDragOffset(offset);
+        }
+
+        setMovedObjects(selectedPoints);
+        setIsMoving(true);
+    }, [selectedPoints, camera, pointer, plane, raycaster, calculateDragOffset]);
+
+    const resetToInitialPositions = useCallback(() => {
+        setTimeout(() => {
+            movedObjects.forEach((movedPoint: THREE.Object3D) => {
+                if (movedPoint.userData.pointUuid && initialStates[movedPoint.uuid]) {
+                    const point: Point = movedPoint.userData as Point;
+                    const initialState = initialStates[movedPoint.uuid];
+                    const positionArray: [number, number, number] = [
+                        initialState.position.x,
+                        initialState.position.y,
+                        initialState.position.z
+                    ];
+
+                    if (point.pointType === 'Aisle') {
+                        setAislePosition(point.pointUuid, positionArray);
+                    } else if (point.pointType === 'Wall') {
+                        setWallPosition(point.pointUuid, positionArray);
+                    } else if (point.pointType === 'Floor') {
+                        setFloorPosition(point.pointUuid, positionArray);
+                    } else if (point.pointType === 'Zone') {
+                        setZonePosition(point.pointUuid, positionArray);
+                    }
+                }
+            });
+        }, 0)
+    }, [movedObjects, initialStates, setAislePosition, setWallPosition, setFloorPosition, setZonePosition]);
+
+    const placeMovedAssets = () => {
+        if (movedObjects.length === 0) return;
+
+        movedObjects.forEach((movedObject: THREE.Object3D) => {
+            if (movedObject.userData.pointUuid) {
+                const point: Point = movedObject.userData as Point;
+
+                if (point.pointType === 'Aisle') {
+                    const updatedAisles = getAislesByPointId(point.pointUuid);
+                    if (updatedAisles.length > 0 && projectId) {
+                        updatedAisles.forEach((updatedAisle) => {
+
+                            // API
+
+                            // upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '');
+
+                            // SOCKET 
+
+                            socket.emit('v1:model-aisle:add', {
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization,
+                                aisleUuid: updatedAisle.aisleUuid,
+                                points: updatedAisle.points,
+                                type: updatedAisle.type
+                            })
+                        })
+                    }
+                } else if (point.pointType === 'Wall') {
+                    const updatedWalls = getWallsByPointId(point.pointUuid);
+                    if (updatedWalls && updatedWalls.length > 0 && projectId) {
+                        updatedWalls.forEach((updatedWall) => {
+
+                            // API
+
+                            // upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall);
+
+                            // SOCKET 
+
+                            const data = {
+                                wallData: updatedWall,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:model-Wall:add', data);
+                        });
+                    }
+                } else if (point.pointType === 'Floor') {
+                    const updatedFloors = getFloorsByPointId(point.pointUuid);
+                    if (updatedFloors && updatedFloors.length > 0 && projectId) {
+                        updatedFloors.forEach((updatedFloor) => {
+
+                            // API
+
+                            // upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedFloor);
+
+                            // SOCKET
+
+                            const data = {
+                                floorData: updatedFloor,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:model-Floor:add', data);
+                        });
+                    }
+                } else if (point.pointType === 'Zone') {
+                    const updatedZones = getZonesByPointId(point.pointUuid);
+                    if (updatedZones && updatedZones.length > 0 && projectId) {
+                        updatedZones.forEach((updatedZone) => {
+
+                            // API
+
+                            // upsertZoneApi(projectId, selectedVersion?.versionId || '', updatedZone);
+
+                            // SOCKET
+
+                            const data = {
+                                zoneData: updatedZone,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:zone:add', data);
+                        });
+                    }
+                }
+            }
+        })
+
+        echo.success("Object moved!");
+
+        clearSelection();
+    };
+
+    const clearSelection = () => {
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        setMovedObjects([]);
+        setRotatedObjects([]);
+        clearSelectedPoints();
+    };
+
+    return (
+        <>
+        </>
+    );
+}
+
+export default MoveControls2D;

app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx

@@ -0,0 +1,389 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import * as THREE from "three";
+import { useThree } from "@react-three/fiber";
+import { SelectionHelper } from "../selectionHelper";
+import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
+
+import useModuleStore from "../../../../../store/useModuleStore";
+import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../../functions/getUserData";
+import { useSceneContext } from "../../../sceneContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
+import { useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
+import { useSelectedPoints } from "../../../../../store/simulation/useSimulationStore";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
+import MoveControls2D from "./moveControls2D";
+
+// import { deleteAisleApi } from "../../../../../services/factoryBuilder/aisle/deleteAisleApi";
+// import { deleteWallApi } from "../../../../../services/factoryBuilder/wall/deleteWallApi";
+// import { deleteFloorApi } from "../../../../../services/factoryBuilder/floor/deleteFloorApi";
+// import { upsertFloorApi } from "../../../../../services/factoryBuilder/floor/upsertFloorApi";
+// import { deleteZoneApi } from "../../../../../services/factoryBuilder/zone/deleteZoneApi";
+// import { upsertZoneApi } from "../../../../../services/factoryBuilder/zone/upsertZoneApi";
+
+const SelectionControls2D: React.FC = () => {
+    const { camera, controls, gl, scene, raycaster, pointer } = useThree();
+    const { toggleView } = useToggleView();
+    const { selectedPoints, setSelectedPoints, clearSelectedPoints } = useSelectedPoints();
+    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 { activeModule } = useModuleStore();
+    const { socket } = useSocketStore();
+    const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
+    const { toolMode } = useToolMode();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { projectId } = useParams();
+    const { hoveredLine, hoveredPoint } = useBuilderStore();
+    const { aisleStore, wallStore, floorStore, zoneStore } = useSceneContext();
+    const { removePoint: removeAislePoint } = aisleStore();
+    const { removePoint: removeWallPoint } = wallStore();
+    const { removePoint: removeFloorPoint } = floorStore();
+    const { removePoint: removeZonePoint } = zoneStore();
+
+    const isDragging = useRef(false);
+    const isLeftMouseDown = useRef(false);
+    const isSelecting = useRef(false);
+    const isRightClick = useRef(false);
+    const rightClickMoved = useRef(false);
+    const isCtrlSelecting = useRef(false);
+    const isShiftSelecting = useRef(false);
+    const { userId, organization } = getUserData();
+
+    useEffect(() => {
+        if (!camera || !scene || !toggleView) return;
+
+        const canvasElement = gl.domElement;
+        canvasElement.tabIndex = 0;
+
+        const helper = new SelectionHelper(gl);
+
+        const onPointerDown = (event: PointerEvent) => {
+            if (event.button === 2) {
+                isRightClick.current = true;
+                rightClickMoved.current = false;
+            } else if (event.button === 0) {
+                isSelecting.current = false;
+                isCtrlSelecting.current = event.ctrlKey;
+                isShiftSelecting.current = event.shiftKey;
+                isLeftMouseDown.current = true;
+                isDragging.current = false;
+                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.current) {
+                rightClickMoved.current = true;
+            }
+            if (isLeftMouseDown.current) {
+                isDragging.current = true;
+            }
+            isSelecting.current = true;
+            if (helper.isDown && event.ctrlKey && duplicatedObjects.length === 0 && isCtrlSelecting.current) {
+                selectionBox.endPoint.set(pointer.x, pointer.y, 0);
+            }
+        };
+
+        const onPointerUp = (event: PointerEvent) => {
+            if (event.button === 2 && !event.ctrlKey && !event.shiftKey) {
+                isRightClick.current = false;
+                if (!rightClickMoved.current) {
+                    clearSelection();
+                }
+                return;
+            }
+
+            if (isSelecting.current && isCtrlSelecting.current) {
+                isCtrlSelecting.current = false;
+                isSelecting.current = false;
+                if (event.ctrlKey && duplicatedObjects.length === 0) {
+                    selectAssets();
+                }
+            } else if (!isSelecting.current && selectedPoints.length > 0 && ((!event.ctrlKey && !event.shiftKey && pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) || event.button !== 0)) {
+                clearSelection();
+                helper.enabled = true;
+                isCtrlSelecting.current = false;
+            } else if (controls) {
+                (controls as any).enabled = true;
+            }
+
+            if (!isDragging.current && isLeftMouseDown.current && isShiftSelecting.current && event.shiftKey) {
+                isShiftSelecting.current = false;
+                isLeftMouseDown.current = false;
+                isDragging.current = false;
+
+            } else if (controls) {
+                (controls as any).enabled = true;
+            }
+        };
+
+        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.current) {
+                clearSelection();
+            }
+            rightClickMoved.current = false;
+        };
+
+        if (toggleView && toolMode === 'move') {
+            helper.enabled = true;
+            canvasElement.addEventListener("pointermove", onPointerMove);
+            canvasElement.addEventListener("pointerup", onPointerUp);
+            canvasElement.addEventListener("pointerdown", onPointerDown);
+            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, selectedPoints, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, toolMode, hoveredLine, hoveredPoint]);
+
+    useEffect(() => {
+        if (toolMode !== 'move' || !toggleView) {
+            clearSelection();
+        }
+    }, [activeModule, toolMode, toggleView]);
+
+    const selectAssets = useCallback(() => {
+        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.forEach((object) => {
+            let currentObject: THREE.Object3D | null = object;
+            while (currentObject) {
+                if (currentObject.userData.pointUuid) {
+                    Objects.add(currentObject);
+                    break;
+                }
+                currentObject = currentObject.parent || null;
+            }
+        });
+
+        if (Objects.size === 0) {
+            clearSelection();
+            return;
+        }
+
+        const updatedSelections = new Set<THREE.Object3D>(selectedPoints);
+
+        Objects.forEach((obj) => {
+            const existing = Array.from(updatedSelections).find((o) => o.userData?.pointUuid === obj.userData?.pointUuid);
+
+            if (existing) {
+                updatedSelections.delete(existing);
+            } else {
+                updatedSelections.add(obj);
+            }
+        });
+
+        const selected = Array.from(updatedSelections);
+
+        setSelectedPoints(selected);
+
+    }, [selectionBox, pointer, controls, selectedPoints, setSelectedPoints]);
+
+    const clearSelection = () => {
+        setpastedObjects([]);
+        setDuplicatedObjects([]);
+        clearSelectedPoints();
+    };
+
+    const deleteSelection = () => {
+        if (selectedPoints.length > 0 && duplicatedObjects.length === 0) {
+
+            selectedPoints.forEach((selectedPoint) => {
+                if (selectedPoint.userData.pointUuid) {
+                    const point: Point = selectedPoint.userData as Point;
+                    if (point.pointType === 'Aisle') {
+                        const removedAisles = removeAislePoint(point.pointUuid);
+                        if (removedAisles.length > 0) {
+                            removedAisles.forEach(aisle => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // deleteAisleApi(aisle.aisleUuid, projectId, selectedVersion?.versionId || '');
+
+                                    // SOCKET
+
+                                    const data = {
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization,
+                                        aisleUuid: aisle.aisleUuid
+                                    }
+
+                                    socket.emit('v1:model-aisle:delete', data);
+                                }
+                            });
+                        }
+                    }
+                    if (point.pointType === 'Wall') {
+                        const removedWalls = removeWallPoint(point.pointUuid);
+                        if (removedWalls.length > 0) {
+                            removedWalls.forEach(wall => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // deleteWallApi(projectId, selectedVersion?.versionId || '', wall.wallUuid);
+
+                                    // SOCKET
+
+                                    const data = {
+                                        wallUuid: wall.wallUuid,
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization
+                                    }
+
+                                    socket.emit('v1:model-Wall:delete', data);
+                                }
+                            });
+                        }
+                    }
+                    if (point.pointType === 'Floor') {
+                        const { removedFloors, updatedFloors } = removeFloorPoint(point.pointUuid);
+                        if (removedFloors.length > 0) {
+                            removedFloors.forEach(floor => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // deleteFloorApi(projectId, selectedVersion?.versionId || '', floor.floorUuid);
+
+                                    // SOCKET
+
+                                    const data = {
+                                        floorUuid: floor.floorUuid,
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization
+                                    }
+
+                                    socket.emit('v1:model-Floor:delete', data);
+                                }
+                            });
+                        }
+                        if (updatedFloors.length > 0) {
+                            updatedFloors.forEach(floor => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
+
+                                    // SOCKET
+
+                                    const data = {
+                                        floorData: floor,
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization
+                                    }
+
+                                    socket.emit('v1:model-Floor:add', data);
+                                }
+                            });
+                        }
+                    }
+                    if (point.pointType === 'Zone') {
+                        const { removedZones, updatedZones } = removeZonePoint(point.pointUuid);
+                        if (removedZones.length > 0) {
+                            removedZones.forEach(zone => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // deleteZoneApi(projectId, selectedVersion?.versionId || '', zone.zoneUuid);
+
+                                    // SOCKET
+
+                                    const data = {
+                                        zoneUuid: zone.zoneUuid,
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization
+                                    }
+
+                                    socket.emit('v1:zone:delete', data);
+                                }
+                            });
+                        }
+                        if (updatedZones.length > 0) {
+                            updatedZones.forEach(zone => {
+                                if (projectId) {
+
+                                    // API
+
+                                    // upsertZoneApi(projectId, selectedVersion?.versionId || '', zone);
+
+                                    // SOCKET
+
+                                    const data = {
+                                        zoneData: zone,
+                                        projectId: projectId,
+                                        versionId: selectedVersion?.versionId || '',
+                                        userId: userId,
+                                        organization: organization
+                                    }
+
+                                    socket.emit('v1:zone:add', data);
+                                }
+                            });
+                        }
+                    }
+                }
+            })
+
+        }
+        echo.success("Selected points removed!");
+        clearSelection();
+    };
+
+    return (
+        <>
+            <MoveControls2D movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} />
+
+        </>
+    );
+};
+
+export default SelectionControls2D;

app/src/modules/scene/controls/selectionControls/selection3D/boundingBoxHelper3D.tsx

@@ -1,7 +1,7 @@
 import { Line } from "@react-three/drei";
 import { useMemo } from "react";
 import * as THREE from "three";
-import { useSelectedAssets } from "../../../../store/builder/store";
+import { useSelectedAssets } from "../../../../../store/builder/store";
 
 interface BoundingBoxProps {
     boundingBoxRef?: any;

app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx

@@ -2,17 +2,17 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { SkeletonUtils } from "three-stdlib";
-import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
+import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
-import * as Types from "../../../../types/world/worldTypes";
+import * as Types from "../../../../../types/world/worldTypes";
-import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
-import { getUserData } from "../../../../functions/getUserData";
+import { getUserData } from "../../../../../functions/getUserData";
-import { useSceneContext } from "../../sceneContext";
+import { useSceneContext } from "../../../sceneContext";
-import { useVersionContext } from "../../../builder/version/versionContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
-// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 
-const CopyPasteControls = ({
+const CopyPasteControls3D = ({
     copiedObjects,
     setCopiedObjects,
     pastedObjects,
@@ -490,4 +490,4 @@ const CopyPasteControls = ({
     return null;
 };
 
-export default CopyPasteControls;
+export default CopyPasteControls3D;

app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx

@@ -2,17 +2,17 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { SkeletonUtils } from "three-stdlib";
-import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
+import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
-import * as Types from "../../../../types/world/worldTypes";
+import * as Types from "../../../../../types/world/worldTypes";
-import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
-import { getUserData } from "../../../../functions/getUserData";
+import { getUserData } from "../../../../../functions/getUserData";
-import { useSceneContext } from "../../sceneContext";
+import { useSceneContext } from "../../../sceneContext";
-import { useVersionContext } from "../../../builder/version/versionContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
-// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 
-const DuplicationControls = ({
+const DuplicationControls3D = ({
     duplicatedObjects,
     setDuplicatedObjects,
     setpastedObjects,
@@ -459,4 +459,4 @@ const DuplicationControls = ({
     return null;
 };
 
-export default DuplicationControls;
+export default DuplicationControls3D;

app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx

@@ -1,20 +1,21 @@
 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 { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+import * as Types from "../../../../../types/world/worldTypes";
-import * as Types from "../../../../types/world/worldTypes";
+import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
-import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
+import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
-import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
+import { snapControls } from "../../../../../utils/handleSnap";
-import { snapControls } from "../../../../utils/handleSnap";
 import DistanceFindingControls from "./distanceFindingControls";
 import { useParams } from "react-router-dom";
-import { useProductContext } from "../../../simulation/products/productContext";
+import { useProductContext } from "../../../../simulation/products/productContext";
-import { getUserData } from "../../../../functions/getUserData";
+import { getUserData } from "../../../../../functions/getUserData";
-import { useSceneContext } from "../../sceneContext";
+import { useSceneContext } from "../../../sceneContext";
-import { useVersionContext } from "../../../builder/version/versionContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
-function MoveControls({
+// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+
+function MoveControls3D({
     movedObjects,
     setMovedObjects,
     pastedObjects,
@@ -364,4 +365,4 @@ function MoveControls({
     );
 }
 
-export default MoveControls;
+export default MoveControls3D;

app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx

@@ -1,17 +1,18 @@
 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 { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+import * as Types from "../../../../../types/world/worldTypes";
-import * as Types from "../../../../types/world/worldTypes";
+import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
-import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useParams } from "react-router-dom";
-import { useProductContext } from "../../../simulation/products/productContext";
+import { useProductContext } from "../../../../simulation/products/productContext";
-import { getUserData } from "../../../../functions/getUserData";
+import { getUserData } from "../../../../../functions/getUserData";
-import { useSceneContext } from "../../sceneContext";
+import { useSceneContext } from "../../../sceneContext";
-import { useVersionContext } from "../../../builder/version/versionContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
-function RotateControls({
+// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
+
+function RotateControls3D({
     rotatedObjects,
     setRotatedObjects,
     movedObjects,
@@ -300,4 +301,4 @@ function RotateControls({
     return null;
 }
 
-export default RotateControls
+export default RotateControls3D

app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx

@@ -1,26 +1,27 @@
-import * as THREE from "three";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
+import * as THREE from "three";
-import { SelectionHelper } from "./selectionHelper";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../store/builder/store";
+import { SelectionHelper } from "../selectionHelper";
-import BoundingBox from "./boundingBoxHelper";
+import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
-// import { deleteFloorItem } from '../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
+import * as Types from "../../../../../types/world/worldTypes";
-import * as Types from "../../../../types/world/worldTypes";
 
-import DuplicationControls from "./duplicationControls";
+import useModuleStore from "../../../../../store/useModuleStore";
-import CopyPasteControls from "./copyPasteControls";
-import MoveControls from "./moveControls";
-import RotateControls from "./rotateControls";
-import useModuleStore from "../../../../store/useModuleStore";
 import { useParams } from "react-router-dom";
-import { getUserData } from "../../../../functions/getUserData";
+import { getUserData } from "../../../../../functions/getUserData";
-import { useSceneContext } from "../../sceneContext";
+import { useSceneContext } from "../../../sceneContext";
-import { useVersionContext } from "../../../builder/version/versionContext";
+import { useVersionContext } from "../../../../builder/version/versionContext";
-import { useProductContext } from "../../../simulation/products/productContext";
+import { useProductContext } from "../../../../simulation/products/productContext";
-import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
+import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
+import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
+import BoundingBox from "./boundingBoxHelper3D";
+import DuplicationControls3D from "./duplicationControls3D";
+import CopyPasteControls3D from "./copyPasteControls3D";
+import MoveControls3D from "./moveControls3D";
+import RotateControls3D from "./rotateControls3D";
 
-const SelectionControls: React.FC = () => {
+// import { deleteFloorItem } from '../../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
+
+const SelectionControls3D: React.FC = () => {
     const { camera, controls, gl, scene, raycaster, pointer } = useThree();
     const selectionGroup = useRef() as Types.RefGroup;
     const { toggleView } = useToggleView();
@@ -253,7 +254,7 @@ const SelectionControls: React.FC = () => {
         });
 
         if (Objects.size === 0) {
-            clearSelection();
+            // clearSelection();
             return;
         }
 
@@ -350,15 +351,15 @@ const SelectionControls: React.FC = () => {
                 </group>
             </group>
 
-            <MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
+            <MoveControls3D movedObjects={movedObjects} setMovedObjects={setMovedObjects} 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} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} />
+            <RotateControls3D rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} />
 
-            <DuplicationControls duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
+            <DuplicationControls3D duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
 
-            <CopyPasteControls copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
+            <CopyPasteControls3D 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;
+export default SelectionControls3D;

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -6,11 +6,12 @@ import {
     useSelectedFloorItem,
 } from "../../../store/builder/store";
 import * as CONSTANTS from "../../../types/world/worldConstants";
-import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useDeletableEventSphere, useSelectedEventSphere, useSelectedPoints } from "../../../store/simulation/useSimulationStore";
 import { useEffect } from "react";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 
 export default function PostProcessing() {
+    const { selectedPoints } = useSelectedPoints();
     const { deletableFloorItem } = useDeletableFloorItem();
     const { selectedWallItem } = useSelectedWallItem();
     const { selectedFloorItem } = useSelectedFloorItem();
@@ -61,6 +62,10 @@ export default function PostProcessing() {
         // console.log('deletableEventSphere: ', deletableEventSphere);
     }, [deletableEventSphere])
 
+    useEffect(() => {
+        // console.log('selectedPoints: ', selectedPoints);
+    }, [selectedPoints])
+
     return (
         <EffectComposer autoClear={false}>
             <N8AO

app/src/modules/simulation/events/arrows/arrows.tsx

@@ -103,9 +103,21 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
         return (
             <group
                 key={key}
-                onPointerOver={() => setHoveredArrowTrigger(trigger.triggerUuid)}
+                onPointerOver={() => {
-                onPointerOut={() => setHoveredArrowTrigger(null)}
+                    if (toolMode === '3D-Delete') {
-                onClick={() => { removeConnection(trigger) }}
+                        setHoveredArrowTrigger(trigger.triggerUuid)
+                    }
+                }}
+                onPointerOut={() => {
+                    if (toolMode === '3D-Delete') {
+                        setHoveredArrowTrigger(null)
+                    }
+                }}
+                onClick={() => {
+                    if (toolMode === '3D-Delete') {
+                        removeConnection(trigger)
+                    }
+                }}
             >
                 <mesh
                     geometry={shaftGeometry}

app/src/store/simulation/useSimulationStore.ts

@@ -277,3 +277,39 @@ export const useComparisonProduct = create<ComparisonProductState>()(
         },
     }))
 );
+
+interface SelectedPointsState {
+    selectedPoints: THREE.Object3D[];
+    setSelectedPoints: (points: THREE.Object3D[]) => void;
+    addSelectedPoint: (point: THREE.Object3D) => void;
+    removeSelectedPoint: (uuid: string) => void;
+    clearSelectedPoints: () => void;
+}
+
+export const useSelectedPoints = create<SelectedPointsState>()(
+    immer((set) => ({
+        selectedPoints: [],
+        setSelectedPoints: (points) => {
+            set((state) => {
+                state.selectedPoints = points;
+            });
+        },
+        addSelectedPoint: (point) => {
+            set((state) => {
+                if (!state.selectedPoints.find(p => p.uuid === point.uuid)) {
+                    state.selectedPoints.push(point);
+                }
+            });
+        },
+        removeSelectedPoint: (uuid) => {
+            set((state) => {
+                state.selectedPoints = state.selectedPoints.filter(p => p.uuid !== uuid);
+            });
+        },
+        clearSelectedPoints: () => {
+            set((state) => {
+                state.selectedPoints = [];
+            });
+        },
+    }))
+);

app/src/styles/scene/cursors.scss

@@ -1,6 +1,7 @@
 $cursor-default: url("../../assets/cursors/default.svg") 0 0, default;
 $cursor-pen: url("../../assets/cursors/pen.svg") 0 0, default;
 $cursor-delete: url("../../assets/cursors/pointing.svg") 4 0, default;
+$cursor-comment: url("../../assets/cursors/comment.svg") 0 16, default;
 $cursor-draw: url("../../assets/cursors/cell.svg") 8 8, default;
 $cursor-cross: url("../../assets/cursors/cross.svg") 8 8, default;
 $cursor-grab: url("../../assets/cursors/open.svg") 8 8, default;
@@ -51,3 +52,9 @@ $cursor-grabing: url("../../assets/cursors/close.svg") 8 8, default;
   }
 }
 
+.scene-container.comment {
+  canvas {
+    cursor: $cursor-comment !important;
+  }
+}
+

app/src/utils/mouseUtils/handleCanvasCursors.ts

@@ -16,6 +16,7 @@ export const handleCanvasCursors = (name: string) => {
     pen: 'pen',
     'free-hand': 'hand',
     move: 'move',
+    comment: 'comment',
     // Add more mappings as needed
   };
 

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -53,7 +53,7 @@ const KeyPressListener: React.FC = () => {
   const { setCreateNewVersion } = useVersionHistoryStore();
   const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
   const { setSelectedComment } = useSelectedComment();
-  const { setDfxUploaded, setDxfWallGenerate } = useDfxUpload();
+  const { setDfxUploaded } = useDfxUpload();
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
     element instanceof HTMLTextAreaElement ||
@@ -128,6 +128,9 @@ const KeyPressListener: React.FC = () => {
       setActiveTool("measure");
       setToolMode("MeasurementScale");
     }
+    if (key === "C") {
+      setActiveTool("comment");
+    }
   };
 
   const handleSidebarShortcuts = (key: string) => {