zone camera and target updation added

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -37,8 +37,7 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              subModule === "properties" ? "active" : ""
               }`}
             onClick={() => setSubModule("properties")}
           >
@@ -84,6 +83,17 @@ const SideBarRight: React.FC = () => {
             </div>
           </div>
         )}
+      {toggleUI &&
+        subModule === "zoneProperties" &&
+        activeModule === "builder" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              {/* <GlobalProperties /> */}
+              <ZoneProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
       {/* simulation */}
 
       {toggleUI && activeModule === "simulation" && (

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -1,59 +1,54 @@
 import React from "react";
 import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";
 
 interface PositionInputProps {
-  onChange: (value: string) => void; // Callback for value change
+  onChange: (value: [number, number, number]) => void; // Callback for value change
   header: string;
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value: [number, number, number] | null;
+  disabled?: boolean; // To enable/disable editing
 }
 
 const Vector3Input: React.FC<PositionInputProps> = ({
   onChange,
   header,
   placeholder = "Enter value", // Default placeholder
-  type = "number", // Default type
+  type = "string", // Default type
+  value,
+  disabled = false, // Default to disabled
 }) => {
+
+  const handleChange = (index: number, newValue: string) => {
+    if (!value) return;
+    const updatedValue = [...value] as [number, number, number];
+    updatedValue[index] = parseFloat(newValue) || 0;
+    console.log('updatedValue: ', updatedValue);
+    onChange(updatedValue);
+  };
+
+
+
   return (
     <div className="custom-input-container">
       <div className="header">
-        {header}{" "}
+        {header}
-        <div className="eyedrop-button">
-          <EyeDroperIcon isActive={false} />
-        </div>
       </div>
       <div className="inputs-container">
-        <div className="input-container">
+        {["X", "Y", "Z"].map((axis, i) => (
-          <div className="custom-input-label">X : </div>
+          <div className="input-container" key={axis}>
+            <div className="custom-input-label">{axis}:</div>
             <input
               className="custom-input-field"
               type={type}
-            onChange={(e) => onChange(e.target.value)}
+              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
+              // onChange={(e) => handleChange(i, e.target.value)}
               placeholder={placeholder}
-            disabled
+              disabled={disabled}
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Y : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-            min={0}
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Z : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
             />
           </div>
+        ))}
       </div>
     </div>
   );

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -2,37 +2,64 @@ import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
+import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
 
 const ZoneProperties: React.FC = () => {
-  const [Edit, setEdit] = useState(false);
+  const { Edit, setEdit } = useEditPosition();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zonePosition, setZonePosition } = usezonePosition();
+  const { zoneTarget, setZoneTarget } = usezoneTarget();
+
+  useEffect(() => {
+    setZonePosition(selectedZone.zoneViewPortPosition)
+    setZoneTarget(selectedZone.zoneViewPortTarget)
+  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
 
   function handleSetView() {
+    console.log("setApi");
+
+    console.log('zoneTarget: ', zoneTarget);
+    console.log('zonePosition: ', zonePosition);
     setEdit(false);
   }
 
   function handleEditView() {
-    if (Edit) {
+    setEdit(!Edit);  // This will toggle the `Edit` state correctly
-      setEdit(false);
-    } else {
-      setEdit(true);
   }
-  }
-  useEffect(() => {
 
-    console.log(' selectedZone.zoneName: ', selectedZone.zoneName);
+  function handleZoneNameChange(newName: string) {
-  }, [selectedZone])
+    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  }
+
+  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
+  }
+
+  useEffect(() => {
+    console.log("Updated selectedZone: ", selectedZone);
+  }, [selectedZone]);
 
   return (
     <div className="zone-properties-container">
       <div className="header">
-        <RenameInput value={selectedZone.zoneName ? selectedZone.zoneName : ""} />
+        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
         <div className="button" onClick={handleEditView}>
           {Edit ? "Cancel" : "Edit"}
         </div>
       </div>
-      <Vector3Input onChange={() => { }} header="Viewport Target" />
+      <Vector3Input
-      <Vector3Input onChange={() => { }} header="Viewport Position" />
+        onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
+        header="Viewport Target"
+        value={zoneTarget as [number, number, number]}
+        disabled={!Edit}
+      />
+      <Vector3Input
+        onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
+        header="Viewport Position"
+        value={zonePosition as [number, number, number]}
+        disabled={!Edit}
+      />
+
       {Edit && (
         <div className="button-save" onClick={handleSetView}>
           Set View
@@ -43,3 +70,4 @@ const ZoneProperties: React.FC = () => {
 };
 
 export default ZoneProperties;
+

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

@@ -129,8 +129,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
       const email = localStorage.getItem('email')
       const organization = (email!.split("@")[1]).split(".")[0];
-      let response = panelData(organization, selectedZone.zoneId, newActiveSides)
+      // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
-      console.log('response: ', response);
+      // console.log('response: ', response);
 
       // Update the selectedZone state
       console.log("updatedZone: ", updatedZone);
@@ -140,7 +140,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
   return (
     <>
-
       <div>
         {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
           <div key={side} className={`side-button-container ${side}`}>

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

@@ -1,59 +1,89 @@
-import { useState } from "react";
+// import { useState } from "react";
-import { useThree } from "@react-three/fiber";
+// import { useThree } from "@react-three/fiber";
-import * as THREE from "three";
+// import * as THREE from "three";
 
-const DroppedObjects = () => {
-  const { camera } = useThree(); // Now inside Canvas ✅
-  const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
 
-  // Function to convert drop event into 3D position
-  const handleDrop = (event: DragEvent) => {
-    event.preventDefault();
 
-    const data = event.dataTransfer?.getData("text/plain");
+// const DroppedObjects = () => {
-    if (!data) return;
+//   const { camera } = useThree(); // Now inside Canvas ✅
+//   const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
 
-    try {
+//   // Function to convert drop event into 3D position
-      const cardData = JSON.parse(data);
+//   const handleDrop = (event: DragEvent) => {
-      if (!cardData.className.includes("floating total-card")) {
+//     event.preventDefault();
-        console.log("Drop rejected: Incorrect element.");
-        return;
-      }
 
-      // Convert 2D drop position to 3D world coordinates
+//     const data = event.dataTransfer?.getData("text/plain");
-      const x = (event.clientX / window.innerWidth) * 2 - 1;
+//     if (!data) return;
-      const y = -(event.clientY / window.innerHeight) * 2 + 1;
 
-      // Raycasting to determine the drop position in 3D
+//     try {
-      const raycaster = new THREE.Raycaster();
+//       const cardData = JSON.parse(data);
-      const mouseVector = new THREE.Vector2(x, y);
+//       if (!cardData.className.includes("floating total-card")) {
-      raycaster.setFromCamera(mouseVector, camera);
+//         console.log("Drop rejected: Incorrect element.");
+//         return;
+//       }
 
-      // Intersect with a ground plane (assume y = 0)
+//       // Convert 2D drop position to 3D world coordinates
-      const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+//       const x = (event.clientX / window.innerWidth) * 2 - 1;
-      const intersection = new THREE.Vector3();
+//       const y = -(event.clientY / window.innerHeight) * 2 + 1;
-      raycaster.ray.intersectPlane(groundPlane, intersection);
 
-      console.log("Spawn Object at:", intersection);
+//       // Raycasting to determine the drop position in 3D
+//       const raycaster = new THREE.Raycaster();
+//       const mouseVector = new THREE.Vector2(x, y);
+//       raycaster.setFromCamera(mouseVector, camera);
 
-      // Add the dropped object to the scene state
+//       // Intersect with a ground plane (assume y = 0)
-      setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+//       const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
-    } catch (error) {
+//       const intersection = new THREE.Vector3();
-      console.error("Invalid data:", error);
+//       raycaster.ray.intersectPlane(groundPlane, intersection);
-    }
+
-  };
+//       console.log("Spawn Object at:", intersection);
+
+//       // Add the dropped object to the scene state
+//       setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+//     } catch (error) {
+//       console.error("Invalid data:", error);
+//     }
+//   };
+
+//   return (
+//     <group>
+//       {/* Render dropped objects as green boxes */}
+//       {objects.map((obj) => (
+//         <mesh key={obj.id} position={obj.position}>
+//           <boxGeometry args={[1, 1, 1]} />
+//           <meshStandardMaterial color="green" />
+//         </mesh>
+//       ))}
+//     </group>
+//   );
+// };
+
+import { Html } from "@react-three/drei";
+import { useDroppedObjectsStore } from "../../../store/store";
+
+
+const DroppedObjects: React.FC = () => {
+  const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
+  console.log('objects: ', objects);
 
   return (
-    <group>
+    <>
-      {/* Render dropped objects as green boxes */}
+      {objects.map((obj, index) => (
-      {objects.map((obj) => (
+        <group key={index} position={[Math.random() * 5, Math.random() * 5, 0]}>
-        <mesh key={obj.id} position={obj.position}>
+          <Html wrapperClass={obj.className}>
-          <boxGeometry args={[1, 1, 1]} />
+            <div style={{ padding: "10px", background: "#fff", borderRadius: "6px" }}>
-          <meshStandardMaterial color="green" />
+              <div className="header">{obj.header}</div>
-        </mesh>
+              <div className="data-values">
-      ))}
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+          </Html>
         </group>
+      ))}
+    </>
   );
 };
 
 export default DroppedObjects;
+

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 { useZones } from "../../../store/store";
+import { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
 
 
 
@@ -37,14 +38,14 @@ const RealTimeVisulization: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-
+  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zones } = useZones()
 
   useEffect(() => {
     const data = Array.isArray(zones) ? zones : [];
-    console.log('data: ', data);
+
     const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
       acc[zone.zoneName] = {
         activeSides: [],
@@ -80,23 +81,37 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [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 canvas = document.querySelector(".scene-container");
+    const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
-    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);
+    if (data) {
-      canvas.dispatchEvent(dragEvent);
+      const droppedData = JSON.parse(data);
+      useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
     }
   };
 
-
   return (
     <div
       ref={containerRef}
@@ -115,14 +130,10 @@ const RealTimeVisulization: React.FC = () => {
           width: "100%",
           borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
         }}
-        onDrop={handleDrop}
+        onDrop={(event) => handleDrop(event)}
+        onDragOver={(event) => event.preventDefault()}
       >
-        {/* {objects.map((obj) => (
+      
-          <mesh key={obj.id} position={obj.position}>
-            <boxGeometry args={[1, 1, 1]} />
-            <meshStandardMaterial color="green" />
-          </mesh>
-        ))} */}
         <Scene />
       </div>
       {activeModule === "visualization" && (

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

@@ -1,13 +1,17 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useThree } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
 
 export default function ZoneCentreTarget() {
     const { selectedZone, setSelectedZone } = useSelectedZoneStore();
     const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
     const sphereRef = useRef<THREE.Mesh>(null);
     const { camera, controls }: any = useThree();
+    const { zonePosition, setZonePosition } = usezonePosition();
+    const { zoneTarget, setZoneTarget } = usezoneTarget();
+    const { Edit, setEdit } = useEditPosition();
 
 
     useEffect(() => {
@@ -89,7 +93,14 @@ export default function ZoneCentreTarget() {
                 }
             }
         }
-    }, [selectedZone.zoneViewPortTarget, camera, controls]);
+    }, [selectedZone.zoneViewPortTarget]);
+
+    useFrame(() => {
+        if (Edit) {
+            setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
+            setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
+        }
+    })
     return (
         <> </>
     );

app/src/components/ui/inputs/RenameInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 interface RenameInputProps {
   value: string;
@@ -9,6 +9,9 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [text, setText] = useState(value);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    setText(value); // Ensure state updates when parent value changes
+  }, [value]);
 
   const handleDoubleClick = () => {
     setIsEditing(true);

app/src/components/ui/list/List.tsx

@@ -12,17 +12,14 @@ interface ListProps {
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
-  console.log("items: ", items);
+  const { setSelectedZone } = useSelectedZoneStore();
-
+  const { setSubModule } = useSubModuleStore();
-  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { subModule, setSubModule } = useSubModuleStore();
 
   async function handleSelectZone(id: string) {
     setSubModule("zoneProperties")
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
     let response = await getZoneData(id, organization)
-    console.log('response: ', response);
     setSelectedZone({
       zoneName: response?.zoneName,
       activeSides: response?.activeSides || [],

app/src/components/ui/realTimeVis/floating/SimpleCard.tsx

@@ -19,8 +19,11 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
       header,
       value,
       per,
-      className: event.currentTarget.className, // Store the class name
+      className: event.currentTarget.className, 
     });
+  
+    console.log("Dragging Data:", cardData); // ✅ Debugging log
+  
     event.dataTransfer.setData("text/plain", cardData);
   };
 

app/src/modules/scene/scene.tsx

@@ -20,6 +20,7 @@ import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
 import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets";
+
 // import Simulation from "./simulationtemp/simulation";
 
 export default function Scene() {

app/src/services/realTimeVisulization/zoneData/panel.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_BACKEND_URL}`;
 
 type Side = "top" | "bottom" | "left" | "right";
 

