@wandelbots/wandelbots-js-react-components 1.35.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,12 @@
     "dev:build": "nodemon -V -w src -e '*' -x \"vite build && tsc --declaration --emitDeclarationOnly\"",
     "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": "npm run build",
+    "test": "test-storybook --url http://127.0.0.1:6006 --index-json --browsers chromium",
+    "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",
+    "ci:test:server": "http-server storybook-static --port 9009 --silent",
+    "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"
   },
@@ -43,55 +48,65 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.7",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-docs": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/types": "^8.2.9",
+    "@storybook/types": "^8.4.2",
     "@svgr/rollup": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.5",
-    "@types/three": "^0.168.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "nodemon": "^3.1.4",
-    "postcss": "^8.4.44",
+    "@types/react": "^18.3.12",
+    "@types/three": "^0.169.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "add": "^2.0.6",
+    "glob": "^11.0.0",
+    "http-server": "^14.1.1",
+    "jest-simple-dot-reporter": "^1.0.5",
+    "jest-summary-reporter": "^0.0.2",
+    "nodemon": "^3.1.7",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.47",
     "prettier-eslint": "^16.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.21.2",
+    "rollup": "^4.24.4",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-gltf": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "semantic-release": "^24.1.0",
-    "storybook": "^8.2.9",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.2",
     "storybook-dark-mode": "^4.0.2",
     "storybook-preset-inline-svg": "^1.0.1",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^2.0.5"
+    "ts-dedent": "^2.2.0",
+    "typescript": "^5.6.3",
+    "unplugin": "^1.15.0",
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^2.1.4",
+    "wait-on": "^8.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": ">=5",
+    "@mui/material": "^5",
     "@react-spring/three": ">=9",
     "@react-three/drei": ">=9",
     "@react-three/fiber": ">=8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "three": ">=0.168",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "three": ">=0.170",
     "three-stdlib": ">=2"
   },
   "peerDependenciesMeta": {
@@ -103,14 +118,14 @@
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
-    "@shikijs/monaco": "^1.16.1",
-    "@wandelbots/wandelbots-js": "^1.11.1",
+    "@shikijs/monaco": "^1.22.2",
+    "@wandelbots/wandelbots-js": "^1.11.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
-    "mobx": "^6.13.1",
+    "mobx": "^6.13.5",
     "mobx-react-lite": "^4.0.7",
-    "react-error-boundary": "^4.0.13",
-    "react-i18next": "^15.0.1",
-    "shiki": "^1.16.1"
+    "react-error-boundary": "^4.1.2",
+    "react-i18next": "^15.1.0",
+    "shiki": "^1.22.2"
   }
 }

package/src/components/jogging/JoggingOptions.tsx

