Skip to content

Commit 8f19506

Browse files
TyriarTyriar
committed
Merge remote-tracking branch 'ups/master' into pr/JavaCS3/2369
2 parents ca12cf5 + ab66cb5 commit 8f19506

File tree

17 files changed

+177
-68
lines changed

17 files changed

+177
-68
lines changed

‎addons/xterm-addon-attach/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "xterm-addon-attach",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"author": {
55
"name": "The xterm.js authors",
66
"url": "https://xtermjs.org/"

‎addons/xterm-addon-search/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "xterm-addon-search",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"author": {
55
"name": "The xterm.js authors",
66
"url": "https://xtermjs.org/"

‎addons/xterm-addon-webgl/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "xterm-addon-webgl",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"author": {
55
"name": "The xterm.js authors",
66
"url": "https://xtermjs.org/"

‎addons/xterm-addon-webgl/src/RectangleRenderer.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ const enum VertexAttribLocations {
2222
const vertexShaderSource = `#version 300 es
2323
layout (location = ${VertexAttribLocations.POSITION}) in vec2 a_position;
2424
layout (location = ${VertexAttribLocations.SIZE}) in vec2 a_size;
25-
layout (location = ${VertexAttribLocations.COLOR}) in vec3 a_color;
25+
layout (location = ${VertexAttribLocations.COLOR}) in vec4 a_color;
2626
layout (location = ${VertexAttribLocations.UNIT_QUAD}) in vec2 a_unitquad;
2727
2828
uniform mat4 u_projection;
2929
uniform vec2 u_resolution;
3030
31-
out vec3 v_color;
31+
out vec4 v_color;
3232
3333
void main() {
3434
vec2 zeroToOne = (a_position + (a_unitquad * a_size)) / u_resolution;
@@ -39,12 +39,12 @@ void main() {
3939
const fragmentShaderSource = `#version 300 es
4040
precision lowp float;
4141
42-
in vec3 v_color;
42+
in vec4 v_color;
4343
4444
out vec4 outColor;
4545
4646
void main() {
47-
outColor = vec4(v_color, 1);
47+
outColor = v_color;
4848
}`;
4949

5050
interface IVertices {

‎addons/xterm-addon-webgl/src/WebglRenderer.api.ts‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -702,6 +702,22 @@ describe('WebGL Renderer Integration Tests', function(): void {
702702
await pollFor(page, () => getCellColor(8, 2), [64, 64, 64, 255]);
703703
});
704704
});
705+
706+
describe('allowTransparency', async () => {
707+
before(async () => setupBrowser({ rendererType: 'dom', allowTransparency: true}));
708+
after(async () => browser.close());
709+
beforeEach(async () => page.evaluate(`window.term.reset()`));
710+
it('transparent background inverse', async () => {
711+
const theme: ITheme = {
712+
background: '#ff000080'
713+
};
714+
await page.evaluate(`window.term.setOption('theme', ${JSON.stringify(theme)});`);
715+
const data = `\\x1b[7m█\x1b[0m`;
716+
await writeSync(data);
717+
// Inverse background should be opaque
718+
await pollFor(page, () => getCellColor(1, 1), [255, 0, 0, 255]);
719+
});
720+
});
705721
});
706722

707723
async function openTerminal(options: ITerminalOptions = {}): Promise<void> {
@@ -732,17 +748,15 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
732748
return await page.evaluate(`Array.from(window.result)`);
733749
}
734750

735-
async function setupBrowser(): Promise<void> {
751+
async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
736752
browser = await puppeteer.launch({
737753
headless: process.argv.indexOf('--headless') !== -1,
738754
args: [`--window-size=${width},${height}`, `--no-sandbox`]
739755
});
740756
page = (await browser.pages())[0];
741757
await page.setViewport({ width, height });
742758
await page.goto(APP);
743-
await openTerminal({
744-
rendererType: 'dom'
745-
});
759+
await openTerminal(options);
746760
await page.evaluate(`
747761
window.addon = new WebglAddon(true);
748762
window.term.loadAddon(window.addon);

‎addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { ICharAtlasConfig } from './Types';
77
import { DIM_OPACITY } from 'browser/renderer/atlas/Constants';
88
import { IRasterizedGlyph, IBoundingBox, IRasterizedGlyphSet } from '../Types';
9-
import { DEFAULT_COLOR, FgFlags, Attributes, BgFlags } from 'common/buffer/Constants';
9+
import { DEFAULT_COLOR, Attributes } from 'common/buffer/Constants';
1010
import { throwIfFalsy } from '../WebglUtils';
1111
import { IColor } from 'browser/Types';
1212
import { IDisposable } from 'xterm';
@@ -228,7 +228,12 @@ export class WebglCharAtlas implements IDisposable {
228228
case Attributes.CM_DEFAULT:
229229
default:
230230
if (inverse) {
231-
return this._config.colors.background.css;
231+
const bg = this._config.colors.background.css;
232+
if (bg.length === 9) {
233+
// Remove bg alpha channel if present
234+
return bg.substr(0, 7);
235+
}
236+
return bg;
232237
}
233238
return this._config.colors.foreground.css;
234239
}
@@ -530,20 +535,3 @@ function toPaddedHex(c: number): string {
530535
const s = c.toString(16);
531536
return s.length < 2 ? '0' + s : s;
532537
}
533-
534-
function getFgColor(fg: number): number {
535-
switch (fg & Attributes.CM_MASK) {
536-
case Attributes.CM_P16:
537-
case Attributes.CM_P256: return fg & Attributes.PCOLOR_MASK;
538-
case Attributes.CM_RGB: return fg & Attributes.RGB_MASK;
539-
default: return -1; // CM_DEFAULT defaults to -1
540-
}
541-
}
542-
function getBgColor(bg: number): number {
543-
switch (bg & Attributes.CM_MASK) {
544-
case Attributes.CM_P16:
545-
case Attributes.CM_P256: return bg & Attributes.PCOLOR_MASK;
546-
case Attributes.CM_RGB: return bg & Attributes.RGB_MASK;
547-
default: return -1; // CM_DEFAULT defaults to -1
548-
}
549-
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "xterm",
33
"description": "Full xterm terminal, in your browser",
4-
"version": "4.2.0",
4+
"version": "4.3.0",
55
"main": "lib/xterm.js",
66
"style": "css/xterm.css",
77
"types": "typings/xterm.d.ts",

‎src/InputHandler.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -546,6 +546,7 @@ export class InputHandler extends Disposable implements IInputHandler {
546546
// make buffer local for faster access
547547
const buffer = this._bufferService.buffer;
548548

549+
this._dirtyRowService.markDirty(buffer.y);
549550
if (this._optionsService.options.convertEol) {
550551
buffer.x = 0;
551552
}
@@ -560,6 +561,7 @@ export class InputHandler extends Disposable implements IInputHandler {
560561
if (buffer.x >= this._bufferService.cols) {
561562
buffer.x--;
562563
}
564+
this._dirtyRowService.markDirty(buffer.y);
563565

564566
this._onLineFeed.fire();
565567
}
@@ -624,12 +626,14 @@ export class InputHandler extends Disposable implements IInputHandler {
624626
this._bufferService.buffer.y = this._terminal.originMode
625627
? Math.min(this._bufferService.buffer.scrollBottom, Math.max(this._bufferService.buffer.scrollTop, this._bufferService.buffer.y))
626628
: Math.min(this._bufferService.rows - 1, Math.max(0, this._bufferService.buffer.y));
629+
this._dirtyRowService.markDirty(this._bufferService.buffer.y);
627630
}
628631

629632
/**
630633
* Set absolute cursor position.
631634
*/
632635
private _setCursor(x: number, y: number): void {
636+
this._dirtyRowService.markDirty(this._bufferService.buffer.y);
633637
if (this._terminal.originMode) {
634638
this._bufferService.buffer.x = x;
635639
this._bufferService.buffer.y = this._bufferService.buffer.scrollTop + y;
@@ -638,6 +642,7 @@ export class InputHandler extends Disposable implements IInputHandler {
638642
this._bufferService.buffer.y = y;
639643
}
640644
this._restrictCursor();
645+
this._dirtyRowService.markDirty(this._bufferService.buffer.y);
641646
}
642647

643648
/**

‎src/browser/Color.test.ts‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { assert } from 'chai';
7-
import { blend, fromCss, toPaddedHex, toCss, toRgba, rgbRelativeLuminance, contrastRatio, ensureContrastRatioRgba } from 'browser/Color';
7+
import { blend, fromCss, toPaddedHex, toCss, toRgba, fromRgba, opaque, rgbRelativeLuminance, contrastRatio, ensureContrastRatioRgba } from 'browser/Color';
88

99
describe('Color', () => {
1010
describe('blend', () => {
@@ -135,6 +135,51 @@ describe('Color', () => {
135135
assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
136136
});
137137
});
138+
139+
describe('fromRgba', () => {
140+
it('should convert an rgba number to an rgba array', () => {
141+
assert.deepEqual(fromRgba(0x00000000), [0x00, 0x00, 0x00, 0x00]);
142+
assert.deepEqual(fromRgba(0x10101010), [0x10, 0x10, 0x10, 0x10]);
143+
assert.deepEqual(fromRgba(0x20202020), [0x20, 0x20, 0x20, 0x20]);
144+
assert.deepEqual(fromRgba(0x30303030), [0x30, 0x30, 0x30, 0x30]);
145+
assert.deepEqual(fromRgba(0x40404040), [0x40, 0x40, 0x40, 0x40]);
146+
assert.deepEqual(fromRgba(0x50505050), [0x50, 0x50, 0x50, 0x50]);
147+
assert.deepEqual(fromRgba(0x60606060), [0x60, 0x60, 0x60, 0x60]);
148+
assert.deepEqual(fromRgba(0x70707070), [0x70, 0x70, 0x70, 0x70]);
149+
assert.deepEqual(fromRgba(0x80808080), [0x80, 0x80, 0x80, 0x80]);
150+
assert.deepEqual(fromRgba(0x90909090), [0x90, 0x90, 0x90, 0x90]);
151+
assert.deepEqual(fromRgba(0xa0a0a0a0), [0xa0, 0xa0, 0xa0, 0xa0]);
152+
assert.deepEqual(fromRgba(0xb0b0b0b0), [0xb0, 0xb0, 0xb0, 0xb0]);
153+
assert.deepEqual(fromRgba(0xc0c0c0c0), [0xc0, 0xc0, 0xc0, 0xc0]);
154+
assert.deepEqual(fromRgba(0xd0d0d0d0), [0xd0, 0xd0, 0xd0, 0xd0]);
155+
assert.deepEqual(fromRgba(0xe0e0e0e0), [0xe0, 0xe0, 0xe0, 0xe0]);
156+
assert.deepEqual(fromRgba(0xf0f0f0f0), [0xf0, 0xf0, 0xf0, 0xf0]);
157+
assert.deepEqual(fromRgba(0xffffffff), [0xff, 0xff, 0xff, 0xff]);
158+
});
159+
});
160+
161+
describe('opaque', () => {
162+
it('should make the color opaque', () => {
163+
assert.deepEqual(opaque({ css: '#00000000', rgba: 0x00000000 }), { css: '#000000', rgba: 0x000000FF });
164+
assert.deepEqual(opaque({ css: '#10101010', rgba: 0x10101010 }), { css: '#101010', rgba: 0x101010FF });
165+
assert.deepEqual(opaque({ css: '#20202020', rgba: 0x20202020 }), { css: '#202020', rgba: 0x202020FF });
166+
assert.deepEqual(opaque({ css: '#30303030', rgba: 0x30303030 }), { css: '#303030', rgba: 0x303030FF });
167+
assert.deepEqual(opaque({ css: '#40404040', rgba: 0x40404040 }), { css: '#404040', rgba: 0x404040FF });
168+
assert.deepEqual(opaque({ css: '#50505050', rgba: 0x50505050 }), { css: '#505050', rgba: 0x505050FF });
169+
assert.deepEqual(opaque({ css: '#60606060', rgba: 0x60606060 }), { css: '#606060', rgba: 0x606060FF });
170+
assert.deepEqual(opaque({ css: '#70707070', rgba: 0x70707070 }), { css: '#707070', rgba: 0x707070FF });
171+
assert.deepEqual(opaque({ css: '#80808080', rgba: 0x80808080 }), { css: '#808080', rgba: 0x808080FF });
172+
assert.deepEqual(opaque({ css: '#90909090', rgba: 0x90909090 }), { css: '#909090', rgba: 0x909090FF });
173+
assert.deepEqual(opaque({ css: '#a0a0a0a0', rgba: 0xa0a0a0a0 }), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
174+
assert.deepEqual(opaque({ css: '#b0b0b0b0', rgba: 0xb0b0b0b0 }), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
175+
assert.deepEqual(opaque({ css: '#c0c0c0c0', rgba: 0xc0c0c0c0 }), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
176+
assert.deepEqual(opaque({ css: '#d0d0d0d0', rgba: 0xd0d0d0d0 }), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
177+
assert.deepEqual(opaque({ css: '#e0e0e0e0', rgba: 0xe0e0e0e0 }), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
178+
assert.deepEqual(opaque({ css: '#f0f0f0f0', rgba: 0xf0f0f0f0 }), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
179+
assert.deepEqual(opaque({ css: '#ffffffff', rgba: 0xffffffff }), { css: '#ffffff', rgba: 0xffffffFF });
180+
});
181+
});
182+
138183
describe('rgbRelativeLuminance', () => {
139184
it('should calculate the relative luminance of the color', () => {
140185
assert.equal(rgbRelativeLuminance(0x000000), 0);

‎src/browser/Color.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ export function toPaddedHex(c: number): string {
3939
return s.length < 2 ? '0' + s : s;
4040
}
4141

42-
export function toCss(r: number, g: number, b: number): string {
42+
export function toCss(r: number, g: number, b: number, a?: number): string {
43+
if (a !== undefined) {
44+
return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}${toPaddedHex(a)}`;
45+
}
4346
return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
4447
}
4548

@@ -48,6 +51,19 @@ export function toRgba(r: number, g: number, b: number, a: number = 0xFF): numbe
4851
return (r << 24 | g << 16 | b << 8 | a) >>> 0;
4952
}
5053

54+
export function fromRgba(value: number): [number, number, number, number] {
55+
return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
56+
}
57+
58+
export function opaque(color: IColor): IColor {
59+
const rgba = (color.rgba | 0xFF) >>> 0;
60+
const [r, g, b] = fromRgba(rgba);
61+
return {
62+
css: toCss(r, g, b),
63+
rgba
64+
};
65+
}
66+
5167
/**
5268
* Gets the relative luminance of an RGB color, this is useful in determining the contrast ratio
5369
* between two colors.
@@ -92,7 +108,7 @@ export function contrastRatio(l1: number, l2: number): number {
92108
return (l1 + 0.05) / (l2 + 0.05);
93109
}
94110

95-
function rgbaToColor(r: number, g: number, b: number): IColor {
111+
export function rgbaToColor(r: number, g: number, b: number): IColor {
96112
return {
97113
css: toCss(r, g, b),
98114
rgba: toRgba(r, g, b)

0 commit comments

Comments
 (0)