refactor: Optimize AisleProperties component with useMemo for performance improvements

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { ArrowIcon } from "../../../icons/ExportCommonIcons";
 
@@ -90,6 +90,26 @@ const AisleProperties: React.FC = () => {
     }
   };
 
+  const dashLengthValue = useMemo(() => {
+    return dashLength.toString();
+  }, [aisleType, dashLength]);
+
+  const dotRadiusValue = useMemo(() => {
+    return dotRadius.toString();
+  }, [aisleType, dotRadius]);
+
+  const gapLengthValue = useMemo(() => {
+    return gapLength.toString();
+  }, [aisleType, gapLength]);
+
+  const aisleWidthValue = useMemo(() => {
+    return aisleWidth.toString();
+  }, [aisleType, aisleWidth]);
+
+  const aisleLengthValue = useMemo(() => {
+    return aisleLength.toString();
+  }, [aisleType, aisleLength]);
+
   const renderAdvancedProperties = () => {
     switch (aisleType) {
       case 'dashed-aisle':
@@ -99,7 +119,7 @@ const AisleProperties: React.FC = () => {
               <>
                 <InputWithDropDown
                   label="Dash Length"
-                  value={`${dashLength}`}
+                  value={`${dashLengthValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -107,7 +127,7 @@ const AisleProperties: React.FC = () => {
                 />
                 <InputWithDropDown
                   label="Gap Length"
-                  value={`${gapLength}`}
+                  value={`${gapLengthValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -124,7 +144,7 @@ const AisleProperties: React.FC = () => {
               <>
                 <InputWithDropDown
                   label="Dot Radius"
-                  value={`${dotRadius}`}
+                  value={`${dotRadiusValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -132,7 +152,7 @@ const AisleProperties: React.FC = () => {
                 />
                 <InputWithDropDown
                   label="Gap Length"
-                  value={`${gapLength}`}
+                  value={`${gapLengthValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -148,7 +168,7 @@ const AisleProperties: React.FC = () => {
               <>
                 <InputWithDropDown
                   label="Arrow Length"
-                  value={`${aisleLength}`}
+                  value={`${aisleLengthValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -156,7 +176,7 @@ const AisleProperties: React.FC = () => {
                 />
                 <InputWithDropDown
                   label="Gap Length"
-                  value={`${gapLength}`}
+                  value={`${gapLengthValue}`}
                   min={0.1}
                   step={0.1}
                   max={2}
@@ -179,7 +199,7 @@ const AisleProperties: React.FC = () => {
         {aisleType !== 'dotted-aisle' &&
           <InputWithDropDown
             label="Aisle Width"
-            value={`${aisleWidth}`}
+            value={`${aisleWidthValue}`}
             min={0.1}
             step={0.1}
             max={2}

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

@@ -184,7 +184,7 @@ const ZoneGroup: React.FC = () => {
     const target: [number, number, number] | null = calculateCenter(
       zone.points
     );
-    if (!target) return;
+    if (!target || zone.points.length < 4) return;
     const position = [target[0], 10, target[2]];
 
     const input = {
@@ -238,7 +238,7 @@ const ZoneGroup: React.FC = () => {
     const target: [number, number, number] | null = calculateCenter(
       zone.points
     );
-    if (!target) return;
+    if (!target || zone.points.length < 4) return;
     const position = [target[0], 10, target[2]];
 
     const input = {
@@ -553,7 +553,7 @@ const ZoneGroup: React.FC = () => {
                 const midpoint = new THREE.Vector3(
                   (point1.x + point2.x) / 2,
                   CONSTANTS.zoneConfig.height / 2 +
-                    (zone.layer - 1) * CONSTANTS.zoneConfig.height,
+                  (zone.layer - 1) * CONSTANTS.zoneConfig.height,
                   (point1.z + point2.z) / 2
                 );
 
@@ -583,12 +583,13 @@ const ZoneGroup: React.FC = () => {
 
                 // Ensure the polygon is closed
                 if (
-                  coords2D.length >= 3 &&
+                  coords2D.length >= 4 &&
                   (coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
                     coords2D[0][1] !== coords2D[coords2D.length - 1][1])
                 ) {
                   coords2D.push(coords2D[0]);
                 }
+                if (coords2D.length < 4) return null;
 
                 const polygon = turf.polygon([coords2D]);
                 const center2D = turf.center(polygon).geometry.coordinates;
@@ -648,12 +649,13 @@ const ZoneGroup: React.FC = () => {
           const coords2D = points3D.map((p: any) => [p[0], p[2]]);
 
           if (
-            coords2D.length < 3 ||
+            coords2D.length < 4 ||
             coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
             coords2D[0][1] !== coords2D[coords2D.length - 1][1]
           ) {
             coords2D.push(coords2D[0]);
           }
+          if (coords2D.length < 4) return null;
 
           const polygon = turf.polygon([coords2D]);
           const center2D = turf.center(polygon).geometry.coordinates;