feat: Enhance conveyor and material handling with pause functionality and state management

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx

@@ -28,22 +28,11 @@ function RoboticArmMechanics() {
                 selectedEventData.data.modelUuid,
                 selectedEventData.selectedPoint
             ) as RoboticArmPointSchema | undefined;
-            const action = getActionByUuid(selectedProduct.productId, selectedAction.actionId) as RoboticArmPointSchema["actions"][0] | undefined;
+            if (point?.actions) {
-            if (action) {
+                setSelectedPointData(point);
-                if (point?.actions) {
+                if (point.actions.length > 0) {
-                    setSelectedPointData(point);
+                    setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
-                    if (point.actions.length > 0 && action) {
+                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
-                        setActiveOption(action.actionType as "default" | "pickAndPlace");
-                        setSelectedAction(selectedAction.actionId, selectedAction.actionName);
-                    }
-                }
-            } else {
-                if (point?.actions) {
-                    setSelectedPointData(point);
-                    if (point.actions.length > 0) {
-                        setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
-                        setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
-                    }
                 }
             }
         } else {

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -38,6 +38,14 @@ const SimulationPlayer: React.FC = () => {
   const { isReset, setReset } = useResetButtonStore();
   const { subModule } = useSubModuleStore();
 
+  useEffect(() => {
+    if (isReset) {
+      setTimeout(()=>{
+        setReset(false);
+      },0)
+    }
+  }, [isReset])
+
   // Button functions
   const handleReset = () => {
     setReset(true);

app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import { usePlayButtonStore, usePauseButtonStore } from "../../../../../store/usePlayButtonStore";
+import { usePlayButtonStore, usePauseButtonStore, useResetButtonStore } from "../../../../../store/usePlayButtonStore";
+import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
 
 interface DelayInstance {
     delayEndTime: number;
@@ -13,6 +14,8 @@ interface DelayInstance {
 export function useDelayHandler() {
     const { isPlaying } = usePlayButtonStore();
     const { isPaused } = usePauseButtonStore();
+    const { isReset } = useResetButtonStore();
+    const { setIsPaused } = useMaterialStore();
     const activeDelays = useRef<Map<string, DelayInstance>>(new Map());
 
     const cleanupDelay = useCallback(() => {
@@ -20,12 +23,15 @@ export function useDelayHandler() {
     }, []);
 
     useEffect(() => {
-        return () => {
+        if (isReset) {
             cleanupDelay();
-        };
+        }
-    }, [cleanupDelay]);
+    }, [isReset, cleanupDelay]);
+
+    const delayLogStatus = (materialUuid: string, status: string) => {
+        // console.log(`${materialUuid}, ${status}`);
+    }
 
-    // Handle pause/resume for all delays
     useEffect(() => {
         const currentTime = performance.now();
 
@@ -48,8 +54,9 @@ export function useDelayHandler() {
         const completedDelays: string[] = [];
 
         activeDelays.current.forEach((delay, key) => {
-            if (!delay.isPaused && currentTime >= delay.delayEndTime) {
+            if (!delay.isPaused && currentTime >= delay.delayEndTime && delay.materialId) {
-                console.log(`Delay completed for material ${delay.materialId || 'unknown'}`);
+                delayLogStatus(delay.materialId, `Delay completed}`);
+                setIsPaused(delay.materialId, false);
                 completedDelays.push(key);
             }
         });
@@ -60,7 +67,7 @@ export function useDelayHandler() {
     });
 
     const handleDelay = useCallback((action: ConveyorAction, materialId?: string) => {
-        if (!action || action.actionType !== 'delay' || !isPlaying) return;
+        if (!action || action.actionType !== 'delay' || !isPlaying || !materialId) return;
 
         const delayMs = (action.delay || 0) * 1000;
         if (delayMs <= 0) return;
@@ -80,10 +87,17 @@ export function useDelayHandler() {
             remainingTime: 0
         });
 
-        console.log(`Started ${delayMs}ms delay for material ${materialId || 'unknown'}`);
+        delayLogStatus(materialId, `Started ${delayMs * 1000}s delay`);
+        setIsPaused(materialId, true);
 
     }, [isPlaying]);
 
+    useEffect(() => {
+        return () => {
+            cleanupDelay();
+        };
+    }, [cleanupDelay]);
+
     return {
         handleDelay,
         cleanupDelay

app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts

@@ -5,6 +5,7 @@ import { useMaterialStore } from "../../../../../store/simulation/useMaterialSto
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
 import { usePlayButtonStore, useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from "../../../../../store/usePlayButtonStore";
+import { useConveyorStore } from "../../../../../store/simulation/useConveyorStore";
 
 interface SpawnInstance {
     lastSpawnTime: number | null;
@@ -23,6 +24,7 @@ interface SpawnInstance {
 
 export function useSpawnHandler() {
     const { addMaterial } = useMaterialStore();
+    const { getConveyorById } = useConveyorStore();
     const { getModelUuidByActionUuid, getPointUuidByActionUuid } = useProductStore();
     const { isPlaying } = usePlayButtonStore();
     const { isPaused } = usePauseButtonStore();
@@ -57,6 +59,7 @@ export function useSpawnHandler() {
             materialType: materialType,
             isActive: false,
             isVisible: true,
+            isPaused: false,
             isRendered: true,
             current: {
                 modelUuid: modelUuid,
@@ -81,6 +84,15 @@ export function useSpawnHandler() {
         return newMaterial;
     }, [addMaterial, getModelUuidByActionUuid, getPointUuidByActionUuid, selectedProduct.productId]);
 
+
+    const getConveyorPausedState = useCallback((action: ConveyorAction) => {
+        const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
+        if (!modelUuid) return false;
+
+        const conveyor = getConveyorById(modelUuid);
+        return conveyor?.isPaused ?? false;
+    }, [getConveyorById, getModelUuidByActionUuid, selectedProduct.productId]);
+
     useEffect(() => {
         const currentTime = performance.now();
 

app/src/modules/simulation/actions/conveyor/useConveyorActions.ts

@@ -9,7 +9,6 @@ export function useConveyorActions() {
     const { handleDelay, cleanupDelay } = useDelayHandler();
 
     const handleDefaultAction = useCallback((action: ConveyorAction) => {
-        console.log(`Default conveyor action ${action.actionUuid}`);
     }, []);
 
     const handleSpawnAction = useCallback((action: ConveyorAction) => {

app/src/modules/simulation/conveyor/instances/conveyorInstance/conveyorInstance.tsx

@@ -1,6 +1,33 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useMaterialStore } from '../../../../../store/simulation/useMaterialStore';
+import { useConveyorStore } from '../../../../../store/simulation/useConveyorStore';
+import { useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+
+function ConveyorInstance({ conveyor }: { conveyor: ConveyorStatus }) {
+    const { materials, getMaterialsByCurrentModelUuid } = useMaterialStore();
+    const { isReset } = useResetButtonStore();
+
+    const { setConveyorPaused } = useConveyorStore();
+
+    useEffect(() => {
+        const conveyorMaterials = getMaterialsByCurrentModelUuid(conveyor.modelUuid);
+        if (conveyorMaterials && conveyorMaterials?.length > 0) {
+
+            const hasPausedMaterials = conveyorMaterials.some(material => material.isPaused);
+
+            if (hasPausedMaterials) {
+                setConveyorPaused(conveyor.modelUuid, true);
+            } else {
+                setConveyorPaused(conveyor.modelUuid, false);
+            }
+        }
+
+    }, [materials, conveyor.modelUuid, getMaterialsByCurrentModelUuid, setConveyorPaused, isReset]);
+
+    useEffect(() => {
+        // console.log('conveyor: ', conveyor);
+    }, [conveyor])
 
-function ConveyorInstance() {
     return (
         <>
         </>

app/src/modules/simulation/conveyor/instances/conveyorInstances.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import ConveyorInstance from './conveyorInstance/conveyorInstance'
+import { useConveyorStore } from '../../../../store/simulation/useConveyorStore'
 
 function ConveyorInstances() {
+
+    const { conveyors } = useConveyorStore();
+
     return (
         <>
 
-            <ConveyorInstance />
+            {conveyors.map((conveyor: ConveyorStatus) =>
+                <ConveyorInstance conveyor={conveyor} key={conveyor.modelUuid} />
+            )}
 
         </>
     )

app/src/modules/simulation/materials/instances/animator/materialAnimator.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import * as THREE from 'three';
 import { useFrame, useThree } from '@react-three/fiber';
 import { usePauseButtonStore, usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useConveyorStore } from '../../../../../store/simulation/useConveyorStore';
 
 interface MaterialAnimatorProps {
     matRef: React.RefObject<THREE.Mesh>;
@@ -19,6 +20,7 @@ function MaterialAnimator({
     const { scene } = useThree();
     const [targetPosition, setTargetPosition] = useState<THREE.Vector3 | null>(null);
     const [isAnimating, setIsAnimating] = useState(false);
+    const { getConveyorById } = useConveyorStore();
     const animationState = useRef({
         startTime: 0,
         startPosition: new THREE.Vector3(),
@@ -29,7 +31,10 @@ function MaterialAnimator({
     });
 
     const { isPlaying } = usePlayButtonStore();
-    const { isPaused } = usePauseButtonStore();
+    const { isPaused: isGlobalPaused } = usePauseButtonStore();
+
+    const conveyor = getConveyorById(material.current.modelUuid);
+    const shouldPause = isGlobalPaused || material.isPaused || conveyor?.isPaused;
 
     const getWorldPosition = (uuid: string): THREE.Vector3 | null => {
         const obj = scene.getObjectByProperty('uuid', uuid);
@@ -58,18 +63,20 @@ function MaterialAnimator({
     }, [material.next?.pointUuid, isPlaying]);
 
     useEffect(() => {
-        if (isPaused) {
+        if (shouldPause) {
+            // Pause the animation
             animationState.current.isPaused = true;
             setIsAnimating(false);
             animationState.current.pausedTime = performance.now() - animationState.current.startTime;
         } else {
+            // Resume the animation
             animationState.current.isPaused = false;
             if (isPlaying && targetPosition && !isAnimating) {
                 animationState.current.startTime = performance.now() - animationState.current.pausedTime;
                 setIsAnimating(true);
             }
         }
-    }, [isPaused]);
+    }, [shouldPause, isPlaying]);
 
     useFrame(() => {
         if (!matRef.current || !targetPosition || !isAnimating || animationState.current.isPaused || !isPlaying) {
@@ -97,7 +104,7 @@ function MaterialAnimator({
                 pausedTime: 0,
                 isPaused: false,
                 lastFrameTime: 0
-            }
+            };
         }
     });
 

app/src/modules/simulation/materials/instances/instance/materialInstance.tsx

@@ -39,12 +39,12 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
 
         const point = getPointByUuid(selectedProduct.productId, modelUuid, material.current.pointUuid);
         if (!point) {
-            return { position: new THREE.Vector3(0, 0, 0), rotation: new THREE.Vector3(0, 0, 0), currentSpeed: 1 };
+            return { position: new THREE.Vector3(0, 0, 0), rotation: new THREE.Vector3(0, 0, 0), currentSpeed: currentSpeed || 1 };
         }
 
         const position = getWorldPositionFromScene(point.uuid);
         if (position) {
-            return { position: position, rotation: new THREE.Vector3(0, 0, 0), currentSpeed: 1 };
+            return { position: position, rotation: new THREE.Vector3(0, 0, 0), currentSpeed: currentSpeed || 1 };
         }
 
         return {
@@ -54,6 +54,7 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
         };
     }, [material, getPointByUuid]);
 
+
     function getCurrentSpeed(productId: string, modelUuid: string) {
         const event = getEventByModelUuid(productId, modelUuid)
         if (event) {

app/src/modules/simulation/products/products.tsx

@@ -7,12 +7,14 @@ import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProd
 import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
 import { useVehicleStore } from '../../../store/simulation/useVehicleStore';
 import { useArmBotStore } from '../../../store/simulation/useArmBotStore';
+import { useConveyorStore } from '../../../store/simulation/useConveyorStore';
 
 function Products() {
     const { products, getProductById, addProduct, setProducts } = useProductStore();
     const { selectedProduct, setSelectedProduct } = useSelectedProduct();
     const { addVehicle, clearvehicles } = useVehicleStore();
     const { addArmBot, clearArmBots } = useArmBotStore();
+    const { addConveyor, clearConveyors } = useConveyorStore();
 
     useEffect(() => {
         const email = localStorage.getItem('email')
@@ -59,6 +61,20 @@ function Products() {
         }
     }, [selectedProduct, products]);
 
+    useEffect(() => {
+        if (selectedProduct.productId) {
+            const product = getProductById(selectedProduct.productId);
+            if (product) {
+                clearConveyors();
+                product.eventDatas.forEach(events => {
+                    if (events.type === 'transfer') {
+                        addConveyor(selectedProduct.productId, events);
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products]);
+
     return (
         <>
 

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

@@ -1,24 +1,37 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import RoboticArmInstances from "./instances/roboticArmInstances";
 import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
-import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import ArmBotUI from "../ui/arm/armBotUI";
+import RoboticArmInstances from "./instances/roboticArmInstances";
 
 function RoboticArm() {
-    const { armBots } = useArmBotStore();
+    const { armBots, getArmBotById } = useArmBotStore();
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { selectedEventData } = useSelectedEventData();
+    const { isPlaying } = usePlayButtonStore();
+    const [isArmBotSelected, setIsArmBotSelected] = useState(false);
 
     useEffect(() => {
         // console.log('armBots: ', armBots);
     }, [armBots])
 
+    useEffect(() => {
+        if (selectedEventSphere) {
+            const selectedArmBot = getArmBotById(selectedEventSphere.userData.modelUuid);
+            if (selectedArmBot) {
+                setIsArmBotSelected(true);
+            } else {
+                setIsArmBotSelected(false);
+            }
+        }
+    }, [selectedEventSphere])
+
     return (
         <>
 
             <RoboticArmInstances />
 
-            {selectedEventSphere && selectedEventData?.data.type === "roboticArm" &&
+            {isArmBotSelected && !isPlaying &&
                 < ArmBotUI />
             }
 

app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx

@@ -10,7 +10,7 @@ interface VehicleAnimatorProps {
     handleCallBack: () => void;
     reset: () => void;
     currentPhase: string;
-    agvUuid: number;
+    agvUuid: string;
     agvDetail: VehicleStatus;
 }
 

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -7,7 +7,7 @@ import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
 import MaterialAnimator from '../animator/materialAnimator';
 
-function VehicleInstance({ agvDetail }: any) {
+function VehicleInstance({ agvDetail }: { agvDetail: VehicleStatus }) {
     const { navMesh } = useNavMesh();
     const vehicleRef: any = useRef();
     const { isPlaying } = usePlayButtonStore();
@@ -74,28 +74,32 @@ function VehicleInstance({ agvDetail }: any) {
 
 
                 if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity && agvDetail.materialType) {
-                    const toDrop = computePath(
+                    if (agvDetail.point.action.pickUpPoint && agvDetail.point.action.unLoadPoint) {
-                        agvDetail.point.action.pickUpPoint.position,
+                        const toDrop = computePath(
-                        agvDetail.point.action.unLoadPoint.position
+                            agvDetail.point.action.pickUpPoint.position,
-                    );
+                            agvDetail.point.action.unLoadPoint.position
-                    setPath(toDrop);
+                        );
-                    setCurrentPhase('pickup-drop');
+                        setPath(toDrop);
-                    setVehicleState(agvDetail.modelUuid, 'running');
+                        setCurrentPhase('pickup-drop');
-                    setVehicleActive(agvDetail.modelUuid, true);
+                        setVehicleState(agvDetail.modelUuid, 'running');
-                    vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
+                        setVehicleActive(agvDetail.modelUuid, true);
+                        vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
+                    }
                 }
             } else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'dropping' && agvDetail.currentLoad === 0) {
-                const dropToPickup = computePath(
+                if (agvDetail.point.action.pickUpPoint && agvDetail.point.action.unLoadPoint) {
-                    agvDetail.point.action.unLoadPoint.position,
+                    const dropToPickup = computePath(
-                    agvDetail.point.action.pickUpPoint.position
+                        agvDetail.point.action.unLoadPoint.position,
-                );
+                        agvDetail.point.action.pickUpPoint.position
-                setPath(dropToPickup);
+                    );
-                setCurrentPhase('drop-pickup');
+                    setPath(dropToPickup);
-                setVehicleState(agvDetail.modelUuid, 'running');
+                    setCurrentPhase('drop-pickup');
-                setVehicleActive(agvDetail.modelUuid, true);
+                    setVehicleState(agvDetail.modelUuid, 'running');
-                vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
+                    setVehicleActive(agvDetail.modelUuid, true);
+                    vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
 
-                isIncrememtable.current = true;
+                    isIncrememtable.current = true;
+                }
             }
         } else {
             reset()

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

@@ -1,26 +1,37 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import VehicleInstances from "./instances/vehicleInstances";
 import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
-import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
-import VehicleUI from "../ui/vehicle/vehicleUI";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import VehicleUI from "../ui/vehicle/vehicleUI";
+import VehicleInstances from "./instances/vehicleInstances";
 
 function Vehicles() {
-    const { vehicles } = useVehicleStore();
+    const { vehicles, getVehicleById } = useVehicleStore();
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { selectedEventData } = useSelectedEventData();
     const { isPlaying } = usePlayButtonStore();
+    const [isVehicleSelected, setIsVehicleSelected] = useState(false);
 
     useEffect(() => {
         // console.log('vehicles: ', vehicles);
     }, [vehicles])
 
+    useEffect(() => {
+        if (selectedEventSphere) {
+            const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
+            if (selectedVehicle) {
+                setIsVehicleSelected(true);
+            } else {
+                setIsVehicleSelected(false);
+            }
+        }
+    }, [selectedEventSphere])
+
     return (
         <>
 
             <VehicleInstances />
 
-            {selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
+            {isVehicleSelected && !isPlaying &&
                 < VehicleUI />
             }
 

app/src/store/simulation/useConveyorStore.ts

@@ -14,6 +14,7 @@ interface ConveyorStore {
 
     setConveyorActive: (modelUuid: string, isActive: boolean) => void;
     setConveyorState: (modelUuid: string, newState: ConveyorStatus['state']) => void;
+    setConveyorPaused: (modelUuid: string, isPaused: boolean) => void;
 
     incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
     incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
@@ -37,6 +38,7 @@ export const useConveyorStore = create<ConveyorStore>()(
                         ...event,
                         productId,
                         isActive: false,
+                        isPaused: false,
                         idleTime: 0,
                         activeTime: 0,
                         state: 'idle',
@@ -84,6 +86,15 @@ export const useConveyorStore = create<ConveyorStore>()(
             });
         },
 
+        setConveyorPaused: (modelUuid, isPaused) => {
+            set((state) => {
+                const conveyor = state.conveyors.find(c => c.modelUuid === modelUuid);
+                if (conveyor) {
+                    conveyor.isPaused = isPaused;
+                }
+            });
+        },
+
         incrementActiveTime: (modelUuid, incrementBy) => {
             set((state) => {
                 const conveyor = state.conveyors.find(c => c.modelUuid === modelUuid);

app/src/store/simulation/useMaterialStore.ts

@@ -33,6 +33,7 @@ type MaterialsStore = {
     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;
     setIsRendered: (materialId: string, isRendered: boolean) => MaterialSchema | undefined;
 
     getMaterialById: (materialId: string) => MaterialSchema | undefined;
@@ -192,6 +193,18 @@ export const useMaterialStore = create<MaterialsStore>()(
             return updatedMaterial;
         },
 
+        setIsPaused: (materialId, isPaused) => {
+            let updatedMaterial: MaterialSchema | undefined;
+            set((state) => {
+                const material = state.materials.find(m => m.materialId === materialId);
+                if (material) {
+                    material.isPaused = isPaused;
+                    updatedMaterial = JSON.parse(JSON.stringify(material));
+                };
+            });
+            return updatedMaterial;
+        },
+
         setIsRendered: (materialId, isRendered) => {
             let updatedMaterial: MaterialSchema | undefined;
             set((state) => {

app/src/types/simulationTypes.d.ts

@@ -145,6 +145,7 @@ type productsSchema = {
 interface ConveyorStatus extends ConveyorEventSchema {
     productId: string;
     isActive: boolean;
+    isPaused: boolean;
     idleTime: number;
     activeTime: number;
 }
@@ -198,6 +199,7 @@ interface MaterialSchema {
     materialType: string;
     isActive: boolean;
     isVisible: boolean;
+    isPaused: boolean;
     isRendered: boolean;
     startTime?: string;
     endTime?: string;