@wandelbots/wandelbots-js-react-components 3.7.2 → 3.7.4-pr.feat-add-linear-axis-support.509.b65ac1c

package/dist/wandelscript.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-Dj7TBCkF.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-D6_vS5Uk.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
 //# sourceMappingURL=wandelscript.cjs.js.map

package/dist/wandelscript.es.js

@@ -1,4 +1,4 @@
-import { W as t } from "./WandelscriptEditor-DnJvITTA.js";
+import { W as t } from "./WandelscriptEditor-7eN-Yw7m.js";
 export {
   t as WandelscriptEditor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "3.7.2",
+  "version": "3.7.4-pr.feat-add-linear-axis-support.509.b65ac1c",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -50,7 +50,8 @@
     "ci:test:runner": "wait-on tcp:127.0.0.1:9009 && test-storybook --url http://127.0.0.1:9009 --index-json --browsers chromium",
     "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build-storybook": "storybook build",
-    "prepare": "husky || true"
+    "prepare": "husky || true",
+    "td": "tsx scripts/td-wrapper.ts"
   },
   "repository": {
     "type": "git",
@@ -63,6 +64,10 @@
   ],
   "author": "Wandelbots",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.14.0",
+    "npm": ">=8.0.0"
+  },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -88,7 +93,7 @@
     "@types/react": "^19.1.8",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^3.4.1",
+    "@wandelbots/nova-js": "^3.5.0",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",
@@ -119,6 +124,7 @@
     "three": "^0.182.0",
     "three-stdlib": "^2.35.14",
     "ts-dedent": "^2.2.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.8.2",
     "unplugin": "^1.15.0",
     "vite": "^6.2.0",
