@wandelbots/wandelbots-js-react-components 2.20.0 → 2.21.0

package/dist/themes/createDarkTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA2RvC"}
+{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CAgSvC"}

package/dist/themes/themeTypes.d.ts

@@ -27,16 +27,21 @@ export interface AxisControlComponentColors {
 }
 interface NovaComponentsExtension {
     componentsExt?: {
-        JoggingCartesian?: {
-            Axis?: {
-                X?: AxisControlComponentColors;
-                Y?: AxisControlComponentColors;
-                Z?: AxisControlComponentColors;
+        JoggingPanel?: {
+            JoggingCartesian?: {
+                Axis?: {
+                    X?: AxisControlComponentColors;
+                    Y?: AxisControlComponentColors;
+                    Z?: AxisControlComponentColors;
+                };
             };
-        };
-        JoggingJoint?: {
-            Joint?: {
-                arrowColor?: string;
+            JoggingJoint?: {
+                Joint?: {
+                    arrowColor?: string;
+                };
+            };
+            VelocitySlider?: {
+                sliderLegendColor?: string;
             };
         };
         WandelscriptEditor?: {

package/dist/themes/themeTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/VelocitySlider.tsx

@@ -3,6 +3,8 @@ import Slider from "@mui/material/Slider"
 import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import type { JoggingStore } from "./jogging/JoggingStore"
 
 type VelocitySliderProps = {
   min: number
@@ -11,11 +13,14 @@ type VelocitySliderProps = {
   onVelocityChange: (newVelocity: number) => void
   disabled?: boolean
   renderValue?: (value: number) => ReactNode
+  store: JoggingStore
 }
 
 /** A slider for controlling the movement velocity of a robot */
 export const VelocitySlider = observer((props: VelocitySliderProps) => {
   const theme = useTheme()
+  const { store } = props
+  const { t } = useTranslation()
 
   function onSliderChange(_event: Event, newVelocity: number | number[]) {
     if (newVelocity === props.velocity || !isNumber(newVelocity)) return
@@ -24,7 +29,19 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
   }
 
   return (
-    <Stack direction="row" gap={2}>
+    <Stack direction="row" gap={2} alignItems="center">
+      {store.showVelocityLegend && (
+        <Typography
+          sx={{
+            color:
+              theme.componentsExt?.JoggingPanel?.VelocitySlider
+                ?.sliderLegendColor,
+            fontSize: "14px",
+          }}
+        >
+          {t("Jogging.Velocity.bt")}
+        </Typography>
+      )}
       <Slider
         value={props.velocity}
         color="secondary"
@@ -41,11 +58,12 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
           },
         }}
       />
-      {props.renderValue ? (
-        props.renderValue(props.velocity)
-      ) : (
-        <VelocitySliderLabel value={props.velocity.toString()} />
-      )}
+      {store.showVelocitySliderLabel &&
+        (props.renderValue ? (
+          props.renderValue(props.velocity)
+        ) : (
+          <VelocitySliderLabel value={props.velocity.toString()} />
+        ))}
     </Stack>
   )
 })

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -143,17 +143,17 @@ export const JoggingCartesianTab = observer(
     const axisList = [
       {
         id: "x",
-        colors: theme.componentsExt?.JoggingCartesian?.Axis?.X,
+        colors: theme.componentsExt?.JoggingPanel?.JoggingCartesian?.Axis?.X,
         icon: <XAxisIcon />,
       },
       {
         id: "y",
-        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Y,
+        colors: theme.componentsExt?.JoggingPanel?.JoggingCartesian?.Axis?.Y,
         icon: <YAxisIcon />,
       },
       {
         id: "z",
-        colors: theme.componentsExt?.JoggingCartesian?.Axis?.Z,
+        colors: theme.componentsExt?.JoggingPanel?.JoggingCartesian?.Axis?.Z,
         icon: <ZAxisIcon />,
       },
     ] as const

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -137,7 +137,9 @@ export const JoggingJointRotationControl = externalizeComponent(
             <ChevronLeft
               sx={{
                 pointerEvents: "none",
-                color: theme.componentsExt?.JoggingJoint?.Joint?.arrowColor,
+                color:
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
               }}
             />
           </IconButton>
@@ -233,7 +235,9 @@ export const JoggingJointRotationControl = externalizeComponent(
             <ChevronRight
               sx={{
                 pointerEvents: "none",
-                color: theme.componentsExt?.JoggingJoint?.Joint?.arrowColor,
+                color:
+                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                    ?.arrowColor,
               }}
             />
           </IconButton>

package/src/components/jogging/JoggingPanel.tsx

@@ -1,3 +1,5 @@
+import MoveIcon from "@mui/icons-material/OpenWith"
+import ShareIcon from "@mui/icons-material/Share"
 import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
 import { NovaClient } from "@wandelbots/nova-js/v1"
 import { isString } from "lodash-es"
@@ -147,18 +149,37 @@ const JoggingPanelInner = observer(
           onChange={store.onTabChange}
           variant="fullWidth"
         >
-          {store.tabs.map((tab) => (
-            <Tab
-              key={tab.id}
-              label={
-                tab.label === "cartesian"
-                  ? t("Jogging.Cartesian.bt")
-                  : t("Jogging.Joints.bt")
-              }
-              id={`jogging-tab-${tab.id}`}
-              aria-controls={`jogging-tab-${tab.id}`}
-            />
-          ))}
+          {store.tabs.map((tab) => {
+            const label =
+              tab.label === "cartesian"
+                ? t("Jogging.Cartesian.bt")
+                : t("Jogging.Joints.bt")
+
+            const icon =
+              tab.label === "cartesian" ? (
+                <MoveIcon fontSize="small" sx={{ mr: 1 }} />
+              ) : (
+                <ShareIcon fontSize="small" sx={{ mr: 1 }} />
+              )
+
+            return (
+              <Tab
+                key={tab.id}
+                label={
+                  store.showTabIcons ? (
+                    <Stack direction="row" alignItems="center">
+                      {icon}
+                      {label}
+                    </Stack>
+                  ) : (
+                    label
+                  )
+                }
+                id={`jogging-tab-${tab.id}`}
+                aria-controls={`jogging-tab-${tab.id}`}
+              />
+            )
+          })}
         </Tabs>
 
         {/* Current tab content */}

package/src/components/jogging/JoggingStore.ts

@@ -116,6 +116,15 @@ export class JoggingStore {
   /** Whether to show the increment select dropdown in the UI */
   showIncrementSelect: boolean = true
 
+  /** Whether to show icons in the jogging tabs */
+  showTabIcons: boolean = false
+
+  /** Whether to show the label to the right of the velocity slider */
+  showVelocitySliderLabel: boolean = true
+
+  /** Whether to show the legend before the slider */
+  showVelocityLegend: boolean = false
+
   disposers: IReactionDisposer[] = []
 
   /**

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -21,6 +21,7 @@ export const JoggingVelocitySlider = observer(
 
     return (
       <VelocitySlider
+        store={store}
         velocity={store.velocityInDisplayUnits}
         min={store.minVelocityInDisplayUnits}
         max={store.maxVelocityInDisplayUnits}

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

@@ -42,5 +42,6 @@
   "Jogging.Increment.hlb": "Schrittgröße",
   "Jogging.CoordinateSystem.hlb": "Koordinatensystem",
   "Jogging.Cartesian.bt": "Kartesisch",
-  "Jogging.Joints.bt": "Gelenke"
+  "Jogging.Joints.bt": "Gelenke",
+  "Jogging.Velocity.bt": "Geschwindigkeit"
 }

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

@@ -43,5 +43,6 @@
   "Jogging.Increment.hlb": "Increment",
   "Jogging.CoordinateSystem.hlb": "Coordinate system",
   "Jogging.Cartesian.bt": "Cartesian",
-  "Jogging.Joints.bt": "Joints"
+  "Jogging.Joints.bt": "Joints",
+  "Jogging.Velocity.bt": "Velocity"
 }

package/src/themes/createDarkTheme.ts

@@ -215,49 +215,54 @@ export function createDarkTheme(): Theme {
     },
 
     componentsExt: {
-      JoggingCartesian: {
-        Axis: {
-          X: {
-            backgroundColor: "rgba(215, 66, 56, 1)",
-            borderColor: "rgba(215, 66, 56, 1)",
-            buttonBackgroundColor: {
-              default: "rgba(241, 77, 66, 1)",
-              pressed: "rgba(138, 41, 35, 1)",
-              hovered: "rgba(241, 77, 66, 1)",
-              disabled: "rgba(241, 77, 66, 1)",
+      JoggingPanel: {
+        JoggingCartesian: {
+          Axis: {
+            X: {
+              backgroundColor: "rgba(215, 66, 56, 1)",
+              borderColor: "rgba(215, 66, 56, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(241, 77, 66, 1)",
+                pressed: "rgba(138, 41, 35, 1)",
+                hovered: "rgba(241, 77, 66, 1)",
+                disabled: "rgba(241, 77, 66, 1)",
+              },
+              color: "rgba(255, 198, 198, 1)",
+              labelColor: baseTheme.palette.text.primary,
             },
-            color: "rgba(255, 198, 198, 1)",
-            labelColor: baseTheme.palette.text.primary,
-          },
-          Y: {
-            backgroundColor: "rgba(20, 151, 108, 1)",
-            borderColor: "rgba(20, 151, 108, 1)",
-            buttonBackgroundColor: {
-              default: "rgba(28, 188, 135, 1)",
-              pressed: "rgba(11, 89, 63, 1)",
-              disabled: "rgba(28, 188, 135, 1)",
-              hovered: "rgba(28, 188, 135, 1)",
+            Y: {
+              backgroundColor: "rgba(20, 151, 108, 1)",
+              borderColor: "rgba(20, 151, 108, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(28, 188, 135, 1)",
+                pressed: "rgba(11, 89, 63, 1)",
+                disabled: "rgba(28, 188, 135, 1)",
+                hovered: "rgba(28, 188, 135, 1)",
+              },
+              color: "rgba(215, 255, 242, 1)",
+              labelColor: baseTheme.palette.text.primary,
             },
-            color: "rgba(215, 255, 242, 1)",
-            labelColor: baseTheme.palette.text.primary,
-          },
-          Z: {
-            backgroundColor: "rgba(1, 87, 155, 1)",
-            borderColor: "rgba(1, 87, 155, 1)",
-            buttonBackgroundColor: {
-              default: "rgba(2, 136, 209, 1)",
-              pressed: "rgba(2, 64, 114, 1)",
-              disabled: "rgba(2, 136, 209, 1)",
-              hovered: "rgba(2, 136, 209, 1)",
+            Z: {
+              backgroundColor: "rgba(1, 87, 155, 1)",
+              borderColor: "rgba(1, 87, 155, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(2, 136, 209, 1)",
+                pressed: "rgba(2, 64, 114, 1)",
+                disabled: "rgba(2, 136, 209, 1)",
+                hovered: "rgba(2, 136, 209, 1)",
+              },
+              color: "rgba(210, 239, 255, 1)",
+              labelColor: baseTheme.palette.text.primary,
             },
-            color: "rgba(210, 239, 255, 1)",
-            labelColor: baseTheme.palette.text.primary,
           },
         },
-      },
-      JoggingJoint: {
-        Joint: {
-          arrowColor: baseTheme.palette.text.primary,
+        JoggingJoint: {
+          Joint: {
+            arrowColor: baseTheme.palette.text.primary,
+          },
+        },
+        VelocitySlider: {
+          sliderLegendColor: baseTheme.palette.text.primary,
         },
       },
       WandelscriptEditor: {

package/src/themes/themeTypes.ts

@@ -30,16 +30,21 @@ export interface AxisControlComponentColors {
 
 interface NovaComponentsExtension {
   componentsExt?: {
-    JoggingCartesian?: {
-      Axis?: {
-        X?: AxisControlComponentColors
-        Y?: AxisControlComponentColors
-        Z?: AxisControlComponentColors
+    JoggingPanel?: {
+      JoggingCartesian?: {
+        Axis?: {
+          X?: AxisControlComponentColors
+          Y?: AxisControlComponentColors
+          Z?: AxisControlComponentColors
+        }
       }
-    }
-    JoggingJoint?: {
-      Joint?: {
-        arrowColor?: string
+      JoggingJoint?: {
+        Joint?: {
+          arrowColor?: string
+        }
+      }
+      VelocitySlider?: {
+        sliderLegendColor?: string
       }
     }
     WandelscriptEditor?: {