From e304f7c5b8ff1b41268450c60ca4bc3b2ada5d4a Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Tue, 2 Nov 2021 18:34:12 +0100
Subject: [PATCH] make entire node connectable

---
 packages/editor-ui/src/components/Node.vue |  8 ++++-
 packages/editor-ui/src/views/NodeView.vue  | 35 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 843a7c66ee..4f216e88e2 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/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);
+		},
 	},
 });
 
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 87047ed296..e3f44c5dbf 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/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);