mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
Merge pull request #3980 from Tyriar/3971
Fix underline color and polish width and positioning
This commit is contained in:
@@ -438,8 +438,10 @@ export class WebglCharAtlas implements IDisposable {
|
||||
// Draw underline
|
||||
if (underline) {
|
||||
this._tmpCtx.save();
|
||||
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 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
|
||||
const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio;
|
||||
this._tmpCtx.lineWidth = lineWidth;
|
||||
|
||||
// Underline color
|
||||
@@ -508,18 +510,18 @@ export class WebglCharAtlas implements IDisposable {
|
||||
break;
|
||||
case UnderlineStyle.DOTTED:
|
||||
this._tmpCtx.setLineDash([window.devicePixelRatio * 2, window.devicePixelRatio]);
|
||||
this._tmpCtx.moveTo(xLeft, yMid);
|
||||
this._tmpCtx.lineTo(xRight, yMid);
|
||||
this._tmpCtx.moveTo(xLeft, yTop);
|
||||
this._tmpCtx.lineTo(xRight, yTop);
|
||||
break;
|
||||
case UnderlineStyle.DASHED:
|
||||
this._tmpCtx.setLineDash([window.devicePixelRatio * 4, window.devicePixelRatio * 3]);
|
||||
this._tmpCtx.moveTo(xLeft, yMid);
|
||||
this._tmpCtx.lineTo(xRight, yMid);
|
||||
this._tmpCtx.moveTo(xLeft, yTop);
|
||||
this._tmpCtx.lineTo(xRight, yTop);
|
||||
break;
|
||||
case UnderlineStyle.SINGLE:
|
||||
default:
|
||||
this._tmpCtx.moveTo(xLeft, yMid);
|
||||
this._tmpCtx.lineTo(xRight, yMid);
|
||||
this._tmpCtx.moveTo(xLeft, yTop);
|
||||
this._tmpCtx.lineTo(xRight, yTop);
|
||||
break;
|
||||
}
|
||||
this._tmpCtx.stroke();
|
||||
|
||||
@@ -139,7 +139,7 @@ describe('DomRendererRowFactory', () => {
|
||||
lineData.setCell(0, cell);
|
||||
const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
|
||||
assert.equal(getFragmentHtml(fragment),
|
||||
'<span class="xterm-underline-1" style="text-decoration-color: rgb(255,255,255);">a</span>'
|
||||
'<span class="xterm-underline-1">a</span>'
|
||||
);
|
||||
});
|
||||
it('should add class for double underline style', () => {
|
||||
@@ -150,7 +150,7 @@ describe('DomRendererRowFactory', () => {
|
||||
lineData.setCell(0, cell);
|
||||
const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
|
||||
assert.equal(getFragmentHtml(fragment),
|
||||
'<span class="xterm-underline-2" style="text-decoration-color: rgb(255,255,255);">a</span>'
|
||||
'<span class="xterm-underline-2">a</span>'
|
||||
);
|
||||
});
|
||||
it('should add class for curly underline style', () => {
|
||||
@@ -161,7 +161,7 @@ describe('DomRendererRowFactory', () => {
|
||||
lineData.setCell(0, cell);
|
||||
const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
|
||||
assert.equal(getFragmentHtml(fragment),
|
||||
'<span class="xterm-underline-3" style="text-decoration-color: rgb(255,255,255);">a</span>'
|
||||
'<span class="xterm-underline-3">a</span>'
|
||||
);
|
||||
});
|
||||
it('should add class for double dotted style', () => {
|
||||
@@ -172,7 +172,7 @@ describe('DomRendererRowFactory', () => {
|
||||
lineData.setCell(0, cell);
|
||||
const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
|
||||
assert.equal(getFragmentHtml(fragment),
|
||||
'<span class="xterm-underline-4" style="text-decoration-color: rgb(255,255,255);">a</span>'
|
||||
'<span class="xterm-underline-4">a</span>'
|
||||
);
|
||||
});
|
||||
it('should add class for dashed underline style', () => {
|
||||
@@ -183,7 +183,7 @@ describe('DomRendererRowFactory', () => {
|
||||
lineData.setCell(0, cell);
|
||||
const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
|
||||
assert.equal(getFragmentHtml(fragment),
|
||||
'<span class="xterm-underline-5" style="text-decoration-color: rgb(255,255,255);">a</span>'
|
||||
'<span class="xterm-underline-5">a</span>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -149,7 +149,7 @@ export class ExtendedAttrs implements IExtendedAttrs {
|
||||
|
||||
constructor(
|
||||
underlineStyle: UnderlineStyle = UnderlineStyle.NONE,
|
||||
underlineColor: number = -1
|
||||
underlineColor: number = Attributes.CM_DEFAULT
|
||||
) {
|
||||
this.underlineStyle = underlineStyle;
|
||||
this.underlineColor = underlineColor;
|
||||
|
||||
Reference in New Issue
Block a user