floating widgets data added

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

@@ -6,8 +6,10 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
-import { useDroppedObjectsStore, useZones } from "../../../store/store";
+
 import DroppedObjects from "./DroppedFloatingWidgets";
+import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useZones } from "../../../store/store";
 
 
 
@@ -81,36 +83,36 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  // const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-  //   console.log("Drop event fired! ✅");
-  //   event.preventDefault();
-
-  //   const data = event.dataTransfer.getData("text/plain");
-  //   if (!data) {
-  //     console.log("❌ No data received on drop!");
-  //     return;
-  //   }
-
-  //   try {
-  //     const droppedData = JSON.parse(data);
-  //     console.log("✅ Dropped Data:", droppedData);
-
-  //     console.log('droppedData: ', droppedData);
-  //     setDroppedObjects((prev) => [...prev, droppedData]); // ✅ Add to state
-  //     console.log(droppedObjects);
-  //   } catch (error) {
-  //     console.error("❌ Error parsing dropped data:", error);
-  //   }
-  // };
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-    const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
-
-    if (data) {
-      const droppedData = JSON.parse(data);
-      useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
+    const data = event.dataTransfer.getData("text/plain");
+    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);
   };
+  
 
   return (
     <div
@@ -133,9 +135,10 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-      
+
         <Scene />
       </div>
+      <DroppedObjects />
       {activeModule === "visualization" && (
         <>
           <DisplayZone