feat: add WallProperties component and update SideBarRight to support Wall tool mode

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -28,6 +28,7 @@ import ZoneProperties from "./properties/ZoneProperties";
 import EventProperties from "./properties/eventProperties/EventProperties";
 import VersionHistory from "./versionHisory/VersionHistory";
 import AisleProperties from "./properties/AisleProperties";
+import WallProperties from "./properties/eventProperties/WallProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
@@ -145,10 +146,15 @@ const SideBarRight: React.FC = () => {
             !selectedFloorItem && (
               <div className="sidebar-right-container">
                 <div className="sidebar-right-content-container">
-                  {toolMode === "Aisle" ? (
+                  {(() => {
-                    <AisleProperties />) : (
+                    if (toolMode === "Aisle") {
-                    <GlobalProperties />
+                      return <AisleProperties />;
-                  )}
+                    } else if (toolMode === "Wall") {
+                      return <WallProperties />;
+                    } else {
+                      return <GlobalProperties />;
+                    }
+                  })()}
                 </div>
               </div>
             )}

app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx

@@ -5,6 +5,7 @@ import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 // Texture Imports
 import wallTexture1 from "../../../../../assets/image/wallTextures/wallTexture.png";
 import defaultTexture from "../../../../../assets/image/wallTextures/defaultTexture.jpg";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 
 // Define Material type
 type Material = {
@@ -24,11 +25,7 @@ const defaultMaterial: Material = {
 };
 
 const WallProperties = () => {
-  const [wallProperties, setWallProperties] = useState({
+  const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();
-    height: "10",
-    thickness: "10",
-    length: "10",
-  });
 
   const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
 
@@ -50,14 +47,12 @@ const WallProperties = () => {
     });
   }, []);
 
-  const handleInputChange = (
+  const handleHeightChange = (newValue: string) => {
-    key: keyof typeof wallProperties,
+    setWallHeight(parseFloat(newValue));
-    newValue: string
+  };
-  ) => {
+
-    setWallProperties((prev) => ({
+  const handleThicknessChange = (newValue: string) => {
-      ...prev,
+    setWallThickness(parseFloat(newValue));
-      [key]: newValue,
-    }));
   };
 
   const handleAddMaterial = () => {
@@ -104,18 +99,13 @@ const WallProperties = () => {
       <div className="wall-properties">
         <InputWithDropDown
           label="Height"
-          value={wallProperties.height}
+          value={`${wallHeight}`}
-          onChange={(val) => handleInputChange("height", val)}
+          onChange={(val) => handleHeightChange(val)}
         />
         <InputWithDropDown
           label="Thickness"
-          value={wallProperties.thickness}
+          value={`${wallThickness}`}
-          onChange={(val) => handleInputChange("thickness", val)}
+          onChange={(val) => handleThicknessChange(val)}
-        />
-        <InputWithDropDown
-          label="Length"
-          value={wallProperties.length}
-          onChange={(val) => handleInputChange("length", val)}
         />
       </div>
 
@@ -130,9 +120,8 @@ const WallProperties = () => {
         <div className="material-preview">
           <div className="sides-wrapper">
             <div
-              className={`side-wrapper ${
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""
-                activeSide === "side1" ? "active" : ""
+                }`}
-              }`}
               onClick={() => setActiveSide("side1")}
             >
               <div className="label">Side 1</div>
@@ -147,9 +136,8 @@ const WallProperties = () => {
             </div>
 
             <div
-              className={`side-wrapper ${
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""
-                activeSide === "side2" ? "active" : ""
+                }`}
-              }`}
               onClick={() => setActiveSide("side2")}
             >
               <div className="label">Side 2</div>

app/src/modules/builder/wall/Instances/wallInstances.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useWallStore } from '../../../../store/builder/useWallStore'
 import WallInstance from './instance/wallInstance';
 import Line from '../../line/line';
 import Point from '../../point/point';
 import { useToggleView } from '../../../../store/builder/store';
-import { Geometry } from '@react-three/csg';
+import { Base, Geometry, Subtraction } from '@react-three/csg';
+import { BoxGeometry } from 'three';
 
 function WallInstances() {
     const { walls } = useWallStore();
     const { toggleView } = useToggleView();
+    const ref = useRef<any>();
 
     useEffect(() => {
         // console.log('walls: ', walls);
@@ -32,11 +34,24 @@ function WallInstances() {
 
     return (
         <>
-            <group name='Walls-Group'>
+            <group name='Walls-Group' ref={ref}>
-                <Geometry computeVertexNormals useGroups>
+                <Geometry computeVertexNormals>
+
                     {walls.map((wall) => (
                         <WallInstance key={wall.wallUuid} wall={wall} />
                     ))}
+
+                    {/* <Base geometry={new BoxGeometry()} >
+                        <meshStandardMaterial />
+                    </Base>
+
+                    <Geometry>
+                        <Subtraction scale={[5, 11, 5]} >
+                            <Geometry>
+                                <Base geometry={new BoxGeometry()} />
+                            </Geometry>
+                        </Subtraction>
+                    </Geometry> */}
                 </Geometry>
             </group>