assets added based on categoryin builder

This commit is contained in:
2025-03-31 12:07:25 +05:30
parent 988d7c92db
commit e1200f52d0
10 changed files with 543 additions and 478 deletions

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
# 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
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010

View File

@@ -1,13 +1,29 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.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 [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
const handleSearchChange = (value: string) => {
setSearchValue(value);
@@ -34,56 +50,18 @@ const Assets: React.FC = () => {
categoryImage: feneration,
},
{
assetName: "Forklift",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
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,
},
@@ -94,12 +72,13 @@ const Assets: React.FC = () => {
new Set(categoryList.map((asset) => asset.category))
);
// Filter assets based on the selected category
const filteredAssets =
selectedCategory !== null
? categoryList.filter((asset) => asset.category === selectedCategory)
: [];
const fetchCategoryAssets = async (asset: any) => {
try {
setSelectedCategory(asset);
const res = await getCategoryAsset(asset);
setFilteredAsset(res);
} catch (error) {}
};
return (
<div className="assets-container">
<Search onChange={handleSearchChange} />
@@ -118,14 +97,15 @@ const Assets: React.FC = () => {
</div>
<h2>{selectedCategory}</h2>
<div className="assets-container">
{filteredAssets.map((asset, index) => (
{filteredAsset &&
filteredAsset?.map((asset: any, index: number) => (
<div key={index} className="assets">
<img
src={asset.assetImage}
alt={asset.assetName}
src={asset.thumbnail}
alt={asset.filename}
className="asset-image"
/>
<div className="asset-name">{asset.assetName}</div>
<div className="asset-name">{asset.filename}</div>
</div>
))}
</div>
@@ -142,7 +122,7 @@ const Assets: React.FC = () => {
<div
key={index}
className="category"
onClick={() => setSelectedCategory(category)}
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
@@ -161,4 +141,3 @@ const Assets: React.FC = () => {
};
export default Assets;

View File

@@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
);
}
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;
})}

View File

@@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
const [nextId, setNextId] = useState(1); // Unique ID for new entries
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
const handleAddUserData = () => {
const newUserData: UserData = {
@@ -59,10 +53,15 @@ const AssetProperties: React.FC = () => {
<PositionInput
onChange={() => {}}
value1={xValue.toFixed(5)}
value2={zValue.toFixed(5)}
value1={selectedFloorItem.position.x.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>

View File

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

View File

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

View File

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

View File

@@ -1,9 +1,16 @@
import * as THREE from 'three'
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store';
import * as Types from '../../../types/world/worldTypes'
import * as CONSTANTS from '../../../types/world/worldConstants';
import * as THREE from "three";
import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";
import {
useDeletableFloorItem,
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() {
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
@@ -14,7 +21,7 @@ export default function PostProcessing() {
function flattenChildren(children: any[]) {
const allChildren: any[] = [];
children.forEach(child => {
children.forEach((child) => {
allChildren.push(child);
if (child.children && child.children.length > 0) {
allChildren.push(...flattenChildren(child.children));
@@ -26,8 +33,16 @@ export default function PostProcessing() {
return (
<>
<EffectComposer autoClear={false}>
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
{deletableFloorItem &&
<N8AO
color="black"
aoRadius={20}
intensity={7}
distanceFalloff={4}
aoSamples={32}
denoiseRadius={6}
denoiseSamples={16}
/>
{deletableFloorItem && (
<Outline
selection={flattenChildren(deletableFloorItem.children)}
selectionLayer={10}
@@ -41,14 +56,12 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedWallItem &&
)}
{selectedWallItem && (
<Outline
selection={
selectedWallItem.children[1].children[0].children.filter(
selection={selectedWallItem.children[1].children[0].children.filter(
(child: Types.Mesh) => child.name !== "CSG_REF"
)
}
)}
selectionLayer={10}
width={3000}
blendFunction={BlendFunction.ALPHA}
@@ -59,8 +72,9 @@ export default function PostProcessing() {
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true}
xRay={true}
/>}
{selectedFloorItem &&
/>
)}
{selectedFloorItem && (
<Outline
selection={flattenChildren(selectedFloorItem.children)}
selectionLayer={10}
@@ -74,8 +88,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedActionSphere &&
)}
{selectedActionSphere && (
<Outline
selection={[selectedActionSphere.point]}
selectionLayer={10}
@@ -89,8 +103,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
{selectedPath &&
)}
{selectedPath && (
<Outline
selection={flattenChildren(selectedPath.group.children)}
selectionLayer={10}
@@ -104,8 +118,8 @@ export default function PostProcessing() {
blur={true}
xRay={true}
/>
}
)}
</EffectComposer>
</>
)
);
}

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

View File

@@ -56,7 +56,6 @@ export type ThreeDimension = {
rightMouse: number;
};
export type GridConfig = {
size: number;
divisions: number;
@@ -65,7 +64,7 @@ export type GridConfig = {
position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number];
}
};
export type PlaneConfig = {
position2D: [x: number, y: number, z: number];
@@ -75,27 +74,27 @@ export type PlaneConfig = {
width: number;
height: number;
color: string;
}
};
export type ShadowConfig = {
shadowOffset: number,
shadowOffset: number;
shadowmapSizewidth: number,
shadowmapSizeheight: number,
shadowcamerafar: number,
shadowcameranear: number,
shadowcameratop: number,
shadowcamerabottom: number,
shadowcameraleft: number,
shadowcameraright: number,
shadowbias: number,
shadownormalBias: number,
shadowmapSizewidth: number;
shadowmapSizeheight: number;
shadowcamerafar: number;
shadowcameranear: number;
shadowcameratop: number;
shadowcamerabottom: number;
shadowcameraleft: number;
shadowcameraright: number;
shadowbias: number;
shadownormalBias: number;
shadowMaterialPosition: [x: number, y: number, z: number],
shadowMaterialRotation: [x: number, y: number, z: number],
shadowMaterialPosition: [x: number, y: number, z: number];
shadowMaterialRotation: [x: number, y: number, z: number];
shadowMaterialOpacity: number,
}
shadowMaterialOpacity: number;
};
export type SkyConfig = {
defaultTurbidity: number;
@@ -105,12 +104,12 @@ export type SkyConfig = {
mieCoefficient: number;
mieDirectionalG: number;
skyDistance: number;
}
};
export type AssetConfig = {
defaultScaleBeforeGsap: [number, number, number];
defaultScaleAfterGsap: [number, number, number];
}
};
export type PointConfig = {
defaultInnerColor: string;
@@ -124,7 +123,7 @@ export type PointConfig = {
zoneOuterColor: string;
snappingThreshold: number;
}
};
export type LineConfig = {
tubularSegments: number;
@@ -146,50 +145,52 @@ export type LineConfig = {
aisleColor: string;
zoneColor: string;
helperColor: string;
}
};
export type WallConfig = {
defaultColor: string;
height: number;
width: number;
}
};
export type FloorConfig = {
defaultColor: string;
height: number;
textureScale: number;
}
};
export type RoofConfig = {
defaultColor: string;
height: number;
}
};
export type AisleConfig = {
width: number;
height: number;
defaultColor: number;
}
};
export type ZoneConfig = {
defaultColor: string;
color: string;
}
};
export type ColumnConfig = {
defaultColor: string;
}
};
export type OutlineConfig = {
assetSelectColor: number;
assetDeleteColor: number;
}
};
export type DistanceConfig = {
minDistance: number;
maxDistance: number;
};
export const firstPersonControls: Controls = {
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
@@ -261,7 +262,7 @@ export const gridConfig: GridConfig = {
position2D: [0, 0.1, 0], // Position of the grid in 2D view
position3D: [0, -0.5, 0], // Position of the grid in 3D view
}
};
export const planeConfig: PlaneConfig = {
position2D: [0, -0.5, 0], // Position of the plane
@@ -270,8 +271,8 @@ export const planeConfig: PlaneConfig = {
width: 300, // Width 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 = {
shadowOffset: 50, // Offset of the shadow
@@ -292,8 +293,8 @@ export const shadowConfig: ShadowConfig = {
shadowMaterialPosition: [0, 0.01, 0], // Position 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 = {
defaultTurbidity: 10.0, // Default turbidity of the sky
@@ -302,13 +303,13 @@ export const skyConfig: SkyConfig = {
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
mieCoefficient: 0.1, // Mie scattering coefficient
mieDirectionalG: 1.0, // Mie directional G
skyDistance: 2000 // Distance of the sky
}
skyDistance: 2000, // Distance of the sky
};
export const assetConfig: AssetConfig = {
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 = {
defaultInnerColor: "#ffffff", // Default inner color of the points
@@ -322,7 +323,7 @@ export const pointConfig: PointConfig = {
zoneOuterColor: "#007BFF", // Outer color of the zone points
snappingThreshold: 1, // Threshold for snapping
}
};
export const lineConfig: LineConfig = {
tubularSegments: 64, // Number of tubular segments
@@ -343,42 +344,47 @@ export const lineConfig: LineConfig = {
floorColor: "#808080", // Color of the floor lines
aisleColor: "#FBBC05", // Color of the aisle 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 = {
defaultColor: "white", // Default color of the walls
height: 7, // Height of the walls
width: 0.05, // Width of the walls
}
};
export const floorConfig: FloorConfig = {
defaultColor: "grey", // Default color of the floors
height: 0.1, // Height of the floors
textureScale: 0.1, // Scale of the floor texture
}
};
export const roofConfig: RoofConfig = {
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 = {
width: 0.1, // Width 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 = {
defaultColor: "black", // Default color of the zones
color: "blue" // Color of the zones
}
color: "blue", // Color of the zones
};
export const columnConfig: ColumnConfig = {
defaultColor: "White", // Default color of the columns
}
};
export const outlineConfig: OutlineConfig = {
assetSelectColor: 0x0054fE, // Color of the selected assets
assetDeleteColor: 0xFF0000 // Color of the deleted assets
}
assetSelectColor: 0x0054fe, // Color of the selected assets
assetDeleteColor: 0xff0000, // Color of the deleted assets
};
export const distanceConfig: DistanceConfig = {
minDistance: 20,
maxDistance: 75,
};