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

package/src/components/jogging/JoggingJointTab.tsx

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

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

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