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

package/package.json

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

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,113 +1,25 @@
-import { Button, Stack, Typography } from "@mui/material"
+import { 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 { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
-import { useAutorun } from "../utils/hooks"
 
 export type PoseCartesianValuesProps = {
-  /** Either a MotionStreamConnection or ConnectedMotionGroup */
-  motionStream?: MotionStreamConnection
-  connectedMotionGroup?: ConnectedMotionGroup
-  showCopyButton?: boolean
+  pose: TcpPose
 }
 
 export const PoseCartesianValues = externalizeComponent(
-  observer(
-    ({
-      motionStream,
-      connectedMotionGroup,
-      showCopyButton = false,
-    }: PoseCartesianValuesProps) => {
-      const poseHolderRef = useRef<HTMLDivElement>(null)
-      const [copyMessage, setCopyMessage] = useState("")
-
-      if (!motionStream && !connectedMotionGroup) {
-        throw new Error(
-          "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
-        )
-      }
-
-      function getCurrentPoseString() {
-        let tcpPose: MotionGroupStateResponse["tcp_pose"] | undefined
-        if (motionStream) {
-          tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
-        } else if (connectedMotionGroup) {
-          tcpPose = connectedMotionGroup.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)
-        }
-      }
-
-      useAutorun(() => {
-        if (!poseHolderRef.current) {
-          return
-        }
-
-        let tcpPose: MotionGroupStateResponse["tcp_pose"] | undefined
-        if (motionStream) {
-          tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
-        } else if (connectedMotionGroup) {
-          tcpPose = connectedMotionGroup.rapidlyChangingMotionState.tcp_pose
-        }
-
-        if (!tcpPose) return
-
-        const newPoseContent = poseToWandelscriptString(tcpPose)
-
-        requestAnimationFrame(() => {
-          if (
-            poseHolderRef.current &&
-            poseHolderRef.current.textContent !== newPoseContent
-          ) {
-            poseHolderRef.current.textContent = newPoseContent
-          }
-        })
-      })
-
-      return (
-        <Stack
-          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>
-      )
-    },
-  ),
+  observer(({ pose }: PoseCartesianValuesProps) => {
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        data-testid="pose-cartesian-values"
+      >
+        <CopyableText value={poseToWandelscriptString(pose)} />
+      </Stack>
+    )
+  }),
 )

package/src/components/jogging/PoseJointValues.tsx

@@ -1,118 +1,25 @@
-import { Button, Stack, Typography } from "@mui/material"
-import type {
-  ConnectedMotionGroup,
-  MotionStreamConnection,
-} from "@wandelbots/nova-js/v1"
+import { Stack } from "@mui/material"
 import { observer } from "mobx-react-lite"
-import { useRef, useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
-import { useAutorun } from "../utils/hooks"
 
 export type PoseJointValuesProps = {
-  /** Either a MotionStreamConnection or ConnectedMotionGroup */
-  motionStream?: MotionStreamConnection
-  connectedMotionGroup?: ConnectedMotionGroup
-  showCopyButton?: boolean
+  pose: number[]
 }
 
 export const PoseJointValues = externalizeComponent(
-  observer(
-    ({
-      motionStream,
-      connectedMotionGroup,
-      showCopyButton = false,
-    }: PoseJointValuesProps) => {
-      const poseHolderRef = useRef<HTMLDivElement>(null)
-      const [copyMessage, setCopyMessage] = useState("")
-
-      if (!motionStream && !connectedMotionGroup) {
-        throw new Error(
-          "PoseJointValues requires either motionStream or connectedMotionGroup prop",
-        )
-      }
-
-      function getCurrentPoseString() {
-        let joints: number[]
-        if (motionStream) {
-          joints =
-            motionStream.rapidlyChangingMotionState.state.joint_position.joints
-        } else if (connectedMotionGroup) {
-          joints =
-            connectedMotionGroup.rapidlyChangingMotionState.state.joint_position
-              .joints
-        } else {
-          return ""
-        }
-        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)
-        }
-      }
-
-      useAutorun(() => {
-        if (!poseHolderRef.current) {
-          return
-        }
-
-        let joints: number[]
-        if (motionStream) {
-          joints =
-            motionStream.rapidlyChangingMotionState.state.joint_position.joints
-        } else if (connectedMotionGroup) {
-          joints =
-            connectedMotionGroup.rapidlyChangingMotionState.state.joint_position
-              .joints
-        } else {
-          return
-        }
-
-        const newPoseContent = `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
-
-        requestAnimationFrame(() => {
-          if (
-            poseHolderRef.current &&
-            poseHolderRef.current.textContent !== newPoseContent
-          ) {
-            poseHolderRef.current.textContent = newPoseContent
-          }
-        })
-      })
-
-      return (
-        <Stack
-          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>
-      )
-    },
-  ),
+  observer(({ pose }: PoseJointValuesProps) => {
+    const poseString = `[${pose.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        data-testid="pose-joint-values"
+      >
+        <CopyableText value={poseString} />
+      </Stack>
+    )
+  }),
 )