fix(editor): Nodes connectors improvements (#8945)

Co-authored-by: Elias Meire <elias@meire.dev>

packages/design-system/src/css/_tokens.dark.scss

@@ -40,6 +40,9 @@
 
 	// Canvas
 	--color-canvas-background: var(--prim-gray-820);
+	--color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background
+	--color-canvas-background-s: 1%;
+	--color-canvas-background-l: 18%;
 	--color-canvas-dot: var(--prim-gray-670);
 	--color-canvas-read-only-line: var(--prim-gray-800);
 	--color-canvas-node-background: var(--prim-gray-40);

packages/design-system/src/css/_tokens.scss

@@ -73,6 +73,9 @@
 
 	// Canvas
 	--color-canvas-background: var(--prim-gray-10);
+	--color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background
+	--color-canvas-background-s: 47%;
+	--color-canvas-background-l: 99%;
 	--color-canvas-dot: var(--prim-gray-120);
 	--color-canvas-read-only-line: var(--prim-gray-30);
 	--color-canvas-node-background: var(--prim-gray-0);

packages/editor-ui/src/components/Node.vue

@@ -1182,7 +1182,8 @@ export default defineComponent({
 	--endpoint-size-small: 14px;
 	--endpoint-size-medium: 18px;
 	--stalk-size: 40px;
-	--stalk-switch-size: 60px;
+	--stalk-medium-size: 60px;
+	--stalk-large-size: 90px;
 	--stalk-success-size: 87px;
 	--stalk-success-size-without-label: 40px;
 	--stalk-long-size: 127px;
@@ -1235,13 +1236,13 @@ export default defineComponent({
 	// mouse over event.
 	pointer-events: none;
 	span {
-		border-radius: 7px;
 		background-color: hsla(
 			var(--color-canvas-background-h),
 			var(--color-canvas-background-s),
 			var(--color-canvas-background-l),
 			0.85
 		);
+		border-radius: var(--border-radius-base);
 		line-height: 1.3em;
 		padding: 0px 3px;
 		white-space: nowrap;
@@ -1421,9 +1422,9 @@ export default defineComponent({
 		var(--color-canvas-background-l),
 		0.85
 	);
-	border-radius: 7px;
+	border-radius: var(--border-radius-large);
-	font-size: 0.7em;
+	font-size: var(--font-size-3xs);
-	padding: 2px;
+	padding: var(--spacing-5xs) var(--spacing-4xs);
 	white-space: nowrap;
 	transition: color var(--node-endpoint-label--transition-duration) ease;
 
@@ -1449,11 +1450,12 @@ export default defineComponent({
 
 	// Some nodes allow for dynamic connection labels
 	// so we need to make sure the label does not overflow
-	&.node-connection-type-main[data-endpoint-label-length='medium'] {
+	&.node-connection-type-main[data-endpoint-label-length] {
-		max-width: calc(var(--stalk-size) - (var(--endpoint-size-small)));
+		max-width: calc(var(--stalk-size) - var(--endpoint-size-small) - var(--spacing-4xs));
 		overflow: hidden;
 		text-overflow: ellipsis;
-		margin-left: calc(var(--endpoint-size-small) + var(--spacing-2xs) + 10px);
+		transform: translateY(-50%) !important;
+		margin-left: var(--endpoint-size-small);
 	}
 }
 
@@ -1508,6 +1510,10 @@ export default defineComponent({
 }
 
 [data-endpoint-label-length='medium'] {
-	--stalk-size: var(--stalk-switch-size);
+	--stalk-size: var(--stalk-medium-size);
+}
+
+[data-endpoint-label-length='large'] {
+	--stalk-size: var(--stalk-large-size);
 }
 </style>

packages/editor-ui/src/mixins/nodeBase.ts

@@ -28,6 +28,7 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useCanvasStore } from '@/stores/canvas.store';
 import type { EndpointSpec } from '@jsplumb/common';
 import { useDeviceSupport } from 'n8n-design-system';
+import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType';
 
 const createAddInputEndpointSpec = (
 	connectionName: NodeConnectionType,
@@ -55,6 +56,12 @@ const createDiamondOutputEndpointSpec = (): EndpointSpec => ({
 	},
 });
 
+const getEndpointLabelLength = (length: number): N8nEndpointLabelLength => {
+	if (length <= 2) return 'small';
+	else if (length <= 6) return 'medium';
+	return 'large';
+};
+
 export const nodeBase = defineComponent({
 	data() {
 		return {
@@ -371,7 +378,7 @@ export const nodeBase = defineComponent({
 				outputConfigurations.push(outputConfiguration);
 			});
 
-			const endpointLabelLength = maxLabelLength < 4 ? 'short' : 'medium';
+			const endpointLabelLength = getEndpointLabelLength(maxLabelLength);
 
 			this.outputs.forEach((value, i) => {
 				const outputConfiguration = outputConfigurations[i];

packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts

@@ -10,11 +10,12 @@ import {
 } from '@jsplumb/browser-ui';
 
 export type ComputedN8nPlusEndpoint = [number, number, number, number, number];
+export type N8nEndpointLabelLength = 'small' | 'medium' | 'large';
 interface N8nPlusEndpointParams extends EndpointRepresentationParams {
 	dimensions: number;
 	connectedEndpoint: Endpoint;
 	hoverMessage: string;
-	endpointLabelLength: 'small' | 'medium';
+	endpointLabelLength: N8nEndpointLabelLength;
 	size: 'small' | 'medium';
 	showOutputLabel: boolean;
 }