zone camera and target updation added

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(false);
-    } else {
-      setEdit(true);
-    }
+    setEdit(!Edit);  // This will toggle the `Edit` state correctly
   }
-  useEffect(() => {
 
-    console.log(' selectedZone.zoneName: ', selectedZone.zoneName);
-  }, [selectedZone])
+  function handleZoneNameChange(newName: string) {
+    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 onChange={() => { }} header="Viewport Position" />
+      <Vector3Input
+        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;
+