updated folder structure

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -0,0 +1,626 @@
+import * as THREE from "three";
+import { useThree } from "@react-three/fiber";
+import React, { useEffect, useRef, useState } from "react";
+import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../../store/store";
+import useModuleStore from "../../../../store/useModuleStore";
+import { ThreeState } from "../../../../types/world/worldTypes";
+import { useSelectedZoneStore } from "../../../../store/useZoneStore";
+import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../../store/useZone3DWidgetStore";
+import { use3DWidget } from "../../../../store/useDroppedObjectsStore";
+import { get3dWidgetZoneData } from "../../../../services/realTimeVisulization/zoneData/get3dWidgetData";
+import { generateUniqueId } from "../../../../functions/generateUniqueId";
+import ProductionCapacity from "./cards/ProductionCapacity";
+import ReturnOfInvestment from "./cards/ReturnOfInvestment";
+import StateWorking from "./cards/StateWorking";
+import Throughput from "./cards/Throughput";
+
+
+
+
+
+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();
+    const { activeModule } = useModuleStore();
+    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 { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation, tempWidget, tempWidgetPosition } = useZoneWidgetStore();
+    const { setWidgets3D } = use3DWidget();
+    const { visualizationSocket } = useSocketStore();
+    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());
+    const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
+    const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+    let [floorPlanesVertical, setFloorPlanesVertical] = useState(
+        new THREE.Plane(new THREE.Vector3(0, 1, 0))
+    );
+
+
+    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
+    useEffect(() => {
+        if (activeModule !== "visualization") return;
+        if (!selectedZone.zoneId) return;
+
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        async function get3dWidgetData() {
+            const result = await get3dWidgetZoneData(
+                selectedZone.zoneId,
+                organization
+            );
+
+            setWidgets3D(result);
+            if (result.length < 0) return
+
+            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);
+        }
+
+        get3dWidgetData();
+    }, [selectedZone.zoneId, activeModule]);
+
+    const createdWidgetRef = useRef<WidgetData | null>(null);
+
+    useEffect(() => {
+        if (activeModule !== "visualization") return;
+        if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
+        if (selectedZone.zoneName === "") return;
+
+        const canvasElement = document.getElementById("real-time-vis-canvas");
+
+        if (!canvasElement) return;
+
+        const hasEntered = { current: false };
+
+        const handleDragEnter = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (hasEntered.current || !widgetSelect.startsWith("ui")) return;
+            hasEntered.current = true;
+
+            const group1 = scene.getObjectByName("itemsGroup");
+            if (!group1) return;
+
+            const rect = canvasElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        !intersect.object.name.includes("Roof") &&
+                        !intersect.object.name.includes("agv-collider") &&
+                        !intersect.object.name.includes("MeasurementReference") &&
+                        !intersect.object.userData.isPathObject &&
+                        !(intersect.object.type === "GridHelper")
+                );
+
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
+                const newWidget: WidgetData = {
+                    id: generateUniqueId(),
+                    type: widgetSelect,
+                    position: [x, y, z],
+                    rotation: [0, 0, 0],
+                };
+
+                createdWidgetRef.current = newWidget;
+                tempWidget(selectedZone.zoneId, newWidget); // temp add in UI
+            }
+        };
+
+        const handleDragOver = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.dataTransfer!.dropEffect = "move"; // ✅ Add this line
+            const widget = createdWidgetRef.current;
+            if (!widget) return;
+
+            const rect = canvasElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        !intersect.object.name.includes("Roof") &&
+                        !intersect.object.name.includes("agv-collider") &&
+                        !intersect.object.name.includes("MeasurementReference") &&
+                        !intersect.object.userData.isPathObject &&
+                        !(intersect.object.type === "GridHelper")
+                );
+            // Update widget's position in memory
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
+                tempWidgetPosition(selectedZone.zoneId, widget.id, [x, y, z]);
+                widget.position = [x, y, z];
+            }
+
+        };
+
+        const onDrop = (event: any) => {
+            
+            event.preventDefault();
+            event.stopPropagation();
+
+            hasEntered.current = false;
+
+            const email = localStorage.getItem("email") || "";
+            const organization = email?.split("@")[1]?.split(".")[0];
+
+            const newWidget = createdWidgetRef.current;
+            if (!newWidget || !widgetSelect.startsWith("ui")) return;
+
+            // ✅ Extract 2D drop position
+            const [x, , z] = newWidget.position;
+
+            // ✅ Prepare polygon from selectedZone.points
+            const points3D = selectedZone.points as Array<[number, number, number]>;
+            const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
+
+            const isInside = isPointInPolygon([x, z], zonePolygonXZ);
+            // ✅ Remove temp widget
+            const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
+            const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
+            useZoneWidgetStore.setState((state) => ({
+                zoneWidgetData: {
+                    ...state.zoneWidgetData,
+                    [selectedZone.zoneId]: cleanedWidgets,
+                },
+            }));
+            // if (!isInside) {
+                
+            //     createdWidgetRef.current = null;
+            //     return; // Stop here
+            // }
+            // ✅ Add widget if inside polygon
+            addWidget(selectedZone.zoneId, newWidget);
+
+            const add3dWidget = {
+                organization,
+                widget: newWidget,
+                zoneId: selectedZone.zoneId,
+            };
+
+            if (visualizationSocket) {
+                visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
+            }
+
+            createdWidgetRef.current = null;
+        };
+
+
+        canvasElement.addEventListener("dragenter", handleDragEnter);
+        canvasElement.addEventListener("dragover", handleDragOver);
+        canvasElement.addEventListener("drop", onDrop);
+
+        return () => {
+            canvasElement.removeEventListener("dragenter", handleDragEnter);
+            canvasElement.removeEventListener("dragover", handleDragOver);
+            canvasElement.removeEventListener("drop", onDrop);
+        };
+    }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, camera,]);
+
+    useEffect(() => {
+        if (!rightClickSelected) return;
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        if (rightSelect === "Duplicate") {
+            async function duplicateWidget() {
+                const widgetToDuplicate = activeZoneWidgets.find(
+                    (w: WidgetData) => w.id === rightClickSelected
+                );
+                if (!widgetToDuplicate) return;
+                const newWidget: WidgetData = {
+                    id: generateUniqueId(),
+                    type: widgetToDuplicate.type,
+                    position: [
+                        widgetToDuplicate.position[0] + 0.5,
+                        widgetToDuplicate.position[1],
+                        widgetToDuplicate.position[2] + 0.5,
+                    ],
+                    rotation: widgetToDuplicate.rotation || [0, 0, 0],
+                };
+                const adding3dWidget = {
+                    organization: organization,
+                    widget: newWidget,
+                    zoneId: selectedZone.zoneId,
+                };
+                if (visualizationSocket) {
+                    visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget);
+                }
+                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
+                //
+
+                addWidget(selectedZone.zoneId, newWidget);
+                setRightSelect(null);
+                setRightClickSelected(null);
+            }
+            duplicateWidget();
+        }
+
+        if (rightSelect === "Delete") {
+            const deleteWidgetApi = async () => {
+                try {
+                    const deleteWidget = {
+                        organization,
+                        id: rightClickSelected,
+                        zoneId: selectedZone.zoneId,
+                    };
+
+                    if (visualizationSocket) {
+                        visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
+                    }
+                    // Call the API to delete the widget
+                    // const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
+                    setZoneWidgetData(
+                        selectedZone.zoneId,
+                        activeZoneWidgets.filter(
+                            (w: WidgetData) => w.id !== rightClickSelected
+                        )
+                    );
+                } catch (error) {
+                } finally {
+                    setRightClickSelected(null);
+                    setRightSelect(null);
+                }
+            };
+
+            deleteWidgetApi();
+        }
+    }, [rightSelect, rightClickSelected]);
+
+
+    function isPointInPolygon(
+        point: [number, number],
+        polygon: Array<[number, number]>
+    ): boolean {
+        const [x, z] = point;
+        let inside = false;
+
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const [xi, zi] = polygon[i];
+            const [xj, zj] = polygon[j];
+
+            const intersect =
+                zi > z !== zj > z &&
+                x < ((xj - xi) * (z - zi)) / (zj - zi) + xi;
+
+            if (intersect) inside = !inside;
+        }
+
+        return inside;
+    }
+    const [prevX, setPrevX] = useState(0);
+ 
+    useEffect(() => {
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        const handleMouseDown = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+
+            const cameraDirection = new THREE.Vector3();
+            camera.getWorldDirection(cameraDirection);
+        
+            // Plane normal should be perpendicular to screen (XZ move), so use screen right direction
+            const right = new THREE.Vector3();
+            camera.getWorldDirection(cameraDirection);
+            cameraDirection.y = 0;
+            cameraDirection.normalize();
+        
+            right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
+        
+            // Create a plane that allows vertical movement
+            const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
+        
+            setFloorPlanesVertical(verticalPlane);
+            if (rightSelect === "RotateX" || rightSelect === "RotateY") {
+                mouseStartRef.current = { x: event.clientX, y: event.clientY };
+
+                const selectedZoneId = Object.keys(zoneWidgetData).find(
+                    (zoneId: string) =>
+                        zoneWidgetData[zoneId].some(
+                            (widget: WidgetData) => widget.id === rightClickSelected
+                        )
+                );
+                if (!selectedZoneId) return;
+                const selectedWidget = zoneWidgetData[selectedZoneId].find(
+                    (widget: WidgetData) => widget.id === rightClickSelected
+                );
+                if (selectedWidget) {
+                    rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
+                }
+            }
+        };
+
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+            const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId: string) =>
+                zoneWidgetData[zoneId].some(
+                    (widget: WidgetData) => widget.id === rightClickSelected
+                )
+            );
+            if (!selectedZoneId) return;
+
+            const selectedWidget = zoneWidgetData[selectedZoneId].find(
+                (widget: WidgetData) => widget.id === rightClickSelected
+            );
+            if (!selectedWidget) return;
+
+            const rect = gl.domElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, camera);
+
+            if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
+                const points3D = selectedZone.points as Array<[number, number, number]>;
+                const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
+                const newPosition: [number, number, number] = [
+                    planeIntersect.current.x,
+                    selectedWidget.position[1],
+                    planeIntersect.current.z,
+                ];
+                const isInside = isPointInPolygon(
+                    [newPosition[0], newPosition[2]],
+                    zonePolygonXZ
+                );
+                // if (isInside) {
+                    updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+                // }
+            }
+
+            if (rightSelect === "Vertical Move") {
+                if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
+                    const currentY = selectedWidget.position[1];
+                    const newY = planeIntersect.current.y;
+                    console.log('planeIntersect.current: ', planeIntersect.current);
+                
+                    const deltaY = newY - currentY;
+                
+                    // Reject if jump is too large (safety check)
+                    if (Math.abs(deltaY) > 200) return;
+                
+                    // Clamp jump or apply smoothing
+                    const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10);
+                
+                    if (clampedY > 0) {
+                        updateWidgetPosition(selectedZoneId, rightClickSelected, [
+                            selectedWidget.position[0],
+                            clampedY,
+                            selectedWidget.position[2],
+                        ]);
+                    }
+                }
+            }
+
+            if (rightSelect === "RotateX") {
+                const currentX = event.pageX;
+                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+                setPrevX(currentX);
+                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+                    const newRotation: [number, number, number] = [
+                        selectedWidget.rotation[0] + 0.05 * sign,
+                        selectedWidget.rotation[1],
+                        selectedWidget.rotation[2],
+                    ];
+                    
+                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+                }
+            }
+
+            if (rightSelect === "RotateY") {
+                const currentX = event.pageX;
+                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+                setPrevX(currentX);
+                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+                    const newRotation: [number, number, number] = [
+                        selectedWidget.rotation[0] ,
+                        selectedWidget.rotation[1]+ 0.05 * sign,
+                        selectedWidget.rotation[2],
+                    ];
+                    
+                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+                }
+            }
+            if (rightSelect === "RotateZ") {
+                const currentX = event.pageX;
+                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+                setPrevX(currentX);
+                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+                    const newRotation: [number, number, number] = [
+                        selectedWidget.rotation[0] ,
+                        selectedWidget.rotation[1],
+                        selectedWidget.rotation[2]+ 0.05 * sign,
+                    ];
+                    
+                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            if (!rightClickSelected || !rightSelect) return;
+            const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
+                zoneWidgetData[zoneId].some(
+                    (widget) => widget.id === rightClickSelected
+                )
+            );
+            if (!selectedZoneId) return;
+
+            const selectedWidget = zoneWidgetData[selectedZoneId].find(
+                (widget) => widget.id === rightClickSelected
+            );
+            if (!selectedWidget) return;
+            // Format values to 2 decimal places
+            const formatValues = (vals: number[]) =>
+                vals.map((val) => parseFloat(val.toFixed(2)));
+            if (
+                rightSelect === "Horizontal Move" ||
+                rightSelect === "Vertical Move"
+            ) {
+                let lastPosition = formatValues(selectedWidget.position) as [
+                    number,
+                    number,
+                    number
+                ];
+                // (async () => {
+                //     let response = await update3dWidget(selectedZoneId, organization, rightClickSelected, lastPosition);
+                //
+                //     if (response) {
+                //
+                //     }
+                // })();
+                let updatingPosition = {
+                    organization: organization,
+                    zoneId: selectedZoneId,
+                    id: rightClickSelected,
+                    position: lastPosition,
+                };
+                if (visualizationSocket) {
+                    visualizationSocket.emit(
+                        "v2:viz-3D-widget:modifyPositionRotation",
+                        updatingPosition
+                    );
+                }
+            } else if (rightSelect.includes("Rotate")) {
+                const rotation = selectedWidget.rotation || [0, 0, 0];
+
+                let lastRotation = formatValues(rotation) as [number, number, number];
+             
+                // (async () => {
+                //     let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
+                //
+                //     if (response) {
+                //
+                //     }
+                // })();
+                let updatingRotation = {
+                    organization: organization,
+                    zoneId: selectedZoneId,
+                    id: rightClickSelected,
+                    rotation: lastRotation,
+                };
+                if (visualizationSocket) {
+                    visualizationSocket.emit(
+                        "v2:viz-3D-widget:modifyPositionRotation",
+                        updatingRotation
+                    );
+                }
+            }
+
+            // Reset selection
+            setTimeout(() => {
+                setRightClickSelected(null);
+                setRightSelect(null);
+            }, 50);
+        };
+        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, rotation = [0, 0, 0] }: WidgetData) => {
+                    const handleRightClick = (event: React.MouseEvent, id: string) => {
+                        event.preventDefault();
+                        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;
+                        setEditWidgetOptions(true);
+                        setRightClickSelected(id);
+                        setTop(relativeY);
+                        setLeft(relativeX);
+                    };
+
+                    switch (type) {
+                        case "ui-Widget 1":
+                            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}
+                                    rotation={rotation}
+                                    onContextMenu={(e) => handleRightClick(e, id)}
+                                />
+                            );
+                        case "ui-Widget 3":
+                            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}
+                                    rotation={rotation}
+                                    onContextMenu={(e) => handleRightClick(e, id)}
+                                />
+                            );
+                        default:
+                            return null;
+                    }
+                }
+            )}
+        </>
+    );
+}