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

package/src/components/CopyableText.tsx

@@ -1,5 +1,5 @@
-import { Chip, InputLabel } from "@mui/material"
-import { forwardRef } from "react"
+import { Stack, Tooltip, Typography, useTheme } from "@mui/material"
+import { forwardRef, useEffect, useState } from "react"
 
 export const CopyableText = forwardRef(
   (
@@ -12,19 +12,76 @@ export const CopyableText = forwardRef(
     },
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
+    const theme = useTheme()
+    const [tooltipOpen, setTooltipOpen] = useState(false)
+
+    async function onCopyText(): Promise<boolean> {
+      if (!ref || !("current" in ref)) {
+        console.warn("No copy target found")
+        return false
+      }
+      try {
+        await navigator.clipboard.writeText(value)
+        console.log("Copied!")
+        setTooltipOpen(true)
+        return true
+      } catch (err) {
+        // Direct clipboard copy is not available in non-secure contexts
+        console.error(err)
+
+        // Let's fall back to selecting the text so the user can manually copy easily
+        const selection = window.getSelection()!
+        const range = document.createRange()
+        range.selectNodeContents(ref.current as any)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+      return false
+    }
+
+    useEffect(() => {
+      if (!tooltipOpen) {
+        return
+      }
+      const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
+      return () => {
+        timeoutId ? clearTimeout(timeoutId) : {}
+      }
+    }, [tooltipOpen])
+
     return (
-      <>
-        {label && <InputLabel>{label}</InputLabel>}
-        <Chip
-          ref={ref}
+      <Tooltip open={tooltipOpen} title="Copied!">
+        <Stack
+          justifyContent="center"
           sx={{
-            fontSize: "14px",
-            opacity: 0.8,
-            marginTop: "4px !important",
+            height: "100%",
+            boxSizing: "border-box",
+            padding: "6px 12px",
+            background: theme.palette.backgroundPaperElevation?.[8],
+            borderRadius: "10px",
+            minWidth: "0",
+            cursor: "pointer",
           }}
-          value={value}
-        />
-      </>
+          onClick={() => onCopyText()}
+        >
+          <Typography
+            ref={ref}
+            align="center"
+            sx={{
+              pointerEvents: "none",
+              fontSize: "12px",
+              color: theme.palette.text.primary,
+              whiteSpace: "nowrap",
+              minWidth: 0,
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+            }}
+          >
+            {value}
+          </Typography>
+        </Stack>
+      </Tooltip>
     )
   },
 )

package/src/components/LoadingCover.tsx

@@ -1,7 +1,7 @@
-import { makeErrorMessage } from "./utils/errorHandling"
 import { capitalize, CircularProgress, Stack, useTheme } from "@mui/material"
 import { lowerFirst } from "lodash-es"
 import { useEffect, useState } from "react"
+import { makeErrorMessage } from "./utils/errorHandling"
 
 export const LoadingCover = (props: {
   message?: string
@@ -11,6 +11,7 @@ export const LoadingCover = (props: {
   const softTimeout = props.softTimeout || 3000
 
   const [showSlowLoadingMessage, setShowSlowLoadingMessage] = useState(false)
+  const theme = useTheme()
 
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -26,6 +27,7 @@ export const LoadingCover = (props: {
       height="100%"
       alignItems="center"
       justifyContent="center"
+      sx={{ color: theme.palette.text.primary }}
     >
       {props.error ? (
         <LoadingErrorMessage
@@ -40,7 +42,7 @@ export const LoadingCover = (props: {
             sx={{
               visibility: showSlowLoadingMessage ? "visible" : "hidden",
               marginTop: "1rem",
-              color: "gray",
+              color: theme.palette.text.secondary,
             }}
           >
             {"This is taking longer than expected..."}

package/src/components/VelocitySlider.tsx

@@ -1,7 +1,8 @@
-import { Typography, useTheme } from "@mui/material"
+import { Stack, Typography, useTheme, type SxProps } from "@mui/material"
 import Slider from "@mui/material/Slider"
 import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"
+import type { ReactNode } from "react"
 
 type VelocitySliderProps = {
   min: number
@@ -9,16 +10,13 @@ type VelocitySliderProps = {
   velocity: number
   onVelocityChange: (newVelocity: number) => void
   disabled?: boolean
-  valueLabelFormat?: (value: number) => string
+  renderValue?: (value: number) => ReactNode
 }
 
 /** A slider for controlling the movement velocity of a robot */
 export const VelocitySlider = observer((props: VelocitySliderProps) => {
   const theme = useTheme()
 
-  const valueLabelFormat =
-    props.valueLabelFormat || ((value: number) => `${value}`)
-
   function onSliderChange(_event: Event, newVelocity: number | number[]) {
     if (newVelocity === props.velocity || !isNumber(newVelocity)) return
 
@@ -26,18 +24,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
   }
 
   return (
-    <>
-      <Typography
-        sx={{
-          textAlign: "center",
-          fontSize: "14px",
-          opacity: 0.8,
-          lineHeight: 1,
-          color: theme.palette.text.primary,
-        }}
-      >
-        {valueLabelFormat(props.velocity)}
-      </Typography>
+    <Stack direction="row" gap={2}>
       <Slider
         value={props.velocity}
         color="secondary"
@@ -54,6 +41,48 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
           },
         }}
       />
-    </>
+      {props.renderValue ? (
+        props.renderValue(props.velocity)
+      ) : (
+        <VelocitySliderLabel value={props.velocity.toString()} />
+      )}
+    </Stack>
   )
 })
+
+type VelocitySliderLabelProps = {
+  value: string
+  sx?: SxProps
+}
+
+export function VelocitySliderLabel({ value, sx }: VelocitySliderLabelProps) {
+  const theme = useTheme()
+  return (
+    <Stack
+      direction={"row"}
+      justifyContent={"center"}
+      gap={"5px"}
+      sx={{
+        padding: "6px 12px",
+        background: theme.palette.backgroundPaperElevation?.[8],
+        borderRadius: "10px",
+        minWidth: "111px",
+        ...sx,
+      }}
+    >
+      <Typography
+        component="span"
+        sx={{
+          textAlign: "right",
+          fontSize: "14px",
+          opacity: 0.8,
+          lineHeight: 1,
+          color: theme.palette.text.primary,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {value}
+      </Typography>
+    </Stack>
+  )
+}

package/src/components/experimental/utils/AdornedSelect.tsx

@@ -0,0 +1,42 @@
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  styled,
+  type SelectProps,
+} from "@mui/material"
+
+const AdornedFormControl = styled(FormControl)(({ theme }) => ({
+  "&.MuiFormControl-root": {
+    ".MuiSelect-select": {
+      paddingTop: "20px",
+      paddingLeft: "12px",
+    },
+    label: {
+      pointerEvents: "none",
+      fontSize: "16px",
+    },
+    ".MuiInputLabel-root": {
+      "&.Mui-focused": {
+        color: theme.palette.text.primary,
+      },
+    },
+  },
+}))
+
+type AdornedSelectProps = {
+  labelValue: string
+  labelId: string
+} & SelectProps
+
+export default function AdornedSelect({
+  labelValue,
+  ...props
+}: AdornedSelectProps) {
+  return (
+    <AdornedFormControl fullWidth variant="filled">
+      <InputLabel id={props.labelId}>{labelValue}</InputLabel>
+      <Select {...props} />
+    </AdornedFormControl>
+  )
+}

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>
       )