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

import { useEffect, useState } from "react";
import { Line } from "@react-three/drei";
import { useNavMesh, useSimulationStates } from "../../../store/store";
import PathNavigator from "./pathNavigator";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";

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

const Agv = () => {
	const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
	const { simulationStates } = useSimulationStates();
	const { navMesh } = useNavMesh();
	const { isPlaying } = usePlayButtonStore();

	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 (
		<>
			{pathPoints.map((pair, i) => (
				<group key={i} visible={!isPlaying}>
					<PathNavigator
						navMesh={navMesh}
						pathPoints={pair.points}
						id={pair.modelUuid}
						speed={pair.modelSpeed}
						bufferTime={pair.bufferTime}
						hitCount={pair.hitCount}
					/>

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

export default Agv;