@wandelbots/wandelbots-js-react-components 2.27.1-pr.feature-add-cycle-timer.368.3779de1 → 2.27.1-pr.feature-add-program-control-component.367.8887fdc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.1-pr.feature-add-cycle-timer.368.3779de1",
+  "version": "2.27.1-pr.feature-add-program-control-component.367.8887fdc",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -140,7 +140,6 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@mui/x-charts": "^8.9.0",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/ProgramControl.tsx

@@ -0,0 +1,217 @@
+import { Pause, PlayArrow, Stop } from "@mui/icons-material"
+import { Box, Button, Typography, useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+
+export type ProgramState = "idle" | "running" | "paused" | "stopping"
+
+export interface ProgramControlProps {
+  /** The current state of the program control */
+  state: ProgramState
+  /** Callback fired when the run/resume button is clicked */
+  onRun: () => void
+  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
+  onPause?: () => void
+  /** Callback fired when the stop button is clicked */
+  onStop: () => void
+  /**
+   * Function to reset the component from 'stopping' state back to 'idle'.
+   * This must be called manually by the user when requiresManualReset is true.
+   */
+  onReset?: () => void
+  /**
+   * When true, the component will stay in 'stopping' state until onReset is called manually.
+   * When false (default), auto-resets to 'idle' after 2 seconds.
+   */
+  requiresManualReset?: boolean
+  /**
+   * Variant of the component:
+   * - 'with_pause': Shows run/pause/stop buttons (default)
+   * - 'without_pause': Shows only run/stop buttons
+   */
+  variant?: "with_pause" | "without_pause"
+  /** Additional CSS class name */
+  className?: string
+}
+
+interface ButtonConfig {
+  enabled: boolean
+  label: string
+  color: string
+  onClick: () => void
+}
+
+/**
+ * A control component for program execution with run, pause, and stop functionality.
+ *
+ * Features:
+ * - State machine with idle, running, paused, and stopping states
+ * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
+ * - Optional manual reset functionality
+ * - Responsive design with 110px circular buttons
+ * - Material-UI theming integration
+ */
+export const ProgramControl = externalizeComponent(
+  observer(
+    ({
+      state,
+      onRun,
+      onPause,
+      onStop,
+      onReset,
+      requiresManualReset = false,
+      variant = "with_pause",
+      className,
+    }: ProgramControlProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+
+      const getButtonConfigs = (): ButtonConfig[] => {
+        const baseConfigs: Record<string, ButtonConfig> = {
+          run: {
+            enabled: state === "idle" || state === "paused",
+            label:
+              state === "paused"
+                ? t("ProgramControl.Resume.bt")
+                : t("ProgramControl.Start.bt"),
+            color: theme.palette.success.main,
+            onClick: onRun,
+          },
+          pause: {
+            enabled: state === "running",
+            label: t("ProgramControl.Pause.bt"),
+            color: "#FFFFFF33",
+            onClick: onPause || (() => {}),
+          },
+          stop: {
+            enabled: state === "running" || state === "paused",
+            label: t("ProgramControl.Stop.bt"),
+            color: theme.palette.error.main,
+            onClick: onStop,
+          },
+        }
+
+        if (variant === "without_pause") {
+          return [baseConfigs.run, baseConfigs.stop]
+        }
+
+        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]
+      }
+
+      const getButtonIcon = (index: number) => {
+        const iconProps = { sx: { fontSize: "55px" } }
+
+        if (variant === "without_pause") {
+          return index === 0 ? (
+            <PlayArrow {...iconProps} />
+          ) : (
+            <Stop {...iconProps} />
+          )
+        }
+
+        switch (index) {
+          case 0:
+            return <PlayArrow {...iconProps} />
+          case 1:
+            return <Pause {...iconProps} />
+          case 2:
+            return <Stop {...iconProps} />
+          default:
+            return null
+        }
+      }
+
+      const buttonConfigs = getButtonConfigs()
+
+      return (
+        <Box
+          className={className}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "40px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {buttonConfigs.map((config, index) => (
+              <Box
+                key={config.label}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  disabled={
+                    !config.enabled ||
+                    (state === "stopping" && !requiresManualReset)
+                  }
+                  onClick={config.onClick}
+                  sx={{
+                    width: "110px",
+                    height: "110px",
+                    borderRadius: "110px",
+                    backgroundColor: config.color,
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                    "&:hover": {
+                      backgroundColor: config.color,
+                      opacity:
+                        config.enabled &&
+                        !(state === "stopping" && !requiresManualReset)
+                          ? 0.8
+                          : 0.3,
+                    },
+                    "&:disabled": {
+                      backgroundColor: config.color,
+                      opacity: 0.3,
+                    },
+                    minWidth: "110px",
+                    flexShrink: 0,
+                  }}
+                >
+                  {getButtonIcon(index)}
+                </Button>
+
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? config.color
+                        : theme.palette.text.disabled,
+                    textAlign: "center",
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                  }}
+                >
+                  {config.label}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    },
+  ),
+)

