@tnkrai/tnkr-editor 0.3.5 → 0.3.6

package/dist/index.cjs

@@ -75107,28 +75107,46 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
     React.useEffect(() => {
         isPreparingRef.current = isPreparingAnimation;
     }, [isPreparingAnimation]);
-    // Reverse explosion animation function
-    const performReverseExplosion = React.useCallback(async (specificTransforms) => {
-        if (!updateExplosion) {
-            return;
-        }
-        const duration = 2000;
-        const startTime = Date.now();
-        const startFactor = 1;
-        const endFactor = 0;
-        const animate = () => {
-            const elapsed = Date.now() - startTime;
-            const progress = Math.min(elapsed / duration, 1);
-            const easeOut = 1 - Math.pow(1 - progress, 3);
-            const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
-            updateExplosion(currentFactor, specificTransforms);
-            if (progress < 1) {
-                requestAnimationFrame(animate);
-            }
-        };
-        requestAnimationFrame(animate);
-        await new Promise((resolve) => setTimeout(resolve, duration + 100));
-    }, [updateExplosion]);
+    // Sequential animation function - animate parts one by one based on order
+    const performSequentialAnimation = React.useCallback(async (orderedParts, hasDirectionalParts) => {
+        const partDuration = 700; // Fixed duration per part (500ms each)
+        const overlap = 0; // 30% overlap between parts for smoother flow
+        for (let i = 0; i < orderedParts.length; i++) {
+            // if (playAnimationControlRef.current.shouldStop) return;
+            const part = orderedParts[i];
+            const delay = i * partDuration * (1 - overlap);
+            // Start this part's animation after the delay
+            setTimeout(() => {
+                // if (playAnimationControlRef.current.shouldStop) return;
+                // console.log(`🎬 Animating part ${i + 1}/${orderedParts.length}:`, part.name);
+                const startTime = Date.now();
+                const startFactor = 1;
+                const endFactor = 0;
+                const animatePart = () => {
+                    // if (playAnimationControlRef.current.shouldStop) return;
+                    const elapsed = Date.now() - startTime;
+                    const progress = Math.min(elapsed / partDuration, 1);
+                    const easeOut = 1 - Math.pow(1 - progress, 3);
+                    const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
+                    // Animate this single part
+                    if (hasDirectionalParts && updateDirectionalExplosion) {
+                        updateDirectionalExplosion(currentFactor, [part]);
+                    }
+                    else if (updateExplosion) {
+                        updateExplosion(currentFactor, [part]);
+                    }
+                    if (progress < 1) {
+                        requestAnimationFrame(animatePart);
+                    }
+                };
+                requestAnimationFrame(animatePart);
+            }, delay);
+        }
+        // Wait for all animations to complete
+        const totalAnimationTime = (orderedParts.length - 1) * partDuration * (1 - overlap) + partDuration;
+        await new Promise((resolve) => setTimeout(resolve, totalAnimationTime + 200));
+        // console.log('✅ Sequential animation completed');
+    }, [updateExplosion, updateDirectionalExplosion]);
     // ========================================
     // NEW: Updated function to use partOperations.isolateShapes
     // ========================================
@@ -75345,29 +75363,9 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
                     console.log("⏳ Parts in start position. Waiting 1.5 seconds before animating...");
                     await new Promise((resolve) => setTimeout(resolve, 1500));
                     console.log("🎬 Starting animation now!");
-                    // Step 4: Animate back to assembled (reverse explosion) - only affects step-specific parts
-                    if (hasDirectionalParts && updateDirectionalExplosion) {
-                        // Animate directional parts back to assembled position
-                        const duration = 2000;
-                        const startTime = Date.now();
-                        const startFactor = 1;
-                        const endFactor = 0;
-                        const animate = () => {
-                            const elapsed = Date.now() - startTime;
-                            const progress = Math.min(elapsed / duration, 1);
-                            const easeOut = 1 - Math.pow(1 - progress, 3);
-                            const currentFactor = startFactor + (endFactor - startFactor) * easeOut;
-                            updateDirectionalExplosion(currentFactor, stepSpecificParts);
-                            if (progress < 1) {
-                                requestAnimationFrame(animate);
-                            }
-                        };
-                        requestAnimationFrame(animate);
-                        await new Promise((resolve) => setTimeout(resolve, duration + 100));
-                    }
-                    else {
-                        await performReverseExplosion(stepSpecificParts);
-                    }
+                    // Step 4: Execute sequential animation (always use this as default)
+                    console.log('🎬 EXECUTING SEQUENTIAL ANIMATION');
+                    await performSequentialAnimation(stepSpecificParts, hasDirectionalParts);
                 }
                 catch (error) {
                     console.error("❌ Error in step animation:", error);
@@ -75392,7 +75390,7 @@ handleNext: parentHandleNext, handlePrevious: parentHandlePrevious, onCameraSett
         updateExplosion,
         updateDirectionalExplosion,
         handleShowAllParts,
-        performReverseExplosion,
+        performSequentialAnimation,
         isolateMultipleStepParts,
         setIsAnimating,
         setIsPreparingAnimation,