From c3dc66ee7372927fcfd6baac3b9d853690e39c99 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 19 Feb 2025 16:48:23 +0200
Subject: [PATCH] fix(editor): Correctly close node creator when
 selecting/deselecting a node (#13338)

---
 .../editor-ui/src/components/canvas/Canvas.vue    |  8 +++++---
 .../render-types/parts/CanvasHandlePlus.vue       |  2 +-
 .../nodes/render-types/CanvasNodeAddNodes.vue     |  2 +-
 packages/editor-ui/src/views/NodeView.v2.vue      | 15 +++++++++++++--
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index b76f724845..03161b42b2 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -46,11 +46,12 @@ const emit = defineEmits<{
 	'update:nodes:position': [events: CanvasNodeMoveEvent[]];
 	'update:node:active': [id: string];
 	'update:node:enabled': [id: string];
-	'update:node:selected': [id: string];
+	'update:node:selected': [id?: string];
 	'update:node:name': [id: string];
 	'update:node:parameters': [id: string, parameters: Record<string, unknown>];
 	'update:node:inputs': [id: string];
 	'update:node:outputs': [id: string];
+	'click:node': [id: string];
 	'click:node:add': [id: string, handle: string];
 	'run:node': [id: string];
 	'delete:node': [id: string];
@@ -323,6 +324,8 @@ function onNodeDragStop(event: NodeDragEvent) {
 }
 
 function onNodeClick({ event, node }: NodeMouseEvent) {
+	emit('click:node', node.id);
+
 	if (event.ctrlKey || event.metaKey || selectedNodes.value.length < 2) {
 		return;
 	}
@@ -344,8 +347,7 @@ function clearSelectedNodes() {
 }
 
 function onSelectNode() {
-	if (!lastSelectedNode.value) return;
-	emit('update:node:selected', lastSelectedNode.value.id);
+	emit('update:node:selected', lastSelectedNode.value?.id);
 }
 
 function onSelectNodes({ ids }: CanvasEventBusEvents['nodes:select']) {
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
index 880a9a0401..4d28d57417 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
@@ -115,7 +115,7 @@ function onClick(event: MouseEvent) {
 			data-test-id="canvas-handle-plus"
 			:class="[$style.plus, handleClasses, 'clickable']"
 			:transform="`translate(${plusPosition[0]}, ${plusPosition[1]})`"
-			@click="onClick"
+			@click.stop="onClick"
 		>
 			<rect
 				:class="[handleClasses, 'clickable']"
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
index 9573b42014..807899d1d4 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
@@ -43,7 +43,7 @@ function onClick() {
 			:popper-class="$style.tooltip"
 			:show-after="700"
 		>
-			<button :class="$style.button" data-test-id="canvas-plus-button" @click="onClick">
+			<button :class="$style.button" data-test-id="canvas-plus-button" @click.stop="onClick">
 				<FontAwesomeIcon icon="plus" size="lg" />
 			</button>
 			<template #content>
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 1a682958f1..b321ccac23 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -617,11 +617,16 @@ function onToggleNodesDisabled(ids: string[]) {
 	toggleNodesDisabled(ids);
 }
 
+function onClickNode() {
+	closeNodeCreator();
+}
+
 function onSetNodeActive(id: string) {
 	setNodeActive(id);
 }
 
 function onSetNodeSelected(id?: string) {
+	closeNodeCreator();
 	setNodeSelected(id);
 }
 
@@ -1036,6 +1041,12 @@ function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
 	}
 }
 
+function closeNodeCreator() {
+	if (nodeCreatorStore.isCreateNodeActive) {
+		nodeCreatorStore.isCreateNodeActive = false;
+	}
+}
+
 function onCreateSticky() {
 	void onAddNodesAndConnections({ nodes: [{ type: STICKY_NODE_TYPE }], connections: [] });
 }
@@ -1507,8 +1518,7 @@ function selectNodes(ids: string[]) {
 
 function onClickPane(position: CanvasNode['position']) {
 	lastClickPosition.value = [position.x, position.y];
-	nodeCreatorStore.isCreateNodeActive = false;
-	setNodeSelected();
+	onSetNodeSelected();
 }
 
 /**
@@ -1725,6 +1735,7 @@ onBeforeUnmount(() => {
 		@update:node:parameters="onUpdateNodeParameters"
 		@update:node:inputs="onUpdateNodeInputs"
 		@update:node:outputs="onUpdateNodeOutputs"
+		@click:node="onClickNode"
 		@click:node:add="onClickNodeAdd"
 		@run:node="onRunWorkflowToNode"
 		@delete:node="onDeleteNode"