package/src/i18n/locales/de/translations.json

@@ -44,7 +44,8 @@
   "Jogging.Cartesian.bt": "Kartesisch",
   "Jogging.Joints.bt": "Gelenke",
   "Jogging.Velocity.bt": "Geschwindigkeit",
-  "CycleTimer.RemainingTime.lb": "Verbleibende Zeit",
-  "CycleTimer.Of.lb": "von",
-  "CycleTimer.Min.lb": "min."
+  "ProgramControl.Start.bt": "Starten",
+  "ProgramControl.Resume.bt": "Fortsetzen",
+  "ProgramControl.Pause.bt": "Pausieren",
+  "ProgramControl.Stop.bt": "Stoppen"
 }

package/src/i18n/locales/en/translations.json

@@ -45,7 +45,8 @@
   "Jogging.Cartesian.bt": "Cartesian",
   "Jogging.Joints.bt": "Joints",
   "Jogging.Velocity.bt": "Velocity",
-  "CycleTimer.RemainingTime.lb": "remaining time",
-  "CycleTimer.Of.lb": "of",
-  "CycleTimer.Min.lb": "min."
+  "ProgramControl.Start.bt": "Start",
+  "ProgramControl.Resume.bt": "Resume",
+  "ProgramControl.Pause.bt": "Pause",
+  "ProgramControl.Stop.bt": "Stop"
 }

package/src/index.ts

@@ -1,7 +1,6 @@
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
-export * from "./components/CycleTimer"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
 export * from "./components/jogging/JoggingPanel"
@@ -10,6 +9,7 @@ export * from "./components/jogging/PoseCartesianValues"
 export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
+export * from "./components/ProgramControl"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"

package/dist/components/CycleTimer.d.ts

