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

package/package.json

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

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">

package/src/components/robots/KUKA_KR16_R2010_2.tsx

@@ -1,9 +1,8 @@
+import { animated } from "@react-spring/three"
 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 type { GLTF } from "three-stdlib"
+import type { RobotModelProps } from "./types"
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -29,29 +28,15 @@ type GLTFResult = GLTF & {
   }
 }
 
-export function KUKA_KR16_R2010_2({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
-  const { nodes, materials } = useGLTF(modelURL) as GLTFResult
-
-  const rotationOffsets = [0, 0, -Math.PI / 2, 0, 0, 0]
+KUKA_KR16_R2010_2.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
+export function KUKA_KR16_R2010_2({ modelURL, ...props }: RobotModelProps) {
+  const { nodes, materials } = useGLTF(modelURL) as GLTFResult
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="link_0">
@@ -77,28 +62,28 @@ export function KUKA_KR16_R2010_2({
               material={materials.material_Material_Metall}
             />
           </group>
-          <group name="KUKA_KR16R2010_2_J00">
-            <group
+          <animated.group name="KUKA_KR16R2010_2_J00">
+            <animated.group
               name="KUKA_KR16R2010_2_J01"
               position={[0.16, 0.52, 0]}
               rotation={[-Math.PI / 2, 0, 0]}
             >
-              <group
+              <animated.group
                 name="KUKA_KR16R2010_2_J02"
                 position={[0.98, 0, 0]}
                 rotation={[0, -Math.PI / 2, 0]}
               >
-                <group
+                <animated.group
                   name="KUKA_KR16R2010_2_J03"
                   position={[0.15, 0, 0]}
                   rotation={[Math.PI / 2, 0, 0]}
                 >
-                  <group
+                  <animated.group
                     name="KUKA_KR16R2010_2_J04"
                     position={[0, -0.86, 0]}
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
-                    <group
+                    <animated.group
                       name="KUKA_KR16R2010_2_J05"
                       rotation={[-Math.PI / 2, 0, -Math.PI]}
                     >
@@ -111,7 +96,7 @@ export function KUKA_KR16_R2010_2({
                         position={[0.67, 2, 0]}
                         rotation={[-Math.PI, 0, Math.PI / 2]}
                       />
-                    </group>
+                    </animated.group>
                     <mesh
                       name="link_5"
                       castShadow
@@ -121,7 +106,7 @@ export function KUKA_KR16_R2010_2({
                       position={[-0.67, 0, 2]}
                       rotation={[Math.PI / 2, 0, -Math.PI / 2]}
                     />
-                  </group>
+                  </animated.group>
                   <mesh
                     name="link_4"
                     castShadow
@@ -131,7 +116,7 @@ export function KUKA_KR16_R2010_2({
                     position={[-0.67, 1.14, 0]}
                     rotation={[0, 0, -Math.PI / 2]}
                   />
-                </group>
+                </animated.group>
                 <group
                   name="link_3"
                   position={[-0.52, 0, 1.14]}
@@ -159,7 +144,7 @@ export function KUKA_KR16_R2010_2({
                     material={materials.material_Material_Farbe__2_}
                   />
                 </group>
-              </group>
+              </animated.group>
               <group
                 name="link_2"
                 position={[-0.16, 0, -0.52]}
@@ -180,7 +165,7 @@ export function KUKA_KR16_R2010_2({
                   material={materials.material_Material_Metall}
                 />
               </group>
-            </group>
+            </animated.group>
             <group name="link_1">
               <mesh
                 name="visuals_1"
@@ -204,7 +189,7 @@ export function KUKA_KR16_R2010_2({
                 material={materials.material_Material_Metall}
               />
             </group>
-          </group>
+          </animated.group>
         </group>
       </group>
     </>

package/src/components/robots/KUKA_KR210_R2700.tsx

@@ -1,35 +1,19 @@
-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"
+
+KUKA_KR210_R2700.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-export function KUKA_KR210_R2700({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function KUKA_KR210_R2700({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  const rotationOffsets = [0, 0, -Math.PI / 2, 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="kuka_kr210_2700">

package/src/components/robots/KUKA_KR270_R2700.tsx

@@ -1,35 +1,19 @@
-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"
+
+KUKA_KR270_R2700.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-export function KUKA_KR270_R2700({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function KUKA_KR270_R2700({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  const rotationOffsets = [0, 0, -Math.PI / 2, 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="joint_01">

package/src/components/robots/Robot.tsx

@@ -3,7 +3,7 @@ import { type GroupProps } from "@react-three/fiber"
 import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
 import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
 
-export type ConnectecMotionGroupRobotProps = {
+export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
   isGhost?: boolean
@@ -13,7 +13,7 @@ export type ConnectecMotionGroupRobotProps = {
  * The Robot component is a wrapper around the SupportedRobot component
  * for usage with @wandelbots/wandelbots-js ConnectedMotionGroup object.
  *
- * @param {ConnectecMotionGroupRobotProps} props - The properties for the Robot component.
+ * @param {RobotProps} props - The properties for the Robot component.
  * @param {ConnectedMotionGroup} props.connectedMotionGroup - The connected motion group containing motion state and parameters.
  * @param {Function} [props.getModel=defaultGetModel] - Optional function to get the model URL. Defaults to defaultGetModel.
  * @param {Object} props - Additional properties passed to the SupportedRobot component.
@@ -25,7 +25,7 @@ export function Robot({
   getModel = defaultGetModel,
   isGhost = false,
   ...props
-}: ConnectecMotionGroupRobotProps) {
+}: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
     return null
   }