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

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

@@ -4,6 +4,7 @@ import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
 import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
+import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -147,23 +148,41 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   };
 
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0]
-    let response = await getSelect2dZoneData(zoneId, organization)
-    setSelectedZone({
-      zoneName,
-      activeSides: response.activeSides,
-      panelOrder: response.panelOrder,
-      lockedPanels: response.lockedPanels,
-      widgets: response.widgets,
-      zoneId: zoneId,
-      zoneViewPortTarget:
-        response.viewPortCenter,
-      zoneViewPortPosition:
-        response.viewPortposition,
-    });
+    try {
+      if (selectedZone?.zoneId === zoneId) {
+        console.log("Zone is already selected:", zoneName);
+        return;
+      }
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      // Fetch data from backend
+      let response = await getSelect2dZoneData(zoneId, organization);
+      let res = await getFloatingZoneData(zoneId, organization);
+      // Set the selected zone in the store
+      useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
+      if (Array.isArray(res)) {
+        res.forEach((val) => {
+          useDroppedObjectsStore.getState().addObject(zoneName, val);
+        });
+      }
+      // Update selected zone state
+      setSelectedZone({
+        zoneName,
+        activeSides: response.activeSides || [],
+        panelOrder: response.panelOrder || [],
+        lockedPanels: response.lockedPanels || [],
+        widgets: response.widgets || [],
+        zoneId: zoneId,
+        zoneViewPortTarget: response.viewPortCenter || {},
+        zoneViewPortPosition: response.viewPortposition || {},
+      });
+    } catch (error) {
+      console.log('error: ', error);
+      
+    }
   }
 
+
   return (
     <div
       className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
@@ -185,7 +204,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
               className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
                 }`}
               onClick={() => {
-                useDroppedObjectsStore.getState().setZone(zoneName, zonesData[zoneName]?.zoneId);
                 handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
               }}
             >