zone camera updation and builder zoneadatas

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 { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useZones } from "../../../store/store";
+
 
 
 type Side = "top" | "bottom" | "left" | "right";
@@ -17,7 +18,9 @@ type FormattedZoneData = Record<
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
-    zoneCentrePoint: number[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
     widgets: Widget[];
   }
 >;
@@ -28,12 +31,6 @@ type Widget = {
   panel: Side;
   data: any;
 };
-type Zone = {
-  zoneId: string;
-  zoneName: string;
-  points: number[][];
-  layer: number;
-};
 
 const RealTimeVisulization: React.FC = () => {
   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
@@ -43,45 +40,30 @@ const RealTimeVisulization: React.FC = () => {
 
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zones } = useZones()
 
   useEffect(() => {
-    async function GetZoneData() {
-      try {
-        const response: { data: Zone[] } | undefined = await getZonesApi(
-          "hexrfactory"
-        );
+    const data = Array.isArray(zones) ? zones : [];
+    console.log('data: ', data);
+    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;
+    }, {});
 
-        if (!response || !response.data) {
-          return;
-        }
-        const formattedData = response?.data?.reduce<FormattedZoneData>(
-          (acc, zone) => {
-            acc[zone.zoneName] = {
-              activeSides: [],
-              panelOrder: [],
-              lockedPanels: [],
-              zoneCentrePoint: [],
-              widgets: [],
-            };
-            return acc;
-          },
-          {}
-        );
-        setZonesData(formattedData);
-      } catch (error) { }
-    }
-    GetZoneData();
-  }, []);
-
-  useEffect(() => {
-
-    console.log('zonesData: ', zonesData);
-  }, [zonesData]);
+    setZonesData(formattedData);
+  }, [zones]);
 
   useEffect(() => {
     setZonesData((prev) => {
       if (!selectedZone) return prev;
-
       return {
         ...prev,
         [selectedZone.zoneName]: {
@@ -89,12 +71,32 @@ const RealTimeVisulization: React.FC = () => {
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
+          zoneId: selectedZone.zoneId || "",
+          zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
+          zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
           widgets: selectedZone.widgets || [],
         },
       };
     });
   }, [selectedZone]);
 
+  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 ✅
+      });
+
+      console.log('dragEvent: ', dragEvent);
+      canvas.dispatchEvent(dragEvent);
+    }
+  };
+
+
   return (
     <div
       ref={containerRef}
@@ -113,7 +115,14 @@ const RealTimeVisulization: React.FC = () => {
           width: "100%",
           borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
         }}
+        onDrop={handleDrop}
       >
+        {/* {objects.map((obj) => (
+          <mesh key={obj.id} position={obj.position}>
+            <boxGeometry args={[1, 1, 1]} />
+            <meshStandardMaterial color="green" />
+          </mesh>
+        ))} */}
         <Scene />
       </div>
       {activeModule === "visualization" && (
@@ -124,7 +133,7 @@ const RealTimeVisulization: React.FC = () => {
             setSelectedZone={setSelectedZone}
           />
 
-          {!isPlaying && (
+          {!isPlaying && selectedZone?.zoneName !== "" && (
             <AddButtons
               hiddenPanels={hiddenPanels}
               setHiddenPanels={setHiddenPanels}
@@ -134,6 +143,7 @@ const RealTimeVisulization: React.FC = () => {
           )}
 
           <Panel
+            hiddenPanels={hiddenPanels}
             selectedZone={selectedZone}
             setSelectedZone={setSelectedZone}
           />