Display output names on connections if there are any

packages/editor-ui/src/Interface.ts

@@ -32,12 +32,17 @@ declare module 'jsplumb' {
 		// bind(event: string, (connection: Connection): void;): void; // tslint:disable-line:no-any
 		bind(event: string, callback: Function): void; // tslint:disable-line:no-any
 		removeOverlay(name: string): void;
+		removeOverlays(): void;
 		setParameter(name: string, value: any): void; // tslint:disable-line:no-any
 		setPaintStyle(arg0: PaintStyle): void;
 		addOverlay(arg0: any[]): void; // tslint:disable-line:no-any
 		setConnector(arg0: any[]): void; // tslint:disable-line:no-any
 	}
 
+	interface Endpoint {
+		getOverlay(name: string): any; // tslint:disable-line:no-any
+	}
+
 	interface Overlay {
 		setVisible(visible: boolean): void;
 	}

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

@@ -207,6 +207,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 					newEndpointData.overlays = [
 						['Label',
 							{
+								id: 'output-name-label',
 								location: [0.5, 1.5],
 								label: nodeTypeData.outputNames[index],
 								cssClass: 'node-endpoint-label',

packages/editor-ui/src/n8n-theme-variables.scss

@@ -23,6 +23,8 @@ $--custom-running-text : #eb9422;
 $--custom-success-background : #e3f0e4;
 $--custom-success-text : #40c351;
 
+$--custom-node-view-background : #faf9fe;
+
 // Table
 $--custom-table-background-main: $--custom-header-background	;
 $--custom-table-background-alternative: #f5f5f5;

packages/editor-ui/src/n8n-theme.scss

@@ -12,7 +12,7 @@ body {
 	font-weight: 300;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	background-color: #faf9fe;
+	background-color: $--custom-node-view-background;
 	margin: 0;
 	padding: 0;
 }

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

@@ -977,6 +977,16 @@ export default mixins(
 				});
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
+					// @ts-ignore
+					const sourceInfo = info.sourceEndpoint.getParameters();
+					// @ts-ignore
+					const targetInfo = info.targetEndpoint.getParameters();
+
+					const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex);
+					const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex);
+
+					const sourceNode = this.$store.getters.nodeByName(sourceNodeName);
+
 					// TODO: That should happen after each move (only the setConnector part)
 					if (info.sourceEndpoint.anchor.lastReturnValue[1] >= info.targetEndpoint.anchor.lastReturnValue[1]) {
 						// When the source is underneath the target it will make sure that
@@ -1038,20 +1048,47 @@ export default mixins(
 						},
 					]);
 
+					// Display output names if they exist on connection
+					const sourceNodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(sourceNode.type);
+					if (sourceNodeTypeData.outputNames !== undefined) {
+						for (const output of sourceNodeTypeData.outputNames) {
+							const outputName = sourceNodeTypeData.outputNames[sourceInfo.index];
+
+							if (info.connection.getOverlay('output-name-label')) {
+								// Make sure that it does not get added multiple times
+								continue;
+							}
+
+							// @ts-ignore
+							info.connection.addOverlay([
+								'Label',
+								{
+									id: 'output-name-label',
+									label: outputName,
+									cssClass: 'connection-output-name-label',
+									location: 0.3,
+								},
+							]);
+						}
+					}
+
+					// When connection gets made the output name get displayed as overlay
+					// on the connection. So the one on the endpoint can be hidden.
 					// @ts-ignore
-					const sourceInfo = info.sourceEndpoint.getParameters();
+					const outputNameOverlay = info.connection.endpoints[0].getOverlay('output-name-label');
-					// @ts-ignore
+					if (outputNameOverlay !== null) {
-					const targetInfo = info.targetEndpoint.getParameters();
+						outputNameOverlay.setVisible(false);
+					}
 
 					this.$store.commit('addConnection', {
 						connection: [
 							{
-								node: this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex),
+								node: sourceNodeName,
 								type: sourceInfo.type,
 								index: sourceInfo.index,
 							},
 							{
-								node: this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex),
+								node: targetNodeName,
 								type: targetInfo.type,
 								index: targetInfo.index,
 							},
@@ -1086,9 +1123,22 @@ export default mixins(
 
 					// Make sure to remove the overlay else after the second move
 					// it visibly stays behind free floating without a connection.
-					info.connection.removeOverlay('remove-connection');
+					info.connection.removeOverlays();
 				});
+
 				this.instance.bind('connectionDetached', (info) => {
+					const sourceEndpoint = info.connection.endpoints[0];
+
+					// If the source endpoint is not connected to anything else anymore
+					// display the output-name overlays on the endpoint if any exist
+					if (sourceEndpoint !== undefined && sourceEndpoint.connections!.length === 1) {
+						const outputNameOverlay = sourceEndpoint.getOverlay('output-name-label');
+						if (outputNameOverlay !== null) {
+							outputNameOverlay.setVisible(true);
+						}
+					}
+
+					info.connection.removeOverlays();
 					this.__removeConnectionByConnectionInfo(info, false);
 				});
 			},
@@ -1807,6 +1857,12 @@ export default mixins(
 
 <style lang="scss">
 
+.connection-output-name-label {
+	background-color: $--custom-node-view-background;
+	line-height: 1.3em;
+	font-size: 0.8em;
+}
+
 .remove-connection-label {
 	font-size: 12px;
 	color: #fff;
@@ -1838,6 +1894,7 @@ export default mixins(
 
 .node-endpoint-label {
 	font-size: 10px;
+	background-color: $--custom-node-view-background;
 }
 
 .button-white {