Dwinzo_dev/app/src/modules/builder/agv/agv.tsx

import { useEffect, useRef, useState } from "react";
import { useSimulationStates } from "../../../store/store";
import PolygonGenerator from "./polygonGenerator";
import PathNavigator from "./pathNavigator";
import NavMeshDetails from "./navMeshDetails";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as Types from "../../../types/world/worldTypes";

type AgvProps = {
	lines: Types.RefLines
};

type PathPoints = {
	modelUuid: string;
	modelSpeed: number;
	bufferTime: number;
	points: { x: number; y: number; z: number }[];
	hitCount: number;
};

const Agv = ({ lines }: AgvProps) => {

	let groupRef = useRef() as Types.RefGroup;
	const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
	const { simulationStates } = useSimulationStates();
	const [navMesh, setNavMesh] = useState();

	useEffect(() => {
		if (simulationStates.length > 0) {

			const agvModels = simulationStates.filter((val) => val.modelName === "agv" && val.type === "Vehicle");

			const newPathPoints = agvModels.filter((model: any) => model.points && model.points.actions && typeof model.points.actions.start === "object" && typeof model.points.actions.end === "object" && "x" in model.points.actions.start && "y" in model.points.actions.start && "x" in model.points.actions.end && "y" in model.points.actions.end)
				.map((model: any) => ({
					modelUuid: model.modeluuid,
					modelSpeed: model.points.speed,
					bufferTime: model.points.actions.buffer,
					hitCount: model.points.actions.hitCount,
					points: [
						{ x: model.position[0], y: model.position[1], z: model.position[2], },
						{ x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y, },
						{ x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y, },
					],
				}));

			setPathPoints(newPathPoints);
		}
	}, [simulationStates]);

	return (
		<>

			<PolygonGenerator groupRef={groupRef} lines={lines} />
			<NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />

			{pathPoints.map((pair, i) => (
				<PathNavigator
					navMesh={navMesh}
					selectedPoints={pair.points}
					id={pair.modelUuid}
					key={i}
					speed={pair.modelSpeed}
					bufferTime={pair.bufferTime}
					hitCount={pair.hitCount}
				/>
			))}

			{pathPoints.map((pair, i) => (
				<group key={i}>
					<mesh position={[pair.points[1].x, pair.points[1].y, pair.points[1].z,]} >
						<sphereGeometry args={[0.3, 15, 15]} />
						<meshStandardMaterial color="red" />
					</mesh>
					<mesh position={[pair.points[2].x, pair.points[2].y, pair.points[2].z,]} >
						<sphereGeometry args={[0.3, 15, 15]} />
						<meshStandardMaterial color="red" />
					</mesh>
				</group>
			))}

			<group ref={groupRef} visible={false} name="Meshes">
				<mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} name="Plane" receiveShadow>
					<planeGeometry args={[300, 300]} />
					<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
				</mesh>
			</group>
		</>
	);
};

export default Agv;