@xterm/addon-webgl 0.19.0-beta.13 → 0.19.0-beta.131

package/src/DevicePixelObserver.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { toDisposable, IDisposable } from 'vs/base/common/lifecycle';
+
+export function observeDevicePixelDimensions(element: HTMLElement, parentWindow: Window & typeof globalThis, callback: (deviceWidth: number, deviceHeight: number) => void): IDisposable {
+  // Observe any resizes to the element and extract the actual pixel size of the element if the
+  // devicePixelContentBoxSize API is supported. This allows correcting rounding errors when
+  // converting between CSS pixels and device pixels which causes blurry rendering when device
+  // pixel ratio is not a round number.
+  let observer: ResizeObserver | undefined = new parentWindow.ResizeObserver((entries) => {
+    const entry = entries.find((entry) => entry.target === element);
+    if (!entry) {
+      return;
+    }
+
+    // Disconnect if devicePixelContentBoxSize isn't supported by the browser
+    if (!('devicePixelContentBoxSize' in entry)) {
+      observer?.disconnect();
+      observer = undefined;
+      return;
+    }
+
+    // Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden
+    const width = entry.devicePixelContentBoxSize[0].inlineSize;
+    const height = entry.devicePixelContentBoxSize[0].blockSize;
+    if (width > 0 && height > 0) {
+      callback(width, height);
+    }
+  });
+  try {
+    observer.observe(element, { box: ['device-pixel-content-box'] } as any);
+  } catch {
+    observer.disconnect();
+    observer = undefined;
+  }
+  return toDisposable(() => observer?.disconnect());
+}

package/src/GlyphRenderer.ts

@@ -2,16 +2,15 @@
  * Copyright (c) 2018 The xterm.js authors. All rights reserved.
  * @license MIT
  */
-
-import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
-import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
-import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { TextureAtlas } from './TextureAtlas';
+import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { Terminal } from '@xterm/xterm';
-import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
+import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject, type IRasterizedGlyph, type ITextureAtlas } from './Types';
 import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
 import type { IOptionsService } from 'common/services/Services';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 interface IVertices {
   attributes: Float32Array;
@@ -127,7 +126,7 @@ export class GlyphRenderer extends Disposable {
     }
 
     this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
-    this.register(toDisposable(() => gl.deleteProgram(this._program)));
+    this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
@@ -141,7 +140,7 @@ export class GlyphRenderer extends Disposable {
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
     const unitQuadVerticesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
@@ -152,13 +151,13 @@ export class GlyphRenderer extends Disposable {
     // triangle strip
     const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
 
     // Setup attributes
     this._attributesBuffer = throwIfFalsy(gl.createBuffer());
-    this.register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.OFFSET);
     gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, BYTES_PER_CELL, 0);
@@ -193,7 +192,7 @@ export class GlyphRenderer extends Disposable {
     this._atlasTextures = [];
     for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
       const glTexture = new GLTexture(throwIfFalsy(gl.createTexture()));
-      this.register(toDisposable(() => gl.deleteTexture(glTexture.texture)));
+      this._register(toDisposable(() => gl.deleteTexture(glTexture.texture)));
       gl.activeTexture(gl.TEXTURE0 + i);
       gl.bindTexture(gl.TEXTURE_2D, glTexture.texture);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -238,9 +237,9 @@ export class GlyphRenderer extends Disposable {
 
     // Get the glyph
     if (chars && chars.length > 1) {
-      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false, this._terminal.element);
     } else {
-      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false, this._terminal.element);
     }
 
     $leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);

package/src/RectangleRenderer.ts

@@ -3,17 +3,17 @@
  * @license MIT
  */
 
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
 import { Attributes, FgFlags } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IColor } from 'common/Types';
 import { Terminal } from '@xterm/xterm';
 import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
 import { createProgram, expandFloat32Array, PROJECTION_MATRIX } from './WebglUtils';
+import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 
 const enum VertexAttribLocations {
   POSITION = 0,
@@ -96,7 +96,7 @@ export class RectangleRenderer extends Disposable {
     const gl = this._gl;
 
     this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
-    this.register(toDisposable(() => gl.deleteProgram(this._program)));
+    this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
@@ -108,7 +108,7 @@ export class RectangleRenderer extends Disposable {
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
     const unitQuadVerticesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
@@ -119,13 +119,13 @@ export class RectangleRenderer extends Disposable {
     // triangle strip
     const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
 
     // Setup attributes
     this._attributesBuffer = throwIfFalsy(gl.createBuffer());
-    this.register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.POSITION);
     gl.vertexAttribPointer(VertexAttribLocations.POSITION, 2, gl.FLOAT, false, BYTES_PER_RECTANGLE, 0);
@@ -138,7 +138,7 @@ export class RectangleRenderer extends Disposable {
     gl.vertexAttribDivisor(VertexAttribLocations.COLOR, 1);
 
     this._updateCachedColors(_themeService.colors);
-    this.register(this._themeService.onChangeColors(e => {
+    this._register(this._themeService.onChangeColors(e => {
       this._updateCachedColors(e);
       this._updateViewportRectangle();
     }));