3dWidget dnd and 2d widgets backend api updated

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

@@ -3,6 +3,7 @@ import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -12,6 +13,7 @@ interface DisplayZoneProps {
     [key: string]: {
       activeSides: Side[];
       panelOrder: Side[];
+
       lockedPanels: Side[];
       widgets: Widget[];
       zoneId: string;
@@ -23,6 +25,7 @@ interface DisplayZoneProps {
     zoneName: string;
     activeSides: Side[];
     panelOrder: Side[];
+
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -40,6 +43,7 @@ interface DisplayZoneProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
+
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -60,6 +64,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   selectedZone,
   setSelectedZone,
 }) => {
+
   // Ref for the container element
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -141,11 +146,28 @@ 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,
+    });
+  }
+
   return (
     <div
-      className={`zone-wrapper ${
-        selectedZone?.activeSides?.includes("bottom") && "bottom"
-      }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
+        }`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (
@@ -160,23 +182,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
           {Object.keys(zonesData).map((zoneName, index) => (
             <div
               key={index}
-              className={`zone ${
-                selectedZone.zoneName === zoneName ? "active" : ""
-              }`}
+              className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
+                }`}
               onClick={() => {
                 useDroppedObjectsStore.getState().setZone(zoneName, zonesData[zoneName]?.zoneId);
-                setSelectedZone({
-                  zoneName,
-                  activeSides: zonesData[zoneName].activeSides || [],
-                  panelOrder: zonesData[zoneName].panelOrder || [],
-                  lockedPanels: zonesData[zoneName].lockedPanels || [],
-                  widgets: zonesData[zoneName].widgets || [],
-                  zoneId: zonesData[zoneName]?.zoneId || "",
-                  zoneViewPortTarget:
-                    zonesData[zoneName].zoneViewPortTarget || [],
-                  zoneViewPortPosition:
-                    zonesData[zoneName].zoneViewPortPosition || [],
-                });
+                handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
               }}
             >
               {zoneName}