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

Merge remote-tracking branch 'origin/simulation-agv' into simulation

This commit is contained in:
Jerald-Golden-B 2025-03-31 14:29:04 +05:30
parent 6e4c8282c5 cacb23ea5a
commit b71fdbddbb
15 changed files with 581 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/.env
View File

@ -8,7 +8,8 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000 REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
# Base URL for the server marketplace API. # Base URL for the server marketplace API.
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011 # REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
REACT_APP_SERVER_MARKETPLACE_URL=192.168.0.111:3501
# base url for IoT socket server # base url for IoT socket server
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010 REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010

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

@ -1,105 +1,95 @@
import React, { useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import Search from "../../ui/inputs/Search"; import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png"; import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png"; import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png"; import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.png"; import feneration from "../../../assets/image/feneration.png";
import worker from "../../../assets/image/worker.png"; import worker from "../../../assets/image/worker.png";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
interface AssetProp {
filename: string;
thumbnail?: string;
category: string;
description?: string;
tags?: string;
url?: String;
uploadDate?: number;
isArchieve?: boolean;
animated?: boolean;
price?: number;
CreatedBy?: String;
}
const Assets: React.FC = () => { const Assets: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>(""); const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null); const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
const handleSearchChange = (value: string) => { const handleSearchChange = (value: string) => {
setSearchValue(value); setSearchValue(value);
setSelectedCategory(null); // Reset selected category when search changes setSelectedCategory(null); // Reset selected category when search changes
}; };
const categoryList = [ const categoryList = useMemo(
{ () => [
assetName: "Doors", {
assetImage: "", assetName: "Doors",
category: "Feneration", assetImage: "",
categoryImage: feneration, category: "Feneration",
}, categoryImage: feneration,
{ },
assetName: "Windows", {
assetImage: "", assetName: "Windows",
category: "Feneration", assetImage: "",
categoryImage: feneration, category: "Feneration",
}, categoryImage: feneration,
{ },
assetName: "Pillars", {
assetImage: "", assetName: "Pillars",
category: "Feneration", assetImage: "",
categoryImage: feneration, category: "Feneration",
}, categoryImage: feneration,
{ },
assetName: "Forklift", { category: "Vehicles", categoryImage: vehicle },
assetImage: "", { category: "Workstation", categoryImage: workStation },
category: "Vehicles", { category: "Machines", categoryImage: machines },
categoryImage: vehicle, { category: "Workers", categoryImage: worker },
}, ],
{ []
assetName: "AGV",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "Pallet",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Controller",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Conveyor",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "VMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "CMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "Male Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
{
assetName: "Female Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
];
// Get unique categories
const uniqueCategories = Array.from(
new Set(categoryList.map((asset) => asset.category))
); );
// Filter assets based on the selected category const fetchCategoryAssets = async (asset: any) => {
const filteredAssets = setSelectedCategory(asset);
selectedCategory !== null if (asset === "Feneration") {
? categoryList.filter((asset) => asset.category === selectedCategory) const localAssets: AssetProp[] = [
: []; {
filename: "arch",
category: "Feneration",
url: arch,
},
{
filename: "door",
category: "Feneration",
url: door,
},
{
filename: "window",
category: "Feneration",
url: window,
},
];
setFilteredAsset(localAssets);
} else {
try {
const res = await getCategoryAsset(asset);
setFilteredAsset(res || []); // Ensure it's always an array
} catch (error) {}
}
};
useEffect(() => {}, [filteredAsset]);
return ( return (
<div className="assets-container"> <div className="assets-container">
<Search onChange={handleSearchChange} /> <Search onChange={handleSearchChange} />
@ -118,23 +108,36 @@ const Assets: React.FC = () => {
</div> </div>
<h2>{selectedCategory}</h2> <h2>{selectedCategory}</h2>
<div className="assets-container"> <div className="assets-container">
{filteredAssets.map((asset, index) => ( {filteredAsset &&
<div key={index} className="assets"> filteredAsset?.map((asset: any, index: number) => (
<img <div key={index} className="assets">
src={asset.assetImage} {asset?.thumbnail && (
alt={asset.assetName} <img
className="asset-image" src={asset?.thumbnail}
/> alt={asset.filename}
<div className="asset-name">{asset.assetName}</div> className="asset-image"
</div> />
))} )}
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
</div> </div>
</div> </div>
) : ( ) : (
<div className="assets-wrapper"> <div className="assets-wrapper">
<h2>Categories</h2> <h2>Categories</h2>
<div className="categories-container"> <div className="categories-container">
{uniqueCategories.map((category, index) => { {Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find( const categoryInfo = categoryList.find(
(asset) => asset.category === category (asset) => asset.category === category
); );
@ -142,7 +145,7 @@ const Assets: React.FC = () => {
<div <div
key={index} key={index}
className="category" className="category"
onClick={() => setSelectedCategory(category)} onClick={() => fetchCategoryAssets(category)}
> >
<img <img
src={categoryInfo?.categoryImage || ""} src={categoryInfo?.categoryImage || ""}
@ -161,4 +164,3 @@ const Assets: React.FC = () => {
}; };
export default Assets; export default Assets;

9
app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
View File

@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
); );
} }
if (preset.type === "range") { if (preset.type === "range") {
return <InputRange key={index} label={preset.inputs.label} />; return (
<InputRange
key={index}
label={preset.inputs.label}
min={0}
max={0}
/>
);
} }
return null; return null;
})} })}

17
app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
View File

@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
const [nextId, setNextId] = useState(1); // Unique ID for new entries const [nextId, setNextId] = useState(1); // Unique ID for new entries
const { selectedFloorItem } = useselectedFloorItem(); const { selectedFloorItem } = useselectedFloorItem();
let xValue = selectedFloorItem.position.x;
let zValue = selectedFloorItem.position.z;
let rotationRad = selectedFloorItem.rotation.y;
let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
// useEffect(() => {}, [selectedFloorItem]);
// Function to handle adding new user data // Function to handle adding new user data
const handleAddUserData = () => { const handleAddUserData = () => {
const newUserData: UserData = { const newUserData: UserData = {
@ -57,10 +51,15 @@ const AssetProperties: React.FC = () => {
<PositionInput <PositionInput
onChange={() => {}} onChange={() => {}}
value1={xValue.toFixed(5)} value1={selectedFloorItem.position.x.toFixed(5)}
value2={zValue.toFixed(5)} value2={selectedFloorItem.position.z.toFixed(5)}
/>
<RotationInput
onChange={() => {}}
value={parseFloat(
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
)}
/> />
<RotationInput onChange={() => {}} value={rotationDeg} />
<div className="split"></div> <div className="split"></div>

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

@ -16,7 +16,7 @@ import {
useWallVisibility, useWallVisibility,
} from "../../../../store/store"; } from "../../../../store/store";
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment"; import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
import * as CONSTANTS from "../../../../types/world/worldConstants";
const GlobalProperties: React.FC = () => { const GlobalProperties: React.FC = () => {
const { toggleView, setToggleView } = useToggleView(); const { toggleView, setToggleView } = useToggleView();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@ -29,18 +29,20 @@ const GlobalProperties: React.FC = () => {
const { renderDistance, setRenderDistance } = useRenderDistance(); const { renderDistance, setRenderDistance } = useRenderDistance();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const [limitDistance, setLimitDistance] = useState(false); const [limitDistance, setLimitDistance] = useState(false);
const [distance, setDistance] = useState<number>(5); const [distance, setDistance] = useState<number>(30);
const [limitGridDistance, setLimitGridDistance] = useState(false); const [limitGridDistance, setLimitGridDistance] = useState(false);
const [gridDistance, setGridDistance] = useState<number>(5); const [gridDistance, setGridDistance] = useState<number>(5);
function optimizeScene() { function optimizeScene() {
setLimitDistance(true); setLimitDistance(true);
setDistance(5); setDistance(30);
} }
function updateDistance(value: number) { function updateDistance(value: number) {
console.log("value: ", value);
setDistance(value); setDistance(value);
setRenderDistance(value);
} }
function updateGridDistance(value: number) { function updateGridDistance(value: number) {
@ -134,6 +136,15 @@ const GlobalProperties: React.FC = () => {
} }
}; };
// function changeRenderDistance(e: any) {
// if (parseInt(e.target.value) < 20) {
// setRenderDistance(20);
// } else if (parseInt(e.target.value) > 75) {
// setRenderDistance(75);
// } else {
// setRenderDistance(parseInt(e.target.value));
// }
// }
return ( return (
<div className="global-properties-container"> <div className="global-properties-container">
<div className="header">Environment</div> <div className="header">Environment</div>
@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => {
/> />
<div className="split"></div> <div className="split"></div>
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
<InputToggle <InputToggle
inputKey="4" inputKey="4"
label="Limit Render Distance" label="Limit Render Distance"
@ -183,6 +194,8 @@ const GlobalProperties: React.FC = () => {
disabled={!limitDistance} disabled={!limitDistance}
value={distance} value={distance}
key={"5"} key={"5"}
min={CONSTANTS.distanceConfig.minDistance}
max={CONSTANTS.distanceConfig.maxDistance}
onChange={(value: number) => updateDistance(value)} onChange={(value: number) => updateDistance(value)}
/> />

38
app/src/components/ui/Tools.tsx
View File

@ -68,7 +68,7 @@ const Tools: React.FC = () => {
: true : true
); );
}, []); }, []);
useEffect(() => {}, [activeModule]);
useEffect(() => { useEffect(() => {
setActiveTool(activeSubTool); setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool); setActiveSubTool(activeSubTool);
@ -433,28 +433,20 @@ const Tools: React.FC = () => {
</div> </div>
)} )}
</div> </div>
{activeModule === "builder" && ( <div className="split"></div>
<> <div
<div className="split"></div> className={`toggle-threed-button${
<div toggleThreeD ? " toggled" : ""
className={`toggle-threed-button${ }`}
toggleThreeD ? " toggled" : "" onClick={toggleSwitch}
}`} >
onClick={toggleSwitch} <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
> 2d
<div </div>
className={`toggle-option${!toggleThreeD ? " active" : ""}`} <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
> 3d
2d </div>
</div> </div>
<div
className={`toggle-option${toggleThreeD ? " active" : ""}`}
>
3d
</div>
</div>
</>
)}
</div> </div>
</> </>
) : ( ) : (

7
app/src/components/ui/inputs/InputRange.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import * as CONSTANTS from "../../../types/world/worldConstants";
interface InputToggleProps { interface InputToggleProps {
label: string; // Represents the toggle state (on/off) label: string; // Represents the toggle state (on/off)
min?: number; min?: number;
@ -14,8 +14,8 @@ const InputRange: React.FC<InputToggleProps> = ({
label, label,
onClick, onClick,
onChange, onChange,
min = 0, min,
max = 10, max,
disabled, disabled,
value = 5, value = 5,
}) => { }) => {
@ -23,6 +23,7 @@ const InputRange: React.FC<InputToggleProps> = ({
function handleChange(e: React.ChangeEvent<HTMLInputElement>) { function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
const newValue = parseInt(e.target.value); // Parse the value to an integer const newValue = parseInt(e.target.value); // Parse the value to an integer
setRangeValue(newValue); // Update the local state setRangeValue(newValue); // Update the local state
if (onChange) { if (onChange) {

2
app/src/modules/market/AssetPreview.tsx
View File

@ -94,7 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
<div className="asset-details"> <div className="asset-details">
<div className="asset-name">{selectedCard.assetName}</div> <div className="asset-name">{selectedCard.assetName}</div>
<div className="asset-description"> <div className="asset-description">
{`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`} {`${selectedCard.description}`}
</div> </div>
<div className="asset-review"> <div className="asset-review">
<div className="asset-rating"> <div className="asset-rating">

3
app/src/modules/market/CardsContainer.tsx
View File

@ -14,6 +14,7 @@ interface ModelData {
thumbnail: string; thumbnail: string;
uploadDate: number; uploadDate: number;
_id: string; _id: string;
price: number;
} }
interface ModelsProps { interface ModelsProps {
models: ModelData[]; models: ModelData[];
@ -50,7 +51,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
key={assetDetail._id} key={assetDetail._id}
assetName={assetDetail?.filename} assetName={assetDetail?.filename}
uploadedOn={assetDetail.uploadDate} uploadedOn={assetDetail.uploadDate}
price={36500} price={assetDetail?.price}
rating={4.5} rating={4.5}
views={800} views={800}
onSelectCard={handleCardSelect} onSelectCard={handleCardSelect}

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

@ -17,6 +17,7 @@ interface ModelData {
thumbnail: string; thumbnail: string;
uploadDate: number; uploadDate: number;
_id: string; _id: string;
price: number;
} }
interface ModelsProps { interface ModelsProps {
models: ModelData[]; models: ModelData[];

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

@ -15,6 +15,7 @@ interface ModelData {
thumbnail: string; thumbnail: string;
uploadDate: number; uploadDate: number;
_id: string; _id: string;
price: number;
} }
const MarketPlace = () => { const MarketPlace = () => {
const [models, setModels] = useState<ModelData[]>([]); const [models, setModels] = useState<ModelData[]>([]);
@ -24,6 +25,7 @@ const MarketPlace = () => {
const filteredAssets = async () => { const filteredAssets = async () => {
try { try {
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6"); const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
setModels(filt.items); setModels(filt.items);
setFilteredModels(filt.items); setFilteredModels(filt.items);
} catch {} } catch {}

226
app/src/modules/scene/postProcessing/postProcessing.tsx
View File

@ -1,111 +1,125 @@
import * as THREE from 'three' import * as THREE from "three";
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing' import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { BlendFunction } from 'postprocessing' import { BlendFunction } from "postprocessing";
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store'; import {
import * as Types from '../../../types/world/worldTypes' useDeletableFloorItem,
import * as CONSTANTS from '../../../types/world/worldConstants'; useSelectedActionSphere,
useSelectedPath,
useSelectedWallItem,
useselectedFloorItem,
} from "../../../store/store";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useEffect } from "react";
export default function PostProcessing() { export default function PostProcessing() {
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem(); const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem(); const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
const { selectedActionSphere } = useSelectedActionSphere(); const { selectedActionSphere } = useSelectedActionSphere();
const { selectedPath } = useSelectedPath(); const { selectedPath } = useSelectedPath();
function flattenChildren(children: any[]) { function flattenChildren(children: any[]) {
const allChildren: any[] = []; const allChildren: any[] = [];
children.forEach(child => { children.forEach((child) => {
allChildren.push(child); allChildren.push(child);
if (child.children && child.children.length > 0) { if (child.children && child.children.length > 0) {
allChildren.push(...flattenChildren(child.children)); allChildren.push(...flattenChildren(child.children));
} }
}); });
return allChildren; return allChildren;
} }
return ( return (
<> <>
<EffectComposer autoClear={false}> <EffectComposer autoClear={false}>
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} /> <N8AO
{deletableFloorItem && color="black"
<Outline aoRadius={20}
selection={flattenChildren(deletableFloorItem.children)} intensity={7}
selectionLayer={10} distanceFalloff={4}
width={3000} aoSamples={32}
blendFunction={BlendFunction.ALPHA} denoiseRadius={6}
edgeStrength={5} denoiseSamples={16}
resolutionScale={2} />
pulseSpeed={0} {deletableFloorItem && (
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} <Outline
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} selection={flattenChildren(deletableFloorItem.children)}
blur={true} selectionLayer={10}
xRay={true} width={3000}
/> blendFunction={BlendFunction.ALPHA}
} edgeStrength={5}
{selectedWallItem && resolutionScale={2}
<Outline pulseSpeed={0}
selection={ visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
selectedWallItem.children[1].children[0].children.filter( hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
(child: Types.Mesh) => child.name !== "CSG_REF" blur={true}
) xRay={true}
} />
selectionLayer={10} )}
width={3000} {selectedWallItem && (
blendFunction={BlendFunction.ALPHA} <Outline
edgeStrength={5} selection={selectedWallItem.children[1].children[0].children.filter(
resolutionScale={2} (child: Types.Mesh) => child.name !== "CSG_REF"
pulseSpeed={0} )}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} selectionLayer={10}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} width={3000}
blur={true} blendFunction={BlendFunction.ALPHA}
xRay={true} edgeStrength={5}
/>} resolutionScale={2}
{selectedFloorItem && pulseSpeed={0}
<Outline visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selection={flattenChildren(selectedFloorItem.children)} hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selectionLayer={10} blur={true}
width={3000} xRay={true}
blendFunction={BlendFunction.ALPHA} />
edgeStrength={5} )}
resolutionScale={2} {selectedFloorItem && (
pulseSpeed={0} <Outline
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} selection={flattenChildren(selectedFloorItem.children)}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} selectionLayer={10}
blur={true} width={3000}
xRay={true} blendFunction={BlendFunction.ALPHA}
/> edgeStrength={5}
} resolutionScale={2}
{selectedActionSphere && pulseSpeed={0}
<Outline visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selection={[selectedActionSphere.point]} hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selectionLayer={10} blur={true}
width={750} xRay={true}
blendFunction={BlendFunction.ALPHA} />
edgeStrength={15} )}
resolutionScale={2} {selectedActionSphere && (
pulseSpeed={0} <Outline
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} selection={[selectedActionSphere.point]}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} selectionLayer={10}
blur={true} width={750}
xRay={true} blendFunction={BlendFunction.ALPHA}
/> edgeStrength={15}
} resolutionScale={2}
{selectedPath && pulseSpeed={0}
<Outline visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selection={flattenChildren(selectedPath.group.children)} hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
selectionLayer={10} blur={true}
width={750} xRay={true}
blendFunction={BlendFunction.ALPHA} />
edgeStrength={15} )}
resolutionScale={2} {selectedPath && (
pulseSpeed={0} <Outline
visibleEdgeColor={0x6f42c1} selection={flattenChildren(selectedPath.group.children)}
hiddenEdgeColor={0x6f42c1} selectionLayer={10}
blur={true} width={750}
xRay={true} blendFunction={BlendFunction.ALPHA}
/> edgeStrength={15}
} resolutionScale={2}
</EffectComposer> pulseSpeed={0}
</> visibleEdgeColor={0x6f42c1}
) hiddenEdgeColor={0x6f42c1}
blur={true}
xRay={true}
/>
)}
</EffectComposer>
</>
);
} }

19
app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts Normal file
View File

@ -0,0 +1,19 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const getCategoryAsset = async (categoryName: any) => {
try {
const response = await fetch(
`${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
return result;
} catch (error: any) {
throw new Error(error.message);
}
};

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

@ -1029,10 +1029,14 @@
} }
.asset-image { .asset-image {
height: 100%;
width: 100%;
position: absolute; position: absolute;
top: 50%; // top: 50%;
right: 5px; // right: 5px;
transform: translate(0, -50%); // transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2; z-index: 2;
} }
} }

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

@ -1,384 +1,390 @@
export type Controls = { export type Controls = {
azimuthRotateSpeed: number; azimuthRotateSpeed: number;
polarRotateSpeed: number; polarRotateSpeed: number;
truckSpeed: number; truckSpeed: number;
minDistance: number; minDistance: number;
maxDistance: number; maxDistance: number;
maxPolarAngle: number; maxPolarAngle: number;
leftMouse: number; leftMouse: number;
forwardSpeed: number; forwardSpeed: number;
backwardSpeed: number; backwardSpeed: number;
leftSpeed: number; leftSpeed: number;
rightSpeed: number; rightSpeed: number;
}; };
export type ThirdPersonControls = { export type ThirdPersonControls = {
azimuthRotateSpeed: number; azimuthRotateSpeed: number;
polarRotateSpeed: number; polarRotateSpeed: number;
truckSpeed: number; truckSpeed: number;
maxDistance: number; maxDistance: number;
maxPolarAngle: number; maxPolarAngle: number;
minZoom: number; minZoom: number;
maxZoom: number; maxZoom: number;
targetOffset: number; targetOffset: number;
cameraHeight: number; cameraHeight: number;
leftMouse: number; leftMouse: number;
rightMouse: number; rightMouse: number;
wheelMouse: number; wheelMouse: number;
middleMouse: number; middleMouse: number;
}; };
export type ControlsTransition = { export type ControlsTransition = {
leftMouse: number; leftMouse: number;
rightMouse: number; rightMouse: number;
wheelMouse: number; wheelMouse: number;
middleMouse: number; middleMouse: number;
}; };
export type TwoDimension = { export type TwoDimension = {
defaultPosition: [x: number, y: number, z: number]; defaultPosition: [x: number, y: number, z: number];
defaultTarget: [x: number, y: number, z: number]; defaultTarget: [x: number, y: number, z: number];
defaultAzimuth: number; defaultAzimuth: number;
minDistance: number; minDistance: number;
leftMouse: number; leftMouse: number;
rightMouse: number; rightMouse: number;
}; };
export type ThreeDimension = { export type ThreeDimension = {
defaultPosition: [x: number, y: number, z: number]; defaultPosition: [x: number, y: number, z: number];
defaultTarget: [x: number, y: number, z: number]; defaultTarget: [x: number, y: number, z: number];
defaultRotation: [x: number, y: number, z: number]; defaultRotation: [x: number, y: number, z: number];
defaultAzimuth: number; defaultAzimuth: number;
boundaryBottom: [x: number, y: number, z: number]; boundaryBottom: [x: number, y: number, z: number];
boundaryTop: [x: number, y: number, z: number]; boundaryTop: [x: number, y: number, z: number];
minDistance: number; minDistance: number;
leftMouse: number; leftMouse: number;
rightMouse: number; rightMouse: number;
}; };
export type GridConfig = { export type GridConfig = {
size: number; size: number;
divisions: number; divisions: number;
primaryColor: string; primaryColor: string;
secondaryColor: string; secondaryColor: string;
position2D: [x: number, y: number, z: number]; position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number]; position3D: [x: number, y: number, z: number];
} };
export type PlaneConfig = { export type PlaneConfig = {
position2D: [x: number, y: number, z: number]; position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number]; position3D: [x: number, y: number, z: number];
rotation: number; rotation: number;
width: number; width: number;
height: number; height: number;
color: string; color: string;
} };
export type ShadowConfig = { export type ShadowConfig = {
shadowOffset: number, shadowOffset: number;
shadowmapSizewidth: number, shadowmapSizewidth: number;
shadowmapSizeheight: number, shadowmapSizeheight: number;
shadowcamerafar: number, shadowcamerafar: number;
shadowcameranear: number, shadowcameranear: number;
shadowcameratop: number, shadowcameratop: number;
shadowcamerabottom: number, shadowcamerabottom: number;
shadowcameraleft: number, shadowcameraleft: number;
shadowcameraright: number, shadowcameraright: number;
shadowbias: number, shadowbias: number;
shadownormalBias: number, shadownormalBias: number;
shadowMaterialPosition: [x: number, y: number, z: number], shadowMaterialPosition: [x: number, y: number, z: number];
shadowMaterialRotation: [x: number, y: number, z: number], shadowMaterialRotation: [x: number, y: number, z: number];
shadowMaterialOpacity: number, shadowMaterialOpacity: number;
} };
export type SkyConfig = { export type SkyConfig = {
defaultTurbidity: number; defaultTurbidity: number;
maxTurbidity: number; maxTurbidity: number;
minTurbidity: number; minTurbidity: number;
defaultRayleigh: number; defaultRayleigh: number;
mieCoefficient: number; mieCoefficient: number;
mieDirectionalG: number; mieDirectionalG: number;
skyDistance: number; skyDistance: number;
} };
export type AssetConfig = { export type AssetConfig = {
defaultScaleBeforeGsap: [number, number, number]; defaultScaleBeforeGsap: [number, number, number];
defaultScaleAfterGsap: [number, number, number]; defaultScaleAfterGsap: [number, number, number];
} };
export type PointConfig = { export type PointConfig = {
defaultInnerColor: string; defaultInnerColor: string;
defaultOuterColor: string; defaultOuterColor: string;
deleteColor: string; deleteColor: string;
boxScale: [number, number, number]; boxScale: [number, number, number];
wallOuterColor: string; wallOuterColor: string;
floorOuterColor: string; floorOuterColor: string;
aisleOuterColor: string; aisleOuterColor: string;
zoneOuterColor: string; zoneOuterColor: string;
snappingThreshold: number; snappingThreshold: number;
} };
export type LineConfig = { export type LineConfig = {
tubularSegments: number; tubularSegments: number;
radius: number; radius: number;
radialSegments: number; radialSegments: number;
wallName: string; wallName: string;
floorName: string; floorName: string;
aisleName: string; aisleName: string;
zoneName: string; zoneName: string;
referenceName: string; referenceName: string;
lineIntersectionPoints: number; lineIntersectionPoints: number;
defaultColor: string; defaultColor: string;
wallColor: string; wallColor: string;
floorColor: string; floorColor: string;
aisleColor: string; aisleColor: string;
zoneColor: string; zoneColor: string;
helperColor: string; helperColor: string;
} };
export type WallConfig = { export type WallConfig = {
defaultColor: string; defaultColor: string;
height: number; height: number;
width: number; width: number;
} };
export type FloorConfig = { export type FloorConfig = {
defaultColor: string; defaultColor: string;
height: number; height: number;
textureScale: number; textureScale: number;
} };
export type RoofConfig = { export type RoofConfig = {
defaultColor: string; defaultColor: string;
height: number; height: number;
} };
export type AisleConfig = { export type AisleConfig = {
width: number; width: number;
height: number; height: number;
defaultColor: number; defaultColor: number;
} };
export type ZoneConfig = { export type ZoneConfig = {
defaultColor: string; defaultColor: string;
color: string; color: string;
} };
export type ColumnConfig = { export type ColumnConfig = {
defaultColor: string; defaultColor: string;
} };
export type OutlineConfig = { export type OutlineConfig = {
assetSelectColor: number; assetSelectColor: number;
assetDeleteColor: number; assetDeleteColor: number;
} };
export type DistanceConfig = {
minDistance: number;
maxDistance: number;
};
export const firstPersonControls: Controls = { export const firstPersonControls: Controls = {
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
polarRotateSpeed: 0.3, // Speed of rotation around the polar axis polarRotateSpeed: 0.3, // Speed of rotation around the polar axis
truckSpeed: 10, // Speed of truck movement truckSpeed: 10, // Speed of truck movement
minDistance: 0, // Minimum distance from the target minDistance: 0, // Minimum distance from the target
maxDistance: 0, // Maximum distance from the target maxDistance: 0, // Maximum distance from the target
maxPolarAngle: Math.PI, // Maximum polar angle maxPolarAngle: Math.PI, // Maximum polar angle
leftMouse: 1, // Mouse button for rotation (ROTATE) leftMouse: 1, // Mouse button for rotation (ROTATE)
forwardSpeed: 0.3, // Speed of forward movement forwardSpeed: 0.3, // Speed of forward movement
backwardSpeed: -0.3, // Speed of backward movement backwardSpeed: -0.3, // Speed of backward movement
leftSpeed: -0.3, // Speed of left movement leftSpeed: -0.3, // Speed of left movement
rightSpeed: 0.3, // Speed of right movement rightSpeed: 0.3, // Speed of right movement
}; };
export const thirdPersonControls: ThirdPersonControls = { export const thirdPersonControls: ThirdPersonControls = {
azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis
polarRotateSpeed: 1, // Speed of rotation around the polar axis polarRotateSpeed: 1, // Speed of rotation around the polar axis
truckSpeed: 2, // Speed of truck movement truckSpeed: 2, // Speed of truck movement
maxDistance: 100, // Maximum distance from the target maxDistance: 100, // Maximum distance from the target
maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle
minZoom: 6, // Minimum zoom level minZoom: 6, // Minimum zoom level
maxZoom: 21, // Maximum zoom level maxZoom: 21, // Maximum zoom level
targetOffset: 20, // Offset of the target from the camera targetOffset: 20, // Offset of the target from the camera
cameraHeight: 30, // Height of the camera cameraHeight: 30, // Height of the camera
leftMouse: 2, // Mouse button for panning leftMouse: 2, // Mouse button for panning
rightMouse: 1, // Mouse button for rotation rightMouse: 1, // Mouse button for rotation
wheelMouse: 8, // Mouse button for zooming wheelMouse: 8, // Mouse button for zooming
middleMouse: 8, // Mouse button for zooming middleMouse: 8, // Mouse button for zooming
}; };
export const controlsTransition: ControlsTransition = { export const controlsTransition: ControlsTransition = {
leftMouse: 0, // Mouse button for no action leftMouse: 0, // Mouse button for no action
rightMouse: 0, // Mouse button for no action rightMouse: 0, // Mouse button for no action
wheelMouse: 0, // Mouse button for no action wheelMouse: 0, // Mouse button for no action
middleMouse: 0, // Mouse button for no action middleMouse: 0, // Mouse button for no action
}; };
export const twoDimension: TwoDimension = { export const twoDimension: TwoDimension = {
defaultPosition: [0, 100, 0], // Default position of the camera defaultPosition: [0, 100, 0], // Default position of the camera
defaultTarget: [0, 0, 0], // Default target of the camera defaultTarget: [0, 0, 0], // Default target of the camera
defaultAzimuth: 0, // Default azimuth of the camera defaultAzimuth: 0, // Default azimuth of the camera
minDistance: 25, // Minimum distance from the target minDistance: 25, // Minimum distance from the target
leftMouse: 2, // Mouse button for panning leftMouse: 2, // Mouse button for panning
rightMouse: 0, // Mouse button for no action rightMouse: 0, // Mouse button for no action
}; };
export const threeDimension: ThreeDimension = { export const threeDimension: ThreeDimension = {
defaultPosition: [0, 40, 30], // Default position of the camera defaultPosition: [0, 40, 30], // Default position of the camera
defaultTarget: [0, 0, 0], // Default target of the camera defaultTarget: [0, 0, 0], // Default target of the camera
defaultRotation: [0, 0, 0], // Default rotation of the camera defaultRotation: [0, 0, 0], // Default rotation of the camera
defaultAzimuth: 0, // Default azimuth of the camera defaultAzimuth: 0, // Default azimuth of the camera
boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement
boundaryTop: [150, 100, 150], // Top boundary of the camera movement boundaryTop: [150, 100, 150], // Top boundary of the camera movement
minDistance: 1, // Minimum distance from the target minDistance: 1, // Minimum distance from the target
leftMouse: 2, // Mouse button for panning leftMouse: 2, // Mouse button for panning
rightMouse: 1, // Mouse button for rotation rightMouse: 1, // Mouse button for rotation
}; };
export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position
export const gridConfig: GridConfig = { export const gridConfig: GridConfig = {
size: 300, // Size of the grid size: 300, // Size of the grid
divisions: 75, // Number of divisions in the grid divisions: 75, // Number of divisions in the grid
primaryColor: "#d5d5d5", // Primary color of the grid primaryColor: "#d5d5d5", // Primary color of the grid
secondaryColor: "#e3e3e3", // Secondary color of the grid secondaryColor: "#e3e3e3", // Secondary color of the grid
position2D: [0, 0.1, 0], // Position of the grid in 2D 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 position3D: [0, -0.5, 0], // Position of the grid in 3D view
} };
export const planeConfig: PlaneConfig = { export const planeConfig: PlaneConfig = {
position2D: [0, -0.5, 0], // Position of the plane position2D: [0, -0.5, 0], // Position of the plane
position3D: [0, -0.65, 0], // Position of the plane position3D: [0, -0.65, 0], // Position of the plane
rotation: -Math.PI / 2, // Rotation of the plane rotation: -Math.PI / 2, // Rotation of the plane
width: 300, // Width of the plane width: 300, // Width of the plane
height: 300, // Height of the plane height: 300, // Height of the plane
color: "#f3f3f3" // Color of the plane color: "#f3f3f3", // Color of the plane
} };
export const shadowConfig: ShadowConfig = { export const shadowConfig: ShadowConfig = {
shadowOffset: 50, // Offset of the shadow shadowOffset: 50, // Offset of the shadow
shadowmapSizewidth: 1024, // Width of the shadow map shadowmapSizewidth: 1024, // Width of the shadow map
shadowmapSizeheight: 1024, // Height of the shadow map shadowmapSizeheight: 1024, // Height of the shadow map
// shadowmapSizewidth: 8192, // Width of the shadow map // shadowmapSizewidth: 8192, // Width of the shadow map
// shadowmapSizeheight: 8192, // Height of the shadow map // shadowmapSizeheight: 8192, // Height of the shadow map
shadowcamerafar: 70, // Far plane of the shadow camera shadowcamerafar: 70, // Far plane of the shadow camera
shadowcameranear: 0.1, // Near plane of the shadow camera shadowcameranear: 0.1, // Near plane of the shadow camera
shadowcameratop: 30, // Top plane of the shadow camera shadowcameratop: 30, // Top plane of the shadow camera
shadowcamerabottom: -30, // Bottom plane of the shadow camera shadowcamerabottom: -30, // Bottom plane of the shadow camera
shadowcameraleft: -30, // Left plane of the shadow camera shadowcameraleft: -30, // Left plane of the shadow camera
shadowcameraright: 30, // Right plane of the shadow camera shadowcameraright: 30, // Right plane of the shadow camera
shadowbias: -0.001, // Bias of the shadow shadowbias: -0.001, // Bias of the shadow
shadownormalBias: 0.02, // Normal bias of the shadow shadownormalBias: 0.02, // Normal bias of the shadow
shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material
shadowMaterialOpacity: 0.1 // Opacity of the shadow material shadowMaterialOpacity: 0.1, // Opacity of the shadow material
} };
export const skyConfig: SkyConfig = { export const skyConfig: SkyConfig = {
defaultTurbidity: 10.0, // Default turbidity of the sky defaultTurbidity: 10.0, // Default turbidity of the sky
maxTurbidity: 20.0, // Maximum turbidity of the sky maxTurbidity: 20.0, // Maximum turbidity of the sky
minTurbidity: 0.0, // Minimum turbidity of the sky minTurbidity: 0.0, // Minimum turbidity of the sky
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
mieCoefficient: 0.1, // Mie scattering coefficient mieCoefficient: 0.1, // Mie scattering coefficient
mieDirectionalG: 1.0, // Mie directional G mieDirectionalG: 1.0, // Mie directional G
skyDistance: 2000 // Distance of the sky skyDistance: 2000, // Distance of the sky
} };
export const assetConfig: AssetConfig = { export const assetConfig: AssetConfig = {
defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets
defaultScaleAfterGsap: [1, 1, 1] // Default scale of the assets defaultScaleAfterGsap: [1, 1, 1], // Default scale of the assets
} };
export const pointConfig: PointConfig = { export const pointConfig: PointConfig = {
defaultInnerColor: "#ffffff", // Default inner color of the points defaultInnerColor: "#ffffff", // Default inner color of the points
defaultOuterColor: "#ffffff", // Default outer color of the points defaultOuterColor: "#ffffff", // Default outer color of the points
deleteColor: "#ff0000", // Color of the points when deleting deleteColor: "#ff0000", // Color of the points when deleting
boxScale: [0.5, 0.5, 0.5], // Scale of the points boxScale: [0.5, 0.5, 0.5], // Scale of the points
wallOuterColor: "#C7C7C7", // Outer color of the wall points wallOuterColor: "#C7C7C7", // Outer color of the wall points
floorOuterColor: "#808080", // Outer color of the floor points floorOuterColor: "#808080", // Outer color of the floor points
aisleOuterColor: "#FBBC05", // Outer color of the aisle points aisleOuterColor: "#FBBC05", // Outer color of the aisle points
zoneOuterColor: "#007BFF", // Outer color of the zone points zoneOuterColor: "#007BFF", // Outer color of the zone points
snappingThreshold: 1, // Threshold for snapping snappingThreshold: 1, // Threshold for snapping
} };
export const lineConfig: LineConfig = { export const lineConfig: LineConfig = {
tubularSegments: 64, // Number of tubular segments tubularSegments: 64, // Number of tubular segments
radius: 0.15, // Radius of the lines radius: 0.15, // Radius of the lines
radialSegments: 8, // Number of radial segments radialSegments: 8, // Number of radial segments
wallName: "WallLine", // Name of the wall lines wallName: "WallLine", // Name of the wall lines
floorName: "FloorLine", // Name of the floor lines floorName: "FloorLine", // Name of the floor lines
aisleName: "AisleLine", // Name of the aisle lines aisleName: "AisleLine", // Name of the aisle lines
zoneName: "ZoneLine", // Name of the zone lines zoneName: "ZoneLine", // Name of the zone lines
referenceName: "ReferenceLine", // Name of the reference lines referenceName: "ReferenceLine", // Name of the reference lines
lineIntersectionPoints: 300, // Number of intersection points lineIntersectionPoints: 300, // Number of intersection points
defaultColor: "#000000", // Default color of the lines defaultColor: "#000000", // Default color of the lines
wallColor: "#C7C7C7", // Color of the wall lines wallColor: "#C7C7C7", // Color of the wall lines
floorColor: "#808080", // Color of the floor lines floorColor: "#808080", // Color of the floor lines
aisleColor: "#FBBC05", // Color of the aisle lines aisleColor: "#FBBC05", // Color of the aisle lines
zoneColor: "#007BFF", // Color of the zone lines zoneColor: "#007BFF", // Color of the zone lines
helperColor: "#C164FF" // Color of the helper lines helperColor: "#C164FF", // Color of the helper lines
} };
export const wallConfig: WallConfig = { export const wallConfig: WallConfig = {
defaultColor: "white", // Default color of the walls defaultColor: "white", // Default color of the walls
height: 7, // Height of the walls height: 7, // Height of the walls
width: 0.05, // Width of the walls width: 0.05, // Width of the walls
} };
export const floorConfig: FloorConfig = { export const floorConfig: FloorConfig = {
defaultColor: "grey", // Default color of the floors defaultColor: "grey", // Default color of the floors
height: 0.1, // Height of the floors height: 0.1, // Height of the floors
textureScale: 0.1, // Scale of the floor texture textureScale: 0.1, // Scale of the floor texture
} };
export const roofConfig: RoofConfig = { export const roofConfig: RoofConfig = {
defaultColor: "grey", // Default color of the roofs defaultColor: "grey", // Default color of the roofs
height: 0.1 // Height of the roofs height: 0.1, // Height of the roofs
} };
export const aisleConfig: AisleConfig = { export const aisleConfig: AisleConfig = {
width: 0.1, // Width of the aisles width: 0.1, // Width of the aisles
height: 0.01, // Height of the aisles height: 0.01, // Height of the aisles
defaultColor: 0xffff00 // Default color of the aisles defaultColor: 0xffff00, // Default color of the aisles
} };
export const zoneConfig: ZoneConfig = { export const zoneConfig: ZoneConfig = {
defaultColor: "black", // Default color of the zones defaultColor: "black", // Default color of the zones
color: "blue" // Color of the zones color: "blue", // Color of the zones
} };
export const columnConfig: ColumnConfig = { export const columnConfig: ColumnConfig = {
defaultColor: "White", // Default color of the columns defaultColor: "White", // Default color of the columns
} };
export const outlineConfig: OutlineConfig = { export const outlineConfig: OutlineConfig = {
assetSelectColor: 0x0054fE, // Color of the selected assets assetSelectColor: 0x0054fe, // Color of the selected assets
assetDeleteColor: 0xFF0000 // Color of the deleted assets assetDeleteColor: 0xff0000, // Color of the deleted assets
} };
export const distanceConfig: DistanceConfig = {
minDistance: 20,
maxDistance: 75,
};