@xterm/addon-webgl 0.20.0-beta.9 → 0.20.0-beta.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xterm/addon-webgl",
-  "version": "0.20.0-beta.9",
+  "version": "0.20.0-beta.90",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -23,8 +23,8 @@
     "prepublishOnly": "npm run package",
     "start": "node ../../demo/start"
   },
-  "commit": "579573e77d2bcf50c056543fad6f1334b957e6d1",
+  "commit": "94a264679e6bd51b7021ca59e3b2e1e80d02c633",
   "peerDependencies": {
-    "@xterm/xterm": "^6.1.0-beta.10"
+    "@xterm/xterm": "^6.1.0-beta.91"
   }
 }

package/src/CharAtlasCache.ts

@@ -32,9 +32,10 @@ export function acquireTextureAtlas(
   deviceCharWidth: number,
   deviceCharHeight: number,
   devicePixelRatio: number,
-  deviceMaxTextureSize: number
+  deviceMaxTextureSize: number,
+  customGlyphs: boolean = true
 ): ITextureAtlas {
-  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio, deviceMaxTextureSize);
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio, deviceMaxTextureSize, customGlyphs);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

package/src/CharAtlasUtils.ts

@@ -9,7 +9,7 @@ import { ITerminalOptions } from '@xterm/xterm';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { NULL_COLOR } from 'common/Color';
 
-export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number, deviceMaxTextureSize: number): ICharAtlasConfig {
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number, deviceMaxTextureSize: number, customGlyphs: boolean = true): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -32,7 +32,7 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     halfContrastCache: colors.halfContrastCache
   };
   return {
-    customGlyphs: options.customGlyphs,
+    customGlyphs,
     devicePixelRatio,
     deviceMaxTextureSize,
     letterSpacing: options.letterSpacing,

package/src/CursorBlinkStateManager.ts

@@ -3,12 +3,15 @@
  * @license MIT
  */
 
+import { RendererConstants } from 'browser/renderer/shared/Constants';
 import { ICoreBrowserService } from 'browser/services/Services';
 
-/**
- * The time between cursor blinks.
- */
-const BLINK_INTERVAL = 600;
+const enum Constants {
+  /**
+   * The time between cursor blinks.
+   */
+  BLINK_INTERVAL = 600,
+}
 
 export class CursorBlinkStateManager {
   public isCursorVisible: boolean;
@@ -16,6 +19,8 @@ export class CursorBlinkStateManager {
   private _animationFrame: number | undefined;
   private _blinkStartTimeout: number | undefined;
   private _blinkInterval: number | undefined;
+  private _idleTimeout: number | undefined;
+  private _isIdlePaused: boolean = false;
 
   /**
    * The time at which the animation frame was restarted, this is used on the
@@ -31,6 +36,7 @@ export class CursorBlinkStateManager {
     this.isCursorVisible = true;
     if (this._coreBrowserService.isFocused) {
       this._restartInterval();
+      this._resetIdleTimer();
     }
   }
 
@@ -49,9 +55,16 @@ export class CursorBlinkStateManager {
       this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
+    if (this._idleTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._idleTimeout);
+      this._idleTimeout = undefined;
+    }
   }
 
   public restartBlinkAnimation(): void {
+    if (this._isIdlePaused) {
+      this._resetIdleTimer();
+    }
     if (this.isPaused) {
       return;
     }
@@ -67,7 +80,7 @@ export class CursorBlinkStateManager {
     }
   }
 
-  private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
+  private _restartInterval(timeToStart: number = Constants.BLINK_INTERVAL): void {
     // Clear any existing interval
     if (this._blinkInterval) {
       this._coreBrowserService.window.clearInterval(this._blinkInterval);
@@ -82,7 +95,7 @@ export class CursorBlinkStateManager {
       // Check if another animation restart was requested while this was being
       // started
       if (this._animationTimeRestarted) {
-        const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+        const time = Constants.BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
         this._animationTimeRestarted = undefined;
         if (time > 0) {
           this._restartInterval(time);
@@ -103,7 +116,7 @@ export class CursorBlinkStateManager {
         if (this._animationTimeRestarted) {
           // calc time diff
           // Make restart interval do a setTimeout initially?
-          const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+          const time = Constants.BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
           this._animationTimeRestarted = undefined;
           this._restartInterval(time);
           return;
@@ -115,12 +128,13 @@ export class CursorBlinkStateManager {
           this._renderCallback();
           this._animationFrame = undefined;
         });
-      }, BLINK_INTERVAL);
+      }, Constants.BLINK_INTERVAL);
     }, timeToStart);
   }
 
   public pause(): void {
     this.isCursorVisible = true;
+    this._isIdlePaused = false;
     if (this._blinkInterval) {
       this._coreBrowserService.window.clearInterval(this._blinkInterval);
       this._blinkInterval = undefined;
@@ -133,6 +147,10 @@ export class CursorBlinkStateManager {
       this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
+    if (this._idleTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._idleTimeout);
+      this._idleTimeout = undefined;
+    }
   }
 
   public resume(): void {
@@ -141,6 +159,47 @@ export class CursorBlinkStateManager {
 
     this._animationTimeRestarted = undefined;
     this._restartInterval();
+    this._resetIdleTimer();
     this.restartBlinkAnimation();
   }
+
+  /**
+   * Resets the idle timer. If the terminal is idle for the idle timeout period,
+   * the cursor blinking will stop.
+   */
+  private _resetIdleTimer(): void {
+    this._isIdlePaused = false;
+    if (this._idleTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._idleTimeout);
+    }
+    this._idleTimeout = this._coreBrowserService.window.setTimeout(() => {
+      this._stopBlinkingDueToIdle();
+    }, RendererConstants.CURSOR_BLINK_IDLE_TIMEOUT);
+  }
+
+  /**
+   * Stops cursor blinking due to idle timeout.
+   */
+  private _stopBlinkingDueToIdle(): void {
+    // Make cursor visible and stop blinking
+    this.isCursorVisible = true;
+    this._isIdlePaused = true;
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+    if (this._blinkStartTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
+      this._blinkStartTimeout = undefined;
+    }
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+    // Clear the idle timeout as we've already acted on it
+    this._coreBrowserService.window.clearTimeout(this._idleTimeout);
+    this._idleTimeout = undefined;
+    // Trigger a render to show the cursor in its final visible state
+    this._renderCallback();
+  }
 }

package/src/TextureAtlas.ts

@@ -514,7 +514,7 @@ export class TextureAtlas implements ITextureAtlas {
     // Draw custom characters if applicable
     let customGlyph = false;
     if (this._config.customGlyphs !== false) {
-      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.fontSize, this._config.devicePixelRatio, backgroundColor.css);
+      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.deviceCharWidth, this._config.deviceCharHeight, this._config.fontSize, this._config.devicePixelRatio, backgroundColor.css);
     }
 
     // Whether to clear pixels based on a threshold difference between the glyph color and the
