fix: AxisButton press is released properly and rotation buttons behav…

…e the same as axis buttons (#124)
wandelbotsgmbh · Oct 22, 2024 · 98f87d1 · 98f87d1
1 parent 1012e1d
commit 98f87d1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/jogging/JoggingCartesianAxisControl.tsx b/src/components/jogging/JoggingCartesianAxisControl.tsx
@@ -1,7 +1,7 @@
 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"
@@ -45,6 +45,14 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       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
@@ -83,10 +91,10 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       const sxAxisControlButtonDefault = {
         ...sxAxisControlButtonBase,
         backgroundColor: colors.buttonBackgroundColor?.default,
-        "&:hover": {
+        ":hover": {
           backgroundColor: colors.buttonBackgroundColor?.hovered,
         },
-        "&:active": {
+        ":active": {
           backgroundColor: colors.buttonBackgroundColor?.pressed,
           color: colors.backgroundColor,
           path: { fill: colors.backgroundColor },

diff --git a/src/components/jogging/JoggingCartesianTab.tsx b/src/components/jogging/JoggingCartesianTab.tsx
@@ -250,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 />