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

package/package.json

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

package/src/components/TransparentOverlay.tsx

@@ -16,7 +16,7 @@ export const TransparentOverlay = (
       justifyContent="center"
       sx={{
         backgroundColor: "rgba(0, 0, 0, 0.6)",
-        backdropFilter: "blur(1px)",
+        backdropFilter: "blur(2px)",
         zIndex: 100,
         ...(props.sx || {}),
       }}

package/src/components/VelocitySlider.tsx

@@ -1,7 +1,7 @@
+import { Typography, useTheme } from "@mui/material"
 import Slider from "@mui/material/Slider"
 import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"
-import { Typography, useTheme } from "@mui/material"
 
 type VelocitySliderProps = {
   min: number

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mui/material"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
+import type { ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
@@ -27,7 +28,7 @@ type JoggingCartesianOpts = {
 }
 
 export const JoggingCartesianTab = observer(
-  ({ store }: { store: JoggingStore }) => {
+  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
     const { t } = useTranslation()
 
     function onMotionTypeChange(
@@ -144,18 +145,22 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack>
-        {/* Show Wandelscript string for the current coords */}
-        <JoggingCartesianValues store={store} />
+      <Stack flexGrow={1} justifyContent="space-between">
+        <Stack>
+          {/* Show Wandelscript string for the current coords */}
+          <JoggingCartesianValues store={store} />
 
-        {/* Jogging options */}
-        <JoggingOptions store={store} />
+          {/* Jogging options */}
+          <JoggingOptions store={store} />
+        </Stack>
 
         <Stack
           width="80%"
           maxWidth="296px"
-          margin="auto"
-          marginTop="16px"
+          marginLeft="auto"
+          marginRight="auto"
+          marginTop="8px"
+          marginBottom="8px"
           gap="12px"
         >
           {/* Translate or rotate toggle */}
@@ -172,91 +177,104 @@ export const JoggingCartesianTab = observer(
               {t("Jogging.Cartesian.Rotation.bt")}
             </ToggleButton>
           </ToggleButtonGroup>
+        </Stack>
 
-          <JoggingActivationRequired store={store}>
+        <JoggingActivationRequired store={store}>
+          <Stack
+            width="80%"
+            maxWidth="296px"
+            marginLeft="auto"
+            marginRight="auto"
+            marginTop="8px"
+            marginBottom="8px"
+            gap="12px"
+          >
             {/* 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}
-                  />
-                ))}
+            {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}
-                    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>
+            {/* 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 */}
+          <JoggingJointLimitDetector store={store} />
 
-        {/* Show message if joint limits reached */}
-        <JoggingJointLimitDetector store={store} />
+          {/* Velocity slider */}
+          <JoggingVelocitySlider store={store} />
 
-        {/* Velocity slider */}
-        <JoggingVelocitySlider store={store} />
+          {/* Custom content */}
+          {children}
+        </Stack>
       </Stack>
     )
   },

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,6 +1,7 @@
 import { Stack, Typography } from "@mui/material"
 import { radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
+import type { ReactNode } from "react"
 import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
@@ -9,7 +10,7 @@ import type { JoggingStore } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 export const JoggingJointTab = observer(
-  ({ store }: { store: JoggingStore }) => {
+  ({ store, children }: { store: JoggingStore; children: ReactNode }) => {
     async function startJointJogging(opts: {
       joint: number
       direction: "-" | "+"
@@ -26,7 +27,7 @@ export const JoggingJointTab = observer(
     }
 
     return (
-      <Stack>
+      <Stack flexGrow={1} justifyContent="space-between">
         <JoggingJointValues store={store} />
 
         <Stack marginTop="0.8rem" />

package/src/components/jogging/JoggingPanel.tsx

@@ -151,15 +151,13 @@ const JoggingPanelInner = observer(
       if (store.currentTab.id === "cartesian") {
         return (
           <>
-            <JoggingCartesianTab store={store} />
-            {children}
+            <JoggingCartesianTab store={store}>{children}</JoggingCartesianTab>
           </>
         )
       } else if (store.currentTab.id === "joint") {
         return (
           <>
-            <JoggingJointTab store={store} />
-            {children}
+            <JoggingJointTab store={store}>{children}</JoggingJointTab>
           </>
         )
       }