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/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -23,12 +23,14 @@ import {
  useSelectedEventSphere,
 } from "../../../store/simulation/useSimulationStore";
 import GlobalProperties from "./properties/GlobalProperties";
-import AsstePropertiies from "./properties/AssetProperties";
+import AssetProperties from "./properties/AssetProperties";
 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";
+import WallProperties from "./properties/WallProperties";
+import { useBuilderStore } from "../../../store/builder/useBuilderStore";
+import SelectedWallProperties from "./properties/SelectedWallProperties";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
@@ -36,6 +38,7 @@ const SideBarRight: React.FC = () => {
  const { toolMode } = useToolMode();
  const { subModule, setSubModule } = useSubModuleStore();
  const { selectedFloorItem } = useSelectedFloorItem();
+  const { selectedWall } = useBuilderStore();
  const { selectedEventData } = useSelectedEventData();
  const { selectedEventSphere } = useSelectedEventSphere();
  const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
@@ -143,7 +146,8 @@ const SideBarRight: React.FC = () => {
          {!viewVersionHistory &&
            subModule === "properties" &&
            activeModule !== "visualization" &&
-            !selectedFloorItem && (
+            !selectedFloorItem &&
+            !selectedWall && (
              <div className="sidebar-right-container">
                <div className="sidebar-right-content-container">
                  {(() => {
@@ -158,13 +162,26 @@ const SideBarRight: React.FC = () => {
                </div>
              </div>
            )}
+
          {!viewVersionHistory &&
            subModule === "properties" &&
            activeModule !== "visualization" &&
            selectedFloorItem && (
              <div className="sidebar-right-container">
                <div className="sidebar-right-content-container">
-                  <AsstePropertiies />
+                  <AssetProperties />
+                </div>
+              </div>
+            )}
+
+          {!viewVersionHistory &&
+            subModule === "properties" &&
+            activeModule !== "visualization" &&
+            !selectedFloorItem &&
+            selectedWall && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <SelectedWallProperties />
                </div>
              </div>
            )}
@@ -178,6 +195,7 @@ const SideBarRight: React.FC = () => {
                </div>
              </div>
            )}
+
          {/* simulation */}
          {!isVersionSaved &&
            !viewVersionHistory &&
--- a/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx
@@ -0,0 +1,143 @@
+import { useState } from "react";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+
+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";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
+
+const SelectedWallProperties = () => {
+    const { selectedWall } = useBuilderStore();
+    const { wallStore } = useSceneContext();
+    const { getWallById, updateWall } = wallStore();
+
+    const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
+
+    const materials = [
+        { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
+        { texture: wallTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
+    ];
+
+    const wall = selectedWall ? getWallById(selectedWall.userData.wallUuid) : null;
+
+    const handleHeightChange = (val: string) => {
+        const height = parseFloat(val);
+        if (!isNaN(height) && wall) {
+            updateWall(wall.wallUuid, { wallHeight: height });
+        }
+    };
+
+    const handleThicknessChange = (val: string) => {
+        const thickness = parseFloat(val);
+        if (!isNaN(thickness) && wall) {
+            updateWall(wall.wallUuid, { wallThickness: thickness });
+        }
+    };
+
+    const handleSelectMaterial = (material: { textureId: string; textureName: string }) => {
+        if (!wall) return;
+
+        const updated = (activeSide === "side1" ? { insideMaterial: material.textureId } : { outsideMaterial: material.textureId })
+
+        updateWall(wall.wallUuid, updated);
+    };
+
+    if (!wall) return null;
+
+    const selectedMaterials = {
+        side1: {
+            texture: materials.find((material) => material.textureId === wall.insideMaterial)?.texture || 'Unknown',
+            textureId: materials.find((material) => material.textureId === wall.insideMaterial)?.textureId || 'Unknown',
+            textureName: materials.find((material) => material.textureId === wall.insideMaterial)?.textureName || 'Unknown'
+        },
+        side2: {
+            texture: materials.find((material) => material.textureId === wall.outsideMaterial)?.texture || 'Unknown',
+            textureId: materials.find((material) => material.textureId === wall.outsideMaterial)?.textureId || 'Unknown',
+            textureName: materials.find((material) => material.textureId === wall.outsideMaterial)?.textureName || 'Unknown'
+        }
+    };
+
+    return (
+        <div className="wall-properties-container">
+            <section className="wall-properties-section">
+                <div className="header">Wall</div>
+                <div className="wall-properties">
+                    <InputWithDropDown
+                        label="Height"
+                        value={`${wall.wallHeight}`}
+                        onChange={handleHeightChange}
+                    />
+                    <InputWithDropDown
+                        label="Thickness"
+                        value={`${wall.wallThickness}`}
+                        onChange={handleThicknessChange}
+                    />
+                </div>
+            </section>
+            <section>
+                <div className="header-wrapper">
+                    <div className="header">Materials</div>
+                </div>
+
+                <div className="material-preview">
+                    <div className="sides-wrapper">
+                        {(["side1", "side2"] as const).map((side) => (
+                            <button
+                                key={side}
+                                className={`side-wrapper ${activeSide === side ? "active" : ""}`}
+                                onClick={() => setActiveSide(side)}
+                            >
+                                <div className="label">Side {side === "side1" ? 1 : 2}</div>
+                                <div className="texture-image">
+                                    <img
+                                        draggable={false}
+                                        src={selectedMaterials[side].texture}
+                                        alt={selectedMaterials[side].textureName}
+                                    />
+                                </div>
+                            </button>
+                        ))}
+                    </div>
+
+                    <div className="preview">
+                        <img
+                            draggable={false}
+                            src={selectedMaterials[activeSide].texture}
+                            alt={selectedMaterials[activeSide].textureName}
+                        />
+                    </div>
+                </div>
+
+                <div className="materials">
+                    <div className="material-container">
+                        {materials.map((material, index) => {
+                            const isSelected = selectedMaterials[activeSide].textureId === material.textureId;
+
+                            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 SelectedWallProperties;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
-import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
-import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";

 // Texture Imports
-import wallTexture1 from "../../../../../assets/image/wallTextures/wallTexture.png";
-import defaultTexture from "../../../../../assets/image/wallTextures/defaultTexture.jpg";
-import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
+
+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 = {
@@ -58,14 +59,6 @@ const WallProperties = () => {
    setWallThickness(parseFloat(newValue));
  };

-  const handleAddMaterial = () => {
-    const newMaterial: Material = {
-      texture: defaultMaterial.texture,
-      textureName: `Material ${materials.length + 1}`,
-    };
-    setMaterials([...materials, newMaterial]);
-  };
-
  const handleSelectMaterial = (material: Material) => {
    setSelectedMaterials((prev) => ({
      ...prev,
@@ -73,46 +66,26 @@ const WallProperties = () => {
    }));
  };

-  const handleRemoveMaterial = (index: number) => {
-    const removedTexture = materials[index].texture;
-
-    const updatedMaterials = materials.filter((_, i) => i !== index);
-    const newMaterials = updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
-    setMaterials(newMaterials);
-
-    setSelectedMaterials((prev) => {
-      const updated = { ...prev };
-      ["side1", "side2"].forEach((side) => {
-        if (updated[side as "side1" | "side2"]?.texture === removedTexture) {
-          updated[side as "side1" | "side2"] = defaultMaterial;
-        }
-      });
-      return updated;
-    });
-  };
-
  return (
    <div className="wall-properties-container">
-      <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 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>
-          <button className="addMaterial" onClick={handleAddMaterial}>
-            <AddIcon />
-          </button>
        </div>

        <div className="material-preview">
@@ -185,15 +158,6 @@ const WallProperties = () => {
                      </div>
                      <div className="material-name">{material.textureName}</div>
                    </div>
-                    <button
-                      className="delete-material"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleRemoveMaterial(index);
-                      }}
-                    >
-                      <RemoveIcon />
-                    </button>
                  </button>
                );
              })}