mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Switch back to selection mode on window blur (#13341)

Browse source
This commit is contained in:
Alex Grozav 2025-02-21 15:01:06 +02:00 committed by GitHub
parent b2293b7ad5
commit 415e25b5d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 11 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

@ -155,22 +155,22 @@ const panningKeyCode = ref<string[] | true>(isMobileDevice ? true : [' ', contro
const panningMouseButton = ref<number[] | true>(isMobileDevice ? true : [1]); const panningMouseButton = ref<number[] | true>(isMobileDevice ? true : [1]);
const selectionKeyCode = ref<string | true | null>(isMobileDevice ? 'Shift' : true); const selectionKeyCode = ref<string | true | null>(isMobileDevice ? 'Shift' : true);
onKeyDown( function switchToPanningMode() {
panningKeyCode.value, selectionKeyCode.value = null;
() => { panningMouseButton.value = [0, 1];
selectionKeyCode.value = null; }
panningMouseButton.value = [0, 1];
},
{
dedupe: true,
},
);
onKeyUp(panningKeyCode.value, () => { function switchToSelectionMode() {
selectionKeyCode.value = true; selectionKeyCode.value = true;
panningMouseButton.value = [1]; panningMouseButton.value = [1];
}
onKeyDown(panningKeyCode.value, switchToPanningMode, {
dedupe: true,
}); });
onKeyUp(panningKeyCode.value, switchToSelectionMode);
/** /**
* Rename node key bindings * Rename node key bindings
* We differentiate between short and long press because the space key is also used for activating panning * We differentiate between short and long press because the space key is also used for activating panning
@ -672,6 +672,14 @@ function onMinimapMouseLeave() {
hideMinimap(); hideMinimap();
} }
/**
* Window Events
*/
function onWindowBlur() {
switchToSelectionMode();
}
/** /**
* Lifecycle * Lifecycle
*/ */
@ -681,11 +689,15 @@ const initialized = ref(false);
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('blur', onWindowBlur);
}); });
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('blur', onWindowBlur);
}); });
onPaneReady(async () => { onPaneReady(async () => {