Implement RIGHT and LEFT keys for cursor navigation in terminal

This commit is contained in:
Lukáš Ondrejka 2024-10-13 19:12:10 +02:00
parent 109222f024
commit 48ccc27b9f

View file

@ -154,7 +154,7 @@ export default {
}, },
removeInput() { removeInput() {
const backspaceCount = this.terminalInputBuffer.length; const backspaceCount = 2 * this.terminalInputBuffer.length - this.cursorPosition;
const backspaces = "\b \b".repeat(backspaceCount); const backspaces = "\b \b".repeat(backspaceCount);
this.cursorPosition = 0; this.cursorPosition = 0;
this.terminal.write(backspaces); this.terminal.write(backspaces);
@ -163,7 +163,6 @@ export default {
mainTerminalConfig() { mainTerminalConfig() {
this.terminal.onKey(e => { this.terminal.onKey(e => {
const code = e.key.charCodeAt(0);
console.debug("Encode: " + JSON.stringify(e.key)); console.debug("Encode: " + JSON.stringify(e.key));
if (e.key === "\r") { if (e.key === "\r") {
@ -180,29 +179,39 @@ export default {
this.$root.emitAgent(this.endpoint, "terminalInput", this.name, buffer + e.key, (err) => { this.$root.emitAgent(this.endpoint, "terminalInput", this.name, buffer + e.key, (err) => {
this.$root.toastError(err.msg); this.$root.toastError(err.msg);
}); });
} else if (e.key === "\u007F") { // Backspace
} else if (code === 127) { // Backspace
if (this.cursorPosition > 0) { if (this.cursorPosition > 0) {
this.terminal.write("\b \b"); const trimmedTextBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition - 1);
const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
const clearAfterCursor = " ".repeat(textAfterCursor.length) + "\b \b".repeat(textAfterCursor.length + 1);
this.terminalInputBuffer = trimmedTextBeforeCursor + textAfterCursor;
this.terminal.write(clearAfterCursor + textAfterCursor + "\b".repeat(textAfterCursor.length));
this.cursorPosition--; this.cursorPosition--;
this.terminalInputBuffer = this.terminalInputBuffer.slice(0, -1);
} }
} else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") { // UP OR DOWN } else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") { // UP OR DOWN
// Do nothing // Do nothing
} else if (e.key === "\u001B\u005B\u0043") { // RIGHT } else if (e.key === "\u001B\u005B\u0043") { // RIGHT
// TODO if (this.cursorPosition < this.terminalInputBuffer.length) {
this.terminal.write(this.terminalInputBuffer[this.cursorPosition]);
this.cursorPosition++;
}
} else if (e.key === "\u001B\u005B\u0044") { // LEFT } else if (e.key === "\u001B\u005B\u0044") { // LEFT
// TODO if (this.cursorPosition > 0) {
this.terminal.write("\b");
this.cursorPosition--;
}
} else if (e.key === "\u0003") { // Ctrl + C } else if (e.key === "\u0003") { // Ctrl + C
console.debug("Ctrl + C"); console.debug("Ctrl + C");
this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key); this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key);
this.removeInput(); this.removeInput();
} else if (e.key === "\u0009" || e.key.startsWith("\u001B")) { // TAB or other special keys
// Do nothing
} else { } else {
const textBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
this.terminalInputBuffer = textBeforeCursor + e.key + textAfterCursor;
this.terminal.write(e.key + textAfterCursor + "\b".repeat(textAfterCursor.length));
this.cursorPosition++; this.cursorPosition++;
this.terminalInputBuffer += e.key;
console.log(this.terminalInputBuffer);
this.terminal.write(e.key);
} }
}); });
}, },