@wandelbots/wandelbots-js-react-components 1.33.0 → 1.33.2

package/package.json

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

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,22 +1,23 @@
 import { IconButton, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
-import React, { useRef, useState, type ReactNode } from "react"
+import React, { useEffect, useRef, useState, type ReactNode } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import JogMinus from "../../icons/jog-minus.svg"
 import JogPlus from "../../icons/jog-plus.svg"
 import type { AxisControlComponentColors } from "../../themes/themeTypes"
 import { useAnimationFrame } from "../utils/hooks"
-
-type Direction = "+" | "-"
+import type { JoggingDirection } from "./JoggingStore"
 
 type JoggingCartesianAxisControlProps = {
   colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
-  startJogging: (direction: Direction) => void
+  startJogging: (direction: JoggingDirection) => void
   stopJogging: () => void
   disabled?: boolean
+  /** If set, the corresponding button will be rendered in the pressed state */
+  activeJoggingDirection?: JoggingDirection
 } & React.ComponentProps<typeof Stack>
 
 /** A input widget to control an individual cartesian axis */
@@ -29,6 +30,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       startJogging,
       stopJogging,
       disabled,
+      activeJoggingDirection,
       ...rest
     }: JoggingCartesianAxisControlProps) => {
       useAnimationFrame(() => {
@@ -39,7 +41,21 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         element.textContent = displayValue
       })
       const theme = useTheme()
-      const [borderColor, setBorderColor] = useState(colors?.borderColor)
+
+      const [localActiveJoggingDirection, setLocalActiveJoggingDirection] =
+        useState<JoggingDirection | null>(null)
+
+      // Trigger pointer "release" events because e.g. firefox does not trigger pointer events as soon as a component is disabled
+      useEffect(() => {
+        if (!disabled) {
+          return
+        }
+        onPointerUpOrOut()
+      }, [disabled])
+
+      // Handle both controlled and uncontrolled states
+      const showJoggingDirection =
+        activeJoggingDirection || localActiveJoggingDirection
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
@@ -57,17 +73,31 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         }
       }
 
