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

assets added based on categoryin builder

This commit is contained in:
Poovizhi99 2025-03-31 12:07:25 +05:30
parent 988d7c92db
commit e1200f52d0
10 changed files with 543 additions and 478 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

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

@ -1,13 +1,29 @@
import React, { useState } from "react"; import React, { useEffect, 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";
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);
@ -34,56 +50,18 @@ const Assets: React.FC = () => {
categoryImage: feneration, categoryImage: feneration,
}, },
{ {
assetName: "Forklift",
assetImage: "",
category: "Vehicles", category: "Vehicles",
categoryImage: vehicle, categoryImage: vehicle,
}, },
{ {
assetName: "AGV",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "Pallet",
assetImage: "",
category: "Workstation", category: "Workstation",
categoryImage: workStation, categoryImage: workStation,
}, },
{ {
assetName: "Controller",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Conveyor",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "VMC",
assetImage: "",
category: "Machines", category: "Machines",
categoryImage: machines, categoryImage: machines,
}, },
{ {
assetName: "CMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "Male Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
{
assetName: "Female Worker",
assetImage: "",
category: "Workers", category: "Workers",
categoryImage: worker, categoryImage: worker,
}, },
@ -94,12 +72,13 @@ const Assets: React.FC = () => {
new Set(categoryList.map((asset) => asset.category)) new Set(categoryList.map((asset) => asset.category))
); );
// Filter assets based on the selected category const fetchCategoryAssets = async (asset: any) => {
const filteredAssets = try {
selectedCategory !== null setSelectedCategory(asset);
? categoryList.filter((asset) => asset.category === selectedCategory) const res = await getCategoryAsset(asset);
: []; setFilteredAsset(res);
} catch (error) {}
};
return ( return (
<div className="assets-container"> <div className="assets-container">
<Search onChange={handleSearchChange} /> <Search onChange={handleSearchChange} />
@ -118,16 +97,17 @@ 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} <img
alt={asset.assetName} src={asset.thumbnail}
className="asset-image" alt={asset.filename}
/> className="asset-image"
<div className="asset-name">{asset.assetName}</div> />
</div> <div className="asset-name">{asset.filename}</div>
))} </div>
))}
</div> </div>
</div> </div>
) : ( ) : (
@ -142,7 +122,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 +141,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 = {
@ -59,10 +53,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)}
/> />

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

@ -62,9 +62,15 @@ const Tools: React.FC = () => {
// Reset activeTool whenever activeModule changes // Reset activeTool whenever activeModule changes
useEffect(() => { useEffect(() => {
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true) setToggleUI(
localStorage.getItem("navBarUi")
? localStorage.getItem("navBarUi") === "true"
: true
);
}, []); }, []);
useEffect(() => {
console.log("activeModule", activeModule);
}, [activeModule]);
useEffect(() => { useEffect(() => {
setActiveTool(activeSubTool); setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool); setActiveSubTool(activeSubTool);
@ -80,7 +86,11 @@ const Tools: React.FC = () => {
} else { } else {
setToggleView(false); setToggleView(false);
} }
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true) setToggleUI(
localStorage.getItem("navBarUi")
? localStorage.getItem("navBarUi") === "true"
: true
);
setToggleThreeD(!toggleThreeD); setToggleThreeD(!toggleThreeD);
setActiveSubTool("cursor"); setActiveSubTool("cursor");
setActiveTool("cursor"); setActiveTool("cursor");
@ -202,8 +212,9 @@ const Tools: React.FC = () => {
<div className="activeDropicon"> <div className="activeDropicon">
{activeSubTool == "cursor" && ( {activeSubTool == "cursor" && (
<div <div
className={`tool-button ${activeTool === "cursor" ? "active" : "" className={`tool-button ${
}`} activeTool === "cursor" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("cursor"); setActiveTool("cursor");
}} }}
@ -213,8 +224,9 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "free-hand" && ( {activeSubTool == "free-hand" && (
<div <div
className={`tool-button ${activeTool === "free-hand" ? "active" : "" className={`tool-button ${
}`} activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("free-hand"); setActiveTool("free-hand");
}} }}
@ -224,8 +236,9 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "delete" && ( {activeSubTool == "delete" && (
<div <div
className={`tool-button ${activeTool === "delete" ? "active" : "" className={`tool-button ${
}`} activeTool === "delete" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("delete"); setActiveTool("delete");
}} }}
@ -297,8 +310,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "draw-wall" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-wall"); setActiveTool("draw-wall");
}} }}
@ -307,8 +321,9 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} /> <WallIcon isActive={activeTool === "draw-wall"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-zone" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-zone"); setActiveTool("draw-zone");
}} }}
@ -317,8 +332,9 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} /> <ZoneIcon isActive={activeTool === "draw-zone"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-aisle" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-aisle"); setActiveTool("draw-aisle");
}} }}
@ -327,8 +343,9 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} /> <AsileIcon isActive={activeTool === "draw-aisle"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-floor" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-floor"); setActiveTool("draw-floor");
}} }}
@ -344,8 +361,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "measure" ? "active" : "" className={`tool-button ${
}`} activeTool === "measure" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("measure"); setActiveTool("measure");
}} }}
@ -361,8 +379,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "pen" ? "active" : "" className={`tool-button ${
}`} activeTool === "pen" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("pen"); setActiveTool("pen");
}} }}
@ -394,8 +413,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="general-options"> <div className="general-options">
<div <div
className={`tool-button ${activeTool === "comment" ? "active" : "" className={`tool-button ${
}`} activeTool === "comment" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("comment"); setActiveTool("comment");
}} }}
@ -404,8 +424,9 @@ const Tools: React.FC = () => {
</div> </div>
{toggleThreeD && ( {toggleThreeD && (
<div <div
className={`tool-button ${activeTool === "play" ? "active" : "" className={`tool-button ${
}`} activeTool === "play" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setIsPlaying(!isPlaying); setIsPlaying(!isPlaying);
}} }}
@ -416,8 +437,9 @@ const Tools: React.FC = () => {
</div> </div>
<div className="split"></div> <div className="split"></div>
<div <div
className={`toggle-threed-button${toggleThreeD ? " toggled" : "" className={`toggle-threed-button${
}`} toggleThreeD ? " toggled" : ""
}`}
onClick={toggleSwitch} onClick={toggleSwitch}
> >
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}> <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>

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

228
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>
</>
);
}

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

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

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,
};