@wandelbots/wandelbots-js-react-components 2.40.0 → 2.41.0-pr.feature-seperate-timer.383.38eb55e

package/src/components/jogging/PoseJointValues.tsx

@@ -6,8 +6,9 @@ import type {
 } 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 { useAnimationFrame } from "../utils/hooks"
+import { useAutorun } from "../utils/hooks"
 
 /** Minimal interface for what PoseJointValues needs from motion stream */
 type MotionStateProvider = {
@@ -38,81 +39,90 @@ export type PoseJointValuesProps = {
   showCopyButton?: boolean
 }
 
-export const PoseJointValues = observer(
-  ({
-    motionStream,
-    connectedMotionGroup,
-    showCopyButton = false,
-  }: PoseJointValuesProps) => {
-    const poseHolderRef = useRef<HTMLDivElement>(null)
-    const [copyMessage, setCopyMessage] = useState("")
-
-    const activeMotionStream = createMotionStateProvider(
+export const PoseJointValues = externalizeComponent(
+  observer(
+    ({
       motionStream,
       connectedMotionGroup,
-    )
+      showCopyButton = false,
+    }: PoseJointValuesProps) => {
+      const poseHolderRef = useRef<HTMLDivElement>(null)
+      const [copyMessage, setCopyMessage] = useState("")
 
-    if (!activeMotionStream) {
-      throw new Error(
-        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+      const activeMotionStream = createMotionStateProvider(
+        motionStream,
+        connectedMotionGroup,
       )
-    }
 
-    function getCurrentPoseString() {
-      if (!activeMotionStream) return ""
-      const { joints } =
-        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)
+      if (!activeMotionStream) {
+        throw new Error(
+          "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+        )
       }
-    }
 
-    useAnimationFrame(() => {
-      if (!poseHolderRef.current) {
-        return
+      function getCurrentPoseString() {
+        if (!activeMotionStream) return ""
+        const { joints } =
+          activeMotionStream.rapidlyChangingMotionState.state.joint_position
+        return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
       }
 
-      const newPoseContent = getCurrentPoseString()
-      if (poseHolderRef.current.textContent === newPoseContent) {
-        return
+      const handleCopy = async () => {
+        try {
+          await navigator.clipboard.writeText(getCurrentPoseString())
+          setCopyMessage("Copied!")
+          setTimeout(() => setCopyMessage(""), 2000)
+        } catch {
+          setCopyMessage("Copy failed")
+          setTimeout(() => setCopyMessage(""), 2000)
+        }
       }
-      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>
-    )
-  },
+      useAutorun(() => {
+        if (!poseHolderRef.current || !activeMotionStream) {
+          return
+        }
+
+        const { joints } =
+          activeMotionStream.rapidlyChangingMotionState.state.joint_position
+        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>
+      )
+    },
+  ),
 )

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

@@ -52,6 +52,7 @@
   "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",

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

@@ -53,6 +53,7 @@
   "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",

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"