@wandelbots/wandelbots-js-react-components 1.8.0 → 1.9.0

package/src/components/jogging/JoggingCartesianValues.tsx

@@ -1,45 +1,49 @@
 import { observer } from "mobx-react-lite"
-import { Stack, Typography } from "@mui/material"
+import { Stack } from "@mui/material"
 import { useRef } from "react"
 import { poseToWandelscriptString } from "@wandelbots/wandelbots-js"
 import { useAnimationFrame } from "../utils/hooks"
-import { JoggingStore } from "./JoggingStore"
+import type { JoggingStore } from "./JoggingStore"
+import { CopyableText } from "../CopyableText"
 
-export const JoggingCartesianValues = observer(({ store }: { store: JoggingStore }) => {
-  const poseStringRef = useRef<HTMLPreElement>(null)
+export const JoggingCartesianValues = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const poseHolderRef = useRef<HTMLPreElement>(null)
 
-  function getCurrentPoseString() {
-    const tcpPose = store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
-    if (!tcpPose) return ""
-    return poseToWandelscriptString(tcpPose)
-  }
-
-  useAnimationFrame(() => {
-    if (!poseStringRef.current) {
-      return
+    function getCurrentPoseString() {
+      const tcpPose =
+        store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
+      if (!tcpPose) return ""
+      return poseToWandelscriptString(tcpPose)
     }
 
-    poseStringRef.current.textContent = getCurrentPoseString()
-  })
+    useAnimationFrame(() => {
+      if (!poseHolderRef.current) {
+        return
+      }
+
+      poseHolderRef.current.textContent = getCurrentPoseString()
+    })
 
-  return (
-    <Stack alignItems="center" marginTop="0.8rem">
-      <Typography
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
         sx={{
-          fontSize: "12px",
-          marginTop: "0.8rem",
+          padding: "16px",
+          "& label": {
+            opacity: 0.7,
+            fontSize: "12px",
+            marginBottom: "4px",
+          },
         }}
       >
-        {store.selectedTcpId} - {store.selectedCoordSystem?.name}
-      </Typography>
-      <Typography
-        component="pre"
-        ref={poseStringRef}
-        sx={{
-          fontSize: "14px",
-          opacity: 0.6,
-        }}
-      ></Typography>
-    </Stack>
-  )
-})
+        <CopyableText
+          label={"Pose"}
+          value={getCurrentPoseString()}
+          ref={poseHolderRef}
+        />
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -2,26 +2,29 @@ import { Typography } from "@mui/material"
 import { useTranslation } from "react-i18next"
 import { useState } from "react"
 import { isEqual } from "lodash-es"
-import { MotionStreamConnection } from "@wandelbots/wandelbots-js"
 import { useAnimationFrame } from "../utils/hooks"
-import { JoggingStore } from "./JoggingStore"
+import type { JoggingStore } from "./JoggingStore"
 
 /**
  * Monitors the active robot motion state and displays a message if
  * any joint limits are reached.
  */
-export const JoggingJointLimitDetector = ({ store }: { store: JoggingStore }) => {
+export const JoggingJointLimitDetector = ({
+  store,
+}: {
+  store: JoggingStore
+}) => {
   const { t } = useTranslation()
 
   const [jointLimitsReached, setJointLimitsReached] = useState(
-    store.jogger.motionStream.rapidlyChangingMotionState.state.joint_limit_reached
-      .limit_reached,
+    store.jogger.motionStream.rapidlyChangingMotionState.state
+      .joint_limit_reached.limit_reached,
   )
 
   useAnimationFrame(() => {
     const newLimitsReached =
-      store.jogger.motionStream.rapidlyChangingMotionState.state.joint_limit_reached
-        .limit_reached
+      store.jogger.motionStream.rapidlyChangingMotionState.state
+        .joint_limit_reached.limit_reached
 
     if (!isEqual(jointLimitsReached, newLimitsReached)) {
       setJointLimitsReached(newLimitsReached)

package/src/components/jogging/JoggingJointRotationControl.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { JoggingJointRotationControl } from "./JoggingJointRotationControl";
-import { useRef } from "react";
-import { useAnimationFrame } from "../utils/hooks";
+import type { Meta, StoryObj } from "@storybook/react"
+import { JoggingJointRotationControl } from "../../index"
+import { useRef } from "react"
+import { useAnimationFrame } from "../utils/hooks"
 
 const meta: Meta<typeof JoggingJointRotationControl> = {
   component: JoggingJointRotationControl,
@@ -12,27 +12,39 @@ const meta: Meta<typeof JoggingJointRotationControl> = {
     disabled: false,
   },
   render: function Component(args) {
-    const joggingDirRef = useRef<"+" | "-" | null>(null);
-    const joggingValueRef = useRef(0);
+    const joggingDirRef = useRef<"+" | "-" | null>(null)
+    const joggingValueRef = useRef(0)
 
     useAnimationFrame(() => {
       if (joggingDirRef.current === "+") {
-        joggingValueRef.current += 1;
+        joggingValueRef.current += 1
+        if (args.upperLimitDegs != null) {
+          joggingValueRef.current = Math.min(
+            joggingValueRef.current,
+            args.upperLimitDegs,
+          )
+        }
       } else if (joggingDirRef.current === "-") {
-        joggingValueRef.current -= 1;
+        joggingValueRef.current -= 1
+        if (args.lowerLimitDegs != null) {
+          joggingValueRef.current = Math.max(
+            joggingValueRef.current,
+            args.lowerLimitDegs,
+          )
+        }
       }
     })
 
-    return <JoggingJointRotationControl
-      {...args} 
-      startJogging={(direction) => joggingDirRef.current = direction} 
-      stopJogging={() => joggingDirRef.current = null}
-      getValueDegs={() => joggingValueRef.current}
-    />;
+    return (
+      <JoggingJointRotationControl
+        {...args}
+        startJogging={(direction) => (joggingDirRef.current = direction)}
+        stopJogging={() => (joggingDirRef.current = null)}
+        getValueDegs={() => joggingValueRef.current}
+      />
+    )
   },
+}
+export default meta
 
-};
-export default meta;
-
-export const Default: StoryObj<typeof JoggingJointRotationControl> = {
-};
+export const Default: StoryObj<typeof JoggingJointRotationControl> = {}

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -1,18 +1,18 @@
-import { IconButton, Slider, Typography } from "@mui/material"
+import { IconButton, Slider, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer, useLocalObservable } from "mobx-react-lite"
-import { I18nextProvider, useTranslation } from "react-i18next"
 import { ChevronLeft, ChevronRight } from "@mui/icons-material"
 import { useAnimationFrame } from "../utils/hooks"
 import { useState } from "react"
-import i18n from '../../i18n/config';
+import { throttle } from "lodash-es"
+import { useTranslation } from "react-i18next"
 
 type JoggingJointRotationControlProps = {
   startJogging: (direction: "-" | "+") => void
   stopJogging: () => void
   lowerLimitDegs?: number
   upperLimitDegs?: number
-  getValueDegs: () => number|undefined
+  getValueDegs: () => number | undefined
 
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
@@ -28,7 +28,7 @@ export const JoggingJointRotationControl = observer(
     ...rest
   }: JoggingJointRotationControlProps) => {
     const { t } = useTranslation()
-    const [currentValue, setCurrentValue] = useState<number|undefined>()
+    const [currentValue, setCurrentValue] = useState<number | undefined>()
 
     const state = useLocalObservable(() => ({
       activeJoggingDir: null as "-" | "+" | null,
@@ -44,9 +44,11 @@ export const JoggingJointRotationControl = observer(
       },
     }))
 
-    useAnimationFrame(() => {
+    const updateValue = throttle(() => {
       setCurrentValue(getValueDegs())
-    })
+    }, 50)
+
+    useAnimationFrame(updateValue)
 
     function onPointerDownMinus(ev: React.PointerEvent) {
       // Stop right click from triggering jog
@@ -57,6 +59,17 @@ export const JoggingJointRotationControl = observer(
       if (ev.button === 0) state.startJogging("+")
     }
 
+    function onPointerUp(ev: React.PointerEvent) {
+      state.stopJogging()
+    }
+
+    function onPointerOut(ev: React.PointerEvent) {
+      // Prevent subelements of button from stopping jogging
+      if (ev.target !== ev.currentTarget) return
+
+      state.stopJogging()
+    }
+
     function formatDegrees(value: number | undefined, precision = 1) {
       if (value === undefined || isNaN(value)) return ""
 
@@ -72,30 +85,38 @@ export const JoggingJointRotationControl = observer(
     }
 
     return (
-      <I18nextProvider i18n={i18n}>
       <Stack
         height="64px"
         width="100%"
         maxWidth="300px"
         direction="row"
         {...rest}
-      >
-        <IconButton
-          onPointerDown={onPointerDownMinus}
-          onPointerUp={state.stopJogging}
-          onPointerOut={state.stopJogging}
-          disabled={disabled}
-          sx={{
+        sx={{
+          "& .MuiIconButton-root": {
             width: "52px",
             color: "white",
             alignContent: "center",
-            borderRadius: "16px 0px 0px 16px",
-            backgroundColor:
-              state.activeJoggingDir === "-" ? "#495975 !important" : "#38445A",
+            backgroundColor: "#38445A",
+            "&:disabled": {
+              opacity: 0.5,
+              backgroundColor: "#38445A",
+            },
             "& svg": {
               width: "42px",
               height: "42px",
             },
+          },
+        }}
+      >
+        <IconButton
+          onPointerDown={onPointerDownMinus}
+          onPointerUp={onPointerUp}
+          onPointerOut={onPointerOut}
+          disabled={disabled}
+          sx={{
+            borderRadius: "16px 0px 0px 16px",
+            backgroundColor:
+              state.activeJoggingDir === "-" ? "#495975" : undefined,
           }}
         >
           <ChevronLeft />
@@ -123,6 +144,7 @@ export const JoggingJointRotationControl = observer(
               fontSize: "15px",
               position: "relative",
               top: "5px",
+              color: "white",
             }}
           >
             {formatDegrees(currentValue)}
@@ -133,7 +155,7 @@ export const JoggingJointRotationControl = observer(
             aria-label="Joint position"
             min={lowerLimitDegs}
             max={upperLimitDegs}
-            value={currentValue}
+            value={currentValue || 0}
             track={false}
             sx={{
               "& .MuiSlider-mark": {
@@ -147,6 +169,7 @@ export const JoggingJointRotationControl = observer(
               "& .MuiSlider-markLabel": {
                 top: "20px",
                 fontSize: "12px",
+                color: "white",
               },
               "& .MuiSlider-rail": {
                 backgroundColor: "#1F283A",
@@ -171,27 +194,18 @@ export const JoggingJointRotationControl = observer(
 
         <IconButton
           onPointerDown={onPointerDownPlus}
-          onPointerUp={state.stopJogging}
-          onPointerOut={state.stopJogging}
+          onPointerUp={onPointerUp}
+          onPointerOut={onPointerOut}
           disabled={disabled}
           sx={{
-            width: "52px",
-            color: "white",
-            alignContent: "center",
-            fontSize: "37px",
             borderRadius: "0px 16px 16px 0px",
             backgroundColor:
               state.activeJoggingDir === "+" ? "#495975 !important" : "#38445A",
-            "& svg": {
-              width: "42px",
-              height: "42px",
-            },
           }}
         >
           <ChevronRight />
         </IconButton>
       </Stack>
-      </I18nextProvider>
     )
   },
 )

package/src/components/jogging/JoggingJointValues.tsx

@@ -2,44 +2,46 @@ import { observer } from "mobx-react-lite"
 import { Stack, Typography } from "@mui/material"
 import { useRef } from "react"
 import { useTranslation } from "react-i18next"
-import { JoggingStore } from "./JoggingStore"
+import type { JoggingStore } from "./JoggingStore"
 import { useAnimationFrame } from "../utils/hooks"
+import { CopyableText } from "../CopyableText"
 
-export const JoggingJointValues = observer(({ store }: { store: JoggingStore }) => {
-  const valueHolderRef = useRef<HTMLPreElement>(null)
-  const { t } = useTranslation()
+export const JoggingJointValues = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const poseHolderRef = useRef<HTMLPreElement>(null)
+    const { t } = useTranslation()
 
-  function getCurrentValueString() {
-    const { joints } =
-      store.jogger.motionStream.rapidlyChangingMotionState.state.joint_position
-    return `{${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}}`
-  }
+    function getCurrentPoseString() {
+      const { joints } =
+        store.jogger.motionStream.rapidlyChangingMotionState.state
+          .joint_position
+      return `{${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}}`
+    }
 
-  useAnimationFrame(() => {
-    if (!valueHolderRef.current) return
-    valueHolderRef.current.textContent = getCurrentValueString()
-  })
+    useAnimationFrame(() => {
+      if (!poseHolderRef.current) return
+      poseHolderRef.current.textContent = getCurrentPoseString()
+    })
 
-  return (
-    <Stack alignItems="center" marginTop="0.8rem">
-      <Typography
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
         sx={{
-          fontSize: "12px",
-          marginTop: "0.8rem",
+          padding: "16px",
+          "& label": {
+            opacity: 0.7,
+            fontSize: "12px",
+            marginBottom: "4px",
+          },
         }}
       >
-        {t("Jogging.Joints.JointValues.lb")}
-      </Typography>
-      <Typography
-        component="pre"
-        ref={valueHolderRef}
-        sx={{
-          fontSize: "14px",
-          opacity: 0.6,
-        }}
-      >
-        {getCurrentValueString()}
-      </Typography>
-    </Stack>
-  )
-})
+        <CopyableText
+          label={"Pose"}
+          value={getCurrentPoseString()}
+          ref={poseHolderRef}
+        />
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingOptions.tsx

@@ -1,96 +1,146 @@
-import { Stack, MenuItem, InputLabel, Select } from "@mui/material"
+import {
+  Stack,
+  MenuItem,
+  InputLabel,
+  Select,
+  ToggleButtonGroup,
+  ToggleButton,
+} from "@mui/material"
 import { observer } from "mobx-react-lite"
 import type { IncrementOptionId, JoggingStore } from "./JoggingStore"
 import { useTranslation } from "react-i18next"
-import { useThemeColors } from "../../themes/wbTheme"
-import { ThemeSelect } from "../ThemeSelect"
+import OrientationCoordSysIcon from "../../icons/orientation-coord-system.svg"
+import OrientationToolIcon from "../../icons/orientation-tool.svg"
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
-  const colors = useThemeColors()
+
+  function onOrientationChange(
+    _event: React.MouseEvent<HTMLElement>,
+    newOrientation: string,
+  ) {
+    if (newOrientation === "coordsys" || newOrientation === "tool")
+      store.setSelectedOrientation(newOrientation)
+  }
 
   return (
-    <Stack
-      direction={"row"}
-      alignItems={"center"}
-      spacing={1}
-      sx={{
-        padding: "16px",
-        "& label": {
-          color: colors.textSubtle,
-          fontSize: "12px",
-          marginBottom: "4px",
-        },
-      }}
-    >
-      {/* Coordinate system */}
-      <Stack width="33%">
-        <InputLabel id="jogging-coord-select">{"Coordinate Sys."}</InputLabel>
-        <ThemeSelect
-          kind="filled"
-          labelId="jogging-coord-select"
-          value={store.selectedCoordSystemId}
-          displayEmpty={true}
-          onChange={(event) => {
-            store.setSelectedCoordSystemId(event.target.value as string)
-          }}
-          disabled={store.isLocked}
-        >
-          {store.coordSystems.map((cs) => (
-            <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
-              {cs.name || cs.coordinate_system}
-            </MenuItem>
-          ))}
-        </ThemeSelect>
-      </Stack>
+    <>
+      <Stack
+        direction={"row"}
+        alignItems={"center"}
+        spacing={2}
+        sx={{
+          padding: "16px",
+          paddingTop: "8px",
+          "& label": {
+            opacity: 0.7,
+            fontSize: "12px",
+            marginBottom: "4px",
+          },
+        }}
+      >
+        {/* Coordinate system */}
+        <Stack width="50%">
+          <InputLabel id="jogging-coord-select">{"Coordinate Sys."}</InputLabel>
+          <Select
+            labelId="jogging-coord-select"
+            value={store.selectedCoordSystemId}
+            displayEmpty={true}
+            onChange={(event) => {
+              store.setSelectedCoordSystemId(event.target.value as string)
+            }}
+            disabled={store.isLocked}
+          >
+            {store.coordSystems.map((cs) => (
+              <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
+                {cs.name || cs.coordinate_system}
+              </MenuItem>
+            ))}
+          </Select>
+        </Stack>
 
-      {/* TCP selection */}
-      <Stack width="33%">
-        <InputLabel id="jogging-tcp-select">TCP</InputLabel>
-        <ThemeSelect
-          kind="filled"
-          labelId="jogging-tcp-select"
-          value={store.selectedTcpId}
-          onChange={(event) => {
-            store.setSelectedTcpId(event.target.value as string)
-          }}
-          disabled={store.isLocked}
-        >
-          {store.tcps.map((tcp) => (
-            <MenuItem key={tcp.id} value={tcp.id}>
-              {tcp.id}
-            </MenuItem>
-          ))}
-        </ThemeSelect>
+        {/* TCP selection */}
+        <Stack width="50%">
+          <InputLabel id="jogging-tcp-select">TCP</InputLabel>
+          <Select
+            labelId="jogging-tcp-select"
+            value={store.selectedTcpId}
+            onChange={(event) => {
+              store.setSelectedTcpId(event.target.value as string)
+            }}
+            disabled={store.isLocked}
+          >
+            {store.tcps.map((tcp) => (
+              <MenuItem key={tcp.id} value={tcp.id}>
+                {tcp.id}
+              </MenuItem>
+            ))}
+          </Select>
+        </Stack>
       </Stack>
 
-      {/* Increment selection */}
-      <Stack width="33%">
-        <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
-        <ThemeSelect
-          kind="filled"
-          labelId="jogging-increment-select"
-          value={store.selectedIncrementId}
-          onChange={(event) => {
-            store.setSelectedIncrementId(
-              event.target.value as IncrementOptionId,
-            )
-          }}
-          disabled={store.isLocked}
-        >
-          <MenuItem key="continuous" value="continuous">
-            {t("Jogging.Increment.Continuous.dd")}
-          </MenuItem>
+      <Stack
+        direction={"row"}
+        alignItems={"center"}
+        spacing={2}
+        sx={{
+          padding: "16px",
+          paddingTop: "8px",
+          "& label": {
+            opacity: 0.7,
+            fontSize: "12px",
+            marginBottom: "4px",
+          },
+        }}
+      >
+        {/* Orientation */}
+        <Stack width="35%">
+          <InputLabel id="orientation-select">
+            {t("Jogging.Cartesian.Orientation.lb")}
+          </InputLabel>
+          <ToggleButtonGroup
+            value={store.selectedOrientation}
+            onChange={onOrientationChange}
+            exclusive
+            aria-labelledby="orientation-select"
+            disabled={store.isLocked}
+          >
+            <ToggleButton value="coordsys">
+              <OrientationCoordSysIcon />
+            </ToggleButton>
+            <ToggleButton value="tool">
+              <OrientationToolIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
 
-          {store.discreteIncrementOptions.map((inc) => (
-            <MenuItem key={inc.id} value={inc.id}>
-              {store.currentMotionType === "translate"
-                ? `${inc.mm}mm`
-                : `${inc.degrees}°`}
+        {/* Increment selection */}
+        <Stack width="65%">
+          <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
+          <Select
+            labelId="jogging-increment-select"
+            value={store.selectedIncrementId}
+            onChange={(event) => {
+              store.setSelectedIncrementId(
+                event.target.value as IncrementOptionId,
+              )
+            }}
+            disabled={store.isLocked}
+          >
+            <MenuItem key="continuous" value="continuous">
+              {t("Jogging.Increment.Continuous.dd")}
             </MenuItem>
-          ))}
-        </ThemeSelect>
+
+            {store.discreteIncrementOptions.map((inc) => (
+              <MenuItem key={inc.id} value={inc.id}>
+                {store.currentMotionType === "translate"
+                  ? `${inc.mm}mm`
+                  : `${inc.degrees}°`}
+              </MenuItem>
+            ))}
+          </Select>
+        </Stack>
       </Stack>
-    </Stack>
+    </>
   )
 })