eiac/xterm.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Support letter spacing in webgl

Browse Source
This commit is contained in:
Daniel Imms
2022-07-30 07:05:05 -07:00
parent 941cc5100d
commit d0ec9f2591
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+6 -6
View File
@@ -421,6 +421,7 @@ export class WebglCharAtlas implements IDisposable {
const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 10)); const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 10));
const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
this._tmpCtx.lineWidth = lineWidth; this._tmpCtx.lineWidth = lineWidth;
// Underline color // Underline color
if (this._workAttributeData.isUnderlineColorDefault()) { if (this._workAttributeData.isUnderlineColorDefault()) {
this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle; this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
@@ -433,12 +434,11 @@ export class WebglCharAtlas implements IDisposable {
} }
this._tmpCtx.strokeStyle = this._getColorFromAnsiIndex(fg).css; this._tmpCtx.strokeStyle = this._getColorFromAnsiIndex(fg).css;
} }
// Underline style/stroke // Underline style/stroke
this._tmpCtx.beginPath(); this._tmpCtx.beginPath();
// TODO: Support letter spacing
const xLeft = padding; const xLeft = padding;
const xRight = padding + this._config.scaledCharWidth; const xRight = padding + this._config.scaledCellWidth;
const yTop = Math.ceil(padding + this._config.scaledCharHeight - lineWidth) - yOffset; const yTop = Math.ceil(padding + this._config.scaledCharHeight - lineWidth) - yOffset;
const yMid = padding + this._config.scaledCharHeight - yOffset; const yMid = padding + this._config.scaledCharHeight - yOffset;
const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth) - yOffset; const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth) - yOffset;
@@ -450,7 +450,7 @@ export class WebglCharAtlas implements IDisposable {
this._tmpCtx.lineTo(xRight, yBot); this._tmpCtx.lineTo(xRight, yBot);
break; break;
case UnderlineStyle.CURLY: case UnderlineStyle.CURLY:
const xMid = padding + this._config.scaledCharWidth / 2; const xMid = padding + this._config.scaledCellWidth / 2;
// Choose the bezier top and bottom based on the device pixel ratio, the curly line is // Choose the bezier top and bottom based on the device pixel ratio, the curly line is
// made taller when the line width is as otherwise it's not very clear otherwise. // made taller when the line width is as otherwise it's not very clear otherwise.
const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.scaledCharHeight - lineWidth / 2) - yOffset; const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.scaledCharHeight - lineWidth / 2) - yOffset;
@@ -462,9 +462,9 @@ export class WebglCharAtlas implements IDisposable {
clipRegion.rect(xLeft, yTop, this._config.scaledCellWidth, yBot - yTop); clipRegion.rect(xLeft, yTop, this._config.scaledCellWidth, yBot - yTop);
this._tmpCtx.clip(clipRegion); this._tmpCtx.clip(clipRegion);
// Start 1/2 cell before and end 1/2 cells after to ensure a smooth curve with other cells // Start 1/2 cell before and end 1/2 cells after to ensure a smooth curve with other cells
this._tmpCtx.moveTo(xLeft - this._config.scaledCharWidth / 2, yMid); this._tmpCtx.moveTo(xLeft - this._config.scaledCellWidth / 2, yMid);
this._tmpCtx.bezierCurveTo( this._tmpCtx.bezierCurveTo(
xLeft - this._config.scaledCharWidth / 2, yCurlyTop, xLeft - this._config.scaledCellWidth / 2, yCurlyTop,
xLeft, yCurlyTop, xLeft, yCurlyTop,
xLeft, yMid xLeft, yMid
); );