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