"updated single flow"

app/src/modules/simulation/process/processAnimator.tsx

@@ -9,17 +9,20 @@ import { useProcessAnimation } from "./useProcessAnimations";
 import ProcessObject from "./processObject";
 import { ProcessData } from "./types";
 import { useSimulationStates } from "../../../store/store";
+import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
 
 interface ProcessContainerProps {
   processes: ProcessData[];
   setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
   agvRef: any;
+  MaterialRef: any;
 }
 
 const ProcessAnimator: React.FC<ProcessContainerProps> = ({
   processes,
   setProcesses,
   agvRef,
+  MaterialRef,
 }) => {
   const gltf = useLoader(GLTFLoader, crate) as GLTF;
   const groupRef = useRef<THREE.Group>(null);
@@ -44,11 +47,57 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
     () => ({
       Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
       Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+      // Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+      Default: new THREE.MeshStandardMaterial(),
     }),
     []
   );
 
+  useEffect(() => {
+    // Update material references for all spawned objects
+    Object.entries(animationStates).forEach(([processId, processState]) => {
+      Object.keys(processState.spawnedObjects).forEach((objectId) => {
+        const entry = {
+          processId,
+          objectId,
+        };
+
+        const materialType =
+          processState.spawnedObjects[objectId]?.currentMaterialType;
+
+        if (!materialType) {
+          return;
+        }
+
+        const matRefArray = MaterialRef.current;
+
+        // Find existing material group
+        const existing = matRefArray.find(
+          (entryGroup: { material: string; objects: any[] }) =>
+            entryGroup.material === materialType
+        );
+
+        if (existing) {
+          // Check if this processId + objectId already exists
+          const alreadyExists = existing.objects.some(
+            (o: any) =>
+              o.processId === entry.processId && o.objectId === entry.objectId
+          );
+
+          if (!alreadyExists) {
+            existing.objects.push(entry);
+          }
+        } else {
+          // Create new group for this material type
+          matRefArray.push({
+            material: materialType,
+            objects: [entry],
+          });
+        }
+      });
+    });
+  }, [animationStates, MaterialRef, agvRef]);
+
   // In processAnimator.tsx - only the relevant spawn logic part that needs fixes
 
   useFrame(() => {
@@ -252,14 +301,39 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
             const nextPointIdx = stateRef.currentIndex + 1;
             const isLastPoint = nextPointIdx >= path.length;
 
+            // if (isLastPoint) {
+            //   if (currentPointData?.actions) {
+            //     const shouldStop = !hasNonInheritActions(
+            //       currentPointData.actions
+            //     );
+            //     if (shouldStop) {
+            //       return;
+            //     }
+            //   }
+            // }
+
             if (isLastPoint) {
               if (currentPointData?.actions) {
-                const shouldStop = !hasNonInheritActions(
+                const hasNonInherit = hasNonInheritActions(
                   currentPointData.actions
                 );
-                if (shouldStop) {
+                if (!hasNonInherit) {
+                  // Remove the object if all actions are inherit
+                  updatedObjects[objectId] = {
+                    ...obj,
+                    visible: false,
+                    state: { ...stateRef, isAnimating: false },
+                  };
                   return;
                 }
+              } else {
+                // No actions at last point - remove the object
+                updatedObjects[objectId] = {
+                  ...obj,
+                  visible: false,
+                  state: { ...stateRef, isAnimating: false },
+                };
+                return;
               }
             }
 
@@ -329,6 +403,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
           .filter(([_, obj]) => obj.visible)
           .map(([objectId, obj]) => {
             const process = processedProcesses.find((p) => p.id === processId);
+
             const renderAs = process?.renderAs || "custom";
 
             return (