diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx index f927c33..b26cfc9 100644 --- a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx +++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx @@ -5,37 +5,40 @@ import { useGLTF } from "@react-three/drei"; import { useSelectedEventSphere } from "../../../../store/simulation/useSimulationStore"; import * as THREE from "three"; import { useThree } from "@react-three/fiber"; +import { useVehicleStore } from "../../../../store/simulation/useVehicleStore"; type VehicleUIProps = { vehicleStatusSample: VehicleEventSchema[]; setVehicleStatusSample: React.Dispatch< React.SetStateAction >; + vehicle: any }; const VehicleUI: React.FC = ({ vehicleStatusSample, setVehicleStatusSample, + vehicle }) => { const { scene: startScene } = useGLTF(startPoint) as any; const { scene: endScene } = useGLTF(startEnd) as any; const { camera, gl, controls } = useThree(); const { selectedEventSphere } = useSelectedEventSphere(); - + const { updateVehicle } = useVehicleStore(); const startMarker = useRef(null); const endMarker = useRef(null); - const hasInitialized = useRef(false); + const hasInitialized = useRef(false); + const raycaster = useRef(new THREE.Raycaster()); + const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane + const mouse = useRef(new THREE.Vector2()); + const prevMousePos = useRef({ x: 0, y: 0 }); const [draggedMarker, setDraggedMarker] = useState<"start" | "end" | null>( null ); const [dragOffset, setDragOffset] = useState(null); - const [isRotating, setIsRotating] = useState(false); + const [isRotating, setIsRotating] = useState(false); - const raycaster = useRef(new THREE.Raycaster()); - const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane - const mouse = useRef(new THREE.Vector2()); - const prevMousePos = useRef({ x: 0, y: 0 }); // Initialize start/end markers useEffect(() => { @@ -91,9 +94,8 @@ const VehicleUI: React.FC = ({ pickUpPoint.y, pickUpPoint.z ); - const worldPos = selectedEventSphere.localToWorld(localPos); - worldPos.y = 0; // Force y to 0 - startMarker.current.position.copy(worldPos); + localPos.y = 0; // Force y to 0 + startMarker.current.position.copy(localPos); } else { const defaultLocal = new THREE.Vector3(0, 0, 1.5); const defaultWorld = selectedEventSphere.localToWorld(defaultLocal); @@ -108,9 +110,10 @@ const VehicleUI: React.FC = ({ unLoadPoint.y, unLoadPoint.z ); - const worldPos = selectedEventSphere.localToWorld(localPos); - worldPos.y = 0; // Force y to 0 - endMarker.current.position.copy(worldPos); + + + localPos.y = 0; // Force y to 0 + endMarker.current.position.copy(localPos); } else { const defaultLocal = new THREE.Vector3(0, 0, -1.5); const defaultWorld = selectedEventSphere.localToWorld(defaultLocal); @@ -190,6 +193,7 @@ const VehicleUI: React.FC = ({ z: intersectPoint.z + dragOffset.z, }; + if (draggedMarker === "start" && startMarker.current) { startMarker.current.position.set(newPos.x, newPos.y, newPos.z); } else if (draggedMarker === "end" && endMarker.current) { @@ -215,36 +219,51 @@ const VehicleUI: React.FC = ({ draggedMarker === "start" ? startMarker.current : endMarker.current; if (!marker) return; - const worldPos = marker.position.clone(); - const localPos = selectedEventSphere.worldToLocal(worldPos); + const worldPos = marker.position; - // Direct update (no snapping, ground level forced at y = 0) - const updatedLocalPos = { x: localPos.x, y: 0, z: localPos.z }; + const updatedLocalPos = { x: worldPos.x, y: 0, z: worldPos.z }; + console.log('updatedLocalPos: ', updatedLocalPos); - setVehicleStatusSample((prev) => - prev.map((vehicle) => { - if ( - vehicle.modelUuid === selectedEventSphere.userData.modelUuid && - selectedEventSphere - ) { - const updatedVehicle = { - ...vehicle, - point: { - ...vehicle.point, - action: { - ...vehicle.point?.action, - ...(draggedMarker === "start" - ? { pickUpPoint: updatedLocalPos } - : { unLoadPoint: updatedLocalPos }), - }, - }, - }; - return updatedVehicle; - } - return vehicle; - }) - ); + console.log('draggedMarker: ', draggedMarker); + // setVehicleStatusSample((prev) => + // prev.map((vehicle) => { + // if ( + // vehicle.modelUuid === selectedEventSphere.userData.modelUuid && + // selectedEventSphere + // ) { + // const updatedVehicle = { + // ...vehicle, + // point: { + // ...vehicle.point, + // action: { + // ...vehicle.point?.action, + // ...(draggedMarker === "start" + // ? { pickUpPoint: updatedLocalPos } + // : { unLoadPoint: updatedLocalPos }), + // }, + // }, + // }; + // return updatedVehicle; + // } + // return vehicle; + // }) + // ); + + updateVehicle(selectedEventSphere.userData.modelUuid, { + point: { + ...vehicle?.point, + action: { + ...vehicle?.point?.action, + ...(draggedMarker === "start" + ? { pickUpPoint: updatedLocalPos } + : { unLoadPoint: updatedLocalPos }), + }, + }, + }); + + + setDraggedMarker(null); setDragOffset(null); }; diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx index 6e2093e..e4b2ef5 100644 --- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx +++ b/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(true); - const [progress, setProgress] = useState(0); - const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]); - const { scene } = useThree(); const progressRef = useRef(0); const movingForward = useRef(true); const completedRef = useRef(false); + const isPausedRef = useRef(false); + const pauseTimeRef = useRef(null); + const [restRotation, setRestingRotation] = useState(true); + const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]); + const [progress, setProgress] = useState(0); + const { scene } = useThree(); let startTime: number; let fixedInterval: number; let coveredDistance = progressRef.current; - const isPausedRef = useRef(false); - const pauseTimeRef = useRef(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)); diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx index 3f692d9..570c137 100644 --- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx +++ b/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('stationed'); const [path, setPath] = useState<[number, number, number][]>([]); - let isIncrememtable = useRef(true); + let isIncrememtable = useRef(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'); diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx index 2a0070b..aa482c0 100644 --- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx +++ b/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 + >; +}; +const VehicleInstances: React.FC = ({ + vehicleStatusSample, + setVehicleStatusSample, +}) => { -function VehicleInstances() { const { vehicles } = useVehicleStore(); + return ( <> {vehicles.map((val: any, i: any) => - + <> + + + )} diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx index 65376f2..3b811b3 100644 --- a/app/src/modules/simulation/vehicle/vehicles.tsx +++ b/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 ( - <> - - - - ); + return ( + <> + + {/* */} + + ); } export default Vehicles;