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 { 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;
|
||||||
|
|
Loading…
Reference in New Issue