From 64f0cdb1480e5f5f071bde6d89879f18ec032321 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Fri, 27 Jun 2025 11:56:54 +0530 Subject: [PATCH] Refactor builder store and related components: update DecalInstance to manage selectedFloor state, enhance FloorInstance with improved material handling and texture application, and modify FloorGroup to remove unnecessary console log. Update Wall component for better shadow handling and adjust useBuilderStore to change default material values. --- .../modules/builder/Decal/decalInstance.tsx | 3 +- .../Instances/Instance/floorInstance.tsx | 90 ++++++++++++++++--- app/src/modules/builder/floor/floorGroup.tsx | 1 - .../builder/wall/Instances/instance/wall.tsx | 12 +-- .../scene/postProcessing/postProcessing.tsx | 21 ++++- app/src/store/builder/useBuilderStore.ts | 4 +- 6 files changed, 111 insertions(+), 20 deletions(-) diff --git a/app/src/modules/builder/Decal/decalInstance.tsx b/app/src/modules/builder/Decal/decalInstance.tsx index 6ed0490..71dcd83 100644 --- a/app/src/modules/builder/Decal/decalInstance.tsx +++ b/app/src/modules/builder/Decal/decalInstance.tsx @@ -8,7 +8,7 @@ import defaultMaterial from '../../../assets/textures/floor/wall-tex.png'; import useModuleStore from '../../../store/useModuleStore'; function DecalInstance({ visible = true, decal }: { visible?: boolean, decal: Decal }) { - const { setSelectedWall, selectedDecal, setSelectedDecal } = useBuilderStore(); + const { setSelectedWall, setSelectedFloor, selectedDecal, setSelectedDecal } = useBuilderStore(); const { togglView } = useToggleView(); const { activeModule } = useModuleStore(); const material = useLoader(THREE.TextureLoader, defaultMaterial); @@ -26,6 +26,7 @@ function DecalInstance({ visible = true, decal }: { visible?: boolean, decal: De if (e.object.userData.decalUuid) { setSelectedDecal(e.object); setSelectedWall(null); + setSelectedFloor(null); } } }} diff --git a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx index 6c9016e..ce82298 100644 --- a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx +++ b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx @@ -1,33 +1,103 @@ -import { useMemo } from 'react' -import { Shape, Vector2, DoubleSide } from 'three'; +import { useMemo } from 'react'; +import { Shape, Vector2, DoubleSide, TextureLoader, RepeatWrapping, SRGBColorSpace } from 'three'; import { useLoader } from '@react-three/fiber'; import { Extrude } from '@react-three/drei'; +import useModuleStore from '../../../../../store/useModuleStore'; +import { useBuilderStore } from '../../../../../store/builder/useBuilderStore'; +import { useToggleView } from '../../../../../store/builder/store'; import * as Constants from '../../../../../types/world/worldConstants'; +import texturePath from "../../../../../assets/textures/floor/white.png"; +import texturePathDark from "../../../../../assets/textures/floor/black.png"; +import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg'; + function FloorInstance({ floor }: { floor: Floor }) { + const { togglView } = useToggleView(); + const { activeModule } = useModuleStore(); + const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore(); + const savedTheme = localStorage.getItem('theme'); + + const materials: Record = { + "Default Material": savedTheme === "dark" ? texturePathDark : texturePath, + "Material 1": savedTheme === "dark" ? material1 : material1, + }; const shape = useMemo(() => { const shape = new Shape(); const points = floor.points.map(p => new Vector2(p.position[0], p.position[2])); if (points.length < 3) return null; shape.moveTo(points[0].x, points[0].y); - points.forEach((pt) => { shape.lineTo(pt.x, pt.y); }); + for (let i = 1; i < points.length; i++) { + shape.lineTo(points[i].x, points[i].y); + } return shape; }, [floor]); + const textureScale = Constants.floorConfig.textureScale; + + const [topTexture, sideTexture] = useLoader( + TextureLoader, + [ + materials[floor.topMaterial] || materials['Default Material'], + materials[floor.sideMaterial] || materials['Default Material'] + ] + ); + + if (!materials[floor.topMaterial] || !materials[floor.sideMaterial]) return null; + + [topTexture, sideTexture].forEach(tex => { + tex.wrapS = tex.wrapT = RepeatWrapping; + tex.repeat.set(textureScale, textureScale); + tex.colorSpace = SRGBColorSpace; + }); + if (!shape) return null; return ( - + { + if (!togglView && activeModule === 'builder') { + if (e.object.userData.floorUuid) { + setSelectedFloor(e.object); + setSelectedDecal(null); + } + } + }} + onPointerMissed={() => { + if (selectedFloor && selectedFloor.userData.floorUuid === floor.floorUuid) { + setSelectedFloor(null); + } + }} + > - + + - + ); } -export default FloorInstance \ No newline at end of file +export default FloorInstance; \ No newline at end of file diff --git a/app/src/modules/builder/floor/floorGroup.tsx b/app/src/modules/builder/floor/floorGroup.tsx index 53a81f4..e0da8e5 100644 --- a/app/src/modules/builder/floor/floorGroup.tsx +++ b/app/src/modules/builder/floor/floorGroup.tsx @@ -29,7 +29,6 @@ function FloorGroup() { useEffect(() => { if (projectId && selectedVersion) { getFloorsApi(projectId, selectedVersion?.versionId || '').then((floors) => { - console.log('floors: ', floors); if (floors && floors.length > 0) { setFloors(floors); } else { diff --git a/app/src/modules/builder/wall/Instances/instance/wall.tsx b/app/src/modules/builder/wall/Instances/instance/wall.tsx index 037816b..a07e8f9 100644 --- a/app/src/modules/builder/wall/Instances/instance/wall.tsx +++ b/app/src/modules/builder/wall/Instances/instance/wall.tsx @@ -1,20 +1,21 @@ import * as THREE from 'three'; import { Base } from '@react-three/csg'; import { useMemo, useRef, useState } from 'react'; -import { Decal, MeshDiscardMaterial } from '@react-three/drei'; +import { MeshDiscardMaterial } from '@react-three/drei'; import { useFrame, useThree } from '@react-three/fiber'; - -import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png'; -import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg'; - import useModuleStore from '../../../../../store/useModuleStore'; import { useSceneContext } from '../../../../scene/sceneContext'; import { useWallClassification } from './helpers/useWallClassification'; import { useToggleView, useWallVisibility } from '../../../../../store/builder/store'; import { useBuilderStore } from '../../../../../store/builder/useBuilderStore'; import * as Constants from '../../../../../types/world/worldConstants'; + import DecalInstance from '../../../Decal/decalInstance'; +import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png'; +import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg'; + + function Wall({ wall }: { readonly wall: Wall }) { const { wallStore } = useSceneContext(); const { walls, addDecal } = wallStore(); @@ -116,6 +117,7 @@ function Wall({ wall }: { readonly wall: Wall }) { { + // console.log('selectedFloor: ', selectedFloor); + }, [selectedFloor]) + return ( )} + {selectedFloor && ( + + )} {selectedDecal && ( ()( floorDepth: 0.1, isBeveled: false, bevelStrength: 0.05, - sideMaterial: 'Default Side', - topMaterial: 'Default Top', + sideMaterial: 'Material 1', + topMaterial: 'Default Material', selectedDecal: null,