Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Optimize AisleProperties component with useMemo for performance improvements

This commit is contained in:
Jerald-Golden-B 2025-05-29 16:58:22 +05:30
parent 9875239d54
commit 2f5b20e2d5
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/src/components/layout/sidebarRight/properties/AisleProperties.tsx
View File

@ -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}

10
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -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 = {
@ -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;