@wandelbots/wandelbots-js-react-components 2.43.0 → 2.44.0-pr.feature-seperate-timer.383.076b2df

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>
     )
-  },
+  }),
 )

package/src/components/jogging/PoseJointValues.tsx

@@ -1,101 +1,40 @@
-import { Button, Stack, Typography } from "@mui/material"
-import type {
-  ConnectedMotionGroup,
-  MotionGroupStateResponse,
-  MotionStreamConnection,
-} from "@wandelbots/nova-js/v1"
+import { Button, Stack } from "@mui/material"
+import type { Joints } from "@wandelbots/nova-api/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 PoseJointValues 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 PoseJointValuesProps = {
-  /** Either a MotionStreamConnection or ConnectedMotionGroup */
-  motionStream?: MotionStreamConnection
-  connectedMotionGroup?: ConnectedMotionGroup
+  joints: Joints
   showCopyButton?: boolean
 }
 
-export const PoseJointValues = observer(
-  ({
-    motionStream,
-    connectedMotionGroup,
-    showCopyButton = false,
-  }: PoseJointValuesProps) => {
-    const poseHolderRef = useRef<HTMLDivElement>(null)
-    const [copyMessage, setCopyMessage] = useState("")
-
-    const activeMotionStream = createMotionStateProvider(
-      motionStream,
-      connectedMotionGroup,
-    )
-
-    if (!activeMotionStream) {
-      throw new Error(
-        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
-      )
-    }
-
-    function getCurrentPoseString() {
-      if (!activeMotionStream) return ""
-      const { joints } =
-        activeMotionStream.rapidlyChangingMotionState.state.joint_position
-      return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
-    }
+export const PoseJointValues = externalizeComponent(
+  observer(({ joints, showCopyButton = false }: PoseJointValuesProps) => {
+    const [copyMessage, setCopyMessage] = useState<string | null>(null)
+    const poseString = `[${joints.joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
 
     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-joint-values"
       >
-        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        <CopyableText value={poseString} />
         {showCopyButton && (
           <Button
             variant="contained"
@@ -104,15 +43,10 @@ export const PoseJointValues = observer(
             onClick={handleCopy}
             sx={{ flexShrink: 0 }}
           >
-            Copy
+            { copyMessage ? copyMessage : "Copy"}
           </Button>
         )}
-        {copyMessage && (
-          <Typography variant="caption" color="success.main">
-            {copyMessage}
-          </Typography>
-        )}
       </Stack>
     )
-  },
+  }),
 )

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

@@ -52,12 +52,16 @@
   "CycleTimer.CycleTime.lb": "Zykluszeit",
   "CycleTimer.Measuring.lb": "wird gemessen...",
   "CycleTimer.Determined.lb": "bestimmt",
+  "Timer.error": "Fehler",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
   "ProgramControl.Retry.bt": "Wiederholen",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stopp",
+  "ProgramStateIndicator.Starting.lb": "Startet",
   "ProgramStateIndicator.Running.lb": "In Betrieb",
+  "ProgramStateIndicator.Pausing.lb": "Pausiert",
+  "ProgramStateIndicator.Stopping.lb": "Stoppt",
   "ProgramStateIndicator.Error.lb": "Fehler",
   "ProgramStateIndicator.EStop.lb": "Not-Aus",
   "ProgramStateIndicator.Idle.lb": "Leerlauf",

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

@@ -53,12 +53,16 @@
   "CycleTimer.CycleTime.lb": "Cycle Time",
   "CycleTimer.Measuring.lb": "measuring...",
   "CycleTimer.Determined.lb": "determined",
+  "Timer.error": "Error",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
   "ProgramControl.Retry.bt": "Retry",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stop",
+  "ProgramStateIndicator.Starting.lb": "Starting",
   "ProgramStateIndicator.Running.lb": "Running",
+  "ProgramStateIndicator.Pausing.lb": "Pausing",
+  "ProgramStateIndicator.Stopping.lb": "Stopping",
   "ProgramStateIndicator.Error.lb": "Error",
   "ProgramStateIndicator.EStop.lb": "E-Stop",
   "ProgramStateIndicator.Idle.lb": "Idle",

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/AppHeader"
 export * from "./components/CycleTimer"
+export * from "./components/Timer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"