@wandelbots/wandelbots-js-react-components 1.17.3 → 1.17.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.17.3",
+  "version": "1.17.5",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/TransparentOverlay.tsx

@@ -14,8 +14,8 @@ export const TransparentOverlay = (
       alignItems="center"
       justifyContent="center"
       sx={{
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        backdropFilter: "blur(10px)",
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(1px)",
         zIndex: 100,
       }}
       {...props}

package/src/components/jogging/JoggingActivationRequired.tsx

@@ -0,0 +1,46 @@
+import { Button, Stack } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import type React from "react"
+import { useTranslation } from "react-i18next"
+import { LoadingCover } from "../LoadingCover"
+import { TransparentOverlay } from "../TransparentOverlay"
+import type { JoggingStore } from "./JoggingStore"
+
+export const JoggingActivationRequired = observer(
+  ({ store, children }: { store: JoggingStore; children: React.ReactNode }) => {
+    const { t } = useTranslation()
+
+    function renderOverlay() {
+      if (store.activationState === "inactive" && !store.activationError) {
+        return (
+          <TransparentOverlay>
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={() => store.activate({ manual: true })}
+              disabled={store.isLocked}
+            >
+              {t("Jogging.Activate.bt")}
+            </Button>
+          </TransparentOverlay>
+        )
+      } else if (store.activationState === "loading" || store.activationError) {
+        return (
+          <TransparentOverlay>
+            <LoadingCover
+              message={t("Jogging.Activating.lb")}
+              error={store.activationError}
+            />
+          </TransparentOverlay>
+        )
+      }
+    }
+
+    return (
+      <Stack sx={{ position: "relative" }}>
+        {renderOverlay()}
+        {children}
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -12,6 +12,7 @@ import YAxisIcon from "../../icons/axis-y.svg"
 import ZAxisIcon from "../../icons/axis-z.svg"
 import RotationIcon from "../../icons/rotation.svg"
 import { useReaction } from "../utils/hooks"
+import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingCartesianValues } from "./JoggingCartesianValues"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
@@ -150,7 +151,13 @@ export const JoggingCartesianTab = observer(
         {/* Jogging options */}
         <JoggingOptions store={store} />
 
-        <Stack width="80%" maxWidth="296px" margin="auto" marginTop="16px">
+        <Stack
+          width="80%"
+          maxWidth="296px"
+          margin="auto"
+          marginTop="16px"
+          gap="12px"
+        >
           {/* Translate or rotate toggle */}
           <ToggleButtonGroup
             value={store.selectedCartesianMotionType}
@@ -166,85 +173,83 @@ export const JoggingCartesianTab = observer(
             </ToggleButton>
           </ToggleButtonGroup>
 
-          {/* Cartesian translate jogging */}
-          {store.selectedCartesianMotionType === "translate" &&
-            axisList.map((axis) => (
-              <JoggingCartesianAxisControl
-                key={axis.id}
-                color={axis.color}
-                disabled={store.isLocked}
-                sx={{
-                  marginTop: "12px",
-                }}
-                label={
-                  <>
-                    {axis.icon}
-                    <Typography
-                      sx={{
-                        fontSize: "24px",
-                        color: "white",
-                      }}
-                    >
-                      {axis.id.toUpperCase()}
-                    </Typography>
-                  </>
-                }
-                getDisplayedValue={() =>
-                  formatMM(
-                    store.jogger.motionStream.rapidlyChangingMotionState
-                      .tcp_pose?.position[axis.id] || 0,
-                  )
-                }
-                startJogging={(direction: "-" | "+") =>
-                  startCartesianJogging({
-                    axis: axis.id,
-                    motionType: "translate",
-                    direction,
-                  })
-                }
-                stopJogging={stopJogging}
-              />
-            ))}
+          <JoggingActivationRequired store={store}>
+            {/* Cartesian translate jogging */}
+            <Stack gap="12px">
+              {store.selectedCartesianMotionType === "translate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    color={axis.color}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        {axis.icon}
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: "white",
+                          }}
+                        >
+                          {axis.id.toUpperCase()}
+                        </Typography>
+                      </>
+                    }
+                    getDisplayedValue={() =>
+                      formatMM(
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .tcp_pose?.position[axis.id] || 0,
+                      )
+                    }
+                    startJogging={(direction: "-" | "+") =>
+                      startCartesianJogging({
+                        axis: axis.id,
+                        motionType: "translate",
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJogging}
+                  />
+                ))}
 
-          {/* Cartesian rotate jogging */}
-          {store.selectedCartesianMotionType === "rotate" &&
-            axisList.map((axis) => (
-              <JoggingCartesianAxisControl
-                key={axis.id}
-                color={axis.color}
-                disabled={store.isLocked}
-                sx={{
-                  marginTop: "12px",
-                }}
-                label={
-                  <>
-                    <RotationIcon />
-                    <Typography
-                      sx={{
-                        fontSize: "24px",
-                        color: "white",
-                      }}
-                    >
-                      {axis.id.toUpperCase()}
-                    </Typography>
-                  </>
-                }
-                getDisplayedValue={() =>
-                  formatDegrees(
-                    store.jogger.motionStream.rapidlyChangingMotionState
-                      .tcp_pose?.orientation?.[axis.id] || 0,
-                  )
-                }
-                startJogging={(direction: "-" | "+") =>
-                  startCartesianJogging({
-                    axis: axis.id,
-                    motionType: "rotate",
-                    direction,
-                  })
-                }
-                stopJogging={stopJogging}
-              />
-            ))}
+              {/* Cartesian rotate jogging */}
+              {store.selectedCartesianMotionType === "rotate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    color={axis.color}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        <RotationIcon />
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: "white",
+                          }}
+                        >
+                          {axis.id.toUpperCase()}
+                        </Typography>
+                      </>
+                    }
+                    getDisplayedValue={() =>
+                      formatDegrees(
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .tcp_pose?.orientation?.[axis.id] || 0,
+                      )
+                    }
+                    startJogging={(direction: "-" | "+") =>
+                      startCartesianJogging({
+                        axis: axis.id,
+                        motionType: "rotate",
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJogging}
+                  />
+                ))}
+            </Stack>
+          </JoggingActivationRequired>
         </Stack>
 
         {/* Show message if joint limits reached */}

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,11 +1,12 @@
 import { Stack, Typography } from "@mui/material"
