fix(editor): Correctly close node creator when selecting/deselecting a node (#13338)

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']) {

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']"

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>

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"