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}
+                    />
+                </>
             )}
 
         </>

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

@@ -5,133 +5,206 @@ import { useFloorItems } from "../../../store/store";
 import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
 import VehicleUI from "../ui/vehicle/vehicleUI";
 function Vehicles() {
-  const { vehicles, addVehicle } = useVehicleStore();
-  const { selectedEventSphere } = useSelectedEventSphere();
 
-  const { floorItems } = useFloorItems();
+    const { vehicles, addVehicle } = useVehicleStore();
 
-  const [vehicleStatusSample, setVehicleStatusSample] = useState<
-    VehicleEventSchema[]
-  >([
-    
-    {
-      modelUuid: "68f8dc55-7802-47fe-aa1c-eade54b4320a",
-      modelName: "AGV",
-      position: [89.61609306554463, 0, 33.634136622267356],
-      rotation: [0, 0, 0],
-      state: "idle",
-      type: "vehicle",
-      speed: 2.5,
-      point: {
-        uuid: "point-789",
-        position: [0, 1, 0],
-        rotation: [0, 0, 0],
-        action: {
-          actionUuid: "action-456",
-          actionName: "Deliver to Zone A",
-          actionType: "travel",
-          unLoadDuration: 10,
-          loadCapacity: 2,
-          pickUpPoint: null,
-          unLoadPoint: null,
-          triggers: [
-            {
-              triggerUuid: "trig-001",
-              triggerName: "Start Travel",
-              triggerType: "onStart",
-              delay: 0,
-              triggeredAsset: {
-                triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
-                triggeredPoint: {
-                  pointName: "Pickup Arm Point",
-                  pointUuid: "arm-point-01",
-                },
-                triggeredAction: {
-                  actionName: "Grab Widget",
-                  actionUuid: "grab-001",
-                },
-              },
-            },
-            {
-              triggerUuid: "trig-002",
-              triggerName: "Complete Travel",
-              triggerType: "onComplete",
-              delay: 2,
-              triggeredAsset: null,
-            },
-          ],
+    const { floorItems } = useFloorItems()
+
+    const [vehicleStatusSample, setVehicleStatusSample] = useState<
+        VehicleEventSchema[]
+    >([
+        {
+            modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
+            modelName: "AGV",
+            position: [97.9252965204558, 0, 37.96138815638661],
+            rotation: [0, 0, 0],
+            state: "idle",
+            type: "vehicle",
+            speed: 2.5,
+            point: {
+                uuid: "point-789",
+                position: [0, 1, 0],
+                rotation: [0, 0, 0],
+                action: {
+                    actionUuid: "action-456",
+                    actionName: "Deliver to Zone A",
+                    actionType: "travel",
+                    unLoadDuration: 10,
+                    loadCapacity: 2,
+                    pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
+                    unLoadPoint: { x: 105.71483985219794, y: 0, z: 28.66321267938962 },
+                    triggers: [
+                        {
+                            triggerUuid: "trig-001",
+                            triggerName: "Start Travel",
+                            triggerType: "onComplete",
+                            delay: 0,
+                            triggeredAsset: {
+                                triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+                                triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+                                triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+                            }
+                        },
+                        {
+                            triggerUuid: "trig-002",
+                            triggerName: "Complete Travel",
+                            triggerType: "onComplete",
+                            delay: 2,
+                            triggeredAsset: null
+                        }
+                    ]
+                }
+            }
         },
-      },
-    },
-    {
-      modelUuid: "3a8f6da6-da57-4ef5-91e3-b8daf89e5753",
-      modelName: "forklift",
-      position: [98.85729337188162, 0, 38.36616546567653],
-      rotation: [0, 0, 0],
-      state: "idle",
-      type: "vehicle",
-      speed: 2.5,
-      point: {
-        uuid: "point-789",
-        position: [0, 1, 0],
-        rotation: [0, 0, 0],
-        action: {
-          actionUuid: "action-456",
-          actionName: "Deliver to Zone A",
-          actionType: "travel",
-          unLoadDuration: 15,
-          loadCapacity: 5,
-          pickUpPoint: null,
-          unLoadPoint: null,
-          triggers: [
-            {
-              triggerUuid: "trig-001",
-              triggerName: "Start Travel",
-              triggerType: "onStart",
-              delay: 0,
-              triggeredAsset: {
-                triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
-                triggeredPoint: {
-                  pointName: "Pickup Arm Point",
-                  pointUuid: "arm-point-01",
-                },
-                triggeredAction: {
-                  actionName: "Grab Widget",
-                  actionUuid: "grab-001",
-                },
-              },
-            },
-            {
-              triggerUuid: "trig-002",
-              triggerName: "Complete Travel",
-              triggerType: "onComplete",
-              delay: 2,
-              triggeredAsset: null,
-            },
-          ],
+        {
+            modelUuid: "b06960bb-3d2e-41f7-a646-335f389c68b4",
+            modelName: "AGV",
+            position: [89.61609306554463, 0, 33.634136622267356],
+            rotation: [0, 0, 0],
+            state: "idle",
+            type: "vehicle",
+            speed: 2.5,
+            point: {
+                uuid: "point-789",
+                position: [0, 1, 0],
+                rotation: [0, 0, 0],
+                action: {
+                    actionUuid: "action-456",
+                    actionName: "Deliver to Zone A",
+                    actionType: "travel",
+                    unLoadDuration: 10,
+                    loadCapacity: 2,
+                    pickUpPoint: null,
+                    unLoadPoint: null,
+                    triggers: [
+                        {
+                            triggerUuid: "trig-001",
+                            triggerName: "Start Travel",
+                            triggerType: "onStart",
+                            delay: 0,
+                            triggeredAsset: {
+                                triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+                                triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+                                triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+                            }
+                        },
+                        {
+                            triggerUuid: "trig-002",
+                            triggerName: "Complete Travel",
+                            triggerType: "onComplete",
+                            delay: 2,
+                            triggeredAsset: null
+                        }
+                    ]
+                }
+            }
         },
-      },
-    },
-  ]);
-  // useEffect(())
-  console.log("vehicleStatusSample", vehicleStatusSample);
-  useEffect(() => {
-    addVehicle("123", vehicleStatusSample[0]);
-    // addVehicle('123', vehicleStatusSample[1]);
-    // addVehicle('123', vehicleStatusSample[2]);
-  }, []);
+        {
+            modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
+            modelName: "AGV",
+            position: [105.90938758014703, 0, 31.584209911095215],
+            rotation: [0, 0, 0],
+            state: "idle",
+            type: "vehicle",
+            speed: 2.5,
+            point: {
+                uuid: "point-789",
+                position: [0, 1, 0],
+                rotation: [0, 0, 0],
+                action: {
+                    actionUuid: "action-456",
+                    actionName: "Deliver to Zone A",
+                    actionType: "travel",
+                    unLoadDuration: 10,
+                    loadCapacity: 2,
+                    pickUpPoint: null,
+                    unLoadPoint: null,
+                    triggers: [
+                        {
+                            triggerUuid: "trig-001",
+                            triggerName: "Start Travel",
+                            triggerType: "onStart",
+                            delay: 0,
+                            triggeredAsset: {
+                                triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+                                triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+                                triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+                            }
+                        },
+                        {
+                            triggerUuid: "trig-002",
+                            triggerName: "Complete Travel",
+                            triggerType: "onComplete",
+                            delay: 2,
+                            triggeredAsset: null
+                        }
+                    ]
+                }
+            }
+        },
+        // {
+        //     modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
+        //     modelName: "forklift",
+        //     position: [98.85729337188162, 0, 38.36616546567653],
+        //     rotation: [0, 0, 0],
+        //     state: "idle",
+        //     type: "vehicle",
+        //     speed: 2.5,
+        //     point: {
+        //         uuid: "point-789",
+        //         position: [0, 1, 0],
+        //         rotation: [0, 0, 0],
+        //         action: {
+        //             actionUuid: "action-456",
+        //             actionName: "Deliver to Zone A",
+        //             actionType: "travel",
+        //             unLoadDuration: 15,
+        //             loadCapacity: 5,
+        //             pickUpPoint: null,
+        //             unLoadPoint: null,
+        //             triggers: [
+        //                 {
+        //                     triggerUuid: "trig-001",
+        //                     triggerName: "Start Travel",
+        //                     triggerType: "onStart",
+        //                     delay: 0,
+        //                     triggeredAsset: {
+        //                         triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+        //                         triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+        //                         triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+        //                     }
+        //                 },
+        //                 {
+        //                     triggerUuid: "trig-002",
+        //                     triggerName: "Complete Travel",
+        //                     triggerType: "onComplete",
+        //                     delay: 2,
+        //                     triggeredAsset: null
+        //                 }
+        //             ]
+        //         }
+        //     }
+        // }
+    ]);
+    useEffect(() => {
+        console.log("vehicles", vehicles);
+    }, [vehicles])
+    useEffect(() => {
+        addVehicle("123", vehicleStatusSample[0]);
+        addVehicle('123', vehicleStatusSample[1]);
+        addVehicle('123', vehicleStatusSample[2]);
+    }, []);
 
-  useEffect(() => {}, [vehicles]);
-
-  return (
-    <>
-      <VehicleInstances />
-      <VehicleUI
-        setVehicleStatusSample={setVehicleStatusSample}
-        vehicleStatusSample={vehicleStatusSample}
-      />
-    </>
-  );
+    return (
+        <>
+            <VehicleInstances setVehicleStatusSample={setVehicleStatusSample}
+                vehicleStatusSample={vehicleStatusSample} />
+            {/* <VehicleUI
+                setVehicleStatusSample={setVehicleStatusSample}
+                vehicleStatusSample={vehicles}
+            /> */}
+        </>
+    );
 }
 
 export default Vehicles;