@wandelbots/wandelbots-js-react-components 1.16.0 → 1.16.2

package/package.json

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

package/src/components/LoadingCover.tsx

@@ -1,5 +1,6 @@
 import { makeErrorMessage } from "./utils/errorHandling"
-import { CircularProgress, Stack, useTheme } from "@mui/material"
+import { capitalize, CircularProgress, Stack, useTheme } from "@mui/material"
+import { lowerFirst } from "lodash-es"
 import { useEffect, useState } from "react"
 
 export const LoadingCover = (props: {
@@ -27,7 +28,10 @@ export const LoadingCover = (props: {
       justifyContent="center"
     >
       {props.error ? (
-        <LoadingErrorMessage message={props.message} error={props.error} />
+        <LoadingErrorMessage
+          loadingMessage={props.message}
+          error={props.error}
+        />
       ) : (
         <>
           <CircularProgress sx={{ marginBottom: "24px" }} />
@@ -47,7 +51,10 @@ export const LoadingCover = (props: {
   )
 }
 
-const LoadingErrorMessage = (props: { message?: string; error: unknown }) => {
+export const LoadingErrorMessage = (props: {
+  loadingMessage?: string
+  error: unknown
+}) => {
   const errorMessage = makeErrorMessage(props.error)
   const stack = props.error instanceof Error ? props.error.stack : null
   const theme = useTheme()
@@ -67,7 +74,9 @@ const LoadingErrorMessage = (props: { message?: string; error: unknown }) => {
         },
       }}
     >
-      {`Error while: ${props.message} - ${errorMessage}`}
+      {(props.loadingMessage
+        ? `Error while ${lowerFirst(capitalize(props.loadingMessage))} - `
+        : "") + errorMessage}
       <br />
       {stack && <pre>{stack}</pre>}
     </Stack>

package/src/components/jogging/JoggingPanel.tsx

@@ -11,6 +11,7 @@ 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"
 
 export type JoggingPanelProps = {
   /** Either an existing NovaClient or the base url of a deployed Nova instance */
@@ -30,6 +31,8 @@ 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
@@ -116,12 +119,24 @@ const JoggingPanelInner = observer(
     store: JoggingStore
     children?: React.ReactNode
   }) => {
+    const { t } = useTranslation()
+
     // Jogger is only active as long as the tab is focused
     useEffect(() => {
-      window.addEventListener("blur", store.deactivate)
+      function deactivate() {
+        store.deactivate()
+      }
+
+      function activate() {
+        store.activate()
+      }
+
+      window.addEventListener("blur", deactivate)
+      window.addEventListener("focus", activate)
 
       return () => {
-        window.removeEventListener("blur", store.deactivate)
+        window.removeEventListener("blur", deactivate)
+        window.removeEventListener("focus", activate)
       }
     })
 
@@ -145,10 +160,10 @@ const JoggingPanelInner = observer(
             <Button
               color="primary"
               variant="contained"
-              onClick={store.activate}
+              onClick={() => store.activate({ manual: true })}
               disabled={store.isLocked}
             >
-              Activate jogging
+              {t("Jogging.Activate.bt")}
             </Button>
           </TransparentOverlay>
         )
@@ -156,7 +171,7 @@ const JoggingPanelInner = observer(
         return (
           <TransparentOverlay>
             <LoadingCover
-              message="Activating jogging"
+              message={t("Jogging.Activating.lb")}
               error={store.activationError}
             />
           </TransparentOverlay>

package/src/components/jogging/JoggingStore.tsx

@@ -33,6 +33,12 @@ export type IncrementOptionId = IncrementOption["id"]
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
+  /**
+   * Whether the user must manually interact to activate jogging, or
+   * if it can be done automatically
+   */
+  manualActivationRequired: boolean = true
+
   /**
    * State of the jogging panel. Starts as "inactive"
    */
@@ -160,7 +166,7 @@ export class JoggingStore {
     this.jogger.dispose()
   }
 
-  async deactivate() {
+  async deactivate(opts: { requireManualReactivation?: boolean } = {}) {
     if (this.activationState === "inactive") return
     const websocket = this.jogger.activeWebsocket
 
@@ -170,10 +176,16 @@ export class JoggingStore {
     if (websocket) {
       await websocket.closed()
     }
+
+    if (opts.requireManualReactivation) {
+      runInAction(() => {
+        this.manualActivationRequired = true
+      })
+    }
   }
 
   /** Activate the jogger with current settings */
-  async activate() {
+  async activate(opts: { manual?: boolean } = {}) {
     const {
       currentTab,
       selectedTcpId,
@@ -184,6 +196,8 @@ export class JoggingStore {
 
     if (this.activationState === "loading") return
 
+    if (this.manualActivationRequired && !opts.manual) return
+
     runInAction(() => {
       this.activationState = "loading"
       this.activationError = null
@@ -219,6 +233,9 @@ export class JoggingStore {
 
     runInAction(() => {
       this.activationState = "active"
+      if (opts.manual) {
+        this.manualActivationRequired = false
+      }
     })
   }
 

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

@@ -9,5 +9,7 @@
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Gelenkwerte",
   "Jogging.Increment.Continuous.dd": "Fortlaufend",
-  "Jogging.Cartesian.Orientation.lb": "Orientierung"
+  "Jogging.Cartesian.Orientation.lb": "Orientierung",
+  "Jogging.Activate.bt": "Jogging activieren",
+  "Jogging.Activating.lb": "Jogging wird aktivieren"
 }

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

@@ -9,5 +9,7 @@
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Joint values",
   "Jogging.Increment.Continuous.dd": "Continuous",
-  "Jogging.Cartesian.Orientation.lb": "Orientation"
+  "Jogging.Cartesian.Orientation.lb": "Orientation",
+  "Jogging.Activate.bt": "Activate jogging",
+  "Jogging.Activating.lb": "Activating jogging"
 }

package/src/index.ts

@@ -11,4 +11,5 @@ export * from "./components/VelocitySlider"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/utils/hooks"
 export * from "./components/robots/AxisConfig"
+export * from "./components/LoadingCover"
 export { createNovaMuiTheme } from "./themes/theming"