@wandelbots/wandelbots-js-react-components 2.10.3 → 2.11.0-pr.feat-collision-scene.263.cb851a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.10.3",
+  "version": "2.11.0-pr.feat-collision-scene.263.cb851a8",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -55,16 +55,16 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/csf-tools": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
+    "@storybook/addon-docs": "^8.6.2",
+    "@storybook/addon-essentials": "^8.6.2",
+    "@storybook/addon-interactions": "^8.6.2",
+    "@storybook/blocks": "^8.6.2",
+    "@storybook/react": "^8.6.2",
+    "@storybook/csf-tools": "^8.6.2",
+    "@storybook/react-vite": "^8.6.2",
+    "@storybook/test": "^8.6.2",
     "@storybook/test-runner": "^0.21.3",
-    "@storybook/types": "^8.5.8",
+    "@storybook/types": "^8.6.2",
     "@svgr/rollup": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.12",
@@ -90,7 +90,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.2",
     "storybook-dark-mode": "^4.0.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "ts-dedent": "^2.2.0",
@@ -100,10 +100,9 @@
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.7",
     "wait-on": "^8.0.2",
-    "@wandelbots/wandelbots-js": "^1.16.0"
+    "@wandelbots/wandelbots-js": "^1.17.1"
   },
   "peerDependencies": {
-    "@wandelbots/wandelbots-js": "^1.12.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^6",
@@ -113,7 +112,7 @@
     "@react-three/fiber": "~8.18.0",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "three": ">=0.173",
+    "three": ">=0.174",
     "three-stdlib": ">=2"
   },
   "peerDependenciesMeta": {
@@ -123,13 +122,13 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@shikijs/monaco": "^3.0.0",
+    "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "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",
-    "shiki": "^3.0.0"
+    "shiki": "^3.1.0"
   }
 }

package/src/components/3d-viewport/collider/ColliderCollection.tsx

