3dWidget dnd and 2d widgets backend api updated

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

@@ -9,7 +9,9 @@ import useModuleStore from "../../../store/useModuleStore";
 
 import DroppedObjects from "./DroppedFloatingWidgets";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
-import { useZones } from "../../../store/store";
+import { useAsset3dWidget, useZones } from "../../../store/store";
+import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
 
 
 type Side = "top" | "bottom" | "left" | "right";
@@ -19,6 +21,7 @@ type FormattedZoneData = Record<
   {
     activeSides: Side[];
     panelOrder: Side[];
+
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -43,25 +46,38 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zones } = useZones()
-
+  const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   useEffect(() => {
-    const data = Array.isArray(zones) ? zones : [];
+    async function GetZoneData() {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      try {
+        const response = await getZone2dData(organization);
+        if (!Array.isArray(response)) {
+          return;
+        }
+        const formattedData = response.reduce<FormattedZoneData>((acc, zone) => {
+          acc[zone.zoneName] = {
+            activeSides: [],
+            panelOrder: [],
+            lockedPanels: [],
+            zoneId: zone.zoneId,
+            zoneViewPortTarget: zone.viewPortCenter,
+            zoneViewPortPosition: zone.viewPortposition,
+            widgets: [],
+          };
+          return acc;
+        }, {});
+        setZonesData(formattedData);
+      } catch (error) {
+        console.log('error: ', error);
+      }
+    }
 
-    const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
-      acc[zone.zoneName] = {
-        activeSides: [],
-        panelOrder: [],
-        lockedPanels: [],
-        zoneId: zone.zoneId,
-        zoneViewPortTarget: zone.viewPortCenter,
-        zoneViewPortPosition: zone.viewPortposition,
-        widgets: [],
-      };
-      return acc;
-    }, {});
+    GetZoneData();
+  }, []); // Removed `zones` from dependencies
 
-    setZonesData(formattedData);
-  }, [zones]);
 
   useEffect(() => {
     setZonesData((prev) => {
@@ -81,37 +97,47 @@ const RealTimeVisulization: React.FC = () => {
       };
     });
   }, [selectedZone]);
+  
+  useEffect(() => {
+
+  }, [floatingWidgets])
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     const data = event.dataTransfer.getData("text/plain");
-    if (!data || !selectedZone.zoneName) return;
-  
+    if (widgetSelect !== "") return;
+    if (!data || selectedZone.zoneName === "") return;
+
     const droppedData = JSON.parse(data);
     const canvasElement = document.getElementById("real-time-vis-canvas");
     if (!canvasElement) return;
-  
+
     const canvasRect = canvasElement.getBoundingClientRect();
     const relativeX = event.clientX - canvasRect.left;
     const relativeY = event.clientY - canvasRect.top;
-  
+
     const newObject = {
       ...droppedData,
       position: [relativeY, relativeX], // Y first because of top/left style
     };
-  
-    console.log("newObject: ", 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
     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
@@ -123,6 +149,7 @@ const RealTimeVisulization: React.FC = () => {
         width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
         left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
+
     >
       <div
         className="scene-container"