From bc473655fbc09b1172cd6949236ca2871c9d3b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Fri, 20 Oct 2023 09:26:40 +0200
Subject: [PATCH] fix(editor): Fix canvas selection breaking after interacting
 with node actions (#7466)

Sometimes canvas selection stops working after users interact with node
action buttons (for example if node is moved by dragging one of the
buttons)
NOTE: Ticket number in the branch name is wrong, this fixes ADO-1226
---
 cypress/e2e/12-canvas-actions.cy.ts           | 26 +++++++++++++++++++
 cypress/pages/workflow.ts                     |  7 +++++
 packages/editor-ui/src/stores/canvas.store.ts |  3 +++
 packages/editor-ui/src/views/NodeView.vue     |  1 +
 4 files changed, 37 insertions(+)

diff --git a/cypress/e2e/12-canvas-actions.cy.ts b/cypress/e2e/12-canvas-actions.cy.ts
index 7c12531fac..bf45b7da6b 100644
--- a/cypress/e2e/12-canvas-actions.cy.ts
+++ b/cypress/e2e/12-canvas-actions.cy.ts
@@ -198,4 +198,30 @@ describe('Canvas Actions', () => {
 		cy.get('body').type('{shift}', { release: false }).type('{leftArrow}');
 		WorkflowPage.getters.selectedNodes().should('have.length', 2);
 	});
+
+	it('should not break lasso selection when dragging node action buttons', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.findChildByTestId('disable-node-button').as('disableNodeButton');
+		cy.drag('@disableNodeButton', [200, 200]);
+		WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+	});
+
+	it('should not break lasso selection with multiple clicks on node action buttons', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last().as('lastNode');
+		cy.get('@lastNode').findChildByTestId('disable-node-button').as('disableNodeButton');
+		for (let i = 0; i < 20; i++) {
+			cy.get('@lastNode').realHover();
+			cy.get('@disableNodeButton').should('be.visible');
+			cy.get('@disableNodeButton').realTouch();
+			cy.getByTestId('execute-workflow-button').realHover();
+			WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+		}
+	});
 });
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
index ec5c791b44..4bcccc7418 100644
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@@ -327,5 +327,12 @@ export class WorkflowPage extends BasePage {
 		shouldHaveWorkflowName: (name: string) => {
 			this.getters.workflowNameInputContainer().invoke('attr', 'title').should('include', name);
 		},
+		testLassoSelection: (from: [number, number], to: [number, number]) => {
+			cy.getByTestId('node-view-wrapper').trigger('mousedown', from[0], from[1], { force: true });
+			cy.getByTestId('node-view-wrapper').trigger('mousemove', to[0], to[1], { force: true });
+			cy.get('#select-box').should('be.visible');
+			cy.getByTestId('node-view-wrapper').trigger('mouseup', to[0], to[1], { force: true });
+			cy.get('#select-box').should('not.be.visible');
+		},
 	};
 }
diff --git a/packages/editor-ui/src/stores/canvas.store.ts b/packages/editor-ui/src/stores/canvas.store.ts
index 2bbab329c3..137baeac9e 100644
--- a/packages/editor-ui/src/stores/canvas.store.ts
+++ b/packages/editor-ui/src/stores/canvas.store.ts
@@ -271,6 +271,9 @@ export const useCanvasStore = defineStore('canvas', () => {
 						if (moveNodes.length > 1) {
 							historyStore.stopRecordingUndo();
 						}
+						if (uiStore.isActionActive('dragActive')) {
+							uiStore.removeActiveAction('dragActive');
+						}
 					}
 				},
 				filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 0145df7b9d..a156da5c1f 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -10,6 +10,7 @@
 			<div
 				class="node-view-wrapper"
 				:class="workflowClasses"
+				data-test-id="node-view-wrapper"
 				@touchstart="mouseDown"
 				@touchend="mouseUp"
 				@touchmove="mouseMoveNodeWorkflow"