@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/jogging/JoggingJointTab.tsx

@@ -0,0 +1,126 @@
+import { useTheme } from "@mui/material/styles"
+import Divider from "@mui/material/Divider"
+import Stack from "@mui/material/Stack"
+import Typography from "@mui/material/Typography"
+import { JointTypeEnum } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import type { ReactNode } from "react"
+import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
+import { JoggingJointValueControl } from "./JoggingJointValueControl"
+import type { JoggingStore } from "./JoggingStore"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+
+export const JoggingJointTab = observer(
+  ({ store, children }: { store: JoggingStore; children?: ReactNode }) => {
+    const theme = useTheme()
+    async function startJointJogging(opts: {
+      joint: number
+      direction: "-" | "+"
+    }) {
+      await store.activate()
+
+      await store.jogger.rotateJoints({
+        joint: opts.joint,
+        direction: opts.direction,
+        velocityUnit:
+          store.jointType === JointTypeEnum.PrismaticJoint ? "mm/s" : "rad/s",
+        velocityValue:
+          store.jointType === JointTypeEnum.PrismaticJoint
+            ? store.translationVelocityMmPerSec
+            : store.rotationVelocityRadsPerSec,
+      })
+    }
+
+    async function stopJointJogging() {
+      await store.jogger.stop()
+      await store.deactivate()
+    }
+
+    return (
+      <Stack
+        data-testid="jogging-joint-tab"
+        aria-label="jogging-joint-tab"
+        flexGrow={1}
+        gap={2}
+        sx={{ padding: "18px 24px" }}
+      >
+        <JoggingVelocitySlider
+          store={store}
+          useDegree={store.jointType === JointTypeEnum.RevoluteJoint}
+        />
+
+        <Divider />
+
+        <Stack
+          justifyContent="center"
+          alignItems="stretch"
+          sx={{ flexGrow: "1" }}
+        >
+          <Stack
+            data-testid="jogging-joint-value-controls-wrapper"
+            aria-label="jogging-joint-value-controls-wrapper"
+            alignItems="center"
+            gap="24px"
+          >
+            {store.jogger.motionStream.joints.map((joint) => {
+              const jointLimits =
+                store.motionGroupDescription.operation_limits.auto_limits
+                  ?.joints?.[joint.index]?.position
+
+              return (
+                <Stack
+                  key={`joint-${joint.index}`}
+                  data-testid={`jogging-joint-value-control-${joint.index}`}
+                  aria-label={`jogging-joint-value-control-${joint.index}`}
+                  direction="row"
+                  alignItems="center"
+                  justifyContent={"center"}
+                  spacing={1.5}
+                  width={"100%"}
+                >
+                  {store.showJointsLegend && (
+                    <Typography
+                      color={
+                        store.isLocked
+                          ? theme.palette.text.disabled
+                          : theme.palette.text.secondary
+                      }
+                    >
+                      {`G${joint.index + 1}`}
+                    </Typography>
+                  )}
+
+                  <JoggingJointValueControl
+                    disabled={store.isLocked}
+                    lowerLimit={jointLimits?.lower_limit}
+                    upperLimit={jointLimits?.upper_limit}
+                    useDegree={store.jointType === JointTypeEnum.RevoluteJoint}
+                    getValue={() => {
+                      const value =
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .joint_position[joint.index]
+                      return value !== undefined ? value : undefined
+                    }}
+                    startJogging={(direction: "-" | "+") =>
+                      startJointJogging({
+                        joint: joint.index,
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJointJogging}
+                  />
+                </Stack>
+              )
+            })}
+          </Stack>
+        </Stack>
+        <JoggingJointLimitDetector store={store} />
+
+        {children && <Divider />}
+
+        {/* Custom content */}
+        {children}
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingJointValueControl.tsx

@@ -0,0 +1,293 @@
+import ChevronLeft from "@mui/icons-material/ChevronLeft"
+import ChevronRight from "@mui/icons-material/ChevronRight"
+import IconButton from "@mui/material/IconButton"
+import Slider from "@mui/material/Slider"
+import Stack from "@mui/material/Stack"
+import { useTheme } from "@mui/material/styles"
+import Typography from "@mui/material/Typography"
+import { radiansToDegrees } from "@wandelbots/nova-js"
+import throttle from "lodash-es/throttle.js"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
+import { useAnimationFrame } from "../utils/hooks"
+
+type JoggingJointValueControlProps = {
+  startJogging: (direction: "-" | "+") => void
+  stopJogging: () => void
+  lowerLimit?: number
+  upperLimit?: number
+  useDegree: boolean
+  getValue: () => number | undefined
+  disabled?: boolean
+} & React.ComponentProps<typeof Stack>
+
+/** A input widget to control an individual joint */
+export const JoggingJointValueControl = externalizeComponent(
+  observer(
+    ({
+      startJogging,
+      stopJogging,
+      lowerLimit,
+      upperLimit,
+      useDegree,
+      getValue,
+      disabled,
+      ...rest
+    }: JoggingJointValueControlProps) => {
+      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,
+
+        startJogging(dir: "-" | "+") {
+          this.activeJoggingDir = dir
+          startJogging(dir)
+        },
+
+        stopJogging() {
+          this.activeJoggingDir = null
+          stopJogging()
+        },
+      }))
+
+      const updateValue = throttle(() => {
+        const newValue = useDegree ? convertToDegree(getValue()) : getValue()
+        if (
+          newValue === undefined ||
+          currentValue === undefined ||
+          Math.abs(currentValue - newValue) > 1e-9
+        ) {
+          setCurrentValue(newValue)
+        }
+      }, 50)
+
+      useAnimationFrame(updateValue)
+
+      function convertToDegree(value: number | undefined) {
+        if (value === undefined) {
+          return undefined
+        }
+        return radiansToDegrees(value)
+      }
+
+      function onPointerDownMinus(ev: React.PointerEvent) {
+        // Stop right click from triggering jog
+        if (ev.button === 0) state.startJogging("-")
+      }
+
+      function onPointerDownPlus(ev: React.PointerEvent) {
+        if (ev.button === 0) state.startJogging("+")
+      }
+
+      function onPointerUp(ev: React.PointerEvent) {
+        state.stopJogging()
+      }
+
+      function onPointerOut(ev: React.PointerEvent) {
+        state.stopJogging()
+      }
+
+      function formatDegrees(value: number | undefined, precision = 1) {
+        if (value === undefined || Number.isNaN(value)) return ""
+
+        const output = t("General.degree.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+      function formatMm(value: number | undefined, precision = 1) {
+        if (value === undefined || Number.isNaN(value)) return ""
+
+        const output = t("General.mm.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+
+      return (
+        <Stack
+          height="64px"
+          width="100%"
+          maxWidth="260px"
+          direction="row"
+          {...rest}
+          sx={{
+            "& .MuiIconButton-root": {
+              width: "52px",
+              color: theme.palette.text.primary,
+              alignContent: "center",
+              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,
+              },
+            },
+          }}
+        >
+          <IconButton
+            onPointerDown={onPointerDownMinus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
+            disableRipple
+            sx={{
+              borderRadius: "16px 0px 0px 16px",
+              ...(state.activeJoggingDir === "-" ? pressedButtonStyle : {}),
+            }}
+          >
+            <ChevronLeft
+              sx={{
+                pointerEvents: "none",
+                color:
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
+              }}
+            />
+          </IconButton>
+
+          <Stack
+            flexGrow={1}
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+              borderStyle: "solid",
+              borderLeftWidth: 0,
+              borderRightWidth: 0,
+              border: "none",
+              backgroundColor: theme.palette.backgroundPaperElevation?.[11],
+              paddingLeft: "20px",
+              paddingRight: "20px",
+              zIndex: 1,
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "15px",
+                fontWeight: 700,
+                position: "relative",
+                top: "5px",
+                fontVariantNumeric: "tabular-nums",
+                minWidth: "80px",
+                textAlign: "center",
+
+                color: disabled
+                  ? theme.palette.action.disabled
+                  : theme.palette.text.primary,
+              }}
+            >
+              {useDegree ? formatDegrees(currentValue) : formatMm(currentValue)}
+            </Typography>
+
+            <Slider
+              disabled
+              aria-label="Joint position"
+              min={useDegree ? convertToDegree(lowerLimit) : lowerLimit}
+              max={useDegree ? convertToDegree(upperLimit) : upperLimit}
+              value={currentValue || 0}
+              track={false}
+              sx={{
+                "& .MuiSlider-mark": {
+                  display: "none",
+                },
+                "& .MuiSlider-thumb": {
+                  width: "5px",
+                  height: "12px",
+                  borderRadius: "2px",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.primary,
+                },
+                "& .MuiSlider-markLabel": {
+                  top: "20px",
+                  fontSize: "12px",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.secondary,
+                },
+                "& .MuiSlider-rail": {
+                  backgroundColor: theme.palette.backgroundPaperElevation?.[5],
+                  opacity: 1,
+                },
+              }}
+              marks={
+                lowerLimit !== undefined &&
+                upperLimit !== undefined && [
+                  {
+                    value: (useDegree
+                      ? convertToDegree(lowerLimit)
+                      : lowerLimit) as number,
+                    label: useDegree
+                      ? formatDegrees(convertToDegree(lowerLimit), 0)
+                      : formatMm(lowerLimit),
+                  },
+                  {
+                    value: (useDegree
+                      ? convertToDegree(upperLimit)
+                      : upperLimit) as number,
+                    label: useDegree
+                      ? formatDegrees(convertToDegree(upperLimit), 0)
+                      : formatMm(upperLimit),
+                  },
+                ]
+              }
+            />
+          </Stack>
+
+          <IconButton
+            onPointerDown={onPointerDownPlus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
+            disableRipple
+            sx={{
+              borderRadius: "0px 16px 16px 0px",
+              ...(state.activeJoggingDir === "+" ? pressedButtonStyle : {}),
+            }}
+          >
+            <ChevronRight
+              sx={{
+                pointerEvents: "none",
+                color:
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
+              }}
+            />
+          </IconButton>
+        </Stack>
+      )
+    },
+  ),
+)
+
+export default JoggingJointValueControl

package/src/components/jogging/JoggingOptions.tsx

@@ -0,0 +1,163 @@
+import Box from "@mui/material/Box"
+import MenuItem from "@mui/material/MenuItem"
+import { observer } from "mobx-react-lite"
+import { useId } from "react"
+import { useTranslation } from "react-i18next"
+import AdornedSelect from "../experimental/utils/AdornedSelect"
+import {
+  ORIENTATION_IDS,
+  type IncrementOptionId,
+  type JoggingStore,
+  type OrientationId,
+} from "./JoggingStore"
+
+export const JoggingOptions = observer(
+  ({ store, useDegree }: { store: JoggingStore; useDegree: boolean }) => {
+    const { t } = useTranslation()
+    const componentId = useId()
+    const joggingOptions: React.ReactElement[] = []
+
+    function translateOrientation(orientation: OrientationId): string {
+      switch (orientation) {
+        case "coordsys":
+          return t("Jogging.Orientation.coordsys")
+        case "tool":
+          return t("Jogging.Orientation.tool")
+        default:
+          return orientation
+      }
+    }
+
+    if (store.showCoordSystemSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="coord"
+          labelId={`jogging-coord-select-${componentId}`}
+          labelValue={t("Jogging.CoordinateSystem.hlb")}
+          value={store.selectedCoordSystemId}
+          size="small"
+          variant="filled"
+          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 && store.coordSystemCountByName[cs.name] > 1
+                ? `${cs.name} / ${cs.coordinate_system}`
+                : cs.name || cs.coordinate_system}
+            </MenuItem>
+          ))}
+        </AdornedSelect>,
+      )
+    }
+
+    if (store.showTcpSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="tcp"
+          labelId={`jogging-tcp-select-${componentId}`}
+          labelValue="TCP"
+          value={store.selectedTcpId}
+          size="small"
+          variant="filled"
+          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>
+          ))}
+        </AdornedSelect>,
+      )
+    }
+
+    if (store.showOrientationSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="orientation"
+          labelValue={t("Jogging.Cartesian.Orientation.lb")}
+          labelId={`orientation-select-${componentId}`}
+          value={store.selectedOrientation}
+          onChange={(event) =>
+            store.setSelectedOrientation(event.target.value as OrientationId)
+          }
+          disabled={store.isLocked}
+        >
+          {ORIENTATION_IDS.map((orientationId) => (
+            <MenuItem key={orientationId} value={orientationId}>
+              {translateOrientation(orientationId)}
+            </MenuItem>
+          ))}
+        </AdornedSelect>,
+      )
+    }
+
+    if (store.showIncrementSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="increment"
+          labelValue={t("Jogging.Increment.hlb")}
+          labelId={`jogging-increment-select-${componentId}`}
+          size="small"
+          variant="filled"
+          value={store.activeDiscreteIncrement?.id || "continuous"}
+          onChange={(event) =>
+            store.setSelectedIncrementId(
+              event.target.value as IncrementOptionId,
+            )
+          }
+          disabled={store.isLocked}
+        >
+          <MenuItem key="continuous" value="continuous">
+            {t("Jogging.Increment.Continuous.dd")}
+          </MenuItem>
+
+          {store.selectedOrientation === "tool"
+            ? null
+            : store.discreteIncrementOptions.map((inc) => (
+                <MenuItem key={inc.id} value={inc.id}>
+                  {useDegree ? `${inc.degrees}°` : `${inc.mm}mm`}
+                </MenuItem>
+              ))}
+        </AdornedSelect>,
+      )
+    }
+
+    return (
+      <Box
+        component="div"
+        data-testid="jogging-options"
+        aria-label="jogging-options"
+        sx={{
+          display: "grid",
+          gap: "16px",
+          gridTemplateColumns: "1fr 1fr",
+          gridAutoRows: "min-content",
+          "& label": { opacity: 0.7, fontSize: "12px", marginBottom: "4px" },
+        }}
+      >
+        {joggingOptions.map((select, idx) => (
+          <Box
+            // biome-ignore lint/suspicious/noArrayIndexKey: pre-biome code
+            key={idx}
+            sx={{
+              gridColumn:
+                joggingOptions.length % 2 === 1 &&
+                idx === joggingOptions.length - 1
+                  ? "span 2"
+                  : "auto",
+            }}
+          >
+            {select}
+          </Box>
+        ))}
+      </Box>
+    )
+  },
+)