-import { observer } from "mobx-react-lite"
 import { radiansToDegrees } from "@wandelbots/wandelbots-js"
-import type { JoggingStore } from "./JoggingStore"
-import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import { observer } from "mobx-react-lite"
+import { JoggingActivationRequired } from "./JoggingActivationRequired"
+import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
 import { JoggingJointValues } from "./JoggingJointValues"
-import { useEffect } from "react"
+import type { JoggingStore } from "./JoggingStore"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 export const JoggingJointTab = observer(
   ({ store }: { store: JoggingStore }) => {
@@ -27,64 +28,68 @@ export const JoggingJointTab = observer(
     return (
       <Stack>
         <JoggingJointValues store={store} />
-        <Stack>
-          {store.jogger.motionStream.joints.map((joint) => {
-            const jointLimits =
-              store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
-            const lowerLimitDegs =
-              jointLimits?.lower_limit !== undefined
-                ? radiansToDegrees(jointLimits.lower_limit)
-                : undefined
-            const upperLimitDegs =
-              jointLimits?.upper_limit !== undefined
-                ? radiansToDegrees(jointLimits.upper_limit)
-                : undefined
 
-            return (
-              <Stack
-                direction="row"
-                alignItems="center"
-                gap={2}
-                key={`joint-${joint.index}`}
-                marginTop="0.8rem"
-              >
-                <Typography
-                  sx={{
-                    flexGrow: 1,
-                    textAlign: "right",
-                  }}
-                >{`J${joint.index + 1}`}</Typography>
-                <JoggingJointRotationControl
-                  key={joint.index}
-                  disabled={store.isLocked}
-                  lowerLimitDegs={lowerLimitDegs}
-                  upperLimitDegs={upperLimitDegs}
-                  getValueDegs={() => {
-                    const value =
-                      store.jogger.motionStream.rapidlyChangingMotionState.state
-                        .joint_position.joints[joint.index]
-                    return value !== undefined
-                      ? radiansToDegrees(value)
-                      : undefined
-                  }}
-                  startJogging={(direction: "-" | "+") =>
-                    startJointJogging({
-                      joint: joint.index,
-                      direction,
-                    })
-                  }
-                  stopJogging={stopJointJogging}
-                />
-                {/* Just to balance out the right side */}
-                <Typography
-                  sx={{
-                    flexGrow: 1,
-                  }}
-                />
-              </Stack>
-            )
-          })}
-        </Stack>
+        <Stack marginTop="0.8rem" />
+        <JoggingActivationRequired store={store}>
+          <Stack gap="0.8rem">
+            {store.jogger.motionStream.joints.map((joint) => {
+              const jointLimits =
+                store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
+              const lowerLimitDegs =
+                jointLimits?.lower_limit !== undefined
+                  ? radiansToDegrees(jointLimits.lower_limit)
+                  : undefined
+              const upperLimitDegs =
+                jointLimits?.upper_limit !== undefined
+                  ? radiansToDegrees(jointLimits.upper_limit)
+                  : undefined
+
+              return (
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  gap={2}
+                  key={`joint-${joint.index}`}
+                >
+                  <Typography
+                    sx={{
+                      flexGrow: 1,
+                      textAlign: "right",
+                    }}
+                  >{`J${joint.index + 1}`}</Typography>
+                  <JoggingJointRotationControl
+                    key={joint.index}
+                    disabled={store.isLocked}
+                    lowerLimitDegs={lowerLimitDegs}
+                    upperLimitDegs={upperLimitDegs}
+                    getValueDegs={() => {
+                      const value =
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .state.joint_position.joints[joint.index]
+                      return value !== undefined
+                        ? radiansToDegrees(value)
+                        : undefined
+                    }}
+                    startJogging={(direction: "-" | "+") =>
+                      startJointJogging({
+                        joint: joint.index,
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJointJogging}
+                  />
+                  {/* Just to balance out the right side */}
+                  <Typography
+                    sx={{
+                      flexGrow: 1,
+                    }}
+                  />
+                </Stack>
+              )
+            })}
+          </Stack>
+        </JoggingActivationRequired>
+        <JoggingJointLimitDetector store={store} />
         <JoggingVelocitySlider store={store} />
       </Stack>
     )

package/src/components/jogging/JoggingPanel.tsx

@@ -1,13 +1,11 @@
-import { Button, Paper, Stack, Tab, Tabs } from "@mui/material"
+import { Paper, Stack, Tab, Tabs } from "@mui/material"
 import { NovaClient } from "@wandelbots/wandelbots-js"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
-import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../../externalizeComponent"
 import { LoadingCover } from "../LoadingCover"
-import { TransparentOverlay } from "../TransparentOverlay"
 import { useReaction } from "../utils/hooks"
 import { JoggingCartesianTab } from "./JoggingCartesianTab"
 import { JoggingJointTab } from "./JoggingJointTab"
@@ -117,8 +115,6 @@ const JoggingPanelInner = observer(
     store: JoggingStore
     children?: React.ReactNode
   }) => {
-    const { t } = useTranslation()
-
     // Jogger is only active as long as the tab is focused
     useEffect(() => {
       function deactivate() {
@@ -151,32 +147,6 @@ const JoggingPanelInner = observer(
       },
     )
 
-    function renderOverlay() {
-      if (store.activationState === "inactive" && !store.activationError) {
-        return (
-          <TransparentOverlay>
-            <Button
-              color="primary"
-              variant="contained"
-              onClick={() => store.activate({ manual: true })}
-              disabled={store.isLocked}
-            >
-              {t("Jogging.Activate.bt")}
-            </Button>
-          </TransparentOverlay>
-        )
-      } else if (store.activationState === "loading" || store.activationError) {
-        return (
-          <TransparentOverlay>
-            <LoadingCover
-              message={t("Jogging.Activating.lb")}
-              error={store.activationError}
-            />
-          </TransparentOverlay>
-        )
-      }
-    }
-
     function renderTabContent() {
       if (store.currentTab.id === "cartesian") {
         return (
@@ -211,7 +181,6 @@ const JoggingPanelInner = observer(
 
         {/* Current tab content */}
         <Stack flexGrow={1} position="relative">
-          {renderOverlay()}
           {renderTabContent()}
         </Stack>
       </Stack>

package/src/components/robots/ABB_1200_07_7.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function ABB_1200_07_7({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+ABB_1200_07_7.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function ABB_1200_07_7({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="IRB1200_7_70_IRC5" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/DHRobot.tsx

@@ -1,13 +1,13 @@
-import { Vector3, Matrix4, Quaternion } from "three"
 import { Line } from "@react-three/drei"
-import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
 import type { DHParameter } from "@wandelbots/wandelbots-api-client"
-import RobotAnimator from "./RobotAnimator"
 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"
 
 const CHILD_LINE = "line"
@@ -85,7 +85,7 @@ export function DHRobot({
     })
   }
 
-  function getAllJoints(rootObject: THREE.Object3D): RobotSceneJoint[] {
+  function jointCollector(rootObject: THREE.Object3D): RobotSceneJoint[] {
     return getAllJointsByName(rootObject, "^group_[0-9]+$")
   }
 
@@ -93,36 +93,37 @@ export function DHRobot({
     <>
       <RobotAnimator
         rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
+        jointCollector={jointCollector}
         onRotationChanged={setRotation}
-        jointCollector={getAllJoints}
-      />
-      <group {...props} name="Scene">
-        <mesh>
-          <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,
-          )
-          return (
-            <group name={`group_${index}`} key={"group_" + index}>
-              <Line
-                name={CHILD_LINE}
-                points={[a, b]}
-                color={"white"}
-                lineWidth={5}
-              />
-              <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
-                <sphereGeometry args={[0.01, 32, 32]} />
-                <meshStandardMaterial color={"black"} depthTest={true} />
-              </mesh>
-            </group>
-          )
-        })}
-      </group>
+      >
+        <group {...props} name="Scene">
+          <mesh>
+            <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,
+            )
+            return (
+              <group name={`group_${index}`} key={"group_" + index}>
+                <Line
+                  name={CHILD_LINE}
+                  points={[a, b]}
+                  color={"white"}
+                  lineWidth={5}
+                />
+                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                  <sphereGeometry args={[0.01, 32, 32]} />
+                  <meshStandardMaterial color={"black"} depthTest={true} />
+                </mesh>
+              </group>
+            )
+          })}
+        </group>
+      </RobotAnimator>
     </>
   )
 }

package/src/components/robots/FANUC_ARC_Mate_100iD.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_ARC_Mate_100iD({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_ARC_Mate_100iD.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_ARC_Mate_100iD({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="M10iD" rotation={[Math.PI / 2, 0, 0]}>