feat: add calculateCenter function and viewport properties to ZoneGroup

app/src/modules/builder/groups/zoneGroup.tsx

@@ -128,6 +128,25 @@ const ZoneGroup: React.FC = () => {
         const userId = localStorage.getItem('userId');
         const organization = (email!.split("@")[1]).split(".")[0];
 
+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
         const input = {
             userId: userId,
             organization: organization,
@@ -135,6 +154,8 @@ const ZoneGroup: React.FC = () => {
                 zoneName: zone.zoneName,
                 zoneId: zone.zoneId,
                 points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                 layer: zone.layer
             }
         }
@@ -148,6 +169,25 @@ const ZoneGroup: React.FC = () => {
         const userId = localStorage.getItem('userId');
         const organization = (email!.split("@")[1]).split(".")[0];
 
+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
         const input = {
             userId: userId,
             organization: organization,
@@ -155,6 +195,8 @@ const ZoneGroup: React.FC = () => {
                 zoneName: zone.zoneName,
                 zoneId: zone.zoneId,
                 points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                 layer: zone.layer
             }
         }
@@ -162,6 +204,7 @@ const ZoneGroup: React.FC = () => {
         socket.emit('v2:zone:set', input);
     };
 
+
     const deleteZoneFromBackend = async (zoneId: string) => {
 
         const email = localStorage.getItem('email');