fix(editor): Show connector label above the line when it's straight (#12622)

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

@@ -1,10 +1,10 @@
-import CanvasEdge, { type CanvasEdgeProps } from './CanvasEdge.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
-import { setActivePinia } from 'pinia';
+import userEvent from '@testing-library/user-event';
 import { Position } from '@vue-flow/core';
 import { NodeConnectionType } from 'n8n-workflow';
-import userEvent from '@testing-library/user-event';
+import { setActivePinia } from 'pinia';
+import CanvasEdge, { type CanvasEdgeProps } from './CanvasEdge.vue';
 
 const DEFAULT_PROPS = {
 	sourceX: 0,
@@ -151,4 +151,38 @@ describe('CanvasEdge', () => {
 
 		expect(edge).toHaveAttribute('d', 'M0,0 C62.5,0 -162.5,-100 -100,-100');
 	});
+
+	it('should render a label above the connector when it is straight', () => {
+		const { container } = renderComponent({
+			props: {
+				...DEFAULT_PROPS,
+				sourceY: 50,
+				targetY: 50,
+			},
+		});
+
+		const label = container.querySelector('.vue-flow__edge-label');
+
+		expect(label).toHaveAttribute(
+			'style',
+			'transform: translate(-50%, -150%) translate(50px, 50px);',
+		);
+	});
+
+	it("should render a label in the middle of the connector when it isn't straight", () => {
+		const { container } = renderComponent({
+			props: {
+				...DEFAULT_PROPS,
+				sourceY: 0,
+				targetY: 100,
+			},
+		});
+
+		const label = container.querySelector('.vue-flow__edge-label');
+
+		expect(label).toHaveAttribute(
+			'style',
+			'transform: translate(-50%, -50%) translate(50px, 50px);',
+		);
+	});
 });

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, useCssModule, toRef } from 'vue';
+import { computed, toRef, useCssModule } from 'vue';
 import CanvasEdgeToolbar from './CanvasEdgeToolbar.vue';
 import { getEdgeRenderData } from './utils';
 
@@ -70,9 +70,13 @@ const edgeLabelStyle = computed(() => ({
 	color: edgeColor.value,
 }));
 
+const isConnectorStraight = computed(() => renderData.value.isConnectorStraight);
+
 const edgeToolbarStyle = computed(() => {
+	const translateY = isConnectorStraight.value ? '-150%' : '-50%';
+
 	return {
-		transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px,${labelPosition.value[1]}px)`,
+		transform: `translate(-50%, ${translateY}) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
 		...(props.hovered ? { zIndex: 1 } : {}),
 	};
 });

packages/editor-ui/src/components/canvas/elements/edges/utils/getEdgeRenderData.ts

@@ -21,12 +21,14 @@ export function getEdgeRenderData(
 	} = {},
 ) {
 	const { targetX, targetY, sourceX, sourceY, sourcePosition, targetPosition } = props;
+	const isConnectorStraight = sourceY === targetY;
 
 	if (!isRightOfSourceHandle(sourceX, targetX) || connectionType !== NodeConnectionType.Main) {
 		const segment = getBezierPath(props);
 		return {
 			segments: [segment],
 			labelPosition: [segment[1], segment[2]],
+			isConnectorStraight,
 		};
 	}
 
@@ -59,5 +61,6 @@ export function getEdgeRenderData(
 	return {
 		segments: [firstSegment, secondSegment],
 		labelPosition: [firstSegmentTargetX, firstSegmentTargetY],
+		isConnectorStraight,
 	};
 }

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -132,9 +132,9 @@ function onClickAdd() {
 
 .runDataLabel {
 	position: absolute;
-	top: 0;
+	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translate(-50%, -150%);
 	font-size: var(--font-size-xs);
 	color: var(--color-success);
 }