@@ -25,6 +25,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
 
   return (
     <Box
+      component="div"
       sx={{
         display: "grid",
         gap: "16px",

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,8 +1,6 @@
 import { Stack } from "@mui/material"
-import {
-  MotionStreamConnection,
-  poseToWandelscriptString,
-} from "@wandelbots/wandelbots-js"
+import type { MotionStreamConnection } from "@wandelbots/wandelbots-js"
+import { poseToWandelscriptString } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
 import { useRef } from "react"
 import { CopyableText } from "../CopyableText"

package/src/components/robots/DHRobot.tsx

@@ -3,10 +3,6 @@ import type { DHParameter } from "@wandelbots/wandelbots-api-client"
 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"
 
@@ -85,16 +81,11 @@ export function DHRobot({
     })
   }
 
-  function jointCollector(rootObject: THREE.Object3D): RobotSceneJoint[] {
-    return getAllJointsByName(rootObject, "^group_[0-9]+$")
-  }
-
   return (
     <>
       <RobotAnimator
         rapidlyChangingMotionState={rapidlyChangingMotionState}
         dhParameters={dhParameters}
-        jointCollector={jointCollector}
         onRotationChanged={setRotation}
       >
         <group {...props} name="Scene">
@@ -108,8 +99,9 @@ export function DHRobot({
               rapidlyChangingMotionState.state.joint_position.joints[index] ??
                 0,
             )
+            const jointName = `dhrobot_J0${index}`
             return (
-              <group name={`group_${index}`} key={"group_" + index}>
+              <group name={jointName} key={jointName}>
                 <Line
                   name={CHILD_LINE}
                   points={[a, b]}

package/src/components/robots/GenericRobot.tsx

@@ -1,25 +1,46 @@
 import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { Mesh } from "three"
+import type { GroupProps } from "@react-three/fiber"
+import React, { useCallback } from "react"
+import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
-import type { RobotModelProps } from "./types"
+import { isFlange, parseRobotModel } from "./robotModelLogic"
+
+export type RobotModelProps = {
+  modelURL: string
+  /**
+   * Called after a robot model has been loaded and
+   * rendered into the threejs scene
+   */
+  postModelRender?: () => void
+  flangeRef?: React.Ref<Group>
+} & GroupProps
 
 function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
 }
 
-function isFlange(node: Object3D): boolean {
-  return node.name.endsWith("_FLG")
-}
-
 export function GenericRobot({
   modelURL,
   flangeRef,
+  postModelRender,
   ...props
 }: RobotModelProps) {
-  const gltf = useGLTF(modelURL)
+  const { gltf } = parseRobotModel(
+    useGLTF(modelURL),
+    modelURL.split("/").pop() || modelURL,
+  )
+
+  const groupRef: React.RefCallback<Group> = useCallback(
+    (group) => {
+      if (group && postModelRender) {
+        postModelRender()
+      }
+    },
+    [modelURL],
+  )
 
-  const renderNode = (node: Object3D): React.ReactNode => {
+  function renderNode(node: Object3D): React.ReactNode {
     if (isMesh(node)) {
       return (
         <mesh
@@ -47,7 +68,7 @@ export function GenericRobot({
   }
 
   return (
-    <group {...props} dispose={null}>
+    <group {...props} dispose={null} ref={groupRef}>
       {renderNode(gltf.scene)}
     </group>
   )

package/src/components/robots/Robot.tsx

@@ -2,7 +2,8 @@ import { type GroupProps } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
 import type { Group } from "three"
-import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
+import { SupportedRobot } from "./SupportedRobot"
+import { defaultGetModel } from "./robotModelLogic"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup

package/src/components/robots/RobotAnimator.tsx

@@ -5,39 +5,32 @@ import type {
   MotionGroupStateResponse,
 } from "@wandelbots/wandelbots-api-client"
 import React, { useRef } from "react"
-import type * as THREE from "three"
+import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
-import {
-  getAllJointsByName,
-  type RobotSceneJoint,
-} from "../utils/robotTreeQuery"
+import { collectJoints } from "./robotModelLogic"
 
 type RobotAnimatorProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: DHParameter[]
-  onRotationChanged?: (joints: THREE.Object3D[], jointValues: number[]) => void
-  jointCollector?: (rootObject: THREE.Object3D) => RobotSceneJoint[]
+  onRotationChanged?: (joints: Object3D[], jointValues: number[]) => void
   children: React.ReactNode
 }
 
 export default function RobotAnimator({
   rapidlyChangingMotionState,
   dhParameters,
-  jointCollector,
   onRotationChanged,
   children,
 }: RobotAnimatorProps) {
   Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
-  const jointObjects = useRef<THREE.Object3D[]>([])
+  const jointObjects = useRef<Object3D[]>([])
   const { invalidate } = useThree()
 
-  function setGroupRef(group: THREE.Group | null) {
+  function setGroupRef(group: Group | null) {
     if (!group) return
 
-    jointObjects.current = jointCollector
-      ? jointCollector(group)
-      : getAllJointsByName(group)
+    jointObjects.current = collectJoints(group)
 
     // Set initial position
     setRotation()

package/src/components/robots/SupportedRobot.tsx

@@ -1,20 +1,19 @@
-import { Suspense, useCallback, useEffect, useRef } from "react"
-
-import { version } from "../../../package.json"
-
 import type { GroupProps } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/wandelbots-api-client"
+import { Suspense, useCallback, useEffect, useState } from "react"
 import { DHRobot } from "./DHRobot"
 
 import { ErrorBoundary } from "react-error-boundary"
-import * as THREE from "three"
+import type * as THREE from "three"
 import { externalizeComponent } from "../../externalizeComponent"
 import ConsoleFilter from "../ConsoleFilter"
 import { GenericRobot } from "./GenericRobot"
 import RobotAnimator from "./RobotAnimator"
+import { applyGhostStyle, removeGhostStyle } from "./ghostStyle"
+import { defaultGetModel } from "./robotModelLogic"
 
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -25,19 +24,12 @@ export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   modelFromController: string
   dhParameters: DHParameter[]
-  getModel?: (modelFromController: string) => string
   isGhost?: boolean
   flangeRef?: React.Ref<THREE.Group>
+  getModel?: (modelFromController: string) => string
+  postModelRender?: () => void
 } & GroupProps
 
-export function defaultGetModel(modelFromController: string): string {
-  let useVersion = version
-  if (version.startsWith("0.")) {
-    useVersion = ""
-  }
-  return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${useVersion ? `@${useVersion}` : ""}/public/models/${modelFromController}.glb`
-}
-
 export const SupportedRobot = externalizeComponent(
   ({
     rapidlyChangingMotionState,
@@ -46,115 +38,46 @@ export const SupportedRobot = externalizeComponent(
     getModel = defaultGetModel,
     isGhost = false,
     flangeRef,
+    postModelRender,
     ...props
   }: SupportedRobotProps) => {
-    const robotRef = useRef<THREE.Group>()
-
-    const setRobotRef = useCallback(
-      (instance: THREE.Group | null) => {
-        if (!instance) return
-        robotRef.current = instance
-
-        if (isGhost) applyGhostStyle()
-      },
-      [isGhost],
-    )
-
-    const applyGhostStyle = () => {
-      if (!robotRef.current || robotRef.current.userData.isGhost) return
-
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh) {
-          if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = true
-          }
-
-          // Create a clone of the mesh
-          const depth = obj.clone()
-          const ghost = obj.clone()
-
-          depth.material = new THREE.MeshStandardMaterial({
-            depthTest: true,
-            depthWrite: true,
-            colorWrite: false,
-            polygonOffset: true,
-            polygonOffsetFactor: 1,
-          })
-          depth.userData.isGhost = true
-
-          // Set the material for the ghost mesh
-          ghost.material = new THREE.MeshStandardMaterial({
-            color: "#D91433",
-            opacity: 0.3,
-            depthTest: true,
-            depthWrite: false,
-            transparent: true,
-            polygonOffset: true,
-            polygonOffsetFactor: -1,
-          })
-          ghost.userData.isGhost = true
+    const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
 
-          if (obj.parent) {
-            obj.parent.add(depth)
-            obj.parent.add(ghost)
-          }
-        }
-      })
-
-      robotRef.current.userData.isGhost = true
-    }
-
-    const removeGhostStyle = () => {
-      if (!robotRef.current || !robotRef.current.userData.isGhost) return
-
-      const objectsToRemove: THREE.Object3D[] = []
-
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh) {
-          if (obj.userData?.isGhost) {
-            objectsToRemove.push(obj)
-          } else if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = true
-          }
-        }
-      })
-
-      objectsToRemove.forEach((obj) => {
-        if (obj.parent) {
-          obj.parent.remove(obj)
-        }
-      })
-
-      robotRef.current.userData.isGhost = true
-    }
+    const setRobotRef = useCallback((instance: THREE.Group | null) => {
+      setRobotGroup(instance)
+    }, [])
 
     useEffect(() => {
+      if (!robotGroup) return
+
       if (isGhost) {
-        applyGhostStyle()
+        applyGhostStyle(robotGroup)
       } else {
-        removeGhostStyle()
+        removeGhostStyle(robotGroup)
       }
-    }, [isGhost])
+    }, [robotGroup, isGhost])
+
+    const dhrobot = (
+      <DHRobot
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        dhParameters={dhParameters}
+        {...props}
+      />
+    )
 
     return (
       <ErrorBoundary
-        fallback={
-          <DHRobot
-            rapidlyChangingMotionState={rapidlyChangingMotionState}
-            dhParameters={dhParameters}
-            {...props}
-          />
-        }
-      >
-        <Suspense
-          fallback={
-            <DHRobot
-              rapidlyChangingMotionState={rapidlyChangingMotionState}
-              dhParameters={dhParameters}
-              {...props}
-            />
+        fallback={dhrobot}
+        onError={(err) => {
+          if (err.message.includes("404: Not Found")) {
+            // Missing model; show the fallback for now
+            console.error(err)
+          } else {
+            throw err
           }
-        >
+        }}
+      >
+        <Suspense fallback={dhrobot}>
           <group ref={setRobotRef}>
             <RobotAnimator
               rapidlyChangingMotionState={rapidlyChangingMotionState}
@@ -162,6 +85,7 @@ export const SupportedRobot = externalizeComponent(
             >
               <GenericRobot
                 modelURL={getModel(modelFromController)}
+                postModelRender={postModelRender}
                 flangeRef={flangeRef}
                 {...props}
               />

package/src/components/robots/ghostStyle.ts

@@ -0,0 +1,70 @@
+import type { Group, Object3D } from "three"
+import { Material, Mesh, MeshStandardMaterial } from "three"
+
+export const applyGhostStyle = (robot: Group) => {
+  if (robot.userData.isGhost) return
+
+  robot.traverse((obj) => {
+    if (obj instanceof Mesh) {
+      if (obj.material instanceof Material) {
+        obj.material.colorWrite = true
+      }
+
+      // Create a clone of the mesh
+      const depth = obj.clone()
+      const ghost = obj.clone()
+
+      depth.material = new MeshStandardMaterial({
+        depthTest: true,
+        depthWrite: true,
+        colorWrite: false,
+        polygonOffset: true,
+        polygonOffsetFactor: 1,
+      })
+      depth.userData.isGhost = true
+
+      // Set the material for the ghost mesh
+      ghost.material = new MeshStandardMaterial({
+        color: "#D91433",
+        opacity: 0.3,
+        depthTest: true,
+        depthWrite: false,
+        transparent: true,
+        polygonOffset: true,
+        polygonOffsetFactor: -1,
+      })
+      ghost.userData.isGhost = true
+
+      if (obj.parent) {
+        obj.parent.add(depth)
+        obj.parent.add(ghost)
+      }
+    }
+  })
+
+  robot.userData.isGhost = true
+}
+
+export const removeGhostStyle = (robot: Group) => {
+  if (!robot.userData.isGhost) return
+
+  const objectsToRemove: Object3D[] = []
+
+  robot.traverse((obj) => {
+    if (obj instanceof Mesh) {
+      if (obj.userData?.isGhost) {
+        objectsToRemove.push(obj)
+      } else if (obj.material instanceof Material) {
+        obj.material.colorWrite = true
+      }
+    }
+  })
+
+  objectsToRemove.forEach((obj) => {
+    if (obj.parent) {
+      obj.parent.remove(obj)
+    }
+  })
+
+  robot.userData.isGhost = true
+}

package/src/components/robots/robotModelLogic.ts

@@ -0,0 +1,90 @@
+import type { Object3D } from "three"
+import type { GLTF } from "three-stdlib"
+import { version } from "../../../package.json"
+
+export function defaultGetModel(modelFromController: string): string {
+  let useVersion = version
+  if (version.startsWith("0.")) {
+    useVersion = ""
+  }
+  return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${useVersion ? `@${useVersion}` : ""}/public/models/${modelFromController}.glb`
+}
+
+/**
+ * Finds all the joint groups in a GLTF tree, as identified
+ * by the _Jxx name ending convention.
+ */
+export function collectJoints(rootObject: Object3D): Object3D[] {
+  function getAllObjects(root: Object3D): Object3D[] {
+    if (root.children.length === 0) {
+      return [root]
+    }
+    return [root, ...root.children.flatMap((child) => getAllObjects(child))]
+  }
+
+  return getAllObjects(rootObject).filter((o) => isJoint(o))
+}
+
+/**
+ * Checks if a specified threejs object represents the flange of a
+ * robot, based on the _FLG name ending convention.
+ */
+export function isFlange(node: Object3D) {
+  return node.name.endsWith("_FLG")
+}
+
+/**
+ * Checks if a specified threejs object represents a joint of a
+ * robot, based on the _Jxx name ending convention.
+ */
+export function isJoint(node: Object3D) {
+  return /_J[0-9]+$/.test(node.name)
+}
+
+/**
+ * Validates that the loaded GLTF file has six joints and a flange group.
+ */
+export function parseRobotModel(gltf: GLTF, filename: string): { gltf: GLTF } {
+  let flange: Object3D | undefined
+  const joints: Object3D[] = []
+
+  function isSixJoints(
+    joints: Object3D[],
+  ): joints is [Object3D, Object3D, Object3D, Object3D, Object3D, Object3D] {
+    return joints.length === 6
+  }
+
+  function parseNode(node: Object3D) {
+    if (isFlange(node)) {
+      if (flange) {
+        throw Error(
+          `Found multiple flange groups in robot model ${filename}; first ${flange.name} then ${node.name}. Only one _FLG group is allowed.`,
+        )
+      }
+
+      flange = node
+    }
+
+    if (isJoint(node)) {
+      joints.push(node)
+    }
+
+    node.children.map(parseNode)
+  }
+
+  parseNode(gltf.scene)
+
+  if (!isSixJoints(joints)) {
+    throw Error(
+      `Expected to find 6 joint groups in robot model ${filename} with names _J01, _J02 etc, found ${joints.length}. Only 6-joint robot models are currently supported.`,
+    )
+  }
+
+  if (!flange) {
+    throw Error(
+      `No flange group found in robot model ${filename}. Flange must be identified with a name ending in _FLG.`,
+    )
+  }
+
+  return { gltf }
+}

package/src/index.ts

@@ -10,6 +10,7 @@ export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
+export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedRobot"
 export * from "./components/SelectableFab"
 export * from "./components/utils/hooks"