@wandelbots/wandelbots-js-react-components 1.17.4 → 1.17.6

package/package.json

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

package/src/components/TransparentOverlay.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "@mui/material"
+import { omit } from "lodash-es"
 import React from "react"
 
 export const TransparentOverlay = (
@@ -14,11 +15,12 @@ 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.sx || {}),
       }}
-      {...props}
+      {...omit(props, "sx")}
     />
   )
 }

package/src/components/jogging/JoggingActivationRequired.tsx

@@ -0,0 +1,50 @@
+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
+            sx={{
+              borderRadius: "6px",
+            }}
+          >
+            <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", padding: "6px" }}>
+        {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/JoggingOptions.tsx

@@ -1,16 +1,16 @@
 import {
-  Stack,
-  MenuItem,
   InputLabel,
+  MenuItem,
   Select,
-  ToggleButtonGroup,
+  Stack,
   ToggleButton,
+  ToggleButtonGroup,
 } from "@mui/material"
 import { observer } from "mobx-react-lite"
-import type { IncrementOptionId, JoggingStore } from "./JoggingStore"
 import { useTranslation } from "react-i18next"
 import OrientationCoordSysIcon from "../../icons/orientation-coord-system.svg"
 import OrientationToolIcon from "../../icons/orientation-tool.svg"
+import type { IncrementOptionId, JoggingStore } from "./JoggingStore"
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
@@ -30,7 +30,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         alignItems={"center"}
         spacing={2}
         sx={{
-          padding: "8px 16px",
+          padding: "6px 16px",
           "& label": {
             opacity: 0.7,
             fontSize: "12px",
@@ -83,7 +83,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         alignItems={"center"}
         spacing={2}
         sx={{
-          padding: "8px 16px",
+          padding: "6px 16px",
           "& label": {
             opacity: 0.7,
             fontSize: "12px",

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>