@wandelbots/wandelbots-js-react-components 2.27.1 → 2.28.0

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.1",
+  "version": "2.28.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -25,6 +25,8 @@
     "dev:wbjs": "nodemon --watch $WBJS_PATH -e tgz --exec 'npm install file:$WBJS_PATH && storybook dev -p 6006 --no-open'",
     "tsc": "tsc --pretty --noEmit -p stories/tsconfig.json",
     "test": "test-storybook --url http://127.0.0.1:6006 --index-json --browsers chromium",
+    "test:unit": "vitest --workspace vitest.workspace.ts --project unit",
+    "test:unit:run": "vitest run --workspace vitest.workspace.ts --project unit",
     "ci:test": "run-s ci:test:build ci:test:built",
     "ci:test:build": "storybook build --quiet --test",
     "ci:test:built": "run-p --race ci:test:server ci:test:runner",
@@ -48,45 +50,44 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.1",
-    "@mui/material": "^6.4.0",
-    "@react-spring/three": "^9.7.5",
-    "@react-three/drei": "^9.122.0",
-    "@react-three/fiber": "^8.18.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@react-three/drei": "^10.2.0",
+    "@react-three/fiber": "^9.1.2",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/csf-tools": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/test-runner": "^0.21.3",
-    "@storybook/types": "^8.6.4",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/react-vite": "^9.0.8",
+    "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.1.8",
     "@types/three": "^0.174.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^2.0.1",
+    "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
+    "eslint-plugin-storybook": "^9.0.8",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
+    "i18next": "^25.2.1",
     "jest-simple-dot-reporter": "^1.0.5",
     "jest-summary-reporter": "^0.0.2",
+    "jsdom": "^26.1.0",
+    "monaco-editor": "^0.52.2",
     "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.3",
     "prettier-eslint": "^16.3.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.34.9",
     "rollup-plugin-dts": "^6.1.1",
@@ -94,8 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.6.4",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^9.0.8",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",
@@ -110,11 +110,12 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6",
-    "@mui/material": "^6",
-    "@react-spring/three": "^9",
-    "@react-three/drei": "^9.122.0",
-    "@react-three/fiber": "^8.18.0",
+    "@mui/icons-material": "^6 || ^7",
+    "@mui/material": "^6 || ^7",
+    "@react-three/drei": "^9.122.0 || ^10",
+    "@react-three/fiber": "^8 || ^9",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "three": ">=0.174",
     "three-stdlib": ">=2"
   },
@@ -122,9 +123,6 @@
     "react-dom": {
       "optional": true
     },
-    "@react-spring/three": {
-      "optional": true
-    },
     "@react-three/drei": {
       "optional": true
     },
@@ -145,8 +143,11 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
-    "react-error-boundary": "^5.0.0",
-    "react-i18next": "^15.4.1",
+    "react-error-boundary": "^6.0.0",
+    "react-i18next": "^15.5.2",
     "shiki": "^3.1.0"
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }

package/src/Setup.tsx

@@ -1,5 +1,5 @@
 import { OrbitControls } from "@react-three/drei"