@@ -551,61 +551,67 @@ export class TextureAtlas implements ITextureAtlas {
         }
         this._tmpCtx.strokeStyle = this._getColorFromAnsiIndex(fg).css;
       }
+      this._tmpCtx.fillStyle = this._tmpCtx.strokeStyle;
 
       // Underline style/stroke
       this._tmpCtx.beginPath();
       const xLeft = padding;
-      const yTop = Math.ceil(padding + this._config.deviceCharHeight) - yOffset - (restrictToCellHeight ? lineWidth * 2 : 0);
-      const yMid = yTop + lineWidth;
-      const yBot = yTop + lineWidth * 2;
+      const yTopDefault = Math.ceil(padding + this._config.deviceCharHeight) - yOffset - (restrictToCellHeight ? lineWidth * 2 : 0);
+      const yBotDefault = yTopDefault + lineWidth * 2;
       let nextOffset = this._workAttributeData.getUnderlineVariantOffset();
+      let yTop = 0;
+      let yBot = 0;
 
       for (let i = 0; i < chWidth; i++) {
+        let wasFilled = false;
         this._tmpCtx.save();
+        yTop = yTopDefault;
+        yBot = yBotDefault;
         const xChLeft = xLeft + i * this._config.deviceCellWidth;
         const xChRight = xLeft + (i + 1) * this._config.deviceCellWidth;
-        const xChMid = xChLeft + this._config.deviceCellWidth / 2;
         switch (this._workAttributeData.extended.underlineStyle) {
           case UnderlineStyle.DOUBLE:
-            this._tmpCtx.moveTo(xChLeft, yTop);
-            this._tmpCtx.lineTo(xChRight, yTop);
-            this._tmpCtx.moveTo(xChLeft, yBot);
-            this._tmpCtx.lineTo(xChRight, yBot);
+            this._tmpCtx.moveTo(xChLeft, yTopDefault);
+            this._tmpCtx.lineTo(xChRight, yTopDefault);
+            this._tmpCtx.moveTo(xChLeft, yBotDefault);
+            this._tmpCtx.lineTo(xChRight, yBotDefault);
             break;
           case UnderlineStyle.CURLY:
-            // 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.
-            const yCurlyBot = lineWidth <= 1 ? yBot : Math.ceil(padding + this._config.deviceCharHeight - lineWidth / 2) - yOffset;
-            const yCurlyTop = lineWidth <= 1 ? yTop : Math.ceil(padding + this._config.deviceCharHeight + lineWidth / 2) - yOffset;
-            // Clip the left and right edges of the underline such that it can be drawn just outside
-            // the edge of the cell to ensure a continuous stroke when there are multiple underlined
-            // glyphs adjacent to one another.
+            yTop = this._config.deviceCharHeight + 1;
+            yBot = yTop + 3 * this._config.devicePixelRatio;
+
             const clipRegion = new Path2D();
             clipRegion.rect(xChLeft, yTop, this._config.deviceCellWidth, yBot - yTop);
             this._tmpCtx.clip(clipRegion);
-            // Start 1/2 cell before and end 1/2 cells after to ensure a smooth curve with other
-            // cells
-            this._tmpCtx.moveTo(xChLeft - this._config.deviceCellWidth / 2, yMid);
-            this._tmpCtx.bezierCurveTo(
-              xChLeft - this._config.deviceCellWidth / 2, yCurlyTop,
-              xChLeft, yCurlyTop,
-              xChLeft, yMid
-            );
-            this._tmpCtx.bezierCurveTo(
-              xChLeft, yCurlyBot,
-              xChMid, yCurlyBot,
-              xChMid, yMid
-            );
-            this._tmpCtx.bezierCurveTo(
-              xChMid, yCurlyTop,
-              xChRight, yCurlyTop,
-              xChRight, yMid
-            );
-            this._tmpCtx.bezierCurveTo(
-              xChRight, yCurlyBot,
-              xChRight + this._config.deviceCellWidth / 2, yCurlyBot,
-              xChRight + this._config.deviceCellWidth / 2, yMid
-            );
+
+            // Draw a zigzag pattern, this is derived from the SVG used in monaco for the same
+            // style. The viewbox is 6x3 so scale it using that.
+            const cellW = this._config.deviceCellWidth;
+            const curlyH = (yBot - yTop);
+            const scaleX = cellW / 6;
+            const scaleY = curlyH / 3;
+
+            const polygons: number[][] = [
+              [0, 2, 1, 3, 2.4, 3, 0, 0.6],
+              [5.5, 0, 2.5, 3, 1.1, 3, 4.1, 0],
+              [4, 0, 6, 2, 6, 0.6, 5.4, 0],
+            ];
+
+            for (const polygon of polygons) {
+              this._tmpCtx.beginPath();
+              for (let i = 0; i < polygon.length; i += 2) {
+                const x = xChLeft + polygon[i] * scaleX;
+                const y = yBot - polygon[i + 1] * scaleY;
+                if (i === 0) {
+                  this._tmpCtx.moveTo(x, y);
+                } else {
+                  this._tmpCtx.lineTo(x, y);
+                }
+              }
+              this._tmpCtx.closePath();
+              this._tmpCtx.fill();
+            }
+            wasFilled = true;
             break;
           case UnderlineStyle.DOTTED:
             const offsetWidth = nextOffset === 0 ? 0 :
@@ -614,14 +620,14 @@ export class TextureAtlas implements ITextureAtlas {
             const isLineStart = nextOffset >= lineWidth ? false : true;
             if (isLineStart === false || offsetWidth === 0) {
               this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
-              this._tmpCtx.moveTo(xChLeft + offsetWidth, yTop);
-              this._tmpCtx.lineTo(xChRight, yTop);
+              this._tmpCtx.moveTo(xChLeft + offsetWidth, yTopDefault);
+              this._tmpCtx.lineTo(xChRight, yTopDefault);
             } else {
               this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
-              this._tmpCtx.moveTo(xChLeft, yTop);
-              this._tmpCtx.lineTo(xChLeft + offsetWidth, yTop);
-              this._tmpCtx.moveTo(xChLeft + offsetWidth + lineWidth, yTop);
-              this._tmpCtx.lineTo(xChRight, yTop);
+              this._tmpCtx.moveTo(xChLeft, yTopDefault);
+              this._tmpCtx.lineTo(xChLeft + offsetWidth, yTopDefault);
+              this._tmpCtx.moveTo(xChLeft + offsetWidth + lineWidth, yTopDefault);
+              this._tmpCtx.lineTo(xChRight, yTopDefault);
             }
             nextOffset = computeNextVariantOffset(xChRight - xChLeft, lineWidth, nextOffset);
             break;
@@ -634,16 +640,18 @@ export class TextureAtlas implements ITextureAtlas {
             const gap = Math.floor(gapRatio * xChWidth);
             const end = xChWidth - line - gap;
             this._tmpCtx.setLineDash([line, gap, end]);
-            this._tmpCtx.moveTo(xChLeft, yTop);
-            this._tmpCtx.lineTo(xChRight, yTop);
+            this._tmpCtx.moveTo(xChLeft, yTopDefault);
+            this._tmpCtx.lineTo(xChRight, yTopDefault);
             break;
           case UnderlineStyle.SINGLE:
           default:
-            this._tmpCtx.moveTo(xChLeft, yTop);
-            this._tmpCtx.lineTo(xChRight, yTop);
+            this._tmpCtx.moveTo(xChLeft, yTopDefault);
+            this._tmpCtx.lineTo(xChRight, yTopDefault);
             break;
         }
-        this._tmpCtx.stroke();
+        if (!wasFilled) {
+          this._tmpCtx.stroke();
+        }
         this._tmpCtx.restore();
       }
       this._tmpCtx.restore();

package/src/WebglAddon.ts

@@ -4,7 +4,7 @@
  */
 
 import type { ITerminalAddon, Terminal } from '@xterm/xterm';
-import type { WebglAddon as IWebglApi } from '@xterm/addon-webgl';
+import type { IWebglAddonOptions, WebglAddon as IWebglApi } from '@xterm/addon-webgl';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { ITerminal } from 'browser/Types';
 import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
@@ -28,9 +28,10 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
   private readonly _onContextLoss = this._register(new Emitter<void>());
   public readonly onContextLoss = this._onContextLoss.event;
 
-  constructor(
-    private _preserveDrawingBuffer?: boolean
-  ) {
+  private readonly _customGlyphs: boolean;
+  private readonly _preserveDrawingBuffer?: boolean;
+
+  constructor(options?: IWebglAddonOptions) {
     if (isSafari && getSafariVersion() < 16) {
       // Perform an extra check to determine if Webgl2 is manually enabled in developer settings
       const contextAttributes = {
@@ -44,6 +45,8 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
       }
     }
     super();
+    this._customGlyphs = options?.customGlyphs ?? true;
+    this._preserveDrawingBuffer = options?.preserveDrawingBuffer;
   }
 
   public activate(terminal: Terminal): void {
@@ -79,6 +82,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
       decorationService,
       optionsService,
       themeService,
+      this._customGlyphs,
       this._preserveDrawingBuffer
     ));
     this._register(Event.forward(this._renderer.onContextLoss, this._onContextLoss));

package/src/WebglRenderer.ts

@@ -72,6 +72,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _decorationService: IDecorationService,
     private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
+    private readonly _customGlyphs: boolean = true,
     preserveDrawingBuffer?: boolean
   ) {
     super();
@@ -135,6 +136,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
     }));
 
