diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index f8733dc..6005546 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -9,12 +9,13 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets import arch from "../../../assets/gltf-glb/arch.glb"; import door from "../../../assets/gltf-glb/door.glb"; import window from "../../../assets/gltf-glb/window.glb"; +import { fetchAssets } from "../../../services/marketplace/fetchAssets"; interface AssetProp { filename: string; thumbnail?: string; category: string; description?: string; - tags?: string; + tags: string; url?: String; uploadDate?: number; isArchieve?: boolean; @@ -25,12 +26,27 @@ interface AssetProp { const Assets: React.FC = () => { const [searchValue, setSearchValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState(null); - const [filteredAsset, setFilteredAsset] = useState([]); + const [categoryAssets, setCategoryAssets] = useState([]); + const [filtereredAssets, setFiltereredAssets] = useState([]); const handleSearchChange = (value: string) => { setSearchValue(value); - setSelectedCategory(null); // Reset selected category when search changes + setSelectedCategory(null); + const filteredModels = filtereredAssets?.filter((model) => + model.filename.toLowerCase().includes(value.toLowerCase()) + ); + + setCategoryAssets(filteredModels); }; + useEffect(() => { + const filteredAssets = async () => { + try { + const filt = await fetchAssets(); + setFiltereredAssets(filt); + } catch {} + }; + filteredAssets(); + }, []); const categoryList = useMemo( () => [ @@ -68,56 +84,53 @@ const Assets: React.FC = () => { filename: "arch", category: "Feneration", url: arch, + tags: "arch", }, { filename: "door", category: "Feneration", url: door, + thumbnail: feneration, + tags: "door", }, { filename: "window", category: "Feneration", url: window, + tags: "window", }, ]; - setFilteredAsset(localAssets); + setCategoryAssets(localAssets); + setFiltereredAssets(localAssets); } else { try { const res = await getCategoryAsset(asset); - setFilteredAsset(res || []); // Ensure it's always an array + setCategoryAssets(res || []); // Ensure it's always an array + setFiltereredAssets(res || []); } catch (error) {} } }; - useEffect(() => {}, [filteredAsset]); return (
{searchValue ? ( -
-

Results for "{searchValue}"

-
- ) : selectedCategory ? ( -
- {/* Back Button */} -
setSelectedCategory(null)} - > - ← Back +
+
+
+

Results for "{searchValue}"

+
-

{selectedCategory}

- {filteredAsset && - filteredAsset?.map((asset: any, index: number) => ( + {categoryAssets && + categoryAssets?.map((asset: any, index: number) => (
- {asset?.thumbnail && ( - {asset.filename} - )} + {asset.filename} +
{asset.filename .split("_") @@ -131,6 +144,43 @@ const Assets: React.FC = () => { ))}
+ ) : selectedCategory ? ( +
+ {/* Back Button */} +
{ + setSelectedCategory(null); + setCategoryAssets([]); + }} + > + ← Back +
+

{selectedCategory}

+
+ {searchValue || + (categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} + +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ )))} +
+
) : (

Categories

diff --git a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx index 3ab886f..e14b542 100644 --- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx +++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx @@ -33,6 +33,7 @@ const RenderAnalysisInputs: React.FC = ({ label={preset.inputs.label} min={0} max={0} + value={5} /> ); } diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index bd7e5c1..d65a10c 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import InputRange from "../../../ui/inputs/InputRange"; import InputToggle from "../../../ui/inputs/InputToggle"; import { AI_Icon } from "../../../icons/ExportCommonIcons"; @@ -6,6 +6,7 @@ import LabeledButton from "../../../ui/inputs/LabledButton"; import { useAzimuth, useElevation, + useLimitDistance, useRenderDistance, useResetCamera, useRoofVisibility, @@ -17,6 +18,7 @@ import { } from "../../../../store/store"; import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment"; import * as CONSTANTS from "../../../../types/world/worldConstants"; +import { validateBBox } from "@turf/helpers"; const GlobalProperties: React.FC = () => { const { toggleView, setToggleView } = useToggleView(); const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); @@ -27,27 +29,83 @@ const GlobalProperties: React.FC = () => { const { elevation, setElevation } = useElevation(); const { azimuth, setAzimuth } = useAzimuth(); const { renderDistance, setRenderDistance } = useRenderDistance(); + const { socket } = useSocketStore(); - const [limitDistance, setLimitDistance] = useState(false); - const [distance, setDistance] = useState(30); + const { limitDistance, setLimitDistance } = useLimitDistance(); + const [distance, setDistance] = useState(40); + useEffect(() => {}, [limitDistance]); const [limitGridDistance, setLimitGridDistance] = useState(false); const [gridDistance, setGridDistance] = useState(5); - function optimizeScene() { + const optimizeScene = async (value: any) => { + const email = localStorage.getItem("email"); + const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; + + const data = await setEnvironment( + organization, + localStorage.getItem("userId")!, + wallVisibility, + roofVisibility, + shadows, + 30, + true + ); + setRenderDistance(30); setLimitDistance(true); - setDistance(30); - } + }; + const limitRenderDistance = async () => { + const email = localStorage.getItem("email"); + const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; + + if (limitDistance) { + let data = await setEnvironment( + organization, + localStorage.getItem("userId")!, + wallVisibility, + roofVisibility, + shadows, + 75, + !limitDistance + ); + setRenderDistance(75); + } else { + let data = await setEnvironment( + organization, + localStorage.getItem("userId")!, + wallVisibility, + roofVisibility, + shadows, + renderDistance, + !limitDistance + ); + } + setLimitDistance(!limitDistance); + }; function updateDistance(value: number) { - console.log("value: ", value); setDistance(value); setRenderDistance(value); } - function updateGridDistance(value: number) { setGridDistance(value); } + const updatedDist = async (value: number) => { + const email = localStorage.getItem("email"); + const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; + setRenderDistance(value); + // setDistance(value); + const data = await setEnvironment( + organization, + localStorage.getItem("userId")!, + wallVisibility, + roofVisibility, + shadows, + value, + limitDistance + ); + }; + // Function to toggle roof visibility const changeRoofVisibility = async () => { const email = localStorage.getItem("email"); @@ -59,9 +117,11 @@ const GlobalProperties: React.FC = () => { localStorage.getItem("userId")!, wallVisibility, !roofVisibility, - shadows + shadows, + renderDistance, + limitDistance ); - // console.log('data: ', data); + // //using Socket // const visData = { @@ -86,9 +146,11 @@ const GlobalProperties: React.FC = () => { localStorage.getItem("userId")!, !wallVisibility, roofVisibility, - shadows + shadows, + renderDistance, + limitDistance ); - // console.log('data: ', data); + // //using Socket // const visData = { @@ -113,9 +175,11 @@ const GlobalProperties: React.FC = () => { localStorage.getItem("userId")!, wallVisibility, roofVisibility, - !shadows + !shadows, + renderDistance, + limitDistance ); - // console.log('data: ', data); + // //using Socket // const visData = { @@ -185,18 +249,23 @@ const GlobalProperties: React.FC = () => { inputKey="4" label="Limit Render Distance" value={limitDistance} - onClick={() => { - setLimitDistance(!limitDistance); + // onClick={() => { + // setLimitDistance(!limitDistance); + // // setDistance(75); + // // setRenderDistance(75); + // }} + onClick={async () => { + await limitRenderDistance(); // Call the function here }} /> updateDistance(value)} + onPointerUp={updatedDist} />
diff --git a/app/src/components/ui/inputs/InputRange.tsx b/app/src/components/ui/inputs/InputRange.tsx index a09a782..51c8b1a 100644 --- a/app/src/components/ui/inputs/InputRange.tsx +++ b/app/src/components/ui/inputs/InputRange.tsx @@ -8,6 +8,7 @@ interface InputToggleProps { onChange?: (value: number) => void; // Function to handle toggle clicks disabled?: boolean; value?: number; + onPointerUp?: (value: number) => void; } const InputRange: React.FC = ({ @@ -17,9 +18,10 @@ const InputRange: React.FC = ({ min, max, disabled, - value = 5, + value, + onPointerUp, }) => { - const [rangeValue, setRangeValue] = useState(value); + const [rangeValue, setRangeValue] = useState(value ? value : 5); function handleChange(e: React.ChangeEvent) { const newValue = parseInt(e.target.value); // Parse the value to an integer @@ -31,8 +33,22 @@ const InputRange: React.FC = ({ } } useEffect(() => { - setRangeValue(value); + value && setRangeValue(value); }, [value]); + function handlePointerUp(e: React.PointerEvent) { + const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly + + if (onPointerUp) { + onPointerUp(newValue); // Call the callback function if it exists + } + } + function handlekey(e: React.KeyboardEvent) { + const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly + + if (onPointerUp) { + onPointerUp(newValue); // Call the callback function if it exists + } + } return (
@@ -52,6 +68,7 @@ const InputRange: React.FC = ({ onChange={handleChange} disabled={disabled} value={rangeValue} + onPointerUp={handlePointerUp} /> = ({ value={rangeValue} onChange={handleChange} disabled={disabled} + onKeyUp={(e) => { + if (e.key === "ArrowUp" || e.key === "ArrowDown") { + console.log("e.key: ", e.key); + handlekey(e); + } + }} />
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index ec9db06..c1a3289 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -38,6 +38,7 @@ const Card: React.FC = ({ description, onSelectCard, }) => { + console.log('description: ', description); const handleCardSelect = () => { onSelectCard({ assetName, uploadedOn, price, rating, views, description }); }; diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index 630942d..de518c8 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -57,7 +57,6 @@ const FilterSearch: React.FC = ({ const filteredModel = filteredModels?.filter((model) => model.filename.toLowerCase().includes(val.toLowerCase()) ); - setModels(filteredModel); }; diff --git a/app/src/modules/scene/world/world.tsx b/app/src/modules/scene/world/world.tsx index eb7d555..5864ec8 100644 --- a/app/src/modules/scene/world/world.tsx +++ b/app/src/modules/scene/world/world.tsx @@ -30,6 +30,8 @@ import { useWalls, useToolMode, useRefTextUpdate, + useRenderDistance, + useLimitDistance, } from "../../../store/store"; ////////// 3D Function Imports ////////// @@ -117,6 +119,8 @@ export default function World() { const { roofVisibility, setRoofVisibility } = useRoofVisibility(); const { wallVisibility, setWallVisibility } = useWallVisibility(); const { shadows, setShadows } = useShadows(); + const { renderDistance, setRenderDistance } = useRenderDistance(); + const { limitDistance, setLimitDistance } = useLimitDistance(); const { updateScene, setUpdateScene } = useUpdateScene(); const { walls, setWalls } = useWalls(); const { refTextupdate, setRefTextUpdate } = useRefTextUpdate(); @@ -200,6 +204,8 @@ export default function World() { setRoofVisibility(visibility.roofVisibility); setWallVisibility(visibility.wallVisibility); setShadows(visibility.shadowVisibility); + setRenderDistance(visibility.renderDistance); + setLimitDistance(visibility.limitDistance); } } fetchVisibility(); diff --git a/app/src/services/factoryBuilder/environment/findEnvironment.ts b/app/src/services/factoryBuilder/environment/findEnvironment.ts index 525bdda..de5b6a6 100644 --- a/app/src/services/factoryBuilder/environment/findEnvironment.ts +++ b/app/src/services/factoryBuilder/environment/findEnvironment.ts @@ -1,32 +1,43 @@ -import { setEnvironment } from './setEnvironment'; +import { setEnvironment } from "./setEnvironment"; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; export const findEnvironment = async (organization: string, userId: string) => { - try { - const response = await fetch(`${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - }); + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); - if (!response.ok) { - throw new Error("Failed to get wall and roof visibility"); - } - - const result = await response.json(); - if (result === "user not found") { - const userpos = setEnvironment(organization, userId, false, false, false); - return userpos; - } else { - return result; - } - } catch (error) { - if (error instanceof Error) { - throw new Error(error.message); - } else { - throw new Error("An unknown error occurred"); - } + if (!response.ok) { + throw new Error("Failed to get wall and roof visibility"); } -}; \ No newline at end of file + + const result = await response.json(); + if (result === "user not found") { + const userpos = setEnvironment( + organization, + userId, + false, + false, + false, + 0, + true + ); + return userpos; + } else { + return result; + } + } catch (error) { + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error("An unknown error occurred"); + } + } +}; diff --git a/app/src/services/factoryBuilder/environment/setEnvironment.ts b/app/src/services/factoryBuilder/environment/setEnvironment.ts index 070146f..1f72959 100644 --- a/app/src/services/factoryBuilder/environment/setEnvironment.ts +++ b/app/src/services/factoryBuilder/environment/setEnvironment.ts @@ -1,26 +1,45 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -export const setEnvironment = async (organization: string, userId: string, wallVisibility: Boolean, roofVisibility: Boolean, shadowVisibility: Boolean) => { - try { - const response = await fetch(`${url_Backend_dwinzo}/api/v1/setEvironments`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ organization, userId, wallVisibility, roofVisibility, shadowVisibility }), - }); +export const setEnvironment = async ( + organization: string, + userId: string, + wallVisibility: Boolean, + roofVisibility: Boolean, + shadowVisibility: Boolean, + renderDistance: number, + limitDistance: boolean +) => { + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v1/setEvironments`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + organization, + userId, + wallVisibility, + roofVisibility, + shadowVisibility, + renderDistance, + limitDistance, + }), + } + ); - if (!response.ok) { - throw new Error("Failed to set wall and roof visibility"); - } - - const result = await response.json(); - return result; - } catch (error) { - if (error instanceof Error) { - throw new Error(error.message); - } else { - throw new Error("An unknown error occurred"); - } + if (!response.ok) { + throw new Error("Failed to set wall and roof visibility"); } -}; \ No newline at end of file + + const result = await response.json(); + return result; + } catch (error) { + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error("An unknown error occurred"); + } + } +}; diff --git a/app/src/services/marketplace/fetchAssets.ts b/app/src/services/marketplace/fetchAssets.ts index e434a2b..7a395f9 100644 --- a/app/src/services/marketplace/fetchAssets.ts +++ b/app/src/services/marketplace/fetchAssets.ts @@ -6,8 +6,8 @@ export const fetchAssets = async () => { throw new Error("Network response was not ok"); } const result = await response.json(); - const last10Assets = result.slice(-10); - console.log('last10Assets: ', last10Assets); + // const last10Assets = result.slice(-10); + // console.log('last10Assets: ', last10Assets); return result; } catch (error) { console.log("error: ", error); diff --git a/app/src/store/store.ts b/app/src/store/store.ts index a64f417..fe35801 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -208,7 +208,9 @@ export const useActiveLayer = create((set: any) => ({ interface RefTextUpdateState { refTextupdate: number; - setRefTextUpdate: (callback: (currentValue: number) => number | number) => void; + setRefTextUpdate: ( + callback: (currentValue: number) => number | number + ) => void; } export const useRefTextUpdate = create((set) => ({ @@ -216,7 +218,9 @@ export const useRefTextUpdate = create((set) => ({ setRefTextUpdate: (callback) => set((state) => ({ refTextupdate: - typeof callback === "function" ? callback(state.refTextupdate) : callback, + typeof callback === "function" + ? callback(state.refTextupdate) + : callback, })), })); @@ -251,7 +255,7 @@ export const useAzimuth = create((set: any) => ({ })); export const useRenderDistance = create((set: any) => ({ - renderDistance: 50, + renderDistance: 40, setRenderDistance: (x: any) => set({ renderDistance: x }), })); @@ -375,3 +379,7 @@ export const useWidgetSubOption = create((set: any) => ({ widgetSubOption: "2D", setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), })); +export const useLimitDistance = create((set: any) => ({ + limitDistance: true, + setLimitDistance: (x: any) => set({ limitDistance: x }), +})); diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index f60aca6..64eaaea 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -558,7 +558,7 @@ input { } .input-value { - width: 40px; + width: 42px; text-align: center; } } diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index 620d934..b3de954 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -114,7 +114,9 @@ flex-direction: column; justify-content: center; gap: 6px; - + .assets-container { + height: auto; + } .icon { position: absolute; top: 12px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index e8175c5..f028f76 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -936,6 +936,7 @@ padding: 0 6px; .assets-wrapper { + width: 100%; position: relative; margin: 8px 10px; @@ -1051,3 +1052,51 @@ } } } + +.assets-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 3px; + padding: 10px 0; + + .assets { + width: 117px; + height: 95px; + border-radius: 3.59px; + background-color: var(--background-color-gray); + padding: 8px; + padding-top: 12px; + font-weight: $medium-weight; + position: relative; + overflow: hidden; + + .asset-name { + position: relative; + z-index: 3; + font-size: var(--font-size-regular); + } + + .asset-image { + height: 100%; + width: 100%; + position: absolute; + // top: 50%; + // right: 5px; + // transform: translate(0, -50%); + top: 0; + left: 0; + z-index: 2; + } + } +} +.assets-result { + width: 100%; + height: 100%; + margin: 8px 10px; + .assets-wrapper { + margin: 0; + } +}