From d1fdaa17d6accc7d2d34ce8629238895ea83ead8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Breitbart?= Date: Sat, 29 Jul 2023 14:16:47 +0200 Subject: [PATCH] apply font variant, some cleanup --- .../renderer/dom/DomRendererRowFactory.ts | 24 ++++++++++++++++--- src/browser/renderer/dom/SpacingCache.ts | 10 ++++---- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index 886fc555..2a691107 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -13,7 +13,7 @@ import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'bro import { JoinedCellData } from 'browser/services/CharacterJoinerService'; import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils'; import { AttributeData } from 'common/buffer/AttributeData'; -import { SpacingCache } from 'browser/renderer/dom/SpacingCache'; +import { FontVariant, SpacingCache } from 'browser/renderer/dom/SpacingCache'; export const enum RowCss { @@ -129,11 +129,17 @@ export class DomRendererRowFactory { const isCursorCell = isCursorRow && x === cursorX; const isLinkHover = hasHover && x >= linkStart && x <= linkEnd; + // get chars to render for this cell let chars = cell.getChars() || WHITESPACE_CELL_CHAR; if (chars === ' ' && (cell.isUnderline() || cell.isOverline())) { chars = '\xa0'; } - spacing = spacingCache.get(chars, width * cellWidth, 0); + + // lookup letter-spacing with font variant applied + let fontVariant = FontVariant.REGULAR; + if (cell.isBold()) fontVariant |= FontVariant.BOLD; + if (cell.isItalic()) fontVariant |= FontVariant.ITALIC; + spacing = spacingCache.get(chars, width * cellWidth, fontVariant); if (!charElement) { charElement = this._document.createElement('span'); @@ -145,7 +151,7 @@ export class DomRendererRowFactory { * - char not part of a selection * - underline from hover state did not change * - cell content renders to same letter-spacing - * - char is not cursor + * - cell is not cursor */ if ( cellAmount @@ -156,10 +162,16 @@ export class DomRendererRowFactory { && !isCursorCell && !isJoined ) { + // no span alterations, thus only account chars skipping all code below text += chars; cellAmount++; continue; } else { + /** + * cannot merge: + * - apply left-over text to old span + * - create new span, reset state holders cellAmount & text + */ if (cellAmount) { charElement.textContent = text; } @@ -168,6 +180,7 @@ export class DomRendererRowFactory { text = ''; } } + // preserve conditions for next merger eval round oldBg = cell.bg; oldFg = cell.fg; oldExt = cell.extended.ext; @@ -365,16 +378,21 @@ export class DomRendererRowFactory { } } + // apply CSS classes + // slightly faster than using classList by omitting + // checks for doubled entries (code above should not have doublets) if (classes.length) { charElement.className = classes.join(' '); classes.length = 0; } + // exclude conditions for cell merging - never merge these if (!isCursorCell && !isInSelection && !isJoined) { cellAmount++; } else { charElement.textContent = text; } + // apply letter-spacing rule if (spacing) { charElement.style.letterSpacing = `${spacing}px`; } diff --git a/src/browser/renderer/dom/SpacingCache.ts b/src/browser/renderer/dom/SpacingCache.ts index ca239cb1..036df4a8 100644 --- a/src/browser/renderer/dom/SpacingCache.ts +++ b/src/browser/renderer/dom/SpacingCache.ts @@ -8,8 +8,8 @@ import { IDisposable } from 'common/Types'; export const enum FontVariant { REGULAR = 0, - ITALIC = 1, - BOLD = 2, + BOLD = 1, + ITALIC = 2, BOLD_ITALIC = 3 } @@ -53,6 +53,7 @@ export class SpacingCache implements IDisposable { boldItalic.style.fontWeight = 'bold'; boldItalic.style.fontStyle = 'italic'; + // note: must be in order of FontVariant values this._measureElements = [regular, bold, italic, boldItalic]; this._container.appendChild(regular); this._container.appendChild(bold); @@ -99,7 +100,7 @@ export class SpacingCache implements IDisposable { * `c` should be the cell content obtained from `cell.getChars()`. * `pixelWidth` is the standard width the cell should render with * and can be calculated by `cell.getWidth() * cellWidth`. - * `variant` denotes the font variant to be used (0-regular, 1-bold, 2-italic, 3-bold&italic). + * `variant` denotes the font variant to be used. * * Returns the letter-spacing value, so that `c` renders aligned to `pixelWidth`. */ @@ -124,7 +125,6 @@ export class SpacingCache implements IDisposable { private _measure(c: string, variant: FontVariant): number { const el = this._measureElements[variant]; el.textContent = c.repeat(CacheSettings.REPEAT); - const width = el.getBoundingClientRect().width / CacheSettings.REPEAT; - return width; + return el.getBoundingClientRect().width / CacheSettings.REPEAT; } }