@wandelbots/wandelbots-js-react-components 2.42.0-pr.feat-add-universalrobots-ur12e.387.df3cdf0 → 2.42.0-pr.feature-seperate-timer.383.2e9936e

package/src/components/Timer/index.tsx

@@ -0,0 +1,101 @@
+import { observer } from "mobx-react-lite"
+import { useEffect } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
+import { TimerDefaultVariant } from "./TimerDefaultVariant"
+import { TimerSmallVariant } from "./TimerSmallVariant"
+import type { TimerProps } from "./types"
+import { useTimerAnimations } from "./useTimerAnimations"
+import { useTimerLogic } from "./useTimerLogic"
+
+/**
+ * A simple count-up timer component with visual progress indication
+ *
+ * Features:
+ * - Count-up timer that tracks elapsed time
+ * - Visual progress gauge that cycles every minute
+ * - Two display variants: large circular gauge (default) or small icon with text
+ * - Full timer control: start, pause, resume, reset functionality
+ * - Support for starting with elapsed time (resume mid-session)
+ * - Error state support: pauses timer and shows error styling
+ * - Smooth progress animations with spring physics
+ * - Fully localized with i18next
+ * - Material-UI theming integration
+ */
+export const Timer = externalizeComponent(
+  observer(
+    ({
+      onTimerReady,
+      autoStart = true,
+      variant = "default",
+      compact = false,
+      className,
+      hasError = false,
+    }: TimerProps) => {
+      // Initialize animation hooks
+      const {
+        animationState,
+        triggerPauseAnimation,
+        triggerErrorAnimation,
+        clearErrorAnimation,
+        setInitialAnimationState,
+        cleanup,
+      } = useTimerAnimations()
+
+      // Initialize timer logic
+      const { timerState, controls } = useTimerLogic({
+        autoStart,
+        hasError,
+        onPauseAnimation: triggerPauseAnimation,
+        onErrorAnimation: triggerErrorAnimation,
+        onClearErrorAnimation: clearErrorAnimation,
+      })
+
+      // Set initial animation state
+      useEffect(() => {
+        setInitialAnimationState()
+      }, [setInitialAnimationState])
+
+      // Provide controls to parent component
+      useEffect(() => {
+        let isMounted = true
+        const timeoutId = setTimeout(() => {
+          if (isMounted) {
+            onTimerReady(controls)
+          }
+        }, 0)
+
+        return () => {
+          isMounted = false
+          clearTimeout(timeoutId)
+        }
+      }, [onTimerReady, controls])
+
+      // Cleanup on unmount
+      useEffect(() => {
+        return cleanup
+      }, [cleanup])
+
+      // Render appropriate variant
+      if (variant === "small") {
+        return (
+          <TimerSmallVariant
+            timerState={timerState}
+            animationState={animationState}
+            hasError={hasError}
+            compact={compact}
+            className={className}
+          />
+        )
+      }
+
+      return (
+        <TimerDefaultVariant
+          timerState={timerState}
+          animationState={animationState}
+          hasError={hasError}
+          className={className}
+        />
+      )
+    },
+  ),
+)

package/src/components/Timer/types.ts

@@ -0,0 +1,38 @@
+export interface TimerControls {
+  start: (elapsedSeconds?: number) => void
+  pause: () => void
+  resume: () => void
+  reset: () => void
+  isPaused: () => boolean
+}
+
+export interface TimerProps {
+  /**
+   * Callback that receives the timer control functions
+   */
+  onTimerReady: (controls: TimerControls) => void
+  /** Whether the timer should start automatically when initialized */
+  autoStart?: boolean
+  /** Visual variant of the timer */
+  variant?: "default" | "small"
+  /** For small variant: whether to show compact display */
+  compact?: boolean
+  /** Additional CSS classes */
+  className?: string
+  /** Whether the timer is in an error state (pauses timer and shows error styling) */
+  hasError?: boolean
+}
+
+export interface TimerState {
+  elapsedTime: number
+  isRunning: boolean
+  isPausedState: boolean
+  currentProgress: number
+  wasRunningBeforeError: boolean
+}
+
+export interface TimerAnimationState {
+  showPauseAnimation: boolean
+  showErrorAnimation: boolean
+  showMainText: boolean
+}

