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

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.35a3a58",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/jogging/PoseCartesianValues.tsx

@@ -2,14 +2,13 @@ import { Button, Stack, Typography } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
 import type {
   ConnectedMotionGroup,
-  MotionGroupStateResponse,
   MotionStreamConnection,
 } 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"
+import { useAnimationFrame } from "../utils/hooks"
 
 export type PoseCartesianValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
@@ -35,12 +34,10 @@ export const PoseCartesianValues = externalizeComponent(
       }
 
       function getCurrentPoseString() {
-        let tcpPose: MotionGroupStateResponse["tcp_pose"] | undefined
-        if (motionStream) {
-          tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
-        } else if (connectedMotionGroup) {
-          tcpPose = connectedMotionGroup.rapidlyChangingMotionState.tcp_pose
-        }
+        const tcpPose = motionStream
+          ? motionStream.rapidlyChangingMotionState.tcp_pose
+          : connectedMotionGroup?.rapidlyChangingMotionState.tcp_pose
+
         if (!tcpPose) return ""
         return poseToWandelscriptString(tcpPose)
       }
@@ -56,30 +53,16 @@ export const PoseCartesianValues = externalizeComponent(
         }
       }
 
-      useAutorun(() => {
+      useAnimationFrame(() => {
         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
+        const newPoseContent = getCurrentPoseString()
+        if (poseHolderRef.current.textContent === newPoseContent) {
+          return
         }
 
-        if (!tcpPose) return
-
-        const newPoseContent = poseToWandelscriptString(tcpPose)
-
-        requestAnimationFrame(() => {
-          if (
-            poseHolderRef.current &&
-            poseHolderRef.current.textContent !== newPoseContent
-          ) {
-            poseHolderRef.current.textContent = newPoseContent
-          }
-        })
+        poseHolderRef.current.textContent = newPoseContent
       })
 
       return (

package/src/components/jogging/PoseJointValues.tsx

@@ -7,7 +7,7 @@ import { observer } from "mobx-react-lite"
 import { useRef, useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
-import { useAutorun } from "../utils/hooks"
+import { useAnimationFrame } from "../utils/hooks"
 
 export type PoseJointValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
@@ -33,17 +33,12 @@ export const PoseJointValues = externalizeComponent(
       }
 
       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 ""
-        }
+        const joints = motionStream
+          ? motionStream.rapidlyChangingMotionState.state.joint_position.joints
+          : connectedMotionGroup?.rapidlyChangingMotionState.state
+              .joint_position.joints
+
+        if (!joints) return ""
         return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
       }
 
@@ -58,33 +53,16 @@ export const PoseJointValues = externalizeComponent(
         }
       }
 
-      useAutorun(() => {
+      useAnimationFrame(() => {
         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 {
+        const newPoseContent = getCurrentPoseString()
+        if (poseHolderRef.current.textContent === newPoseContent) {
           return
         }
 
-        const newPoseContent = `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
-
-        requestAnimationFrame(() => {
-          if (
-            poseHolderRef.current &&
-            poseHolderRef.current.textContent !== newPoseContent
-          ) {
-            poseHolderRef.current.textContent = newPoseContent
-          }
-        })
+        poseHolderRef.current.textContent = newPoseContent
       })
 
       return (