From cdcd0592484e479e2b1aee140d912b22c055ad5e Mon Sep 17 00:00:00 2001 From: oleg Date: Tue, 6 May 2025 15:06:59 +0200 Subject: [PATCH] fix(editor): Increase hover delay and hit area for canvas toolbar edge (#15125) --- .../src/components/canvas/elements/edges/CanvasEdge.test.ts | 2 +- .../src/components/canvas/elements/edges/CanvasEdge.vue | 2 +- .../src/components/canvas/elements/edges/CanvasEdgeToolbar.vue | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts index 90d30cb8912..9280b314822 100644 --- a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts +++ b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts @@ -90,7 +90,7 @@ describe('CanvasEdge', () => { await user.unhover(getByTestId('edge-label')); expect(getByTestId('canvas-edge-toolbar')).toBeInTheDocument(); - await vi.advanceTimersByTimeAsync(300); + await vi.advanceTimersByTimeAsync(600); expect(queryByTestId('canvas-edge-toolbar')).not.toBeInTheDocument(); }); diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue index cbc7437dffe..4d23692e49b 100644 --- a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue +++ b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue @@ -35,7 +35,7 @@ const connectionType = computed(() => const delayedHovered = ref(props.hovered); const delayedHoveredSetTimeoutRef = ref(null); -const delayedHoveredTimeout = 300; +const delayedHoveredTimeout = 600; watch( () => props.hovered, diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue index 3b7093780b7..7f690ea906e 100644 --- a/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue +++ b/packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue @@ -63,6 +63,7 @@ function onDelete() { align-items: center; gap: var(--spacing-2xs); pointer-events: all; + padding: var(--spacing-l); }