mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-23 18:41:48 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Disable all modifying keybindings when the canvas is in read-only mode (no-changelog) (#11137)

Browse source 
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
This commit is contained in:
Alex Grozav 2024-10-07 18:03:03 +03:00 committed by GitHub
parent 4c7caf734c
commit 9c41c5c6d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 118 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -138,30 +138,34 @@ onKeyUp(panningKeyCode, () => {
isPanningEnabled.value = false;
});
useKeybindings(
{
ctrl_c: emitWithSelectedNodes((ids) => emit('copy:nodes', ids)),
ctrl_x: emitWithSelectedNodes((ids) => emit('cut:nodes', ids)),
'delete|backspace': emitWithSelectedNodes((ids) => emit('delete:nodes', ids)),
ctrl_d: emitWithSelectedNodes((ids) => emit('duplicate:nodes', ids)),
d: emitWithSelectedNodes((ids) => emit('update:nodes:enabled', ids)),
p: emitWithSelectedNodes((ids) => emit('update:nodes:pin', ids, 'keyboard-shortcut')),
enter: emitWithLastSelectedNode((id) => onSetNodeActive(id)),
f2: emitWithLastSelectedNode((id) => emit('update:node:name', id)),
tab: () => emit('create:node', 'tab'),
shift_s: () => emit('create:sticky'),
ctrl_alt_n: () => emit('create:workflow'),
ctrl_enter: () => emit('run:workflow'),
ctrl_s: () => emit('save:workflow'),
ctrl_a: () => addSelectedNodes(graphNodes.value),
'+|=': async () => await onZoomIn(),
'-|_': async () => await onZoomOut(),
0: async () => await onResetZoom(),
1: async () => await onFitView(),
// @TODO implement arrow key shortcuts to modify selection
},
{ disabled: disableKeyBindings },
);
const keyMap = computed(() => ({
ctrl_c: emitWithSelectedNodes((ids) => emit('copy:nodes', ids)),
enter: emitWithLastSelectedNode((id) => onSetNodeActive(id)),
ctrl_a: () => addSelectedNodes(graphNodes.value),
'+|=': async () => await onZoomIn(),
'-|_': async () => await onZoomOut(),
0: async () => await onResetZoom(),
1: async () => await onFitView(),
// @TODO implement arrow key shortcuts to modify selection
...(props.readOnly
? {}
: {
ctrl_x: emitWithSelectedNodes((ids) => emit('cut:nodes', ids)),
'delete|backspace': emitWithSelectedNodes((ids) => emit('delete:nodes', ids)),
ctrl_d: emitWithSelectedNodes((ids) => emit('duplicate:nodes', ids)),
d: emitWithSelectedNodes((ids) => emit('update:nodes:enabled', ids)),
p: emitWithSelectedNodes((ids) => emit('update:nodes:pin', ids, 'keyboard-shortcut')),
f2: emitWithLastSelectedNode((id) => emit('update:node:name', id)),
tab: () => emit('create:node', 'tab'),
shift_s: () => emit('create:sticky'),
ctrl_alt_n: () => emit('create:workflow'),
ctrl_enter: () => emit('run:workflow'),
ctrl_s: () => emit('save:workflow'),
}),
}));
useKeybindings(keyMap, { disabled: disableKeyBindings });
/**
* Nodes

89
packages/editor-ui/src/composables/__tests__/useKeybindings.test.ts
View file

@ -1,7 +1,7 @@
import { renderComponent } from '@/__tests__/render';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { defineComponent, h } from 'vue';
import { defineComponent, h, ref } from 'vue';
import { useKeybindings } from '../useKeybindings';
const renderTestComponent = async (...args: Parameters<typeof useKeybindings>) => {
@ -19,7 +19,8 @@ describe('useKeybindings', () => {
it('should trigger case-insensitive keyboard shortcuts', async () => {
const saveSpy = vi.fn();
const saveAllSpy = vi.fn();
await renderTestComponent({ Ctrl_s: saveSpy, ctrl_Shift_S: saveAllSpy });
const keymap = ref({ Ctrl_s: saveSpy, ctrl_Shift_S: saveAllSpy });
await renderTestComponent(keymap);
await userEvent.keyboard('{Control>}s');
expect(saveSpy).toHaveBeenCalled();
expect(saveAllSpy).not.toHaveBeenCalled();
@ -31,7 +32,8 @@ describe('useKeybindings', () => {
it('should not trigger shortcuts when an input element has focus', async () => {
const saveSpy = vi.fn();
const saveAllSpy = vi.fn();
const { getByRole } = await renderTestComponent({ Ctrl_s: saveSpy, ctrl_Shift_S: saveAllSpy });
const keymap = ref({ Ctrl_s: saveSpy, ctrl_Shift_S: saveAllSpy });
const { getByRole } = await renderTestComponent(keymap);
getByRole('textbox').focus();
@ -41,4 +43,85 @@ describe('useKeybindings', () => {
expect(saveSpy).not.toHaveBeenCalled();
expect(saveAllSpy).not.toHaveBeenCalled();
});
it('should call the correct handler for a single key press', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should call the correct handler for a combination key press', async () => {
const handler = vi.fn();
const keymap = ref({ 'ctrl+a': handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'a', ctrlKey: true });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should not call handler if key press is ignored', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
useKeybindings(keymap);
const input = document.createElement('input');
document.body.appendChild(input);
input.focus();
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).not.toHaveBeenCalled();
document.body.removeChild(input);
});
it('should not call handler if disabled', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
const disabled = ref(true);
useKeybindings(keymap, { disabled });
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).not.toHaveBeenCalled();
});
it('should normalize shortcut strings correctly', async () => {
const handler = vi.fn();
const keymap = ref({ 'ctrl+shift+a': handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'A', ctrlKey: true, shiftKey: true });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should normalize shortcut string alternatives correctly', async () => {
const handler = vi.fn();
const keymap = ref({ 'a|b': handler });
useKeybindings(keymap);
const eventA = new KeyboardEvent('keydown', { key: 'A' });
document.dispatchEvent(eventA);
expect(handler).toHaveBeenCalled();
const eventB = new KeyboardEvent('keydown', { key: 'B' });
document.dispatchEvent(eventB);
expect(handler).toHaveBeenCalledTimes(2);
});
});

85
packages/editor-ui/src/composables/useKeybindings.spec.ts
View file

@ -1,85 +0,0 @@
import { useKeybindings } from '@/composables/useKeybindings';
import { ref } from 'vue';
describe('useKeybindings', () => {
it('should call the correct handler for a single key press', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should call the correct handler for a combination key press', async () => {
const handler = vi.fn();
const keymap = ref({ 'ctrl+a': handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'a', ctrlKey: true });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should not call handler if key press is ignored', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
useKeybindings(keymap);
const input = document.createElement('input');
document.body.appendChild(input);
input.focus();
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).not.toHaveBeenCalled();
document.body.removeChild(input);
});
it('should not call handler if disabled', async () => {
const handler = vi.fn();
const keymap = ref({ a: handler });
const disabled = ref(true);
useKeybindings(keymap, { disabled });
const event = new KeyboardEvent('keydown', { key: 'a' });
document.dispatchEvent(event);
expect(handler).not.toHaveBeenCalled();
});
it('should normalize shortcut strings correctly', async () => {
const handler = vi.fn();
const keymap = ref({ 'ctrl+shift+a': handler });
useKeybindings(keymap);
const event = new KeyboardEvent('keydown', { key: 'A', ctrlKey: true, shiftKey: true });
document.dispatchEvent(event);
expect(handler).toHaveBeenCalled();
});
it('should normalize shortcut string alternatives correctly', async () => {
const handler = vi.fn();
const keymap = ref({ 'a|b': handler });
useKeybindings(keymap);
const eventA = new KeyboardEvent('keydown', { key: 'A' });
document.dispatchEvent(eventA);
expect(handler).toHaveBeenCalled();
const eventB = new KeyboardEvent('keydown', { key: 'B' });
document.dispatchEvent(eventB);
expect(handler).toHaveBeenCalledTimes(2);
});
});

8
packages/editor-ui/src/composables/useKeybindings.ts
View file

@ -1,12 +1,12 @@
import { useActiveElement, useEventListener } from '@vueuse/core';
import { useDeviceSupport } from 'n8n-design-system';
import type { MaybeRef } from 'vue';
import { computed, toValue, type MaybeRefOrGetter, unref } from 'vue';
import type { MaybeRef, Ref } from 'vue';
import { computed, unref } from 'vue';
type KeyMap = Record<string, (event: KeyboardEvent) => void>;
export const useKeybindings = (
keymap: MaybeRefOrGetter<KeyMap>,
keymap: Ref<KeyMap>,
options?: {
disabled: MaybeRef<boolean>;
},
@ -29,7 +29,7 @@ export const useKeybindings = (
const normalizedKeymap = computed(() =>
Object.fromEntries(
Object.entries(toValue(keymap))
Object.entries(keymap.value)
.map(([shortcut, handler]) => {
const shortcuts = shortcut.split('|');
return shortcuts.map((s) => [normalizeShortcutString(s), handler]);