@wandelbots/wandelbots-js-react-components 1.11.1 → 1.11.2

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import { useRef, type ReactNode } from "react"
 import { useAnimationFrame } from "../utils/hooks"
+import { externalizeComponent } from "../../externalizeComponent"
 
 type JoggingCartesianAxisControlProps = {
   color?: string
@@ -13,115 +14,117 @@ type JoggingCartesianAxisControlProps = {
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
-export const JoggingCartesianAxisControl = observer(
-  ({
-    color,
-    label,
-    getDisplayedValue,
-    startJogging,
-    stopJogging,
-    disabled,
-    ...rest
-  }: JoggingCartesianAxisControlProps) => {
-    useAnimationFrame(() => {
-      const displayValue = getDisplayedValue()
-      const element = valueContainerRef.current
-      if (!element) return
+export const JoggingCartesianAxisControl = externalizeComponent(
+  observer(
+    ({
+      color,
+      label,
+      getDisplayedValue,
+      startJogging,
+      stopJogging,
+      disabled,
+      ...rest
+    }: JoggingCartesianAxisControlProps) => {
+      useAnimationFrame(() => {
+        const displayValue = getDisplayedValue()
+        const element = valueContainerRef.current
+        if (!element) return
 
-      element.textContent = displayValue
-    })
+        element.textContent = displayValue
+      })
 
-    const valueContainerRef = useRef<HTMLParagraphElement>(null)
+      const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-    color = color || "#F14D42"
+      color = color || "#F14D42"
 
-    function onPointerDownMinus(ev: React.PointerEvent) {
-      // Stop right click from triggering jog
-      if (ev.button === 0) startJogging("-")
-    }
+      function onPointerDownMinus(ev: React.PointerEvent) {
+        // Stop right click from triggering jog
+        if (ev.button === 0) startJogging("-")
+      }
 
-    function onPointerDownPlus(ev: React.PointerEvent) {
-      if (ev.button === 0) startJogging("+")
-    }
+      function onPointerDownPlus(ev: React.PointerEvent) {
+        if (ev.button === 0) startJogging("+")
+      }
 
-    return (
-      <Stack height="72px" direction="row" {...rest}>
-        <Button
-          onPointerDown={onPointerDownMinus}
-          onPointerUp={stopJogging}
-          onPointerOut={stopJogging}
-          disabled={disabled}
-          sx={{
-            width: "105px",
-            backgroundColor: color,
-            color: "white",
-            alignContent: "center",
-            fontSize: "37px",
-            borderRadius: "16px 0px 0px 16px",
-
-            ":hover": {
-              color: "white",
+      return (
+        <Stack height="72px" direction="row" {...rest}>
+          <Button
+            onPointerDown={onPointerDownMinus}
+            onPointerUp={stopJogging}
+            onPointerOut={stopJogging}
+            disabled={disabled}
+            sx={{
+              width: "105px",
               backgroundColor: color,
-            },
-          }}
-        >
-          {"-"}
-        </Button>
+              color: "white",
+              alignContent: "center",
+              fontSize: "37px",
+              borderRadius: "16px 0px 0px 16px",
+
+              ":hover": {
+                color: "white",
+                backgroundColor: color,
+              },
+            }}
+          >
+            {"-"}
+          </Button>
 
-        <Stack
-          spacing="6px"
-          sx={{
-            width: "184px",
-            backgroundColor: color,
-            alignItems: "center",
-            justifyContent: "center",
-            opacity: "0.9",
-          }}
-        >
           <Stack
-            height="22px"
-            direction="row"
-            alignItems="center"
-            justifyItems="center"
-            spacing={1}
-            sx={{ userSelect: "none", color: "white" }}
+            spacing="6px"
+            sx={{
+              width: "184px",
+              backgroundColor: color,
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: "0.9",
+            }}
           >
-            {label}
+            <Stack
+              height="22px"
+              direction="row"
+              alignItems="center"
+              justifyItems="center"
+              spacing={1}
+              sx={{ userSelect: "none", color: "white" }}
+            >
+              {label}
+            </Stack>
+            <Typography
+              height="22px"
+              sx={{
+                fontSize: "15px",
+                color: "white",
+              }}
+              ref={valueContainerRef}
+            >
+              {getDisplayedValue()}
+            </Typography>
           </Stack>
-          <Typography
-            height="22px"
+
+          <Button
+            onPointerDown={onPointerDownPlus}
+            onPointerUp={stopJogging}
+            onPointerOut={stopJogging}
+            disabled={disabled}
             sx={{
-              fontSize: "15px",
+              width: "105px",
+              backgroundColor: color,
               color: "white",
+              alignContent: "center",
+              fontSize: "37px",
+              borderRadius: "0px 16px 16px 0px",
+
+              ":hover": {
+                color: "white",
+                backgroundColor: color,
+              },
             }}
-            ref={valueContainerRef}
           >
-            {getDisplayedValue()}
-          </Typography>
+            {"+"}
+          </Button>
         </Stack>
-
-        <Button
-          onPointerDown={onPointerDownPlus}
-          onPointerUp={stopJogging}
-          onPointerOut={stopJogging}
-          disabled={disabled}
-          sx={{
-            width: "105px",
-            backgroundColor: color,
-            color: "white",
-            alignContent: "center",
-            fontSize: "37px",
-            borderRadius: "0px 16px 16px 0px",
-
-            ":hover": {
-              color: "white",
-              backgroundColor: color,
-            },
-          }}
-        >
-          {"+"}
-        </Button>
-      </Stack>
-    )
-  },
+      )
+    },
+  ),
 )

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -7,6 +7,7 @@ import { useAnimationFrame } from "../utils/hooks"
 import { useState } from "react"
 import throttle from "lodash-es/throttle"
 import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
 
 type JoggingJointRotationControlProps = {
   startJogging: (direction: "-" | "+") => void
@@ -18,195 +19,199 @@ type JoggingJointRotationControlProps = {
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
-export const JoggingJointRotationControl = observer(
-  ({
-    startJogging,
-    stopJogging,
-    lowerLimitDegs,
-    upperLimitDegs,
-    getValueDegs,
-    disabled,
-    ...rest
-  }: JoggingJointRotationControlProps) => {
-    const { t } = useTranslation()
-    const [currentValue, setCurrentValue] = useState<number | undefined>()
-
-    const state = useLocalObservable(() => ({
-      activeJoggingDir: null as "-" | "+" | null,
-
-      startJogging(dir: "-" | "+") {
-        this.activeJoggingDir = dir
-        startJogging(dir)
-      },
-
-      stopJogging() {
-        this.activeJoggingDir = null
-        stopJogging()
-      },
-    }))
-
-    const updateValue = throttle(() => {
-      setCurrentValue(getValueDegs())
-    }, 50)
-
-    useAnimationFrame(updateValue)
-
-    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) {
-      // 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 ""
-
-      const output = t("General.degree.variable", {
-        amount: value.toFixed(precision),
-      })
-
-      if (value > 0 && precision === 0) {
-        return `+${output}`
-      } else {
-        return output
+export const JoggingJointRotationControl = externalizeComponent(
+  observer(
+    ({
+      startJogging,
+      stopJogging,
+      lowerLimitDegs,
+      upperLimitDegs,
+      getValueDegs,
+      disabled,
+      ...rest
+    }: JoggingJointRotationControlProps) => {
+      const { t } = useTranslation()
+      const [currentValue, setCurrentValue] = useState<number | undefined>()
+
+      const state = useLocalObservable(() => ({
+        activeJoggingDir: null as "-" | "+" | null,
+
+        startJogging(dir: "-" | "+") {
+          this.activeJoggingDir = dir
+          startJogging(dir)
+        },
+
+        stopJogging() {
+          this.activeJoggingDir = null
+          stopJogging()
+        },
+      }))
+
+      const updateValue = throttle(() => {
+        setCurrentValue(getValueDegs())
+      }, 50)
+
+      useAnimationFrame(updateValue)
+
+      function onPointerDownMinus(ev: React.PointerEvent) {
+        // Stop right click from triggering jog
+        if (ev.button === 0) state.startJogging("-")
       }
-    }
-
-    return (
-      <Stack
-        height="64px"
-        width="100%"
-        maxWidth="300px"
-        direction="row"
-        {...rest}
-        sx={{
-          "& .MuiIconButton-root": {
-            width: "52px",
-            color: "white",
-            alignContent: "center",
-            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 />
-        </IconButton>
 
+      function onPointerDownPlus(ev: React.PointerEvent) {
+        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 ""
+
+        const output = t("General.degree.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+
+      return (
         <Stack
-          flexGrow={1}
-          alignItems="center"
-          justifyContent="center"
+          height="64px"
+          width="100%"
+          maxWidth="300px"
+          direction="row"
+          {...rest}
           sx={{
-            borderStyle: "solid",
-            borderLeftWidth: 0,
-            borderRightWidth: 0,
-            borderTopWidth: "4px",
-            borderBottomWidth: "4px",
-            backgroundColor: "#38445A",
-            borderColor: "#38445A",
-            paddingLeft: "20px",
-            paddingRight: "20px",
-            zIndex: 1,
+            "& .MuiIconButton-root": {
+              width: "52px",
+              color: "white",
+              alignContent: "center",
+              backgroundColor: "#38445A",
+              "&:disabled": {
+                opacity: 0.5,
+                backgroundColor: "#38445A",
+              },
+              "& svg": {
+                width: "42px",
+                height: "42px",
+              },
+            },
           }}
         >
-          <Typography
+          <IconButton
+            onPointerDown={onPointerDownMinus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
             sx={{
-              fontSize: "15px",
-              position: "relative",
-              top: "5px",
-              color: "white",
+              borderRadius: "16px 0px 0px 16px",
+              backgroundColor:
+                state.activeJoggingDir === "-" ? "#495975" : undefined,
             }}
           >
-            {formatDegrees(currentValue)}
-          </Typography>
-
-          <Slider
-            disabled
-            aria-label="Joint position"
-            min={lowerLimitDegs}
-            max={upperLimitDegs}
-            value={currentValue || 0}
-            track={false}
+            <ChevronLeft />
+          </IconButton>
+
+          <Stack
+            flexGrow={1}
+            alignItems="center"
+            justifyContent="center"
             sx={{
-              "& .MuiSlider-mark": {
-                display: "none",
-              },
-              "& .MuiSlider-thumb": {
-                width: "5px",
-                height: "10px",
-                borderRadius: "2px",
-              },
-              "& .MuiSlider-markLabel": {
-                top: "20px",
-                fontSize: "12px",
-                color: "white",
-              },
-              "& .MuiSlider-rail": {
-                backgroundColor: "#1F283A",
-                opacity: 1,
-              },
+              borderStyle: "solid",
+              borderLeftWidth: 0,
+              borderRightWidth: 0,
+              borderTopWidth: "4px",
+              borderBottomWidth: "4px",
+              backgroundColor: "#38445A",
+              borderColor: "#38445A",
+              paddingLeft: "20px",
+              paddingRight: "20px",
+              zIndex: 1,
             }}
-            marks={
-              lowerLimitDegs !== undefined &&
-              upperLimitDegs !== undefined && [
-                {
-                  value: lowerLimitDegs,
-                  label: formatDegrees(lowerLimitDegs, 0),
+          >
+            <Typography
+              sx={{
+                fontSize: "15px",
+                position: "relative",
+                top: "5px",
+                color: "white",
+              }}
+            >
+              {formatDegrees(currentValue)}
+            </Typography>
+
+            <Slider
+              disabled
+              aria-label="Joint position"
+              min={lowerLimitDegs}
+              max={upperLimitDegs}
+              value={currentValue || 0}
+              track={false}
+              sx={{
+                "& .MuiSlider-mark": {
+                  display: "none",
+                },
+                "& .MuiSlider-thumb": {
+                  width: "5px",
+                  height: "10px",
+                  borderRadius: "2px",
+                },
+                "& .MuiSlider-markLabel": {
+                  top: "20px",
+                  fontSize: "12px",
+                  color: "white",
                 },
-                {
-                  value: upperLimitDegs,
-                  label: formatDegrees(upperLimitDegs, 0),
+                "& .MuiSlider-rail": {
+                  backgroundColor: "#1F283A",
+                  opacity: 1,
                 },
-              ]
-            }
-          />
+              }}
+              marks={
+                lowerLimitDegs !== undefined &&
+                upperLimitDegs !== undefined && [
+                  {
+                    value: lowerLimitDegs,
+                    label: formatDegrees(lowerLimitDegs, 0),
+                  },
+                  {
+                    value: upperLimitDegs,
+                    label: formatDegrees(upperLimitDegs, 0),
+                  },
+                ]
+              }
+            />
+          </Stack>
+
+          <IconButton
+            onPointerDown={onPointerDownPlus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
+            sx={{
+              borderRadius: "0px 16px 16px 0px",
+              backgroundColor:
+                state.activeJoggingDir === "+"
+                  ? "#495975 !important"
+                  : "#38445A",
+            }}
+          >
+            <ChevronRight />
+          </IconButton>
         </Stack>
-
-        <IconButton
-          onPointerDown={onPointerDownPlus}
-          onPointerUp={onPointerUp}
-          onPointerOut={onPointerOut}
-          disabled={disabled}
-          sx={{
-            borderRadius: "0px 16px 16px 0px",
-            backgroundColor:
-              state.activeJoggingDir === "+" ? "#495975 !important" : "#38445A",
-          }}
-        >
-          <ChevronRight />
-        </IconButton>
-      </Stack>
-    )
-  },
+      )
+    },
+  ),
 )