From 5fd3f8a2441fbdac12fbf6baa80ebb4e84f54cd0 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 25 Nov 2021 18:41:49 +0100
Subject: [PATCH] :bug: Fix bug with connections deleted when node is renamed
 (#2467)

* fix bug when node is renamed

* update comment

* support touch when dragging
---
 packages/editor-ui/src/components/mixins/nodeBase.ts | 2 +-
 packages/editor-ui/src/views/NodeView.vue            | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
index 97237df2b5..179272e829 100644
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -74,7 +74,7 @@ export const nodeBase = mixins(
 						type: inputName,
 						index,
 					},
-					enabled: !this.isReadOnly,
+					enabled: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView
 					dragAllowedWhenFull: true,
 					dropOptions: {
 						tolerance: 'touch',
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 65d05f2a41..2a9e699984 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1522,7 +1522,7 @@ export default mixins(
 						CanvasHelpers.addOverlays(connection, CanvasHelpers.CONNECTOR_DROP_NODE_OVERLAY);
 						const nodes = [...document.querySelectorAll('.node-default')];
 
-						const onMouseMove = (e: MouseEvent) => {
+						const onMouseMove = (e: MouseEvent | TouchEvent) => {
 							if (!connection) {
 								return;
 							}
@@ -1537,7 +1537,8 @@ export default mixins(
 							const inputMargin = 24;
 							const intersecting = nodes.find((element: Element) => {
 								const {top, left, right, bottom} = element.getBoundingClientRect();
-								if (top <= e.pageY && bottom >= e.pageY && (left - inputMargin) <= e.pageX && right >= e.pageX) {
+								const [x, y] = CanvasHelpers.getMousePosition(e);
+								if (top <= y && bottom >= y && (left - inputMargin) <= x && right >= x) {
 									const nodeName = (element as HTMLElement).dataset['name'] as string;
 									const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
 									if (node) {
@@ -1562,7 +1563,7 @@ export default mixins(
 							}
 						};
 
-						const onMouseUp = (e: MouseEvent) => {
+						const onMouseUp = (e: MouseEvent | TouchEvent) => {
 							this.pullConnActive = false;
 							this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
 							CanvasHelpers.resetConnectionAfterPull(connection);
@@ -1571,7 +1572,9 @@ export default mixins(
 						};
 
 						window.addEventListener('mousemove', onMouseMove);
+						window.addEventListener('touchmove', onMouseMove);
 						window.addEventListener('mouseup', onMouseUp);
+						window.addEventListener('touchend', onMouseMove);
 					} catch (e) {
 						console.error(e); // eslint-disable-line no-console
 					}