@wandelbots/wandelbots-js-react-components 1.17.2 → 1.17.4

package/package.json

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

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -1,23 +1,23 @@
 import {
-  ToggleButtonGroup,
-  ToggleButton,
   Stack,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
 } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
-import RotationIcon from "../../icons/rotation.svg"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
 import ZAxisIcon from "../../icons/axis-z.svg"
-import type { JoggingStore, DiscreteIncrementOption } from "./JoggingStore"
-import { JoggingOptions } from "./JoggingOptions"
-import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import RotationIcon from "../../icons/rotation.svg"
 import { useReaction } from "../utils/hooks"
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingCartesianValues } from "./JoggingCartesianValues"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
+import { JoggingOptions } from "./JoggingOptions"
+import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
   axis: "x" | "y" | "z"
@@ -247,11 +247,11 @@ export const JoggingCartesianTab = observer(
             ))}
         </Stack>
 
-        {/* Velocity slider */}
-        <JoggingVelocitySlider store={store} />
-
         {/* Show message if joint limits reached */}
         <JoggingJointLimitDetector store={store} />
+
+        {/* Velocity slider */}
+        <JoggingVelocitySlider store={store} />
       </Stack>
     )
   },

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material"
-import { useTranslation } from "react-i18next"
-import { useState } from "react"
 import isEqual from "lodash-es/isEqual"
