From 81a62306afebe463a192e7d4b85f345ab007c9f7 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Wed, 10 Aug 2022 05:59:29 -0700 Subject: [PATCH 1/4] Ensure canvas device dims are > 0x0 when firing callback See microsoft/vscode#157444 --- src/browser/renderer/DevicePixelObserver.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/browser/renderer/DevicePixelObserver.ts b/src/browser/renderer/DevicePixelObserver.ts index 611eb910..caf1b21d 100644 --- a/src/browser/renderer/DevicePixelObserver.ts +++ b/src/browser/renderer/DevicePixelObserver.ts @@ -24,10 +24,12 @@ export function observeDevicePixelDimensions(element: HTMLElement, callback: (de return; } - callback( - entry.devicePixelContentBoxSize[0].inlineSize, - entry.devicePixelContentBoxSize[0].blockSize - ); + // Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden + const width = entry.devicePixelContentBoxSize[0].inlineSize; + const height = entry.devicePixelContentBoxSize[0].blockSize; + if (width > 0 && height > 0) { + callback(width, height); + } }); observer.observe(element, { box: ['device-pixel-content-box'] } as any); return toDisposable(() => observer?.disconnect()); From 9a119a7292d43a18118f2fbb727c5729609e8f54 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Wed, 10 Aug 2022 06:27:32 -0700 Subject: [PATCH 2/4] Whitespace change to trigger release --- addons/xterm-addon-webgl/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/xterm-addon-webgl/README.md b/addons/xterm-addon-webgl/README.md index a431170f..5dee6b62 100644 --- a/addons/xterm-addon-webgl/README.md +++ b/addons/xterm-addon-webgl/README.md @@ -2,7 +2,6 @@ An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL2-based renderer. This addon requires xterm.js v4+. - ### Install ```bash From 79d47893df3e734b25225318a0d0a45d4020d02f Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 19 Aug 2022 13:19:08 -0700 Subject: [PATCH 3/4] Move webgl underline rendering down See microsoft/vscode#158326 --- addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 13dceae6..72421b2d 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -439,8 +439,7 @@ export class WebglCharAtlas implements IDisposable { if (underline) { this._tmpCtx.save(); const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15)); - // When the width is odd, draw at 0.5 position. Offset by an additional 1 dpr to bring the - // underline closer to the character + // When the line width is odd, draw at a 0.5 position const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio; this._tmpCtx.lineWidth = lineWidth; @@ -463,9 +462,9 @@ export class WebglCharAtlas implements IDisposable { this._tmpCtx.beginPath(); const xLeft = padding; const xRight = padding + this._config.scaledCellWidth; - const yTop = Math.ceil(padding + this._config.scaledCharHeight - lineWidth) - yOffset; - const yMid = padding + this._config.scaledCharHeight - yOffset; - const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth) - yOffset; + const yTop = Math.ceil(padding + this._config.scaledCharHeight) - yOffset; + const yMid = padding + this._config.scaledCharHeight + lineWidth - yOffset; + const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth * 2) - yOffset; switch (this._workAttributeData.extended.underlineStyle) { case UnderlineStyle.DOUBLE: this._tmpCtx.moveTo(xLeft, yTop); From 0698afaf12c89df34b6c72edca9a7e229b4ff0fe Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 19 Aug 2022 13:24:39 -0700 Subject: [PATCH 4/4] Only stroke glyph when font size >= 12 --- addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 72421b2d..a7e92f94 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -440,7 +440,7 @@ export class WebglCharAtlas implements IDisposable { this._tmpCtx.save(); const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15)); // When the line width is odd, draw at a 0.5 position - const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio; + const yOffset = lineWidth % 2 === 1 ? 0.5 : 0; this._tmpCtx.lineWidth = lineWidth; // Underline color @@ -527,8 +527,9 @@ export class WebglCharAtlas implements IDisposable { this._tmpCtx.restore(); // Draw stroke in the background color for non custom characters in order to give an outline - // between the text and the underline - if (!customGlyph) { + // between the text and the underline. Only do this when font size is >= 12 as the underline + // looks odd when the font size is too small + if (!customGlyph && this._config.fontSize >= 12) { // This only works when transparency is disabled because it's not clear how to clear stroked // text if (!this._config.allowTransparency && chars !== ' ') {