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

changed the draw mode ui visibility as per figma

This commit is contained in:
Poovizhi99 2025-05-13 09:43:03 +05:30
parent fb4a67f979
commit f16c57a65f
2 changed files with 85 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
app/src/modules/builder/groups/calculateAreaGroup.tsx
View File

@ -4,62 +4,102 @@ 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"
const CalculateAreaGroup = () => { const CalculateAreaGroup = () => {
const { roomsState } = useRoomsState(); const { roomsState } = useRoomsState();
const { toggleView } = useToggleView(); const { toggleView } = useToggleView();
const savedTheme: string | null = localStorage.getItem('theme');
return ( return (
<group name="roomArea" visible={toggleView}> <group name="roomArea" visible={toggleView}>
{roomsState.length > 0 && <group name="roomFills" visible={toggleView}>
roomsState.flat().map((room: any, index: number) => { {roomsState.length > 0 &&
if (!toggleView) return null; roomsState.flat().map((room: any, index: number) => {
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((p: any) => new THREE.Vector2(p.position.x, p.position.z));
// console.log('coords2D: ', coords2D);
let coords2D = coordinates.map((p: any) => [p.position.x, p.position.z]); if (!coords2D[0].equals(coords2D[coords2D.length - 1])) {
coords2D.push(coords2D[0]);
}
const first = coords2D[0]; const shape = new THREE.Shape(coords2D);
const last = coords2D[coords2D.length - 1]; const extrudeSettings = {
if (first[0] !== last[0] || first[1] !== last[1]) { depth: 0.01,
coords2D.push(first); bevelEnabled: false,
} };
const polygon = turf.polygon([coords2D]); const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const center2D = turf.center(polygon).geometry.coordinates; geometry.rotateX(Math.PI / 2);
const sumY = coordinates.reduce((sum: number, p: any) => sum + p.position.y, 0); const material = new THREE.MeshBasicMaterial({
const avgY = sumY / coordinates.length; color: savedTheme === "dark" ? "#d2baff" : '#6f42c1',
side: THREE.DoubleSide,
transparent: true,
opacity: 0.4,
depthWrite: false,
});
const area = computeArea(room, "rooms"); return (
const formattedArea = `${area.toFixed(2)} m²`; <group key={`roomFill-${index}`}>
<mesh geometry={geometry} material={material} position={[0, yPos, 0]} />
</group>
);
})}
</group>
{roomsState.length > 0 &&
roomsState.flat().map((room: any, index: number) => {
if (!toggleView) return null;
const coordinates = room.coordinates;
const htmlPosition: [number, number, number] = [ if (!coordinates || coordinates.length < 3) return null;
center2D[0],
avgY + CONSTANTS.zoneConfig.height,
center2D[1],
];
return ( let coords2D = coordinates.map((p: any) => [p.position.x, p.position.z]);
<Html
key={`${index}-${room.layer || index}`} const first = coords2D[0];
position={htmlPosition} const last = coords2D[coords2D.length - 1];
wrapperClass="distance-text-wrapper" if (first[0] !== last[0] || first[1] !== last[1]) {
className="distance-text" coords2D.push(first);
zIndexRange={[1, 0]} }
prepend
center const polygon = turf.polygon([coords2D]);
sprite const center2D = turf.center(polygon).geometry.coordinates;
>
<div className={`distance area line-${room.layer || index}`}> const sumY = coordinates.reduce((sum: number, p: any) => sum + p.position.y, 0);
Room ({formattedArea}) const avgY = sumY / coordinates.length;
</div>
</Html> const area = computeArea(room, "rooms");
); const formattedArea = `${area.toFixed(2)} m²`;
})}
</group> const htmlPosition: [number, number, number] = [
); center2D[0],
avgY + CONSTANTS.zoneConfig.height,
center2D[1],
];
return (
<Html
key={`${index}-${room.layer || index}`}
position={htmlPosition}
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
prepend
center
sprite
>
<div className={`distance area line-${room.layer || index}`}>
Room ({formattedArea})
</div>
</Html>
);
})}
</group>
);
} }
export default CalculateAreaGroup; export default CalculateAreaGroup;

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

@ -376,7 +376,6 @@ const ZoneGroup: React.FC = () => {
setZonePoints(updatedZonePoints); setZonePoints(updatedZonePoints);
addZoneToBackend(newZone); addZoneToBackend(newZone);
setStartPoint(null); setStartPoint(null);
setEndPoint(null); setEndPoint(null);
} }