🐛 Fix that some keyboard shortcuts did no longer work

* N8N-3057 Fixed Keyboard shortcuts no longer working on / Fixed callDebounced function

* N8N-3057 Update Debounce Function

* N8N-3057 Refactor callDebounce function

* N8N-3057 Update Dobounce Function
This commit is contained in:
Oliver Trajceski 2022-03-04 17:28:03 +01:00 committed by GitHub
parent c45ab96559
commit 3513aa128a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 19 deletions

View file

@ -47,7 +47,7 @@ export default mixins(genericHelpers).extend({
}, },
methods: { methods: {
onResize() { onResize() {
this.callDebounced("onResizeEnd", 50); this.callDebounced("onResizeEnd", { debounceTime: 50 });
}, },
onResizeEnd() { onResizeEnd() {
this.$data.width = window.innerWidth; this.$data.width = window.innerWidth;

View file

@ -80,7 +80,7 @@ export default mixins(
this.updateDisplayValue(); this.updateDisplayValue();
this.$emit('valueChanged', this.latestValue); this.$emit('valueChanged', this.latestValue);
} else { } else {
this.callDebounced('updateDisplayValue', 500); this.callDebounced('updateDisplayValue', { debounceTime: 500 });
} }
}, },

View file

@ -76,13 +76,12 @@ export const genericHelpers = mixins(showMessage).extend({
async callDebounced (...inputParameters: any[]): Promise<void> { // tslint:disable-line:no-any async callDebounced (...inputParameters: any[]): Promise<void> { // tslint:disable-line:no-any
const functionName = inputParameters.shift() as string; const functionName = inputParameters.shift() as string;
const debounceTime = inputParameters.shift() as number; const { trailing, debounceTime } = inputParameters.shift();
const trailing = inputParameters.shift() as boolean;
// @ts-ignore // @ts-ignore
if (this.debouncedFunctions[functionName] === undefined) { if (this.debouncedFunctions[functionName] === undefined) {
// @ts-ignore // @ts-ignore
this.debouncedFunctions[functionName] = debounce(this[functionName], debounceTime, trailing ? { trailing: true } : { leading: true } ); this.debouncedFunctions[functionName] = debounce(this[functionName], debounceTime, trailing ? { trailing } : { leading: true } );
} }
// @ts-ignore // @ts-ignore
await this.debouncedFunctions[functionName].apply(this, inputParameters); await this.debouncedFunctions[functionName].apply(this, inputParameters);

View file

@ -683,13 +683,13 @@ export default mixins(
} }
if (e.key === 'd') { if (e.key === 'd') {
this.callDebounced('deactivateSelectedNode', 350); this.callDebounced('deactivateSelectedNode', { debounceTime: 350 });
} else if (e.key === 'Delete' || e.key === 'Backspace') { } else if (e.key === 'Delete' || e.key === 'Backspace') {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.callDebounced('deleteSelectedNodes', 500); this.callDebounced('deleteSelectedNodes', { debounceTime: 500 });
} else if (e.key === 'Tab') { } else if (e.key === 'Tab') {
this.createNodeActive = !this.createNodeActive && !this.isReadOnly; this.createNodeActive = !this.createNodeActive && !this.isReadOnly;
@ -701,7 +701,7 @@ export default mixins(
} else if (e.key === 'F2' && !this.isReadOnly) { } else if (e.key === 'F2' && !this.isReadOnly) {
const lastSelectedNode = this.lastSelectedNode; const lastSelectedNode = this.lastSelectedNode;
if (lastSelectedNode !== null) { if (lastSelectedNode !== null) {
this.callDebounced('renameNodePrompt', 1500, lastSelectedNode.name); this.callDebounced('renameNodePrompt', { debounceTime: 1500 }, lastSelectedNode.name);
} }
} else if ((e.key === '=' || e.key === '+') && !this.isCtrlKeyPressed(e)) { } else if ((e.key === '=' || e.key === '+') && !this.isCtrlKeyPressed(e)) {
this.zoomIn(); this.zoomIn();
@ -716,15 +716,15 @@ export default mixins(
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.callDebounced('selectAllNodes', 1000); this.callDebounced('selectAllNodes', { debounceTime: 1000 });
} else if ((e.key === 'c') && (this.isCtrlKeyPressed(e) === true)) { } else if ((e.key === 'c') && (this.isCtrlKeyPressed(e) === true)) {
this.callDebounced('copySelectedNodes', 1000); this.callDebounced('copySelectedNodes', { debounceTime: 1000 });
} else if ((e.key === 'x') && (this.isCtrlKeyPressed(e) === true)) { } else if ((e.key === 'x') && (this.isCtrlKeyPressed(e) === true)) {
// Cut nodes // Cut nodes
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.callDebounced('cutSelectedNodes', 1000); this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
} else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) { } else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) {
// Open workflow dialog // Open workflow dialog
e.stopPropagation(); e.stopPropagation();
@ -755,7 +755,7 @@ export default mixins(
return; return;
} }
this.callDebounced('onSaveKeyboardShortcut', 1000); this.callDebounced('onSaveKeyboardShortcut', { debounceTime: 1000 });
} else if (e.key === 'Enter') { } else if (e.key === 'Enter') {
// Activate the last selected node // Activate the last selected node
const lastSelectedNode = this.lastSelectedNode; const lastSelectedNode = this.lastSelectedNode;
@ -768,7 +768,7 @@ export default mixins(
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.callDebounced('selectDownstreamNodes', 1000); this.callDebounced('selectDownstreamNodes', { debounceTime: 1000 });
} else if (e.key === 'ArrowRight') { } else if (e.key === 'ArrowRight') {
// Set child node active // Set child node active
const lastSelectedNode = this.lastSelectedNode; const lastSelectedNode = this.lastSelectedNode;
@ -782,13 +782,13 @@ export default mixins(
return; return;
} }
this.callDebounced('nodeSelectedByName', 100, connections.main[0][0].node, false, true); this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, connections.main[0][0].node, false, true);
} else if (e.key === 'ArrowLeft' && e.shiftKey === true) { } else if (e.key === 'ArrowLeft' && e.shiftKey === true) {
// Select all downstream nodes // Select all downstream nodes
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.callDebounced('selectUpstreamNodes', 1000); this.callDebounced('selectUpstreamNodes', { debounceTime: 1000 });
} else if (e.key === 'ArrowLeft') { } else if (e.key === 'ArrowLeft') {
// Set parent node active // Set parent node active
const lastSelectedNode = this.lastSelectedNode; const lastSelectedNode = this.lastSelectedNode;
@ -808,7 +808,7 @@ export default mixins(
return; return;
} }
this.callDebounced('nodeSelectedByName', 100, connections.main[0][0].node, false, true); this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, connections.main[0][0].node, false, true);
} else if (['ArrowUp', 'ArrowDown'].includes(e.key)) { } else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
// Set sibling node as active // Set sibling node as active
@ -866,7 +866,7 @@ export default mixins(
} }
if (nextSelectNode !== null) { if (nextSelectNode !== null) {
this.callDebounced('nodeSelectedByName', 100, nextSelectNode, false, true); this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, nextSelectNode, false, true);
} }
} }
}, },

View file

@ -208,7 +208,7 @@ export default mixins(genericHelpers).extend({
this.loadingWorkflows = true; this.loadingWorkflows = true;
this.loadingCollections = true; this.loadingCollections = true;
this.search = search; this.search = search;
this.callDebounced('updateSearch', 500, true); this.callDebounced('updateSearch', { debounceTime: 500, trailing: true });
if (search.length === 0) { if (search.length === 0) {
this.trackSearch(); this.trackSearch();