Refactor builder store and remove wall store

Refactor builder store and remove wall store - Consolidated wall-related state management into the builder store by removing the useWallStore. - Added new properties and setters for wall attributes (thickness, height, materials) in the builder store. - Introduced SelectedWallProperties and WallProperties components for managing wall properties in the sidebar. - Created a new floor store for managing floor-related state. - Added a wall asset store for managing wall assets. - Implemented a zone store for managing zones and their properties. - Updated sidebar styles for better layout and appearance.
2025-06-25 15:26:53 +05:30
parent 982c92cf26
commit 587ed6c9d7
21 changed files with 870 additions and 402 deletions
--- a/app/src/components/layout/sidebarRight/properties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/WallProperties.tsx
@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+
+// Texture Imports
+
+import defaultTexture from '../../../../assets/textures/floor/wall-tex.png';
+import wallTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
+
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
+
+// Define Material type
+type Material = {
+  texture: string;
+  textureName: string;
+};
+
+// Default and initial materials
+const defaultMaterial: Material = {
+  texture: defaultTexture,
+  textureName: "Default Material",
+};
+
+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
+const WallProperties = () => {
+  const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();
+
+  const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
+
+  const [materials, setMaterials] = useState<Material[]>([
+    defaultMaterial,
+    initialMaterial,
+  ]);
+
+  const [selectedMaterials, setSelectedMaterials] = useState<{
+    side1: Material | null;
+    side2: Material | null;
+  }>({
+    side1: null,
+    side2: null,
+  });
+
+  // Set default material initially for both sides
+  useEffect(() => {
+    setSelectedMaterials({
+      side1: defaultMaterial,
+      side2: defaultMaterial,
+    });
+  }, []);
+
+  const handleHeightChange = (newValue: string) => {
+    setWallHeight(parseFloat(newValue));
+  };
+
+  const handleThicknessChange = (newValue: string) => {
+    setWallThickness(parseFloat(newValue));
+  };
+
+  const handleSelectMaterial = (material: Material) => {
+    setSelectedMaterials((prev) => ({
+      ...prev,
+      [activeSide]: material,
+    }));
+  };
+
+  return (
+    <div className="wall-properties-container">
+      <section className="wall-properties-section">
+        <div className="header">Wall</div>
+        <div className="wall-properties">
+          <InputWithDropDown
+            label="Height"
+            value={`${wallHeight}`}
+            onChange={(val) => handleHeightChange(val)}
+          />
+          <InputWithDropDown
+            label="Thickness"
+            value={`${wallThickness}`}
+            onChange={(val) => handleThicknessChange(val)}
+          />
+        </div>
+      </section>
+      <section>
+        <div className="header-wrapper">
+          <div className="header">Materials</div>
+        </div>
+
+        <div className="material-preview">
+          <div className="sides-wrapper">
+            <button
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""}`}
+              onClick={() => setActiveSide("side1")}
+            >
+              <div className="label">Side 1</div>
+              <div className="texture-image">
+                {selectedMaterials.side1 && (
+                  <img
+                    draggable={false}
+                    src={selectedMaterials.side1.texture}
+                    alt={selectedMaterials.side1.textureName}
+                  />
+                )}
+              </div>
+            </button>
+
+            <button
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
+              onClick={() => setActiveSide("side2")}
+            >
+              <div className="label">Side 2</div>
+              <div className="texture-image">
+                {selectedMaterials.side2 && (
+                  <img
+                    draggable={false}
+                    src={selectedMaterials.side2.texture}
+                    alt={selectedMaterials.side2.textureName}
+                  />
+                )}
+              </div>
+            </button>
+          </div>
+
+          <div className="preview">
+            {selectedMaterials[activeSide] && (
+              <img
+                draggable={false}
+                src={selectedMaterials[activeSide]!.texture}
+                alt={selectedMaterials[activeSide]!.textureName}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="materials">
+          {materials.length === 0 ? (
+            <div className="no-materials">No materials added yet.</div>
+          ) : (
+            <div className="material-container">
+              {materials.map((material, index) => {
+                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;
+
+                return (
+                  <button
+                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
+                    key={`${material.textureName}_${index}`}
+                    onClick={() => handleSelectMaterial(material)}
+                  >
+                    <div className="material-property">
+                      <div className="material-image">
+                        <img
+                          draggable={false}
+                          src={material.texture}
+                          alt={material.textureName}
+                        />
+                      </div>
+                      <div className="material-name">{material.textureName}</div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default WallProperties;