-      const SxAxisControlButton = {
+      const borderColor = showJoggingDirection
+        ? colors.buttonBackgroundColor?.pressed
+        : colors.borderColor
+
+      const sxAxisControlButtonBase = {
         width: "55px",
-        backgroundColor: colors.buttonBackgroundColor?.default,
         color: colors.color,
+        path: { fill: colors.color },
         alignContent: "center",
         fontSize: "37px",
-        "&:hover": {
+        svg: {
+          pointerEvents: "none",
+        },
+      }
+
+      const sxAxisControlButtonDefault = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.default,
+        ":hover": {
           backgroundColor: colors.buttonBackgroundColor?.hovered,
         },
-        "&:active": {
+        ":active": {
           backgroundColor: colors.buttonBackgroundColor?.pressed,
+          color: colors.backgroundColor,
+          path: { fill: colors.backgroundColor },
         },
         ":disabled": {
           backgroundColor: colors.buttonBackgroundColor?.disabled,
@@ -75,18 +105,33 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         },
       }
 
-      function onPointerDown(ev: React.PointerEvent, direction: Direction) {
+      const sxAxisControlButtonPressed = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.pressed,
+        color: colors.backgroundColor,
+        path: { fill: colors.backgroundColor },
+        ":disabled": {
+          backgroundColor: colors.buttonBackgroundColor?.pressed,
+          "svg path": { fill: theme.palette.action.disabled },
+        },
+      }
+
+      function onPointerDown(
+        ev: React.PointerEvent,
+        direction: JoggingDirection,
+      ) {
         if (disabled) {
           return
         }
-        setBorderColor(colors?.buttonBackgroundColor?.pressed)
+
         if (ev.button === 0) {
+          setLocalActiveJoggingDirection(direction)
           startJogging(direction)
         }
       }
 
       function onPointerUpOrOut() {
-        setBorderColor(colors?.borderColor)
+        setLocalActiveJoggingDirection(null)
         stopJogging()
       }
 
@@ -100,7 +145,9 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              ...SxAxisControlButton,
+              ...(showJoggingDirection === "-"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
               borderRadius: "16px 0px 0px 16px",
               borderLeft: `2px solid ${borderColor ?? "#fff"}`,
               borderBottom: `2px solid ${borderColor ?? "#fff"}`,
@@ -163,7 +210,9 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              ...SxAxisControlButton,
+              ...(showJoggingDirection === "+"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
               borderRadius: "0px 16px 16px 0px",
               borderRight: `2px solid ${borderColor ?? "#fff"}`,
               borderBottom: `2px solid ${borderColor ?? "#fff"}`,

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -17,14 +17,19 @@ import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingOptions } from "./JoggingOptions"
-import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import type {
+  DiscreteIncrementOption,
+  JoggingAxis,
+  JoggingDirection,
+  JoggingStore,
+} from "./JoggingStore"
 import { JoggingToggleButtonGroup } from "./JoggingToggleButtonGroup"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
-  axis: "x" | "y" | "z"
+  axis: JoggingAxis
   motionType: "translate" | "rotate"
-  direction: "-" | "+"
+  direction: JoggingDirection
 }
 
 export const JoggingCartesianTab = observer(
@@ -70,24 +75,32 @@ export const JoggingCartesianTab = observer(
       if (!tcpPose) return
 
       await store.withMotionLock(async () => {
-        await store.jogger.runIncrementalCartesianMotion({
-          currentTcpPose: tcpPose,
-          currentJoints: jointPosition,
-          coordSystemId: store.activeCoordSystemId,
-          velocityInRelevantUnits: store.velocityInCurrentUnits,
-          axis: opts.axis,
-          direction: opts.direction,
-          motion:
-            store.selectedCartesianMotionType === "translate"
-              ? {
-                  type: "translate",
-                  distanceMm: increment.mm,
-                }
-              : {
-                  type: "rotate",
-                  distanceRads: degreesToRadians(increment.degrees),
-                },
-        })
+        try {
+          store.setCurrentIncrementJog({
+            axis: opts.axis,
+            direction: opts.direction,
+          })
+          await store.jogger.runIncrementalCartesianMotion({
+            currentTcpPose: tcpPose,
+            currentJoints: jointPosition,
+            coordSystemId: store.activeCoordSystemId,
+            velocityInRelevantUnits: store.velocityInCurrentUnits,
+            axis: opts.axis,
+            direction: opts.direction,
+            motion:
+              store.selectedCartesianMotionType === "translate"
+                ? {
+                    type: "translate",
+                    distanceMm: increment.mm,
+                  }
+                : {
+                    type: "rotate",
+                    distanceRads: degreesToRadians(increment.degrees),
+                  },
+          })
+        } finally {
+          store.setCurrentIncrementJog(null)
+        }
       })
     }
 
@@ -195,6 +208,11 @@ export const JoggingCartesianTab = observer(
                     key={axis.id}
                     colors={axis.colors}
                     disabled={store.isLocked}
+                    activeJoggingDirection={
+                      store.incrementJogInProgress?.axis === axis.id
+                        ? store.incrementJogInProgress.direction
+                        : undefined
+                    }
                     label={
                       <>
                         {axis.icon}
@@ -232,6 +250,11 @@ export const JoggingCartesianTab = observer(
                     key={axis.id}
                     colors={axis.colors}
                     disabled={store.isLocked}
+                    activeJoggingDirection={
+                      store.incrementJogInProgress?.axis === axis.id
+                        ? store.incrementJogInProgress.direction
+                        : undefined
+                    }
                     label={
                       <>
                         <RotationIcon />

package/src/components/jogging/JoggingStore.ts

@@ -27,6 +27,8 @@ const incrementOptions = [
   ...discreteIncrementOptions,
 ] as const
 
+export type JoggingAxis = "x" | "y" | "z"
+export type JoggingDirection = "+" | "-"
 export type DiscreteIncrementOption = (typeof discreteIncrementOptions)[number]
 export type IncrementOption = (typeof incrementOptions)[number]
 export type IncrementOptionId = IncrementOption["id"]
@@ -34,6 +36,11 @@ export type IncrementOptionId = IncrementOption["id"]
 export const ORIENTATION_IDS = ["coordsys", "tool"]
 export type OrientationId = (typeof ORIENTATION_IDS)[number]
 
+export type IncrementJogInProgress = {
+  direction: JoggingDirection
+  axis: JoggingAxis
+}
+
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
@@ -87,8 +94,11 @@ export class JoggingStore {
    */
   selectedCartesianMotionType: "translate" | "rotate" = "translate"
 
-  /** True when the API is busy doing a planned increment jog motion */
-  incrementJoggingInProgress = false
+  /**
+   * If the jogger is busy running an incremental jog, this will be set
+   * with the information about the motion
+   */
+  incrementJogInProgress: IncrementJogInProgress | null = null
 
   /** How fast the robot goes when doing cartesian translate jogging in mm/s */
   translationVelocityMmPerSec: number = 10
@@ -437,8 +447,8 @@ export class JoggingStore {
     this.selectedIncrementId = id
   }
 
-  setIncrementJoggingInProgress(inProgress: boolean) {
-    this.incrementJoggingInProgress = inProgress
+  setCurrentIncrementJog(incrementJog: IncrementJogInProgress | null) {
+    this.incrementJogInProgress = incrementJog
   }
 
   setVelocityFromSlider(velocity: number) {

package/src/icons/rotation.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none"><path stroke="#fff" stroke-linecap="round" stroke-width="1.5" d="M18.5 12a6 6 0 1 0-6 6"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.5 11 2 2.5 2-2.5"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C9.15 0 10.25 0.2375 11.3 0.7125C12.35 1.1875 13.25 1.86667 14 2.75V0H16V7H9V5H13.2C12.6667 4.06667 11.9375 3.33333 11.0125 2.8C10.0875 2.26667 9.08333 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.28333 14 10.4417 13.6333 11.475 12.9C11.0583 14.1 12.5083 12.1667 11.475 12.9L12.9 14.325C11.4667 15.4417 9.83333 16 8 16Z" fill="white"/>
+</svg>

package/src/themes/createDarkTheme.ts

@@ -212,7 +212,7 @@ export function createDarkTheme(): Theme {
               hovered: "rgba(241, 77, 66, 1)",
               disabled: "rgba(241, 77, 66, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(255, 198, 198, 1)",
           },
           Y: {
             backgroundColor: "rgba(20, 151, 108, 1)",
@@ -223,7 +223,7 @@ export function createDarkTheme(): Theme {
               disabled: "rgba(28, 188, 135, 1)",
               hovered: "rgba(28, 188, 135, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(215, 255, 242, 1)",
           },
           Z: {
             backgroundColor: "rgba(1, 87, 155, 1)",
@@ -234,7 +234,7 @@ export function createDarkTheme(): Theme {
               disabled: "rgba(2, 136, 209, 1)",
               hovered: "rgba(2, 136, 209, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(210, 239, 255, 1)",
           },
         },
       },