Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

functionality for grid distance

Browse Source
This commit is contained in:
Poovizhi99
2025-04-01 18:16:11 +05:30
parent e1ea4525d9
commit d2be2094eb
10 changed files with 247 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@@ -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<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
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 = () => {
<div className="assets-result">
<div className="assets-wrapper">
<div className="searched-content">
<p>Results for "{searchValue}"</p>
<p>Results for {searchValue}</p>
</div>
</div>
<div className="assets-container">
@@ -155,10 +169,12 @@ const Assets: React.FC = () => {
</div>
) : selectedCategory ? (
<div className="assets-wrapper">
{/* Back Button */}
<div
className="back-button"
onClick={() => setSelectedCategory(null)}
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
← Back
</div>

21
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@@ -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<number>(40);
useEffect(() => {}, [limitDistance]);
const [limitGridDistance, setLimitGridDistance] = useState(false);
const [gridDistance, setGridDistance] = useState<number>(5);
const [gridDistance, setGridDistance] = useState<number>(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"}
/>
<div className="split"></div>
@@ -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}
/>
</div>
);

7
app/src/components/templates/CollaborationPopup.tsx
View File

@@ -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<CollaborateProps> = ({
setUserManagement,
}) => {
const { activeUsers } = useActiveUsers();
useEffect(() => {
console.log("activeUsers: ", activeUsers);
}, [activeUsers]);
const userName = localStorage.getItem("userName") || "Anonymous";
const users = [
{

1
app/src/modules/market/Card.tsx
View File

@@ -38,7 +38,6 @@ const Card: React.FC<CardProps> = ({
description,
onSelectCard,
}) => {
console.log('description: ', description);
const handleCardSelect = () => {
onSelectCard({ assetName, uploadedOn, price, rating, views, description });
};

1
app/src/modules/market/MarketPlace.tsx
View File

@@ -25,7 +25,6 @@ const MarketPlace = () => {
const filteredAssets = async () => {
try {
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
setModels(filt.items);
setFilteredModels(filt.items);
} catch {}

64
app/src/modules/scene/environment/ground.tsx
View File

@@ -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 (
<mesh name="Ground">
<mesh ref={grid} name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
<gridHelper args={[CONSTANTS.gridConfig.size, CONSTANTS.gridConfig.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
</mesh>
<mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
<planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
</mesh>
</mesh>
)
}
return (
<mesh name="Ground">
<mesh
ref={grid}
name="Grid"
position={
!toggleView
? CONSTANTS.gridConfig.position3D
: CONSTANTS.gridConfig.position2D
}
>
<gridHelper
args={[
gridValue.size,
gridValue.divisions,
// CONSTANTS.gridConfig.size,
// CONSTANTS.gridConfig.divisions,
CONSTANTS.gridConfig.primaryColor,
CONSTANTS.gridConfig.secondaryColor,
]}
/>
</mesh>
<mesh
ref={plane}
rotation-x={CONSTANTS.planeConfig.rotation}
position={
!toggleView
? CONSTANTS.planeConfig.position3D
: CONSTANTS.planeConfig.position2D
}
name="Plane"
receiveShadow
>
<planeGeometry
args={[planeValue.width, planeValue.height]}
// args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
/>
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
</mesh>
</mesh>
);
};
export default Ground;

52
app/src/modules/scene/environment/shadow.tsx
View File

@@ -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}
/>
<object3D ref={targetRef} />
<mesh position={CONSTANTS.shadowConfig.shadowMaterialPosition} rotation={CONSTANTS.shadowConfig.shadowMaterialRotation} receiveShadow>
<planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
<shadowMaterial opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity} transparent />
<mesh
position={CONSTANTS.shadowConfig.shadowMaterialPosition}
rotation={CONSTANTS.shadowConfig.shadowMaterialRotation}
receiveShadow
>
{/* <planeGeometry
args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
/>
<shadowMaterial
opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
transparent
/> */}
<planeGeometry args={[planeValue.width, planeValue.height]} />
<shadowMaterial
opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
transparent
/>
</mesh>
</>
);
}
}

26
app/src/store/store.ts
View File

@@ -11,10 +11,13 @@ export const useSocketStore = create<any>((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<any>((set: any) => ({
limitDistance: true,
setLimitDistance: (x: any) => set({ limitDistance: x }),
}));
export const useTileDistance = create<any>((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 },
})),
}));

2
app/src/styles/layout/sidebar.scss
View File

@@ -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 {

164
app/src/types/world/worldConstants.ts
View File

@@ -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