From 3a908aca17f0bc1cf5fb5eb8813cc94f27f0bcdf Mon Sep 17 00:00:00 2001 From: autologie Date: Tue, 4 Feb 2025 12:18:07 +0100 Subject: [PATCH] fix(editor): Fix position of connector buttons when the line is straight (#13034) --- .../canvas/elements/edges/CanvasEdge.test.ts | 14 ++++---------- .../canvas/elements/edges/CanvasEdge.vue | 13 +++++-------- 2 files changed, 9 insertions(+), 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 index 5c4b1c65e63..e8075b82eca 100644 --- 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 index 6072bdd82a5..4233bcd26f0 100644 --- 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,