From f16c57a65fe702cedfa2316bcbaf9bc8733e859f Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Tue, 13 May 2025 09:43:03 +0530
Subject: [PATCH]  changed the draw mode ui visibility as per figma

---
 .../builder/groups/calculateAreaGroup.tsx     | 130 ++++++++++++------
 app/src/modules/builder/groups/zoneGroup.tsx  |   1 -
 2 files changed, 85 insertions(+), 46 deletions(-)

diff --git a/app/src/modules/builder/groups/calculateAreaGroup.tsx b/app/src/modules/builder/groups/calculateAreaGroup.tsx
index e50ae4b..4db1389 100644
--- a/app/src/modules/builder/groups/calculateAreaGroup.tsx
+++ b/app/src/modules/builder/groups/calculateAreaGroup.tsx
@@ -4,62 +4,102 @@ 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"
 
 const CalculateAreaGroup = () => {
-    const { roomsState } = useRoomsState();
-    const { toggleView } = useToggleView();
+  const { roomsState } = useRoomsState();
+  const { toggleView } = useToggleView();
+  const savedTheme: string | null = localStorage.getItem('theme');
 
-    return (
-        <group name="roomArea" visible={toggleView}>
-            {roomsState.length > 0 &&
-                roomsState.flat().map((room: any, index: number) => {
-                    if (!toggleView) return null;
-                    const coordinates = room.coordinates;
+  return (
+    <group name="roomArea" visible={toggleView}>
+      <group name="roomFills" visible={toggleView}>
+        {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 (
+              <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] = [
-                        center2D[0],
-                        avgY + CONSTANTS.zoneConfig.height,
-                        center2D[1],
-                    ];
+          if (!coordinates || coordinates.length < 3) return null;
 
-                    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>
-    );
+          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 (
+            <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;
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index e6c0f1a..ff3a4a3 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);
         }