socket added for 3d and floating Widget

app/src/store/useDroppedObjectsStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import { useSocketStore } from "./store";
 
 type DroppedObject = {
   className: string;
@@ -36,7 +37,7 @@ type DroppedObjectsState = {
       bottom: number | "auto";
     }
   ) => void;
-  deleteObject: (zoneName: string, id: string, index: number) => void; // Add this line
+  deleteObject: (zoneName: string, id: string) => void; // Add this line
   duplicateObject: (zoneName: string, index: number) => void; // Add this line
 };
 
@@ -77,10 +78,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
       };
     }),
 
-  deleteObject: (zoneName: string, id: string, index: number) =>
+  deleteObject: (zoneName: string, id: string) =>
     set((state) => {
       const zone = state.zones[zoneName];
-      console.log("zone: ", zone);
+
       if (!zone) return state;
       return {
         zones: {
@@ -94,6 +95,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
   duplicateObject: async (zoneName: string, index: number) => {
     const state = useDroppedObjectsStore.getState(); // Get the current state
     const zone = state.zones[zoneName];
+    let socketState = useSocketStore.getState();
+    let visualizationSocket = socketState.visualizationSocket;
 
     if (!zone) return;
 
@@ -120,8 +123,28 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
       },
     };
 
-    console.log("zone: ", zone.zoneId);
-    console.log("duplicatedObject: ", duplicatedObject);
+    let duplicateFloatingWidget = {
+      organization: organization,
+      widget: duplicatedObject,
+      zoneId: zone.zoneId,
+      index: index,
+    };
+
+    if (visualizationSocket) {
+      visualizationSocket.emit(
+        "v2:viz-float:addDuplicate",
+        duplicateFloatingWidget
+      );
+    }
+    useDroppedObjectsStore.setState((state) => ({
+      zones: {
+        ...state.zones,
+        [zoneName]: {
+          ...state.zones[zoneName],
+          objects: [...state.zones[zoneName].objects, duplicatedObject], // Append duplicated object
+        },
+      },
+    }));
 
     // Make async API call outside of Zustand set function
     // let response = await addingFloatingWidgets(
@@ -132,15 +155,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
 
     // if (response.message === "FloatWidget created successfully") {
     // Update the state inside `set`
-    useDroppedObjectsStore.setState((state) => ({
-      zones: {
-        ...state.zones,
-        [zoneName]: {
-          ...state.zones[zoneName],
-          objects: [...state.zones[zoneName].objects, duplicatedObject], // Append duplicated object
-        },
-      },
-    }));
+
     // }
   },
 }));

app/src/store/useZone3DWidgetStore.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+type WidgetData = {
+    id: string;
+    type: string;
+    position: [number, number, number];
+};
+
+type ZoneWidgetStore = {
+    zoneWidgetData: Record<string, WidgetData[]>;
+    setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
+    addWidget: (zoneId: string, widget: WidgetData) => void;
+};
+
+export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
+    zoneWidgetData: {},
+    
+    setZoneWidgetData: (zoneId, widgets) =>
+        set((state) => ({
+            zoneWidgetData: {
+                ...state.zoneWidgetData,
+                [zoneId]: widgets,
+            },
+        })),
+    
+    addWidget: (zoneId, widget) =>
+        set((state) => ({
+            zoneWidgetData: {
+                ...state.zoneWidgetData,
+                [zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
+            },
+        })),
+}));