-import { Canvas, type Props as CanvasProps } from "@react-three/fiber"
+import { Canvas, type CanvasProps } from "@react-three/fiber"
 import * as React from "react"
 import { Vector3 } from "three"
 import { PresetEnvironment } from "./components/3d-viewport/PresetEnvironment"

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -1,4 +1,4 @@
-import { type GroupProps } from "@react-three/fiber"
+import { type ThreeElements } from "@react-three/fiber"
 import type { Geometry } from "@wandelbots/nova-api/v1"
 import type { SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
@@ -6,7 +6,7 @@ import { ConvexGeometry } from "three-stdlib"
 
 export type SafetyZonesRendererProps = {
   safetyZones: SafetySetupSafetyZone[]
-} & GroupProps
+} & ThreeElements["group"]
 
 interface CoplanarityResult {
   isCoplanar: boolean

package/src/components/3d-viewport/TrajectoryRenderer.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three"
 
 export type TrajectoryRendererProps = {
   trajectory: GetTrajectoryResponse
-} & JSX.IntrinsicElements["group"]
+} & React.JSX.IntrinsicElements["group"]
 
 export function TrajectoryRenderer({
   trajectory,

package/src/components/jogging/JoggingOptions.tsx

@@ -11,7 +11,7 @@ import {
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
-  const joggingOptions = []
+  const joggingOptions: React.ReactElement[] = []
 
   function translateOrientation(orientation: OrientationId): string {
     switch (orientation) {

package/src/components/robots/DHRobot.tsx

@@ -1,5 +1,6 @@
 import { Line } from "@react-three/drei"
 import type { DHParameter } from "@wandelbots/nova-api/v1"
+import React, { useRef } from "react"
 import type * as THREE from "three"
 import { Matrix4, Quaternion, Vector3 } from "three"
 import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
@@ -17,6 +18,16 @@ export function DHRobot({
   // reused in every update
   const accumulatedMatrix = new Matrix4()
 
+  // Store direct references to avoid searching by name
+  const lineRefs = useRef<any[]>([])
+  const meshRefs = useRef<(THREE.Mesh | null)[]>([])
+
+  // Initialize refs array when dhParameters change
+  React.useEffect(() => {
+    lineRefs.current = new Array(dhParameters.length).fill(null)
+    meshRefs.current = new Array(dhParameters.length).fill(null)
+  }, [dhParameters.length])
+
   // Updates accumulatedMatrix with every execution
   // Reset the matrix to identity if you start a new position update
   function getLinePoints(
@@ -49,7 +60,7 @@ export function DHRobot({
 
   function setJointLineRotation(
     jointIndex: number,
-    line: THREE.Line,
+    line: any, // Use any for drei Line component
     mesh: THREE.Mesh,
     jointValue: number,
   ) {
@@ -71,14 +82,20 @@ export function DHRobot({
 
   function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
     accumulatedMatrix.identity()
-    joints.forEach((joint, jointIndex) => {
-      setJointLineRotation(
-        jointIndex,
-        joint.getObjectByName(CHILD_LINE) as THREE.Line,
-        joint.getObjectByName(CHILD_MESH) as THREE.Mesh,
-        jointValues[jointIndex]!,
-      )
-    })
+
+    // Use direct refs instead of searching by name
+    for (
+      let jointIndex = 0;
+      jointIndex < Math.min(joints.length, jointValues.length);
+      jointIndex++
+    ) {
+      const line = lineRefs.current[jointIndex]
+      const mesh = meshRefs.current[jointIndex]
+
+      if (line && mesh) {
+        setJointLineRotation(jointIndex, line, mesh, jointValues[jointIndex]!)
+      }
+    }
   }
 
   return (
@@ -103,12 +120,22 @@ export function DHRobot({
             return (
               <group name={jointName} key={jointName}>
                 <Line
+                  ref={(ref) => {
+                    lineRefs.current[index] = ref
+                  }}
                   name={CHILD_LINE}
                   points={[a, b]}
                   color={"white"}
                   lineWidth={5}
                 />
-                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                <mesh
+                  ref={(ref) => {
+                    meshRefs.current[index] = ref
+                  }}
+                  name={CHILD_MESH}
+                  key={"mesh_" + index}
+                  position={b}
+                >
                   <sphereGeometry args={[0.01, 32, 32]} />
                   <meshStandardMaterial color={"black"} depthTest={true} />
                 </mesh>

package/src/components/robots/GenericRobot.tsx

@@ -1,6 +1,5 @@
-import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { GroupProps } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 import React, { useCallback } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
@@ -14,7 +13,7 @@ export type RobotModelProps = {
    */
   postModelRender?: () => void
   flangeRef?: React.Ref<Group>
-} & GroupProps
+} & ThreeElements["group"]
 
 function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
@@ -54,7 +53,7 @@ export function GenericRobot({
       )
     } else {
       return (
-        <animated.group
+        <group
           name={node.name}
           key={node.uuid}
           position={node.position}
@@ -62,7 +61,7 @@ export function GenericRobot({
           ref={isFlange(node) ? flangeRef : undefined}
         >
           {node.children.map(renderNode)}
-        </animated.group>
+        </group>
       )
     }
   }

package/src/components/robots/Robot.tsx

@@ -1,4 +1,4 @@
-import { type GroupProps } from "@react-three/fiber"
+import { type ThreeElements } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
@@ -10,7 +10,7 @@ export type RobotProps = {
   getModel?: (modelFromController: string) => string
   flangeRef?: React.Ref<Group>
   transparentColor?: string
-} & GroupProps
+} & ThreeElements["group"]
 
 /**
  * The Robot component is a wrapper around the SupportedRobot component

package/src/components/robots/RobotAnimator.test.tsx

@@ -0,0 +1,113 @@
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
+import { describe, expect, it, vi } from "vitest"
+import RobotAnimator from "./RobotAnimator"
+
+// Mock the dependencies
+vi.mock("./robotModelLogic", () => ({
+  collectJoints: vi.fn(),
+}))
+
+vi.mock("../utils/interpolation", () => ({
+  ValueInterpolator: vi.fn().mockImplementation(() => ({
+    setTarget: vi.fn(),
+    getCurrentValues: vi.fn(() => []),
+    destroy: vi.fn(),
+  })),
+}))
+
+describe("RobotAnimator", () => {
+  it("should export the component correctly", () => {
+    expect(RobotAnimator).toBeDefined()
+    expect(typeof RobotAnimator).toBe("function")
+  })
+
+  it("should handle props with different numbers of joints", () => {
+    // Test that the component accepts different numbers of DH parameters
+    const mockMotionState4Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4],
+        },
+      },
+    } as any
+
+    const mockDHParameters4Joints: DHParameter[] = [
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+      { theta: 0, reverse_rotation_direction: false },
+    ]
+
+    const mockMotionState7Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7],
+        },
+      },
+    } as any
+
+    const mockDHParameters7Joints: DHParameter[] = Array(7).fill({
+      theta: 0,
+      reverse_rotation_direction: false,
+    })
+
+    // These should not throw TypeScript errors
+    expect(() => {
+      const props4 = {
+        rapidlyChangingMotionState: mockMotionState4Joints,
+        dhParameters: mockDHParameters4Joints,
+        children: null,
+      }
+      // Verify props are correctly typed
+      expect(props4.dhParameters).toHaveLength(4)
+      expect(
+        props4.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(4)
+    }).not.toThrow()
+
+    expect(() => {
+      const props7 = {
+        rapidlyChangingMotionState: mockMotionState7Joints,
+        dhParameters: mockDHParameters7Joints,
+        children: null,
+      }
+      expect(props7.dhParameters).toHaveLength(7)
+      expect(
+        props7.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(7)
+    }).not.toThrow()
+  })
+
+  it("should use custom interpolation for smooth value transitions", () => {
+    // Test the rotation calculation logic
+    const dhParam1 = { theta: 0.1, reverse_rotation_direction: false }
+    const dhParam2 = { theta: -0.2, reverse_rotation_direction: true }
+    const jointValue1 = 0.5
+    const jointValue2 = 1.0
+
+    // Calculate expected rotations
+    const expectedRotation1 = 1 * jointValue1 + 0.1 // 0.6
+    const expectedRotation2 = -1 * jointValue2 + -0.2 // -1.2
+
+    expect(expectedRotation1).toBe(0.6)
+    expect(expectedRotation2).toBe(-1.2)
+
+    // Test edge cases
+    const dhParamReverse = { theta: 0, reverse_rotation_direction: true }
+    const jointValueZero = 0
+    const expectedRotationReverse = -1 * jointValueZero + 0 // 0
+
+    expect(expectedRotationReverse).toBe(0)
+
+    // Test rotation direction logic
+    const testValue = 1.5
+    const normalParam = { theta: 0, reverse_rotation_direction: false }
+    const reversedParam = { theta: 0, reverse_rotation_direction: true }
+
+    expect(1 * testValue + 0).toBe(1.5) // Normal direction
+    expect(-1 * testValue + 0).toBe(-1.5) // Reversed direction
+  })
+})

package/src/components/robots/RobotAnimator.tsx

@@ -1,12 +1,12 @@
-import { Globals, useSpring } from "@react-spring/three"
-import { useThree } from "@react-three/fiber"
+import { useFrame, useThree } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/nova-api/v1"
-import React, { useRef } from "react"
+import React, { useEffect, useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
+import { ValueInterpolator } from "../utils/interpolation"
 import { collectJoints } from "./robotModelLogic"
 
 type RobotAnimatorProps = {
@@ -22,11 +22,42 @@ export default function RobotAnimator({
   onRotationChanged,
   children,
 }: RobotAnimatorProps) {
-  Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
   const jointObjects = useRef<Object3D[]>([])
+  const interpolatorRef = useRef<ValueInterpolator | null>(null)
   const { invalidate } = useThree()
 
+  // Initialize interpolator
+  useEffect(() => {
+    const initialJointValues =
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
+        (item) => item !== undefined,
+      )
+
+    interpolatorRef.current = new ValueInterpolator(initialJointValues, {
+      tension: 120, // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20, // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 0.001,
+    })
+
+    return () => {
+      interpolatorRef.current?.destroy()
+    }
+  }, [])
+
+  // Animation loop that runs at the display's refresh rate
+  useFrame((state, delta) => {
+    if (interpolatorRef.current) {
+      const isComplete = interpolatorRef.current.update(delta)
+      setRotation()
+
+      // Trigger a re-render only if the animation is still running
+      if (!isComplete) {
+        invalidate()
+      }
+    }
+  })
+
   function setGroupRef(group: Group | null) {
     if (!group) return
 
@@ -39,13 +70,11 @@ export default function RobotAnimator({
 
   function updateJoints(newJointValues: number[]) {
     jointValues.current = newJointValues
-    setSpring.start(Object.assign({}, jointValues.current) as any)
+    interpolatorRef.current?.setTarget(newJointValues)
   }
 
   function setRotation() {
-    const updatedJointValues = jointObjects.current.map((_, objectIndex) =>
-      (axisValues as any)[objectIndex].get(),
-    )
+    const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
 
     if (onRotationChanged) {
       onRotationChanged(jointObjects.current, updatedJointValues)
@@ -56,7 +85,7 @@ export default function RobotAnimator({
         const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
 
         object.rotation.y =
-          rotationSign * updatedJointValues[index]! + rotationOffset
+          rotationSign * (updatedJointValues[index] || 0) + rotationOffset
       }
     }
   }
@@ -70,19 +99,5 @@ export default function RobotAnimator({
     requestAnimationFrame(() => updateJoints(newJointValues))
   })
 
-  const [axisValues, setSpring] = useSpring(() => ({
-    ...Object.assign(
-      {},
-      rapidlyChangingMotionState.state.joint_position.joints,
-    ),
-    onChange: () => {
-      setRotation()
-      invalidate()
-    },
-    onResolve: () => {
-      setRotation()
-    },
-  }))
-
   return <group ref={setGroupRef}>{children}</group>
 }

package/src/components/robots/SupportedRobot.tsx

@@ -1,4 +1,4 @@
-import type { GroupProps } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
@@ -18,7 +18,7 @@ import { defaultGetModel } from "./robotModelLogic"
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: Array<DHParameter>
-} & GroupProps
+} & ThreeElements["group"]
 
 export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -28,7 +28,7 @@ export type SupportedRobotProps = {
   getModel?: (modelFromController: string) => string
   postModelRender?: () => void
   transparentColor?: string
-} & GroupProps
+} & ThreeElements["group"]
 
 export const SupportedRobot = externalizeComponent(
   ({

package/src/components/utils/converters.ts

@@ -20,4 +20,4 @@ export function tryStringifyJson(json: unknown): string | undefined {
   } catch {
     return undefined
   }
-}
+}