From d2be2094eb9c3bacca316b037cf09e966a03b911 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Tue, 1 Apr 2025 18:16:11 +0530 Subject: [PATCH] functionality for grid distance --- .../components/layout/sidebarLeft/Assets.tsx | 46 +++-- .../properties/GlobalProperties.tsx | 21 ++- .../templates/CollaborationPopup.tsx | 7 +- app/src/modules/market/Card.tsx | 1 - app/src/modules/market/MarketPlace.tsx | 1 - app/src/modules/scene/environment/ground.tsx | 64 +++++-- app/src/modules/scene/environment/shadow.tsx | 52 ++++-- app/src/store/store.ts | 26 ++- app/src/styles/layout/sidebar.scss | 2 - app/src/types/world/worldConstants.ts | 164 +++++++++--------- 10 files changed, 247 insertions(+), 137 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 3e2510e..c924b0c 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -24,26 +24,42 @@ interface AssetProp { price?: number; CreatedBy?: String; } +interface CategoryListProp { + assetImage?: string; + assetName?: string; + categoryImage: string; + category: string; +} const Assets: React.FC = () => { const { setSelectedItem } = useSelectedItem(); const [searchValue, setSearchValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState(null); const [categoryAssets, setCategoryAssets] = useState([]); const [filtereredAssets, setFiltereredAssets] = useState([]); + const [categoryList, setCategoryList] = useState([]); const handleSearchChange = (value: string) => { + const searchTerm = value.toLowerCase(); setSearchValue(value); - setSelectedCategory(null); - const searchTerm = value.toLowerCase(); // Convert input to lowercase + if (searchTerm.trim() === "" && !selectedCategory) { + setCategoryAssets([]); + return; + } const filteredModels = filtereredAssets?.filter((model) => { - if (!model?.tags || !model?.filename) return false; + if (!model?.tags || !model?.filename || !model?.category) return false; if (searchTerm.startsWith(":") && searchTerm.length > 1) { const tagSearchTerm = searchTerm.slice(1); return model.tags.toLowerCase().includes(tagSearchTerm); - } else if (!searchTerm.startsWith(":")) { + } else if (selectedCategory) { + return ( + model.category + .toLowerCase() + .includes(selectedCategory.toLowerCase()) && + model.filename.toLowerCase().includes(searchTerm) + ); + } else { return model.filename.toLowerCase().includes(searchTerm); } - return false; }); setCategoryAssets(filteredModels); @@ -56,10 +72,10 @@ const Assets: React.FC = () => { } catch {} }; filteredAssets(); - }, []); + }, [categoryAssets]); - const categoryList = useMemo( - () => [ + useEffect(() => { + setCategoryList([ { assetName: "Doors", assetImage: "", @@ -82,10 +98,8 @@ const Assets: React.FC = () => { { category: "Workstation", categoryImage: workStation }, { category: "Machines", categoryImage: machines }, { category: "Workers", categoryImage: worker }, - ], - [] - ); - + ]); + }, []); const fetchCategoryAssets = async (asset: any) => { setSelectedCategory(asset); if (asset === "Feneration") { @@ -127,7 +141,7 @@ const Assets: React.FC = () => {
-

Results for "{searchValue}"

+

Results for {searchValue}

@@ -155,10 +169,12 @@ const Assets: React.FC = () => {
) : selectedCategory ? (
- {/* Back Button */}
setSelectedCategory(null)} + onClick={() => { + setSelectedCategory(null); + setCategoryAssets([]); + }} > ← Back
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index d65a10c..4e6a537 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -13,6 +13,7 @@ import { useSelectedWallItem, useShadows, useSocketStore, + useTileDistance, useToggleView, useWallVisibility, } from "../../../../store/store"; @@ -29,14 +30,18 @@ const GlobalProperties: React.FC = () => { const { elevation, setElevation } = useElevation(); const { azimuth, setAzimuth } = useAzimuth(); const { renderDistance, setRenderDistance } = useRenderDistance(); - + const { setPlaneValue, setGridValue, planeValue, gridValue } = + useTileDistance(); + useEffect(() => { + console.log(gridValue, planeValue, "values"); + }, [gridValue, planeValue]); const { socket } = useSocketStore(); const { limitDistance, setLimitDistance } = useLimitDistance(); const [distance, setDistance] = useState(40); useEffect(() => {}, [limitDistance]); const [limitGridDistance, setLimitGridDistance] = useState(false); - const [gridDistance, setGridDistance] = useState(5); + const [gridDistance, setGridDistance] = useState(3); const optimizeScene = async (value: any) => { const email = localStorage.getItem("email"); @@ -89,7 +94,15 @@ const GlobalProperties: React.FC = () => { } function updateGridDistance(value: number) { setGridDistance(value); + // setGridValue({ size: value * 100, divisions: (value * 100) / 4 }); + // setPlaneValue({ height: value * 100, width: value * 100 }); } + function updatedGrid(value: number) { + console.log(" (value * 100) / 4 : ", (value * 100) / 4); + setGridValue({ size: value * 100, divisions: (value * 100) / 4 }); + setPlaneValue({ height: value * 100, width: value * 100 }); + } + const updatedDist = async (value: number) => { const email = localStorage.getItem("email"); const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; @@ -266,6 +279,7 @@ const GlobalProperties: React.FC = () => { max={CONSTANTS.distanceConfig.maxDistance} onChange={(value: number) => updateDistance(value)} onPointerUp={updatedDist} + key={"6"} />
@@ -283,7 +297,10 @@ const GlobalProperties: React.FC = () => { disabled={!limitGridDistance} value={gridDistance} key={"7"} + min={1} + max={5} onChange={(value: number) => updateGridDistance(value)} + onPointerUp={updatedGrid} />
); diff --git a/app/src/components/templates/CollaborationPopup.tsx b/app/src/components/templates/CollaborationPopup.tsx index 8312fe7..d2e1c16 100644 --- a/app/src/components/templates/CollaborationPopup.tsx +++ b/app/src/components/templates/CollaborationPopup.tsx @@ -1,10 +1,11 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import RenderOverlay from "./Overlay"; import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons"; import { AccessOption, User } from "../../types/users"; import RegularDropDown from "../ui/inputs/RegularDropDown"; import { access } from "fs"; import MultiEmailInvite from "../ui/inputs/MultiEmailInvite"; +import { useActiveUsers } from "../../store/store"; interface UserListTemplateProps { user: User; @@ -57,6 +58,10 @@ interface CollaborateProps { const CollaborationPopup: React.FC = ({ setUserManagement, }) => { + const { activeUsers } = useActiveUsers(); + useEffect(() => { + console.log("activeUsers: ", activeUsers); + }, [activeUsers]); const userName = localStorage.getItem("userName") || "Anonymous"; const users = [ { diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index c1a3289..ec9db06 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -38,7 +38,6 @@ 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/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index cd2e0e9..dfcf62e 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -25,7 +25,6 @@ const MarketPlace = () => { const filteredAssets = async () => { try { const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6"); - setModels(filt.items); setFilteredModels(filt.items); } catch {} diff --git a/app/src/modules/scene/environment/ground.tsx b/app/src/modules/scene/environment/ground.tsx index ebc017e..8d2fa22 100644 --- a/app/src/modules/scene/environment/ground.tsx +++ b/app/src/modules/scene/environment/ground.tsx @@ -1,22 +1,52 @@ -import { useToggleView } from '../../../store/store'; -import * as CONSTANTS from '../../../types/world/worldConstants'; +import { useTileDistance, useToggleView } from "../../../store/store"; +import * as CONSTANTS from "../../../types/world/worldConstants"; const Ground = ({ grid, plane }: any) => { - const { toggleView } = useToggleView(); - const savedTheme: string | null = localStorage.getItem('theme'); + const { toggleView } = useToggleView(); + const savedTheme: string | null = localStorage.getItem("theme"); + const { planeValue, gridValue } = useTileDistance(); - return ( - - - - - - - - - - - ) -} + return ( + + + + + + + + + + ); +}; export default Ground; diff --git a/app/src/modules/scene/environment/shadow.tsx b/app/src/modules/scene/environment/shadow.tsx index 62202b3..4625cde 100644 --- a/app/src/modules/scene/environment/shadow.tsx +++ b/app/src/modules/scene/environment/shadow.tsx @@ -1,9 +1,22 @@ -import { useRef, useEffect} from 'react'; -import { useThree } from '@react-three/fiber'; -import * as THREE from 'three'; -import { useAzimuth, useElevation, useShadows, useSunPosition, useFloorItems, useWallItems } from '../../../store/store'; -import * as CONSTANTS from '../../../types/world/worldConstants'; -const shadowWorker = new Worker(new URL('../../../services/factoryBuilder/webWorkers/shadowWorker', import.meta.url)); +import { useRef, useEffect } from "react"; +import { useThree } from "@react-three/fiber"; +import * as THREE from "three"; +import { + useAzimuth, + useElevation, + useShadows, + useSunPosition, + useFloorItems, + useWallItems, + useTileDistance, +} from "../../../store/store"; +import * as CONSTANTS from "../../../types/world/worldConstants"; +const shadowWorker = new Worker( + new URL( + "../../../services/factoryBuilder/webWorkers/shadowWorker", + import.meta.url + ) +); export default function Shadows() { const { shadows, setShadows } = useShadows(); @@ -15,6 +28,7 @@ export default function Shadows() { const { azimuth, setAzimuth } = useAzimuth(); const { floorItems } = useFloorItems(); const { wallItems } = useWallItems(); + const { planeValue } = useTileDistance(); useEffect(() => { gl.shadowMap.enabled = true; @@ -48,9 +62,9 @@ export default function Shadows() { useEffect(() => { if (controls && shadows) { updateShadows(); - (controls as any).addEventListener('update', updateShadows); + (controls as any).addEventListener("update", updateShadows); return () => { - (controls as any).removeEventListener('update', updateShadows); + (controls as any).removeEventListener("update", updateShadows); }; } }, [controls, elevation, azimuth, shadows]); @@ -75,10 +89,24 @@ export default function Shadows() { shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias} /> - - - + + {/* + */} + + ); -} \ No newline at end of file +} diff --git a/app/src/store/store.ts b/app/src/store/store.ts index d111aae..9de1f39 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -11,10 +11,13 @@ export const useSocketStore = create((set: any, get: any) => ({ return; } - const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, { - reconnection: false, - auth: { email, organization }, - }); + const socket = io( + `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, + { + reconnection: false, + auth: { email, organization }, + } + ); set({ socket }); }, @@ -401,3 +404,18 @@ export const useLimitDistance = create((set: any) => ({ limitDistance: true, setLimitDistance: (x: any) => set({ limitDistance: x }), })); + +export const useTileDistance = create((set: any) => ({ + gridValue: { size: 300, divisions: 75 }, + planeValue: { height: 300, width: 300 }, + + setGridValue: (value: any) => + set((state: any) => ({ + gridValue: { ...state.gridValue, ...value }, + })), + + setPlaneValue: (value: any) => + set((state: any) => ({ + planeValue: { ...state.planeValue, ...value }, + })), +})); diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 92b4eb2..63297c9 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1052,7 +1052,6 @@ position: relative; z-index: 3; font-size: var(--font-size-regular); - color: var(--background-color); } .asset-image { @@ -1103,7 +1102,6 @@ position: relative; z-index: 3; font-size: var(--font-size-regular); - color: var(--background-color); } .asset-image { diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index 2bc3835..fe0aafb 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -59,39 +59,39 @@ export type ThreeDimension = { }; export type GridConfig = { - size: number; - divisions: number; - primaryColor: string; - secondaryColor: string; - position2D: [x: number, y: number, z: number]; - position3D: [x: number, y: number, z: number]; -} + size: number; + divisions: number; + primaryColor: string; + secondaryColor: string; + position2D: [x: number, y: number, z: number]; + position3D: [x: number, y: number, z: number]; +}; export type PlaneConfig = { - position2D: [x: number, y: number, z: number]; - position3D: [x: number, y: number, z: number]; - rotation: number; - width: number; - height: number; - color: string; -} + position2D: [x: number, y: number, z: number]; + position3D: [x: number, y: number, z: number]; + rotation: number; + width: number; + height: number; + color: string; +}; export type ShadowConfig = { - shadowOffset: number, - shadowmapSizewidth: number, - shadowmapSizeheight: number, - shadowcamerafar: number, - shadowcameranear: number, - shadowcameratop: number, - shadowcamerabottom: number, - shadowcameraleft: number, - shadowcameraright: number, - shadowbias: number, - shadownormalBias: number, - shadowMaterialPosition: [x: number, y: number, z: number], - shadowMaterialRotation: [x: number, y: number, z: number], - shadowMaterialOpacity: number, -} + shadowOffset: number; + shadowmapSizewidth: number; + shadowmapSizeheight: number; + shadowcamerafar: number; + shadowcameranear: number; + shadowcameratop: number; + shadowcamerabottom: number; + shadowcameraleft: number; + shadowcameraright: number; + shadowbias: number; + shadownormalBias: number; + shadowMaterialPosition: [x: number, y: number, z: number]; + shadowMaterialRotation: [x: number, y: number, z: number]; + shadowMaterialOpacity: number; +}; export type SkyConfig = { defaultTurbidity: number; @@ -109,34 +109,34 @@ export type AssetConfig = { }; export type PointConfig = { - defaultInnerColor: string; - defaultOuterColor: string; - deleteColor: string; - boxScale: [number, number, number]; - wallOuterColor: string; - floorOuterColor: string; - aisleOuterColor: string; - zoneOuterColor: string; - snappingThreshold: number; -} + defaultInnerColor: string; + defaultOuterColor: string; + deleteColor: string; + boxScale: [number, number, number]; + wallOuterColor: string; + floorOuterColor: string; + aisleOuterColor: string; + zoneOuterColor: string; + snappingThreshold: number; +}; export type LineConfig = { - tubularSegments: number; - radius: number; - radialSegments: number; - wallName: string; - floorName: string; - aisleName: string; - zoneName: string; - referenceName: string; - lineIntersectionPoints: number; - defaultColor: string; - wallColor: string; - floorColor: string; - aisleColor: string; - zoneColor: string; - helperColor: string; -} + tubularSegments: number; + radius: number; + radialSegments: number; + wallName: string; + floorName: string; + aisleName: string; + zoneName: string; + referenceName: string; + lineIntersectionPoints: number; + defaultColor: string; + wallColor: string; + floorColor: string; + aisleColor: string; + zoneColor: string; + helperColor: string; +}; export type WallConfig = { defaultColor: string; @@ -145,10 +145,10 @@ export type WallConfig = { }; export type FloorConfig = { - defaultColor: string; - height: number; - textureScale: number; -} + defaultColor: string; + height: number; + textureScale: number; +}; export type RoofConfig = { defaultColor: string; @@ -156,16 +156,16 @@ export type RoofConfig = { }; export type AisleConfig = { - width: number; - height: number; - defaultColor: number; -} + width: number; + height: number; + defaultColor: number; +}; export type ZoneConfig = { - defaultColor: string; - height: number; - color: string; -} + defaultColor: string; + height: number; + color: string; +}; export type ColumnConfig = { defaultColor: string; @@ -242,24 +242,24 @@ export const threeDimension: ThreeDimension = { export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position export const gridConfig: GridConfig = { - size: 300, // Size of the grid - divisions: 75, // Number of divisions in the grid - primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid - secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid + size: 300, // Size of the grid + divisions: 75, // Number of divisions in the grid + primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid + secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid - position2D: [0, 0.1, 0], // Position of the grid in 2D view - position3D: [0, -0.5, 0], // Position of the grid in 3D view -} + position2D: [0, 0.1, 0], // Position of the grid in 2D view + position3D: [0, -0.5, 0], // Position of the grid in 3D view +}; export const planeConfig: PlaneConfig = { position2D: [0, -0.5, 0], // Position of the plane position3D: [0, -0.65, 0], // Position of the plane rotation: -Math.PI / 2, // Rotation of the plane - width: 300, // Width of the plane - height: 300, // Height of the plane - color: savedTheme === "dark" ? "#323232" : "#f3f3f3" // Color of the plane -} + width: 300, // Width of the plane + height: 300, // Height of the plane + color: savedTheme === "dark" ? "#323232" : "#f3f3f3", // Color of the plane +}; export const shadowConfig: ShadowConfig = { shadowOffset: 50, // Offset of the shadow @@ -349,10 +349,10 @@ export const aisleConfig: AisleConfig = { }; export const zoneConfig: ZoneConfig = { - defaultColor: "black", // Default color of the zones - height: 3, - color: "#8656DF" // Color of the zones -} + defaultColor: "black", // Default color of the zones + height: 3, + color: "#8656DF", // Color of the zones +}; export const columnConfig: ColumnConfig = { defaultColor: "White", // Default color of the columns