Refactor robotic arm and conveyor action handlers for improved functionality and performance; add despawn handler and update state management

This commit is contained in:
2025-05-07 17:45:59 +05:30
parent ff5de28d49
commit 9383296684
17 changed files with 234 additions and 76 deletions

View File

@@ -38,7 +38,7 @@ function RoboticArmMechanics() {
} else {
clearSelectedAction();
}
}, [selectedAction, selectedEventData, selectedProduct]);
}, [selectedEventData, selectedProduct]);
const updateBackend = (
productName: string,

View File

@@ -9,7 +9,7 @@ import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../../functions/handleResizePannel";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useSelectedAction, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
type TriggerProps = {
@@ -25,6 +25,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
const triggersContainerRef = useRef<HTMLDivElement>(null);
const { selectedAction } = useSelectedAction();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
@@ -36,12 +37,12 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
actionUuid = (selectedPointData as ConveyorPointSchema | VehiclePointSchema | MachinePointSchema | StoragePointSchema).action?.actionUuid;
} else if (type === 'RoboticArm') {
actionUuid = (selectedPointData as RoboticArmPointSchema).actions[0]?.actionUuid;
} else if (type === 'RoboticArm' && selectedAction) {
actionUuid = selectedAction.actionId;
}
setCurrentAction(actionUuid);
}, [selectedPointData, selectedProduct, type]);
}, [selectedPointData, selectedProduct, type, selectedAction]);
const updateBackend = (
productName: string,

View File

@@ -7,7 +7,6 @@ interface SkeletonUIProps {
// Define the SkeletonUI component
const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
console.log("type: ", type);
// Function to render skeleton content based on 'type'
const renderSkeleton = () => {

View File

@@ -71,7 +71,7 @@ export function useDelayHandler() {
});
const handleDelay = useCallback((action: ConveyorAction, materialId?: string) => {
if (!action || action.actionType !== 'delay' || !isPlaying || !materialId) return;
if (!action || action.actionType !== 'delay' || !materialId) return;
const delayMs = (action.delay || 0) * 1000;
if (delayMs <= 0) return;

View File

@@ -0,0 +1,24 @@
import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
export function useDespawnHandler() {
const { addMaterial, getMaterialById, setMaterial } = useMaterialStore();
const deSpawnLogStatus = (materialUuid: string, status: string) => {
console.log(`${materialUuid}, ${status}`);
}
const handleDespawn = useCallback((action: ConveyorAction, materialId?: string) => {
if (!action || action.actionType !== 'despawn' || !materialId) return;
const material = getMaterialById(materialId);
if (!material) return;
deSpawnLogStatus(material.materialId, `Despawned`);
}, [addMaterial, getMaterialById, setMaterial]);
return {
handleDespawn,
};
}

View File

@@ -65,6 +65,7 @@ export function useSpawnHandler() {
const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
const pointUuid = getPointUuidByActionUuid(selectedProduct.productId, action.actionUuid);
if (!modelUuid || !pointUuid) return;
const currentTime = performance.now();
const newMaterial: MaterialSchema = {
materialId: THREE.MathUtils.generateUUID(),
@@ -74,13 +75,12 @@ export function useSpawnHandler() {
isVisible: true,
isPaused: false,
isRendered: true,
startTime:currentTime,
current: {
modelUuid: modelUuid,
pointUuid: pointUuid,
actionUuid: action.actionUuid
},
weight: 1,
cost: 1
};
if (action.triggers[0].triggeredAsset?.triggeredModel.modelUuid &&

View File

@@ -1,21 +1,15 @@
import { useCallback } from "react";
import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
export function useSwapHandler() {
const { addMaterial, getMaterialById, setMaterial } = useMaterialStore();
const { getPointUuidByActionUuid } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { isPlaying } = usePlayButtonStore();
const { getMaterialById, setMaterial } = useMaterialStore();
const swapLogStatus = (materialUuid: string, status: string) => {
// console.log(`${materialUuid}, ${status}`);
}
const handleSwap = useCallback((action: ConveyorAction, materialId?: string) => {
if (!action || action.actionType !== 'swap' || !isPlaying || !materialId) return;
if (!action || action.actionType !== 'swap' || !materialId) return;
const { material: newMaterialType } = action;
const material = getMaterialById(materialId);
@@ -24,7 +18,7 @@ export function useSwapHandler() {
setMaterial(material.materialId, newMaterialType);
swapLogStatus(material.materialId, `Swapped to ${newMaterialType}`);
}, [addMaterial, getMaterialById, getPointUuidByActionUuid, isPlaying, setMaterial, selectedProduct.productId]);
}, [getMaterialById, setMaterial]);
return {
handleSwap,

View File

@@ -2,10 +2,12 @@ import { useEffect, useCallback } from "react";
import { useSpawnHandler } from "./actionHandler/useSpawnHandler";
import { useSwapHandler } from "./actionHandler/useSwapHandler";
import { useDelayHandler } from "./actionHandler/useDelayHandler";
import { useDespawnHandler } from "./actionHandler/useDespawnHandler";
export function useConveyorActions() {
const { handleSpawn, clearCurrentSpawn } = useSpawnHandler();
const { handleSwap } = useSwapHandler();
const { handleDespawn } = useDespawnHandler();
const { handleDelay, cleanupDelay } = useDelayHandler();
const handleDefaultAction = useCallback((action: ConveyorAction) => {
@@ -23,9 +25,9 @@ export function useConveyorActions() {
handleDelay(action, materialId);
}, [handleDelay]);
const handleDespawnAction = useCallback((action: ConveyorAction) => {
console.log(`Despawning material`);
}, []);
const handleDespawnAction = useCallback((action: ConveyorAction, materialId?: string) => {
handleDespawn(action, materialId)
}, [handleDespawn]);
const handleConveyorAction = useCallback((action: ConveyorAction, materialId?: string) => {
if (!action) return;
@@ -44,7 +46,7 @@ export function useConveyorActions() {
handleDelayAction(action, materialId);
break;
case 'despawn':
handleDespawnAction(action);
handleDespawnAction(action, materialId);
break;
default:
console.warn(`Unknown conveyor action type: ${action.actionType}`);

View File

@@ -46,12 +46,24 @@ function MaterialAnimator({
useEffect(() => {
if (!isPlaying || !material.next?.pointUuid) {
setIsAnimating(false);
if (material.current.pointUuid) {
const newTarget = getWorldPosition(material.current.pointUuid);
if (newTarget && matRef.current && !material.isPaused) {
animationState.current.startPosition.copy(matRef.current.position);
animationState.current.totalDistance = animationState.current.startPosition.distanceTo(newTarget);
animationState.current.startTime = performance.now() - animationState.current.pausedTime;
animationState.current.pausedTime = 0;
animationState.current.isPaused = false;
setTargetPosition(newTarget);
setIsAnimating(true);
}
} else {
setIsAnimating(false);
}
return;
}
const newTarget = getWorldPosition(material.next.pointUuid);
if (newTarget && matRef.current) {
if (newTarget && matRef.current && !material.isPaused) {
animationState.current.startPosition.copy(matRef.current.position);
animationState.current.totalDistance = animationState.current.startPosition.distanceTo(newTarget);
animationState.current.startTime = performance.now() - animationState.current.pausedTime;
@@ -60,7 +72,7 @@ function MaterialAnimator({
setTargetPosition(newTarget);
setIsAnimating(true);
}
}, [material.next?.pointUuid, isPlaying]);
}, [material, isPlaying]);
useEffect(() => {
if (shouldPause) {

View File

@@ -84,7 +84,6 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
}
useEffect(() => {
// console.log('material: ', material);
if (material.current && material.next) {
// console.log('current: ', material.current.pointUuid);
// console.log('next: ', material.next.pointUuid);

View File

@@ -14,7 +14,7 @@ export default function MaterialAnimator({ ikSolver, armBot, currentPhase }: Mat
const [isRendered, setIsRendered] = useState<boolean>(false);
useEffect(() => {
if (currentPhase === "start-to-end") {
if (currentPhase === "start-to-end" || currentPhase === "dropping") {
setIsRendered(true);
} else {
setIsRendered(false);
@@ -40,7 +40,7 @@ export default function MaterialAnimator({ ikSolver, armBot, currentPhase }: Mat
const direction = new THREE.Vector3();
direction.subVectors(boneWorldPos, boneTargetWorldPos).normalize();
const downwardDirection = direction.clone().negate();
const adjustedPosition = boneWorldPos.clone().addScaledVector(downwardDirection, -0.01);
//set position

View File

@@ -280,7 +280,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
>
{/* Green ring */}
<mesh rotation={[-Math.PI / 2, 0, 0]}>
<mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
<ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.02, 64]} />
<meshBasicMaterial color="green" side={THREE.DoubleSide} />
</mesh>

View File

@@ -1,13 +1,16 @@
import React, { useEffect, useRef, useState } from 'react'
import * as THREE from "three";
import { useThree } from "@react-three/fiber";
import IKInstance from '../ikInstance/ikInstance';
import RoboticArmAnimator from '../animator/roboticArmAnimator';
import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_1.glb";
import { useThree } from "@react-three/fiber";
import * as THREE from "three";
import MaterialAnimator from '../animator/materialAnimator';
import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_1.glb";
import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useMaterialStore } from '../../../../../store/simulation/useMaterialStore';
import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
import { useProductStore } from '../../../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
@@ -21,8 +24,12 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
const pauseTimeRef = useRef<number | null>(null);
const isPausedRef = useRef<boolean>(false);
let startTime: number;
//zustand
const { addCurrentAction, setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
const { setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
const { setIsVisible } = useMaterialStore();
const { selectedProduct } = useSelectedProduct();
const { getActionByUuid } = useProductStore();
const { triggerPointActions } = useTriggerHandler();
const { isPlaying } = usePlayButtonStore();
const { isReset } = useResetButtonStore();
const { isPaused } = usePauseButtonStore();
@@ -65,6 +72,10 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
if (curve) {
logStatus(armBot.modelUuid, "picking the object");
setPath(curve.points.map(point => [point.x, point.y, point.z]))
if (armBot.currentAction) {
setIsVisible(armBot.currentAction.materialId || '', false);
}
}
}
logStatus(armBot.modelUuid, "Moving armBot from start point to end position.")
@@ -80,6 +91,18 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
if (curve) {
logStatus(armBot.modelUuid, "dropping the object");
setPath(curve.points.map(point => [point.x, point.y, point.z]));
if (armBot.currentAction) {
setIsVisible(armBot.currentAction.materialId || '', true);
}
if (armBot.currentAction) {
const action = getActionByUuid(selectedProduct.productId, armBot.currentAction.actionUuid);
if (action && armBot.currentAction.materialId) {
triggerPointActions(action, armBot.currentAction.materialId)
removeCurrentAction(armBot.modelUuid)
}
}
}
}
logStatus(armBot.modelUuid, "Moving armBot from end point to rest position.")
@@ -137,10 +160,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
//Waiting for trigger.
else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && !armBot.currentAction) {
logStatus(armBot.modelUuid, "Waiting to trigger CurrentAction")
const timeoutId = setTimeout(() => {
addCurrentAction(armBot.modelUuid, armBot.point.actions[0].actionUuid, 'Material 2');
}, 3000);
return () => clearTimeout(timeoutId);
}
//Moving to pickup point
else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && armBot.currentAction) {
@@ -219,7 +238,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
setArmBotState(armBot.modelUuid, "idle")
setCurrentPhase("rest");
setPath([])
removeCurrentAction(armBot.modelUuid)
}
}
const logStatus = (id: string, status: string) => {
@@ -228,12 +246,12 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
return (
<>
{!isReset && isPlaying && (
<>
<>
<IKInstance modelUrl={armModel} setIkSolver={setIkSolver} ikSolver={ikSolver} armBot={armBot} groupRef={groupRef} />
<RoboticArmAnimator HandleCallback={HandleCallback} restPosition={restPosition} ikSolver={ikSolver} targetBone={targetBone} armBot={armBot}
logStatus={logStatus} path={path} currentPhase={currentPhase} />
</>
)}
</>
)}
<MaterialAnimator ikSolver={ikSolver} armBot={armBot} currentPhase={currentPhase} />
</>
)

View File

@@ -3,12 +3,14 @@ import { useActionHandler } from '../../actions/useActionHandler';
import { useProductStore } from '../../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useMaterialStore } from '../../../../store/simulation/useMaterialStore';
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
export function useTriggerHandler() {
const { getEventByTriggerUuid, getEventByModelUuid } = useProductStore();
const { handleAction } = useActionHandler();
const { setCurrentLocation, setNextLocation, getMaterialById } = useMaterialStore();
const { selectedProduct } = useSelectedProduct();
const { getEventByTriggerUuid, getEventByModelUuid, getActionByUuid, getModelUuidByActionUuid } = useProductStore();
const { addCurrentAction, getArmBotById } = useArmBotStore();
const { setCurrentLocation, setNextLocation, getMaterialById, setIsPaused, setEndTime } = useMaterialStore();
const handleTrigger = (trigger: TriggerSchema, action: Action, materialId: string) => {
@@ -46,7 +48,38 @@ export function useTriggerHandler() {
} else if (toEvent?.type === 'roboticArm') {
// Transfer to Robotic Arm
if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
if (material.next) {
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);
setIsPaused(material.materialId, true);
addCurrentAction(
trigger.triggeredAsset?.triggeredModel.modelUuid,
trigger.triggeredAsset?.triggeredAction?.actionUuid,
material.materialType,
material.materialId
);
} else {
// Event Manager Needed
}
}
}
handleAction(action, materialId);
}
}
} else if (toEvent?.type === 'storageUnit') {
// Transfer to Storage Unit
@@ -88,6 +121,31 @@ export function useTriggerHandler() {
} else if (fromEvent?.type === 'roboticArm') {
if (toEvent?.type === 'transfer') {
// Robotic Arm to Transfer
if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
const material = getMaterialById(materialId);
if (material) {
setIsPaused(material.materialId, false);
setCurrentLocation(material.materialId, {
modelUuid: trigger.triggeredAsset.triggeredModel.modelUuid,
pointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
});
const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
if (action && action.triggers.length > 0 &&
action.triggers[0].triggeredAsset?.triggeredModel.modelUuid &&
action.triggers[0].triggeredAsset?.triggeredPoint?.pointUuid) {
setNextLocation(material.materialId, {
modelUuid: action.triggers[0].triggeredAsset?.triggeredModel.modelUuid,
pointUuid: action.triggers[0].triggeredAsset?.triggeredPoint?.pointUuid,
})
handleAction(action, material.materialId);
}
}
}
} else if (toEvent?.type === 'vehicle') {
// Robotic Arm to Vehicle
@@ -122,26 +180,75 @@ export function useTriggerHandler() {
}
}
const handleFinalAction = (action: Action, materialId: string) => {
if (!action) return;
const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
if (!modelUuid) return;
const finalModel = getEventByModelUuid(selectedProduct.productId, modelUuid);
if (!finalModel) return;
const material = getMaterialById(materialId);
if (finalModel.type === 'transfer') {
// Storage Unit to Transfer
if (material) {
const currentTime = performance.now();
setCurrentLocation(material.materialId, {
modelUuid: material.next?.modelUuid || '',
pointUuid: material.next?.pointUuid || '',
actionUuid: action.actionUuid,
});
setNextLocation(material.materialId, null);
setEndTime(material.materialId, currentTime);
handleAction(action, material.materialId);
}
} else if (finalModel.type === 'vehicle') {
// Storage Unit to Vehicle
} else if (finalModel.type === 'machine') {
// Storage Unit to Machine
} else if (finalModel.type === 'roboticArm') {
// Storage Unit to Robotic Arm
} else if (finalModel.type === 'storageUnit') {
// Storage Unit to Storage Unit
}
}
const triggerPointActions = useCallback((action: Action, materialId: string) => {
if (!action) return;
action.triggers.forEach(trigger => {
switch (trigger.triggerType) {
case 'onStart':
break;
case 'onComplete':
handleTrigger(trigger, action, materialId);
break;
case 'onStop':
break;
case 'onError':
break;
case 'delay':
break;
default:
console.warn(`Unknown trigger type: ${trigger.triggerType}`);
}
});
if (action.triggers.length > 0) {
action.triggers.forEach(trigger => {
switch (trigger.triggerType) {
case 'onStart':
break;
case 'onComplete':
handleTrigger(trigger, action, materialId);
break;
case 'onStop':
break;
case 'onError':
break;
case 'delay':
break;
default:
console.warn(`Unknown trigger type: ${trigger.triggerType}`);
}
});
} else {
handleFinalAction(action, materialId);
}
}, []);
return {

View File

@@ -12,7 +12,7 @@ interface ArmBotStore {
) => void;
clearArmBots: () => void;
addCurrentAction: (modelUuid: string, actionUuid: string, materialType: string) => void;
addCurrentAction: (modelUuid: string, actionUuid: string, materialType: string, materialId: string) => void;
removeCurrentAction: (modelUuid: string) => void;
addAction: (modelUuid: string, action: RoboticArmPointSchema['actions'][number]) => void;
@@ -75,7 +75,7 @@ export const useArmBotStore = create<ArmBotStore>()(
});
},
addCurrentAction: (modelUuid, actionUuid, materialType) => {
addCurrentAction: (modelUuid, actionUuid, materialType, materialId) => {
set((state) => {
const armBot = state.armBots.find(a => a.modelUuid === modelUuid);
if (armBot) {
@@ -84,7 +84,8 @@ export const useArmBotStore = create<ArmBotStore>()(
armBot.currentAction = {
actionUuid: action.actionUuid,
actionName: action.actionName,
materialType: materialType
materialType: materialType,
materialId:materialId
};
}
}

View File

@@ -20,20 +20,20 @@ type MaterialsStore = {
setNextLocation: (
materialId: string,
location?: {
location: {
modelUuid: string;
pointUuid: string;
} | null
) => MaterialSchema | undefined;
setMaterial: (materialId: string, materialType: string) => MaterialSchema | undefined;
setStartTime: (materialId: string, startTime: string) => MaterialSchema | undefined;
setEndTime: (materialId: string, endTime: string) => MaterialSchema | undefined;
setStartTime: (materialId: string, startTime: number) => MaterialSchema | undefined;
setEndTime: (materialId: string, endTime: number) => MaterialSchema | undefined;
setCost: (materialId: string, cost: number) => MaterialSchema | undefined;
setWeight: (materialId: string, weight: number) => MaterialSchema | undefined;
setIsActive: (materialId: string, isActive: boolean) => MaterialSchema | undefined;
setIsVisible: (materialId: string, isVisible: boolean) => MaterialSchema | undefined;
setIsPaused: (materialId: string, isPlaying: boolean) => MaterialSchema | undefined;
setIsPaused: (materialId: string, isPaused: boolean) => MaterialSchema | undefined;
setIsRendered: (materialId: string, isRendered: boolean) => MaterialSchema | undefined;
getMaterialById: (materialId: string) => MaterialSchema | undefined;
@@ -102,7 +102,7 @@ export const useMaterialStore = create<MaterialsStore>()(
set((state) => {
const material = state.materials.find(m => m.materialId === materialId);
if (material) {
material.next = location || undefined;
material.next = location;
updatedMaterial = JSON.parse(JSON.stringify(material));
}
});

View File

@@ -171,6 +171,7 @@ interface ArmBotStatus extends RoboticArmEventSchema {
actionUuid: string;
actionName: string;
materialType: string | null;
materialId: string | null;
};
}
@@ -201,8 +202,8 @@ interface MaterialSchema {
isVisible: boolean;
isPaused: boolean;
isRendered: boolean;
startTime?: string;
endTime?: string;
startTime?: number;
endTime?: number;
cost?: number;
weight?: number;
@@ -215,7 +216,7 @@ interface MaterialSchema {
next?: {
modelUuid: string;
pointUuid: string;
};
} | null;
}
type MaterialsSchema = MaterialSchema[];