@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.d053ea2

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,237 +0,0 @@
-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

@@ -1,349 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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>
-    )
-  },
-)