From b8550098dce7e505ed1874a5aa47ab6b580ee98b Mon Sep 17 00:00:00 2001 From: "Ricardo M." Date: Tue, 19 Nov 2024 11:13:35 +0100 Subject: [PATCH] fix(Canvas): Increase hoverOut timing Currently, when opening the Step toolbar, the hover area is the same size as the node size and this is problematic for steps that generates a wider toolbar than the node itself, as in order to keep the toolbar open, the user need to follow a `L` shaped path. The fix is to increase the hoverOut delay time upon hovering the node, so the user have more time to get to the rightmost or leftmost button in the toolbar. fix: https://github.com/KaotoIO/kaoto/issues/1631 --- .../src/components/Visualization/Canvas/canvas.defaults.ts | 3 +++ .../components/Visualization/Custom/Node/CustomNode.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts index afdc61e57..ac12f5470 100644 --- a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts +++ b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts @@ -15,4 +15,7 @@ export class CanvasDefaults { static readonly STEP_TOOLBAR_WIDTH = 350; static readonly STEP_TOOLBAR_HEIGHT = 60; + + static readonly HOVER_DELAY_IN = 200; + static readonly HOVER_DELAY_OUT = 500; } diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx index 827c213bc..35dfca24d 100644 --- a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx +++ b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx @@ -48,8 +48,11 @@ const CustomNode: FunctionComponent = observer(({ element, onCo const validationText = vizNode?.getNodeValidationText(); const doesHaveWarnings = !isDisabled && !!validationText; const [isSelected, onSelect] = useSelection(); - const [isGHover, gHoverRef] = useHover(); - const [isToolbarHover, toolbarHoverRef] = useHover(); + const [isGHover, gHoverRef] = useHover(CanvasDefaults.HOVER_DELAY_IN, CanvasDefaults.HOVER_DELAY_OUT); + const [isToolbarHover, toolbarHoverRef] = useHover( + CanvasDefaults.HOVER_DELAY_IN, + CanvasDefaults.HOVER_DELAY_OUT, + ); const childCount = element.getAllNodeChildren().length; const boxRef = useRef(element.getBounds()); const shouldShowToolbar =