zone camera and target updation added

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

@@ -6,7 +6,8 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
-import { useZones } from "../../../store/store";
+import { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
 
 
 
@@ -37,14 +38,14 @@ const RealTimeVisulization: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-
+  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zones } = useZones()
 
   useEffect(() => {
     const data = Array.isArray(zones) ? zones : [];
-    console.log('data: ', data);
+
     const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
       acc[zone.zoneName] = {
         activeSides: [],
@@ -80,23 +81,37 @@ 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 canvas = document.querySelector(".scene-container");
-    if (canvas) {
-      // Extract relevant properties manually
-      const dragEvent = new DragEvent("drop", {
-        bubbles: true,
-        cancelable: true,
-        dataTransfer: event.dataTransfer, // Attach dataTransfer manually ✅
-      });
+    const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
 
-      console.log('dragEvent: ', dragEvent);
-      canvas.dispatchEvent(dragEvent);
+    if (data) {
+      const droppedData = JSON.parse(data);
+      useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
     }
   };
 
-
   return (
     <div
       ref={containerRef}
@@ -115,14 +130,10 @@ const RealTimeVisulization: React.FC = () => {
           width: "100%",
           borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
         }}
-        onDrop={handleDrop}
+        onDrop={(event) => handleDrop(event)}
+        onDragOver={(event) => event.preventDefault()}
       >
-        {/* {objects.map((obj) => (
-          <mesh key={obj.id} position={obj.position}>
-            <boxGeometry args={[1, 1, 1]} />
-            <meshStandardMaterial color="green" />
-          </mesh>
-        ))} */}
+      
         <Scene />
       </div>
       {activeModule === "visualization" && (
@@ -146,7 +157,7 @@ const RealTimeVisulization: React.FC = () => {
             hiddenPanels={hiddenPanels}
             selectedZone={selectedZone}
             setSelectedZone={setSelectedZone}
-            
+
           />
         </>
       )}