@wandelbots/wandelbots-js-react-components 2.36.0-pr.feature-design-pass.378.e01a6c5 → 2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,21 +1,64 @@
-import { Stack } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
-import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
+import type {
+  ConnectedMotionGroup,
+  MotionStreamConnection,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useRef } from "react"
+import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+export type PoseCartesianValuesProps = {
+  /** Either a MotionStreamConnection or ConnectedMotionGroup */
+  motionStream?: MotionStreamConnection
+  connectedMotionGroup?: ConnectedMotionGroup
+  showCopyButton?: boolean
+}
+
 export const PoseCartesianValues = observer(
-  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+  ({
+    motionStream,
+    connectedMotionGroup,
+    showCopyButton = false,
+  }: PoseCartesianValuesProps) => {
     const poseHolderRef = useRef<HTMLDivElement>(null)
+    const [copyMessage, setCopyMessage] = useState("")
+
+    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
+    const activeMotionStream =
+      motionStream ||
+      (connectedMotionGroup
+        ? ({
+            rapidlyChangingMotionState:
+              connectedMotionGroup.rapidlyChangingMotionState,
+          } as MotionStreamConnection)
+        : undefined)
+
+    if (!activeMotionStream) {
+      throw new Error(
+        "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
+      )
+    }
 
     function getCurrentPoseString() {
-      const tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
+      if (!activeMotionStream) return ""
+      const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
       if (!tcpPose) return ""
       return poseToWandelscriptString(tcpPose)
     }
 
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(getCurrentPoseString())
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
+    }
+
     useAnimationFrame(() => {
       if (!poseHolderRef.current) {
         return
@@ -30,11 +73,28 @@ export const PoseCartesianValues = observer(
 
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
       >
         <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            Copy
+          </Button>
+        )}
+        {copyMessage && (
+          <Typography variant="caption" color="success.main">
+            {copyMessage}
+          </Typography>
+        )}
       </Stack>
     )
   },

package/src/components/jogging/PoseJointValues.tsx

@@ -1,18 +1,61 @@
-import { Stack } from "@mui/material"
-import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
+import { Button, Stack, Typography } from "@mui/material"
+import type {
+  ConnectedMotionGroup,
+  MotionStreamConnection,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useRef } from "react"
+import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+export type PoseJointValuesProps = {
+  /** Either a MotionStreamConnection or ConnectedMotionGroup */
+  motionStream?: MotionStreamConnection
+  connectedMotionGroup?: ConnectedMotionGroup
+  showCopyButton?: boolean
+}
+
 export const PoseJointValues = observer(
-  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+  ({
+    motionStream,
+    connectedMotionGroup,
+    showCopyButton = false,
+  }: PoseJointValuesProps) => {
     const poseHolderRef = useRef<HTMLDivElement>(null)
+    const [copyMessage, setCopyMessage] = useState("")
+
+    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
+    const activeMotionStream =
+      motionStream ||
+      (connectedMotionGroup
+        ? ({
+            rapidlyChangingMotionState:
+              connectedMotionGroup.rapidlyChangingMotionState,
+          } as MotionStreamConnection)
+        : undefined)
+
+    if (!activeMotionStream) {
+      throw new Error(
+        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+      )
+    }
 
     function getCurrentPoseString() {
+      if (!activeMotionStream) return ""
       const { joints } =
-        motionStream.rapidlyChangingMotionState.state.joint_position
-      return `[${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}]`
+        activeMotionStream.rapidlyChangingMotionState.state.joint_position
+      return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+    }
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(getCurrentPoseString())
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
     }
 
     useAnimationFrame(() => {
@@ -29,11 +72,28 @@ export const PoseJointValues = observer(
 
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
       >
         <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            Copy
+          </Button>
+        )}
+        {copyMessage && (
+          <Typography variant="caption" color="success.main">
+            {copyMessage}
+          </Typography>
+        )}
       </Stack>
     )
   },

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

@@ -48,6 +48,10 @@
   "CycleTimer.OfTime.lb": "von {{time}} min.",
   "CycleTimer.Time.lb": "{{time}} min.",
   "CycleTimer.Error.lb": "Fehler",
+  "CycleTimer.WaitingForCycle.lb": "Warten auf Programmzyklus",
+  "CycleTimer.CycleTime.lb": "Zykluszeit",
+  "CycleTimer.Measuring.lb": "wird gemessen...",
+  "CycleTimer.Determined.lb": "bestimmt",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
   "ProgramControl.Retry.bt": "Wiederholen",

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

@@ -49,6 +49,10 @@
   "CycleTimer.OfTime.lb": "of {{time}} min.",
   "CycleTimer.Time.lb": "{{time}} min.",
   "CycleTimer.Error.lb": "Error",
+  "CycleTimer.WaitingForCycle.lb": "Waiting for program cycle",
+  "CycleTimer.CycleTime.lb": "Cycle Time",
+  "CycleTimer.Measuring.lb": "measuring...",
+  "CycleTimer.Determined.lb": "determined",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
   "ProgramControl.Retry.bt": "Retry",