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

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -0,0 +1,237 @@
+import { useTheme } from "@mui/material/styles"
+import IconButton from "@mui/material/IconButton"
+import Typography from "@mui/material/Typography"
+import Stack from "@mui/material/Stack"
+import { observer } from "mobx-react-lite"
+import React, { useEffect, 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"
+import type { JoggingDirection } from "./JoggingStore"
+
+type JoggingCartesianAxisControlProps = {
+  colors?: AxisControlComponentColors
+  label: ReactNode
+  getDisplayedValue: () => string
+  startJogging: (direction: JoggingDirection) => void
+  stopJogging: () => void
+  disabled?: boolean
+  /** If set, the corresponding button will be rendered in the pressed state */
+  activeJoggingDirection?: JoggingDirection
+} & React.ComponentProps<typeof Stack>
+
+/** A input widget to control an individual cartesian axis */
+export const JoggingCartesianAxisControl = externalizeComponent(
+  observer(
+    ({
+      colors,
+      label,
+      getDisplayedValue,
+      startJogging,
+      stopJogging,
+      disabled,
+      activeJoggingDirection,
+      ...rest
+    }: JoggingCartesianAxisControlProps) => {
+      useAnimationFrame(() => {
+        const displayValue = getDisplayedValue()
+        const element = valueContainerRef.current
+        if (!element) return
+
+        element.textContent = displayValue
+      })
+      const theme = useTheme()
+
+      const [localActiveJoggingDirection, setLocalActiveJoggingDirection] =
+        useState<JoggingDirection | null>(null)
+
+      // Trigger pointer "release" events because e.g. firefox does not trigger pointer events as soon as a component is disabled
+      // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
+      useEffect(() => {
+        if (!disabled) {
+          return
+        }
+        onPointerUpOrOut()
+      }, [disabled])
+
+      // Handle both controlled and uncontrolled states
+      const showJoggingDirection =
+        activeJoggingDirection || localActiveJoggingDirection
+
+      const valueContainerRef = useRef<HTMLParagraphElement>(null)
+
+      if (!colors) {
+        colors = {
+          color: "#fff",
+          backgroundColor: "#000",
+          borderColor: "#000",
+          buttonBackgroundColor: {
+            disabled: "#000",
+            default: "#000",
+            hovered: "#000",
+            pressed: "#000",
+          },
+          labelColor: "#000",
+        }
+      }
+
+      const borderColor = showJoggingDirection
+        ? colors.buttonBackgroundColor?.pressed
+        : colors.borderColor
+
+      const sxAxisControlButtonBase = {
+        width: "55px",
+        color: colors.color,
+        path: { fill: colors.color },
+        alignContent: "center",
+        fontSize: "37px",
+        svg: {
+          pointerEvents: "none",
+        },
+      }
+
+      const sxAxisControlButtonDefault = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.default,
+        ":hover": {
+          backgroundColor: colors.buttonBackgroundColor?.hovered,
+        },
+        ":active": {
+          backgroundColor: colors.buttonBackgroundColor?.pressed,
+          color: colors.backgroundColor,
+          path: { fill: colors.backgroundColor },
+        },
+        ":disabled": {
+          backgroundColor: colors.buttonBackgroundColor?.disabled,
+          "svg path": { fill: theme.palette.action.disabled },
+        },
+      }
+
+      const sxAxisControlButtonPressed = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.pressed,
+        color: colors.backgroundColor,
+        path: { fill: colors.backgroundColor },
+        ":disabled": {
+          backgroundColor: colors.buttonBackgroundColor?.pressed,
+          "svg path": { fill: theme.palette.action.disabled },
+        },
+      }
+
+      function onPointerDown(
+        ev: React.PointerEvent,
+        direction: JoggingDirection,
+      ) {
+        if (disabled) {
+          return
+        }
+
+        if (ev.button === 0) {
+          setLocalActiveJoggingDirection(direction)
+          startJogging(direction)
+        }
+      }
+
+      function onPointerUpOrOut() {
+        setLocalActiveJoggingDirection(null)
+        stopJogging()
+      }
+
+      return (
+        <Stack height="64px" direction="row" justifyContent="center" {...rest}>
+          <IconButton
+            disabled={disabled}
+            disableRipple
+            onPointerDown={(ev: React.PointerEvent) => onPointerDown(ev, "-")}
+            onPointerUp={onPointerUpOrOut}
+            onPointerOut={onPointerUpOrOut}
+            size="large"
+            sx={{
+              ...(showJoggingDirection === "-"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
+              borderRadius: "16px 0px 0px 16px",
+              borderLeft: `2px solid ${borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
+            }}
+          >
+            <JogMinus />
+          </IconButton>
+
+          <Stack
+            spacing="6px"
+            sx={{
+              width: "150px",
+              backgroundColor: colors.backgroundColor,
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: "0.9",
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
+            }}
+          >
+            <Stack
+              height="22px"
+              direction="row"
+              alignItems="center"
+              justifyItems="center"
+              spacing={1}
+              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>
+            <Typography
+              height="22px"
+              sx={{
+                fontSize: "15px",
+                color: disabled ? theme.palette.action.disabled : colors.color,
+                fontWeight: 700,
+                fontVariantNumeric: "tabular-nums",
+                minWidth: "80px",
+                textAlign: "center",
+              }}
+              ref={valueContainerRef}
+            >
+              {getDisplayedValue()}
+            </Typography>
+          </Stack>
+
+          <IconButton
+            disableRipple
+            disabled={disabled}
+            onPointerDown={(ev: React.PointerEvent) => onPointerDown(ev, "+")}
+            onPointerUp={onPointerUpOrOut}
+            onPointerOut={onPointerUpOrOut}
+            size="large"
+            sx={{
+              ...(showJoggingDirection === "+"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
+              borderRadius: "0px 16px 16px 0px",
+              borderRight: `2px solid ${borderColor ?? "#fff"}`,
+              borderBottom: `2px solid ${borderColor ?? "#fff"}`,
+              borderTop: `2px solid ${borderColor ?? "#fff"}`,
+            }}
+          >
+            <JogPlus />
+          </IconButton>
+        </Stack>
+      )
+    },
+  ),
+)
+
+export default JoggingCartesianAxisControl

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -0,0 +1,349 @@
+import { useTheme, type Theme } from "@mui/material/styles"
+import Divider from "@mui/material/Divider"
+import Stack from "@mui/material/Stack"
+import ToggleButton from "@mui/material/ToggleButton"
+import Typography from "@mui/material/Typography"
+import {
+  degreesToRadians,
+  radiansToDegrees,
+  XYZ_TO_VECTOR,
+} from "@wandelbots/nova-js"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import XAxisIcon from "../../icons/axis-x.svg"
+import YAxisIcon from "../../icons/axis-y.svg"
+import ZAxisIcon from "../../icons/axis-z.svg"
+import RotationIcon from "../../icons/rotation.svg"
+import type { Vector3Simple } from "../../lib/JoggerConnection"
+import { useReaction } from "../utils/hooks"
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
+import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
+import { JoggingOptions } from "./JoggingOptions"
+import type {
+  DiscreteIncrementOption,
+  JoggingAxis,
+  JoggingDirection,
+  JoggingStore,
+} from "./JoggingStore"
+import { JoggingToggleButtonGroup } from "./JoggingToggleButtonGroup"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+
+type JoggingCartesianOpts = {
+  axis: JoggingAxis
+  motionType: "translate" | "rotate"
+  direction: JoggingDirection
+}
+
+export const JoggingCartesianTab = observer(
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+  }) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+
+    function onMotionTypeChange(
+      _event: React.MouseEvent<HTMLElement>,
+      newMotionType: string,
+    ) {
+      if (newMotionType === "translate" || newMotionType === "rotate")
+        store.setSelectedCartesianMotionType(newMotionType)
+    }
+
+    useReaction(
+      () => [store.selectedCoordSystemId, store.selectedTcpId],
+      () => {
+        store.jogger.motionStream.motionStateSocket.changeUrl(
+          store.jogger.nova.makeWebsocketURL(
+            `/controllers/${store.jogger.motionStream.controllerId}/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}`,
+          ),
+        )
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
+      { fireImmediately: true } as any,
+    )
+
+    async function runIncrementalCartesianJog(
+      opts: JoggingCartesianOpts,
+      increment: DiscreteIncrementOption,
+    ) {
+      const jogger = await store.activate()
+
+      const tcpPose = jogger.motionStream.rapidlyChangingMotionState.tcp_pose
+      const jointPosition = jogger.motionStream.rapidlyChangingMotionState
+        .joint_position as Vector3Simple
+      if (!tcpPose) return
+
+      await store.withMotionLock(async () => {
+        try {
+          store.setCurrentIncrementJog({
+            axis: opts.axis,
+            direction: opts.direction,
+          })
+          await store.jogger.runIncrementalCartesianMotion({
+            currentTcpPose: tcpPose,
+            currentJoints: jointPosition,
+            coordSystemId: store.activeCoordSystemId,
+            velocityInRelevantUnits:
+              store.selectedCartesianMotionType === "translate"
+                ? store.translationVelocityMmPerSec
+                : store.rotationVelocityRadsPerSec,
+            axis: opts.axis,
+            direction: opts.direction,
+            motion:
+              store.selectedCartesianMotionType === "translate"
+                ? {
+                    type: "translate",
+                    distanceMm: increment.mm,
+                  }
+                : {
+                    type: "rotate",
+                    distanceRads: degreesToRadians(increment.degrees),
+                  },
+          })
+        } finally {
+          store.setCurrentIncrementJog(null)
+          await store.deactivate()
+        }
+      })
+    }
+
+    async function startCartesianJogging(opts: JoggingCartesianOpts) {
+      if (store.isLocked) return
+
+      const jogger = await store.activate()
+      if (store.activeDiscreteIncrement) {
+        return runIncrementalCartesianJog(opts, store.activeDiscreteIncrement)
+      }
+
+      if (opts.motionType === "translate") {
+        await store.jogger.translateTCP({
+          axis: opts.axis,
+          direction: opts.direction,
+          velocityMmPerSec: store.translationVelocityMmPerSec,
+        })
+      } else {
+        await store.jogger.rotateTCP({
+          axis: opts.axis,
+          direction: opts.direction,
+          velocityRadsPerSec: store.rotationVelocityRadsPerSec,
+        })
+      }
+    }
+
+    async function stopJogging() {
+      if (store.isLocked) return
+
+      if (store.activeDiscreteIncrement) {
+        return
+      }
+
+      await store.deactivate()
+    }
+
+    function getAxisColors(
+      axisId: "X" | "Y" | "Z",
+      motionType: "translate" | "rotate",
+      theme: Theme,
+    ) {
+      const axisColors =
+        theme.componentsExt?.JoggingPanel?.JoggingCartesian?.Axis
+
+      if (!axisColors) return undefined
+
+      if (motionType === "translate") {
+        return axisColors[axisId]
+      }
+
+      return axisColors.CustomRotation ?? axisColors[axisId]
+    }
+
+    const axisList = [
+      {
+        id: "x",
+        icon: <XAxisIcon />,
+        colors: getAxisColors("X", store.selectedCartesianMotionType, theme),
+      },
+      {
+        id: "y",
+        icon: <YAxisIcon />,
+        colors: getAxisColors("Y", store.selectedCartesianMotionType, theme),
+      },
+      {
+        id: "z",
+        icon: <ZAxisIcon />,
+        colors: getAxisColors("Z", store.selectedCartesianMotionType, theme),
+      },
+    ] as const
+
+    function formatMM(value: number) {
+      return t("General.mm.variable", { amount: value.toFixed(1) })
+    }
+
+    function formatDegrees(value: number) {
+      return t("General.degree.variable", {
+        amount: radiansToDegrees(value).toFixed(1),
+      })
+    }
+
+    return (
+      <Stack
+        data-testid="jogging-cartesian-tab"
+        aria-label="jogging-cartesian-tab"
+        flexGrow={1}
+        gap={2}
+        sx={{ padding: "18px 24px" }}
+      >
+        <Stack gap={2}>
+          <JoggingOptions
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
+          <JoggingVelocitySlider
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
+          <Divider />
+        </Stack>
+
+        <Stack
+          //maxWidth="296px"
+          marginLeft="auto"
+          marginRight="auto"
+          gap="24px"
+          justifyContent="center"
+          sx={{ flexGrow: "1" }}
+        >
+          <Stack
+            alignItems="center"
+            justifyContent="center"
+            gap="24px"
+            sx={{ flexGrow: 1 }}
+          >
+            {/* Translate or rotate toggle */}
+            <JoggingToggleButtonGroup
+              value={store.selectedCartesianMotionType}
+              onChange={onMotionTypeChange}
+              exclusive
+              aria-label={t("Jogging.Cartesian.MotionType.lb")}
+              sx={{ justifyContent: "center" }}
+            >
+              <ToggleButton value="translate">
+                {t("Jogging.Cartesian.Translation.bt")}
+              </ToggleButton>
+              <ToggleButton value="rotate">
+                {t("Jogging.Cartesian.Rotation.bt")}
+              </ToggleButton>
+            </JoggingToggleButtonGroup>
+
+            {/* Cartesian translate jogging */}
+            {store.selectedCartesianMotionType === "translate" &&
+              axisList.map((axis) => (
+                <JoggingCartesianAxisControl
+                  key={axis.id}
+                  data-testid={`jogging-cartesian-axis-control-${axis.id}`}
+                  aria-label={`jogging-cartesian-axis-control-${axis.id}`}
+                  colors={axis.colors}
+                  disabled={store.isLocked}
+                  activeJoggingDirection={
+                    store.incrementJogInProgress?.axis === axis.id
+                      ? store.incrementJogInProgress.direction
+                      : undefined
+                  }
+                  label={
+                    <>
+                      {axis.icon}
+                      <Typography
+                        sx={{
+                          fontSize: "24px",
+                          color:
+                            axis.colors?.labelColor ??
+                            theme.palette.text.primary,
+                        }}
+                      >
+                        {axis.id.toUpperCase()}
+                      </Typography>
+                    </>
+                  }
+                  getDisplayedValue={() =>
+                    formatMM(
+                      store.jogger.motionStream.rapidlyChangingMotionState
+                        .tcp_pose?.position?.[XYZ_TO_VECTOR[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}
+                  data-testid={`jogging-cartesian-axis-control-${axis.id}`}
+                  aria-label={`jogging-cartesian-axis-control-${axis.id}`}
+                  colors={axis.colors}
+                  disabled={store.isLocked}
+                  activeJoggingDirection={
+                    store.incrementJogInProgress?.axis === axis.id
+                      ? store.incrementJogInProgress.direction
+                      : undefined
+                  }
+                  label={
+                    <>
+                      <RotationIcon />
+                      <Typography
+                        sx={{
+                          fontSize: "24px",
+                          color:
+                            axis.colors?.labelColor ??
+                            theme.palette.text.primary,
+                        }}
+                      >
+                        {axis.id.toUpperCase()}
+                      </Typography>
+                    </>
+                  }
+                  getDisplayedValue={() =>
+                    formatDegrees(
+                      store.jogger.motionStream.rapidlyChangingMotionState
+                        .tcp_pose?.orientation?.[XYZ_TO_VECTOR[axis.id]] || 0,
+                    )
+                  }
+                  startJogging={(direction: "-" | "+") =>
+                    startCartesianJogging({
+                      axis: axis.id,
+                      motionType: "rotate",
+                      direction,
+                    })
+                  }
+                  stopJogging={stopJogging}
+                />
+              ))}
+          </Stack>
+        </Stack>
+
+        {/* Show message if joint limits reached */}
+        <JoggingJointLimitDetector store={store} />
+
+        {children && <Divider />}
+
+        {/* Custom content */}
+
+        {children}
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingFreedriveTab.tsx

@@ -0,0 +1,8 @@
+import Stack from "@mui/material/Stack"
+export const JoggingFreedriveTab = () => {
+  return (
+    <Stack height={"300px"} alignItems={"center"} justifyContent={"center"}>
+      {"TODO: JoggingFreedriveTab"}
+    </Stack>
+  )
+}

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -0,0 +1,57 @@
+import Typography from "@mui/material/Typography"
+import isEqual from "lodash-es/isEqual.js"
+import { observer } from "mobx-react-lite"
+import { useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useAnimationFrame } from "../utils/hooks"
+import type { JoggingStore } from "./JoggingStore"
+
+/**
+ * Monitors the active robot motion state and displays a message if
+ * any joint limits are reached.
+ */
+export const JoggingJointLimitDetector = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const { t } = useTranslation()
+
+    const [jointLimitsReached, setJointLimitsReached] = useState(
+      store.jogger.motionStream.rapidlyChangingMotionState.joint_limit_reached
+        .limit_reached,
+    )
+    const jointLimitsReachedRef = useRef(jointLimitsReached)
+
+    useAnimationFrame(() => {
+      const newLimitsReached =
+        store.jogger.motionStream.rapidlyChangingMotionState.joint_limit_reached
+          .limit_reached
+
+      if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {
+        jointLimitsReachedRef.current = newLimitsReached
+        setJointLimitsReached(newLimitsReached)
+      }
+    })
+
+    const jointLimitReachedIndices: number[] = []
+    for (const [index, limitReached] of jointLimitsReached.entries()) {
+      if (limitReached) jointLimitReachedIndices.push(index)
+    }
+
+    return (
+      <Typography
+        data-testid="jogging-joint-limit-detector"
+        aria-label="jogging-joint-limit-detector"
+        color="error"
+        sx={{
+          margin: "0.5rem 1rem",
+          textAlign: "center",
+          minHeight: "1.5rem",
+          visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
+        }}
+      >
+        {t("Jogging.JointLimitsReached.lb", {
+          jointNumbers: jointLimitReachedIndices.map((i) => i + 1).join(", "),
+        })}
+      </Typography>
+    )
+  },
+)