Merge remote-tracking branch 'origin/simulation-agv-v2' into v2

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -38,14 +38,6 @@ const SimulationPlayer: React.FC = () => {
   const { isReset, setReset } = useResetButtonStore();
   const { subModule } = useSubModuleStore();
 
-  useEffect(() => {
-    if (isReset) {
-      setTimeout(()=>{
-        setReset(false);
-      },0)
-    }
-  }, [isReset])
-
   // Button functions
   const handleReset = () => {
     setReset(true);
@@ -282,7 +274,8 @@ const SimulationPlayer: React.FC = () => {
                         </div>
                         {index < intervals.length - 1 && (
                           <div
-                            className={`line ${progress >= ((index + 1) / totalSegments) * 100
+                            className={`line ${
+                              progress >= ((index + 1) / totalSegments) * 100
                                 ? "filled"
                                 : ""
                             }`}

app/src/modules/simulation/machine/instances/animator/machineAnimator.tsx

@@ -34,16 +34,12 @@ const MachineAnimator = ({ currentPhase, handleCallBack, processingTime, machine
     useEffect(() => {
         isPlayingRef.current = isPlaying;
     }, [isPlaying]);
-    useEffect(() => {
+
-        isResetRef.current = isReset;
-    }, [isReset]);
 
 
     useEffect(() => {
-
         if (isReset || !isPlaying) {
             reset();
-            setReset(false);
             startTimeRef.current = 0;
             isPausedRef.current = false;
             pauseTimeRef.current = 0;
@@ -53,20 +49,19 @@ const MachineAnimator = ({ currentPhase, handleCallBack, processingTime, machine
         }
     }, [isReset, isPlaying])
 
+
+
     useEffect(() => {
         if (currentPhase === 'processing' && !animationStarted.current && machineUuid) {
             animationStarted.current = true;
             startTimeRef.current = performance.now();
             animationFrameId.current = requestAnimationFrame(step);
         }
+
     }, [currentPhase]);
 
     function step(time: number) {
-        if (!isPausedRef.current || !isResetRef.current) {
+
-            if (animationFrameId.current) {
-                cancelAnimationFrame(animationFrameId.current);
-                animationFrameId.current = null;
-            }
         if (isPausedRef.current) {
             if (!pauseTimeRef.current) {
                 pauseTimeRef.current = performance.now();
@@ -82,18 +77,23 @@ const MachineAnimator = ({ currentPhase, handleCallBack, processingTime, machine
         }
 
         const elapsed = time - startTimeRef.current;
-            const processedTime = processingTime * 1000;
+        const processedTime = (processingTime * 1000) / speed;
+
         if (elapsed < processedTime) {
             machineStatus(machineUuid, "Machine is currently processing the task");
             animationFrameId.current = requestAnimationFrame(step);
         } else {
-                removeCurrentAction(machineUuid);
             animationStarted.current = false;
+            if (animationFrameId.current !== null) {
+                removeCurrentAction(machineUuid);
+                cancelAnimationFrame(animationFrameId.current);
+                animationFrameId.current = null;
                 handleCallBack();
+            }
 
         }
     }
-    }
+
 
 
     return null;

app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx

@@ -10,10 +10,10 @@ function MachineInstance({ machineDetail }: any) {
     const { machines, addCurrentAction, setMachineState, setMachineActive } = useMachineStore();
 
     const reset = () => {
+        setCurrentPhase("idle");
         setMachineState(machineDetail.modelUuid, 'idle');
         setMachineActive(machineDetail.modelUuid, false);
         isIncrememtable.current = true;
-        setCurrentPhase("idle");
     }
     const increment = () => {
         if (isIncrememtable.current) {
@@ -31,7 +31,7 @@ function MachineInstance({ machineDetail }: any) {
             if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && !machineDetail.currentAction) {
                 setTimeout(() => {
                     increment();
-                }, 2000);
+                }, 5000);
                 machineStatus(machineDetail.modelUuid, 'Machine is idle and waiting for next instruction.')
             } else if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && machineDetail.currentAction) {
                 setCurrentPhase("processing");
@@ -39,8 +39,6 @@ function MachineInstance({ machineDetail }: any) {
                 setMachineActive(machineDetail.modelUuid, true);
                 machineStatus(machineDetail.modelUuid, "Machine started processing")
             }
-        } else {
-            reset();
         }
     }, [currentPhase, isPlaying, machines])
 
@@ -60,6 +58,7 @@ function MachineInstance({ machineDetail }: any) {
     return (
         <>
             <MachineAnimator processingTime={machineDetail.point.action.processTime} handleCallBack={handleCallBack} currentPhase={currentPhase} machineUuid={machineDetail.modelUuid} machineStatus={machineStatus} reset={reset} />
+
         </>
     )
 }

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

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { MaterialModel } from '../../../materials/instances/material/materialModel';
+import { Html } from '@react-three/drei';
+
+type MaterialAnimatorProps = {
+    agvDetail: VehicleStatus;
+};
+
+
+const MaterialAnimator = ({ agvDetail }: MaterialAnimatorProps) => {
+    const meshRef = useRef<any>(null!);
+    const [hasLoad, setHasLoad] = useState(false);
+    const { scene } = useThree();
+    const offset = new THREE.Vector3(0, 0.85, 0);
+    const [htmlPosition, setHtmlPosition] = useState<[number, number, number]>([0, 0, 0]);
+    const [htmlRotation, setHtmlRotation] = useState<[number, number, number]>([0, 0, 0]);
+
+    useEffect(() => {
+        setHasLoad(agvDetail.currentLoad > 0);
+    }, [agvDetail.currentLoad]);
+
+    useFrame(() => {
+        if (!hasLoad || !meshRef.current) return;
+
+        const agvModel = scene.getObjectByProperty("uuid", agvDetail.modelUuid) as THREE.Object3D;
+        if (agvModel) {
+            const worldPosition = offset.clone().applyMatrix4(agvModel.matrixWorld);
+            meshRef.current.position.copy(worldPosition);
+            setHtmlPosition([worldPosition.x, worldPosition.y, worldPosition.z]);
+            meshRef.current.rotation.copy(agvModel.rotation);
+            setHtmlRotation([agvModel.rotation.x, agvModel.rotation.y, agvModel.rotation.z]);
+        }
+    });
+
+    return (
+        <>
+            {hasLoad && (
+                <>
+                    <MaterialModel
+                        matRef={meshRef}
+                        materialType={agvDetail.materialType || 'Default material'}
+                    />
+
+                    <Html
+                        position={htmlPosition}
+                        rotation={htmlRotation}
+                        style={{ backgroundColor: "pink", padding: "4px", borderRadius: "4px" }}
+                    >
+                        {agvDetail.currentLoad}
+                    </Html>
+
+                </>
+            )}
+        </>
+    );
+};
+
+
+export default MaterialAnimator;

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

@@ -199,7 +199,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
     return (
         <>
             {currentPath.length > 0 && (
-                <>
+                <group visible={false}>
                     <Line points={currentPath} color="blue" lineWidth={3} />
                     {currentPath.map((point, index) => (
                         <mesh key={index} position={point}>
@@ -207,7 +207,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
                             <meshStandardMaterial color="red" />
                         </mesh>
                     ))}
-                </>
+                </group>
             )}
         </>
     );

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

@@ -5,11 +5,13 @@ import { NavMeshQuery } from '@recast-navigation/core';
 import { useNavMesh } from '../../../../../store/store';
 import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
+import MaterialAnimator from '../animator/materialAnimator';
 
 function VehicleInstance({ agvDetail }: any) {
     const { navMesh } = useNavMesh();
+    const vehicleRef: any = useRef();
     const { isPlaying } = usePlayButtonStore();
-    const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
+    const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad, setMaterialType } = useVehicleStore();
     const [currentPhase, setCurrentPhase] = useState<string>('stationed');
     const [path, setPath] = useState<[number, number, number][]>([]);
     let isIncrememtable = useRef<boolean>(true);
@@ -44,8 +46,8 @@ function VehicleInstance({ agvDetail }: any) {
 
     const increment = () => {
         if (isIncrememtable.current) {
-
             incrementVehicleLoad(agvDetail.modelUuid, 10);
+            setMaterialType(agvDetail.modelUuid, 'Material 1')
             isIncrememtable.current = false;
         }
     }
@@ -71,7 +73,7 @@ function VehicleInstance({ agvDetail }: any) {
                 }, 5000);
 
 
-                if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
+                if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity && agvDetail.materialType) {
                     const toDrop = computePath(
                         agvDetail.point.action.pickUpPoint.position,
                         agvDetail.point.action.unLoadPoint.position
@@ -118,6 +120,7 @@ function VehicleInstance({ agvDetail }: any) {
             setVehicleState(agvDetail.modelUuid, 'idle');
             setVehicleActive(agvDetail.modelUuid, false);
             setPath([]);
+            setMaterialType(agvDetail.modelUuid, null)
             vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
         }
     }
@@ -132,6 +135,7 @@ function VehicleInstance({ agvDetail }: any) {
                 agvDetail={agvDetail}
                 reset={reset}
             />
+            <MaterialAnimator agvDetail={agvDetail} />
         </>
     );
 }