refactor: Update zone handling by integrating zoneStore in multiple components and removing unused zones state

app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx

@@ -20,7 +20,7 @@ function ZoneCreator() {
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
     const { zoneStore } = useSceneContext();
-    const { addZone, getZonePointById, getZoneByPoints } = zoneStore();
+    const { zones, addZone, getZonePointById, getZoneByPoints } = zoneStore();
     const drag = useRef(false);
     const isLeftMouseDown = useRef(false);
     const { selectedVersionStore } = useVersionContext();
@@ -32,6 +32,7 @@ function ZoneCreator() {
     const [isCreating, setIsCreating] = useState(false);
     const { zoneColor, zoneHeight, snappedPosition, snappedPoint, setSnappedPoint, setSnappedPosition } = useBuilderStore();
 
+
     useEffect(() => {
         const canvasElement = gl.domElement;
 
@@ -92,7 +93,7 @@ function ZoneCreator() {
             if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
                 const zone: Zone = {
                     zoneUuid: THREE.MathUtils.generateUUID(),
-                    zoneName: "Zone",
+                    zoneName: `Zone `,
                     points: tempPoints,
                     zoneColor,
                     zoneHeight,

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -17,6 +17,7 @@ import { useWidgetStore } from "../../store/useWidgetStore";
 import { useNavigate, useParams } from "react-router-dom";
 import { getUserData } from "../../functions/getUserData";
 import { useVersionContext } from "../builder/version/versionContext";
+import { useSceneContext } from "../scene/sceneContext";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -28,6 +29,7 @@ type FormattedZoneData = Record<
     points: [];
     lockedPanels: Side[];
     zoneUuid: string;
+    zoneName: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
     widgets: Widget[];
@@ -64,6 +66,9 @@ const RealTimeVisulization: React.FC = () => {
   const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
   const navigate = useNavigate();
+  const { zoneStore } = useSceneContext();
+  const { zones } = zoneStore();
+
 
   OuterClick({
     contextClassName: [
@@ -82,6 +87,7 @@ const RealTimeVisulization: React.FC = () => {
   useEffect(() => {
     if (!projectId || !selectedVersion) return;
     getZone2dData(organization, projectId, selectedVersion?.versionId || '').then((response) => {
+      // console.log('response: ', response);
       if (!response) return;
       // if (response.status === 401) {
       //   console.log("force logout");
@@ -94,19 +100,21 @@ const RealTimeVisulization: React.FC = () => {
       const formattedData = response.reduce<FormattedZoneData>(
         (acc, zone) => {
 
-          acc[zone.zoneName] = {
+          acc[zone.zoneUuid] = {
             activeSides: [],
             panelOrder: [],
             lockedPanels: [],
             points: zone.points,
             zoneUuid: zone.zoneUuid,
-            zoneViewPortTarget: zone.viewPortCenter,
-            zoneViewPortPosition: zone.viewPortposition,
+            zoneName: zone.zoneName,
+            zoneViewPortTarget: zone.viewPortTarget,
+            zoneViewPortPosition: zone.viewPortPosition,
             widgets: [],
           };
           return acc;
         }, {}
       );
+      // console.log('formattedData: ', formattedData);
       setZonesData(formattedData);
     })
 
@@ -119,13 +127,14 @@ const RealTimeVisulization: React.FC = () => {
       if (!selectedZone) return prev;
       return {
         ...prev,
-        [selectedZone.zoneName]: {
-          ...prev[selectedZone.zoneName], // Keep existing properties
+        [selectedZone.zoneUuid]: {
+          ...prev[selectedZone.zoneUuid], // Keep existing properties
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
           points: selectedZone.points || [],
           zoneUuid: selectedZone.zoneUuid || "",
+          zoneName: selectedZone.zoneName || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
           widgets: selectedZone.widgets || [],

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -34,6 +34,7 @@ interface DisplayZoneProps {
       points: [];
       widgets: Widget[];
       zoneUuid: string;
+      zoneName: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
     };
@@ -111,8 +112,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       setShowLeftArrow(isOverflowing && canScrollLeft);
       setShowRightArrow(isOverflowing && canScrollRight);
 
-      // console.log('canScrollRight: ', canScrollRight);
-      // console.log('isOverflowing: ', isOverflowing);
+      // 
+      // 
     }
   }, []);
 
@@ -180,9 +181,10 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       // setSelectedChartId(null);
 
       let response = await getSelect2dZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log('response2d: ', response);
+
+      // 
       let res = await getFloatingZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log("resFloating: ", res);
+      // 
 
       setFloatingWidget(res);
       // Set the selected zone in the store
@@ -201,8 +203,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         widgets: response.widgets || [],
         points: response.points || [],
         zoneUuid: zoneUuid,
-        zoneViewPortTarget: response.viewPortCenter || {},
-        zoneViewPortPosition: response.viewPortposition || {},
+        zoneViewPortTarget: response.viewPortTarget || [],
+        zoneViewPortPosition: response.viewPortPosition || [],
       });
     } catch (error) {
       echo.error("Failed to select zone");
@@ -238,20 +240,22 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       >
         {Object.keys(zonesData).length !== 0 ? (
           <>
-            {Object.keys(zonesData).map((zoneName, index) => (
-              <div
-                key={index}
-                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-                  }`}
-                onClick={() => {
+            {Object.values(zonesData).map((zone, index) => (
+              <>
+                { }
+                <div
+                  key={index}
+                  className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
+                    }`}
+                  onClick={() => {
 
-                  console.log('zonesData: ', zonesData);
-                  handleSelect2dZoneData(zonesData[zoneName]?.zoneUuid, zoneName)
-                }
-                }
-              >
-                {zoneName}
-              </div>
+                    handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
+                  }
+                  }
+                >
+                  {zone.zoneName}
+                </div>
+              </>
             ))}
           </>
         ) : (

app/src/modules/visualization/zone/zoneCameraTarget.tsx

@@ -10,6 +10,7 @@ import {
 
 export default function ZoneCentreTarget() {
   const { selectedZone } = useSelectedZoneStore();
+  // 
   const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
     null
   );