Merged With AGV-UI

app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { useFrame, useThree } from '@react-three/fiber';
-import { useActiveTool, useFloorItems } from '../../../../../store/store';
 import * as THREE from 'three';
 import { Line } from '@react-three/drei';
 import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
-import useModuleStore from '../../../../../store/useModuleStore';
 
 interface VehicleAnimatorProps {
     path: [number, number, number][];
@@ -17,23 +15,24 @@ interface VehicleAnimatorProps {
 }
 
 function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
+    // console.log('path: ', path);
     const { decrementVehicleLoad } = useVehicleStore();
     const { isPaused } = usePauseButtonStore();
     const { isPlaying } = usePlayButtonStore();
     const { speed } = useAnimationPlaySpeed();
     const { isReset, setReset } = useResetButtonStore();
-    const [restRotation, setRestingRotation] = useState<boolean>(true);
-    const [progress, setProgress] = useState<number>(0);
-    const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
-    const { scene } = useThree();
     const progressRef = useRef<number>(0);
     const movingForward = useRef<boolean>(true);
     const completedRef = useRef<boolean>(false);
+    const isPausedRef = useRef<boolean>(false);
+    const pauseTimeRef = useRef<number | null>(null);
+    const [restRotation, setRestingRotation] = useState<boolean>(true);
+    const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+    const [progress, setProgress] = useState<number>(0);
+    const { scene } = useThree();
     let startTime: number;
     let fixedInterval: number;
     let coveredDistance = progressRef.current;
-    const isPausedRef = useRef(false);
-    const pauseTimeRef = useRef<number | null>(null);
 
 
     useEffect(() => {
@@ -73,6 +72,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
         }
     }, [isReset, isPlaying])
 
+    useEffect(() => {
+        isPausedRef.current = isPaused;
+    }, [isPaused]);
 
     useFrame((_, delta) => {
         const object = scene.getObjectByProperty('uuid', agvUuid);
@@ -152,10 +154,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
         }
     });
 
-    useEffect(() => {
-        isPausedRef.current = isPaused;
-    }, [isPaused]);
-
     function firstFrame() {
         const droppedMaterial = agvDetail.currentLoad;
         startTime = performance.now();
@@ -182,11 +180,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
         fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
 
         if (elapsedTime >= fixedInterval) {
-            console.log('elapsedTime: ', elapsedTime);
-
             let droppedMat = droppedMaterial - 1;
             decrementVehicleLoad(agvDetail.modelUuid, 1);
-
             if (droppedMat > 0) {
                 startTime = performance.now();
                 requestAnimationFrame(() => step(droppedMat));

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -3,7 +3,7 @@ import VehicleAnimator from '../animator/vehicleAnimator';
 import * as THREE from 'three';
 import { NavMeshQuery } from '@recast-navigation/core';
 import { useNavMesh } from '../../../../../store/store';
-import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
 
 function VehicleInstance({ agvDetail }: any) {
@@ -12,7 +12,7 @@ function VehicleInstance({ agvDetail }: any) {
     const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
     const [currentPhase, setCurrentPhase] = useState<string>('stationed');
     const [path, setPath] = useState<[number, number, number][]>([]);
-    let isIncrememtable = useRef(true);
+    let isIncrememtable = useRef<boolean>(true);
 
     const computePath = useCallback(
         (start: any, end: any) => {
@@ -20,7 +20,7 @@ function VehicleInstance({ agvDetail }: any) {
                 const navMeshQuery = new NavMeshQuery(navMesh);
                 const { path: segmentPath } = navMeshQuery.computePath(start, end);
                 return (
-                    segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
+                    segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || []
                 );
             } catch {
                 return [];
@@ -41,7 +41,6 @@ function VehicleInstance({ agvDetail }: any) {
         setPath([]);
     }
 
-
     const increment = () => {
         if (isIncrememtable.current) {
             console.log('called');

app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx

@@ -1,14 +1,32 @@
 import React from 'react'
 import VehicleInstance from './instance/vehicleInstance'
 import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'
+import VehicleUI from '../../ui/vehicle/vehicleUI';
+type VehicleUIProps = {
+    vehicleStatusSample: VehicleEventSchema[];
+    setVehicleStatusSample: React.Dispatch<
+        React.SetStateAction<VehicleEventSchema[]>
+    >;
+};
+const VehicleInstances: React.FC<VehicleUIProps> = ({
+    vehicleStatusSample,
+    setVehicleStatusSample,
+}) => {
 
-function VehicleInstances() {
     const { vehicles } = useVehicleStore();
+
     return (
         <>
 
             {vehicles.map((val: any, i: any) =>
-                <VehicleInstance agvDetail={val} key={i} />
+                <>
+                    <VehicleInstance agvDetail={val} key={i} />
+                    <VehicleUI
+                        setVehicleStatusSample={setVehicleStatusSample}
+                        vehicleStatusSample={vehicleStatusSample}
+                        vehicle={val}
+                    />
+                </>
             )}
 
         </>