@wandelbots/wandelbots-js-react-components 2.26.0-pr.feature-update-to-react-19.361.ec4e097 → 2.26.0-pr.feature-update-to-react-19.361.edd4b6b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.26.0-pr.feature-update-to-react-19.361.ec4e097",
+  "version": "2.26.0-pr.feature-update-to-react-19.361.edd4b6b",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/robots/RobotAnimator.tsx

@@ -4,7 +4,7 @@ import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/nova-api/v1"
-import React, { useCallback, useEffect, useRef, useState } from "react"
+import React, { useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { collectJoints } from "./robotModelLogic"
@@ -25,56 +25,57 @@ export default function RobotAnimator({
   Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
   const jointObjects = useRef<Object3D[]>([])
-  const [isInitialized, setIsInitialized] = useState(false)
   const { invalidate } = useThree()
 
   function setGroupRef(group: Group | null) {
-    if (!group) {
-      setIsInitialized(false)
-      return
-    }
+    if (!group) return
 
     jointObjects.current = collectJoints(group)
 
-    // Only mark as initialized if we have valid joint objects
+    // Set initial position only if we have valid joint objects
     if (
       jointObjects.current.length > 0 &&
       jointObjects.current.every((obj) => obj != null)
     ) {
-      setIsInitialized(true)
-    } else {
-      setIsInitialized(false)
+      // Use requestAnimationFrame to ensure axisValues is ready
+      requestAnimationFrame(() => {
+        setRotation()
+        invalidate()
+      })
     }
   }
 
   function updateJoints(newJointValues: number[]) {
-    if (!isInitialized) return
-
     jointValues.current = newJointValues
     setSpring.start(Object.assign({}, jointValues.current) as any)
   }
 
-  // Initialize spring only after joints are ready
-  const [axisValues, setSpring] = useSpring(() => ({
-    ...Object.assign(
-      {},
-      rapidlyChangingMotionState.state.joint_position.joints,
-    ),
-    onChange: () => {
-      if (isInitialized) {
+  const [axisValues, setSpring] = useSpring(() => {
+    const currentJointValues =
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
+        (item) => item !== undefined,
+      )
+
+    return {
+      ...Object.assign({}, currentJointValues),
+      onChange: () => {
         setRotation()
         invalidate()
-      }
-    },
-    onResolve: () => {
-      if (isInitialized) {
+      },
+      onResolve: () => {
         setRotation()
-      }
-    },
-  }))
+      },
+    }
+  })
 
-  const setRotation = useCallback(() => {
-    if (!isInitialized) return
+  function setRotation() {
+    // Safety check to prevent race condition
+    if (
+      jointObjects.current.length === 0 ||
+      !jointObjects.current.every((obj) => obj != null)
+    ) {
+      return
+    }
 
     const updatedJointValues = jointObjects.current.map((_, objectIndex) =>
       (axisValues as any)[objectIndex].get(),
@@ -92,25 +93,40 @@ export default function RobotAnimator({
           rotationSign * updatedJointValues[index]! + rotationOffset
       }
     }
-  }, [isInitialized, axisValues, onRotationChanged, dhParameters])
-
-  // Effect to handle initial rotation when component becomes initialized
-  useEffect(() => {
-    if (isInitialized) {
-      setRotation()
-      invalidate()
-    }
-  }, [isInitialized, setRotation, invalidate])
+  }
 
   useAutorun(() => {
-    if (!isInitialized) return
-
     const newJointValues =
       rapidlyChangingMotionState.state.joint_position.joints.filter(
         (item) => item !== undefined,
       )
 
-    requestAnimationFrame(() => updateJoints(newJointValues))
+    requestAnimationFrame(() => {
+      // Check if spring values are significantly different from target values
+      const currentSpringValues = jointObjects.current.map(
+        (_, index) => (axisValues as any)[index]?.get() || 0,
+      )
+
+      const maxDifference = Math.max(
+        ...newJointValues.map((newValue, index) =>
+          Math.abs(newValue - (currentSpringValues[index] || 0)),
+        ),
+      )
+
+      // Be more aggressive about detecting "snap back" situations
+      // If difference is large (> 0.05 radians ~= 2.9 degrees), reset immediately
+      // This handles focus restoration and other cases where animation would be jarring
+      if (maxDifference > 0.05) {
+        jointValues.current = newJointValues
+        setSpring.set(Object.assign({}, jointValues.current) as any)
+        // Force immediate rotation update
+        setRotation()
+        invalidate()
+      } else {
+        // Normal smooth animation for small changes
+        updateJoints(newJointValues)
+      }
+    })
   })
 
   return <group ref={setGroupRef}>{children}</group>

package/dist/components/robots/RobotAnimator.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=RobotAnimator.test.d.ts.map

package/dist/components/robots/RobotAnimator.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RobotAnimator.test.d.ts","sourceRoot":"","sources":["../../../src/components/robots/RobotAnimator.test.tsx"],"names":[],"mappings":""}

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

@@ -1,349 +0,0 @@
-import { Canvas } from "@react-three/fiber"
-import { act, render, waitFor } from "@testing-library/react"
-import type {
-  DHParameter,
-  MotionGroupStateResponse,
-} from "@wandelbots/nova-api/v1"
-import React from "react"
-import { Object3D } from "three"
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import RobotAnimator from "./RobotAnimator"
-
-// Mock the dependencies
-vi.mock("../utils/hooks", () => ({
-  useAutorun: vi.fn(),
-}))
-
-vi.mock("./robotModelLogic", () => ({
-  collectJoints: vi.fn(),
-}))
-
-vi.mock("@react-spring/three", () => ({
-  Globals: {
-    assign: vi.fn(),
-  },
-  useSpring: vi.fn(),
-}))
-
-vi.mock("@react-three/fiber", async () => {
-  const actual = await vi.importActual("@react-three/fiber")
-  return {
-    ...actual,
-    useThree: () => ({
-      invalidate: vi.fn(),
-    }),
-  }
-})
-
-import { useSpring } from "@react-spring/three"
-import { useAutorun } from "../utils/hooks"
-import { collectJoints } from "./robotModelLogic"
-
-const mockUseAutorun = useAutorun as any
-const mockCollectJoints = collectJoints as any
-const mockUseSpring = useSpring as any
-
-describe("RobotAnimator", () => {
-  const mockMotionState: MotionGroupStateResponse = {
-    state: {
-      joint_position: {
-        joints: [0, 0.5, 1, 1.5, 2, 2.5],
-      },
-    },
-  } as any
-
-  const mockDhParameters: DHParameter[] = [
-    { theta: 0, reverse_rotation_direction: false },
-    { theta: 0.1, reverse_rotation_direction: true },
-    { theta: 0.2, reverse_rotation_direction: false },
-    { theta: 0.3, reverse_rotation_direction: true },
-    { theta: 0.4, reverse_rotation_direction: false },
-    { theta: 0.5, reverse_rotation_direction: true },
-  ]
-
-  let mockJointObjects: Object3D[]
-  let mockAxisValues: any
-  let mockSetSpring: any
-  let mockInvalidate: any
-  let mockSpringConfig: any
-  let mockAutorunCallback: any
-
-  beforeEach(() => {
-    // Create mock joint objects
-    mockJointObjects = Array.from({ length: 6 }, (_, i) => {
-      const obj = new Object3D()
-      obj.name = `Joint_J${i + 1}`
-      obj.rotation.y = 0
-      return obj
-    })
-
-    // Mock axis values object that acts like spring values
-    mockAxisValues = {}
-    for (let i = 0; i < 6; i++) {
-      mockAxisValues[i] = {
-        get: vi
-          .fn()
-          .mockReturnValue(mockMotionState.state.joint_position.joints[i]),
-      }
-    }
-
-    mockSetSpring = {
-      start: vi.fn(),
-    }
-
-    mockInvalidate = vi.fn()
-
-    // Mock spring config that will be returned by useSpring
-    mockSpringConfig = {
-      onChange: vi.fn(),
-      onResolve: vi.fn(),
-    }
-
-    // Mock collectJoints to return our mock joint objects
-    mockCollectJoints.mockReturnValue(mockJointObjects)
-
-    // Mock useSpring to return our mock values and accept a factory function
-    mockUseSpring.mockImplementation((factory: any) => {
-      const config = factory()
-      mockSpringConfig.onChange = config.onChange
-      mockSpringConfig.onResolve = config.onResolve
-      return [mockAxisValues, mockSetSpring]
-    })
-
-    // Mock useAutorun to store the callback
-    mockUseAutorun.mockImplementation((callback: any) => {
-      mockAutorunCallback = callback
-    })
-  })
-
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  const renderRobotAnimator = (
-    props: Partial<React.ComponentProps<typeof RobotAnimator>> = {},
-  ) => {
-    const defaultProps = {
-      rapidlyChangingMotionState: mockMotionState,
-      dhParameters: mockDhParameters,
-      children: <mesh />,
-    }
-
-    return render(
-      <Canvas>
-        <RobotAnimator {...defaultProps} {...props} />
-      </Canvas>,
-    )
-  }
-
-  it("should render without crashing", () => {
-    expect(() => renderRobotAnimator()).not.toThrow()
-  })
-
-  it("should initialize joint objects when group is set", async () => {
-    const { container } = renderRobotAnimator()
-
-    // Wait for the component to render and set up
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-  })
-
-  it("should call onRotationChanged when provided", async () => {
-    const mockOnRotationChanged = vi.fn()
-
-    renderRobotAnimator({ onRotationChanged: mockOnRotationChanged })
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    // Simulate spring onChange callback
-    await act(async () => {
-      if (mockSpringConfig.onChange) {
-        mockSpringConfig.onChange()
-      }
-    })
-
-    expect(mockOnRotationChanged).toHaveBeenCalledWith(
-      mockJointObjects,
-      expect.arrayContaining([0, 0.5, 1, 1.5, 2, 2.5]),
-    )
-  })
-
-  it("should update joint rotations when onRotationChanged is not provided", async () => {
-    renderRobotAnimator()
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    await act(async () => {
-      // Simulate spring animation callback
-      if (mockSpringConfig.onChange) {
-        mockSpringConfig.onChange()
-      }
-    })
-
-    // Check that joint rotations were updated according to DH parameters
-    mockJointObjects.forEach((joint, index) => {
-      const dhParam = mockDhParameters[index]
-      const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
-      const expectedRotation =
-        rotationSign * mockMotionState.state.joint_position.joints[index]! +
-        dhParam.theta!
-
-      expect(joint.rotation.y).toBe(expectedRotation)
-    })
-  })
-
-  it("should not update rotations when not initialized", async () => {
-    // Mock collectJoints to return empty array (not initialized)
-    mockCollectJoints.mockReturnValue([])
-
-    renderRobotAnimator()
-
-    await act(async () => {
-      // Simulate spring animation callback
-      if (mockSpringConfig.onChange) {
-        mockSpringConfig.onChange()
-      }
-    })
-
-    // Verify that joint rotations were not modified
-    mockJointObjects.forEach((joint) => {
-      expect(joint.rotation.y).toBe(0)
-    })
-  })
-
-  it("should handle spring updates correctly", async () => {
-    renderRobotAnimator()
-
-    const newValues = [1, 2, 3, 4, 5, 6]
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    await act(async () => {
-      // Simulate motion state update by calling the autorun callback
-      if (mockAutorunCallback) {
-        mockAutorunCallback()
-      }
-    })
-
-    expect(mockSetSpring.start).toHaveBeenCalledWith(
-      expect.objectContaining({
-        0: 0,
-        1: 0.5,
-        2: 1,
-        3: 1.5,
-        4: 2,
-        5: 2.5,
-      }),
-    )
-  })
-
-  it("should handle group reference being null", async () => {
-    renderRobotAnimator()
-
-    // This should not throw an error
-    await act(async () => {
-      // Component should handle null group reference gracefully
-    })
-
-    expect(mockCollectJoints).toHaveBeenCalled()
-  })
-
-  it("should call invalidate when updating rotations", async () => {
-    renderRobotAnimator()
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    await act(async () => {
-      // Simulate spring animation callback
-      if (mockSpringConfig.onChange) {
-        mockSpringConfig.onChange()
-      }
-    })
-
-    // Note: invalidate is called from useThree hook which is mocked
-    // The actual invalidate call would happen in the real component
-    expect(mockSpringConfig.onChange).toHaveBeenCalled()
-  })
-
-  it("should handle onResolve callback", async () => {
-    const mockOnRotationChanged = vi.fn()
-    renderRobotAnimator({ onRotationChanged: mockOnRotationChanged })
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    await act(async () => {
-      // Simulate spring onResolve callback
-      if (mockSpringConfig.onResolve) {
-        mockSpringConfig.onResolve()
-      }
-    })
-
-    expect(mockOnRotationChanged).toHaveBeenCalled()
-  })
-
-  it("should filter out undefined joint values", async () => {
-    const motionStateWithUndefined = {
-      state: {
-        joint_position: {
-          joints: [1, undefined, 3, undefined, 5, 6],
-        },
-      },
-    } as any
-
-    renderRobotAnimator({
-      rapidlyChangingMotionState: motionStateWithUndefined,
-    })
-
-    // Wait for initialization
-    await waitFor(() => {
-      expect(mockCollectJoints).toHaveBeenCalled()
-    })
-
-    await act(async () => {
-      if (mockAutorunCallback) {
-        mockAutorunCallback()
-      }
-    })
-
-    // Should call setSpring.start with filtered values
-    expect(mockSetSpring.start).toHaveBeenCalledWith(
-      expect.objectContaining({
-        0: 1,
-        1: 3,
-        2: 5,
-        3: 6,
-      }),
-    )
-  })
-
-  it("should handle empty joint objects gracefully", async () => {
-    mockCollectJoints.mockReturnValue([])
-
-    const { container } = renderRobotAnimator()
-
-    await act(async () => {
-      if (mockAutorunCallback) {
-        mockAutorunCallback()
-      }
-    })
-
-    // Should not throw and should not call setSpring.start
-    expect(mockSetSpring.start).not.toHaveBeenCalled()
-  })
-})