Blend cursor with background to support alpha in webgl

Fixes #5241
This commit is contained in:
Daniel Imms
2024-12-20 07:37:12 -08:00
parent e826f6b69f
commit b74ec267e2
3 changed files with 11 additions and 3 deletions
+2 -2
View File
@@ -16,7 +16,7 @@ if ('WebAssembly' in window) {
ImageAddon = imageAddon.ImageAddon;
}
import { Terminal, ITerminalOptions, type IDisposable } from '@xterm/xterm';
import { Terminal, ITerminalOptions, type IDisposable, type ITheme } from '@xterm/xterm';
import { AttachAddon } from '@xterm/addon-attach';
import { ClipboardAddon } from '@xterm/addon-clipboard';
import { FitAddon } from '@xterm/addon-fit';
@@ -131,7 +131,7 @@ const xtermjsTheme = {
brightCyan: '#72F0FF',
white: '#F8F8F8',
brightWhite: '#FFFFFF'
};
} satisfies ITheme;
function setPadding(): void {
term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
addons.fit.instance.fit();
+1 -1
View File
@@ -82,7 +82,7 @@ export class ThemeService extends Disposable implements IThemeService {
const colors = this._colors;
colors.foreground = parseColor(theme.foreground, DEFAULT_FOREGROUND);
colors.background = parseColor(theme.background, DEFAULT_BACKGROUND);
colors.cursor = parseColor(theme.cursor, DEFAULT_CURSOR);
colors.cursor = color.blend(colors.background, parseColor(theme.cursor, DEFAULT_CURSOR));
colors.cursorAccent = parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT);
colors.selectionBackgroundTransparent = parseColor(theme.selectionBackground, DEFAULT_SELECTION);
colors.selectionBackgroundOpaque = color.blend(colors.background, colors.selectionBackgroundTransparent);
+8
View File
@@ -1248,6 +1248,14 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void
await ctx.value.proxy.scrollLines(-2);
await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 0, 255]);
});
test('#5241 cursor with alpha should blend color with background color', async () => {
const theme: ITheme = {
cursor: '#FF000080'
};
await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
await ctx.value.proxy.focus();
await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]);
});
});
}