mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix position of connector buttons when the line is straight (#13034)

Browse source
This commit is contained in:
autologie 2025-02-04 12:18:07 +01:00 committed by GitHub
parent 884a7e23f8
commit 3a908aca17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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( expect(label).toHaveAttribute('style', 'transform: translate(0, -100%);');
'style',
'transform: translate(-50%, -150%) translate(50px, 50px);',
);
}); });
it("should render a label in the middle of the connector when it isn't straight", () => { 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( expect(label).toHaveAttribute('style', 'transform: translate(0, 0%);');
'style',
'transform: translate(-50%, -50%) translate(50px, 50px);',
);
}); });
}); });

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

@ -86,19 +86,16 @@ const edgeClasses = computed(() => ({
})); }));
const edgeLabelStyle = computed(() => ({ const edgeLabelStyle = computed(() => ({
transform: `translate(0, ${isConnectorStraight.value ? '-100%' : '0%'})`,
color: edgeColor.value, color: edgeColor.value,
})); }));
const isConnectorStraight = computed(() => renderData.value.isConnectorStraight); const isConnectorStraight = computed(() => renderData.value.isConnectorStraight);
const edgeToolbarStyle = computed(() => { const edgeToolbarStyle = computed(() => ({
const translateY = isConnectorStraight.value ? '-150%' : '-50%'; transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
...(props.hovered ? { zIndex: 1 } : {}),
return { }));
transform: `translate(-50%, ${translateY}) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
...(props.hovered ? { zIndex: 1 } : {}),
};
});
const edgeToolbarClasses = computed(() => ({ const edgeToolbarClasses = computed(() => ({
[$style.edgeLabelWrapper]: true, [$style.edgeLabelWrapper]: true,