From 369a2e97968c6d40d827d8e780a8d3f1fd2188f7 Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Tue, 1 Aug 2023 17:17:06 +0200
Subject: [PATCH] fix(editor): Improve displaying and hiding of connections
 actions (#6823)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 packages/editor-ui/src/views/NodeView.vue | 36 +++++++++++++----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 07463c7ea..5ff0b53c5 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -185,7 +185,7 @@ import {
 	EVENT_CONNECTION_MOVED,
 	INTERCEPT_BEFORE_DROP,
 } from '@jsplumb/core';
-import type { MessageBoxInputData } from 'element-plus';
+import type { MessageBoxInputData, ElNotification } from 'element-plus';
 
 import {
 	FIRST_ONBOARDING_PROMPT_TIMEOUT,
@@ -315,7 +315,6 @@ import {
 	N8nPlusEndpointType,
 	EVENT_PLUS_ENDPOINT_CLICK,
 } from '@/plugins/endpoints/N8nPlusEndpointType';
-import type { ElNotification } from 'element-plus';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 
 interface AddNodeOptions {
@@ -634,7 +633,7 @@ export default defineComponent({
 			isProductionExecutionPreview: false,
 			enterTimer: undefined as undefined | ReturnType<typeof setTimeout>,
 			exitTimer: undefined as undefined | ReturnType<typeof setTimeout>,
-			readOnlyNotification: null as null | ElNotification,
+			readOnlyNotification: null as null | typeof ElNotification,
 			// jsplumb automatically deletes all loose connections which is in turn recorded
 			// in undo history as a user action.
 			// This should prevent automatically removed connections from populating undo stack
@@ -2246,6 +2245,11 @@ export default defineComponent({
 				});
 			});
 		},
+		isConnectionActive(connection: Connection | null) {
+			if (!connection?.id || !this.activeConnection?.id) return false;
+
+			return this.activeConnection?.id === connection.id;
+		},
 		onConnectionMouseOver(connection: Connection) {
 			try {
 				if (this.exitTimer !== undefined) {
@@ -2254,17 +2258,19 @@ export default defineComponent({
 				}
 
 				if (
-					this.isReadOnlyRoute ||
-					this.readOnlyEnv ||
-					this.enterTimer ||
-					!connection ||
-					connection === this.activeConnection
+					this.isReadOnlyRoute ??
+					this.readOnlyEnv ??
+					this.enterTimer ??
+					!connection ??
+					this.isConnectionActive(connection)
 				)
 					return;
 
-				if (this.activeConnection) NodeViewUtils.hideConnectionActions(this.activeConnection);
-
 				this.enterTimer = setTimeout(() => {
+					// If there is already an active connection then hide it first
+					if (this.activeConnection && !this.isConnectionActive(connection)) {
+						NodeViewUtils.hideConnectionActions(this.activeConnection);
+					}
 					this.enterTimer = undefined;
 					if (connection) {
 						NodeViewUtils.showConnectionActions(connection);
@@ -2285,17 +2291,17 @@ export default defineComponent({
 				}
 
 				if (
-					this.isReadOnlyRoute ||
-					this.readOnlyEnv ||
-					!connection ||
-					this.activeConnection?.id !== connection.id
+					this.isReadOnlyRoute ??
+					this.readOnlyEnv ??
+					!connection ??
+					!this.isConnectionActive(connection)
 				)
 					return;
 
 				this.exitTimer = setTimeout(() => {
 					this.exitTimer = undefined;
 
-					if (connection && this.activeConnection === connection) {
+					if (connection && this.isConnectionActive(connection)) {
 						NodeViewUtils.hideConnectionActions(this.activeConnection);
 						this.activeConnection = null;
 					}