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) {

app/src/modules/simulation/vehicle/navMesh/polygonGenerator.tsx

@@ -17,7 +17,7 @@ export default function PolygonGenerator({
     useEffect(() => {
         let allLines = arrayLinesToObject(lines.current);
         const wallLines = allLines?.filter((line) => line?.type === "WallLine");
-        const aisleLines = allLines?.filter((line) => line?.type === "AisleLine");
+        const aisleLines = allLines?.filter((line) => line?.type === "AisleLine")
 
         const wallPoints = wallLines
             .map((pair) => pair?.line.map((vals) => vals.position))
@@ -39,9 +39,10 @@ export default function PolygonGenerator({
         );
 
         const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
+        
         renderWallGeometry(wallPoints);
 
-        if (polygons.features.length > 1) {
+        if (polygons.features.length > 0) {
             polygons.features.forEach((feature) => {
                 if (feature.geometry.type === "Polygon") {
 

app/src/modules/simulation/vehicle/vehicles.tsx

@@ -146,7 +146,7 @@ function Vehicles() {
 
     useEffect(() => {
         addVehicle('123', vehicleStatusSample[0]);
-        addVehicle('123', vehicleStatusSample[1]);
+        // addVehicle('123', vehicleStatusSample[1]);
         // addVehicle('123', vehicleStatusSample[2]);
     }, [])