+import { useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { useAnimationFrame } from "../utils/hooks"
 import type { JoggingStore } from "./JoggingStore"
 
@@ -20,30 +20,31 @@ export const JoggingJointLimitDetector = ({
     store.jogger.motionStream.rapidlyChangingMotionState.state
       .joint_limit_reached.limit_reached,
   )
+  const jointLimitsReachedRef = useRef(jointLimitsReached)
 
   useAnimationFrame(() => {
     const newLimitsReached =
       store.jogger.motionStream.rapidlyChangingMotionState.state
         .joint_limit_reached.limit_reached
 
-    if (!isEqual(jointLimitsReached, newLimitsReached)) {
+    if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {
+      jointLimitsReachedRef.current = newLimitsReached
       setJointLimitsReached(newLimitsReached)
     }
   })
 
   const jointLimitReachedIndices: number[] = []
-  jointLimitsReached.forEach((limitReached, index) => {
+  for (const [index, limitReached] of jointLimitsReached.entries()) {
     if (limitReached) jointLimitReachedIndices.push(index)
-  })
-
-  if (!jointLimitReachedIndices.length) return null
+  }
 
   return (
     <Typography
       color="error"
       sx={{
-        padding: "1rem",
+        margin: "0.5rem 1rem",
         textAlign: "center",
+        visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
       }}
     >
       {t("Jogging.JointLimitsReached.lb", {

package/src/components/jogging/JoggingPanel.tsx

@@ -1,17 +1,17 @@
 import { Button, Paper, Stack, Tab, Tabs } from "@mui/material"
+import { NovaClient } from "@wandelbots/wandelbots-js"
+import { isString } from "lodash-es"
+import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
-import { JoggingCartesianTab } from "./JoggingCartesianTab"
-import { JoggingJointTab } from "./JoggingJointTab"
-import { JoggingStore } from "./JoggingStore"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
 import { LoadingCover } from "../LoadingCover"
 import { TransparentOverlay } from "../TransparentOverlay"
-import { runInAction } from "mobx"
-import { NovaClient } from "@wandelbots/wandelbots-js"
-import { externalizeComponent } from "../../externalizeComponent"
-import { isString } from "lodash-es"
 import { useReaction } from "../utils/hooks"
-import { useTranslation } from "react-i18next"
+import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JoggingJointTab } from "./JoggingJointTab"
+import { JoggingStore } from "./JoggingStore"
 
 export type JoggingPanelProps = {
   /** Either an existing NovaClient or the base url of a deployed Nova instance */
@@ -31,8 +31,6 @@ export type JoggingPanelProps = {
  */
 export const JoggingPanel = externalizeComponent(
   observer((props: JoggingPanelProps) => {
-    const { t } = useTranslation()
-
     const nova = isString(props.nova)
       ? new NovaClient({ instanceUrl: props.nova })
       : props.nova

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,8 +1,8 @@
-import { Stack, Typography } from "@mui/material"
+import { Stack } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
-import type { JoggingStore } from "./JoggingStore"
-import { VelocitySlider } from "../VelocitySlider"
 import { useTranslation } from "react-i18next"
+import { VelocitySlider } from "../VelocitySlider"
+import type { JoggingStore } from "./JoggingStore"
 
 export const JoggingVelocitySlider = observer(
   ({ store }: { store: JoggingStore }) => {
@@ -24,8 +24,7 @@ export const JoggingVelocitySlider = observer(
       <Stack
         sx={{
           margin: "0px 20px",
-          marginTop: "24px",
-          marginBottom: "24px",
+          marginBottom: "12px",
         }}
       >
         <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>

package/src/components/robots/ABB_1200_07_7.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function ABB_1200_07_7({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+ABB_1200_07_7.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function ABB_1200_07_7({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="IRB1200_7_70_IRC5" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/DHRobot.tsx

@@ -1,13 +1,13 @@
-import { Vector3, Matrix4, Quaternion } from "three"
 import { Line } from "@react-three/drei"
-import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
 import type { DHParameter } from "@wandelbots/wandelbots-api-client"
-import RobotAnimator from "./RobotAnimator"
 import type * as THREE from "three"
+import { Matrix4, Quaternion, Vector3 } from "three"
+import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
 import {
   getAllJointsByName,
   type RobotSceneJoint,
 } from "../utils/robotTreeQuery"
+import RobotAnimator from "./RobotAnimator"
 import type { DHRobotProps } from "./SupportedRobot"
 
 const CHILD_LINE = "line"
@@ -85,7 +85,7 @@ export function DHRobot({
     })
   }
 
-  function getAllJoints(rootObject: THREE.Object3D): RobotSceneJoint[] {
+  function jointCollector(rootObject: THREE.Object3D): RobotSceneJoint[] {
     return getAllJointsByName(rootObject, "^group_[0-9]+$")
   }
 
@@ -93,36 +93,37 @@ export function DHRobot({
     <>
       <RobotAnimator
         rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
+        jointCollector={jointCollector}
         onRotationChanged={setRotation}
-        jointCollector={getAllJoints}
-      />
-      <group {...props} name="Scene">
-        <mesh>
-          <sphereGeometry args={[0.01, 32, 32]} />
-          <meshStandardMaterial color={"black"} depthTest={true} />
-        </mesh>
-        {dhParameters!.map((param, index) => {
-          const { a, b } = getLinePoints(
-            param,
-            rapidlyChangingMotionState.state.joint_position.joints[index] ?? 0,
-          )
-          return (
-            <group name={`group_${index}`} key={"group_" + index}>
-              <Line
-                name={CHILD_LINE}
-                points={[a, b]}
-                color={"white"}
-                lineWidth={5}
-              />
-              <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
-                <sphereGeometry args={[0.01, 32, 32]} />
-                <meshStandardMaterial color={"black"} depthTest={true} />
-              </mesh>
-            </group>
-          )
-        })}
-      </group>
+      >
+        <group {...props} name="Scene">
+          <mesh>
+            <sphereGeometry args={[0.01, 32, 32]} />
+            <meshStandardMaterial color={"black"} depthTest={true} />
+          </mesh>
+          {dhParameters!.map((param, index) => {
+            const { a, b } = getLinePoints(
+              param,
+              rapidlyChangingMotionState.state.joint_position.joints[index] ??
+                0,
+            )
+            return (
+              <group name={`group_${index}`} key={"group_" + index}>
+                <Line
+                  name={CHILD_LINE}
+                  points={[a, b]}
+                  color={"white"}
+                  lineWidth={5}
+                />
+                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                  <sphereGeometry args={[0.01, 32, 32]} />
+                  <meshStandardMaterial color={"black"} depthTest={true} />
+                </mesh>
+              </group>
+            )
+          })}
+        </group>
+      </RobotAnimator>
     </>
   )
 }

package/src/components/robots/FANUC_ARC_Mate_100iD.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_ARC_Mate_100iD({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_ARC_Mate_100iD.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_ARC_Mate_100iD({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="M10iD" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/FANUC_ARC_Mate_120iD.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_ARC_Mate_120iD({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_ARC_Mate_120iD.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_ARC_Mate_120iD({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="M10iD" rotation={[0, 0, 0]}>

package/src/components/robots/FANUC_CRX10iA.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX10iA({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX10iA.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX10iA({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="CRX10iA_J00">

package/src/components/robots/FANUC_CRX20iAL.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX20iAL({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX20iAL.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX20iAL({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <mesh

package/src/components/robots/FANUC_CRX25iA.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX25iA({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX25iA.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX25iA({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene" position={[0, -0.37, 0]}>
           <group name="CRX25iA_L00">

package/src/components/robots/FANUC_CRX25iAL.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX25iAL({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX25iAL.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX25iAL({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="CRX10iA_J00">