@@ -170,12 +176,16 @@
   "dependencies": {
     "@mui/x-charts": "^8.27.0",
     "@mui/x-data-grid": "^8.27.0",
-    "i18next-browser-languagedetector": "^8.0.4",
-    "lodash-es": "^4.17.23",
+    "@wandelbots/nova-js": "3.5.1",
+    "axios": "^1.13.2",
+    "dotenv": "^17.2.3",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
     "react-error-boundary": "^6.0.3",
-    "react-i18next": "^16.5.2"
+    "react-i18next": "^16.5.2",
+    "username": "^7.0.0"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/3d.ts

@@ -6,10 +6,11 @@ export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/RobotCard"
 export * from "./components/robots/AxisConfig"
 export {
-  MANUFACTURER_HOME_CONFIGS,
   extractManufacturer,
-  getDefaultHomeConfig,
+  getDefaultHomeConfig, MANUFACTURER_HOME_CONFIGS
 } from "./components/robots/manufacturerHomePositions"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
+export * from "./components/robots/SupportedLinearAxis"
 export * from "./components/robots/SupportedRobot"
+

package/src/components/RobotCard.tsx

@@ -52,7 +52,7 @@ export interface RobotCardProps {
     flangeRef?: React.Ref<Group>
     postModelRender?: () => void
     transparentColor?: string
-    getModel?: (modelFromController: string) => string
+    getModel?: (modelFromController: string) => Promise<string>
   }>
   /** Custom component to render in the content area (optional) */
   customContentComponent?: React.ComponentType<Record<string, unknown>>

package/src/components/robots/DHLinearAxis.tsx

@@ -0,0 +1,128 @@
+import { Line } from "@react-three/drei"
+import type { DHParameter } from "@wandelbots/nova-js/v2"
+import React, { useRef } from "react"
+import type * as THREE from "three"
+import { Matrix4, Quaternion, Vector3 } from "three"
+import LinearAxisAnimator from "./LinearAxisAnimator"
+import type { DHLinearAxisProps } from "./SupportedLinearAxis"
+
+export function DHLinearAxis({
+  rapidlyChangingMotionState,
+  dhParameters,
+  ...props
+}: DHLinearAxisProps) {
+  // reused in every update
+  const accumulatedMatrix = new Matrix4()
+
+  const tcpMeshRef = useRef<THREE.Mesh | null>(null)
+  const tcpLineRef = useRef<any>(null)
+
+  // Calculate initial TCP position
+  function calculateTcpPosition(jointValues: number[]): Vector3 {
+    const tempMatrix = new Matrix4()
+    
+    for (let i = 0; i < dhParameters.length; i++) {
+      const param = dhParameters[i]
+      const jointValue = jointValues[i] ?? 0
+      
+      const matrix = new Matrix4()
+        .makeRotationY(param.theta!) // Base rotation (if any)
+        .multiply(
+          new Matrix4().makeTranslation(
+            param.a! / 1000,
+            (param.d! + jointValue * (param.reverse_rotation_direction ? -1 : 1)) / 1000,
+            0
+          )
+        ) // Translate along X by a, and Y by d + joint_position
+        .multiply(new Matrix4().makeRotationX(param.alpha!)) // Rotate around X
+      
+      tempMatrix.multiply(matrix)
+    }
+    
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    tempMatrix.decompose(position, quaternion, scale)
+    return position
+  }
+
+  // Calculate initial TCP position for rendering
+  const initialTcpPosition = calculateTcpPosition(rapidlyChangingMotionState.joint_position)
+
+  function setTranslation(joints: THREE.Object3D[], jointValues: number[]) {
+    accumulatedMatrix.identity()
+
+    let tcpPosition = new Vector3()
+
+    // Process all joints based on dhParameters length, not joints array
+    // Since we're using DHLinearAxis directly without a model, we don't have joint objects
+    for (let jointIndex = 0; jointIndex < dhParameters.length; jointIndex++) {
+      const jointValue = jointValues[jointIndex] ?? 0
+      const param = dhParameters[jointIndex]
+      
+      // Calculate and accumulate transformation
+      const matrix = new Matrix4()
+        .makeRotationY(param.theta!) // Base rotation (if any)
+        .multiply(
+          new Matrix4().makeTranslation(
+            param.a! / 1000,
+            (param.d! + jointValue * (param.reverse_rotation_direction ? -1 : 1)) / 1000,
+            0
+          )
+        )
+        .multiply(new Matrix4().makeRotationX(param.alpha!))
+      
+      accumulatedMatrix.multiply(matrix)
+    }
+
+    // Get final TCP position from accumulated matrix
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    tcpPosition = position
+
+    // Update TCP marker
+    if (tcpMeshRef.current) {
+      tcpMeshRef.current.position.set(tcpPosition.x, tcpPosition.y, tcpPosition.z)
+    }
+
+    // Update TCP line
+    if (tcpLineRef.current) {
+      const lineGeometry = tcpLineRef.current.geometry
+      if (lineGeometry && lineGeometry.setPositions) {
+        lineGeometry.setPositions([0, 0, 0, tcpPosition.x, tcpPosition.y, tcpPosition.z])
+      }
+    }
+  }
+
+  return (
+    <>
+      <LinearAxisAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        dhParameters={dhParameters}
+        onTranslationChanged={setTranslation}
+      >
+        <group {...props} name="Scene">
+          {/* Base (origin) - Green sphere representing initial previous position */}
+          <mesh name="Base" position={[0, 0, 0]}>
+            <sphereGeometry args={[0.02, 32, 32]} />
+            <meshStandardMaterial color={"green"} depthTest={true} />
+          </mesh>
+          {/* Line from Base to TCP */}
+          <Line
+            ref={tcpLineRef}
+            points={[new Vector3(0, 0, 0), initialTcpPosition]}
+            color={"White"}
+            lineWidth={5}
+          />
+          {/* TCP (Tool Center Point) - Red sphere that shows final position */}
+          <mesh ref={tcpMeshRef} name="TCP" position={initialTcpPosition}>
+            <sphereGeometry args={[0.025, 32, 32]} />
+            <meshStandardMaterial color={"red"} depthTest={true} />
+          </mesh>
+        </group>
+      </LinearAxisAnimator>
+    </>
+  )
+}

package/src/components/robots/GenericRobot.tsx

@@ -1,12 +1,12 @@
 import { useGLTF } from "@react-three/drei"
 import type { ThreeElements } from "@react-three/fiber"
-import React, { useCallback } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
 import { isFlange, parseRobotModel } from "./robotModelLogic"
 
 export type RobotModelProps = {
-  modelURL: string
+  modelURL: string | Promise<string>
   /**
    * Called after a robot model has been loaded and
    * rendered into the threejs scene
@@ -19,16 +19,25 @@ function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
 }
 
-export function GenericRobot({
-  modelURL,
-  flangeRef,
-  postModelRender,
-  ...props
-}: RobotModelProps) {
-  const { gltf } = parseRobotModel(
-    useGLTF(modelURL),
-    modelURL.split("/").pop() || modelURL,
-  )
+// Separate component that only renders when we have a valid URL
+function LoadedRobotModel({ 
+  url, 
+  flangeRef, 
+  postModelRender, 
+  ...props 
+}: { 
+  url: string
+  flangeRef?: React.Ref<Group>
+  postModelRender?: () => void
+} & ThreeElements["group"]) {
+  const gltfResult = useGLTF(url)
+  let gltf
+  try {
+    const parsed = parseRobotModel(gltfResult, 'robot.glb')
+    gltf = parsed.gltf
+  } catch (err) {
+    throw err;
+  }
 
   const groupRef: React.RefCallback<Group> = useCallback(
     (group) => {
@@ -36,33 +45,45 @@ export function GenericRobot({
         postModelRender()
       }
     },
-    [modelURL],
+    [postModelRender],
   )
 
   function renderNode(node: Object3D): React.ReactNode {
-    if (isMesh(node)) {
-      return (
-        <mesh
-          name={node.name}
-          key={node.uuid}
-          geometry={node.geometry}
-          material={node.material}
-          position={node.position}
-          rotation={node.rotation}
-        />
-      )
-    } else {
-      return (
-        <group
-          name={node.name}
-          key={node.uuid}
-          position={node.position}
-          rotation={node.rotation}
-          ref={isFlange(node) ? flangeRef : undefined}
-        >
-          {node.children.map(renderNode)}
-        </group>
-      )
+    try {
+      if (isMesh(node)) {
+        // Defensive: only render mesh if geometry exists
+        if ((node as Mesh).geometry) {
+          return (
+            <mesh
+              name={node.name}
+              key={node.uuid}
+              geometry={(node as Mesh).geometry}
+              material={(node as Mesh).material}
+              position={node.position}
+              rotation={node.rotation}
+            />
+          )
+        }
+        // Fallback to empty group if geometry is missing
+        return (
+          <group name={node.name} key={node.uuid} position={node.position} rotation={node.rotation} />
+        )
+      } else {
+        return (
+          <group
+            name={node.name}
+            key={node.uuid}
+            position={node.position}
+            rotation={node.rotation}
+            ref={isFlange(node) ? flangeRef : undefined}
+          >
+            {node.children.map(renderNode)}
+          </group>
+        )
+      }
+    } catch (e) {
+      console.warn('Error rendering node', node.name, e)
+      return null
     }
   }
 
@@ -72,3 +93,43 @@ export function GenericRobot({
     </group>
   )
 }
+
+export function GenericRobot({
+  modelURL,
+  flangeRef,
+  postModelRender,
+  ...props
+}: RobotModelProps) {
+  const [resolvedURL, setResolvedURL] = useState<string | null>(null)
+  
+  useEffect(() => {
+    const resolveURL = async () => {
+      try {
+        if (typeof modelURL === 'string') {
+          setResolvedURL(modelURL)
+        } else {
+          const url = await modelURL
+          setResolvedURL(url)
+        }
+      } catch (error) {
+        console.error('Failed to resolve model URL:', error)
+      }
+    }
+    
+    resolveURL()
+  }, [modelURL])
+
+  // Don't render until we have a resolved URL
+  if (!resolvedURL) {
+    return null // Loading state
+  }
+  
+  return (
+    <LoadedRobotModel 
+      url={resolvedURL}
+      flangeRef={flangeRef}
+      postModelRender={postModelRender}
+      {...props}
+    />
+  )
+}

package/src/components/robots/LinearAxis.tsx

@@ -0,0 +1,73 @@
+import type { ThreeElements } from "@react-three/fiber"
+
+import type { Group } from "three"
+import type { ConnectedMotionGroup } from "../../lib/ConnectedMotionGroup"
+import { DHLinearAxis } from "./DHLinearAxis"
+import { defaultGetModel } from "./robotModelLogic"
+import { SupportedLinearAxis } from "./SupportedLinearAxis"
+
+export type LinearAxisProps = {
+  connectedMotionGroup: ConnectedMotionGroup
+  getModel?: (modelFromController: string) => Promise<string>
+  flangeRef?: React.Ref<Group>
+  transparentColor?: string
+  postModelRender?: () => void
+} & ThreeElements["group"]
+
+/**
+ * The LinearAxis component is a wrapper that renders SupportedLinearAxis if a model is available,
+ * otherwise falls back to DHLinearAxis for usage with @wandelbots/nova-js ConnectedMotionGroup object.
+ *
+ * @param {LinearAxisProps} props - The properties for the LinearAxis 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 underlying component.
+ *
+ * @returns {JSX.Element} The rendered SupportedLinearAxis or DHLinearAxis component.
+ */
+export function LinearAxis({
+  connectedMotionGroup,
+  getModel = defaultGetModel,
+  flangeRef,
+  transparentColor,
+  postModelRender,
+  ...props
+}: LinearAxisProps) {
+  if (!connectedMotionGroup.dhParameters) {
+    return null
+  }
+
+  const modelFromController = connectedMotionGroup.modelFromController || ""
+  const hasModel = modelFromController && getModel(modelFromController)
+
+  // Use SupportedLinearAxis if model is available, otherwise fall back to DHLinearAxis
+  if (hasModel) {
+    return (
+      <SupportedLinearAxis
+        rapidlyChangingMotionState={
+          connectedMotionGroup.rapidlyChangingMotionState
+        }
+        modelFromController={modelFromController}
+        dhParameters={connectedMotionGroup.dhParameters}
+        getModel={getModel}
+        flangeRef={flangeRef}
+        transparentColor={transparentColor}
+        postModelRender={postModelRender}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <DHLinearAxis
+      rapidlyChangingMotionState={
+        connectedMotionGroup.rapidlyChangingMotionState
+      }
+      dhParameters={connectedMotionGroup.dhParameters}
+      {...props}
+    />
+  )
+}
+
+export { defaultGetModel }
+

package/src/components/robots/LinearAxisAnimator.tsx

@@ -0,0 +1,115 @@
+import { useFrame, useThree } from "@react-three/fiber"
+import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
+import React, { useCallback, 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 LinearAxisAnimatorProps = {
+  rapidlyChangingMotionState: MotionGroupState
+  dhParameters: DHParameter[]
+  onTranslationChanged?: (joints: Object3D[], jointValues: number[]) => void
+  children: React.ReactNode
+}
+
+export default function LinearAxisAnimator({
+  rapidlyChangingMotionState,
+  dhParameters,
+  onTranslationChanged,
+  children,
+}: LinearAxisAnimatorProps) {
+  const jointValues = useRef<number[]>([])
+  const jointObjects = useRef<Object3D[]>([])
+  const interpolatorRef = useRef<ValueInterpolator | null>(null)
+  const { invalidate } = useThree()
+
+  // Initialize interpolator
+  useEffect(() => {
+    const initialJointValues = rapidlyChangingMotionState.joint_position.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)
+      setTranslation()
+
+      // Trigger a re-render only if the animation is still running
+      if (!isComplete) {
+        invalidate()
+      }
+    }
+  })
+
+  function setGroupRef(group: Group | null) {
+    if (!group) return
+
+    jointObjects.current = collectJoints(group)
+
+    // Set initial position
+    setTranslation()
+    invalidate()
+  }
+
+  function setTranslation() {
+    const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
+
+    if (onTranslationChanged) {
+      onTranslationChanged(jointObjects.current, updatedJointValues)
+    } else {
+      // For linear axes, we apply translation instead of rotation
+      for (const [index, object] of jointObjects.current.entries()) {
+        const dhParam = dhParameters[index]
+        const translationSign = dhParam.reverse_rotation_direction ? -1 : 1
+
+        // Apply linear translation along Y axis
+        // Convert from millimeters to meters
+        object.position.y =
+          (translationSign * (updatedJointValues[index] || 0)) / 1000
+      }
+    }
+  }
+
+  const updateJoints = useCallback(() => {
+    const newJointValues = rapidlyChangingMotionState.joint_position.filter(
+      (item) => item !== undefined,
+    )
+
+    requestAnimationFrame(() => {
+      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(() => {
+    updateJoints()
+  }, [rapidlyChangingMotionState, updateJoints])
+
+  /**
+   * As some consumer applications (eg. storybook) deliver
+   * mobx observable for rapidlyChangingMotionState, we need to
+   * register the watcher to get the newest value updates
+   */
+  useAutorun(() => {
+    updateJoints()
+  })
+
+  return <group ref={setGroupRef}>{children}</group>
+}

package/src/components/robots/Robot.tsx

@@ -7,7 +7,7 @@ import { SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
-  getModel?: (modelFromController: string) => string
+  getModel?: (modelFromController: string) => Promise<string>
   flangeRef?: React.Ref<Group>
   transparentColor?: string
   postModelRender?: () => void
@@ -51,3 +51,5 @@ export function Robot({
     />
   )
 }
+
+export { defaultGetModel }

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

@@ -1,4 +1,4 @@
-import type { DHParameter, MotionGroupState } from "@wandelbots/nova-api/v2"
+import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
 import { describe, expect, it, vi } from "vitest"
 import RobotAnimator from "./RobotAnimator"