- {roomsState.length > 0 &&
- roomsState.flat().map((room: any, index: number) => {
- if (!toggleView) return null;
- const coordinates = room.coordinates;
+ return (
+
+
+ {roomsState.length > 0 &&
+ roomsState.flat().map((room: any, index: number) => {
+ 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 last = coords2D[coords2D.length - 1];
- if (first[0] !== last[0] || first[1] !== last[1]) {
- coords2D.push(first);
- }
+ const shape = new THREE.Shape(coords2D);
+ const extrudeSettings = {
+ depth: 0.01,
+ bevelEnabled: false,
+ };
- const polygon = turf.polygon([coords2D]);
- const center2D = turf.center(polygon).geometry.coordinates;
+ const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+ geometry.rotateX(Math.PI / 2);
- const sumY = coordinates.reduce((sum: number, p: any) => sum + p.position.y, 0);
- const avgY = sumY / coordinates.length;
+ const material = new THREE.MeshBasicMaterial({
+ color: savedTheme === "dark" ? "#d2baff" : '#6f42c1',
+ side: THREE.DoubleSide,
+ transparent: true,
+ opacity: 0.4,
+ depthWrite: false,
+ });
- const area = computeArea(room, "rooms");
- const formattedArea = `${area.toFixed(2)} m²`;
+ return (
+
+
+
+ );
+ })}
+
+ {roomsState.length > 0 &&
+ roomsState.flat().map((room: any, index: number) => {
+ if (!toggleView) return null;
+ const coordinates = room.coordinates;
- const htmlPosition: [number, number, number] = [
- center2D[0],
- avgY + CONSTANTS.zoneConfig.height,
- center2D[1],
- ];
+ if (!coordinates || coordinates.length < 3) return null;
- return (
-
-
- Room ({formattedArea})
-
-
- );
- })}
-
- );
+ let coords2D = coordinates.map((p: any) => [p.position.x, p.position.z]);
+
+ const first = coords2D[0];
+ const last = coords2D[coords2D.length - 1];
+ if (first[0] !== last[0] || first[1] !== last[1]) {
+ coords2D.push(first);
+ }
+
+ 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 avgY = sumY / coordinates.length;
+
+ const area = computeArea(room, "rooms");
+ const formattedArea = `${area.toFixed(2)} m²`;
+
+ const htmlPosition: [number, number, number] = [
+ center2D[0],
+ avgY + CONSTANTS.zoneConfig.height,
+ center2D[1],
+ ];
+
+ return (
+
+
+ Room ({formattedArea})
+
+
+ );
+ })}
+
+ );
}
export default CalculateAreaGroup;
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 642dacb..4d884dc 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -376,7 +376,6 @@ const ZoneGroup: React.FC = () => {
setZonePoints(updatedZonePoints);
addZoneToBackend(newZone);
-
setStartPoint(null);
setEndPoint(null);
}
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
index aa037e2..c2bb0d9 100644
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -65,7 +65,7 @@ const AssetPreview: React.FC