package/src/components/Timer/useTimerAnimations.ts

@@ -0,0 +1,94 @@
+import { useCallback, useRef, useState } from "react"
+import type { TimerAnimationState } from "./types"
+
+export const useTimerAnimations = () => {
+  const [animationState, setAnimationState] = useState<TimerAnimationState>({
+    showPauseAnimation: false,
+    showErrorAnimation: false,
+    showMainText: true,
+  })
+
+  // Refs for managing timeouts
+  const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const fadeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const triggerPauseAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showPauseAnimation: true }))
+
+    if (pauseAnimationTimeoutRef.current) {
+      clearTimeout(pauseAnimationTimeoutRef.current)
+    }
+
+    pauseAnimationTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({ ...prev, showPauseAnimation: false }))
+    }, 800)
+  }, [])
+
+  const triggerErrorAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showErrorAnimation: true }))
+
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+
+    errorAnimationTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
+    }, 600)
+  }, [])
+
+  const clearErrorAnimation = useCallback(() => {
+    setAnimationState((prev) => ({ ...prev, showErrorAnimation: false }))
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+  }, [])
+
+  const triggerFadeTransition = useCallback(() => {
+    setAnimationState((prev) => ({
+      ...prev,
+      showMainText: false,
+    }))
+
+    if (fadeTimeoutRef.current) {
+      clearTimeout(fadeTimeoutRef.current)
+    }
+
+    fadeTimeoutRef.current = setTimeout(() => {
+      setAnimationState((prev) => ({
+        ...prev,
+        showMainText: true,
+      }))
+    }, 200)
+  }, [])
+
+  const setInitialAnimationState = useCallback(() => {
+    setAnimationState((prev) => ({
+      ...prev,
+      showMainText: true,
+    }))
+  }, [])
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    if (pauseAnimationTimeoutRef.current) {
+      clearTimeout(pauseAnimationTimeoutRef.current)
+    }
+    if (errorAnimationTimeoutRef.current) {
+      clearTimeout(errorAnimationTimeoutRef.current)
+    }
+    if (fadeTimeoutRef.current) {
+      clearTimeout(fadeTimeoutRef.current)
+    }
+  }, [])
+
+  return {
+    animationState,
+    triggerPauseAnimation,
+    triggerErrorAnimation,
+    clearErrorAnimation,
+    triggerFadeTransition,
+    setInitialAnimationState,
+    cleanup,
+  }
+}

