@wandelbots/wandelbots-js-react-components 1.29.2 → 1.30.0

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,17 +1,20 @@
-import { Add, Remove } from "@mui/icons-material"
-import { IconButton, Typography } from "@mui/material"
+import { IconButton, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
-import { useRef, type ReactNode } from "react"
+import React, { useRef, useState, type ReactNode } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
+import JogMinus from "../../icons/jog-minus.svg"
+import JogPlus from "../../icons/jog-plus.svg"
 import type { AxisControlComponentColors } from "../../themes/themeTypes"
 import { useAnimationFrame } from "../utils/hooks"
 
+type Direction = "+" | "-"
+
 type JoggingCartesianAxisControlProps = {
   colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
-  startJogging: (direction: "-" | "+") => void
+  startJogging: (direction: Direction) => void
   stopJogging: () => void
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
@@ -35,54 +38,76 @@ export const JoggingCartesianAxisControl = externalizeComponent(
 
         element.textContent = displayValue
       })
+      const theme = useTheme()
+      const [borderColor, setBorderColor] = useState(colors?.borderColor)
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-      function onPointerDownMinus(ev: React.PointerEvent) {
-        if (disabled) return
-
-        // Stop right click from triggering jog
-        if (ev.button === 0) startJogging("-")
-      }
-
-      function onPointerDownPlus(ev: React.PointerEvent) {
-        if (disabled) return
-
-        if (ev.button === 0) startJogging("+")
-      }
-
       if (!colors) {
         colors = {
           color: "#fff",
           backgroundColor: "#000",
           borderColor: "#000",
-          buttonBackgroundColor: "#000",
+          buttonBackgroundColor: {
+            disabled: "#000",
+            default: "#000",
+            hovered: "#000",
+            pressed: "#000",
+          },
         }
       }
 
+      const SxAxisControlButton = {
+        width: "55px",
+        backgroundColor: colors.buttonBackgroundColor?.default,
+        color: colors.color,
+        alignContent: "center",
+        fontSize: "37px",
+        "&:hover": {
+          backgroundColor: colors.buttonBackgroundColor?.hovered,
+        },
+        "&:active": {
+          backgroundColor: colors.buttonBackgroundColor?.pressed,
+        },
+        ":disabled": {
+          backgroundColor: colors.buttonBackgroundColor?.disabled,
+          "svg path": { fill: theme.palette.action.disabled },
+        },
+      }
+
+      function onPointerDown(ev: React.PointerEvent, direction: Direction) {
+        if (disabled) {
+          return
+        }
+        setBorderColor(colors?.buttonBackgroundColor?.pressed)
+        if (ev.button === 0) {
+          startJogging(direction)
+        }
+      }
+
+      function onPointerUpOrOut() {
+        setBorderColor(colors?.borderColor)
+        stopJogging()
+      }
+
       return (
-        <Stack height="72px" direction="row" justifyContent="center" {...rest}>
+        <Stack height="64px" direction="row" justifyContent="center" {...rest}>
           <IconButton
-            onPointerDown={onPointerDownMinus}
-            onPointerUp={stopJogging}
-            onPointerOut={stopJogging}
+            disabled={disabled}
+            disableRipple
+            onPointerDown={(ev: React.PointerEvent) => onPointerDown(ev, "-")}
+            onPointerUp={onPointerUpOrOut}
+            onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              width: "55px",
-              backgroundColor: colors.buttonBackgroundColor,
-              color: colors.color,
-              alignContent: "center",
-              fontSize: "37px",
+              ...SxAxisControlButton,
               borderRadius: "16px 0px 0px 16px",
-              borderLeft: `2px solid ${colors.borderColor ?? "#fff"}`,
-              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
-              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
-              ":hover": {
-                backgroundColor: colors.buttonBackgroundColor,
-              },
+              borderLeft: `2px solid ${borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
             }}
           >
-            <Remove />
+            <JogMinus />
           </IconButton>
 
           <Stack
@@ -93,6 +118,8 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               alignItems: "center",
               justifyContent: "center",
               opacity: "0.9",
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
             }}
           >
             <Stack
@@ -101,7 +128,17 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               alignItems="center"
               justifyItems="center"
               spacing={1}
-              sx={{ userSelect: "none", color: "white" }}
+              sx={{
+                userSelect: "none",
+                color: colors.color,
+                ".MuiTypography-root": {
+                  fontWeight: 700,
+                  ...(disabled ? { color: theme.palette.action.disabled } : {}),
+                },
+                ...(disabled
+                  ? { "svg path": { fill: theme.palette.action.disabled } }
+                  : {}),
+              }}
             >
               {label}
             </Stack>
@@ -109,7 +146,8 @@ export const JoggingCartesianAxisControl = externalizeComponent(
               height="22px"
               sx={{
                 fontSize: "15px",
-                color: colors.color,
+                color: disabled ? theme.palette.action.disabled : colors.color,
+                fontWeight: 700,
               }}
               ref={valueContainerRef}
             >
@@ -118,26 +156,21 @@ export const JoggingCartesianAxisControl = externalizeComponent(
           </Stack>
 
           <IconButton
-            onPointerDown={onPointerDownPlus}
-            onPointerUp={stopJogging}
-            onPointerOut={stopJogging}
+            disableRipple
+            disabled={disabled}
+            onPointerDown={(ev: React.PointerEvent) => onPointerDown(ev, "+")}
+            onPointerUp={onPointerUpOrOut}
+            onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              width: "55px",
-              backgroundColor: colors.buttonBackgroundColor,
-              color: colors.color,
-              alignContent: "center",
-              fontSize: "37px",
+              ...SxAxisControlButton,
               borderRadius: "0px 16px 16px 0px",
-              borderRight: `2px solid ${colors.borderColor ?? "#fff"}`,
-              borderBottom: `2px solid ${colors.borderColor ?? "#fff"}`,
-              borderTop: `2px solid ${colors.borderColor ?? "#fff"}`,
-              ":hover": {
-                backgroundColor: colors.buttonBackgroundColor,
-              },
+              borderRight: `2px solid ${borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
             }}
           >
-            <Add />
+            <JogPlus />
           </IconButton>
         </Stack>
       )

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -1,7 +1,7 @@
 import {
+  Divider,
   Stack,
   ToggleButton,
-  ToggleButtonGroup,
   Typography,
   useTheme,
 } from "@mui/material"
