@wandelbots/wandelbots-js-react-components 2.29.0-pr.feature-add-cycle-timer.368.3937cdc → 2.29.0-pr.feature-add-cycle-timer.368.eb856cf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.29.0-pr.feature-add-cycle-timer.368.3937cdc",
+  "version": "2.29.0-pr.feature-add-cycle-timer.368.eb856cf",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/CycleTimer.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
+import { useInterpolation } from "./utils/interpolation"
 
 export interface CycleTimerProps {
   /**
@@ -41,6 +42,7 @@ export interface CycleTimerProps {
  * - Automatically counts down and triggers callback when reaching zero
  * - Full timer control: start, pause, resume functionality
  * - Support for starting with elapsed time (resume mid-cycle)
+ * - Smooth spring-based progress animations for all state transitions
  * - Fully localized with i18next
  * - Material-UI theming integration
  * - Small variant with animated progress icon (gauge border only) next to text
@@ -97,44 +99,76 @@ export const CycleTimer = externalizeComponent(
       const [maxTime, setMaxTime] = useState(0)
       const [isRunning, setIsRunning] = useState(false)
       const [isPausedState, setIsPausedState] = useState(false)
-      const intervalRef = useRef<NodeJS.Timeout | null>(null)
+      const [currentProgress, setCurrentProgress] = useState(0)
+      const animationRef = useRef<number | null>(null)
+      const startTimeRef = useRef<number | null>(null)
+      const pausedTimeRef = useRef<number>(0)
+
+      // Spring-based interpolator for smooth gauge progress animations
+      // Uses physics simulation to create natural, smooth transitions between progress values
+      const [progressInterpolator] = useInterpolation([0], {
+        tension: 80, // Higher values = faster, more responsive animations
+        friction: 18, // Higher values = more damping, less bouncy animations
+        onChange: ([progress]) => {
+          setCurrentProgress(progress)
+        },
+      })
 
       const startNewCycle = useCallback(
         (maxTimeSeconds: number, elapsedSeconds: number = 0) => {
-          console.log(
-            `Starting new cycle with ${maxTimeSeconds} seconds (${elapsedSeconds} seconds already elapsed)`,
-          )
           setMaxTime(maxTimeSeconds)
           const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
           setRemainingTime(remainingSeconds)
           setIsPausedState(false)
+          pausedTimeRef.current = 0
+
+          // Animate progress smoothly to starting position
+          // For new cycles (no elapsed time), animate from current position to 0%
+          // For resumed cycles, animate to the appropriate progress percentage
+          const initialProgress =
+            elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
+          if (elapsedSeconds === 0) {
+            progressInterpolator.setTarget([0])
+          } else {
+            progressInterpolator.setTarget([initialProgress])
+          }
 
           if (remainingSeconds === 0) {
-            console.log("Cycle already completed (elapsed time >= max time)")
             setIsRunning(false)
+            startTimeRef.current = null
             // Trigger completion callback immediately if time is already up
             if (onCycleEnd) {
               setTimeout(() => onCycleEnd(), 0)
             }
           } else if (autoStart) {
-            console.log("Auto-start enabled, starting timer")
+            startTimeRef.current = Date.now() - elapsedSeconds * 1000
             setIsRunning(true)
           } else {
-            console.log("Auto-start disabled, timer set but not started")
+            startTimeRef.current = null
           }
         },
-        [autoStart, onCycleEnd],
+        [autoStart, onCycleEnd, progressInterpolator],
       )
 
       const pause = useCallback(() => {
-        console.log("Pausing timer")
+        if (startTimeRef.current && isRunning) {
+          const now = Date.now()
+          const additionalElapsed = now - startTimeRef.current
+          pausedTimeRef.current += additionalElapsed
+
+          // Calculate exact progress position and smoothly animate to it when pausing
+          // This ensures the visual progress matches the actual elapsed time
+          const totalElapsed = pausedTimeRef.current / 1000
+          const exactProgress = Math.min(100, (totalElapsed / maxTime) * 100)
+          progressInterpolator.setTarget([exactProgress])
+        }
         setIsRunning(false)
         setIsPausedState(true)
-      }, [])
+      }, [isRunning, maxTime, progressInterpolator])
 
       const resume = useCallback(() => {
         if (isPausedState && remainingTime > 0) {
-          console.log("Resuming timer")
+          startTimeRef.current = Date.now()
           setIsRunning(true)
           setIsPausedState(false)
         }
@@ -165,34 +199,90 @@ export const CycleTimer = externalizeComponent(
       }, [onCycleComplete, startNewCycle, pause, resume, isPaused])
 
       useEffect(() => {
-        if (isRunning && remainingTime > 0) {
-          intervalRef.current = setInterval(() => {
-            setRemainingTime((prev) => {
-              if (prev <= 1) {
+        if (isRunning) {
+          // Single animation frame loop that handles both time updates and progress
+          const updateTimer = () => {
+            if (startTimeRef.current && maxTime > 0) {
+              const now = Date.now()
+              const elapsed =
+                (now - startTimeRef.current + pausedTimeRef.current) / 1000
+              const remaining = Math.max(0, maxTime - elapsed)
+
+              // Update remaining time based on timestamp calculation
+              setRemainingTime(Math.ceil(remaining))
+
+              // Smoothly animate progress based on elapsed time for fluid visual feedback
+              const progress = Math.min(100, (elapsed / maxTime) * 100)
+              progressInterpolator.setTarget([progress])
+
+              if (remaining <= 0) {
                 setIsRunning(false)
+                startTimeRef.current = null
+                setRemainingTime(0)
+                // Animate to 100% completion with smooth spring transition
+                progressInterpolator.setTarget([100])
                 // Call onCycleEnd when timer reaches zero to notify about completion
                 if (onCycleEnd) {
                   setTimeout(() => onCycleEnd(), 0)
                 }
-                console.log("Cycle completed! Timer reached zero.")
-                return 0
+                return
               }
-              return prev - 1
-            })
-          }, 1000)
+
+              // Continue animation loop while running
+              if (isRunning) {
+                animationRef.current = requestAnimationFrame(updateTimer)
+              }
+            }
+          }
+
+          animationRef.current = requestAnimationFrame(updateTimer)
         } else {
-          if (intervalRef.current) {
-            clearInterval(intervalRef.current)
-            intervalRef.current = null
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current)
+            animationRef.current = null
+          }
+        }
+
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current)
           }
         }
+      }, [isRunning, onCycleEnd, maxTime, progressInterpolator])
+
+      // Dedicated animation loop for spring physics interpolation
+      // Runs at 60fps to ensure smooth progress animations independent of timer updates
+      useEffect(() => {
+        let interpolationAnimationId: number | null = null
+
+        const animateInterpolation = () => {
+          progressInterpolator.update(1 / 60) // 60fps interpolation
+          interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+        }
+
+        interpolationAnimationId = requestAnimationFrame(animateInterpolation)
 
         return () => {
-          if (intervalRef.current) {
-            clearInterval(intervalRef.current)
+          if (interpolationAnimationId) {
+            cancelAnimationFrame(interpolationAnimationId)
           }
         }
-      }, [isRunning, remainingTime, onCycleEnd])
+      }, [progressInterpolator])
+
+      // Keep interpolator synchronized with static progress when timer is stopped
+      // Ensures correct visual state when component initializes or timer stops
+      useEffect(() => {
+        if (!isRunning && !isPausedState && maxTime > 0) {
+          const staticProgress = ((maxTime - remainingTime) / maxTime) * 100
+          progressInterpolator.setTarget([staticProgress])
+        }
+      }, [
+        isRunning,
+        isPausedState,
+        maxTime,
+        remainingTime,
+        progressInterpolator,
+      ])
 
       const formatTime = (seconds: number): string => {
         const minutes = Math.floor(seconds / 60)
@@ -200,8 +290,8 @@ export const CycleTimer = externalizeComponent(
         return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
       }
 
-      const progressValue =
-        maxTime > 0 ? ((maxTime - remainingTime) / maxTime) * 100 : 0
+      // Use interpolated progress value for smooth gauge animations
+      const progressValue = currentProgress
 
       // Small variant: horizontal layout with gauge icon and text
       if (variant === "small") {
@@ -235,7 +325,10 @@ export const CycleTimer = externalizeComponent(
                 valueMax={100}
                 innerRadius="70%"
                 outerRadius="95%"
+                skipAnimation={true}
                 sx={{
+                  opacity: isPausedState ? 0.6 : 1,
+                  transition: "opacity 0.2s ease",
                   [`& .MuiGauge-valueArc`]: {
                     fill: theme.palette.success.main,
                   },
@@ -252,6 +345,31 @@ export const CycleTimer = externalizeComponent(
                   [`& text`]: {
                     display: "none",
                   },
+                  // Hide any inner circle elements that might flash
+                  [`& .MuiGauge-referenceArcBackground`]: {
+                    display: "none",
+                  },
+                  [`& .MuiGauge-valueArcBackground`]: {
+                    display: "none",
+                  },
+                  [`& circle`]: {
+                    display: "none",
+                  },
+                }}
+              />
+
+              {/* Inner circle overlay to prevent flashing */}
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 13,
+                  height: 13,
+                  borderRadius: "50%",
+                  backgroundColor: theme.palette.background?.paper || "white",
+                  pointerEvents: "none",
                 }}
               />
             </Box>
@@ -295,7 +413,10 @@ export const CycleTimer = externalizeComponent(
             valueMax={100}
             innerRadius="71%"
             outerRadius="90%"
+            skipAnimation={true}
             sx={{
+              opacity: isPausedState ? 0.6 : 1,
+              transition: "opacity 0.2s ease",
               [`& .MuiGauge-valueArc`]: {
                 fill: theme.palette.success.main,
               },