fix(editor): Fix position of connector buttons when the line is strai…

…ght (#13034)
n8n-io · Feb 4, 2025 · 3a908ac · 3a908ac
1 parent 884a7e2
commit 3a908ac
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 18 deletions.
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts
@@ -185,12 +185,9 @@ describe('CanvasEdge', () => {
 			},
 		});
 
-		const label = container.querySelector('.vue-flow__edge-label');
+		const label = container.querySelector('.vue-flow__edge-label')?.childNodes[0];
 
-		expect(label).toHaveAttribute(
-			'style',
-			'transform: translate(-50%, -150%) translate(50px, 50px);',
-		);
+		expect(label).toHaveAttribute('style', 'transform: translate(0, -100%);');
 	});
 
 	it("should render a label in the middle of the connector when it isn't straight", () => {
@@ -202,11 +199,8 @@ describe('CanvasEdge', () => {
 			},
 		});
 
-		const label = container.querySelector('.vue-flow__edge-label');
+		const label = container.querySelector('.vue-flow__edge-label')?.childNodes[0];
 
-		expect(label).toHaveAttribute(
-			'style',
-			'transform: translate(-50%, -50%) translate(50px, 50px);',
-		);
+		expect(label).toHaveAttribute('style', 'transform: translate(0, 0%);');
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -86,19 +86,16 @@ const edgeClasses = computed(() => ({
 }));
 
 const edgeLabelStyle = computed(() => ({
+	transform: `translate(0, ${isConnectorStraight.value ? '-100%' : '0%'})`,
 	color: edgeColor.value,
 }));
 
 const isConnectorStraight = computed(() => renderData.value.isConnectorStraight);
 
-const edgeToolbarStyle = computed(() => {
-	const translateY = isConnectorStraight.value ? '-150%' : '-50%';
-
-	return {
-		transform: `translate(-50%, ${translateY}) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
-		...(props.hovered ? { zIndex: 1 } : {}),
-	};
-});
+const edgeToolbarStyle = computed(() => ({
+	transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
+	...(props.hovered ? { zIndex: 1 } : {}),
+}));
 
 const edgeToolbarClasses = computed(() => ({
 	[$style.edgeLabelWrapper]: true,