@@ -15,10 +15,10 @@ 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"
 import { JoggingOptions } from "./JoggingOptions"
 import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import { JoggingToggleButtonGroup } from "./JoggingToggleButtonGroup"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
@@ -152,26 +152,26 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} gap={4}>
-        <Stack>
-          {/* Show Wandelscript string for the current coords */}
-          <JoggingCartesianValues store={store} />
-
+      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
+        <Stack gap={2}>
           {/* Jogging options */}
           <JoggingOptions store={store} />
+
+          {/* Velocity slider */}
+          <JoggingVelocitySlider store={store} />
+          <Divider />
         </Stack>
 
         <Stack
-          width="80%"
-          maxWidth="296px"
+          //maxWidth="296px"
           marginLeft="auto"
           marginRight="auto"
-          marginTop="8px"
-          marginBottom="8px"
-          gap="12px"
+          gap="24px"
+          justifyContent="center"
+          sx={{ flexGrow: "1" }}
         >
           {/* Translate or rotate toggle */}
-          <ToggleButtonGroup
+          <JoggingToggleButtonGroup
             value={store.selectedCartesianMotionType}
             onChange={onMotionTypeChange}
             exclusive
@@ -184,105 +184,95 @@ export const JoggingCartesianTab = observer(
             <ToggleButton value="rotate">
               {t("Jogging.Cartesian.Rotation.bt")}
             </ToggleButton>
-          </ToggleButtonGroup>
-        </Stack>
+          </JoggingToggleButtonGroup>
 
-        <JoggingActivationRequired store={store}>
-          <Stack
-            width="80%"
-            maxWidth="296px"
-            marginLeft="auto"
-            marginRight="auto"
-            marginTop="8px"
-            marginBottom="8px"
-            gap="12px"
-          >
-            {/* Cartesian translate jogging */}
-            {store.selectedCartesianMotionType === "translate" &&
-              axisList.map((axis) => (
-                <JoggingCartesianAxisControl
-                  key={axis.id}
-                  colors={axis.colors}
-                  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}
-                />
-              ))}
+          <JoggingActivationRequired store={store}>
+            <Stack alignItems="center" gap="24px" sx={{ flexGrow: 1 }}>
+              {/* Cartesian translate jogging */}
+              {store.selectedCartesianMotionType === "translate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    colors={axis.colors}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        {axis.icon}
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: theme.palette.text.primary,
+                          }}
+                        >
+                          {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}
-                  colors={axis.colors}
-                  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>
+              {/* Cartesian rotate jogging */}
+              {store.selectedCartesianMotionType === "rotate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    colors={axis.colors}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        <RotationIcon />
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: theme.palette.text.primary,
+                          }}
+                        >
+                          {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>
 
-        <Stack>
-          {/* Show message if joint limits reached */}
-          <JoggingJointLimitDetector store={store} />
+        {/* Show message if joint limits reached */}
+        <JoggingJointLimitDetector store={store} />
 
-          {/* Velocity slider */}
-          <JoggingVelocitySlider store={store} />
+        {children && <Divider />}
 
-          {/* Custom content */}
-          {children}
-        </Stack>
+        {/* Custom content */}
+
+        {children}
       </Stack>
     )
   },

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -38,13 +38,16 @@ export const JoggingJointLimitDetector = ({
     if (limitReached) jointLimitReachedIndices.push(index)
   }
 
+  if (jointLimitReachedIndices.length === 0) {
+    return null
+  }
   return (
     <Typography
       color="error"
       sx={{
         margin: "0.5rem 1rem",
         textAlign: "center",
-        visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
+        visibility: jointLimitReachedIndices.length ? "visible" : "collapse",
       }}
     >
       {t("Jogging.JointLimitsReached.lb", {

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -1,6 +1,6 @@
 import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
-import { IconButton, Slider, Typography } from "@mui/material"
+import { IconButton, Slider, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import throttle from "lodash-es/throttle"
 import { observer, useLocalObservable } from "mobx-react-lite"
@@ -33,6 +33,12 @@ export const JoggingJointRotationControl = externalizeComponent(
     }: JoggingJointRotationControlProps) => {
       const { t } = useTranslation()
       const [currentValue, setCurrentValue] = useState<number | undefined>()
+      const theme = useTheme()
+
+      const pressedButtonStyle = {
+        background: theme.palette.backgroundPaperElevation?.[4],
+        color: theme.palette.backgroundPaperElevation?.[11],
+      }
 
       const state = useLocalObservable(() => ({
         activeJoggingDir: null as "-" | "+" | null,
@@ -92,23 +98,31 @@ export const JoggingJointRotationControl = externalizeComponent(
         <Stack
           height="64px"
           width="100%"
-          maxWidth="300px"
+          maxWidth="260px"
           direction="row"
           {...rest}
           sx={{
             "& .MuiIconButton-root": {
               width: "52px",
-              color: "white",
+              color: theme.palette.text.primary,
               alignContent: "center",
-              backgroundColor: "#38445A",
-              "&:disabled": {
-                opacity: 0.5,
-                backgroundColor: "#38445A",
-              },
+              backgroundColor: theme.palette.backgroundPaperElevation?.[11],
               "& svg": {
                 width: "42px",
                 height: "42px",
               },
+
+              "&.Mui-disabled": {
+                backgroundColor: theme.palette.backgroundPaperElevation?.[11],
+                color: theme.palette.action.disabled,
+                opacity: 1,
+              },
+              "&:hover": {
+                backgroundColor: theme.palette.backgroundPaperElevation?.[9],
+              },
+              "&:active": {
+                ...pressedButtonStyle,
+              },
             },
           }}
         >
@@ -117,10 +131,10 @@ export const JoggingJointRotationControl = externalizeComponent(
             onPointerUp={onPointerUp}
             onPointerOut={onPointerOut}
             disabled={disabled}
+            disableRipple
             sx={{
               borderRadius: "16px 0px 0px 16px",
-              backgroundColor:
-                state.activeJoggingDir === "-" ? "#495975" : undefined,
+              ...(state.activeJoggingDir === "-" ? pressedButtonStyle : {}),
             }}
           >
             <ChevronLeft />
@@ -134,10 +148,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               borderStyle: "solid",
               borderLeftWidth: 0,
               borderRightWidth: 0,
-              borderTopWidth: "4px",
-              borderBottomWidth: "4px",
-              backgroundColor: "#38445A",
-              borderColor: "#38445A",
+              border: "none",
+              backgroundColor: theme.palette.backgroundPaperElevation?.[11],
               paddingLeft: "20px",
               paddingRight: "20px",
               zIndex: 1,
@@ -146,9 +158,13 @@ export const JoggingJointRotationControl = externalizeComponent(
             <Typography
               sx={{
                 fontSize: "15px",
+                fontWeight: 700,
                 position: "relative",
                 top: "5px",
-                color: "white",
+
+                color: disabled
+                  ? theme.palette.action.disabled
+                  : theme.palette.text.primary,
               }}
             >
               {formatDegrees(currentValue)}
@@ -167,16 +183,21 @@ export const JoggingJointRotationControl = externalizeComponent(
                 },
                 "& .MuiSlider-thumb": {
                   width: "5px",
-                  height: "10px",
+                  height: "12px",
                   borderRadius: "2px",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.primary,
                 },
                 "& .MuiSlider-markLabel": {
                   top: "20px",
                   fontSize: "12px",
-                  color: "white",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.secondary,
                 },
                 "& .MuiSlider-rail": {
-                  backgroundColor: "#1F283A",
+                  backgroundColor: theme.palette.backgroundPaperElevation?.[5],
                   opacity: 1,
                 },
               }}
@@ -201,12 +222,10 @@ export const JoggingJointRotationControl = externalizeComponent(
             onPointerUp={onPointerUp}
             onPointerOut={onPointerOut}
             disabled={disabled}
+            disableRipple
             sx={{
               borderRadius: "0px 16px 16px 0px",
-              backgroundColor:
-                state.activeJoggingDir === "+"
-                  ? "#495975 !important"
-                  : "#38445A",
+              ...(state.activeJoggingDir === "+" ? pressedButtonStyle : {}),
             }}
           >
             <ChevronRight />