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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.41.0-pr.feature-seperate-timer.383.cd7e408",
+  "version": "2.41.0-pr.feature-seperate-timer.383.ed84a08",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -59,8 +59,8 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/react-vite": "^9.1.6",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -72,7 +72,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^9.1.3",
+    "eslint-plugin-storybook": "^9.1.6",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -95,7 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.6",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/jogging/PoseCartesianValues.tsx

@@ -9,29 +9,7 @@ import { observer } from "mobx-react-lite"
 import { useRef, 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
-}
+import { useAutorun } from "../utils/hooks"
 
 export type PoseCartesianValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
@@ -50,20 +28,19 @@ export const PoseCartesianValues = externalizeComponent(
       const poseHolderRef = useRef<HTMLDivElement>(null)
       const [copyMessage, setCopyMessage] = useState("")
 
-      const activeMotionStream = createMotionStateProvider(
-        motionStream,
-        connectedMotionGroup,
-      )
-
-      if (!activeMotionStream) {
+      if (!motionStream && !connectedMotionGroup) {
         throw new Error(
           "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
         )
       }
 
       function getCurrentPoseString() {
-        if (!activeMotionStream) return ""
-        const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
+        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)
       }
@@ -79,16 +56,30 @@ export const PoseCartesianValues = externalizeComponent(
         }
       }
 
-      useAnimationFrame(() => {
+      useAutorun(() => {
         if (!poseHolderRef.current) {
           return
         }
-        const newPoseContent = getCurrentPoseString()
-        if (poseHolderRef.current.textContent === newPoseContent) {
-          return
+
+        let tcpPose: MotionGroupStateResponse["tcp_pose"] | undefined
+        if (motionStream) {
+          tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
+        } else if (connectedMotionGroup) {
+          tcpPose = connectedMotionGroup.rapidlyChangingMotionState.tcp_pose
         }
 
-        poseHolderRef.current.textContent = newPoseContent
+        if (!tcpPose) return
+
+        const newPoseContent = poseToWandelscriptString(tcpPose)
+
+        requestAnimationFrame(() => {
+          if (
+            poseHolderRef.current &&
+            poseHolderRef.current.textContent !== newPoseContent
+          ) {
+            poseHolderRef.current.textContent = newPoseContent
+          }
+        })
       })
 
       return (

package/src/components/jogging/PoseJointValues.tsx

@@ -1,36 +1,13 @@
 import { Button, Stack, Typography } from "@mui/material"
 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 { 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
-}
+import { useAutorun } from "../utils/hooks"
 
 export type PoseJointValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
@@ -49,21 +26,24 @@ export const PoseJointValues = externalizeComponent(
       const poseHolderRef = useRef<HTMLDivElement>(null)
       const [copyMessage, setCopyMessage] = useState("")
 
-      const activeMotionStream = createMotionStateProvider(
-        motionStream,
-        connectedMotionGroup,
-      )
-
-      if (!activeMotionStream) {
+      if (!motionStream && !connectedMotionGroup) {
         throw new Error(
           "PoseJointValues requires either motionStream or connectedMotionGroup prop",
         )
       }
 
       function getCurrentPoseString() {
-        if (!activeMotionStream) return ""
-        const { joints } =
-          activeMotionStream.rapidlyChangingMotionState.state.joint_position
+        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(", ")}]`
       }
 
@@ -78,16 +58,33 @@ export const PoseJointValues = externalizeComponent(
         }
       }
 
-      useAnimationFrame(() => {
+      useAutorun(() => {
         if (!poseHolderRef.current) {
           return
         }
 
-        const newPoseContent = getCurrentPoseString()
-        if (poseHolderRef.current.textContent === newPoseContent) {
+        let joints: number[]
+        if (motionStream) {
+          joints =
+            motionStream.rapidlyChangingMotionState.state.joint_position.joints
+        } else if (connectedMotionGroup) {
+          joints =
+            connectedMotionGroup.rapidlyChangingMotionState.state.joint_position
+              .joints
+        } else {
           return
         }
-        poseHolderRef.current.textContent = newPoseContent
+
+        const newPoseContent = `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+
+        requestAnimationFrame(() => {
+          if (
+            poseHolderRef.current &&
+            poseHolderRef.current.textContent !== newPoseContent
+          ) {
+            poseHolderRef.current.textContent = newPoseContent
+          }
+        })
       })
 
       return (