floating widgets data added

app/src/store/store.ts

@@ -2,6 +2,7 @@ import * as THREE from "three";
 import * as Types from "../types/world/worldTypes";
 import { create } from "zustand";
 import { io } from "socket.io-client";
+import { ComponentType, SVGProps } from "react";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
   socket: null,
@@ -428,30 +429,14 @@ export const usezonePosition = create<any>((set: any) => ({
   setZonePosition: (x: any) => set({ zonePosition: x }),
 }));
 
-
 interface EditPositionState {
-    Edit: boolean;
-    setEdit: (value: boolean) => void;
-  }
-  
-  export const useEditPosition = create<EditPositionState>((set) => ({
-    Edit: false,
-    setEdit: (value) => set({ Edit: value }), // Properly updating the state
-  }));
+  Edit: boolean;
+  setEdit: (value: boolean) => void;
+}
+
+export const useEditPosition = create<EditPositionState>((set) => ({
+  Edit: false,
+  setEdit: (value) => set({ Edit: value }), // Properly updating the state
+}));
+
 
-  interface DroppedObject {
-    header: string;
-    value: string;
-    per: string;
-    className: string;
-  }
-  
-  interface DroppedObjectsState {
-    objects: DroppedObject[];
-    addObject: (obj: DroppedObject) => void;
-  }
-  
-  export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
-    objects: [],
-    addObject: (obj) => set((state) => ({ objects: [...state.objects, obj] })),
-  }));

app/src/store/useDroppedObjectsStore.ts

@@ -0,0 +1,78 @@
+import { create } from "zustand";
+
+type DroppedObject = {
+  className: string;
+  position: [number, number];
+  value?: number;
+  per?: string;
+  header?: string;
+};
+
+type Zone = {
+  zoneName: string;
+  zoneId: string;
+  objects: DroppedObject[];
+};
+
+type DroppedObjectsState = {
+  zones: Record<string, Zone>;
+  setZone: (zoneName: string, zoneId: string) => void;
+  addObject: (zoneName: string, newObject: DroppedObject) => void;
+  updateObjectPosition: (
+    zoneName: string,
+    index: number,
+    newPosition: [number, number]
+  ) => void;
+};
+
+export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
+  zones: {},
+
+  setZone: (zoneName: string, zoneId: string) =>
+    set((state) => ({
+      zones: {
+        [zoneName]: state.zones[zoneName] || { zoneName, zoneId, objects: [] }, // Keep existing zone if it exists
+      },
+    })),
+
+  addObject: (zoneName: string, newObject: DroppedObject) =>
+    set((state) => ({
+      zones: {
+        ...state.zones,
+        [zoneName]: {
+          ...state.zones[zoneName],
+          objects: [...state.zones[zoneName].objects, newObject], // Append new object
+        },
+      },
+    })),
+
+  updateObjectPosition: (zoneName, index, newPosition) =>
+    set((state) => {
+      const zone = state.zones[zoneName];
+      if (!zone) return state;
+      return {
+        zones: {
+          [zoneName]: {
+            ...zone,
+            objects: zone.objects.map((obj, i) =>
+              i === index ? { ...obj, position: newPosition } : obj
+            ),
+          },
+        },
+      };
+    }),
+}));
+
+export interface DroppedObjects {
+    header: string;
+    value: string | number; // ✅ Allows both numbers and formatted strings
+    per: string;
+    className: string;
+    position: [number, number]; // ✅ Ensures position is a tuple
+  }
+  
+  export interface Zones {
+    zoneName: string;
+    zoneId: string;
+    objects: DroppedObject[];
+  }