Refactor CalculateAreaGroup component for improved readability and consistency

This commit is contained in:
Vishnu 2025-05-13 18:56:12 +05:30
parent ca2b999de8
commit 33a7efceab
1 changed files with 24 additions and 15 deletions

View File

@ -1,15 +1,14 @@
import React, { useEffect } from 'react';
import { useRoomsState, useToggleView } from '../../../store/builder/store';
import { computeArea } from '../functions/computeArea';
import { Html } from '@react-three/drei';
import { useRoomsState, useToggleView } from "../../../store/builder/store";
import { computeArea } from "../functions/computeArea";
import { Html } from "@react-three/drei";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as turf from '@turf/turf';
import * as THREE from "three"
import * as turf from "@turf/turf";
import * as THREE from "three";
const CalculateAreaGroup = () => {
const { roomsState } = useRoomsState();
const { toggleView } = useToggleView();
const savedTheme: string | null = localStorage.getItem('theme');
const savedTheme: string | null = localStorage.getItem("theme");
return (
<group name="roomArea" visible={toggleView}>
@ -19,9 +18,9 @@ const CalculateAreaGroup = () => {
const coordinates = room.coordinates;
if (!coordinates || coordinates.length < 3) return null;
const yPos = (room.layer || 0) * CONSTANTS.zoneConfig.height;
const coords2D = coordinates.map((p: any) => new THREE.Vector2(p.position.x, p.position.z));
// console.log('coords2D: ', coords2D);
const coords2D = coordinates.map(
(p: any) => new THREE.Vector2(p.position.x, p.position.z)
);
if (!coords2D[0].equals(coords2D[coords2D.length - 1])) {
coords2D.push(coords2D[0]);
@ -37,7 +36,7 @@ const CalculateAreaGroup = () => {
geometry.rotateX(Math.PI / 2);
const material = new THREE.MeshBasicMaterial({
color: savedTheme === "dark" ? "#d2baff" : '#6f42c1',
color: savedTheme === "dark" ? "#d2baff" : "#6f42c1",
side: THREE.DoubleSide,
transparent: true,
opacity: 0.4,
@ -46,7 +45,11 @@ const CalculateAreaGroup = () => {
return (
<group key={`roomFill-${index}`}>
<mesh geometry={geometry} material={material} position={[0, yPos, 0]} />
<mesh
geometry={geometry}
material={material}
position={[0, 0.12, 0]}
/>
</group>
);
})}
@ -58,7 +61,10 @@ const CalculateAreaGroup = () => {
if (!coordinates || coordinates.length < 3) return null;
let coords2D = coordinates.map((p: any) => [p.position.x, p.position.z]);
let coords2D = coordinates.map((p: any) => [
p.position.x,
p.position.z,
]);
const first = coords2D[0];
const last = coords2D[coords2D.length - 1];
@ -69,7 +75,10 @@ const CalculateAreaGroup = () => {
const polygon = turf.polygon([coords2D]);
const center2D = turf.center(polygon).geometry.coordinates;
const sumY = coordinates.reduce((sum: number, p: any) => sum + p.position.y, 0);
const sumY = coordinates.reduce(
(sum: number, p: any) => sum + p.position.y,
0
);
const avgY = sumY / coordinates.length;
const area = computeArea(room, "rooms");
@ -100,6 +109,6 @@ const CalculateAreaGroup = () => {
})}
</group>
);
}
};
export default CalculateAreaGroup;