3d widget api added and template frontend and backend completed

app/src/store/useDroppedObjectsStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
 
 type DroppedObject = {
   className: string;
@@ -35,6 +36,8 @@ type DroppedObjectsState = {
       bottom: number | "auto";
     }
   ) => void;
+  deleteObject: (zoneName: string, index: number) => void; // Add this line
+  duplicateObject: (zoneName: string, index: number) => void; // Add this line
 };
 
 export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
@@ -73,6 +76,72 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
         },
       };
     }),
+
+  deleteObject: (zoneName: string, index: number) =>
+    set((state) => {
+      const zone = state.zones[zoneName];
+      if (!zone) return state;
+      return {
+        zones: {
+          [zoneName]: {
+            ...zone,
+            objects: zone.objects.filter((_, i) => i !== index), // Remove object at the given index
+          },
+        },
+      };
+    }),
+  duplicateObject: async (zoneName: string, index: number) => {
+    const state = useDroppedObjectsStore.getState(); // Get the current state
+    const zone = state.zones[zoneName];
+
+    if (!zone) return;
+
+    const originalObject = zone.objects[index];
+    if (!originalObject) return;
+
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+
+    // Create a shallow copy of the object with a unique ID and slightly adjusted position
+    const duplicatedObject: DroppedObject = {
+      ...originalObject,
+      id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
+      position: {
+        ...originalObject.position,
+        top:
+          typeof originalObject.position.top === "number"
+            ? originalObject.position.top + 20 // Offset vertically
+            : originalObject.position.top,
+        left:
+          typeof originalObject.position.left === "number"
+            ? originalObject.position.left + 20 // Offset horizontally
+            : originalObject.position.left,
+      },
+    };
+
+    console.log("zone: ", zone.zoneId);
+    console.log("duplicatedObject: ", duplicatedObject);
+
+    // Make async API call outside of Zustand set function
+    // let response = await addingFloatingWidgets(
+    //   zone.zoneId,
+    //   organization,
+    //   duplicatedObject
+    // );
+
+    // 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
+        },
+      },
+    }));
+    // }
+  },
 }));
 
 export interface DroppedObjects {
@@ -91,4 +160,12 @@ export interface Zones {
   objects: DroppedObject[];
 }
 
+export const use3DWidget = create<any>((set: any) => ({
+  widgets3D: [],
+  setWidgets3D: (x: any) => set({ widgets3D: x }),
+}));
 
+export const useFloatingWidget = create<any>((set: any) => ({
+  floatingWidget: [],
+  setFloatingWidget: (x: any) => set({ floatingWidget: x }),
+}));