fix(editor): Fix showing and hiding canvas edge toolbar when hovering (…

…#13009)

packages/editor-ui/package.json

@@ -45,8 +45,8 @@
     "@sentry/vue": "catalog:frontend",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
-    "@vue-flow/core": "^1.41.6",
-    "@vue-flow/minimap": "^1.5.0",
+    "@vue-flow/core": "^1.42.1",
+    "@vue-flow/minimap": "^1.5.2",
     "@vue-flow/node-resizer": "^1.4.0",
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",

packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts

@@ -71,6 +71,30 @@ describe('CanvasEdge', () => {
 		expect(() => getByTestId('delete-connection-button')).toThrow();
 	});
 
+	it('should hide toolbar after delay', async () => {
+		vi.useFakeTimers();
+
+		const user = userEvent.setup({
+			advanceTimers: vi.advanceTimersByTime,
+		});
+
+		const { rerender, getByTestId, queryByTestId } = renderComponent({
+			props: { hovered: true },
+		});
+
+		await user.hover(getByTestId('edge-label'));
+		expect(queryByTestId('canvas-edge-toolbar')).toBeInTheDocument();
+
+		await rerender({ hovered: false });
+
+		await user.unhover(getByTestId('edge-label'));
+		expect(getByTestId('canvas-edge-toolbar')).toBeInTheDocument();
+
+		await vi.advanceTimersByTimeAsync(300);
+
+		expect(queryByTestId('canvas-edge-toolbar')).not.toBeInTheDocument();
+	});
+
 	it('should compute edgeStyle correctly', () => {
 		const { container } = renderComponent();
 

packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue

@@ -5,7 +5,7 @@ import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import type { Connection, EdgeProps } from '@vue-flow/core';
 import { BaseEdge, EdgeLabelRenderer } from '@vue-flow/core';
 import { NodeConnectionType } from 'n8n-workflow';
-import { computed, toRef, useCssModule } from 'vue';
+import { computed, ref, toRef, useCssModule, watch } from 'vue';
 import CanvasEdgeToolbar from './CanvasEdgeToolbar.vue';
 import { getEdgeRenderData } from './utils';
 
@@ -33,7 +33,26 @@ const connectionType = computed(() =>
 		: NodeConnectionType.Main,
 );
 
-const renderToolbar = computed(() => props.hovered && !props.readOnly);
+const delayedHovered = ref(props.hovered);
+const delayedHoveredSetTimeoutRef = ref<NodeJS.Timeout | null>(null);
+const delayedHoveredTimeout = 300;
+
+watch(
+	() => props.hovered,
+	(isHovered) => {
+		if (isHovered) {
+			if (delayedHoveredSetTimeoutRef.value) clearTimeout(delayedHoveredSetTimeoutRef.value);
+			delayedHovered.value = true;
+		} else {
+			delayedHoveredSetTimeoutRef.value = setTimeout(() => {
+				delayedHovered.value = false;
+			}, delayedHoveredTimeout);
+		}
+	},
+	{ immediate: true },
+);
+
+const renderToolbar = computed(() => (props.selected || delayedHovered.value) && !props.readOnly);
 
 const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main);