move up label

packages/editor-ui/src/Interface.ts

@@ -64,7 +64,8 @@ declare module 'jsplumb' {
 
 	interface Overlay {
 		setVisible(visible: boolean): void;
-		setLocation(location: number | [number, number]): void;
+		setLocation(location: number): void;
+		canvas?: HTMLElement;
 	}
 
 	interface OnConnectionBindInfo {

packages/editor-ui/src/views/NodeView.vue

@@ -2455,13 +2455,21 @@ export default mixins(
 <style lang="scss">
 
 .connection-output-items-label {
+	span {
 		border-radius: 7px;
 		background-color: var(--color-canvas-background);
 		line-height: 1.3em;
-	padding: 2px 3px;
+		padding: 0px 3px;
 		white-space: nowrap;
 		font-size: var(--font-size-s);
 		font-weight: var(--font-weight-regular);
+	}
+
+	> span.floating {
+		position: absolute;
+		top: -20px;
+		transform: translateX(-50%)
+	}
 }
 
 .connection-input-name-label {

packages/editor-ui/src/views/canvasHelpers.ts

@@ -255,6 +255,21 @@ export const showOrHideItemsLabel = (connection: Connection) => {
 	else {
 		overlay.setVisible(true);
 	}
+
+	if (overlay.canvas) {
+		if (diffY === 0) {
+			const innerElement = overlay.canvas.querySelector('span');
+			if (innerElement) {
+				innerElement.classList.add('floating');
+			}
+		}
+		else {
+			const innerElement = overlay.canvas.querySelector('span');
+			if (innerElement) {
+				innerElement.classList.remove('floating');
+			}
+		}
+	}
 };
 
 export const getIcon = (name: string): string => {
@@ -437,7 +452,7 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 		'Label',
 		{
 			id: OVERLAY_RUN_ITEMS_ID,
-			label,
+			label: `<span>${label}</span>`,
 			cssClass: 'connection-output-items-label',
 			location: .5,
 		},