@@ -0,0 +1,34 @@
+import type { GroupProps } from "@react-three/fiber"
+import type { Collider } from "@wandelbots/wandelbots-js"
+import ColliderElement from "./ColliderElement"
+
+export type MeshChildrenProvider = (
+  key: string,
+  collider: Collider,
+) => React.ReactNode
+
+type ColliderCollectionProps = {
+  name?: string
+  colliders: Record<string, Collider>
+  meshChildrenProvider: MeshChildrenProvider
+} & GroupProps
+
+export default function ColliderCollection({
+  name,
+  colliders,
+  meshChildrenProvider,
+  ...props
+}: ColliderCollectionProps) {
+  return (
+    <group name={name} {...props}>
+      {Object.entries(colliders).map(([colliderKey, collider]) => (
+        <ColliderElement
+          key={colliderKey}
+          name={colliderKey}
+          collider={collider}
+          children={meshChildrenProvider(colliderKey, collider)}
+        />
+      ))}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/ColliderElement.tsx

@@ -0,0 +1,32 @@
+import type { Collider } from "@wandelbots/wandelbots-js"
+import type React from "react"
+import * as THREE from "three"
+import { colliderShapeToBufferGeometry } from "./colliderShapeToBufferGeometry"
+
+type ColliderElementProps = {
+  name?: string
+  collider: Collider
+  children?: React.ReactNode
+}
+
+export default function ColliderElement({
+  name,
+  collider,
+  children,
+}: ColliderElementProps) {
+  const position = collider.pose?.position ?? [0, 0, 0]
+  const rotation = collider.pose?.orientation ?? [0, 0, 0]
+  if (collider.margin) {
+    console.warn(`${name} margin is not supported`)
+  }
+  return (
+    <mesh
+      name={name}
+      position={new THREE.Vector3(position[0], position[1], position[2]).divideScalar(1000)}
+      rotation={new THREE.Euler(rotation[0], rotation[1], rotation[2], "XYZ")}
+      geometry={colliderShapeToBufferGeometry(collider.shape)}
+    >
+      {children}
+    </mesh>
+  )
+}

package/src/components/3d-viewport/collider/CollisionMotionGroup.tsx

@@ -0,0 +1,88 @@
+import type {
+  CollisionMotionGroup,
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/wandelbots-js"
+import * as THREE from "three"
+import { DHRobot } from "../../robots/DHRobot"
+import { getDHTransform } from "../../utils/dhParameter"
+import ColliderCollection, {
+  type MeshChildrenProvider,
+} from "./ColliderCollection"
+
+type CollisionMotionGroupElementProps = {
+  name?: string
+  motionGroup: CollisionMotionGroup
+  rapidlyChangingMotionState: MotionGroupStateResponse
+  dhParameters: DHParameter[]
+  mountingPosition?: THREE.Vector3
+
+  meshChildrenProvider: MeshChildrenProvider
+}
+
+export default function CollisionMotionGroupElement({
+  name,
+  motionGroup,
+  rapidlyChangingMotionState,
+  dhParameters,
+  mountingPosition,
+  meshChildrenProvider,
+}: CollisionMotionGroupElementProps) {
+  const joints = rapidlyChangingMotionState.state.joint_position?.joints
+  const jointTransform = new THREE.Matrix4()
+  const jointTransforms = getJointTransforms()
+  const toolTransform = jointTransform
+
+  console.log(joints, jointTransforms)
+  if (!joints) {
+    return null
+  }
+
+  function getJointTransforms() {
+    jointTransform.identity()
+
+    return [
+      jointTransform.clone(),
+      ...joints?.map((joint, jointIndex) => {
+        jointTransform.multiply(getDHTransform(dhParameters[jointIndex], joint))
+        return {
+          position: new THREE.Vector3().applyMatrix4(jointTransform),
+          rotation: new THREE.Euler().setFromRotationMatrix(jointTransform),
+        }
+      }),
+    ]
+  }
+
+  return (
+    <group
+      name={name}
+      position={mountingPosition ?? new THREE.Vector3(0, 0, 0)}
+    >
+      <DHRobot
+        dhParameters={dhParameters}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+      />
+      {motionGroup.link_chain &&
+        motionGroup.link_chain.map((chainSegment, jointIndex) => (
+          <group name="robot" {...(jointTransforms ?? [])[jointIndex]}>
+            <ColliderCollection
+              colliders={chainSegment}
+              meshChildrenProvider={meshChildrenProvider}
+            />
+          </group>
+        ))}
+      {motionGroup.tool && (
+        <group
+          name="tool"
+          position={new THREE.Vector3(0, 0, 0).applyMatrix4(toolTransform)}
+          rotation={new THREE.Euler().setFromRotationMatrix(toolTransform)}
+        >
+          <ColliderCollection
+            colliders={motionGroup.tool}
+            meshChildrenProvider={meshChildrenProvider}
+          />
+        </group>
+      )}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/CollisionScene.tsx

@@ -0,0 +1,59 @@
+import type {
+  CollisionScene,
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/wandelbots-js"
+import * as THREE from "three"
+import ColliderCollection, {
+  type MeshChildrenProvider,
+} from "./ColliderCollection"
+import CollisionMotionGroupElement from "./CollisionMotionGroup"
+
+type MotionGroupData = {
+  state: MotionGroupStateResponse
+  dhParameters: DHParameter[]
+  mountingPosition: THREE.Vector3
+}
+
+type CollisionSceneElementProps = {
+  scene: CollisionScene
+  meshChildrenProvider: MeshChildrenProvider
+  motionGroupStates: Record<string, MotionGroupData>
+}
+
+export default function CollisionSceneElement({
+  scene,
+  motionGroupStates,
+  meshChildrenProvider,
+}: CollisionSceneElementProps) {
+  const colliders = scene.colliders
+  const motionGroups = scene.motion_groups ?? {}
+  return (
+    <group>
+      {colliders && (
+        <ColliderCollection
+          meshChildrenProvider={meshChildrenProvider}
+          colliders={colliders}
+        />
+      )}
+      {Object.entries(motionGroups)
+        .filter(
+          ([motionGroupKey, _]) =>
+            motionGroupStates[motionGroupKey] !== undefined,
+        )
+        .map(([motionGroupKey, motionGroup]) => (
+          <CollisionMotionGroupElement
+            key={motionGroupKey}
+            name={motionGroupKey}
+            motionGroup={motionGroup}
+            mountingPosition={
+              motionGroupStates[motionGroupKey].mountingPosition
+            }
+            dhParameters={motionGroupStates[motionGroupKey].dhParameters}
+            meshChildrenProvider={meshChildrenProvider}
+            rapidlyChangingMotionState={motionGroupStates[motionGroupKey].state}
+          />
+        ))}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts

@@ -0,0 +1,36 @@
+import type { ColliderShape } from "@wandelbots/wandelbots-js"
+import * as THREE from "three"
+import { ConvexGeometry } from "three-stdlib"
+
+export function colliderShapeToBufferGeometry(
+  shape: ColliderShape,
+): THREE.BufferGeometry {
+  const shapeType = shape.shape_type
+  switch (shapeType) {
+    case "convex_hull":
+      return new ConvexGeometry(
+        shape.vertices.map(
+          (vertex) => new THREE.Vector3(vertex[0] / 1000, vertex[1] / 1000, vertex[2] / 1000),
+        ),
+      )
+    case "box":
+      return new THREE.BoxGeometry(shape.size_x / 1000, shape.size_y / 1000, shape.size_z / 1000)
+    case "sphere":
+      return new THREE.SphereGeometry(shape.radius / 1000)
+    case "capsule":
+      return new THREE.CapsuleGeometry(shape.radius / 1000, shape.cylinder_height / 1000)
+    case "cylinder":
+      return new THREE.CylinderGeometry(
+        shape.radius / 1000,
+        shape.radius / 1000,
+        shape.height / 1000,
+      )
+    case "rectangle": {
+      return new THREE.BoxGeometry(shape.size_x / 1000, shape.size_y / 1000, 0)
+    }
+    default: {
+      console.warn(`${shape.shape_type} is not supported`)
+      return new THREE.BufferGeometry()
+    }
+  }
+}

package/src/components/robots/DHRobot.tsx

@@ -1,8 +1,8 @@
 import { Line } from "@react-three/drei"
-import type { DHParameter } from "@wandelbots/wandelbots-api-client"
 import type * as THREE from "three"
-import { Matrix4, Quaternion, Vector3 } from "three"
+import { Matrix4 } from "three"
 import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
+import { getDHLine, getDHLines } from "../utils/dhParameter"
 import RobotAnimator from "./RobotAnimator"
 import type { DHRobotProps } from "./SupportedRobot"
 
@@ -16,36 +16,11 @@ export function DHRobot({
 }: DHRobotProps) {
   // reused in every update
   const accumulatedMatrix = new Matrix4()
-
-  // Updates accumulatedMatrix with every execution
-  // Reset the matrix to identity if you start a new position update
-  function getLinePoints(
-    dhParameter: DHParameter,
-    jointRotation: number,
-  ): {
-    a: THREE.Vector3
-    b: THREE.Vector3
-  } {
-    const position = new Vector3()
-    const quaternion = new Quaternion()
-    const scale = new Vector3()
-    accumulatedMatrix.decompose(position, quaternion, scale)
-    const prevPosition = position.clone() // Update the previous position
-
-    const matrix = new Matrix4()
-      .makeRotationY(
-        dhParameter.theta! +
-          jointRotation * (dhParameter.reverse_rotation_direction ? -1 : 1),
-      ) // Rotate around Z
-      .multiply(new Matrix4().makeTranslation(0, dhParameter.d! / 1000, 0)) // Translate along Z
-      .multiply(new Matrix4().makeTranslation(dhParameter.a! / 1000, 0, 0)) // Translate along X
-      .multiply(new Matrix4().makeRotationX(dhParameter.alpha!)) // Rotate around X
-
-    // Accumulate transformations
-    accumulatedMatrix.multiply(matrix)
-    accumulatedMatrix.decompose(position, quaternion, scale)
-    return { a: prevPosition, b: position }
-  }
+  const dhLines = getDHLines(
+    accumulatedMatrix,
+    dhParameters,
+    rapidlyChangingMotionState.state.joint_position.joints,
+  )
 
   function setJointLineRotation(
     jointIndex: number,
@@ -57,16 +32,18 @@ export function DHRobot({
       return
     }
 
-    const dh_parameter = dhParameters[jointIndex]
-    if (!dh_parameter) {
+    const dhParameter = dhParameters[jointIndex]
+    if (!dhParameter) {
       return
     }
 
-    const { a, b } = getLinePoints(dh_parameter, jointValue)
+    const dhLine = getDHLine(accumulatedMatrix, dhParameter, jointValue)
     const lineGeometry = line.geometry as LineGeometry
-    lineGeometry.setPositions([a.toArray(), b.toArray()].flat())
+    lineGeometry.setPositions(
+      [dhLine.start.toArray(), dhLine.end.toArray()].flat(),
+    )
 
-    mesh.position.set(b.x, b.y, b.z)
+    mesh.position.set(dhLine.end.x, dhLine.end.y, dhLine.end.z)
   }
 
   function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
@@ -93,22 +70,23 @@ export function DHRobot({
             <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,
-            )
             const jointName = `dhrobot_J0${index}`
             return (
               <group name={jointName} key={jointName}>
                 <Line
                   name={CHILD_LINE}
-                  points={[a, b]}
+                  points={[dhLines[index].start, dhLines[index].end]}
                   color={"white"}
                   lineWidth={5}
+                  segments
                 />
-                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                <mesh
+                  name={CHILD_MESH}
+                  key={"mesh_" + index}
+                  position={dhLines[index].end}
+                >
                   <sphereGeometry args={[0.01, 32, 32]} />
                   <meshStandardMaterial color={"black"} depthTest={true} />
                 </mesh>

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -0,0 +1,59 @@
+import { useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { Trans, useTranslation } from "react-i18next"
+import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
+import ControllerTypeVirtualIcon from "./icons/controller-type-virtual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface ControllerTypeIndicatorProps {
+  isVirtual: boolean
+  motionGroupId: string
+}
+
+export const ControllerTypeIndicator = observer(
+  ({ isVirtual, motionGroupId }: ControllerTypeIndicatorProps) => {
+    const theme = useTheme()
+    const { t } = useTranslation()
+
+    if (isVirtual) {
+      return (
+        <IndicatorWithExplanation
+          id="motion-group-virtual"
+          icon={ControllerTypeVirtualIcon}
+          color={theme.palette.tertiary.main}
+          name={t("SafetyBar.ControllerType.Virtual.lb")}
+          explanation={
+            <Trans
+              i18nKey="SafetyBar.MotionGroup.Virtual.Explanation.lb"
+              values={{
+                motionGroupId,
+              }}
+            >
+              Motion group <code>{motionGroupId}</code> refers to a virtual
+              robot with no physical counterpart. It can be freely manipulated
+              without special safety precautions.
+            </Trans>
+          }
+        />
+      )
+    }
+
+    return (
+      <IndicatorWithExplanation
+        id="motion-group-physical"
+        icon={ControllerTypePhysicalIcon}
+        color={theme.palette.primary.main}
+        name={t("SafetyBar.ControllerType.Physical.lb")}
+        explanation={
+          <Trans
+            i18nKey="SafetyBar.MotionGroup.Physical.Explanation.lb"
+            values={{
+              motionGroupId,
+            }}
+            components={{ code: <code />, strong: <strong /> }}
+          />
+        }
+      />
+    )
+  },
+)

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -0,0 +1,117 @@
+import {
+  Popover,
+  Stack,
+  SvgIcon,
+  Typography,
+  type TypographyProps,
+} from "@mui/material"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import type { ElementType, ReactNode } from "react"
+
+export type IndicatorWithExplanationProps = {
+  id: string
+  icon: ElementType
+  color: TypographyProps["color"]
+  title?: ReactNode
+  name: ReactNode
+  explanation: ReactNode
+  literalValue?: string
+}
+
+export const IndicatorWithExplanation = observer(
+  ({
+    id,
+    icon,
+    color,
+    title,
+    name,
+    explanation,
+    literalValue,
+  }: IndicatorWithExplanationProps) => {
+    const state = useLocalObservable(() => ({
+      anchorEl: null as HTMLElement | null,
+
+      get isPopoverOpen() {
+        return !!state.anchorEl
+      },
+
+      openPopover(event: React.MouseEvent<HTMLElement>) {
+        state.anchorEl = event.currentTarget
+      },
+
+      closePopover() {
+        state.anchorEl = null
+      },
+    }))
+
+    return (
+      <>
+        <Stack
+          aria-owns={state.isPopoverOpen ? id : undefined}
+          aria-haspopup="true"
+          onMouseEnter={state.openPopover}
+          onMouseLeave={state.closePopover}
+          sx={{
+            cursor: "pointer",
+          }}
+        >
+          <SvgIcon
+            component={icon}
+            sx={{
+              color,
+            }}
+          />
+        </Stack>
+        <Popover
+          id={id}
+          sx={{
+            pointerEvents: "none",
+          }}
+          open={state.isPopoverOpen}
+          anchorEl={state.anchorEl}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+          onClose={state.closePopover}
+          disableRestoreFocus
+        >
+          <Stack
+            gap="1rem"
+            padding={2}
+            maxWidth="450px"
+            sx={{
+              wordWrap: "break-word",
+            }}
+          >
+            <div>
+              {title && (
+                <Typography component="span" fontSize="14px">
+                  {`${title}: `}
+                </Typography>
+              )}
+              <Typography
+                component="span"
+                color={color}
+                fontWeight="bold"
+                fontSize="14px"
+              >
+                {name}
+              </Typography>
+            </div>
+
+            <Typography fontSize="14px">{explanation}</Typography>
+
+            {literalValue && (
+              <Typography fontSize="12px">{literalValue}</Typography>
+            )}
+          </Stack>
+        </Popover>
+      </>
+    )
+  },
+)

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -0,0 +1,76 @@
+import { useTheme } from "@mui/material"
+import type { RobotControllerStateOperationModeEnum } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { Trans, useTranslation } from "react-i18next"
+import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
+import OperationModeErrorIcon from "./icons/operation-mode-error.svg"
+import OperationModeManualIcon from "./icons/operation-mode-manual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface OperationModeIndicatorProps {
+  operationMode: RobotControllerStateOperationModeEnum
+}
+
+export const OperationModeIndicator = observer(
+  ({ operationMode }: OperationModeIndicatorProps) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+
+    switch (operationMode) {
+      case "OPERATION_MODE_AUTO":
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-auto"
+            icon={OperationModeAutomaticIcon}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Automatic.ti")}
+            color={"rgba(255, 255, 255, 0.57)"}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Auto.Explanation.lb">
+                The robot controller is in automatic operation mode. Automated
+                movement without manual confirmation is possible in this mode.
+              </Trans>
+            }
+          />
+        )
+      case "OPERATION_MODE_MANUAL":
+      case "OPERATION_MODE_MANUAL_T1":
+      case "OPERATION_MODE_MANUAL_T2": {
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-manual"
+            icon={OperationModeManualIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Manual.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Manual.Explanation.lb">
+                The robot controller is in manual operation mode. On a physical
+                robot, this generally indicates that an enabling switch must be
+                held for the robot to move successfully.
+              </Trans>
+            }
+            literalValue={operationMode}
+          />
+        )
+      }
+      default:
+        return (
+          <IndicatorWithExplanation
+            id="operation-mode-error"
+            icon={OperationModeErrorIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Error.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Error.Explanation.lb">
+                The robot controller has entered an unexpected operation mode.
+                Motion group movement may not be possible.
+              </Trans>
+            }
+            literalValue={operationMode}
+          />
+        )
+    }
+  },
+)