app/src/store/store.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import * as Types from '../types/world/worldTypes';
+import * as Types from "../types/world/worldTypes";
 import { create } from "zustand";
 import { io } from "socket.io-client";
 
@@ -11,10 +11,13 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
       return;
     }
 
-        const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`, {
+    const socket = io(
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
+      {
         reconnection: false,
-            auth: { email }
+        auth: { email },
-        });
+      }
+    );
 
     set({ socket });
   },
@@ -23,7 +26,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
       state.socket?.disconnect();
       return { socket: null };
     });
-    }
+  },
 }));
 
 export const useOrganization = create<any>((set: any) => ({
@@ -126,9 +129,7 @@ export const useFloorItems = create<any>((set: any) => ({
   setFloorItems: (callback: any) =>
     set((state: any) => ({
       floorItems:
-                typeof callback === "function"
+        typeof callback === "function" ? callback(state.floorItems) : callback,
-                    ? callback(state.floorItems)
-                    : callback,
     })),
 }));
 
@@ -137,9 +138,7 @@ export const useWallItems = create<any>((set: any) => ({
   setWallItems: (callback: any) =>
     set((state: any) => ({
       wallItems:
-                typeof callback === "function"
+        typeof callback === "function" ? callback(state.wallItems) : callback,
-                    ? callback(state.wallItems)
-                    : callback,
     })),
 }));
 
@@ -180,7 +179,8 @@ export const useShadows = create<any>((set: any) => ({
 
 export const useSunPosition = create<any>((set: any) => ({
   sunPosition: { x: undefined, y: undefined, z: undefined },
-    setSunPosition: (newSuntPosition: any) => set({ sunPosition: newSuntPosition }),
+  setSunPosition: (newSuntPosition: any) =>
+    set({ sunPosition: newSuntPosition }),
 }));
 
 export const useRemoveLayer = create<any>((set: any) => ({
@@ -216,7 +216,7 @@ export const useActiveTool = create<any>((set: any) => ({
 export const use2DUndoRedo = create<any>((set: any) => ({
   is2DUndoRedo: null,
   set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
-}))
+}));
 
 export const useElevation = create<any>((set: any) => ({
   elevation: 45,
@@ -245,7 +245,8 @@ export const useUserName = create<any>((set: any) => ({
 
 export const useObjectPosition = create<any>((set: any) => ({
   objectPosition: { x: undefined, y: undefined, z: undefined },
-    setObjectPosition: (newObjectPosition: any) => set({ objectPosition: newObjectPosition }),
+  setObjectPosition: (newObjectPosition: any) =>
+    set({ objectPosition: newObjectPosition }),
 }));
 
 export const useObjectScale = create<any>((set: any) => ({
@@ -255,7 +256,8 @@ export const useObjectScale = create<any>((set: any) => ({
 
 export const useObjectRotation = create<any>((set: any) => ({
   objectRotation: { x: undefined, y: undefined, z: undefined },
-    setObjectRotation: (newObjectRotation: any) => set({ objectRotation: newObjectRotation }),
+  setObjectRotation: (newObjectRotation: any) =>
+    set({ objectRotation: newObjectRotation }),
 }));
 
 export const useDrieTemp = create<any>((set: any) => ({
@@ -271,11 +273,21 @@ export const useActiveUsers = create<any>((set: any) => ({
 export const useDrieUIValue = create<any>((set: any) => ({
   drieUIValue: { touch: null, temperature: null, humidity: null },
 
-    setDrieUIValue: (x: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+  setDrieUIValue: (x: any) =>
+    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
 
-    setTouch: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, touch: value } })),
+  setTouch: (value: any) =>
-    setTemperature: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, temperature: value } })),
+    set((state: any) => ({
-    setHumidity: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, humidity: value } })),
+      drieUIValue: { ...state.drieUIValue, touch: value },
+    })),
+  setTemperature: (value: any) =>
+    set((state: any) => ({
+      drieUIValue: { ...state.drieUIValue, temperature: value },
+    })),
+  setHumidity: (value: any) =>
+    set((state: any) => ({
+      drieUIValue: { ...state.drieUIValue, humidity: value },
+    })),
 }));
 
 export const useDrawMaterialPath = create<any>((set: any) => ({
@@ -300,7 +312,16 @@ interface Path {
     uuid: string;
     position: [number, number, number];
     rotation: [number, number, number];
-        actions: { uuid: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
+    actions:
+      | {
+          uuid: string;
+          type: string;
+          material: string;
+          delay: number | string;
+          spawnInterval: number | string;
+          isUsed: boolean;
+        }[]
+      | [];
     triggers: { uuid: string; type: string; isUsed: boolean }[] | [];
   }[];
   pathPosition: [number, number, number];
@@ -318,7 +339,6 @@ export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
   setSimulationPaths: (paths) => set({ simulationPaths: paths }),
 }));
 
-
 // interface Point {
 //     uuid: string;
 //     position: [number, number, number];
@@ -363,7 +383,6 @@ export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
 //     setSimulationPaths: (paths) => set({ simulationPaths: paths }),
 // }));
 
-
 export const useConnections = create<Types.ConnectionStore>((set) => ({
   connections: [],
 
@@ -400,3 +419,39 @@ export const useStartSimulation = create<any>((set: any) => ({
   startSimulation: false,
   setStartSimulation: (x: any) => set({ startSimulation: x }),
 }));
+export const usezoneTarget = create<any>((set: any) => ({
+  zoneTarget: [],
+  setZoneTarget: (x: any) => set({ zoneTarget: x }),
+}));
+export const usezonePosition = create<any>((set: any) => ({
+  zonePosition: [],
+  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
+  }));
+
+  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] })),
+  }));