package/src/components/Timer/useTimerLogic.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useInterpolation } from "../utils/interpolation"
+import type { TimerState } from "./types"
+
+interface UseTimerLogicProps {
+  autoStart: boolean
+  hasError: boolean
+  onPauseAnimation: () => void
+  onErrorAnimation: () => void
+  onClearErrorAnimation: () => void
+}
+
+export const useTimerLogic = ({
+  autoStart,
+  hasError,
+  onPauseAnimation,
+  onErrorAnimation,
+  onClearErrorAnimation,
+}: UseTimerLogicProps) => {
+  const [timerState, setTimerState] = useState<TimerState>({
+    elapsedTime: 0,
+    isRunning: false,
+    isPausedState: false,
+    currentProgress: 0,
+    wasRunningBeforeError: false,
+  })
+
+  // Timer-related refs
+  const animationRef = useRef<number | null>(null)
+  const startTimeRef = useRef<number | null>(null)
+  const pausedTimeRef = useRef<number>(0)
+  const lastProgressRef = useRef<number>(0)
+
+  // Spring-based interpolator for smooth gauge progress animations
+  const [progressInterpolator] = useInterpolation([0], {
+    tension: 80,
+    friction: 18,
+    onChange: ([progress]) => {
+      setTimerState((prev) => ({ ...prev, currentProgress: progress }))
+    },
+  })
+
+  const start = useCallback(
+    (elapsedSeconds: number = 0) => {
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
+      setTimerState((prev) => ({
+        ...prev,
+        elapsedTime: elapsedSeconds,
+        isPausedState: false,
+        currentProgress: initialProgress,
+      }))
+      pausedTimeRef.current = 0
+      lastProgressRef.current = initialProgress
+
+      progressInterpolator.setImmediate([initialProgress])
+
+      if (autoStart) {
+        startTimeRef.current = Date.now() - elapsedSeconds * 1000
+        setTimerState((prev) => ({ ...prev, isRunning: true }))
+      } else {
+        startTimeRef.current = null
+      }
+    },
+    [autoStart, progressInterpolator],
+  )
+
+  const pause = useCallback(() => {
+    if (startTimeRef.current && timerState.isRunning) {
+      const now = Date.now()
+      const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+      const currentProgress = ((totalElapsed / 60) % 1) * 100
+      progressInterpolator.setTarget([currentProgress])
+      
+      setTimerState((prev) => ({
+        ...prev,
+        elapsedTime: Math.floor(totalElapsed),
+      }))
+    }
+
+    setTimerState((prev) => ({
+      ...prev,
+      isRunning: false,
+      isPausedState: true,
+    }))
+    onPauseAnimation()
+  }, [
+    timerState.isRunning,
+    progressInterpolator,
+    onPauseAnimation,
+  ])
+
+  const resume = useCallback(() => {
+    if (timerState.isPausedState) {
+      pausedTimeRef.current = timerState.elapsedTime
+      startTimeRef.current = Date.now()
+      setTimerState((prev) => ({
+        ...prev,
+        isRunning: true,
+        isPausedState: false,
+      }))
+    }
+  }, [timerState.isPausedState, timerState.elapsedTime])
+
+  const reset = useCallback(() => {
+    setTimerState((prev) => ({
+      ...prev,
+      elapsedTime: 0,
+      isRunning: false,
+      isPausedState: false,
+      currentProgress: 0,
+    }))
+    pausedTimeRef.current = 0
+    startTimeRef.current = null
+    lastProgressRef.current = 0
+    progressInterpolator.setImmediate([0])
+  }, [progressInterpolator])
+
+  const isPaused = useCallback(() => {
+    return timerState.isPausedState
+  }, [timerState.isPausedState])
+
+  // Handle error state changes
+  useEffect(() => {
+    if (hasError) {
+      if (timerState.isRunning) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: true }))
+        pause()
+      }
+      onErrorAnimation()
+    } else {
+      if (timerState.wasRunningBeforeError && !timerState.isRunning) {
+        setTimerState((prev) => ({ ...prev, wasRunningBeforeError: false }))
+        resume()
+      }
+      onClearErrorAnimation()
+    }
+  }, [
+    hasError,
+    timerState.isRunning,
+    timerState.wasRunningBeforeError,
+    pause,
+    resume,
+    onErrorAnimation,
+    onClearErrorAnimation,
+  ])
+
+  // Main timer loop
+  useEffect(() => {
+    if (timerState.isRunning) {
+      const updateTimer = () => {
+        if (startTimeRef.current) {
+          const now = Date.now()
+          const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+          const currentProgress = ((totalElapsed / 60) % 1) * 100
+
+          setTimerState((prev) => ({
+            ...prev,
+            elapsedTime: Math.floor(totalElapsed),
+          }))
+
+          // Only update progress interpolator if progress changed significantly
+          const progressDiff = Math.abs(currentProgress - lastProgressRef.current)
+          if (progressDiff > 0.1) {
+            progressInterpolator.setTarget([currentProgress])
+            lastProgressRef.current = currentProgress
+          }
+        }
+        animationRef.current = requestAnimationFrame(updateTimer)
+      }
+      animationRef.current = requestAnimationFrame(updateTimer)
+    } else {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+    }
+  }, [timerState.isRunning, progressInterpolator])
+
+  // Interpolation animation loop
+  useEffect(() => {
+    let interpolationAnimationId: number | null = null
+
+    const animateInterpolation = () => {
+      progressInterpolator.update()
+      interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+    }
+
+    interpolationAnimationId = requestAnimationFrame(animateInterpolation)
+
+    return () => {
+      if (interpolationAnimationId) {
+        cancelAnimationFrame(interpolationAnimationId)
+      }
+    }
+  }, [progressInterpolator])
+
+  return {
+    timerState,
+    controls: {
+      start,
+      pause,
+      resume,
+      reset,
+      isPaused,
+    },
+  }
+}

