make entire node connectable

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="node-wrapper" :style="nodePosition">
+	<div class="node-wrapper" :style="nodePosition" v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
 		<div :class="{'selected': true, 'has-subtitles': !!nodeSubtitle}" v-show="isSelected"></div>
 		<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd">
 			<div v-if="hasIssues" class="node-info-icon node-issues">
@@ -248,6 +248,12 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				}, 2000);
 			}
 		},
+		onMouseEnter () {
+			this.$emit('mouseenter', this.data.name);
+		},
+		onMouseLeave () {
+			this.$emit('mouseleave', this.data.name);
+		},
 	},
 });
 

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

@@ -23,6 +23,8 @@
 				@runWorkflow="runWorkflow"
 				@moved="onNodeMoved"
 				@run="onNodeRun"
+				@mouseenter="onNodeEnter"
+				@mouseleave="onNodeLeave"
 				:id="'node-' + getNodeIndex(nodeData.name)"
 				:key="getNodeIndex(nodeData.name)"
 				:name="nodeData.name"
@@ -310,6 +312,7 @@ export default mixins(
 				blankRedirect: false,
 				credentialsUpdated: false,
 				newNodeInsertPosition: null as null | XYPosition,
+				hoveringOverNodeName: null as null | string,
 			};
 		},
 		beforeDestroy () {
@@ -1268,15 +1271,23 @@ export default mixins(
 
 				let dropPrevented = false;
 
-				this.instance.bind('connectionAborted', (info) => {
+				this.instance.bind('connectionAborted', (connection) => {
 					if (dropPrevented) {
 						dropPrevented = false;
 						return;
 					}
 
+					if (this.hoveringOverNodeName) {
+						const sourceNodeName = this.$store.getters.getNodeNameByIndex(connection.sourceId.slice(NODE_NAME_PREFIX.length));
+						const outputIndex = connection.getParameters().index;
+
+						this.connectTwoNodes(sourceNodeName, outputIndex, this.hoveringOverNodeName, 0);
+						return;
+					}
+
 					insertNodeAfterSelected({
-						sourceId: info.sourceId,
-						index: info.getParameters().index,
+						sourceId: connection.sourceId,
+						index: connection.getParameters().index,
 						eventSource: 'node_connection_drop',
 					});
 				});
@@ -1455,11 +1466,19 @@ export default mixins(
 						}
 
 						const elements = document.querySelector('div.jtk-endpoint.dropHover');
-						if (elements && !droppable) {
+						if ((elements || this.hoveringOverNodeName) && !droppable) {
+							if (!elements && this.hoveringOverNodeName) {
+								const node = this.$store.getters.getNodeByName(this.hoveringOverNodeName);
+								const type: INodeTypeDescription = this.$store.getters.nodeType(node.type);
+								if (type.inputs.length !== 1) { // only attach to simple nodes with 1 input
+									return;
+								}
+							}
+
 							droppable = true;
 							CanvasHelpers.showDropConnectionState(connection);
 						}
-						else if (!elements && droppable) {
+						else if (!(elements || this.hoveringOverNodeName) && droppable) {
 							droppable = false;
 							CanvasHelpers.showPullConnectionState(connection);
 						}
@@ -1703,6 +1722,12 @@ export default mixins(
 					CanvasHelpers.showOrHideItemsLabel(connection);
 				});
 			},
+			onNodeEnter (nodeName: string) {
+				this.hoveringOverNodeName = nodeName;
+			},
+			onNodeLeave () {
+				this.hoveringOverNodeName = null;
+			},
 			onNodeRun ({name, data}: {name: string, data: ITaskData[] | null}) {
 				const sourceNodeName = name;
 				const sourceIndex = this.$store.getters.getNodeIndex(sourceNodeName);