+    this._register(addDisposableListener(this._coreBrowserService.mainDocument, 'mousedown', () => this._cursorBlinkStateManager.value?.restartBlinkAnimation()));
+
     this._core.screenElement!.appendChild(this._canvas);
 
     [this._rectangleRenderer.value, this._glyphRenderer.value] = this._initializeWebGLState();
@@ -201,6 +204,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // Force a full refresh. Resizing `_glyphRenderer` should clear it already,
     // so there is no need to clear it again here.
     this._clearModel(false);
+
+    // Render synchronously to avoid flicker when the canvas is cleared
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1, sync: true });
   }
 
   public handleCharSizeChanged(): void {
@@ -278,7 +284,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this.dimensions.device.char.width,
       this.dimensions.device.char.height,
       this._coreBrowserService.dpr,
-      this._deviceMaxTextureSize
+      this._deviceMaxTextureSize,
+      this._customGlyphs
     );
     if (this._charAtlas !== atlas) {
       this._onChangeTextureAtlas.fire(atlas.pages[0].canvas);
@@ -615,7 +622,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // the change as it's an exact multiple of the cell sizes.
     this._canvas.width = width;
     this._canvas.height = height;
-    this._requestRedrawViewport();
+    // Update the WebGL viewport to match the new canvas dimensions
+    this._gl.viewport(0, 0, width, height);
+    // Render synchronously to avoid flicker when the canvas is cleared
+    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1, sync: true });
   }
 
   private _requestRedrawViewport(): void {