@@ -1,30 +0,0 @@
-export interface CycleTimerProps {
-    /** Callback that receives the startNewCycle function for controlling the timer */
-    onCycleComplete: (startNewCycle: (maxTimeSeconds: number) => void) => void;
-    /** Callback fired when a cycle actually completes (reaches zero) */
-    onCycleEnd?: () => void;
-    /** Whether the timer should start automatically when maxTime is set */
-    autoStart?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A circular gauge timer component that shows the remaining time of a cycle
- *
- * Features:
- * - Circular gauge with 264px diameter and 40px thickness
- * - Shows remaining time prominently in the center (60px font)
- * - Displays "remaining time" label at top and total time at bottom
- * - Automatically counts down and triggers callback when reaching zero
- * - Fully localized with i18next
- * - Material-UI theming integration
- *
- * @param onCycleComplete - Callback that receives the startNewCycle function for controlling the timer
- * @param onCycleEnd - Optional callback fired when a cycle actually completes (reaches zero)
- * @param autoStart - Whether to start timer automatically (default: true)
- * @param className - Additional CSS classes
- */
-export declare const CycleTimer: (({ onCycleComplete, onCycleEnd, autoStart, className, }: CycleTimerProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=CycleTimer.d.ts.map

package/dist/components/CycleTimer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CycleTimer.d.ts","sourceRoot":"","sources":["../../src/components/CycleTimer.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC9B,kFAAkF;IAClF,eAAe,EAAE,CAAC,aAAa,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAA;IAC1E,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,4DAOhB,eAAe;;CAyKrB,CAAA"}

package/src/components/CycleTimer.tsx

@@ -1,211 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material"
-import { Gauge } from "@mui/x-charts/Gauge"
-import { observer } from "mobx-react-lite"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { externalizeComponent } from "../externalizeComponent"
-
-export interface CycleTimerProps {
-  /** Callback that receives the startNewCycle function for controlling the timer */
-  onCycleComplete: (startNewCycle: (maxTimeSeconds: number) => void) => void
-  /** Callback fired when a cycle actually completes (reaches zero) */
-  onCycleEnd?: () => void
-  /** Whether the timer should start automatically when maxTime is set */
-  autoStart?: boolean
-  /** Additional CSS classes */
-  className?: string
-}
-
-/**
- * A circular gauge timer component that shows the remaining time of a cycle
- *
- * Features:
- * - Circular gauge with 264px diameter and 40px thickness
- * - Shows remaining time prominently in the center (60px font)
- * - Displays "remaining time" label at top and total time at bottom
- * - Automatically counts down and triggers callback when reaching zero
- * - Fully localized with i18next
- * - Material-UI theming integration
- *
- * @param onCycleComplete - Callback that receives the startNewCycle function for controlling the timer
- * @param onCycleEnd - Optional callback fired when a cycle actually completes (reaches zero)
- * @param autoStart - Whether to start timer automatically (default: true)
- * @param className - Additional CSS classes
- */
-export const CycleTimer = externalizeComponent(
-  observer(
-    ({
-      onCycleComplete,
-      onCycleEnd,
-      autoStart = true,
-      className,
-    }: CycleTimerProps) => {
-      const theme = useTheme()
-      const { t } = useTranslation()
-      const [remainingTime, setRemainingTime] = useState(0)
-      const [maxTime, setMaxTime] = useState(0)
-      const [isRunning, setIsRunning] = useState(false)
-      const intervalRef = useRef<NodeJS.Timeout | null>(null)
-
-      const startNewCycle = useCallback(
-        (maxTimeSeconds: number) => {
-          console.log(`Starting new cycle with ${maxTimeSeconds} seconds`)
-          setMaxTime(maxTimeSeconds)
-          setRemainingTime(maxTimeSeconds)
-          if (autoStart) {
-            console.log("Auto-start enabled, starting timer")
-            setIsRunning(true)
-          } else {
-            console.log("Auto-start disabled, timer set but not started")
-          }
-        },
-        [autoStart],
-      )
-
-      // Call onCycleComplete immediately to provide the startNewCycle function
-      useEffect(() => {
-        let isMounted = true
-        const timeoutId = setTimeout(() => {
-          if (isMounted) {
-            onCycleComplete(startNewCycle)
-          }
-        }, 0)
-
-        return () => {
-          isMounted = false
-          clearTimeout(timeoutId)
-        }
-      }, [onCycleComplete, startNewCycle])
-
-      useEffect(() => {
-        if (isRunning && remainingTime > 0) {
-          intervalRef.current = setInterval(() => {
-            setRemainingTime((prev) => {
-              if (prev <= 1) {
-                setIsRunning(false)
-                // 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 prev - 1
-            })
-          }, 1000)
-        } else {
-          if (intervalRef.current) {
-            clearInterval(intervalRef.current)
-            intervalRef.current = null
-          }
-        }
-
-        return () => {
-          if (intervalRef.current) {
-            clearInterval(intervalRef.current)
-          }
-        }
-      }, [isRunning, remainingTime, onCycleEnd])
-
-      const formatTime = (seconds: number): string => {
-        const minutes = Math.floor(seconds / 60)
-        const remainingSeconds = seconds % 60
-        return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
-      }
-
-      const progressValue =
-        maxTime > 0 ? ((maxTime - remainingTime) / maxTime) * 100 : 0
-
-      return (
-        <Box
-          className={className}
-          sx={{
-            position: "relative",
-            width: 264,
-            height: 264,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Gauge
-            width={264}
-            height={264}
-            value={progressValue}
-            valueMin={0}
-            valueMax={100}
-            innerRadius="71%"
-            outerRadius="90%"
-            sx={{
-              [`& .MuiGauge-valueArc`]: {
-                fill: theme.palette.success.main,
-              },
-              [`& .MuiGauge-referenceArc`]: {
-                fill: "white",
-                stroke: "transparent",
-              },
-            }}
-          />
-
-          {/* Center content overlay */}
-          <Box
-            sx={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: 187, // 71% of 264 = ~187px inner radius
-              height: 187,
-              borderRadius: "50%",
-              backgroundColor: theme.palette.backgroundPaperElevation?.[8], // background/paper-elevation-8
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              gap: 1,
-            }}
-          >
-            {/* "remaining time" label */}
-            <Typography
-              variant="body2"
-              sx={{
-                fontSize: "12px",
-                color: theme.palette.text.secondary,
-                marginBottom: 0.5,
-              }}
-            >
-              {t("CycleTimer.RemainingTime.lb")}
-            </Typography>
-
-            {/* Main timer display */}
-            <Typography
-              variant="h1"
-              sx={{
-                fontSize: "48px",
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-                lineHeight: 1,
-                marginBottom: 0.5,
-              }}
-            >
-              {formatTime(remainingTime)}
-            </Typography>
-
-            {/* Total time at bottom */}
-            <Typography
-              variant="body2"
-              sx={{
-                fontSize: "12px",
-                color: theme.palette.text.secondary,
-              }}
-            >
-              {t("CycleTimer.Of.lb")} {formatTime(maxTime)}{" "}
-              {t("CycleTimer.Min.lb")}
-            </Typography>
-          </Box>
-        </Box>
-      )
-    },
-  ),
-)