Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/v2' into v2-ui

This commit is contained in:
Vishnu 2025-05-08 15:31:25 +05:30
parent e189ea99d3 12b12d9eb0
commit 520cd5f581
21 changed files with 769 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -549,7 +549,7 @@ const ZoneGroup: React.FC = () => {
const midpoint = new THREE.Vector3(
(point1.x + point2.x) / 2,
CONSTANTS.zoneConfig.height / 2 +
(zone.layer - 1) * CONSTANTS.zoneConfig.height,
(zone.layer - 1) * CONSTANTS.zoneConfig.height,
(point1.z + point2.z) / 2
);

24
app/src/modules/simulation/actions/conveyor/actionHandler/useDefaultHandler.ts
View File

@ -0,0 +1,24 @@
import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
export function useDefaultHandler() {
const { getMaterialById } = useMaterialStore();
const defaultLogStatus = (materialUuid: string, status: string) => {
// console.log(`${materialUuid}, ${status}`);
}
const handleDefault = useCallback((action: ConveyorAction, materialId?: string) => {
if (!action || action.actionType !== 'default' || !materialId) return;
const material = getMaterialById(materialId);
if (!material) return;
defaultLogStatus(material.materialId, `performed Default action`);
}, [getMaterialById]);
return {
handleDefault,
};
}

4
app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts
View File

@ -2,7 +2,7 @@ import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
export function useDespawnHandler() {
const { addMaterial, getMaterialById, removeMaterial } = useMaterialStore();
const { getMaterialById, removeMaterial } = useMaterialStore();
const deSpawnLogStatus = (materialUuid: string, status: string) => {
// console.log(`${materialUuid}, ${status}`);
@ -18,7 +18,7 @@ export function useDespawnHandler() {
deSpawnLogStatus(material.materialId, `Despawned`);
}, [addMaterial, getMaterialById, removeMaterial]);
}, [getMaterialById, removeMaterial]);
return {
handleDespawn,

7
app/src/modules/simulation/actions/conveyor/useConveyorActions.ts
View File

@ -1,17 +1,20 @@
import { useEffect, useCallback } from "react";
import { useDefaultHandler } from "./actionHandler/useDefaultHandler";
import { useSpawnHandler } from "./actionHandler/useSpawnHandler";
import { useSwapHandler } from "./actionHandler/useSwapHandler";
import { useDelayHandler } from "./actionHandler/useDelayHandler";
import { useDespawnHandler } from "./actionHandler/useDespawnHandler";
export function useConveyorActions() {
const { handleDefault } = useDefaultHandler();
const { handleSpawn, clearCurrentSpawn } = useSpawnHandler();
const { handleSwap } = useSwapHandler();
const { handleDespawn } = useDespawnHandler();
const { handleDelay, cleanupDelay } = useDelayHandler();
const handleDefaultAction = useCallback((action: ConveyorAction) => {
}, []);
const handleDefaultAction = useCallback((action: ConveyorAction, materialId?: string) => {
handleDefault(action, materialId);
}, [handleDefault]);
const handleSpawnAction = useCallback((action: ConveyorAction) => {
handleSpawn(action);

41
app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts Normal file
View File

@ -0,0 +1,41 @@
import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
import { useArmBotStore } from "../../../../../store/simulation/useArmBotStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
export function usePickAndPlaceHandler() {
const { getMaterialById } = useMaterialStore();
const { addCurrentAction } = useArmBotStore();
const { getModelUuidByActionUuid } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const pickAndPlaceLogStatus = (materialUuid: string, status: string) => {
// console.log(`${materialUuid}, ${status}`);
}
const handlePickAndPlace = useCallback((action: RoboticArmAction, materialId?: string) => {
if (!action || action.actionType !== 'pickAndPlace' || !materialId) return;
const material = getMaterialById(materialId);
if (!material) return;
const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
if (!modelUuid) return;
addCurrentAction(
modelUuid,
action.actionUuid,
material.materialType,
material.materialId
);
pickAndPlaceLogStatus(material.materialId, `if going to be picked by armBot ${modelUuid}`);
}, [getMaterialById, getModelUuidByActionUuid, addCurrentAction]);
return {
handlePickAndPlace,
};
}

16
app/src/modules/simulation/actions/roboticArm/useRoboticArmActions.ts
View File

@ -1,20 +1,24 @@
import { useEffect, useCallback } from 'react';
import { usePickAndPlaceHandler } from './actionHandler/usePickAndPlaceHandler';
export function useRoboticArmActions() {
const { handlePickAndPlace } = usePickAndPlaceHandler();
const handlePickAndPlace = useCallback((action: RoboticArmAction) => {
console.log(`Robotic arm pick and place`);
}, []);
const handlePickAndPlaceAction = useCallback((action: RoboticArmAction, materialId: string) => {
handlePickAndPlace(action, materialId);
}, [handlePickAndPlace]);
const handleRoboticArmAction = useCallback((action: RoboticArmAction, materialId: string) => {
if (!action) return;
const handleRoboticArmAction = useCallback((action: RoboticArmAction) => {
switch (action.actionType) {
case 'pickAndPlace':
handlePickAndPlace(action);
handlePickAndPlaceAction(action, materialId);
break;
default:
console.warn(`Unknown robotic arm action type: ${action.actionType}`);
}
}, [handlePickAndPlace]);
}, [handlePickAndPlaceAction]);
const cleanup = useCallback(() => {
}, []);

50
app/src/modules/simulation/actions/useActionHandler.ts
View File

@ -23,36 +23,26 @@ export function useActionHandler() {
const handleAction = useCallback(
(action: Action, materialId?: string) => {
if (!action) return;
try {
switch (action.actionType) {
case "default":
case "spawn":
case "swap":
case "delay":
case "despawn":
handleConveyorAction(
action as ConveyorAction,
materialId as string
);
break;
case "travel":
handleVehicleAction(action as VehicleAction);
break;
case "pickAndPlace":
handleRoboticArmAction(action as RoboticArmAction);
break;
case "process":
handleMachineAction(action as MachineAction);
break;
case "store":
handleStorageAction(action as StorageAction);
break;
default:
console.warn(
`Unknown action type: ${(action as Action).actionType}`
);
}
try {
switch (action.actionType) {
case 'default': case 'spawn': case 'swap': case 'delay': case 'despawn':
handleConveyorAction(action as ConveyorAction, materialId as string);
break;
case 'travel':
handleVehicleAction(action as VehicleAction, materialId as string);
break;
case 'pickAndPlace':
handleRoboticArmAction(action as RoboticArmAction, materialId as string);
break;
case 'process':
handleMachineAction(action as MachineAction);
break;
case 'store':
handleStorageAction(action as StorageAction);
break;
default:
console.warn(`Unknown action type: ${(action as Action).actionType}`);
}
} catch (error) {
echo.error("Failed to handle action");
console.error("Error handling action:", error);

37
app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts Normal file
View File

@ -0,0 +1,37 @@
import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
import { useVehicleStore } from "../../../../../store/simulation/useVehicleStore";
export function useTravelHandler() {
const { getMaterialById } = useMaterialStore();
const { getModelUuidByActionUuid } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { incrementVehicleLoad, addCurrentMaterial } = useVehicleStore();
const travelLogStatus = (materialUuid: string, status: string) => {
// console.log(`${materialUuid}, ${status}`);
}
const handleTravel = useCallback((action: VehicleAction, materialId?: string) => {
if (!action || action.actionType !== 'travel' || !materialId) return;
const material = getMaterialById(materialId);
if (!material) return;
const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
if (!modelUuid) return;
incrementVehicleLoad(modelUuid, 1);
addCurrentMaterial(modelUuid, material.materialType, material.materialId);
travelLogStatus(material.materialId, `is triggering travel from ${modelUuid}`);
}, [getMaterialById, getModelUuidByActionUuid]);
return {
handleTravel,
};
}

15
app/src/modules/simulation/actions/vehicle/useVehicleActions.ts
View File

@ -1,20 +1,19 @@
import { useEffect, useCallback } from 'react';
import { useTravelHandler } from './actionHandler/useTravelHandler';
export function useVehicleActions() {
const { handleTravel } = useTravelHandler();
const handleTravelAction = useCallback((action: VehicleAction) => {
if (!action || action.actionType !== 'travel') return;
const handleTravelAction = useCallback((action: VehicleAction, materialId: string) => {
handleTravel(action, materialId);
}, [handleTravel]);
console.log(`Vehicle travel action ${action.actionUuid}`);
}, []);
const handleVehicleAction = useCallback((action: VehicleAction) => {
const handleVehicleAction = useCallback((action: VehicleAction, materialId: string) => {
if (!action) return;
switch (action.actionType) {
case 'travel':
handleTravelAction(action);
handleTravelAction(action, materialId);
break;
default:
console.warn(`Unknown vehicle action type: ${action.actionType}`);

33
app/src/modules/simulation/materials/instances/instance/materialInstance.tsx
View File

@ -85,37 +85,10 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
const callTrigger = () => {
if (!material.next) return;
const fromModel = getEventByModelUuid(selectedProduct.productId, material.next.modelUuid);
if (!fromModel) return;
const fromPoint = getPointByUuid(selectedProduct.productId, fromModel.modelUuid, material.next.pointUuid);
if (!fromPoint) return;
if (fromModel.type === 'transfer') {
const toModel = getEventByModelUuid(selectedProduct.productId, material.next.modelUuid);
if (!toModel) return;
if (toModel.type === 'transfer') {
const action = getActionByPointUuid(selectedProduct.productId, material.next.pointUuid);
if (action) {
triggerPointActions(action, material.materialId);
}
} else if (toModel?.type === 'vehicle') {
// Transfer to Vehicle
} else if (toModel?.type === 'machine') {
// Transfer to Machine
} else if (toModel?.type === 'roboticArm') {
// Transfer to Robotic Arm
} else if (toModel?.type === 'storageUnit') {
// Transfer to Storage Unit
}
} else if (fromModel.type === 'vehicle') {
} else if (fromModel.type === 'machine') {
} else if (fromModel.type === 'roboticArm') {
} else if (fromModel.type === 'storageUnit') {
const action = getActionByPointUuid(selectedProduct.productId, material.next.pointUuid);
if (action) {
triggerPointActions(action, material.materialId);
}
}
return (

2
app/src/modules/simulation/triggers/connector/triggerConnector.tsx
View File

@ -50,7 +50,7 @@ function TriggerConnector() {
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
const data =upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,

125
app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts
View File

@ -4,13 +4,15 @@ import { useProductStore } from '../../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useMaterialStore } from '../../../../store/simulation/useMaterialStore';
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
export function useTriggerHandler() {
const { handleAction } = useActionHandler();
const { selectedProduct } = useSelectedProduct();
const { getEventByTriggerUuid, getEventByModelUuid, getActionByUuid, getModelUuidByActionUuid } = useProductStore();
const { addCurrentAction, getArmBotById } = useArmBotStore();
const { setCurrentLocation, setNextLocation, getMaterialById, setIsPaused, setEndTime } = useMaterialStore();
const { getArmBotById } = useArmBotStore();
const { getVehicleById } = useVehicleStore();
const { setCurrentLocation, setNextLocation, getMaterialById, setIsPaused, setIsVisible, setEndTime } = useMaterialStore();
const handleTrigger = (trigger: TriggerSchema, action: Action, materialId: string) => {
@ -42,6 +44,46 @@ export function useTriggerHandler() {
}
} else if (toEvent?.type === 'vehicle') {
// Transfer to Vehicle
if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
// Handle current action of the material
handleAction(action, materialId);
if (material.next) {
const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
const vehicle = getVehicleById(trigger.triggeredAsset?.triggeredModel.modelUuid);
setCurrentLocation(material.materialId, {
modelUuid: material.next.modelUuid,
pointUuid: material.next.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
setNextLocation(material.materialId, null);
if (action) {
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
setIsVisible(materialId, false);
// Handle current action from vehicle
handleAction(action, materialId);
} else {
// Event Manager Needed
}
}
}
}
}
}
} else if (toEvent?.type === 'machine') {
// Transfer to Machine
@ -51,33 +93,41 @@ export function useTriggerHandler() {
if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
// Handle current action of the material
handleAction(action, materialId);
if (material.next) {
const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
const armBot = getArmBotById(trigger.triggeredAsset?.triggeredModel.modelUuid);
if (armBot) {
if (armBot.isActive === false && armBot.state === 'idle') {
setCurrentLocation(material.materialId, {
modelUuid: material.next.modelUuid,
pointUuid: material.next.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
setNextLocation(material.materialId, null);
setCurrentLocation(material.materialId, {
modelUuid: material.next.modelUuid,
pointUuid: material.next.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
setIsPaused(material.materialId, true);
addCurrentAction(
trigger.triggeredAsset?.triggeredModel.modelUuid,
trigger.triggeredAsset?.triggeredAction?.actionUuid,
material.materialType,
material.materialId
);
} else {
setNextLocation(material.materialId, null);
// Event Manager Needed
if (action) {
if (armBot) {
if (armBot.isActive === false && armBot.state === 'idle') {
setIsPaused(material.materialId, true);
// Handle current action from arm bot
handleAction(action, materialId);
} else {
// Event Manager Needed
}
}
}
}
handleAction(action, materialId);
}
}
} else if (toEvent?.type === 'storageUnit') {
@ -149,6 +199,41 @@ export function useTriggerHandler() {
} else if (toEvent?.type === 'vehicle') {
// Robotic Arm to Vehicle
if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
const vehicle = getVehicleById(trigger.triggeredAsset?.triggeredModel.modelUuid);
setCurrentLocation(material.materialId, {
modelUuid: trigger.triggeredAsset.triggeredModel.modelUuid,
pointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
setNextLocation(material.materialId, null);
if (action) {
if (vehicle) {
if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
setIsVisible(materialId, false);
// Handle current action from vehicle
handleAction(action, materialId);
} else {
// Event Manager Needed
}
}
}
}
}
} else if (toEvent?.type === 'machine') {
// Robotic Arm to Machine

536
app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
View File

@ -1,232 +1,372 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from "react";
import * as Types from "../../../../types/world/worldTypes";
import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
import * as THREE from "three";
import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import { useGLTF } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
import { useProductStore } from '../../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
import { useGLTF } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import {
useSelectedEventSphere,
useIsDragging,
useIsRotating,
} from "../../../../store/simulation/useSimulationStore";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { Box3, DoubleSide, Euler, Group, Mesh, Plane, Quaternion, Vector3 } from "three";
import { position } from "html2canvas/dist/types/css/property-descriptors/position";
const VehicleUI = () => {
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
const startMarker = useRef<THREE.Group>(null);
const endMarker = useRef<THREE.Group>(null);
const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedProduct } = useSelectedProduct();
const { getVehicleById } = useVehicleStore();
const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
const [endRotation, setEndRotation] = useState<[number, number, number]>([0, 0, 0]);
const { isDragging, setIsDragging } = useIsDragging();
const { isRotating, setIsRotating } = useIsRotating();
const { raycaster } = useThree();
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0));
const state: Types.ThreeState = useThree();
const controls: any = state.controls;
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
const startMarker = useRef<Group>(null);
const endMarker = useRef<Group>(null);
const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedProduct } = useSelectedProduct();
const { getVehicleById } = useVehicleStore();
const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([
0, 1, 0,
]);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const updateBackend = (
productName: string,
productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData
})
}
const [endPosition, setEndPosition] = useState<[number, number, number]>([
0, 1, 0,
]);
const [startRotation, setStartRotation] = useState<[number, number, number]>([
0, 0, 0,
]);
useEffect(() => {
if (!selectedEventSphere) return;
const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
const [endRotation, setEndRotation] = useState<[number, number, number]>([
0, 0, 0,
]);
const [steeringRotation, setSteeringRotation] = useState<
[number, number, number]
>([0, 0, 0]);
if (selectedVehicle?.point?.action) {
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
const { isDragging, setIsDragging } = useIsDragging();
const { isRotating, setIsRotating } = useIsRotating();
const { raycaster } = useThree();
const [point, setPoint] = useState<
[number, number, number]
>([0, 0, 0]);
const plane = useRef(new Plane(new Vector3(0, 1, 0), 0));
const [tubeRotation, setTubeRotation] = useState<boolean>(false);
const tubeRef = useRef<Group>(null);
const outerGroup = useRef<Group>(null);
const state: Types.ThreeState = useThree();
const controls: any = state.controls;
const [selectedVehicleData, setSelectedVechicleData] = useState<
{ position: [number, number, number], rotation: [number, number, number], }
>({ position: [0, 0, 0], rotation: [0, 0, 0], });
const CIRCLE_RADIUS = 0.8;
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
if (pickUpPoint) {
setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]);
const updateBackend = (
productName: string,
productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData,
});
};
useEffect(() => {
if (!selectedEventSphere) return;
const selectedVehicle = getVehicleById(
selectedEventSphere.userData.modelUuid
);
if (selectedVehicle) {
setSelectedVechicleData({ position: selectedVehicle.position, rotation: selectedVehicle.rotation });
setPoint(selectedVehicle.point.position)
}
setTimeout(() => {
if (selectedVehicle?.point?.action) {
const { pickUpPoint, unLoadPoint, steeringAngle } = selectedVehicle.point.action;
if (pickUpPoint && outerGroup.current) {
const worldPos = new Vector3(
pickUpPoint.position.x,
pickUpPoint.position.y,
pickUpPoint.position.z
);
const localPosition = outerGroup.current.worldToLocal(worldPos.clone());
setStartPosition([localPosition.x, selectedVehicle.point.position[1], localPosition.z,
]);
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z,])
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]);
setStartPosition([0, selectedVehicle.point.position[1] + 0.1, 1.5]);
setStartRotation([0, 0, 0]);
}
// end point
if (unLoadPoint && outerGroup.current) {
const worldPos = new Vector3(unLoadPoint.position.x, unLoadPoint.position.y, unLoadPoint.position.z);
const localPosition = outerGroup.current.worldToLocal(worldPos);
if (unLoadPoint) {
setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]);
setEndPosition([localPosition.x, selectedVehicle.point.position[1], localPosition.z]);
setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z,
]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
setEndRotation([0, 0, 0]);
setEndPosition([0, selectedVehicle.point.position[1] + 0.1, -1.5]);
setEndRotation([0, 0, 0]);
}
}
}, [selectedEventSphere]);
useFrame(() => {
if (!isDragging) return;
const intersectPoint = new THREE.Vector3();
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (intersects) {
if (isDragging === "start") {
setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
}
if (isDragging === "end") {
setEndPosition([intersectPoint.x, 0, intersectPoint.z]);
}
}
});
useFrame((state) => {
if (!isRotating) return;
const currentPointerX = state.pointer.x;
const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker = isRotating === "start" ? startMarker.current : endMarker.current;
if (marker) {
const rotationSpeed = 10;
if (isRotating === 'start') {
const y = startRotation[1] + deltaX * rotationSpeed;
setStartRotation([0, y, 0]);
} else {
const y = endRotation[1] + deltaX * rotationSpeed;
setEndRotation([0, y, 0]);
}
}
});
setSteeringRotation([0, steeringAngle, 0])
}
}, 10);
const handlePointerDown = (e: any, state: "start" | "end", rotation: "start" | "end") => {
}, [selectedEventSphere, outerGroup.current]);
if (e.object.name === "handle") {
const normalizedX = (e.clientX / window.innerWidth) * 2 - 1;
const normalizedY = -(e.clientY / window.innerHeight) * 2 + 1;
prevMousePos.current = { x: normalizedX, y: normalizedY };
setIsRotating(rotation);
if (controls) controls.enabled = false;
setIsDragging(null);
const handlePointerDown = (
e: any,
state: "start" | "end",
rotation: "start" | "end"
) => {
if (e.object.name === "handle") {
const normalizedX = (e.clientX / window.innerWidth) * 2 - 1;
const normalizedY = -(e.clientY / window.innerHeight) * 2 + 1;
prevMousePos.current = { x: normalizedX, y: normalizedY };
setIsRotating(rotation);
if (controls) controls.enabled = false;
setIsDragging(null);
} else {
setIsDragging(state);
setIsRotating(null);
if (controls) controls.enabled = false;
}
};
} else {
setIsDragging(state);
setIsRotating(null);
if (controls) controls.enabled = false;
}
};
const handlePointerUp = () => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
const handlePointerUp = () => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
if (selectedEventSphere?.userData.modelUuid) {
const updatedVehicle = getVehicleById(
selectedEventSphere.userData.modelUuid
);
if (selectedEventSphere?.userData.modelUuid) {
const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
let globalStartPosition = null;
let globalEndPosition = null;
if (updatedVehicle) {
const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, {
point: {
...updatedVehicle.point,
action: {
...updatedVehicle.point?.action,
pickUpPoint: {
position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
rotation: { x: 0, y: startRotation[1], z: 0, },
},
unLoadPoint: {
position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
rotation: { x: 0, y: endRotation[1], z: 0, },
},
if (outerGroup.current && startMarker.current && endMarker.current) {
const worldPosStart = new Vector3(...startPosition);
globalStartPosition = outerGroup.current.localToWorld(worldPosStart.clone());
const worldPosEnd = new Vector3(...endPosition);
globalEndPosition = outerGroup.current.localToWorld(worldPosEnd.clone());
}
if (updatedVehicle && globalEndPosition && globalStartPosition) {
const event = updateEvent(
selectedProduct.productId,
selectedEventSphere.userData.modelUuid,
{
point: {
...updatedVehicle.point,
action: {
...updatedVehicle.point?.action,
pickUpPoint: {
position: {
x: globalStartPosition.x,
y: 0,
z: globalStartPosition.z,
},
rotation: { x: 0, y: startRotation[1], z: 0 },
},
},
})
unLoadPoint: {
position: {
x: globalEndPosition.x,
y: 0,
z: globalEndPosition.z,
},
rotation: { x: 0, y: endRotation[1], z: 0 },
},
steeringAngle: steeringRotation[1]
},
},
}
);
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
}
};
}
}
};
useEffect(() => {
const handleGlobalPointerUp = () => {
setIsDragging(null);
setIsRotating(null);
if (controls) controls.enabled = true;
handlePointerUp();
};
useFrame(() => {
if (!isDragging || !plane.current || !raycaster || !outerGroup.current) return;
const intersectPoint = new Vector3();
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (!intersects) return;
const localPoint = outerGroup?.current.worldToLocal(intersectPoint.clone());
if (isDragging === "start") {
if (startMarker.current) {
if (isDragging || isRotating) {
window.addEventListener("pointerup", handleGlobalPointerUp);
}
}
setStartPosition([localPoint.x, point[1], localPoint.z]);
} else if (isDragging === "end") {
setEndPosition([localPoint.x, point[1], localPoint.z]);
}
});
return () => {
window.removeEventListener("pointerup", handleGlobalPointerUp);
};
}, [isDragging, isRotating, startPosition, startRotation, endPosition, endRotation]);
useEffect(() => {
const handleGlobalPointerUp = () => {
setIsDragging(null);
setIsRotating(null);
setTubeRotation(false);
if (controls) controls.enabled = true;
handlePointerUp();
return (
startPosition.length > 0 && endPosition.length > 0 ? (
<mesh>
<primitive
name="start"
object={startScene}
ref={startMarker}
position={startPosition}
rotation={startRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "start", "start");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
};
if (isDragging || isRotating || tubeRotation) {
window.addEventListener("pointerup", handleGlobalPointerUp);
}
return () => {
window.removeEventListener("pointerup", handleGlobalPointerUp);
};
}, [
isDragging, isRotating, startPosition, startRotation, endPosition, endRotation, tubeRotation, steeringRotation, outerGroup.current, tubeRef.current
]);
const prevSteeringY = useRef(0);
useFrame((state) => {
if (tubeRotation) {
const currentPointerX = state.pointer.x;
const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker = tubeRef.current;
if (marker) {
const rotationSpeed = 2;
marker.rotation.y += deltaX * rotationSpeed;
setSteeringRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z]);
}
} else {
prevSteeringY.current = 0;
}
});
useFrame((state) => {
if (!isRotating) return;
const currentPointerX = state.pointer.x;
const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker =
isRotating === "start" ? startMarker.current : endMarker.current;
if (marker) {
const rotationSpeed = 10;
marker.rotation.y += deltaX * rotationSpeed;
if (isRotating === "start") {
setStartRotation([
marker.rotation.x,
marker.rotation.y,
marker.rotation.z,
]);
} else {
setEndRotation([
marker.rotation.x,
marker.rotation.y,
marker.rotation.z,
]);
}
}
});
return selectedVehicleData ? (
<group position={selectedVehicleData.position} rotation={selectedVehicleData.rotation} ref={outerGroup}>
<group
position={[0, 0, 0]}
ref={tubeRef}
rotation={steeringRotation}
onPointerDown={(e) => {
e.stopPropagation();
setTubeRotation(true);
prevMousePos.current.x = e.pointer.x;
controls.enabled = false;
}}
onPointerMissed={() => {
controls.enabled = true;
setTubeRotation(false);
}}
onPointerUp={() => {
controls.enabled = true;
setTubeRotation(false);
}}
>
(
<mesh
position={[0, point[1], 0]}
rotation={[-Math.PI / 2, 0, 0]}
name="steering"
>
<ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.2, 36]} />
<meshBasicMaterial color="yellow" side={DoubleSide} />
<primitive
name="end"
object={endScene}
ref={endMarker}
position={endPosition}
rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
</mesh>
) : null
);
}
<mesh position={[0, point[1], CIRCLE_RADIUS + 0.24]} rotation={[Math.PI / 2, 0, 0]}>
<coneGeometry args={[0.1, 0.3, 12]} />
<meshBasicMaterial color="yellow" side={DoubleSide} />
</mesh>
)
</group>
{/* Start Marker */}
<primitive
name="startMarker"
object={startScene}
ref={startMarker}
position={startPosition}
rotation={startRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "start", "start");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
{/* End Marker */}
<primitive
name="endMarker"
object={endScene}
ref={endMarker}
position={endPosition}
rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
</group>
) : null;
};
export default VehicleUI;

10
app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx
View File

@ -38,10 +38,12 @@ const MaterialAnimator = ({ agvDetail }: MaterialAnimatorProps) => {
<>
{hasLoad && (
<>
<MaterialModel
matRef={meshRef}
materialType={agvDetail.materialType || 'Default material'}
/>
{agvDetail.currentMaterials.length > 0 &&
<MaterialModel
matRef={meshRef}
materialType={agvDetail.currentMaterials[0].materialType || 'Default material'}
/>
}
<Html
position={htmlPosition}

95
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@ -9,13 +9,14 @@ 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) {
const { decrementVehicleLoad, getVehicleById } = useVehicleStore();
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset, startUnloadingProcess }: VehicleAnimatorProps) {
const { getVehicleById } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { isPlaying } = usePlayButtonStore();
const { speed } = useAnimationPlaySpeed();
@ -23,32 +24,25 @@ 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 [progress, setProgress] = useState<number>(0);
const [objectRotation, setObjectRotation] = useState<{ x: number; y: number; z: number } | undefined>(agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 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;
let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path);
objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
setObjectRotation(agvDetail.point.action?.pickUpPoint?.rotation)
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
objectRotation = agvDetail.point.action?.unLoadPoint?.rotation
setObjectRotation(agvDetail.point.action?.unLoadPoint?.rotation)
setCurrentPath(path);
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
setObjectRotation(agvDetail.point.action?.pickUpPoint?.rotation)
setCurrentPath(path);
}
}, [currentPhase, path]);
}, [currentPhase, path, objectRotation]);
useEffect(() => {
setProgress(0);
completedRef.current = false;
}, [currentPath]);
@ -56,17 +50,11 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
if (isReset || !isPlaying) {
reset();
setCurrentPath([]);
setProgress(0);
completedRef.current = false;
movingForward.current = true;
progressRef.current = 0;
startTime = 0;
coveredDistance = 0;
setReset(false);
setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0);
isPausedRef.current = false;
pauseTimeRef.current = 0;
const object = scene.getObjectByProperty('uuid', agvUuid);
const vehicle = getVehicleById(agvDetail.modelUuid);
if (object && vehicle) {
@ -76,10 +64,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;
@ -98,7 +82,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
totalDistance += segmentDistance;
}
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
while (index < distances.length && progressRef.current > accumulatedDistance + distances[index]) {
accumulatedDistance += distances[index];
index++;
}
@ -124,9 +108,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
if (isAligned) {
progressRef.current += delta * (speed * agvDetail.speed);
coveredDistance = progressRef.current;
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
const t = (progressRef.current - accumulatedDistance) / segmentDistance;
const position = start.clone().lerp(end, t);
object.position.copy(position);
}
@ -134,17 +116,21 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
if (progressRef.current >= totalDistance) {
if (restRotation && objectRotation) {
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z));
const targetEuler = new THREE.Euler(
objectRotation.x,
objectRotation.y - (agvDetail.point.action.steeringAngle),
objectRotation.z
);
const targetQuaternion = new THREE.Quaternion().setFromEuler(targetEuler);
object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) {
object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
if (object.quaternion.angleTo(targetQuaternion) < 0.01) {
object.quaternion.copy(targetQuaternion);
object.rotation.copy(targetEuler);
setRestingRotation(false);
}
return;
}
}
if (progressRef.current >= totalDistance) {
setRestingRotation(true);
progressRef.current = 0;
@ -152,54 +138,15 @@ 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);
if (droppedMat > 0) {
startTime = performance.now();
requestAnimationFrame(() => step(droppedMat));
} else {
return;
}
} else {
requestAnimationFrame(() => step(droppedMaterial));
}
}
return (
<>
{currentPath.length > 0 && (
<group visible={false}>
<group >
<Line points={currentPath} color="blue" lineWidth={3} />
{currentPath.map((point, index) => (
<mesh key={index} position={point}>

88
app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
View File

@ -3,18 +3,28 @@ 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 { useMaterialStore } from '../../../../../store/simulation/useMaterialStore';
import MaterialAnimator from '../animator/materialAnimator';
function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
const { navMesh } = useNavMesh();
const vehicleRef: any = useRef();
const { isPlaying } = usePlayButtonStore();
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad, setMaterialType } = 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][]>([]);
let isIncrememtable = useRef<boolean>(true);
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) => {
@ -34,7 +44,6 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
function vehicleStatus(modelId: string, status: string) {
// console.log(`${modelId} , ${status}`);
}
// Function to reset everything
@ -42,19 +51,16 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
setCurrentPhase('stationed');
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setVehicleLoad(agvDetail.modelUuid, 0);
setPath([]);
}
const increment = () => {
if (isIncrememtable.current) {
incrementVehicleLoad(agvDetail.modelUuid, 10);
setMaterialType(agvDetail.modelUuid, 'Material 1')
isIncrememtable.current = false;
}
startTime = 0;
isPausedRef.current = false;
pauseTimeRef.current = 0;
}
useEffect(() => {
if (isPlaying) {
if (!agvDetail.point.action.unLoadPoint || !agvDetail.point.action.pickUpPoint) return;
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
const toPickupPath = computePath(
@ -68,13 +74,7 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
return;
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'picking') {
setTimeout(() => {
increment();
}, 5000);
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity && agvDetail.materialType) {
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity && agvDetail.currentMaterials.length > 0) {
if (agvDetail.point.action.pickUpPoint && agvDetail.point.action.unLoadPoint) {
const toDrop = computePath(
agvDetail.point.action.pickUpPoint.position,
@ -98,8 +98,6 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
setVehicleState(agvDetail.modelUuid, 'running');
setVehicleActive(agvDetail.modelUuid, true);
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
isIncrememtable.current = true;
}
}
} else {
@ -125,11 +123,54 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
setVehicleState(agvDetail.modelUuid, 'idle');
setVehicleActive(agvDetail.modelUuid, false);
setPath([]);
setMaterialType(agvDetail.modelUuid, null)
clearCurrentMaterials(agvDetail.modelUuid)
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
}
}
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
@ -139,6 +180,7 @@ function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
agvUuid={agvDetail?.modelUuid}
agvDetail={agvDetail}
reset={reset}
startUnloadingProcess={startUnloadingProcess}
/>
<MaterialAnimator agvDetail={agvDetail} />
</>

6
app/src/modules/simulation/vehicle/vehicles.tsx
View File

@ -31,12 +31,12 @@ function Vehicles() {
<VehicleInstances />
{isVehicleSelected && !isPlaying &&
< VehicleUI />
{isVehicleSelected && selectedEventSphere && !isPlaying &&
<VehicleUI />
}
</>
);
}
export default Vehicles;
export default Vehicles;

3
app/src/modules/visualization/zone/zoneAssets.tsx
View File

@ -7,6 +7,7 @@ export default function ZoneAssets() {
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { setSelectedFloorItem } = useSelectedFloorItem();
const { raycaster, controls, scene }: any = useThree();
useEffect(() => {
// console.log('zoneAssetId: ', zoneAssetId);
if (!zoneAssetId) return
@ -70,8 +71,6 @@ export default function ZoneAssets() {
}
}, [zoneAssetId, scene, controls])
return (
<>
</>

2
app/src/modules/visualization/zone/zoneCameraTarget.tsx
View File

@ -13,8 +13,6 @@ export default function ZoneCentreTarget() {
const { zoneTarget, setZoneTarget } = usezoneTarget();
const { Edit, setEdit } = useEditPosition();
useEffect(() => {
if (
selectedZone.zoneViewPortTarget &&

103
app/src/store/simulation/useVehicleStore.ts
View File

@ -1,6 +1,5 @@
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
interface VehiclesStore {
vehicles: VehicleStatus[];
@ -9,7 +8,7 @@ interface VehiclesStore {
removeVehicle: (modelUuid: string) => void;
updateVehicle: (
modelUuid: string,
updates: Partial<Omit<VehicleStatus, 'modelUuid' | 'productId'>>
updates: Partial<Omit<VehicleStatus, "modelUuid" | "productId">>
) => void;
clearvehicles: () => void;
@ -17,8 +16,15 @@ interface VehiclesStore {
updateSteeringAngle: (modelUuid: string, steeringAngle: number) => void;
incrementVehicleLoad: (modelUuid: string, incrementBy: number) => void;
decrementVehicleLoad: (modelUuid: string, decrementBy: number) => void;
setVehicleState: (modelUuid: string, newState: VehicleStatus['state']) => void;
setMaterialType: (modelUuid: string, materialType: string | null) => void;
setVehicleLoad: (modelUuid: string, load: number) => void;
setVehicleState: (
modelUuid: string,
newState: VehicleStatus["state"]
) => void;
addCurrentMaterial: (modelUuid: string, materialType: string, materialId: string) => void;
setCurrentMaterials: (modelUuid: string, materials: { materialType: string; materialId: string; }[]) => void;
removeLastMaterial: (modelUuid: string) => string | undefined;
clearCurrentMaterials: (modelUuid: string) => void;
incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
@ -34,7 +40,9 @@ export const useVehicleStore = create<VehiclesStore>()(
addVehicle: (productId, event) => {
set((state) => {
const exists = state.vehicles.some(v => v.modelUuid === event.modelUuid);
const exists = state.vehicles.some(
(v) => v.modelUuid === event.modelUuid
);
if (!exists) {
state.vehicles.push({
...event,
@ -43,7 +51,7 @@ export const useVehicleStore = create<VehiclesStore>()(
idleTime: 0,
activeTime: 0,
currentLoad: 0,
materialType: null,
currentMaterials: [],
distanceTraveled: 0,
});
}
@ -52,13 +60,15 @@ export const useVehicleStore = create<VehiclesStore>()(
removeVehicle: (modelUuid) => {
set((state) => {
state.vehicles = state.vehicles.filter(v => v.modelUuid !== modelUuid);
state.vehicles = state.vehicles.filter(
(v) => v.modelUuid !== modelUuid
);
});
},
updateVehicle: (modelUuid, updates) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
Object.assign(vehicle, updates);
}
@ -73,7 +83,7 @@ export const useVehicleStore = create<VehiclesStore>()(
setVehicleActive: (modelUuid, isActive) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.isActive = isActive;
}
@ -82,7 +92,7 @@ export const useVehicleStore = create<VehiclesStore>()(
updateSteeringAngle: (modelUuid, steeringAngle) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.point.action.steeringAngle = steeringAngle;
}
@ -91,7 +101,7 @@ export const useVehicleStore = create<VehiclesStore>()(
incrementVehicleLoad: (modelUuid, incrementBy) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.currentLoad += incrementBy;
}
@ -100,34 +110,77 @@ export const useVehicleStore = create<VehiclesStore>()(
decrementVehicleLoad: (modelUuid, decrementBy) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.currentLoad -= decrementBy;
}
});
},
setVehicleLoad: (modelUuid, load) => {
set((state) => {
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.currentLoad = load;
}
});
},
setVehicleState: (modelUuid, newState) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.state = newState;
}
});
},
setMaterialType: (modelUuid, materialType) => {
addCurrentMaterial: (modelUuid, materialType, materialId) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.materialType = materialType;
vehicle.currentMaterials.push({ materialType, materialId });
}
});
},
setCurrentMaterials: (modelUuid, materials) => {
set((state) => {
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.currentMaterials = materials;
}
});
},
removeLastMaterial: (modelUuid) => {
let materialId: string | undefined;
set((state) => {
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
if (vehicle.currentMaterials.length > 0) {
const material = vehicle.currentMaterials.pop();
if (material) {
materialId = material.materialId
}
}
}
});
return materialId;
},
clearCurrentMaterials: (modelUuid) => {
set((state) => {
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.currentMaterials = [];
}
});
},
incrementActiveTime: (modelUuid, incrementBy) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.activeTime += incrementBy;
}
@ -136,7 +189,7 @@ export const useVehicleStore = create<VehiclesStore>()(
incrementIdleTime: (modelUuid, incrementBy) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
const vehicle = state.vehicles.find((v) => v.modelUuid === modelUuid);
if (vehicle) {
vehicle.idleTime += incrementBy;
}
@ -144,19 +197,19 @@ export const useVehicleStore = create<VehiclesStore>()(
},
getVehicleById: (modelUuid) => {
return get().vehicles.find(v => v.modelUuid === modelUuid);
return get().vehicles.find((v) => v.modelUuid === modelUuid);
},
getVehiclesByProduct: (productId) => {
return get().vehicles.filter(v => v.productId === productId);
return get().vehicles.filter((v) => v.productId === productId);
},
getVehiclesByState: (state) => {
return get().vehicles.filter(v => v.state === state);
return get().vehicles.filter((v) => v.state === state);
},
getActiveVehicles: () => {
return get().vehicles.filter(v => v.isActive);
}
return get().vehicles.filter((v) => v.isActive);
},
}))
);

2
app/src/types/simulationTypes.d.ts vendored
View File

@ -181,7 +181,7 @@ interface VehicleStatus extends VehicleEventSchema {
idleTime: number;
activeTime: number;
currentLoad: number;
materialType: string | null;
currentMaterials: { materialType: string; materialId: string; }[];
distanceTraveled: number;
}