apply font variant, some cleanup

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`;
       }

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;
   }
 }