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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.17.5",
+  "version": "1.17.7",
   "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 = (
@@ -17,8 +18,9 @@ export const TransparentOverlay = (
         backgroundColor: "rgba(0, 0, 0, 0.6)",
         backdropFilter: "blur(1px)",
         zIndex: 100,
+        ...(props.sx || {}),
       }}
-      {...props}
+      {...omit(props, "sx")}
     />
   )
 }

package/src/components/jogging/JoggingActivationRequired.tsx

@@ -13,7 +13,11 @@ export const JoggingActivationRequired = observer(
     function renderOverlay() {
       if (store.activationState === "inactive" && !store.activationError) {
         return (
-          <TransparentOverlay>
+          <TransparentOverlay
+            sx={{
+              borderRadius: "6px",
+            }}
+          >
             <Button
               color="primary"
               variant="contained"
@@ -37,7 +41,7 @@ export const JoggingActivationRequired = observer(
     }
 
     return (
-      <Stack sx={{ position: "relative" }}>
+      <Stack sx={{ position: "relative", padding: "6px" }}>
         {renderOverlay()}
         {children}
       </Stack>

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,17 +145,20 @@ 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"
+          marginLeft="auto"
+          marginRight="auto"
           marginTop="16px"
           gap="12px"
         >
@@ -252,11 +256,16 @@ export const JoggingCartesianTab = observer(
           </JoggingActivationRequired>
         </Stack>
 
-        {/* Show message if joint limits reached */}
-        <JoggingJointLimitDetector store={store} />
+        <Stack>
+          {/* 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/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

@@ -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>
           </>
         )
       }