Merge conflicts remote-tracking branch 'origin/main' into ui

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

@@ -6,7 +6,9 @@ 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 { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
+
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -16,7 +18,9 @@ type FormattedZoneData = Record<
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
-    zoneCentrePoint: number[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
     widgets: Widget[];
   }
 >;
@@ -27,137 +31,39 @@ 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[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-
-  const [zonesData, setZonesData] = useState<{
-    [key: string]: {
-      activeSides: Side[];
-      panelOrder: Side[];
-      lockedPanels: Side[];
-      widgets: Widget[];
-    };
-  }>({
-    "Manufacturing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Assembly unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Packing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Warehouse: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Inventory: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 1": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 2": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 3": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 4": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 5": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 6": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Inventory 7": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-  });
+  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
+  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 : [];
 
-        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();
-  }, []);
+    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;
+    }, {});
 
-  useEffect(() => {}, [zonesData]);
+    setZonesData(formattedData);
+  }, [zones]);
 
   useEffect(() => {
     setZonesData((prev) => {
       if (!selectedZone) return prev;
-
       return {
         ...prev,
         [selectedZone.zoneName]: {
@@ -165,12 +71,46 @@ 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>) => {
+  //   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
+    }
+  };
+
   return (
     <div
       ref={containerRef}
@@ -190,7 +130,10 @@ const RealTimeVisulization: React.FC = () => {
           borderRadius:
             isPlaying || activeModule !== "visualization" ? "" : "6px",
         }}
+        onDrop={(event) => handleDrop(event)}
+        onDragOver={(event) => event.preventDefault()}
       >
+      
         <Scene />
       </div>
       {activeModule === "visualization" && (
@@ -201,7 +144,7 @@ const RealTimeVisulization: React.FC = () => {
             setSelectedZone={setSelectedZone}
           />
 
-          {!isPlaying && (
+          {!isPlaying && selectedZone?.zoneName !== "" && (
             <AddButtons
               hiddenPanels={hiddenPanels}
               setHiddenPanels={setHiddenPanels}