merged with orgin/v2

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

@@ -1,5 +1,5 @@
+import { useEffect, useRef, useState } from 'react'
 import { useFrame, useThree } from '@react-three/fiber';
-import React, { useEffect, useRef, useState } from 'react';
 import { useFloorItems } from '../../../../../store/store';
 import * as THREE from 'three';
 import { Line } from '@react-three/drei';
@@ -15,7 +15,7 @@ interface VehicleAnimatorProps {
 }
 
 function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail }: VehicleAnimatorProps) {
-  const { updateVehicleLoad, vehicles } = useVehicleStore();
+  const { decrementVehicleLoad, vehicles } = useVehicleStore();
   const { isPaused } = usePauseButtonStore();
   const { speed } = useAnimationPlaySpeed();
   const { isReset } = useResetButtonStore();
@@ -132,30 +132,23 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
     const unLoadDuration = agvDetail.point.action.unLoadDuration;
     const droppedMaterial = agvDetail.currentLoad;
     fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
-    if (!isPaused) {
-      step(droppedMaterial);
-    } else {
-      pausedTime = performance.now();
-      step(droppedMaterial);
-    }
+    startTime = performance.now();
+    step(droppedMaterial);
   }
 
   function step(droppedMaterial: number) {
-    if (!isPaused) {
+    const elapsedTime = performance.now() - startTime;
+
+    if (elapsedTime >= fixedInterval) {
+      console.log('fixedInterval: ', fixedInterval);
+      console.log('elapsedTime: ', elapsedTime);
+      let droppedMat = droppedMaterial - 1;
+      decrementVehicleLoad(agvDetail.modelUuid, 1);
+      if (droppedMat === 0) return;
       startTime = performance.now();
-      const elapsedTime = performance.now() - startTime - pausedTime;
-      if (elapsedTime >= fixedInterval) {
-        let droppedMat = droppedMaterial - 1;
-        updateVehicleLoad(agvDetail.modelUuid, droppedMat);
-        if (droppedMat === 0) return;
-        startTime = performance.now();
-        pausedTime = 0;
-        requestAnimationFrame(() => step(droppedMat));
-      } else {
-        requestAnimationFrame(() => step(droppedMaterial));
-      }
+      requestAnimationFrame(() => step(droppedMat));
     } else {
-      requestAnimationFrame(() => firstFrame);
+      requestAnimationFrame(() => step(droppedMaterial));
     }
   }
 

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

@@ -9,7 +9,7 @@ import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore
 function VehicleInstance({ agvDetail }: any) {
   const { navMesh } = useNavMesh();
   const { isPlaying } = usePlayButtonStore();
-  const { vehicles, setVehicleActive, setVehicleState, updateVehicleLoad } = useVehicleStore();
+  const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
   const [currentPhase, setCurrentPhase] = useState<string>('stationed');
   const [path, setPath] = useState<[number, number, number][]>([]);
 
@@ -50,8 +50,9 @@ function VehicleInstance({ agvDetail }: any) {
         agvDetail.state === 'idle' &&
         currentPhase === 'picking'
       ) {
+        
         setTimeout(() => {
-          updateVehicleLoad(agvDetail.modelUuid, 2);
+          incrementVehicleLoad(agvDetail.modelUuid, 2);
         }, 5000);
 
         if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {