From ab41fc3fb5f15e9c7ce7279b46cec90a511d0e0d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 26 Feb 2025 12:42:49 +0200
Subject: [PATCH] fix(editor): Fix keyboard shortcuts no longer working after
 editing sticky note (#13502)

---
 .../src/components/canvas/Canvas.vue          | 20 ++++++---
 .../canvas/elements/nodes/CanvasNode.vue      |  8 +++-
 .../render-types/CanvasNodeDefault.test.ts    | 15 +++++++
 .../nodes/render-types/CanvasNodeDefault.vue  | 14 +++++-
 .../render-types/CanvasNodeStickyNote.test.ts | 44 +++++++++++++++++++
 .../render-types/CanvasNodeStickyNote.vue     | 27 +++++++-----
 .../src/composables/useCanvasOperations.ts    |  5 +++
 packages/editor-ui/src/types/canvas.ts        |  2 +-
 packages/editor-ui/src/views/NodeView.vue     | 10 ++++-
 9 files changed, 122 insertions(+), 23 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index bc4eab4407..a13c95e2d3 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -44,7 +44,8 @@ const emit = defineEmits<{
 	'update:modelValue': [elements: CanvasNode[]];
 	'update:node:position': [id: string, position: XYPosition];
 	'update:nodes:position': [events: CanvasNodeMoveEvent[]];
-	'update:node:active': [id: string];
+	'update:node:activated': [id: string];
+	'update:node:deactivated': [id: string];
 	'update:node:enabled': [id: string];
 	'update:node:selected': [id?: string];
 	'update:node:name': [id: string];
@@ -246,7 +247,7 @@ function selectUpstreamNodes(id: string) {
 
 const keyMap = computed(() => ({
 	ctrl_c: emitWithSelectedNodes((ids) => emit('copy:nodes', ids)),
-	enter: emitWithLastSelectedNode((id) => onSetNodeActive(id)),
+	enter: emitWithLastSelectedNode((id) => onSetNodeActivated(id)),
 	ctrl_a: () => addSelectedNodes(graphNodes.value),
 	// Support both key and code for zooming in and out
 	'shift_+|+|=|shift_Equal|Equal': async () => await onZoomIn(),
@@ -337,9 +338,13 @@ function onSelectionDragStop(event: NodeDragEvent) {
 	onUpdateNodesPosition(event.nodes.map(({ id, position }) => ({ id, position })));
 }
 
-function onSetNodeActive(id: string) {
-	props.eventBus.emit('nodes:action', { ids: [id], action: 'update:node:active' });
-	emit('update:node:active', id);
+function onSetNodeActivated(id: string) {
+	props.eventBus.emit('nodes:action', { ids: [id], action: 'update:node:activated' });
+	emit('update:node:activated', id);
+}
+
+function onSetNodeDeactivated(id: string) {
+	emit('update:node:deactivated', id);
 }
 
 function clearSelectedNodes() {
@@ -607,7 +612,7 @@ function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) {
 		case 'toggle_activation':
 			return emit('update:nodes:enabled', nodeIds);
 		case 'open':
-			return onSetNodeActive(nodeIds[0]);
+			return onSetNodeActivated(nodeIds[0]);
 		case 'rename':
 			return emit('update:node:name', nodeIds[0]);
 		case 'change_color':
@@ -772,7 +777,8 @@ provide(CanvasKey, {
 				@run="onRunNode"
 				@select="onSelectNode"
 				@toggle="onToggleNodeEnabled"
-				@activate="onSetNodeActive"
+				@activate="onSetNodeActivated"
+				@deactivate="onSetNodeDeactivated"
 				@open:contextmenu="onOpenNodeContextMenu"
 				@update="onUpdateNodeParameters"
 				@update:inputs="onUpdateNodeInputs"
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index feaec44b3f..3dcbdf105b 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -59,6 +59,7 @@ const emit = defineEmits<{
 	select: [id: string, selected: boolean];
 	toggle: [id: string];
 	activate: [id: string];
+	deactivate: [id: string];
 	'open:contextmenu': [id: string, event: MouseEvent, source: 'node-button' | 'node-right-click'];
 	update: [id: string, parameters: Record<string, unknown>];
 	'update:inputs': [id: string];
@@ -258,6 +259,10 @@ function onActivate() {
 	emit('activate', props.id);
 }
 
+function onDeactivate() {
+	emit('deactivate', props.id);
+}
+
 function onOpenContextMenuFromToolbar(event: MouseEvent) {
 	emit('open:contextmenu', props.id, event, 'node-button');
 }
@@ -395,7 +400,8 @@ onBeforeUnmount(() => {
 		/>
 
 		<CanvasNodeRenderer
-			@dblclick.stop="onActivate"
+			@activate="onActivate"
+			@deactivate="onDeactivate"
 			@move="onMove"
 			@update="onUpdate"
 			@open:contextmenu="onOpenContextMenuFromNode"
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.test.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.test.ts
index 256720c879..8cdfaea8d8 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.test.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.test.ts
@@ -5,6 +5,7 @@ import { createCanvasNodeProvide, createCanvasProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
+import { fireEvent } from '@testing-library/vue';
 
 const renderComponent = createComponentRenderer(CanvasNodeDefault, {
 	global: {
@@ -333,4 +334,18 @@ describe('CanvasNodeDefault', () => {
 			expect(getByTestId('canvas-trigger-node')).toMatchSnapshot();
 		});
 	});
+
+	it('should emit "activate" on double click', async () => {
+		const { getByText, emitted } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide(),
+				},
+			},
+		});
+
+		await fireEvent.dblClick(getByText('Test Node'));
+
+		expect(emitted()).toHaveProperty('activate');
+	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index 0514965008..c30786d28c 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -12,10 +12,12 @@ const i18n = useI18n();
 
 const emit = defineEmits<{
 	'open:contextmenu': [event: MouseEvent];
+	activate: [id: string];
 }>();
 
 const { initialized, viewport } = useCanvas();
 const {
+	id,
 	label,
 	subtitle,
 	inputs,
@@ -122,10 +124,20 @@ watch(viewport, () => {
 function openContextMenu(event: MouseEvent) {
 	emit('open:contextmenu', event);
 }
+
+function onActivate() {
+	emit('activate', id.value);
+}
 </script>
 
 <template>
-	<div :class="classes" :style="styles" :data-test-id="dataTestId" @contextmenu="openContextMenu">
+	<div
+		:class="classes"
+		:style="styles"
+		:data-test-id="dataTestId"
+		@contextmenu="openContextMenu"
+		@dblclick.stop="onActivate"
+	>
 		<CanvasNodeTooltip v-if="renderOptions.tooltip" :visible="showTooltip" />
 		<slot />
 		<CanvasNodeStatusIcons v-if="!isDisabled" :class="$style.statusIcons" />
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
index e9d48541ff..8bbd17c877 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
@@ -68,4 +68,48 @@ describe('CanvasNodeStickyNote', () => {
 
 		expect(getComputedStyle(stickyOptions).display).toBe('none');
 	});
+
+	it('should emit "activate" on double click', async () => {
+		const { container, emitted } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						id: 'sticky',
+					}),
+				},
+			},
+		});
+
+		const sticky = container.querySelector('.sticky-textarea');
+		if (!sticky) throw new Error('Sticky not found');
+
+		await fireEvent.dblClick(sticky);
+
+		expect(emitted()).toHaveProperty('activate');
+	});
+
+	it('should emit "deactivate" on blur', async () => {
+		const { container, emitted } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						id: 'sticky',
+					}),
+				},
+			},
+		});
+
+		const sticky = container.querySelector('.sticky-textarea');
+
+		if (!sticky) throw new Error('Sticky not found');
+
+		await fireEvent.dblClick(sticky);
+
+		const stickyTextarea = container.querySelector('.sticky-textarea textarea');
+		if (!stickyTextarea) throw new Error('Textarea not found');
+
+		await fireEvent.blur(stickyTextarea);
+
+		expect(emitted()).toHaveProperty('deactivate');
+	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
index 969c97311f..20ab85e7ae 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
@@ -14,7 +14,8 @@ defineOptions({
 const emit = defineEmits<{
 	update: [parameters: Record<string, unknown>];
 	move: [position: XYPosition];
-	dblclick: [event: MouseEvent];
+	activate: [id: string];
+	deactivate: [id: string];
 	'open:contextmenu': [event: MouseEvent];
 }>();
 
@@ -58,16 +59,20 @@ function onInputChange(value: string) {
 	});
 }
 
-function onEdit(edit: boolean) {
-	isActive.value = edit;
-}
+function onSetActive(value: boolean) {
+	if (isActive.value === value) return;
 
-function onDoubleClick(event: MouseEvent) {
-	emit('dblclick', event);
+	isActive.value = value;
+
+	if (value) {
+		emit('activate', id.value);
+	} else {
+		emit('deactivate', id.value);
+	}
 }
 
 function onActivate() {
-	onEdit(true);
+	onSetActive(true);
 }
 
 /**
@@ -83,11 +88,11 @@ function openContextMenu(event: MouseEvent) {
  */
 
 onMounted(() => {
-	eventBus.value?.on('update:node:active', onActivate);
+	eventBus.value?.on('update:node:activated', onActivate);
 });
 
 onBeforeUnmount(() => {
-	eventBus.value?.off('update:node:active', onActivate);
+	eventBus.value?.off('update:node:activated', onActivate);
 });
 </script>
 <template>
@@ -110,8 +115,8 @@ onBeforeUnmount(() => {
 		:background-color="renderOptions.color"
 		:edit-mode="isActive"
 		:read-only="isReadOnly"
-		@edit="onEdit"
-		@dblclick="onDoubleClick"
+		@edit="onSetActive"
+		@dblclick.stop="onActivate"
 		@update:model-value="onInputChange"
 		@contextmenu="openContextMenu"
 	/>
diff --git a/packages/editor-ui/src/composables/useCanvasOperations.ts b/packages/editor-ui/src/composables/useCanvasOperations.ts
index 3f898b01ab..4dbae1f0b4 100644
--- a/packages/editor-ui/src/composables/useCanvasOperations.ts
+++ b/packages/editor-ui/src/composables/useCanvasOperations.ts
@@ -395,6 +395,10 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 		ndvStore.activeNodeName = name;
 	}
 
+	function clearNodeActive() {
+		ndvStore.activeNodeName = null;
+	}
+
 	function setNodeParameters(id: string, parameters: Record<string, unknown>) {
 		const node = workflowsStore.getNodeById(id);
 		if (!node) {
@@ -1988,6 +1992,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 		revertUpdateNodePosition,
 		setNodeActive,
 		setNodeActiveByName,
+		clearNodeActive,
 		setNodeSelected,
 		toggleNodesDisabled,
 		revertToggleNodeDisabled,
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 3034232379..afc5c5d8da 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -143,7 +143,7 @@ export interface CanvasInjectionData {
 
 export type CanvasNodeEventBusEvents = {
 	'update:sticky:color': never;
-	'update:node:active': never;
+	'update:node:activated': never;
 	'update:node:class': { className: string; add?: boolean };
 };
 
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index cd973c5cef..86c89a6bbb 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -199,6 +199,7 @@ const {
 	revalidateNodeInputConnections,
 	revalidateNodeOutputConnections,
 	setNodeActiveByName,
+	clearNodeActive,
 	addConnections,
 	importWorkflowData,
 	fetchWorkflowDataFromUrl,
@@ -621,10 +622,14 @@ function onClickNode() {
 	closeNodeCreator();
 }
 
-function onSetNodeActive(id: string) {
+function onSetNodeActivated(id: string) {
 	setNodeActive(id);
 }
 
+function onSetNodeDeactivated() {
+	clearNodeActive();
+}
+
 function onSetNodeSelected(id?: string) {
 	closeNodeCreator();
 	setNodeSelected(id);
@@ -1728,7 +1733,8 @@ onBeforeUnmount(() => {
 		:key-bindings="keyBindingsEnabled"
 		@update:nodes:position="onUpdateNodesPosition"
 		@update:node:position="onUpdateNodePosition"
-		@update:node:active="onSetNodeActive"
+		@update:node:activated="onSetNodeActivated"
+		@update:node:deactivated="onSetNodeDeactivated"
 		@update:node:selected="onSetNodeSelected"
 		@update:node:enabled="onToggleNodeDisabled"
 		@update:node:name="onOpenRenameNodeModal"