mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 21:37:32 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Reset selection keycode to force selection mode after tab change on new canvas (no-changelog) (#11339)

Browse source
This commit is contained in:
Alex Grozav 2024-10-22 13:10:38 +03:00 committed by GitHub
parent 3c57f46aae
commit 9615838aa6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -18,7 +18,17 @@ import { Background } from '@vue-flow/background';
import { MiniMap } from '@vue-flow/minimap'; import { MiniMap } from '@vue-flow/minimap';
import Node from './elements/nodes/CanvasNode.vue'; import Node from './elements/nodes/CanvasNode.vue';
import Edge from './elements/edges/CanvasEdge.vue'; import Edge from './elements/edges/CanvasEdge.vue';
import { computed, onMounted, onUnmounted, provide, ref, toRef, useCssModule, watch } from 'vue'; import {
computed,
nextTick,
onMounted,
onUnmounted,
provide,
ref,
toRef,
useCssModule,
watch,
} from 'vue';
import type { EventBus } from 'n8n-design-system'; import type { EventBus } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system'; import { createEventBus } from 'n8n-design-system';
import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu'; import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
@ -132,15 +142,19 @@ const disableKeyBindings = computed(() => !props.keyBindings);
/** /**
* @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
*/ */
const panningKeyCode = ' ';
const isPanningEnabled = ref(false); const isPanningEnabled = ref(false);
const panningKeyCode = ' ';
const selectionKeyCode = ref<true | null>(true);
onKeyDown(panningKeyCode, () => { onKeyDown(panningKeyCode, () => {
isPanningEnabled.value = true; isPanningEnabled.value = true;
selectionKeyCode.value = null;
}); });
onKeyUp(panningKeyCode, () => { onKeyUp(panningKeyCode, () => {
isPanningEnabled.value = false; isPanningEnabled.value = false;
selectionKeyCode.value = true;
}); });
const keyMap = computed(() => ({ const keyMap = computed(() => ({
@ -172,11 +186,23 @@ const keyMap = computed(() => ({
useKeybindings(keyMap, { disabled: disableKeyBindings }); useKeybindings(keyMap, { disabled: disableKeyBindings });
/**
* When the window is focused, the selection key code is lost.
* We trigger a value refresh to ensure that the selection key code is set correctly again.
*
* @issue https://linear.app/n8n/issue/N8N-7843/selection-keycode-gets-unset-when-changing-tabs
*/
function resetSelectionKeyCode() {
selectionKeyCode.value = null;
void nextTick(() => {
selectionKeyCode.value = true;
});
}
/** /**
* Nodes * Nodes
*/ */
const selectionKeyCode = computed(() => (isPanningEnabled.value ? null : true));
const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]); const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]);
const hasSelection = computed(() => selectedNodes.value.length > 0); const hasSelection = computed(() => selectedNodes.value.length > 0);
const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id)); const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id));
@ -472,11 +498,13 @@ function onMinimapMouseLeave() {
onMounted(() => { onMounted(() => {
props.eventBus.on('fitView', onFitView); props.eventBus.on('fitView', onFitView);
props.eventBus.on('nodes:select', onSelectNodes); props.eventBus.on('nodes:select', onSelectNodes);
window.addEventListener('focus', resetSelectionKeyCode);
}); });
onUnmounted(() => { onUnmounted(() => {
props.eventBus.off('fitView', onFitView); props.eventBus.off('fitView', onFitView);
props.eventBus.off('nodes:select', onSelectNodes); props.eventBus.off('nodes:select', onSelectNodes);
window.removeEventListener('focus', resetSelectionKeyCode);
}); });
onPaneReady(async () => { onPaneReady(async () => {