@wandelbots/wandelbots-js-react-components 1.17.2 → 1.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.17.2",
+  "version": "1.17.3",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -1,23 +1,23 @@
 import {
-  ToggleButtonGroup,
-  ToggleButton,
   Stack,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
 } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
-import RotationIcon from "../../icons/rotation.svg"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
 import ZAxisIcon from "../../icons/axis-z.svg"
-import type { JoggingStore, DiscreteIncrementOption } from "./JoggingStore"
-import { JoggingOptions } from "./JoggingOptions"
-import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import RotationIcon from "../../icons/rotation.svg"
 import { useReaction } from "../utils/hooks"
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingCartesianValues } from "./JoggingCartesianValues"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
+import { JoggingOptions } from "./JoggingOptions"
+import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
   axis: "x" | "y" | "z"
@@ -247,11 +247,11 @@ export const JoggingCartesianTab = observer(
             ))}
         </Stack>
 
-        {/* Velocity slider */}
-        <JoggingVelocitySlider store={store} />
-
         {/* Show message if joint limits reached */}
         <JoggingJointLimitDetector store={store} />
+
+        {/* Velocity slider */}
+        <JoggingVelocitySlider store={store} />
       </Stack>
     )
   },

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material"
-import { useTranslation } from "react-i18next"
-import { useState } from "react"
 import isEqual from "lodash-es/isEqual"
+import { useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { useAnimationFrame } from "../utils/hooks"
 import type { JoggingStore } from "./JoggingStore"
 
@@ -20,30 +20,31 @@ export const JoggingJointLimitDetector = ({
     store.jogger.motionStream.rapidlyChangingMotionState.state
       .joint_limit_reached.limit_reached,
   )
+  const jointLimitsReachedRef = useRef(jointLimitsReached)
 
   useAnimationFrame(() => {
     const newLimitsReached =
       store.jogger.motionStream.rapidlyChangingMotionState.state
         .joint_limit_reached.limit_reached
 
-    if (!isEqual(jointLimitsReached, newLimitsReached)) {
+    if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {
+      jointLimitsReachedRef.current = newLimitsReached
       setJointLimitsReached(newLimitsReached)
     }
   })
 
   const jointLimitReachedIndices: number[] = []
-  jointLimitsReached.forEach((limitReached, index) => {
+  for (const [index, limitReached] of jointLimitsReached.entries()) {
     if (limitReached) jointLimitReachedIndices.push(index)
-  })
-
-  if (!jointLimitReachedIndices.length) return null
+  }
 
   return (
     <Typography
       color="error"
       sx={{
-        padding: "1rem",
+        margin: "0.5rem 1rem",
         textAlign: "center",
+        visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
       }}
     >
       {t("Jogging.JointLimitsReached.lb", {

package/src/components/jogging/JoggingPanel.tsx

@@ -1,17 +1,17 @@
 import { Button, Paper, Stack, Tab, Tabs } from "@mui/material"
+import { NovaClient } from "@wandelbots/wandelbots-js"
+import { isString } from "lodash-es"
+import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
-import { JoggingCartesianTab } from "./JoggingCartesianTab"
-import { JoggingJointTab } from "./JoggingJointTab"
-import { JoggingStore } from "./JoggingStore"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
 import { LoadingCover } from "../LoadingCover"
 import { TransparentOverlay } from "../TransparentOverlay"
-import { runInAction } from "mobx"
-import { NovaClient } from "@wandelbots/wandelbots-js"
-import { externalizeComponent } from "../../externalizeComponent"
-import { isString } from "lodash-es"
 import { useReaction } from "../utils/hooks"
-import { useTranslation } from "react-i18next"
+import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JoggingJointTab } from "./JoggingJointTab"
+import { JoggingStore } from "./JoggingStore"
 
 export type JoggingPanelProps = {
   /** Either an existing NovaClient or the base url of a deployed Nova instance */
@@ -31,8 +31,6 @@ export type JoggingPanelProps = {
  */
 export const JoggingPanel = externalizeComponent(
   observer((props: JoggingPanelProps) => {
-    const { t } = useTranslation()
-
     const nova = isString(props.nova)
       ? new NovaClient({ instanceUrl: props.nova })
       : props.nova

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,8 +1,8 @@
-import { Stack, Typography } from "@mui/material"
+import { Stack } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
-import type { JoggingStore } from "./JoggingStore"
-import { VelocitySlider } from "../VelocitySlider"
 import { useTranslation } from "react-i18next"
+import { VelocitySlider } from "../VelocitySlider"
+import type { JoggingStore } from "./JoggingStore"
 
 export const JoggingVelocitySlider = observer(
   ({ store }: { store: JoggingStore }) => {
@@ -24,8 +24,7 @@ export const JoggingVelocitySlider = observer(
       <Stack
         sx={{
           margin: "0px 20px",
-          marginTop: "24px",
-          marginBottom: "24px",
+          marginBottom: "12px",
         }}
       >
         <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>

package/src/i18n/config.ts

@@ -1,27 +1,23 @@
-import deJSON from "./locales/de/translations.json"
-import enJSON from "./locales/en/translations.json"
-import i18next from "i18next"
 import type { i18n } from "i18next"
+import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
-import { initReactI18next } from "react-i18next"
+import deJSON from "./locales/de/translations.json"
+import enJSON from "./locales/en/translations.json"
 
 const i18n: i18n = i18next.createInstance()
 
-i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    supportedLngs: ["en", "de"],
-    resources: {
-      en: {
-        translations: enJSON,
-      },
-      de: {
-        translations: deJSON,
-      },
+i18n.use(LanguageDetector).init({
+  supportedLngs: ["en", "de"],
+  resources: {
+    en: {
+      translations: enJSON,
+    },
+    de: {
+      translations: deJSON,
     },
-    ns: ["translations"],
-    defaultNS: "translations",
-  })
+  },
+  ns: ["translations"],
+  defaultNS: "translations",
+})
 
 export default i18n

package/src/i18n/locales/de/translations.json

@@ -11,5 +11,6 @@
   "Jogging.Increment.Continuous.dd": "Fortlaufend",
   "Jogging.Cartesian.Orientation.lb": "Orientierung",
   "Jogging.Activate.bt": "Jogging activieren",
-  "Jogging.Activating.lb": "Jogging wird aktivieren"
+  "Jogging.Activating.lb": "Jogging wird aktivieren",
+  "Jogging.JointLimitsReached.lb": "Joint-Limit für Joint {{jointNumbers}} erreicht"
 }

package/src/i18n/locales/en/translations.json

@@ -11,5 +11,6 @@
   "Jogging.Increment.Continuous.dd": "Continuous",
   "Jogging.Cartesian.Orientation.lb": "Orientation",
   "Jogging.Activate.bt": "Activate jogging",
-  "Jogging.Activating.lb": "Activating jogging"
+  "Jogging.Activating.lb": "Activating jogging",
+  "Jogging.JointLimitsReached.lb": "Joint limit reached for joint {{jointNumbers}}"
 }