changed unloading function into callback function

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

@@ -10,12 +10,13 @@ interface VehicleAnimatorProps {
     path: [number, number, number][];
     handleCallBack: () => void;
     reset: () => void;
+    startUnloadingProcess: () => void;
     currentPhase: string;
     agvUuid: string;
     agvDetail: VehicleStatus;
 }
 
-function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
+function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset, startUnloadingProcess }: VehicleAnimatorProps) {
     const { decrementVehicleLoad, getVehicleById, removeLastMaterial } = useVehicleStore();
     const { removeMaterial } = useMaterialStore();
     const { isPaused } = usePauseButtonStore();
@@ -25,15 +26,11 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
     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 [objectRotation, setObjectRotation] = useState<{ x: number; y: number; z: number } | undefined>(agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 })
     const [progress, setProgress] = useState<number>(0);
     const [restRotation, setRestingRotation] = useState<boolean>(true);
     const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
     const { scene } = useThree();
-    let startTime: number;
-    let fixedInterval: number;
     let coveredDistance = progressRef.current;
 
     useEffect(() => {
@@ -62,12 +59,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
             completedRef.current = false;
             movingForward.current = true;
             progressRef.current = 0;
-            startTime = 0;
             coveredDistance = 0;
             setReset(false);
             setRestingRotation(true);
-            isPausedRef.current = false;
-            pauseTimeRef.current = 0;
             const object = scene.getObjectByProperty('uuid', agvUuid);
             const vehicle = getVehicleById(agvDetail.modelUuid);
             if (object && vehicle) {
@@ -77,10 +71,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
         }
     }, [isReset, isPlaying])
 
-    useEffect(() => {
-        isPausedRef.current = isPaused;
-    }, [isPaused]);
-
     useFrame((_, delta) => {
         const object = scene.getObjectByProperty('uuid', agvUuid);
         if (!object || currentPath.length < 2) return;
@@ -157,53 +147,12 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
             setCurrentPath([]);
             handleCallBack();
             if (currentPhase === 'pickup-drop') {
-                requestAnimationFrame(firstFrame);
+                requestAnimationFrame(startUnloadingProcess);
             }
         }
     });
 
-    function firstFrame() {
-        const droppedMaterial = agvDetail.currentLoad;
-        startTime = performance.now();
-        step(droppedMaterial);
-    }
 
-    function step(droppedMaterial: number) {
-        if (isPausedRef.current) {
-            if (!pauseTimeRef.current) {
-                pauseTimeRef.current = performance.now();
-            }
-            requestAnimationFrame(() => step(droppedMaterial));
-            return;
-        }
-
-        if (pauseTimeRef.current) {
-            const pauseDuration = performance.now() - pauseTimeRef.current;
-            startTime += pauseDuration;
-            pauseTimeRef.current = null;
-        }
-
-        const elapsedTime = performance.now() - startTime;
-        const unLoadDuration = agvDetail.point.action.unLoadDuration;
-        fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
-
-        if (elapsedTime >= fixedInterval) {
-            let droppedMat = droppedMaterial - 1;
-            decrementVehicleLoad(agvDetail.modelUuid, 1);
-            const materialId = removeLastMaterial(agvDetail.modelUuid);
-            if (materialId) {
-                removeMaterial(materialId);
-            }
-            if (droppedMat > 0) {
-                startTime = performance.now();
-                requestAnimationFrame(() => step(droppedMat));
-            } else {
-                return;
-            }
-        } else {
-            requestAnimationFrame(() => step(droppedMaterial));
-        }
-    }
 
     return (
         <>

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

@@ -3,16 +3,29 @@ import VehicleAnimator from '../animator/vehicleAnimator';
 import * as THREE from 'three';
 import { NavMeshQuery } from '@recast-navigation/core';
 import { useNavMesh } from '../../../../../store/store';
-import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
 import MaterialAnimator from '../animator/materialAnimator';
+import { useMaterialStore } from '../../../../../store/simulation/useMaterialStore';
 
 function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
     const { navMesh } = useNavMesh();
     const { isPlaying } = usePlayButtonStore();
-    const { vehicles, setVehicleActive, setVehicleState, clearCurrentMaterials, setVehicleLoad } = useVehicleStore();
+    const { removeMaterial } = useMaterialStore();
+    const { vehicles, setVehicleActive, setVehicleState, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial } = useVehicleStore();
     const [currentPhase, setCurrentPhase] = useState<string>('stationed');
     const [path, setPath] = useState<[number, number, number][]>([]);
+    const pauseTimeRef = useRef<number | null>(null);
+    const isPausedRef = useRef<boolean>(false);
+    let startTime: number;
+    let fixedInterval: number;
+    const { speed } = useAnimationPlaySpeed();
+    const { isPaused } = usePauseButtonStore();
+
+
+    useEffect(() => {
+        isPausedRef.current = isPaused;
+    }, [isPaused]);
 
     const computePath = useCallback(
         (start: any, end: any) => {
@@ -41,6 +54,9 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
         setVehicleState(agvDetail.modelUuid, 'idle');
         setVehicleLoad(agvDetail.modelUuid, 0);
         setPath([]);
+        startTime = 0;
+        isPausedRef.current = false;
+        pauseTimeRef.current = 0;
     }
 
     useEffect(() => {
@@ -118,6 +134,50 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
         }
     }
 
+    function startUnloadingProcess() {
+        const droppedMaterial = agvDetail.currentLoad;
+        startTime = performance.now();
+        handleMaterialDrop(droppedMaterial);
+    }
+
+    function handleMaterialDrop(droppedMaterial: number) {
+        if (isPausedRef.current) {
+            if (!pauseTimeRef.current) {
+                pauseTimeRef.current = performance.now();
+            }
+            requestAnimationFrame(() => handleMaterialDrop(droppedMaterial));
+            return;
+        }
+
+        if (pauseTimeRef.current) {
+            const pauseDuration = performance.now() - pauseTimeRef.current;
+            startTime += pauseDuration;
+            pauseTimeRef.current = null;
+        }
+
+        const elapsedTime = performance.now() - startTime;
+        const unLoadDuration = agvDetail.point.action.unLoadDuration;
+        fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
+
+        if (elapsedTime >= fixedInterval) {
+            let droppedMat = droppedMaterial - 1;
+            decrementVehicleLoad(agvDetail.modelUuid, 1);
+            const materialId = removeLastMaterial(agvDetail.modelUuid);
+            if (materialId) {
+                removeMaterial(materialId);
+            }
+            if (droppedMat > 0) {
+                startTime = performance.now();
+                requestAnimationFrame(() => handleMaterialDrop(droppedMat));
+            } else {
+                return;
+            }
+        } else {
+            requestAnimationFrame(() => handleMaterialDrop(droppedMaterial));
+        }
+    }
+
+
     return (
         <>
             <VehicleAnimator
@@ -127,6 +187,7 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
                 agvUuid={agvDetail?.modelUuid}
                 agvDetail={agvDetail}
                 reset={reset}
+                startUnloadingProcess={startUnloadingProcess}
             />
             <MaterialAnimator agvDetail={agvDetail} />
         </>