diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 44199bc..ddb27a0 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/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 && (
- {toolMode === "Aisle" ? ( - ) : ( - - )} + {(() => { + if (toolMode === "Aisle") { + return ; + } else if (toolMode === "Wall") { + return ; + } else { + return ; + } + })()}
)} diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx index ee1d87b..a3e09e9 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx +++ b/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({ - height: "10", - thickness: "10", - length: "10", - }); + const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore(); const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1"); @@ -50,14 +47,12 @@ const WallProperties = () => { }); }, []); - const handleInputChange = ( - key: keyof typeof wallProperties, - newValue: string - ) => { - setWallProperties((prev) => ({ - ...prev, - [key]: newValue, - })); + const handleHeightChange = (newValue: string) => { + setWallHeight(parseFloat(newValue)); + }; + + const handleThicknessChange = (newValue: string) => { + setWallThickness(parseFloat(newValue)); }; const handleAddMaterial = () => { @@ -104,18 +99,13 @@ const WallProperties = () => {
handleInputChange("height", val)} + value={`${wallHeight}`} + onChange={(val) => handleHeightChange(val)} /> handleInputChange("thickness", val)} - /> - handleInputChange("length", val)} + value={`${wallThickness}`} + onChange={(val) => handleThicknessChange(val)} />
@@ -130,9 +120,8 @@ const WallProperties = () => {
setActiveSide("side1")} >
Side 1
@@ -147,9 +136,8 @@ const WallProperties = () => {
setActiveSide("side2")} >
Side 2
diff --git a/app/src/modules/builder/wall/Instances/wallInstances.tsx b/app/src/modules/builder/wall/Instances/wallInstances.tsx index 2ec41bf..818134f 100644 --- a/app/src/modules/builder/wall/Instances/wallInstances.tsx +++ b/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(); useEffect(() => { // console.log('walls: ', walls); @@ -32,11 +34,24 @@ function WallInstances() { return ( <> - - + + + {walls.map((wall) => ( ))} + + {/* + + + + + + + + + + */}