rotation added

app/src/components/ui/componets/Dropped3dWidget.tsx

@@ -1,5 +1,5 @@
 import { useThree } from "@react-three/fiber";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
@@ -16,6 +16,14 @@ import { use3DWidget } from "../../../store/useDroppedObjectsStore";
 import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import EditWidgetOption from "../menu/EditWidgetOption";
+type WidgetData = {
+    id: string;
+    type: string;
+    position: [number, number, number];
+    rotation?: [number, number, number];
+    tempPosition?: [number, number, number];
+};
+
 
 export default function Dropped3dWidgets() {
     const { widgetSelect } = useAsset3dWidget();
@@ -23,22 +31,22 @@ export default function Dropped3dWidgets() {
     const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
     const { widgetSubOption } = useWidgetSubOption();
     const { selectedZone } = useSelectedZoneStore();
-    const { top, setTop } = useTopData()
-    const { left, setLeft } = useLeftData()
-    const { rightSelect, setRightSelect } = useRightSelected()
+    const { top, setTop } = useTopData();
+    const { left, setLeft } = useLeftData();
+    const { rightSelect, setRightSelect } = useRightSelected();
 
-    // ✅ Use Zustand Store instead of useState
-    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
+    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
     const { setWidgets3D } = use3DWidget();
     const { visualizationSocket } = useSocketStore();
-    const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
-
+    const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
     const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
     const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
     const planeIntersect = useRef(new THREE.Vector3());
-    // let [verticalPlane, setFloorPlanesVertical] = useState(
-    //     new THREE.Plane(new THREE.Vector3(0, 1, 0))
-    // );
+    // const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+    // const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+    // const planeIntersect = useRef(new THREE.Vector3());
+    const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
+    const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
     useEffect(() => {
         if (activeModule !== "visualization") return;
@@ -48,14 +56,14 @@ export default function Dropped3dWidgets() {
         const organization = email?.split("@")[1]?.split(".")[0];
 
         async function get3dWidgetData() {
-            let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
-
+            const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
             setWidgets3D(result);
 
-            const formattedWidgets = result.map((widget: any) => ({
+            const formattedWidgets = result.map((widget: WidgetData) => ({
                 id: widget.id,
                 type: widget.type,
                 position: widget.position,
+                rotation: widget.rotation || [0, 0, 0],
             }));
 
             setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
@@ -91,28 +99,24 @@ export default function Dropped3dWidgets() {
 
             if (intersects.length > 0) {
                 const { x, y, z } = intersects[0].point;
-                const newWidget = {
+                const newWidget: WidgetData = {
                     id: generateUniqueId(),
                     type: widgetSelect,
-                    position: [x, y, z] as [number, number, number],
+                    position: [x, y, z],
+                    rotation: [0, 0, 0],
                 };
 
-                let add3dWidget = {
+                const add3dWidget = {
                     organization: organization,
                     widget: newWidget,
                     zoneId: selectedZone.zoneId
-                }
+                };
 
                 if (visualizationSocket) {
-                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
+                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
                 }
 
-                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
-                // 
-
-                // if (response.message === "Widget created successfully") {
                 addWidget(selectedZone.zoneId, newWidget);
-                // }
             }
         };
 
@@ -128,63 +132,76 @@ export default function Dropped3dWidgets() {
         if (!rightClickSelected) return;
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
+
         if (rightSelect === "Duplicate") {
-            const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
+            const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
             if (!widgetToDuplicate) return;
-            const newWidget = {
+            const newWidget: WidgetData = {
                 id: generateUniqueId(),
                 type: widgetToDuplicate.type,
                 position: [
-                    widgetToDuplicate.position[0] + 0.5, // Slightly shift position
+                    widgetToDuplicate.position[0] + 0.5,
                     widgetToDuplicate.position[1],
                     widgetToDuplicate.position[2] + 0.5,
-                ] as [number, number, number],
+                ],
+                rotation: widgetToDuplicate.rotation || [0, 0, 0],
             };
-            let add3dWidget = {
+
+            const add3dWidget = {
                 organization,
                 widget: newWidget,
                 zoneId: selectedZone.zoneId
             };
-            // if (visualizationSocket) {
-            //     visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
-            // }
+
             addWidget(selectedZone.zoneId, newWidget);
             setRightSelect(null);
             setRightClickSelected(null);
         }
+
         if (rightSelect === "Delete") {
-            let deleteWidget = {
+            const deleteWidget = {
                 organization,
                 widgetId: rightClickSelected,
                 zoneId: selectedZone.zoneId
             };
-            // if (visualizationSocket) {
-            //     visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
-            // }
-            setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
+
+            setZoneWidgetData(
+                selectedZone.zoneId,
+                activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
+            );
             setRightClickSelected(null);
             setRightSelect(null);
         }
-        if (rightSelect === "Horizontal Move") {
-
-        }
-        if (rightSelect === "Vertical Move") {
-
-        }
-
     }, [rightSelect, rightClickSelected]);
 
     useEffect(() => {
-        const handleMouseMove = (event: MouseEvent) => {
+        const handleMouseDown = (event: MouseEvent) => {
             if (!rightClickSelected || !rightSelect) return;
 
+            if (rightSelect === "RotateX" || rightSelect === "RotateY") {
+                mouseStartRef.current = { x: event.clientX, y: event.clientY };
 
-            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
-                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+                const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
+                    zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
+                );
+
+                if (!selectedZone) return;
+
+                const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
+                if (selectedWidget) {
+                    rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
+                }
+            }
+        };
+
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+            const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
+                zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
             );
             if (!selectedZone) return;
 
-            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
+            const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
             if (!selectedWidget) return;
 
             const rect = gl.domElement.getBoundingClientRect();
@@ -194,31 +211,67 @@ export default function Dropped3dWidgets() {
             raycaster.setFromCamera(mouse, camera);
 
             if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
-
-                updateWidgetPosition(selectedZone, rightClickSelected, [
+                const newPosition: [number, number, number] = [
                     planeIntersect.current.x,
                     selectedWidget.position[1],
                     planeIntersect.current.z
-                ]);
+                ];
+                updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
+                console.log('Horizontal Move - Final Position:', newPosition);
             }
 
             if (rightSelect === "Vertical Move") {
                 if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
                     updateWidgetPosition(selectedZone, rightClickSelected, [
                         selectedWidget.position[0],
-                        planeIntersect.current.y, // Ensure Y value updates correctly
+                        planeIntersect.current.y,
                         selectedWidget.position[2]
                     ]);
-                } else {
-                    console.log("No Intersection with Vertical Plane");
                 }
             }
+
+            if (rightSelect === "RotateX") {
+                const deltaX = event.clientX - mouseStartRef.current.x;
+                const rotationSpeed = 0.03;
+                const newRotation: [number, number, number] = [
+                    rotationStartRef.current[0] + deltaX * rotationSpeed,
+                    rotationStartRef.current[1],
+                    rotationStartRef.current[2]
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+
+            if (rightSelect === "RotateY") {
+                const deltaY = event.clientY - mouseStartRef.current.y;
+                const rotationSpeed = 0.03;
+                const newRotation: [number, number, number] = [
+                    rotationStartRef.current[0],
+                    rotationStartRef.current[1] + deltaY * rotationSpeed,
+                    rotationStartRef.current[2]
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+            if (rightSelect === "RotateZ") {
+                const deltaX = event.movementX;
+                const rotationSpeed = 0.03;
+                const currentRotation = selectedWidget.rotation || [0, 0, 0];
+                const newRotation: [number, number, number] = [
+                    currentRotation[0],
+                    currentRotation[1],
+                    currentRotation[2] + deltaX * rotationSpeed
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+
         };
 
         const handleMouseUp = () => {
-
-            if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
-
+            if (rightClickSelected && (
+                rightSelect === "Horizontal Move" ||
+                rightSelect === "Vertical Move" ||
+                rightSelect === "RotateX" ||
+                rightSelect === "RotateY" || rightSelect === "RotateZ"
+            )) {
                 setTimeout(() => {
                     setRightClickSelected(null);
                     setRightSelect(null);
@@ -226,40 +279,81 @@ export default function Dropped3dWidgets() {
             }
         };
 
-        // Attach events to window instead of gl.domElement
+        window.addEventListener("mousedown", handleMouseDown);
         window.addEventListener("mousemove", handleMouseMove);
         window.addEventListener("mouseup", handleMouseUp);
 
         return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
         };
     }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
 
-
-
-
     return (
         <>
-            {activeZoneWidgets.map(({ id, type, position }) => {
-                const handleRightClick = (event: React.MouseEvent) => {
+            {activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
+                const handleRightClick = (event: React.MouseEvent, id: string) => {
                     event.preventDefault();
-                    setRightClickSelected(id)
+                    const canvasElement = document.getElementById("real-time-vis-canvas");
+                    if (!canvasElement) throw new Error("Canvas element not found");
+                    const canvasRect = canvasElement.getBoundingClientRect();
+                    const relativeX = event.clientX - canvasRect.left;
+                    const relativeY = event.clientY - canvasRect.top;
+                    setRightClickSelected(id);
+                    setTop(relativeY);
+                    setLeft(relativeX);
                 };
+
                 switch (type) {
                     case "ui-Widget 1":
-                        return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <ProductionCapacity
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 2":
-                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <ReturnOfInvestment
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                // rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 3":
-                        return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <StateWorking
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                // rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 4":
-                        return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <Throughput
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                // rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     default:
                         return null;
                 }
             })}
-
         </>
     );
-}
+}