From 06145c02b14ee60dc9637459574fa96c311ddd58 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Mon, 19 Dec 2022 06:11:34 -0800 Subject: [PATCH 1/2] Add IL vt button Part of #2533 --- demo/client.ts | 38 +++++++++++++++++++++++++------------- demo/style.css | 4 ++++ 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 759b0658c5..1001f629d1 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -1098,26 +1098,38 @@ function addVtButtons(): void { return `\x1b[${e}`; } - const vtCUU = (): void => term.write(csi('A')); - const vtCUD = (): void => term.write(csi('B')); - const vtCUF = (): void => term.write(csi('C')); - const vtCUB = (): void => term.write(csi('D')); + function createButton(name: string, description: string, writeCsi: string, paramCount: number = 0): HTMLElement { + const inputs: HTMLInputElement[] = []; + for (let i = 0; i < paramCount; i++) { + const input = document.createElement('input'); + input.type = 'number'; + input.title = `Input #${i + 1}`; + inputs.push(input); + } - function createButton(name: string, writeCsi: string): HTMLElement { const element = document.createElement('button'); element.textContent = name; - element.addEventListener('click', () => term.write(csi(writeCsi))); - return element; + element.addEventListener('click', () => term.write(csi(inputs.map(e => e.value).join(';') + writeCsi))); + + const desc = document.createElement('span'); + desc.textContent = description; + + const container = document.createElement('div'); + container.classList.add('vt-button'); + container.append(element, ...inputs, desc); + return container; } const vtFragment = document.createDocumentFragment(); - const buttonSpecs: { [key: string]: string } = { - A: 'CUU ↑', - B: 'CUD ↓', - C: 'CUF →', - D: 'CUB ←' + const buttonSpecs: { [key: string]: { label: string, description: string, paramCount: number }} = { + A: { label: 'CUU ↑', description: 'Cursor Up Ps Times', paramCount: 1 }, + B: { label: 'CUD ↓', description: 'Cursor Down Ps Times', paramCount: 1 }, + C: { label: 'CUF →', description: 'Cursor Forward Ps Times', paramCount: 1 }, + D: { label: 'CUB ←', description: 'Cursor Backward Ps Times', paramCount: 1 }, + L: { label: 'IL', description: 'Insert Ps Line(s)', paramCount: 1 } }; for (const s of Object.keys(buttonSpecs)) { - vtFragment.appendChild(createButton(buttonSpecs[s], s)); + const spec = buttonSpecs[s]; + vtFragment.appendChild(createButton(spec.label, spec.description, s, spec.paramCount)); } document.querySelector('#vt-container').appendChild(vtFragment); diff --git a/demo/style.css b/demo/style.css index 7b4ac81408..ec4ae0b1c3 100644 --- a/demo/style.css +++ b/demo/style.css @@ -102,3 +102,7 @@ pre { image-rendering: pixelated; border: 1px solid #ccc; } + +.vt-button * { + margin-right: 1em; +} From 1926c9bbbce582fb2c61c4f93d99872e2cf5d42e Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Mon, 19 Dec 2022 06:20:01 -0800 Subject: [PATCH 2/2] Add sequence buttons through CSI P --- demo/client.ts | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 1001f629d1..c6e266a647 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -1098,7 +1098,7 @@ function addVtButtons(): void { return `\x1b[${e}`; } - function createButton(name: string, description: string, writeCsi: string, paramCount: number = 0): HTMLElement { + function createButton(name: string, description: string, writeCsi: string, paramCount: number = 1): HTMLElement { const inputs: HTMLInputElement[] = []; for (let i = 0; i < paramCount; i++) { const input = document.createElement('input'); @@ -1109,7 +1109,10 @@ function addVtButtons(): void { const element = document.createElement('button'); element.textContent = name; - element.addEventListener('click', () => term.write(csi(inputs.map(e => e.value).join(';') + writeCsi))); + writeCsi.split(''); + const prefix = writeCsi.length === 2 ? writeCsi[0] : ''; + const suffix = writeCsi[writeCsi.length - 1]; + element.addEventListener(`click`, () => term.write(csi(`${prefix}${inputs.map(e => e.value).join(';')}${suffix}`))); const desc = document.createElement('span'); desc.textContent = description; @@ -1120,12 +1123,23 @@ function addVtButtons(): void { return container; } const vtFragment = document.createDocumentFragment(); - const buttonSpecs: { [key: string]: { label: string, description: string, paramCount: number }} = { - A: { label: 'CUU ↑', description: 'Cursor Up Ps Times', paramCount: 1 }, - B: { label: 'CUD ↓', description: 'Cursor Down Ps Times', paramCount: 1 }, - C: { label: 'CUF →', description: 'Cursor Forward Ps Times', paramCount: 1 }, - D: { label: 'CUB ←', description: 'Cursor Backward Ps Times', paramCount: 1 }, - L: { label: 'IL', description: 'Insert Ps Line(s)', paramCount: 1 } + const buttonSpecs: { [key: string]: { label: string, description: string, paramCount?: number }} = { + A: { label: 'CUU ↑', description: 'Cursor Up Ps Times' }, + B: { label: 'CUD ↓', description: 'Cursor Down Ps Times' }, + C: { label: 'CUF →', description: 'Cursor Forward Ps Times' }, + D: { label: 'CUB ←', description: 'Cursor Backward Ps Times' }, + E: { label: 'CNL', description: 'Cursor Next Line Ps Times' }, + F: { label: 'CPL', description: 'Cursor Preceding Line Ps Times' }, + G: { label: 'CHA', description: 'Cursor Character Absolute' }, + H: { label: 'CUP', description: 'Cursor Position [row;column]', paramCount: 2 }, + I: { label: 'CHT', description: 'Cursor Forward Tabulation Ps tab stops' }, + J: { label: 'ED', description: 'Erase in Display' }, + '?J': { label: 'DECSED', description: 'Erase in Display' }, + K: { label: 'EL', description: 'Erase in Line' }, + '?K': { label: 'DECSEL', description: 'Erase in Line' }, + L: { label: 'IL', description: 'Insert Ps Line(s)' }, + M: { label: 'DL', description: 'Delete Ps Line(s)' }, + P: { label: 'DCH', description: 'Delete Ps Character(s)' } }; for (const s of Object.keys(buttonSpecs)) { const spec = buttonSpecs[s];