diff --git a/demo/client/components/window/optionsWindow.ts b/demo/client/components/window/optionsWindow.ts index 04adbec1..c24fb268 100644 --- a/demo/client/components/window/optionsWindow.ts +++ b/demo/client/components/window/optionsWindow.ts @@ -121,12 +121,14 @@ export class OptionsWindow extends BaseWindow implements IControlWindow { 'windowOptions', 'windowsPty', ]; - const nestedBooleanOptions: { label: string, parent: string, prop: string }[] = [ - { label: 'scrollbar.showScrollbar', parent: 'scrollbar', prop: 'showScrollbar' }, - { label: 'scrollbar.showArrows', parent: 'scrollbar', prop: 'showArrows' }, - { label: 'vtExtensions.kittyKeyboard', parent: 'vtExtensions', prop: 'kittyKeyboard' }, - { label: 'vtExtensions.kittySgrBoldFaintControl', parent: 'vtExtensions', prop: 'kittySgrBoldFaintControl' }, - { label: 'vtExtensions.win32InputMode', parent: 'vtExtensions', prop: 'win32InputMode' } + const nestedBooleanOptions: { label: string, path: string[], prop: string }[] = [ + { label: 'scrollbar.showScrollbar', path: ['scrollbar'], prop: 'showScrollbar' }, + { label: 'scrollbar.showArrows', path: ['scrollbar'], prop: 'showArrows' }, + { label: 'scrollbar.overviewRuler.showTopBorder', path: ['scrollbar', 'overviewRuler'], prop: 'showTopBorder' }, + { label: 'scrollbar.overviewRuler.showBottomBorder', path: ['scrollbar', 'overviewRuler'], prop: 'showBottomBorder' }, + { label: 'vtExtensions.kittyKeyboard', path: ['vtExtensions'], prop: 'kittyKeyboard' }, + { label: 'vtExtensions.kittySgrBoldFaintControl', path: ['vtExtensions'], prop: 'kittySgrBoldFaintControl' }, + { label: 'vtExtensions.win32InputMode', path: ['vtExtensions'], prop: 'win32InputMode' } ]; const stringOptions: { [key: string]: string[] | null } = { cursorStyle: ['block', 'underline', 'bar'], @@ -162,8 +164,10 @@ export class OptionsWindow extends BaseWindow implements IControlWindow { booleanOptions.forEach(o => { html += `
`; }); - nestedBooleanOptions.forEach(({ label, parent, prop }) => { - const checked = (this._terminal.options as Record | undefined>)[parent]?.[prop] ?? false; + nestedBooleanOptions.forEach(({ label, path, prop }) => { + const options = this._terminal.options as Record; + const parent = path.reduce | undefined>((acc, key) => (acc as Record | undefined)?.[key] as Record | undefined, options); + const checked = (parent as Record | undefined)?.[prop] ?? false; html += `
`; }); html += '
'; @@ -197,11 +201,22 @@ export class OptionsWindow extends BaseWindow implements IControlWindow { } }); }); - nestedBooleanOptions.forEach(({ label, parent, prop }) => { + nestedBooleanOptions.forEach(({ label, path, prop }) => { const input = document.getElementById(`opt-${label.replace('.', '-')}`) as HTMLInputElement; addDomListener(input, 'change', () => { console.log('change', label, input.checked); - (this._terminal.options as Record)[parent] = { ...(this._terminal.options as Record | undefined>)[parent], [prop]: input.checked }; + const options = this._terminal.options as Record; + if (path.length === 1) { + const parentKey = path[0]; + options[parentKey] = { ...(options[parentKey] as Record | undefined), [prop]: input.checked }; + return; + } + if (path.length === 2) { + const [parentKey, childKey] = path; + const parent = (options[parentKey] as Record | undefined) ?? {}; + const child = (parent[childKey] as Record | undefined) ?? {}; + options[parentKey] = { ...parent, [childKey]: { ...child, [prop]: input.checked } }; + } }); }); numberOptions.forEach(o => {