@xterm/xterm 5.4.0 → 5.5.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.4.0",
+  "version": "5.5.0-beta.10",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",

package/src/browser/renderer/dom/DomRenderer.ts

@@ -183,14 +183,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` font-style: italic;` +
       `}`;
     // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
     styles +=
-      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationUnderlineId} {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBarId} {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBlockId} {` +
       ` 0% {` +
       `  background-color: ${colors.cursor.css};` +
       `  color: ${colors.cursorAccent.css};` +
@@ -202,13 +211,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
-      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
+      // !important helps fix an issue where the cursor will not render on top of the selection,
+      // however it's very hard to fix this issue and retain the blink animation without the use of
+      // !important. So this edge case fails when cursor blink is on.
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${colors.cursor.css};` +
+      ` color: ${colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
       ` background-color: ${colors.cursor.css} !important;` +
       ` color: ${colors.cursorAccent.css} !important;` +
       `}` +

package/src/browser/renderer/shared/RendererUtils.ts

@@ -23,10 +23,41 @@ export function isRestrictedPowerlineGlyph(codepoint: number): boolean {
   return 0xE0B0 <= codepoint && codepoint <= 0xE0B7;
 }
 
+function isNerdFontGlyph(codepoint: number): boolean {
+  return 0xE000 <= codepoint && codepoint <= 0xF8FF;
+}
+
 function isBoxOrBlockGlyph(codepoint: number): boolean {
   return 0x2500 <= codepoint && codepoint <= 0x259F;
 }
 
+export function isEmoji(codepoint: number): boolean {
+  return (
+    codepoint >= 0x1F600 && codepoint <= 0x1F64F || // Emoticons
+    codepoint >= 0x1F300 && codepoint <= 0x1F5FF || // Misc Symbols and Pictographs
+    codepoint >= 0x1F680 && codepoint <= 0x1F6FF || // Transport and Map
+    codepoint >= 0x2600  && codepoint <= 0x26FF  || // Misc symbols
+    codepoint >= 0x2700  && codepoint <= 0x27BF  || // Dingbats
+    codepoint >= 0xFE00  && codepoint <= 0xFE0F  || // Variation Selectors
+    codepoint >= 0x1F900 && codepoint <= 0x1F9FF || // Supplemental Symbols and Pictographs
+    codepoint >= 0x1F1E6 && codepoint <= 0x1F1FF
+  );
+}
+
+export function allowRescaling(codepoint: number | undefined, width: number, glyphSizeX: number, deviceCellWidth: number): boolean {
+  return (
+    // Is single cell width
+    width === 1 &&
+    // Glyph exceeds cell bounds, add 25% to avoid hurting readability by rescaling glyphs that
+    // barely overlap
+    glyphSizeX > deviceCellWidth * 1.25 &&
+    // Never rescale emoji
+    codepoint !== undefined && !isEmoji(codepoint) &&
+    // Never rescale powerline or nerd fonts
+    !isPowerlineGlyph(codepoint) && !isNerdFontGlyph(codepoint)
+  );
+}
+
 export function treatGlyphAsBackgroundColor(codepoint: number): boolean {
   return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
 }

package/src/browser/services/RenderService.ts

@@ -87,7 +87,8 @@ export class RenderService extends Disposable implements IRenderService {
       'fontSize',
       'fontWeight',
       'fontWeightBold',
-      'minimumContrastRatio'
+      'minimumContrastRatio',
+      'rescaleOverlappingGlyphs'
     ], () => {
       this.clear();
       this.handleResize(bufferService.cols, bufferService.rows);

package/src/common/Color.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { isNode } from 'common/Platform';
 import { IColor, IColorRGB } from 'common/Types';
 
 let $r = 0;
@@ -117,9 +116,10 @@ export namespace color {
  * '#rrggbbaa').
  */
 export namespace css {
+  // Attempt to set get the shared canvas context
   let $ctx: CanvasRenderingContext2D | undefined;
   let $litmusColor: CanvasGradient | undefined;
-  if (!isNode) {
+  try {
     // This is guaranteed to run in the first window, so document should be correct
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -133,6 +133,9 @@ export namespace css {
       $litmusColor = $ctx.createLinearGradient(0, 0, 1, 1);
     }
   }
+  catch {
+    // noop
+  }
 
   /**
    * Converts a css string to an IColor, this should handle all valid CSS color strings and will

package/src/common/Platform.ts

@@ -14,7 +14,7 @@ interface INavigator {
 declare const navigator: INavigator;
 declare const process: unknown;
 
-export const isNode = (typeof process !== 'undefined') ? true : false;
+export const isNode = (typeof process !== 'undefined' && 'title' in (process as any)) ? true : false;
 const userAgent = (isNode) ? 'node' : navigator.userAgent;
 const platform = (isNode) ? 'node' : navigator.platform;
 

package/src/common/services/OptionsService.ts

@@ -44,6 +44,7 @@ export const DEFAULT_OPTIONS: Readonly<Required<ITerminalOptions>> = {
   allowTransparency: false,
   tabStopWidth: 8,
   theme: {},
+  rescaleOverlappingGlyphs: false,
   rightClickSelectsWord: isMac,
   windowOptions: {},
   windowsMode: false,

package/src/common/services/Services.ts

@@ -234,6 +234,7 @@ export interface ITerminalOptions {
   macOptionIsMeta?: boolean;
   macOptionClickForcesSelection?: boolean;
   minimumContrastRatio?: number;
+  rescaleOverlappingGlyphs?: boolean;
   rightClickSelectsWord?: boolean;
   rows?: number;
   screenReaderMode?: boolean;

package/typings/xterm.d.ts

@@ -209,6 +209,23 @@ declare module '@xterm/xterm' {
      */
     minimumContrastRatio?: number;
 
+    /**
+     * Whether to rescale glyphs horizontally that are a single cell wide but
+     * have glyphs that would overlap following cell(s). This typically happens
+     * for ambiguous width characters (eg. the roman numeral characters U+2160+)
+     * which aren't featured in monospace fonts. This is an important feature
+     * for achieving GB18030 compliance.
+     *
+     * The following glyphs will never be rescaled:
+     *
+     * - Emoji glyphs
+     * - Powerline glyphs
+     * - Nerd font glyphs
+     *
+     * Note that this doesn't work with the DOM renderer. The default is false.
+     */
+    rescaleOverlappingGlyphs?: boolean;
+
     /**
      * Whether to select the word under the cursor on right click, this is
      * standard behavior in a lot of macOS applications.
@@ -225,7 +242,7 @@ declare module '@xterm/xterm' {
     /**
      * The amount of scrollback in the terminal. Scrollback is the amount of
      * rows that are retained when lines are scrolled beyond the initial
-     * viewport.
+     * viewport. Defaults to 1000.
      */
     scrollback?: number;