fix(editor): Prevent connection line from showing when clicking the plus button of a node (#12265)

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

@@ -5,6 +5,7 @@ import { setActivePinia } from 'pinia';
 import type { ConnectionLineProps } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 import { createCanvasProvide } from '@/__tests__/data';
+import { waitFor } from '@testing-library/vue';
 
 const DEFAULT_PROPS = {
 	sourceX: 0,
@@ -63,4 +64,19 @@ describe('CanvasConnectionLine', () => {
 			'M-50 130L-90 130L -124,130Q -140,130 -140,114L -140,-84Q -140,-100 -124,-100L-100 -100',
 		);
 	});
+
+	it('should show the connection line after a short delay', async () => {
+		vi.useFakeTimers();
+		const { container } = renderComponent({
+			props: DEFAULT_PROPS,
+		});
+
+		const edge = container.querySelector('.vue-flow__edge-path');
+
+		expect(edge).not.toHaveClass('visible');
+
+		vi.advanceTimersByTime(300);
+
+		await waitFor(() => expect(edge).toHaveClass('visible'));
+	});
 });

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

@@ -2,7 +2,7 @@
 /* eslint-disable vue/no-multiple-template-root */
 import type { ConnectionLineProps } from '@vue-flow/core';
 import { BaseEdge } from '@vue-flow/core';
-import { computed, useCssModule } from 'vue';
+import { computed, onMounted, ref, useCssModule } from 'vue';
 import { getEdgeRenderData } from './utils';
 import { useCanvas } from '@/composables/useCanvas';
 import { NodeConnectionType } from 'n8n-workflow';
@@ -18,6 +18,13 @@ const connectionType = computed(
 	() => parseCanvasConnectionHandleString(connectingHandle.value?.handleId).type,
 );
 
+const classes = computed(() => {
+	return {
+		[$style.edge]: true,
+		[$style.visible]: isVisible.value,
+	};
+});
+
 const edgeColor = computed(() => {
 	if (connectionType.value !== NodeConnectionType.Main) {
 		return 'var(--node-type-supplemental-color)';
@@ -37,13 +44,25 @@ const renderData = computed(() =>
 );
 
 const segments = computed(() => renderData.value.segments);
+
+/**
+ * Used to delay the visibility of the connection line to prevent flickering
+ * when the actual user intent is to click the plus button
+ */
+const isVisible = ref(false);
+
+onMounted(() => {
+	setTimeout(() => {
+		isVisible.value = true;
+	}, 300);
+});
 </script>
 
 <template>
 	<BaseEdge
 		v-for="segment in segments"
 		:key="segment[0]"
-		:class="$style.edge"
+		:class="classes"
 		:style="edgeStyle"
 		:path="segment[0]"
 		:marker-end="markerEnd"
@@ -52,6 +71,13 @@ const segments = computed(() => renderData.value.segments);
 
 <style lang="scss" module>
 .edge {
-	transition: stroke 0.3s ease;
+	transition-property: stroke, opacity;
+	transition-duration: 300ms;
+	transition-timing-function: ease;
+	opacity: 0;
+
+	&.visible {
+		opacity: 1;
+	}
 }
 </style>