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

This commit is contained in:
Alex Grozav
2025-02-19 16:48:23 +02:00
committed by GitHub
parent 1d03c2c8ca
commit c3dc66ee73
4 changed files with 20 additions and 7 deletions

View File

@@ -46,11 +46,12 @@ const emit = defineEmits<{
'update:nodes:position': [events: CanvasNodeMoveEvent[]]; 'update:nodes:position': [events: CanvasNodeMoveEvent[]];
'update:node:active': [id: string]; 'update:node:active': [id: string];
'update:node:enabled': [id: string]; 'update:node:enabled': [id: string];
'update:node:selected': [id: string]; 'update:node:selected': [id?: string];
'update:node:name': [id: string]; 'update:node:name': [id: string];
'update:node:parameters': [id: string, parameters: Record<string, unknown>]; 'update:node:parameters': [id: string, parameters: Record<string, unknown>];
'update:node:inputs': [id: string]; 'update:node:inputs': [id: string];
'update:node:outputs': [id: string]; 'update:node:outputs': [id: string];
'click:node': [id: string];
'click:node:add': [id: string, handle: string]; 'click:node:add': [id: string, handle: string];
'run:node': [id: string]; 'run:node': [id: string];
'delete:node': [id: string]; 'delete:node': [id: string];
@@ -323,6 +324,8 @@ function onNodeDragStop(event: NodeDragEvent) {
} }
function onNodeClick({ event, node }: NodeMouseEvent) { function onNodeClick({ event, node }: NodeMouseEvent) {
emit('click:node', node.id);
if (event.ctrlKey || event.metaKey || selectedNodes.value.length < 2) { if (event.ctrlKey || event.metaKey || selectedNodes.value.length < 2) {
return; return;
} }
@@ -344,8 +347,7 @@ function clearSelectedNodes() {
} }
function onSelectNode() { 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']) { function onSelectNodes({ ids }: CanvasEventBusEvents['nodes:select']) {

View File

@@ -115,7 +115,7 @@ function onClick(event: MouseEvent) {
data-test-id="canvas-handle-plus" data-test-id="canvas-handle-plus"
:class="[$style.plus, handleClasses, 'clickable']" :class="[$style.plus, handleClasses, 'clickable']"
:transform="`translate(${plusPosition[0]}, ${plusPosition[1]})`" :transform="`translate(${plusPosition[0]}, ${plusPosition[1]})`"
@click="onClick" @click.stop="onClick"
> >
<rect <rect
:class="[handleClasses, 'clickable']" :class="[handleClasses, 'clickable']"

View File

@@ -43,7 +43,7 @@ function onClick() {
:popper-class="$style.tooltip" :popper-class="$style.tooltip"
:show-after="700" :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" /> <FontAwesomeIcon icon="plus" size="lg" />
</button> </button>
<template #content> <template #content>

View File

@@ -617,11 +617,16 @@ function onToggleNodesDisabled(ids: string[]) {
toggleNodesDisabled(ids); toggleNodesDisabled(ids);
} }
function onClickNode() {
closeNodeCreator();
}
function onSetNodeActive(id: string) { function onSetNodeActive(id: string) {
setNodeActive(id); setNodeActive(id);
} }
function onSetNodeSelected(id?: string) { function onSetNodeSelected(id?: string) {
closeNodeCreator();
setNodeSelected(id); setNodeSelected(id);
} }
@@ -1036,6 +1041,12 @@ function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
} }
} }
function closeNodeCreator() {
if (nodeCreatorStore.isCreateNodeActive) {
nodeCreatorStore.isCreateNodeActive = false;
}
}
function onCreateSticky() { function onCreateSticky() {
void onAddNodesAndConnections({ nodes: [{ type: STICKY_NODE_TYPE }], connections: [] }); void onAddNodesAndConnections({ nodes: [{ type: STICKY_NODE_TYPE }], connections: [] });
} }
@@ -1507,8 +1518,7 @@ function selectNodes(ids: string[]) {
function onClickPane(position: CanvasNode['position']) { function onClickPane(position: CanvasNode['position']) {
lastClickPosition.value = [position.x, position.y]; lastClickPosition.value = [position.x, position.y];
nodeCreatorStore.isCreateNodeActive = false; onSetNodeSelected();
setNodeSelected();
} }
/** /**
@@ -1725,6 +1735,7 @@ onBeforeUnmount(() => {
@update:node:parameters="onUpdateNodeParameters" @update:node:parameters="onUpdateNodeParameters"
@update:node:inputs="onUpdateNodeInputs" @update:node:inputs="onUpdateNodeInputs"
@update:node:outputs="onUpdateNodeOutputs" @update:node:outputs="onUpdateNodeOutputs"
@click:node="onClickNode"
@click:node:add="onClickNodeAdd" @click:node:add="onClickNodeAdd"
@run:node="onRunWorkflowToNode" @run:node="onRunWorkflowToNode"
@delete:node="onDeleteNode" @delete:node="onDeleteNode"