package/src/components/Timer/utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Formats time in seconds to MM:SS format
+ */
+export const formatTime = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
+}
+
+/**
+ * Calculates progress percentage for timer (minute-based cycles)
+ */
+export const calculateTimerProgress = (elapsedTime: number): number => {
+  return ((elapsedTime / 60) % 1) * 100
+}

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,102 +1,41 @@
-import { Button, Stack, Typography } from "@mui/material"
+import { Button, Stack } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
-import type {
-  ConnectedMotionGroup,
-  MotionGroupStateResponse,
-  MotionStreamConnection,
-} from "@wandelbots/nova-js/v1"
+import type { TcpPose } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useRef, useState } from "react"
+import { useState } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
-import { useAnimationFrame } from "../utils/hooks"
-
-/** Minimal interface for what PoseCartesianValues needs from motion stream */
-type MotionStateProvider = {
-  rapidlyChangingMotionState: MotionGroupStateResponse
-}
-
-/** Creates a motion state provider from either a MotionStreamConnection or ConnectedMotionGroup */
-function createMotionStateProvider(
-  motionStream?: MotionStreamConnection,
-  connectedMotionGroup?: ConnectedMotionGroup,
-): MotionStateProvider | undefined {
-  if (motionStream) {
-    return motionStream
-  }
-  if (connectedMotionGroup) {
-    return {
-      rapidlyChangingMotionState:
-        connectedMotionGroup.rapidlyChangingMotionState,
-    }
-  }
-  return undefined
-}
 
 export type PoseCartesianValuesProps = {
-  /** Either a MotionStreamConnection or ConnectedMotionGroup */
-  motionStream?: MotionStreamConnection
-  connectedMotionGroup?: ConnectedMotionGroup
+  tcpPose: TcpPose
   showCopyButton?: boolean
 }
 
-export const PoseCartesianValues = observer(
-  ({
-    motionStream,
-    connectedMotionGroup,
-    showCopyButton = false,
-  }: PoseCartesianValuesProps) => {
-    const poseHolderRef = useRef<HTMLDivElement>(null)
-    const [copyMessage, setCopyMessage] = useState("")
-
-    const activeMotionStream = createMotionStateProvider(
-      motionStream,
-      connectedMotionGroup,
-    )
-
-    if (!activeMotionStream) {
-      throw new Error(
-        "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
-      )
-    }
-
-    function getCurrentPoseString() {
-      if (!activeMotionStream) return ""
-      const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
-      if (!tcpPose) return ""
-      return poseToWandelscriptString(tcpPose)
-    }
+export const PoseCartesianValues = externalizeComponent(
+  observer(({ tcpPose, showCopyButton = false }: PoseCartesianValuesProps) => {
+    const [copyMessage, setCopyMessage] = useState<string | null>(null)
+    const poseString = poseToWandelscriptString(tcpPose)
 
     const handleCopy = async () => {
       try {
-        await navigator.clipboard.writeText(getCurrentPoseString())
+        await navigator.clipboard.writeText(poseString)
         setCopyMessage("Copied!")
-        setTimeout(() => setCopyMessage(""), 2000)
+        setTimeout(() => setCopyMessage(null), 2000)
       } catch {
         setCopyMessage("Copy failed")
-        setTimeout(() => setCopyMessage(""), 2000)
+        setTimeout(() => setCopyMessage(null), 2000)
       }
     }
 
-    useAnimationFrame(() => {
-      if (!poseHolderRef.current) {
-        return
-      }
-      const newPoseContent = getCurrentPoseString()
-      if (poseHolderRef.current.textContent === newPoseContent) {
-        return
-      }
-
-      poseHolderRef.current.textContent = newPoseContent
-    })
-
     return (
       <Stack
         direction="row"
         alignItems="center"
         spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        data-testid="pose-cartesian-values"
       >
-        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        <CopyableText value={poseString} />
         {showCopyButton && (
           <Button
             variant="contained"
@@ -105,15 +44,10 @@ export const PoseCartesianValues = observer(
             onClick={handleCopy}
             sx={{ flexShrink: 0 }}
           >
-            Copy
+            { copyMessage ? copyMessage : "Copy"}
           </Button>
         )}
-        {copyMessage && (
-          <Typography variant="caption" color="success.main">
-            {copyMessage}
-          </Typography>
-        )}
       </Stack>
     )
-  },
+  }),
 )