completed floor
This commit is contained in:
@@ -1,27 +1,28 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Header from "./Header";
|
||||
import useModuleStore, {
|
||||
useSubModuleStore,
|
||||
useSubModuleStore,
|
||||
} from "../../../store/useModuleStore";
|
||||
import {
|
||||
AnalysisIcon,
|
||||
MechanicsIcon,
|
||||
PropertiesIcon,
|
||||
SimulationIcon,
|
||||
AnalysisIcon,
|
||||
MechanicsIcon,
|
||||
PropertiesIcon,
|
||||
SimulationIcon,
|
||||
} from "../../icons/SimulationIcons";
|
||||
import { useToggleStore } from "../../../store/useUIToggleStore";
|
||||
import Visualization from "./visualization/Visualization";
|
||||
import Analysis from "./analysis/Analysis";
|
||||
import Simulations from "./simulation/Simulations";
|
||||
import useVersionHistoryVisibleStore, {
|
||||
useSaveVersion,
|
||||
useSelectedFloorItem,
|
||||
useToolMode,
|
||||
useSaveVersion,
|
||||
useSelectedFloorItem,
|
||||
useToolMode,
|
||||
} from "../../../store/builder/store";
|
||||
import {
|
||||
useSelectedEventData,
|
||||
useSelectedEventSphere,
|
||||
useSelectedEventData,
|
||||
useSelectedEventSphere,
|
||||
} from "../../../store/simulation/useSimulationStore";
|
||||
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
||||
import GlobalProperties from "./properties/GlobalProperties";
|
||||
import AssetProperties from "./properties/AssetProperties";
|
||||
import ZoneProperties from "./properties/ZoneProperties";
|
||||
@@ -29,207 +30,227 @@ import EventProperties from "./properties/eventProperties/EventProperties";
|
||||
import VersionHistory from "./versionHisory/VersionHistory";
|
||||
import AisleProperties from "./properties/AisleProperties";
|
||||
import WallProperties from "./properties/WallProperties";
|
||||
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
||||
import FloorProperties from "./properties/FloorProperties";
|
||||
import SelectedWallProperties from "./properties/SelectedWallProperties";
|
||||
import SelectedFloorProperties from "./properties/SelectedFloorProperties";
|
||||
|
||||
const SideBarRight: React.FC = () => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const { toggleUIRight } = useToggleStore();
|
||||
const { toolMode } = useToolMode();
|
||||
const { subModule, setSubModule } = useSubModuleStore();
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { selectedWall } = useBuilderStore();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { toggleUIRight } = useToggleStore();
|
||||
const { toolMode } = useToolMode();
|
||||
const { subModule, setSubModule } = useSubModuleStore();
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
|
||||
// Reset activeList whenever activeModule changes
|
||||
useEffect(() => {
|
||||
if (activeModule !== "simulation") setSubModule("properties");
|
||||
if (activeModule === "simulation") setSubModule("simulations");
|
||||
}, [activeModule, setSubModule]);
|
||||
// Reset activeList whenever activeModule changes
|
||||
useEffect(() => {
|
||||
if (activeModule !== "simulation") setSubModule("properties");
|
||||
if (activeModule === "simulation") setSubModule("simulations");
|
||||
}, [activeModule, setSubModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
activeModule !== "mechanics" &&
|
||||
selectedEventData &&
|
||||
selectedEventSphere
|
||||
) {
|
||||
setSubModule("mechanics");
|
||||
} else if (!selectedEventData && !selectedEventSphere) {
|
||||
if (activeModule === "simulation") {
|
||||
setSubModule("simulations");
|
||||
}
|
||||
}
|
||||
if (activeModule !== "simulation") {
|
||||
setSubModule("properties");
|
||||
}
|
||||
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
|
||||
useEffect(() => {
|
||||
if (
|
||||
activeModule !== "mechanics" &&
|
||||
selectedEventData &&
|
||||
selectedEventSphere
|
||||
) {
|
||||
setSubModule("mechanics");
|
||||
} else if (!selectedEventData && !selectedEventSphere) {
|
||||
if (activeModule === "simulation") {
|
||||
setSubModule("simulations");
|
||||
}
|
||||
}
|
||||
if (activeModule !== "simulation") {
|
||||
setSubModule("properties");
|
||||
}
|
||||
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
|
||||
}`}
|
||||
>
|
||||
<Header />
|
||||
{toggleUIRight && (
|
||||
<>
|
||||
{!isVersionSaved && (
|
||||
<div className="sidebar-actions-container">
|
||||
{activeModule !== "simulation" && (
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("properties");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">properties</div>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</button>
|
||||
)}
|
||||
{activeModule === "simulation" && (
|
||||
return (
|
||||
<div
|
||||
className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
|
||||
}`}
|
||||
>
|
||||
<Header />
|
||||
{toggleUIRight && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-simulation"
|
||||
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("simulations");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">simulations</div>
|
||||
<SimulationIcon isActive={subModule === "simulations"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-mechanics"
|
||||
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("mechanics");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">mechanics</div>
|
||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-analysis"
|
||||
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("analysis");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">analysis</div>
|
||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||
</button>
|
||||
{!isVersionSaved && (
|
||||
<div className="sidebar-actions-container">
|
||||
{activeModule !== "simulation" && (
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("properties");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">properties</div>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</button>
|
||||
)}
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-simulation"
|
||||
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("simulations");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">simulations</div>
|
||||
<SimulationIcon isActive={subModule === "simulations"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-mechanics"
|
||||
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("mechanics");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">mechanics</div>
|
||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-analysis"
|
||||
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("analysis");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">analysis</div>
|
||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewVersionHistory && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<VersionHistory />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* process builder */}
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
!selectedFloorItem &&
|
||||
!selectedFloor &&
|
||||
!selectedWall && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
{(() => {
|
||||
if (toolMode === "Aisle") {
|
||||
return <AisleProperties />;
|
||||
} else if (toolMode === "Wall") {
|
||||
return <WallProperties />;
|
||||
} else if (toolMode === "Floor") {
|
||||
return <FloorProperties />;
|
||||
} else {
|
||||
return <GlobalProperties />;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
selectedFloorItem && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<AssetProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
!selectedFloorItem &&
|
||||
!selectedFloor &&
|
||||
!selectedAisle &&
|
||||
selectedWall && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<SelectedWallProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
!selectedFloorItem &&
|
||||
!selectedWall &&
|
||||
!selectedAisle &&
|
||||
selectedFloor && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<SelectedFloorProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "zoneProperties" &&
|
||||
(activeModule === "builder" || activeModule === "simulation") && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<ZoneProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* simulation */}
|
||||
{!isVersionSaved &&
|
||||
!viewVersionHistory &&
|
||||
activeModule === "simulation" && (
|
||||
<>
|
||||
{subModule === "simulations" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Simulations />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subModule === "mechanics" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<EventProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subModule === "analysis" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Analysis />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* realtime visualization */}
|
||||
{activeModule === "visualization" && <Visualization />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewVersionHistory && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<VersionHistory />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* process builder */}
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
!selectedFloorItem &&
|
||||
!selectedWall && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
{(() => {
|
||||
if (toolMode === "Aisle") {
|
||||
return <AisleProperties />;
|
||||
} else if (toolMode === "Wall") {
|
||||
return <WallProperties />;
|
||||
} else {
|
||||
return <GlobalProperties />;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
selectedFloorItem && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<AssetProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "properties" &&
|
||||
activeModule !== "visualization" &&
|
||||
!selectedFloorItem &&
|
||||
selectedWall && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<SelectedWallProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!viewVersionHistory &&
|
||||
subModule === "zoneProperties" &&
|
||||
(activeModule === "builder" || activeModule === "simulation") && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<ZoneProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* simulation */}
|
||||
{!isVersionSaved &&
|
||||
!viewVersionHistory &&
|
||||
activeModule === "simulation" && (
|
||||
<>
|
||||
{subModule === "simulations" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Simulations />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subModule === "mechanics" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<EventProperties />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subModule === "analysis" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Analysis />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* realtime visualization */}
|
||||
{activeModule === "visualization" && <Visualization />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarRight;
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
|
||||
import defaultTexture from '../../../../assets/textures/floor/white.png';
|
||||
import flootTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
|
||||
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
|
||||
type Material = {
|
||||
texture: string;
|
||||
textureId: string;
|
||||
textureName: string;
|
||||
};
|
||||
|
||||
const materials = [
|
||||
{ texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
|
||||
{ texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
|
||||
];
|
||||
|
||||
const FloorProperties = () => {
|
||||
const { floorDepth, isBeveled, topMaterial, sideMaterial, bevelStrength, setFloorDepth, setIsBeveled, setBevelStrength, setFloorMaterial } = useBuilderStore();
|
||||
|
||||
const [activeSurface, setActiveSurface] = useState<"top" | "side">("top");
|
||||
|
||||
const [selectedMaterials, setSelectedMaterials] = useState<{ top: Material | null; side: Material | null; }>({ top: null, side: null, });
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedMaterials({
|
||||
top: materials.find((mat) => mat.textureId === topMaterial) || null,
|
||||
side: materials.find((mat) => mat.textureId === sideMaterial) || null,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDepthChange = (val: string) => {
|
||||
setFloorDepth(parseFloat(val));
|
||||
};
|
||||
|
||||
const handleIsBevelChange = (val: boolean) => {
|
||||
setIsBeveled(val);
|
||||
};
|
||||
|
||||
const handleBevelChange = (val: string) => {
|
||||
setBevelStrength(parseFloat(val));
|
||||
};
|
||||
|
||||
const handleSelectMaterial = (material: Material) => {
|
||||
setSelectedMaterials((prev) => ({
|
||||
...prev,
|
||||
[activeSurface]: material,
|
||||
}));
|
||||
setFloorMaterial(material.textureId, activeSurface);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="wall-properties-container">
|
||||
<section className="wall-properties-section">
|
||||
<div className="header">Floor</div>
|
||||
<div className="wall-properties">
|
||||
<InputWithDropDown
|
||||
label="Depth"
|
||||
value={`${floorDepth}`}
|
||||
min={0.1}
|
||||
max={10}
|
||||
step={0.1}
|
||||
onChange={handleDepthChange}
|
||||
/>
|
||||
<InputToggle
|
||||
value={isBeveled}
|
||||
label="Beveled"
|
||||
inputKey=""
|
||||
onClick={() => handleIsBevelChange(!isBeveled)}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Bevel Strength"
|
||||
value={`${bevelStrength}`}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
onChange={handleBevelChange}
|
||||
/>
|
||||
</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 ${activeSurface === "top" ? "active" : ""}`}
|
||||
onClick={() => setActiveSurface("top")}
|
||||
>
|
||||
<div className="label">Top</div>
|
||||
<div className="texture-image">
|
||||
{selectedMaterials.top && (
|
||||
<img
|
||||
draggable={false}
|
||||
src={selectedMaterials.top.texture}
|
||||
alt={selectedMaterials.top.textureName}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`side-wrapper ${activeSurface === "side" ? "active" : ""}`}
|
||||
onClick={() => setActiveSurface("side")}
|
||||
>
|
||||
<div className="label">Side</div>
|
||||
<div className="texture-image">
|
||||
{selectedMaterials.side && (
|
||||
<img
|
||||
draggable={false}
|
||||
src={selectedMaterials.side.texture}
|
||||
alt={selectedMaterials.side.textureName}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="preview">
|
||||
{selectedMaterials[activeSurface] && (
|
||||
<img
|
||||
draggable={false}
|
||||
src={selectedMaterials[activeSurface]!.texture}
|
||||
alt={selectedMaterials[activeSurface]!.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[activeSurface]?.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 FloorProperties;
|
||||
@@ -0,0 +1,250 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
|
||||
import defaultTexture from '../../../../assets/textures/floor/white.png';
|
||||
import floorTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
|
||||
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { getUserData } from "../../../../functions/getUserData";
|
||||
import { useSocketStore } from "../../../../store/builder/store";
|
||||
|
||||
// import { upsertFloorApi } from "../../../../services/factoryBuilder/floor/upsertFloorApi";
|
||||
|
||||
const SelectedFloorProperties = () => {
|
||||
const [depth, setDepth] = useState("");
|
||||
const [isBeveled, setIsBeveled] = useState(false);
|
||||
const [bevelStrength, setBevelStrength] = useState("");
|
||||
const { selectedFloor } = useBuilderStore();
|
||||
const { floorStore } = useSceneContext();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { socket } = useSocketStore();
|
||||
const { userId, organization } = getUserData();
|
||||
const { projectId } = useParams();
|
||||
const { getFloorById, updateFloor } = floorStore();
|
||||
|
||||
const [activeSurface, setActiveSurface] = useState<"top" | "side">("top");
|
||||
|
||||
const materials = [
|
||||
{ texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
|
||||
{ texture: floorTexture1, textureId: "Material 1", textureName: "Grunge Concrete" }
|
||||
];
|
||||
|
||||
const floor = selectedFloor ? getFloorById(selectedFloor.userData.floorUuid) : null;
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
setDepth(floor.floorDepth.toString());
|
||||
setIsBeveled(floor.isBeveled);
|
||||
setBevelStrength(floor.bevelStrength.toString());
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const handleDepthChange = (val: string) => {
|
||||
setDepth(val);
|
||||
const parsed = parseFloat(val);
|
||||
if (!isNaN(parsed) && floor) {
|
||||
const updatedFloor = updateFloor(floor.floorUuid, { floorDepth: parsed });
|
||||
if (projectId) {
|
||||
|
||||
// API
|
||||
|
||||
// upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
floorData: updatedFloor,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Floor:add', data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleBevelChange = (val: string) => {
|
||||
setBevelStrength(val);
|
||||
const parsed = parseFloat(val);
|
||||
if (!isNaN(parsed) && floor) {
|
||||
const updatedFloor = updateFloor(floor.floorUuid, { bevelStrength: parsed });
|
||||
if (projectId) {
|
||||
|
||||
// API
|
||||
|
||||
// upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
floorData: updatedFloor,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Floor:add', data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleIsBeveledToggle = () => {
|
||||
setIsBeveled(!isBeveled);
|
||||
if (!floor) return;
|
||||
const updatedFloor = updateFloor(floor.floorUuid, { isBeveled: !floor.isBeveled });
|
||||
if (projectId) {
|
||||
|
||||
// API
|
||||
|
||||
// upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
floorData: updatedFloor,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Floor:add', data);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleSelectMaterial = (material: { textureId: string; textureName: string }) => {
|
||||
if (!floor) return;
|
||||
const key = activeSurface === "top" ? "topMaterial" : "sideMaterial";
|
||||
const updatedFloor = updateFloor(floor.floorUuid, { [key]: material.textureId });
|
||||
if (projectId) {
|
||||
|
||||
// API
|
||||
|
||||
// upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
floorData: updatedFloor,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Floor:add', data);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if (!floor) return null;
|
||||
|
||||
const selectedMaterials = {
|
||||
top: materials.find((m) => m.textureId === floor.topMaterial) ?? materials[0],
|
||||
side: materials.find((m) => m.textureId === floor.sideMaterial) ?? materials[0],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="wall-properties-container">
|
||||
<section className="wall-properties-section">
|
||||
<div className="header">Floor</div>
|
||||
<div className="wall-properties">
|
||||
<InputWithDropDown
|
||||
label="Depth"
|
||||
value={depth}
|
||||
min={0.1}
|
||||
max={10}
|
||||
step={0.1}
|
||||
onChange={handleDepthChange}
|
||||
/>
|
||||
<InputToggle
|
||||
label="Beveled"
|
||||
inputKey="isBeveled"
|
||||
value={isBeveled}
|
||||
onClick={handleIsBeveledToggle}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Bevel Strength"
|
||||
value={bevelStrength}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
onChange={handleBevelChange}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="header-wrapper">
|
||||
<div className="header">Materials</div>
|
||||
</div>
|
||||
|
||||
<div className="material-preview">
|
||||
<div className="sides-wrapper">
|
||||
{(["top", "side"] as const).map((surface) => (
|
||||
<button
|
||||
key={surface}
|
||||
className={`side-wrapper ${activeSurface === surface ? "active" : ""}`}
|
||||
onClick={() => setActiveSurface(surface)}
|
||||
>
|
||||
<div className="label">{surface === "top" ? "Top" : "Side"}</div>
|
||||
<div className="texture-image">
|
||||
<img
|
||||
draggable={false}
|
||||
src={selectedMaterials[surface].texture}
|
||||
alt={selectedMaterials[surface].textureName}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="preview">
|
||||
<img
|
||||
draggable={false}
|
||||
src={selectedMaterials[activeSurface].texture}
|
||||
alt={selectedMaterials[activeSurface].textureName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="materials">
|
||||
<div className="material-container">
|
||||
{materials.map((material, index) => {
|
||||
const isSelected = selectedMaterials[activeSurface].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 SelectedFloorProperties;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
|
||||
import defaultTexture from '../../../../assets/textures/floor/wall-tex.png';
|
||||
@@ -8,11 +8,14 @@ import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
|
||||
import { getUserData } from "../../../../functions/getUserData";
|
||||
import { useSocketStore } from "../../../../store/builder/store";
|
||||
|
||||
// import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
|
||||
|
||||
const SelectedWallProperties = () => {
|
||||
const [height, setHeight] = useState("");
|
||||
const [thickness, setThickness] = useState("");
|
||||
const { selectedWall } = useBuilderStore();
|
||||
const { wallStore } = useSceneContext();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
@@ -31,7 +34,15 @@ const SelectedWallProperties = () => {
|
||||
|
||||
const wall = selectedWall ? getWallById(selectedWall.userData.wallUuid) : null;
|
||||
|
||||
useEffect(() => {
|
||||
if (wall) {
|
||||
setHeight(wall.wallHeight.toString());
|
||||
setThickness(wall.wallThickness.toString());
|
||||
}
|
||||
}, [wall, selectedWall]);
|
||||
|
||||
const handleHeightChange = (val: string) => {
|
||||
setHeight(val);
|
||||
const height = parseFloat(val);
|
||||
if (!isNaN(height) && wall) {
|
||||
const updatedWall = updateWall(wall.wallUuid, { wallHeight: height });
|
||||
@@ -57,6 +68,7 @@ const SelectedWallProperties = () => {
|
||||
};
|
||||
|
||||
const handleThicknessChange = (val: string) => {
|
||||
setThickness(val);
|
||||
const thickness = parseFloat(val);
|
||||
if (!isNaN(thickness) && wall) {
|
||||
const updatedWall = updateWall(wall.wallUuid, { wallThickness: thickness });
|
||||
@@ -109,16 +121,8 @@ const SelectedWallProperties = () => {
|
||||
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'
|
||||
}
|
||||
side1: materials.find((m) => m.textureId === wall.insideMaterial) ?? materials[0],
|
||||
side2: materials.find((m) => m.textureId === wall.outsideMaterial) ?? materials[0]
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -128,12 +132,12 @@ const SelectedWallProperties = () => {
|
||||
<div className="wall-properties">
|
||||
<InputWithDropDown
|
||||
label="Height"
|
||||
value={`${wall.wallHeight}`}
|
||||
value={height}
|
||||
onChange={handleHeightChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Thickness"
|
||||
value={`${wall.wallThickness}`}
|
||||
value={thickness}
|
||||
onChange={handleThicknessChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -10,163 +10,152 @@ import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
|
||||
// Define Material type
|
||||
type Material = {
|
||||
texture: string;
|
||||
textureName: string;
|
||||
texture: string;
|
||||
textureId: 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 materials = [
|
||||
{ texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
|
||||
{ texture: wallTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
|
||||
];
|
||||
|
||||
const WallProperties = () => {
|
||||
const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();
|
||||
const { wallHeight, wallThickness, insideMaterial, outsideMaterial, setWallHeight, setWallThickness } = useBuilderStore();
|
||||
|
||||
const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
|
||||
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 [selectedMaterials, setSelectedMaterials] = useState<{
|
||||
side1: Material | null;
|
||||
side2: Material | null;
|
||||
}>({
|
||||
side1: null,
|
||||
side2: null,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleHeightChange = (newValue: string) => {
|
||||
setWallHeight(parseFloat(newValue));
|
||||
};
|
||||
useEffect(() => {
|
||||
setSelectedMaterials({
|
||||
side1: materials.find((mat) => mat.textureId === outsideMaterial) || null,
|
||||
side2: materials.find((mat) => mat.textureId === insideMaterial) || null,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleThicknessChange = (newValue: string) => {
|
||||
setWallThickness(parseFloat(newValue));
|
||||
};
|
||||
const handleHeightChange = (newValue: string) => {
|
||||
setWallHeight(parseFloat(newValue));
|
||||
};
|
||||
|
||||
const handleSelectMaterial = (material: Material) => {
|
||||
setSelectedMaterials((prev) => ({
|
||||
...prev,
|
||||
[activeSide]: material,
|
||||
}));
|
||||
};
|
||||
const handleThicknessChange = (newValue: string) => {
|
||||
setWallThickness(parseFloat(newValue));
|
||||
};
|
||||
|
||||
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>
|
||||
const handleSelectMaterial = (material: Material) => {
|
||||
setSelectedMaterials((prev) => ({
|
||||
...prev,
|
||||
[activeSide]: material,
|
||||
}));
|
||||
};
|
||||
|
||||
<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>
|
||||
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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default WallProperties;
|
||||
|
||||
Reference in New Issue
Block a user