floatingwidgets Api and 3dwidget frontend and 2d widget delete Api and zonecameraUpdation

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

@@ -9,9 +9,11 @@ import useModuleStore from "../../../store/useModuleStore";
 
 import DroppedObjects from "./DroppedFloatingWidgets";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
-import { useAsset3dWidget, useZones } from "../../../store/store";
-import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useAsset3dWidget, useWidgetSubOption, useZones } from "../../../store/store";
 import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { determinePosition } from "./functions/determinePosition";
+import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
 
 
 type Side = "top" | "bottom" | "left" | "right";
@@ -48,6 +50,8 @@ const RealTimeVisulization: React.FC = () => {
   const { zones } = useZones()
   const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption()
+
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -72,12 +76,12 @@ const RealTimeVisulization: React.FC = () => {
         setZonesData(formattedData);
       } catch (error) {
         console.log('error: ', error);
+
       }
     }
 
     GetZoneData();
-  }, []); // Removed `zones` from dependencies
-
+  }, [activeModule]); // Removed `zones` from dependencies
 
   useEffect(() => {
     setZonesData((prev) => {
@@ -97,48 +101,68 @@ const RealTimeVisulization: React.FC = () => {
       };
     });
   }, [selectedZone]);
-  
+
   useEffect(() => {
 
   }, [floatingWidgets])
 
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    const data = event.dataTransfer.getData("text/plain");
-    if (widgetSelect !== "") return;
-    if (!data || selectedZone.zoneName === "") return;
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+    try {
+      event.preventDefault();
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
 
-    const droppedData = JSON.parse(data);
-    const canvasElement = document.getElementById("real-time-vis-canvas");
-    if (!canvasElement) return;
+      const data = event.dataTransfer.getData("text/plain");
+      // if (widgetSelect !== "") return;
+      if (widgetSubOption === "3D") return
+      if (!data || selectedZone.zoneName === "") return;
 
-    const canvasRect = canvasElement.getBoundingClientRect();
-    const relativeX = event.clientX - canvasRect.left;
-    const relativeY = event.clientY - canvasRect.top;
+      const droppedData = JSON.parse(data);
+      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;
+
+      const newObject = {
+        ...droppedData,
+        id: generateUniqueId(),
+        position: determinePosition(canvasRect, relativeX, relativeY),
+      };
+
+      let response = await addingFloatingWidgets(selectedZone.zoneId, organization, newObject);
+
+
+      // Only set zone if it’s not already in the store (prevents overwriting objects)
+      const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+      if (!existingZone) {
+        useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+      }
+
+
+      // Add the dropped object to the zone if the API call is successful
+      if (response.message === "FloatWidget created successfully") {
+        useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
+      }
+
+      // Update floating widgets state
+      setFloatingWidgets((prevWidgets) => ({
+        ...prevWidgets,
+        [selectedZone.zoneName]: {
+          ...prevWidgets[selectedZone.zoneName],
+          zoneName: selectedZone.zoneName,
+          zoneId: selectedZone.zoneId,
+          objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
+        },
+      }));
+    } catch (error) {
 
-    const newObject = {
-      ...droppedData,
-      position: [relativeY, relativeX], // Y first because of top/left style
-    };
-    // Only set zone if it’s not already in the store (prevents overwriting objects)
-    const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
-    if (!existingZone) {
-      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
     }
-    // Add the dropped object to the zone
-    useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
-    setFloatingWidgets((prevWidgets) => ({
-      ...prevWidgets,
-      [selectedZone.zoneName]: {
-        ...prevWidgets[selectedZone.zoneName],
-        zoneName: selectedZone.zoneName,
-        zoneId: selectedZone.zoneId,
-        objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
-      },
-    }));
   };
 
 
+
   return (
     <div
       ref={containerRef}