Refactor CalculateAreaGroup component for improved readability and consistency
This commit is contained in:
parent
ca2b999de8
commit
33a7efceab
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue