@wandelbots/wandelbots-js-react-components 4.0.1 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/robots/RobotAnimator.tsx

@@ -1,6 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber"
 import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useCallback } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { ValueInterpolator } from "../utils/interpolation"
@@ -64,11 +64,6 @@ export default function RobotAnimator({
     invalidate()
   }
 
-  function updateJoints(newJointValues: number[]) {
-    jointValues.current = newJointValues
-    interpolatorRef.current?.setTarget(newJointValues)
-  }
-
   function setRotation() {
     const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
 
@@ -86,13 +81,24 @@ export default function RobotAnimator({
     }
   }
 
-  useAutorun(() => {
+  const updateJoints = useCallback(() => {
     const newJointValues = rapidlyChangingMotionState.joint_position.filter(
       (item) => item !== undefined,
     )
 
-    requestAnimationFrame(() => updateJoints(newJointValues))
-  })
+    jointValues.current = newJointValues
+    interpolatorRef.current?.setTarget(newJointValues)
+  }, [rapidlyChangingMotionState])
+
+  /**
+   * Fire an update joints call on every motion state change.
+   * requestAnimationFrame used to avoid blocking main thread
+   */
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      updateJoints()
+    })
+  }, [rapidlyChangingMotionState, updateJoints])
 
   return <group ref={setGroupRef}>{children}</group>
 }