@wandelbots/wandelbots-js-react-components 2.41.0-pr.feature-seperate-timer.383.20b279f → 2.41.0-pr.feature-seperate-timer.383.4d0d430

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.41.0-pr.feature-seperate-timer.383.20b279f",
+  "version": "2.41.0-pr.feature-seperate-timer.383.4d0d430",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,24 +1,57 @@
-import { Stack } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
 import type { TcpPose } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
+import { useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 
 export type PoseCartesianValuesProps = {
-  pose: TcpPose
+  tcpPose: TcpPose
+  showCopyButton?: boolean
 }
 
 export const PoseCartesianValues = externalizeComponent(
-  observer(({ pose }: PoseCartesianValuesProps) => {
+  observer(({ tcpPose, showCopyButton = false }: PoseCartesianValuesProps) => {
+    const [copyMessage, setCopyMessage] = useState("")
+    const poseString = poseToWandelscriptString(tcpPose)
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(poseString)
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
+    }
+
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
         data-testid="pose-cartesian-values"
       >
-        <CopyableText value={poseToWandelscriptString(pose)} />
+        <CopyableText value={poseString} />
+        {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,24 +1,56 @@
-import { Stack } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
+import type { Joints } from "@wandelbots/nova-api/v1"
 import { observer } from "mobx-react-lite"
+import { useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 
 export type PoseJointValuesProps = {
-  pose: number[]
+  joints: Joints
+  showCopyButton?: boolean
 }
 
 export const PoseJointValues = externalizeComponent(
-  observer(({ pose }: PoseJointValuesProps) => {
-    const poseString = `[${pose.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+  observer(({ joints, showCopyButton = false }: PoseJointValuesProps) => {
+    const [copyMessage, setCopyMessage] = useState("")
+    const poseString = `[${joints.joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(poseString)
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
+    }
 
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
         data-testid="pose-joint-values"
       >
         <CopyableText value={poseString} />
+        {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>
     )
   }),