Enhance event managers with play, pause, and reset functionality; remove obsolete vehicle event manager

app/src/modules/simulation/conveyor/eventManager/useConveyorEventManager.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { useConveyorStore } from '../../../../store/simulation/useConveyorStore';
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 
 type ConveyorCallback = {
     conveyorId: string;
@@ -11,6 +12,15 @@ export function useConveyorEventManager() {
     const { getConveyorById } = useConveyorStore();
     const callbacksRef = useRef<ConveyorCallback[]>([]);
     const isMonitoringRef = useRef(false);
+    const { isPlaying } = usePlayButtonStore();
+    const { isPaused } = usePauseButtonStore();
+    const { isReset } = useResetButtonStore();
+
+    useEffect(() => {
+        if (isReset) {
+            callbacksRef.current = [];
+        }
+    }, [isReset])
 
     // Add a new conveyor to monitor
     const addConveyorToMonitor = (conveyorId: string, callback: () => void) => {
@@ -39,7 +49,7 @@ export function useConveyorEventManager() {
 
     // Check conveyor states every frame
     useFrame(() => {
-        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0 || !isPlaying || isPaused) return;
 
         callbacksRef.current.forEach(({ conveyorId, callback }) => {
             const conveyor = getConveyorById(conveyorId);

app/src/modules/simulation/machine/eventManager/useMachineEventManager.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { useMachineStore } from '../../../../store/simulation/useMachineStore';
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 
 type MachineCallback = {
     machineId: string;
@@ -11,6 +12,15 @@ export function useMachineEventManager() {
     const { getMachineById } = useMachineStore();
     const callbacksRef = useRef<MachineCallback[]>([]);
     const isMonitoringRef = useRef(false);
+    const { isPlaying } = usePlayButtonStore();
+    const { isPaused } = usePauseButtonStore();
+    const { isReset } = useResetButtonStore();
+
+    useEffect(() => {
+        if (isReset) {
+            callbacksRef.current = [];
+        }
+    }, [isReset])
 
     // Add a new machine to monitor
     const addMachineToMonitor = (machineId: string, callback: () => void) => {
@@ -39,7 +49,7 @@ export function useMachineEventManager() {
 
     // Check machine states every frame
     useFrame(() => {
-        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0 || !isPlaying || isPaused) return;
 
         callbacksRef.current.forEach(({ machineId, callback }) => {
             const machine = getMachineById(machineId);

app/src/modules/simulation/roboticArm/eventManager/useArmBotEventManager.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 
 type ArmBotCallback = {
     armBotId: string;
@@ -11,6 +12,15 @@ export function useArmBotEventManager() {
     const { getArmBotById } = useArmBotStore();
     const callbacksRef = useRef<ArmBotCallback[]>([]);
     const isMonitoringRef = useRef(false);
+    const { isPlaying } = usePlayButtonStore();
+    const { isPaused } = usePauseButtonStore();
+    const { isReset } = useResetButtonStore();
+
+    useEffect(() => {
+        if (isReset) {
+            callbacksRef.current = [];
+        }
+    }, [isReset])
 
     // Add a new armbot to monitor
     const addArmBotToMonitor = (armBotId: string, callback: () => void) => {
@@ -39,7 +49,7 @@ export function useArmBotEventManager() {
 
     // Check armbot states every frame
     useFrame(() => {
-        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0 || !isPlaying || isPaused) return;
 
         callbacksRef.current.forEach(({ armBotId, callback }) => {
             const armBot = getArmBotById(armBotId);

app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useFrame, useThree } from '@react-three/fiber';
 import * as THREE from 'three';
 import { Line, Text } from '@react-three/drei';
 import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
@@ -10,7 +10,7 @@ type PointWithDegree = {
 };
 
 function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone, armBot, path }: any) {
-
+    const { scene } = useThree();
     const progressRef = useRef(0);
     const curveRef = useRef<THREE.Vector3[] | null>(null);
     const totalDistanceRef = useRef(0);
@@ -203,6 +203,10 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
 
     // Frame update for animation
     useFrame((state, delta) => {
+        const targetMesh = scene?.getObjectByProperty("uuid", armBot.modelUuid);
+        if (targetMesh) {
+            targetMesh.visible = (!isPlaying)
+        }
         if (!ikSolver) return;
 
         const bone = ikSolver.mesh.skeleton.bones.find((b: any) => b.name === targetBone);

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -1,6 +1,5 @@
 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 MaterialAnimator from '../animator/materialAnimator';
@@ -19,7 +18,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
     const [currentPhase, setCurrentPhase] = useState<(string)>("init");
     const [path, setPath] = useState<[number, number, number][]>([]);
     const [ikSolver, setIkSolver] = useState<any>(null);
-    const { scene } = useThree();
     const restPosition = new THREE.Vector3(0, 1.75, -1.6);
     const targetBone = "Target";
     const groupRef = useRef<any>(null);
@@ -273,10 +271,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
 
 
     useEffect(() => {
-        const targetMesh = scene?.getObjectByProperty("uuid", armBot.modelUuid);
-        if (targetMesh) {
-            targetMesh.visible = (!isPlaying)
-        }
         const targetBones = ikSolver?.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
         if (!isReset && isPlaying) {
             //Moving armBot from initial point to rest position.

app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx

@@ -80,7 +80,7 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
                 setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
             }}>
                 <primitive
-                    uuid={armBot.modelUuid}
+                    uuid={`${armBot.modelUuid}_IK`}
                     object={cloned}
                     scale={[1, 1, 1]}
                     name={armBot.modelName}

app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts

@@ -10,7 +10,7 @@ import { useStorageUnitStore } from '../../../../store/simulation/useStorageUnit
 import { useArmBotEventManager } from '../../roboticArm/eventManager/useArmBotEventManager';
 import { useConveyorStore } from '../../../../store/simulation/useConveyorStore';
 import { useConveyorEventManager } from '../../conveyor/eventManager/useConveyorEventManager';
-import { useVehicleEventManager } from '../../vehicle/instances/eventManager/useVehicleEventManager';
+import { useVehicleEventManager } from '../../vehicle/eventManager/useVehicleEventManager';
 import { useMachineEventManager } from '../../machine/eventManager/useMachineEventManager';
 
 export function useTriggerHandler() {

app/src/modules/simulation/vehicle/eventManager/useVehicleEventManager.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
+import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 
 type VehicleCallback = {
     vehicleId: string;
@@ -11,6 +12,15 @@ export function useVehicleEventManager() {
     const { getVehicleById } = useVehicleStore();
     const callbacksRef = useRef<VehicleCallback[]>([]);
     const isMonitoringRef = useRef(false);
+    const { isPlaying } = usePlayButtonStore();
+    const { isPaused } = usePauseButtonStore();
+    const { isReset } = useResetButtonStore();
+
+    useEffect(() => {
+        if (isReset) {
+            callbacksRef.current = [];
+        }
+    }, [isReset])
 
     // Add a new vehicle to monitor
     const addVehicleToMonitor = (vehicleId: string, callback: () => void) => {
@@ -39,7 +49,7 @@ export function useVehicleEventManager() {
 
     // Check vehicle states every frame
     useFrame(() => {
-        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0 || !isPlaying || isPaused) return;
 
         callbacksRef.current.forEach(({ vehicleId, callback }) => {
             const vehicle = getVehicleById(vehicleId);