Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fab7bc3c5a | ||
|
|
f9b043274d | ||
|
|
8481bfd8dd | ||
|
|
32fdce592b | ||
|
|
3113eaefaa | ||
|
|
a56dc02cc7 | ||
|
|
e3399b1db8 |
@@ -6,19 +6,14 @@ on:
|
||||
pull_request:
|
||||
branches: [ "master" ]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js 22.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 22.x
|
||||
cache: 'npm'
|
||||
@@ -74,7 +69,7 @@ jobs:
|
||||
./addons/addon-webgl/out/* \
|
||||
./addons/addon-webgl/out-*st/*
|
||||
- name: Upload artifacts
|
||||
uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
|
||||
uses: actions/upload-artifact@v6
|
||||
with:
|
||||
name: build-artifacts
|
||||
path: compressed-build.zip
|
||||
@@ -84,11 +79,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js 22.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 22.x
|
||||
cache: 'npm'
|
||||
@@ -107,18 +100,16 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js 22.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 22.x
|
||||
cache: 'npm'
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
npm ci
|
||||
- uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
|
||||
- uses: actions/download-artifact@v7
|
||||
with:
|
||||
name: build-artifacts
|
||||
- name: Unzip artifacts
|
||||
@@ -146,18 +137,16 @@ jobs:
|
||||
runs-on: [ubuntu, macos, windows]
|
||||
runs-on: ${{ matrix.runs-on }}-latest
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js ${{ matrix.node-version }}.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}.x
|
||||
cache: 'npm'
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
npm ci
|
||||
- uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
|
||||
- uses: actions/download-artifact@v7
|
||||
with:
|
||||
name: build-artifacts
|
||||
- name: Unzip artifacts
|
||||
@@ -182,11 +171,9 @@ jobs:
|
||||
browser: [chromium, firefox, webkit]
|
||||
runs-on: ${{ matrix.runs-on }}
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js ${{ matrix.node-version }}.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}.x
|
||||
cache: 'npm'
|
||||
@@ -195,7 +182,7 @@ jobs:
|
||||
npm ci
|
||||
- name: Install playwright
|
||||
run: npx playwright install --with-deps ${{ matrix.browser }}
|
||||
- uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
|
||||
- uses: actions/download-artifact@v7
|
||||
with:
|
||||
name: build-artifacts
|
||||
- name: Unzip artifacts
|
||||
@@ -245,11 +232,9 @@ jobs:
|
||||
matrix:
|
||||
node-version: [22]
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js ${{ matrix.node-version }}.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}.x
|
||||
cache: 'npm'
|
||||
@@ -258,7 +243,7 @@ jobs:
|
||||
npm ci
|
||||
- name: Install playwright
|
||||
run: npx playwright install
|
||||
- uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
|
||||
- uses: actions/download-artifact@v7
|
||||
with:
|
||||
name: build-artifacts
|
||||
- name: Unzip artifacts
|
||||
|
||||
@@ -8,11 +8,6 @@ on:
|
||||
schedule:
|
||||
- cron: '41 17 * * 0'
|
||||
|
||||
permissions:
|
||||
actions: read
|
||||
contents: read
|
||||
security-events: write
|
||||
|
||||
jobs:
|
||||
analyze:
|
||||
name: Analyze
|
||||
@@ -29,14 +24,12 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
uses: actions/checkout@v5
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4
|
||||
uses: github/codeql-action/init@v4
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4
|
||||
uses: github/codeql-action/autobuild@v4
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4
|
||||
uses: github/codeql-action/analyze@v4
|
||||
|
||||
@@ -9,9 +9,6 @@ on:
|
||||
paths:
|
||||
- .github/workflows/copilot-setup-steps.yml
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
copilot-setup-steps:
|
||||
runs-on: ubuntu-latest
|
||||
@@ -21,11 +18,9 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
uses: actions/checkout@v5
|
||||
- name: Use Node.js 22.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 22.x
|
||||
cache: 'npm'
|
||||
|
||||
@@ -6,18 +6,13 @@ on:
|
||||
# without running tests to save time to publish
|
||||
branches: [ "master" ]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
release:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/checkout@v5
|
||||
- name: Use Node.js 22.x
|
||||
uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
|
||||
uses: actions/setup-node@v5
|
||||
with:
|
||||
node-version: 22.x
|
||||
cache: 'npm'
|
||||
|
||||
@@ -255,12 +255,6 @@ Xterm.js is used in many world-class applications to provide great terminal expe
|
||||
- [**Orca**](https://github.com/stablyai/orca): Agentic development environment for 100x builders.
|
||||
- [**4bit**](https://ciembor.github.io/4bit): Terminal Color Scheme Designer.
|
||||
- [**Cate**](https://github.com/0-AI-UG/cate): Open source desktop IDE on an infinite zoomable canvas. Editor, browser, and terminal panels float in spatial space; the terminals are xterm.js with the WebGL addon, backed by node-pty.
|
||||
- [**OmnyShell PWA**](https://github.com/OmnyGrid/omnyshell_web): Web client for [**OmnyShell**](https://github.com/OmnyGrid/omnyshell), featuring remote terminals, a built-in IDE, AI-assisted workflows, and detachable/resumable sessions for seamless browser-based access to nodes.
|
||||
- [**kmux**](https://github.com/kkd927/kmux): A keyboard-centric terminal workspace for running parallel AI coding agents side by side on macOS and Linux.
|
||||
- [**LynxHub**](https://github.com/KindaBrazy/LynxHub): Cross-platform, extensible terminal and browser for AI management.
|
||||
- [**Codeman**](https://github.com/Ark0N/Codeman): Self-hosted mission control for AI coding agents, streaming live tmux sessions to browser and phone.
|
||||
- [**JSVIsion**](https://github.com/blendsdk/jsvision): A Turbo Vision-Style TUI SDK for TypeScript. We use xterm.js in our docs to show live JSVision examples running in a web terminal.
|
||||
- [**BitFun**](https://github.com/GCWing/BitFun): Open-source desktop AI agent whose integrated terminals and read-only terminal output views use xterm.js with the Fit, Web Links, and WebGL addons.
|
||||
- [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
|
||||
|
||||
Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Please add any new contributions to the end of the list.
|
||||
|
||||
@@ -98,7 +98,7 @@ terminal.loadAddon(imageAddon);
|
||||
Set by default, change it with `{iipSupport: true}`.
|
||||
|
||||
The IIP implementation has the following features / restrictions (sequence will silently fail for unmet conditions):
|
||||
- Supported formats: PNG, JPEG, GIF, QOI, WEBP and AVIF
|
||||
- Supported formats: PNG, JPEG, GIF and QOI
|
||||
- No animation support.
|
||||
- Image type hinting is not supported (always deducted from data header).
|
||||
- File download is not supported.
|
||||
@@ -112,13 +112,6 @@ terminal.loadAddon(imageAddon);
|
||||
- ReportCellSize sequence is supported.
|
||||
- Hi-res display support is currently limited (image gets blurred).
|
||||
|
||||
- **Note on IIP image format support**
|
||||
For all image formats except QOI the addon only does the dimension extraction and leaves
|
||||
the image decoding to the underlying browser engine. Note that some formats are implemented
|
||||
and enabled with different constraints by browser vendors, especially newer formats
|
||||
(e.g. under Firefox you might need to change the setting _image.avif.compliance_strictness_ to 0
|
||||
to get broader AVIF support).
|
||||
|
||||
- **Kitty Graphics Support (TGP)**
|
||||
Set by default, change it with `{kittySupport: true}`.
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 198 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 253 KiB |
|
Before Width: | Height: | Size: 84 KiB |
@@ -1,630 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2026 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import type { IDisposable } from '@xterm/xterm';
|
||||
import type { ImageRenderer } from './ImageRenderer';
|
||||
import { ImageTileInfo, type ImageStorage } from './ImageStorage';
|
||||
import type { IImageSpec, ITerminalExt, IResetHandler } from './Types';
|
||||
import type { IMetrics } from 'IIPMetrics';
|
||||
|
||||
|
||||
/**
|
||||
* Note on Firefox Bug (https://bugzilla.mozilla.org/show_bug.cgi?id=2066911)
|
||||
*
|
||||
* ImageDecoder.decode() returns a corrupted VideoFrame,
|
||||
* if the frame was closed from a previous decode.
|
||||
*
|
||||
* Therefore the AnimationManager class implements certain
|
||||
* firefox shims gated by the isFirefox boolean:
|
||||
* - IAnimation.highest tracks highest frameID ever decoded
|
||||
* - whenever frameID is lesser or equal zu highest create new decoder
|
||||
* - raw image bytes need to be held for new decoder
|
||||
*
|
||||
* To be removed once the bug got fixed.
|
||||
*/
|
||||
|
||||
|
||||
interface IAnimation {
|
||||
/** image id in storage */
|
||||
id: number;
|
||||
/** image bytes */
|
||||
data: Blob;
|
||||
/** metrics of the image */
|
||||
metrics: IMetrics;
|
||||
/** width */
|
||||
w: number;
|
||||
/** height */
|
||||
h: number;
|
||||
/** number of frames */
|
||||
numFrames: number;
|
||||
frames: number[];
|
||||
/** ImageDecoder instance */
|
||||
decoder: ImageDecoder | undefined;
|
||||
decoderPromise: Promise<ImageDecoder> | undefined;
|
||||
cache: BitmapBuffer;
|
||||
/** start timestamp */
|
||||
startTime: number | undefined;
|
||||
/** whether a decode task ist scheduled */
|
||||
scheduled: boolean;
|
||||
/** whether the image is in viewport */
|
||||
inViewport: boolean;
|
||||
/** firefox bug helper */
|
||||
highest: number;
|
||||
/** playtime of animation */
|
||||
playtime: number;
|
||||
/** frame timestamps */
|
||||
timestamps: number[];
|
||||
/** frame ID targeted by animation */
|
||||
current: number;
|
||||
/** frame ID currently visible (owned by spec.actual) */
|
||||
actual: number;
|
||||
/** idx of current on frames */
|
||||
frameIdx: number;
|
||||
}
|
||||
|
||||
|
||||
interface IImageDraw {
|
||||
imageId: number;
|
||||
imgSpec: IImageSpec;
|
||||
tileId: number;
|
||||
col: number;
|
||||
row: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
|
||||
interface IBufferSlot {
|
||||
id: number;
|
||||
bm: ImageBitmap | null;
|
||||
}
|
||||
|
||||
|
||||
const enum Constants {
|
||||
BUFFERSIZE = 4,
|
||||
BUFFERMOD = BUFFERSIZE - 1,
|
||||
MAX_FRAMES = 65535
|
||||
}
|
||||
|
||||
|
||||
class BitmapBuffer implements IDisposable {
|
||||
private readonly _d: IBufferSlot[];
|
||||
private _disposed = false;
|
||||
|
||||
constructor() {
|
||||
this._d = Array(Constants.BUFFERSIZE).fill(0).map(() => ({ id: -1, bm: null }));
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
this.clear();
|
||||
this._disposed = true;
|
||||
}
|
||||
|
||||
public peek(id: number): ImageBitmap | null {
|
||||
const slot = this._d[id & Constants.BUFFERMOD];
|
||||
return id === slot.id ? slot.bm : null;
|
||||
}
|
||||
|
||||
public pop(id: number): ImageBitmap | null {
|
||||
const slot = this._d[id & Constants.BUFFERMOD];
|
||||
const res = id === slot.id
|
||||
? slot.bm
|
||||
: (slot.bm?.close(), null);
|
||||
slot.bm = null;
|
||||
slot.id = -1;
|
||||
return res;
|
||||
}
|
||||
|
||||
public push(id: number, bm: ImageBitmap): void {
|
||||
/**
|
||||
* A late decode task might still push bitmaps.
|
||||
* Since push gives the buffer ownership of
|
||||
* the bitmap, we use the isDisposed flag to
|
||||
* free it right away.
|
||||
*/
|
||||
if (this._disposed) {
|
||||
bm.close();
|
||||
return;
|
||||
}
|
||||
const slot = this._d[id & Constants.BUFFERMOD];
|
||||
slot.bm?.close();
|
||||
slot.bm = bm;
|
||||
slot.id = id;
|
||||
}
|
||||
|
||||
public clear(): void {
|
||||
for (let i = 0; i < Constants.BUFFERSIZE; ++i) {
|
||||
const slot = this._d[i];
|
||||
slot.bm?.close();
|
||||
slot.bm = null;
|
||||
slot.id = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// eslint-disable-next-line
|
||||
declare const InstallTrigger: any;
|
||||
|
||||
|
||||
// FIXME: move to AnimationManager ctor to control it from xterm side
|
||||
const isChromium = (window as any).chrome !== undefined;
|
||||
const isFirefox: boolean = typeof InstallTrigger !== 'undefined' || 'MozAppearance' in document.documentElement.style;
|
||||
|
||||
|
||||
/**
|
||||
* Helper to create a read to use ImageDecoder instance from a blob.
|
||||
*/
|
||||
async function BlobDecoder(blob: Blob, type: string): Promise<ImageDecoder> {
|
||||
/**
|
||||
* Dealing with browser bugs - in theory this should be possible:
|
||||
*
|
||||
* const decoder = new ImageDecoder({ data: blob.stream(), type, preferAnimation: true });
|
||||
* await decoder.tracks.ready;
|
||||
* return decoder;
|
||||
*
|
||||
* But this straightforward handling with blob.stream() uncovers several bugs:
|
||||
* 1. Chromium: Fails to stream chunked blobs reliably.
|
||||
* 2. Firefox: Native lifecycle race condition. Closing an old decoder breaks the
|
||||
* shared underlying native stream of the same blob for new decoders, throwing
|
||||
* an uncatchable "Closed decoder" DOMException during `tracks.ready`.
|
||||
*
|
||||
* So we use a safer approach by pulling full raw bytes over first and transferring ownership.
|
||||
*/
|
||||
const data = await blob.arrayBuffer();
|
||||
const decoder = new ImageDecoder({ data, type, preferAnimation: true, transfer: [data] });
|
||||
await decoder.tracks.ready;
|
||||
if (isChromium && type === 'image/avif') {
|
||||
// chromium bug: random frame access in AVIF is
|
||||
// only possible after reading frame 0
|
||||
const res = await decoder.decode({ frameIndex: 0 });
|
||||
res.image.close();
|
||||
}
|
||||
return decoder;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* AnimationManager - orchestrates rendering of animated images.
|
||||
*
|
||||
* Current Workflow
|
||||
* When IIPMetrics.imageType reports an animated image the IIP handler
|
||||
* stores the image in the storage and registers an animation of it.
|
||||
*
|
||||
* The animation manager works mostly self-contained:
|
||||
* - RAF loop
|
||||
* - 3 frame ahead decoding
|
||||
* - own bitmap ownership handling
|
||||
*
|
||||
* There are a few intersections with the ImageStorage and the ImageRenderer,
|
||||
* which still need to be consolidated (TODOs):
|
||||
* - ImageStorage: API for announcing memory state, better eviction strategy
|
||||
* - ImageRenderer: API for better drawing primitives
|
||||
*
|
||||
* In particular the ownership model of ImageSpec bitmaps (actual and orig)
|
||||
* needs a better story. We prolly need here an API to flip bitmaps.
|
||||
*/
|
||||
export class AnimationManager implements IDisposable, IResetHandler {
|
||||
private _animations = new Map<number, IAnimation>();
|
||||
private _animationFrame: number | undefined = undefined;
|
||||
private _draws: IImageDraw[] = [];
|
||||
|
||||
|
||||
constructor(
|
||||
private _storage: ImageStorage,
|
||||
private _renderer: ImageRenderer,
|
||||
private _terminal: ITerminalExt
|
||||
) {}
|
||||
|
||||
|
||||
private _requestAF(cb: FrameRequestCallback): number | undefined {
|
||||
return this._terminal._core._coreBrowserService?.window.requestAnimationFrame(cb);
|
||||
}
|
||||
|
||||
|
||||
private _cancelAF(id: number): void | undefined {
|
||||
return this._terminal._core._coreBrowserService?.window.cancelAnimationFrame(id);
|
||||
}
|
||||
|
||||
|
||||
public dispose(): void {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Reset handler.
|
||||
* Stops all animations and frees all ressources.
|
||||
*/
|
||||
public reset(): void {
|
||||
for (const anim of this._animations.values()) {
|
||||
anim.inViewport = false;
|
||||
this._closeDecoder(anim);
|
||||
anim.cache.dispose();
|
||||
}
|
||||
this._animations.clear();
|
||||
this._draws = [];
|
||||
if (this._animationFrame) this._cancelAF(this._animationFrame);
|
||||
this._animationFrame = undefined;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Main hook to register an animated image for animation.
|
||||
*
|
||||
* @param id Image ID of the image storage the image was registered under.
|
||||
* @param data Raw data bytes of the image.
|
||||
* @param metrics Metrics of the image as returned by IIPMetrics.imageType.
|
||||
* @param w Output width in pixel.
|
||||
* @param h Output height in pixel.
|
||||
*/
|
||||
public async registerAnimation(id: number, data: Blob, metrics: IMetrics, w: number, h: number): Promise<void> {
|
||||
let decoder = await BlobDecoder(data, metrics.mime);
|
||||
const track = decoder.tracks.selectedTrack;
|
||||
if (!track || track.frameCount < 2) {
|
||||
decoder.close();
|
||||
return;
|
||||
}
|
||||
|
||||
const frameCount = Math.min(track.frameCount, Constants.MAX_FRAMES);
|
||||
const frames: number[] = [];
|
||||
const timestamps: number[] = [];
|
||||
const durations: number[] = [];
|
||||
let elapsed = 0;
|
||||
|
||||
for (let i = 0; i < frameCount; i++) {
|
||||
try {
|
||||
const result = await decoder.decode({ frameIndex: i });
|
||||
const frame = result.image;
|
||||
const width = frame.displayWidth;
|
||||
const height = frame.displayHeight;
|
||||
const duration = (frame.duration ?? 0) / 1000;
|
||||
frame.close();
|
||||
// skip wrong dimensions and zero duration
|
||||
if (width !== metrics.width || height !== metrics.height || !duration) {
|
||||
if (durations.length) {
|
||||
durations[durations.length - 1] += duration;
|
||||
elapsed += duration;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
frames.push(i);
|
||||
timestamps.push(elapsed);
|
||||
durations.push(duration);
|
||||
elapsed += duration;
|
||||
} catch {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* FIXME: still needs a consolidation of short frame durations:
|
||||
* We don't track v-sync, but just decode the next 3 follow-up frames.
|
||||
* This creates nonsense decoder pressure decoding frames,
|
||||
* that effectively never make it to the screen.
|
||||
* Currently our shortest time resolution is 1ms,
|
||||
* thus with 60 fps we would decode 15 1ms frames for no reason.
|
||||
* We prolly should introduce a lower bound of 8ms:
|
||||
* - in sync with 120 fps
|
||||
* - only every second frame is nonsense with 60 fps
|
||||
*/
|
||||
|
||||
if (frames.length < 2 || elapsed <= 0) {
|
||||
decoder.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (isFirefox) {
|
||||
decoder.close();
|
||||
decoder = await BlobDecoder(data, metrics.mime);
|
||||
}
|
||||
|
||||
const anim: IAnimation = {
|
||||
id, data, w, h, decoder,
|
||||
metrics,
|
||||
numFrames: frames.length,
|
||||
decoderPromise: undefined,
|
||||
cache: new BitmapBuffer(),
|
||||
frames,
|
||||
startTime: undefined,
|
||||
current: 0,
|
||||
actual: 0,
|
||||
scheduled: false, // set by _schedule
|
||||
inViewport: true, // start with active prefetching
|
||||
highest: -1,
|
||||
playtime: elapsed,
|
||||
timestamps,
|
||||
frameIdx: 0
|
||||
};
|
||||
this._animations.set(id, anim);
|
||||
this.viewportUpdated();
|
||||
// early schedule to give decoder time to fill the cache before RAF
|
||||
this._schedule(anim);
|
||||
this._animationFrame ??= this._requestAF(this._loop);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Remove the animation for the given image id.
|
||||
*/
|
||||
public unregisterAnimation(id: number): void {
|
||||
const a = this._animations.get(id);
|
||||
if (a) {
|
||||
a.inViewport = false;
|
||||
this._closeDecoder(a);
|
||||
a.cache.dispose();
|
||||
this._animations.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* onRender handler.
|
||||
* Scratches the viewport buffer to collect draws for animation RAF
|
||||
* and to pause/resume invisible/visible animations.
|
||||
*/
|
||||
public viewportUpdated(_range?: { start: number, end: number }): void {
|
||||
const rows = this._terminal.rows;
|
||||
const cols = this._terminal.cols;
|
||||
const buffer = this._terminal._core.buffer;
|
||||
const actives: Set<number> = new Set();
|
||||
this._draws = [];
|
||||
for (let row = 0; row < rows; ++row) {
|
||||
const line = buffer.lines.get(row + buffer.ydisp);
|
||||
if (!line) break;
|
||||
for (let col = 0; col < cols; ++col) {
|
||||
const e = line.getExtended(col)?.payload;
|
||||
if (e instanceof ImageTileInfo) {
|
||||
const imageId = e.imageId;
|
||||
if (imageId === undefined || imageId === -1) {
|
||||
continue;
|
||||
}
|
||||
const imgSpec = this._storage.getImage(imageId);
|
||||
if (e.tileId !== -1) {
|
||||
const startTile = e.tileId;
|
||||
const startCol = col;
|
||||
let count = 1;
|
||||
/**
|
||||
* merge tiles to the right into a single draw call, if:
|
||||
* - not at end of line
|
||||
* - cell has same image id
|
||||
* - cell has consecutive tile id
|
||||
*/
|
||||
while (++col < cols) {
|
||||
const nextE = line.getExtended(col)?.payload;
|
||||
if (!(nextE instanceof ImageTileInfo) || nextE.imageId !== imageId || nextE.tileId !== startTile + count) {
|
||||
break;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
col--;
|
||||
if (imgSpec && this._animations.has(imageId)) {
|
||||
this._draws.push({ imageId, imgSpec, tileId: startTile, col: startCol, row, count });
|
||||
actives.add(imageId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this._updateAnimations(actives);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the frameIdx for elapsed time.
|
||||
* Note: The returned value is not the frame ID,
|
||||
* but the index for IAnimation.frames.
|
||||
*/
|
||||
private _timedFrameIdx(a: IAnimation, elapsed: number): number {
|
||||
elapsed %= a.playtime;
|
||||
let low = 0;
|
||||
let high = a.timestamps.length - 1;
|
||||
while (low <= high) {
|
||||
const mid = (low + high) >> 1;
|
||||
const startTime = a.timestamps[mid];
|
||||
if (elapsed < startTime) {
|
||||
high = mid - 1;
|
||||
} else {
|
||||
if (mid === a.timestamps.length - 1 || elapsed < a.timestamps[mid + 1]) {
|
||||
return mid;
|
||||
}
|
||||
low = mid + 1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pause/resume decoding from viewport changes.
|
||||
*/
|
||||
private _updateAnimations(visibles: Set<number>): void {
|
||||
for (const [id, anim] of this._animations) {
|
||||
const isVisible = visibles.has(id);
|
||||
if (isVisible && !anim.inViewport) {
|
||||
/**
|
||||
* There are two strategies possible here:
|
||||
*
|
||||
* 1. Resume decoding and pumping frames as soon as possible.
|
||||
* 2. Delay resuming further by a debounce to prevent flooding
|
||||
* new decoder instances on heavy scrolling.
|
||||
*
|
||||
* Currently the code below does 1. as the impact is rather
|
||||
* small from tests and gives the better user experience.
|
||||
*/
|
||||
anim.inViewport = true;
|
||||
const frameIdx = this._timedFrameIdx(anim, performance.now() - anim.startTime!);
|
||||
anim.frameIdx = frameIdx;
|
||||
anim.current = anim.frames[frameIdx];
|
||||
if (!anim.decoder && !anim.decoderPromise) {
|
||||
anim.decoderPromise = BlobDecoder(anim.data, anim.metrics.mime);
|
||||
}
|
||||
this._schedule(anim);
|
||||
} else if (!isVisible && anim.inViewport) {
|
||||
anim.inViewport = false;
|
||||
anim.cache.clear();
|
||||
this._closeDecoder(anim);
|
||||
}
|
||||
}
|
||||
if (visibles.size && this._animationFrame === undefined) {
|
||||
this._animationFrame = this._requestAF(this._loop);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* RAF for animations in viewport.
|
||||
*/
|
||||
private _loop = (ts: number): void => {
|
||||
if (!this._animations.size) {
|
||||
this._animationFrame = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
let mustRender = false;
|
||||
let anyVisible = false;
|
||||
|
||||
for (const anim of this._animations.values()) {
|
||||
if (!anim.inViewport) continue;
|
||||
|
||||
const spec = this._storage.getImage(anim.id);
|
||||
if (!spec) {
|
||||
this.unregisterAnimation(anim.id);
|
||||
continue;
|
||||
}
|
||||
anyVisible = true;
|
||||
anim.startTime ??= ts;
|
||||
const frameIdx = this._timedFrameIdx(anim, ts - anim.startTime);
|
||||
anim.frameIdx = frameIdx;
|
||||
const current = anim.frames[frameIdx];
|
||||
|
||||
if (current !== anim.current) {
|
||||
anim.current = current;
|
||||
const bm = anim.cache.pop(current);
|
||||
if (bm) {
|
||||
// FIXME: setting spec.actual delegates draws from onRender back to ImageStorage.render
|
||||
// --> should be avoided to prevent double draws within same AF
|
||||
// idea: create a mutex on image spec to tell storage.render to skip
|
||||
|
||||
// by swapping spec.actual we take ownership, thus have to close it here
|
||||
// but only if we have more than 4 frames (ringbuffer size is 4)
|
||||
// for <= 4 frames we move the bitmap back into cache
|
||||
// FIXME: create a bitmap swapping API in storage
|
||||
if (spec.actual instanceof ImageBitmap) {
|
||||
if (anim.numFrames > Constants.BUFFERSIZE) {
|
||||
spec.actual.close();
|
||||
} else {
|
||||
anim.cache.push(anim.actual, spec.actual);
|
||||
}
|
||||
}
|
||||
spec.actual = bm;
|
||||
anim.actual = current;
|
||||
mustRender = true;
|
||||
}
|
||||
this._schedule(anim);
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: merge clears and draws into col x row rects
|
||||
if (mustRender) {
|
||||
for (let i = 0; i < this._draws.length; ++i) {
|
||||
const d = this._draws[i];
|
||||
this._renderer.clearLines(d.row, d.row);
|
||||
this._renderer.draw(d.imgSpec, d.tileId, d.col, d.row, d.count);
|
||||
}
|
||||
}
|
||||
this._animationFrame = anyVisible ? this._requestAF(this._loop) : undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Try to schedule frame decoding.
|
||||
*/
|
||||
private _schedule(a: IAnimation): void {
|
||||
if (!a.scheduled) {
|
||||
let needsSchedule = false;
|
||||
// FIXME: do we need a == 4 test too?
|
||||
if (a.numFrames > 3) {
|
||||
needsSchedule =
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 1) % a.numFrames]) ||
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 2) % a.numFrames]) ||
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 3) % a.numFrames]);
|
||||
} else if (a.numFrames === 3) {
|
||||
needsSchedule =
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 1) % a.numFrames]) ||
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 2) % a.numFrames]);
|
||||
} else {
|
||||
needsSchedule =
|
||||
!a.cache.peek(a.frames[(a.frameIdx + 1) % a.numFrames]);
|
||||
}
|
||||
if (needsSchedule) {
|
||||
a.scheduled = true;
|
||||
setTimeout(() => this._decode(a), 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Decode up to next 3 frames.
|
||||
*/
|
||||
private async _decode(a: IAnimation): Promise<void> {
|
||||
if (!a.inViewport) {
|
||||
a.scheduled = false;
|
||||
return;
|
||||
}
|
||||
if (!a.decoder) {
|
||||
const decP = a.decoderPromise;
|
||||
a.decoderPromise = undefined;
|
||||
a.decoder = await (decP ?? BlobDecoder(a.data, a.metrics.mime));
|
||||
}
|
||||
const n1 = a.frames[(a.frameIdx + 1) % a.numFrames];
|
||||
const n2 = a.frames[(a.frameIdx + 2) % a.numFrames];
|
||||
const n3 = a.frames[(a.frameIdx + 3) % a.numFrames];
|
||||
for (const n of [n1, n2, n3]) {
|
||||
if (!a.cache.peek(n)) {
|
||||
if (isFirefox) {
|
||||
if (n <= a.highest) {
|
||||
a.highest = -1;
|
||||
a.decoder?.close();
|
||||
a.decoder = await BlobDecoder(a.data, a.metrics.mime);
|
||||
}
|
||||
a.highest = Math.max(n, a.highest);
|
||||
}
|
||||
let res: ImageDecodeResult;
|
||||
try {
|
||||
res = await a.decoder.decode({ frameIndex: n });
|
||||
} catch { continue; }
|
||||
let bm: ImageBitmap;
|
||||
try {
|
||||
// FIXME: we should not resize here yet
|
||||
// BETTER: rescale during draw:
|
||||
// - eases the GPU druing decoding
|
||||
// - rescales only what needs to be drawn
|
||||
// --> funneling down
|
||||
// FIXME: needs changes in image spec and rendering functions
|
||||
bm = await createImageBitmap(res.image, { resizeWidth: a.w, resizeHeight: a.h });
|
||||
} catch { continue; } finally { res?.image?.close(); }
|
||||
if (!a.inViewport) {
|
||||
bm.close();
|
||||
break;
|
||||
}
|
||||
a.cache.push(n, bm);
|
||||
}
|
||||
}
|
||||
a.scheduled = false;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Close the decoder defensively.
|
||||
*/
|
||||
private _closeDecoder(a: IAnimation): void {
|
||||
const decoder = a.decoder;
|
||||
a.decoder = undefined;
|
||||
try { decoder?.close(); } catch {}
|
||||
const decP = a.decoderPromise;
|
||||
a.decoderPromise = undefined;
|
||||
decP?.then(dec => dec && dec !== decoder ? dec.close() : null).catch(() => {});
|
||||
}
|
||||
}
|
||||
@@ -2,15 +2,14 @@
|
||||
* Copyright (c) 2023 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
import type { IImageAddonOptions, IOscHandler, IResetHandler, ITerminalExt } from './Types';
|
||||
import { IImageAddonOptions, IOscHandler, IResetHandler, ITerminalExt } from './Types';
|
||||
import { ImageRenderer } from './ImageRenderer';
|
||||
import type { IIPImageStorage } from './IIPImageStorage';
|
||||
import { IIPImageStorage } from './IIPImageStorage';
|
||||
import { CELL_SIZE_DEFAULT } from './ImageStorage';
|
||||
import Base64Decoder from 'xterm-wasm-parts/lib/base64/Base64Decoder.wasm';
|
||||
import QoiDecoder from 'xterm-wasm-parts/lib/qoi/QoiDecoder.wasm';
|
||||
import { HeaderParser, IHeaderFields, HeaderState, SequenceType } from './IIPHeaderParser';
|
||||
import { imageType, UNSUPPORTED_TYPE } from './IIPMetrics';
|
||||
import type { AnimationManager } from 'AnimationManager';
|
||||
|
||||
// Local const enum mirror - esbuild can't inline const enums from external packages
|
||||
const enum DecoderConst {
|
||||
@@ -40,6 +39,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
private _header: IHeaderFields = DEFAULT_HEADER;
|
||||
private _dec: Base64Decoder;
|
||||
private _qoiDec: QoiDecoder;
|
||||
private _metrics = UNSUPPORTED_TYPE;
|
||||
private _isMultipart = false;
|
||||
private _abortMulti = false;
|
||||
|
||||
@@ -47,8 +47,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
private readonly _opts: IImageAddonOptions,
|
||||
private readonly _renderer: ImageRenderer,
|
||||
private readonly _storage: IIPImageStorage,
|
||||
private readonly _coreTerminal: ITerminalExt,
|
||||
private readonly _aniManager: AnimationManager | undefined
|
||||
private readonly _coreTerminal: ITerminalExt
|
||||
) {
|
||||
const maxEncodedBytes = Math.ceil(this._opts.iipSizeLimit * 4 / 3);
|
||||
const initialBytes = Math.min(DecoderConst.INITIAL_DATA, maxEncodedBytes);
|
||||
@@ -64,6 +63,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
|
||||
public start(): void {
|
||||
this._aborted = false;
|
||||
this._metrics = UNSUPPORTED_TYPE;
|
||||
this._hp.reset();
|
||||
}
|
||||
|
||||
@@ -120,14 +120,14 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
|
||||
if (seqType === SequenceType.REPORTCELLSIZE) {
|
||||
// OSC 1337 ; ReportCellSize=[height];[width];[scale] ST
|
||||
let w = CELL_SIZE_DEFAULT.width;
|
||||
let h = CELL_SIZE_DEFAULT.height;
|
||||
let width = CELL_SIZE_DEFAULT.width;
|
||||
let height = CELL_SIZE_DEFAULT.height;
|
||||
if (this._renderer.dimensions) {
|
||||
w = this._renderer.dimensions.css.canvas.width / this._coreTerminal.cols;
|
||||
h = this._renderer.dimensions.css.canvas.height / this._coreTerminal.rows;
|
||||
width = this._renderer.dimensions.css.canvas.width / this._coreTerminal.cols;
|
||||
height = this._renderer.dimensions.css.canvas.height / this._coreTerminal.rows;
|
||||
}
|
||||
const scale = this._coreTerminal._core._coreBrowserService?.dpr ?? 1;
|
||||
const report = `\x1b]1337;ReportCellSize=${h.toFixed(3)};${w.toFixed(3)};${scale.toFixed(3)}\x1b\\`;
|
||||
const report = `\x1b]1337;ReportCellSize=${height.toFixed(3)};${width.toFixed(3)};${scale.toFixed(3)}\x1b\\`;
|
||||
this._coreTerminal.input(report, false);
|
||||
return true;
|
||||
}
|
||||
@@ -154,24 +154,17 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
|
||||
// early exit condition chain
|
||||
let cond: number | boolean;
|
||||
let metrics = UNSUPPORTED_TYPE;
|
||||
if (cond = success) {
|
||||
if (cond = !this._dec.end()) {
|
||||
metrics = imageType(this._dec.data8);
|
||||
if (cond = metrics.mime !== 'unsupported') {
|
||||
w = metrics.width;
|
||||
h = metrics.height;
|
||||
this._metrics = imageType(this._dec.data8);
|
||||
if (cond = this._metrics.mime !== 'unsupported') {
|
||||
w = this._metrics.width;
|
||||
h = this._metrics.height;
|
||||
if (cond = w && h && w * h < this._opts.pixelLimit) {
|
||||
[w, h] = this._resize(w, h).map(Math.floor);
|
||||
cond = w && h && w * h < this._opts.pixelLimit;
|
||||
} else {
|
||||
console.warn(`IIP: image dimension issue ${metrics.width}x${metrics.height}`);
|
||||
}
|
||||
} else {
|
||||
console.warn('IIP: unsupported image type');
|
||||
}
|
||||
} else {
|
||||
console.warn('IIP: error during BASE64 decoding');
|
||||
}
|
||||
}
|
||||
if (!cond) {
|
||||
@@ -180,7 +173,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
}
|
||||
|
||||
let blob: Blob | ImageData;
|
||||
if (metrics.mime === 'image/qoi') {
|
||||
if (this._metrics.mime === 'image/qoi') {
|
||||
const data = this._qoiDec.decode(this._dec.data8);
|
||||
blob = new ImageData(
|
||||
new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength),
|
||||
@@ -197,20 +190,12 @@ export class IIPHandler implements IOscHandler, IResetHandler {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
blob = new Blob([this._dec.data8], { type: metrics.mime });
|
||||
blob = new Blob([this._dec.data8], { type: this._metrics.mime });
|
||||
}
|
||||
this._dec.release();
|
||||
return createImageBitmap(blob, { resizeWidth: w, resizeHeight: h })
|
||||
.then(bm => {
|
||||
const id = this._storage.addImage(bm);
|
||||
if (this._aniManager && metrics.animated) {
|
||||
this._aniManager.registerAnimation(id, blob as Blob, metrics, w, h).catch(() => {});
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.catch(e => {
|
||||
console.warn(`IIP: decoding error ${metrics.mime} ${metrics.width}x${metrics.height}`, e);
|
||||
// FIXME: try ImageDecoder here instead (e.g. some AVIF work in Firefox)
|
||||
this._storage.addImage(bm);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export class IIPImageStorage {
|
||||
* Add an IIP image to storage.
|
||||
* Always uses scrolling mode — cursor advances past the image.
|
||||
*/
|
||||
public addImage(img: HTMLCanvasElement | ImageBitmap): number {
|
||||
return this._storage.addImage(img, this._addImageOpts);
|
||||
public addImage(img: HTMLCanvasElement | ImageBitmap): void {
|
||||
this._storage.addImage(img, this._addImageOpts);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,48 +12,26 @@ const fs = require('fs');
|
||||
|
||||
|
||||
const TEST_IMAGES: [string, IMetrics][] = [
|
||||
['w3c_home_256.gif', { mime: 'image/gif', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_256.jpg', { mime: 'image/jpeg', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_256.png', { mime: 'image/png', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_2.gif', { mime: 'image/gif', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_2.jpg', { mime: 'image/jpeg', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_2.png', { mime: 'image/png', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_animation.gif', { mime: 'image/gif', width: 72, height: 48, animated: true }],
|
||||
['w3c_home.gif', { mime: 'image/gif', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_gray.gif', { mime: 'image/gif', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_gray.jpg', { mime: 'image/jpeg', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_gray.png', { mime: 'image/png', width: 72, height: 48, animated: false }],
|
||||
['w3c_home.jpg', { mime: 'image/jpeg', width: 72, height: 48, animated: false }],
|
||||
['w3c_home.png', { mime: 'image/png', width: 72, height: 48, animated: false }],
|
||||
['w3c_home_noexif.jpg', { mime: 'image/jpeg', width: 72, height: 48, animated: false }],
|
||||
['spinfox.png', { mime: 'image/png', width: 148, height: 148, animated: true }],
|
||||
['iphone_hdr_YES.jpg', { mime: 'image/jpeg', width: 3264, height: 2448, animated: false }],
|
||||
['nikon-e950.jpg', { mime: 'image/jpeg', width: 800, height: 600, animated: false }],
|
||||
['agfa-makernotes.jpg', { mime: 'image/jpeg', width: 8, height: 8, animated: false }],
|
||||
['sony-alpha-6000.jpg', { mime: 'image/jpeg', width: 6000, height: 4000, animated: false }],
|
||||
['dice.qoi', { mime: 'image/qoi', width: 800, height: 600, animated: false }],
|
||||
// VP8
|
||||
['1.webp', { mime: 'image/webp', width: 550, height: 368, animated: false }],
|
||||
['2.webp', { mime: 'image/webp', width: 550, height: 404, animated: false }],
|
||||
['3.webp', { mime: 'image/webp', width: 1280, height: 720, animated: false }],
|
||||
['4.webp', { mime: 'image/webp', width: 1024, height: 772, animated: false }],
|
||||
['5.webp', { mime: 'image/webp', width: 1024, height: 752, animated: false }],
|
||||
// VP8X
|
||||
['1_webp_a.webp', { mime: 'image/webp', width: 400, height: 301, animated: false }],
|
||||
['2_webp_a.webp', { mime: 'image/webp', width: 386, height: 395, animated: false }],
|
||||
['3_webp_a.webp', { mime: 'image/webp', width: 800, height: 600, animated: false }],
|
||||
['4_webp_a.webp', { mime: 'image/webp', width: 421, height: 163, animated: false }],
|
||||
['5_webp_a.webp', { mime: 'image/webp', width: 300, height: 300, animated: false }],
|
||||
// VP8L
|
||||
['1_webp_ll.webp', { mime: 'image/webp', width: 400, height: 301, animated: false }],
|
||||
['2_webp_ll.webp', { mime: 'image/webp', width: 386, height: 395, animated: false }],
|
||||
['3_webp_ll.webp', { mime: 'image/webp', width: 800, height: 600, animated: false }],
|
||||
['4_webp_ll.webp', { mime: 'image/webp', width: 421, height: 163, animated: false }],
|
||||
['5_webp_ll.webp', { mime: 'image/webp', width: 300, height: 300, animated: false }],
|
||||
// some AVIF test images
|
||||
['fox.profile2.12bpc.yuv444.odd-width.odd-height.avif', { mime: 'image/avif', width: 1203, height: 799, animated: false }],
|
||||
['hato.profile0.8bpc.yuv420.avif', { mime: 'image/avif', width: 3082, height: 2048, animated: false }],
|
||||
['kimono.crop.avif', { mime: 'image/avif', width: 722, height: 1024, animated: false }],
|
||||
['w3c_home_256.gif', { mime: 'image/gif', width: 72, height: 48 }],
|
||||
['w3c_home_256.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
|
||||
['w3c_home_256.png', { mime: 'image/png', width: 72, height: 48 }],
|
||||
['w3c_home_2.gif', { mime: 'image/gif', width: 72, height: 48 }],
|
||||
['w3c_home_2.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
|
||||
['w3c_home_2.png', { mime: 'image/png', width: 72, height: 48 }],
|
||||
['w3c_home_animation.gif', { mime: 'image/gif', width: 72, height: 48 }],
|
||||
['w3c_home.gif', { mime: 'image/gif', width: 72, height: 48 }],
|
||||
['w3c_home_gray.gif', { mime: 'image/gif', width: 72, height: 48 }],
|
||||
['w3c_home_gray.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
|
||||
['w3c_home_gray.png', { mime: 'image/png', width: 72, height: 48 }],
|
||||
['w3c_home.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
|
||||
['w3c_home.png', { mime: 'image/png', width: 72, height: 48 }],
|
||||
['w3c_home_noexif.jpg', { mime: 'image/jpeg', width: 72, height: 48 }],
|
||||
['spinfox.png', { mime: 'image/png', width: 148, height: 148 }],
|
||||
['iphone_hdr_YES.jpg', { mime: 'image/jpeg', width: 3264, height: 2448 }],
|
||||
['nikon-e950.jpg', { mime: 'image/jpeg', width: 800, height: 600 }],
|
||||
['agfa-makernotes.jpg', { mime: 'image/jpeg', width: 8, height: 8 }],
|
||||
['sony-alpha-6000.jpg', { mime: 'image/jpeg', width: 6000, height: 4000 }],
|
||||
['dice.qoi', { mime: 'image/qoi', width: 800, height: 600 }],
|
||||
];
|
||||
|
||||
|
||||
|
||||
@@ -4,140 +4,62 @@
|
||||
*/
|
||||
|
||||
|
||||
export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'image/qoi' | 'image/webp' | 'image/avif' | 'unsupported' | '';
|
||||
export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'image/qoi' | 'unsupported' | '';
|
||||
|
||||
export interface IMetrics {
|
||||
mime: ImageType;
|
||||
width: number;
|
||||
height: number;
|
||||
animated: boolean;
|
||||
}
|
||||
|
||||
export const UNSUPPORTED_TYPE: IMetrics = {
|
||||
mime: 'unsupported',
|
||||
width: 0,
|
||||
height: 0,
|
||||
animated: false
|
||||
height: 0
|
||||
};
|
||||
|
||||
export function imageType(d: Uint8Array): IMetrics {
|
||||
if (d.length < 32) {
|
||||
if (d.length < 24) {
|
||||
return UNSUPPORTED_TYPE;
|
||||
}
|
||||
const d32 = new Uint32Array(d.buffer, d.byteOffset, 8);
|
||||
const d32 = new Uint32Array(d.buffer, d.byteOffset, 6);
|
||||
// PNG: 89 50 4E 47 0D 0A 1A 0A (8 first bytes == magic number for PNG)
|
||||
// + first chunk must be IHDR
|
||||
if (d32[0] === 0x474E5089 && d32[1] === 0x0A1A0A0D && d32[3] === 0x52444849) {
|
||||
return {
|
||||
mime: 'image/png',
|
||||
width: d[16] << 24 | d[17] << 16 | d[18] << 8 | d[19],
|
||||
height: d[20] << 24 | d[21] << 16 | d[22] << 8 | d[23],
|
||||
animated: isAPNG(d)
|
||||
width: d[16] << 24 | d[17] << 16 | d[18] << 8 | d[19],
|
||||
height: d[20] << 24 | d[21] << 16 | d[22] << 8 | d[23]
|
||||
};
|
||||
}
|
||||
// JPEG: FF D8 FF
|
||||
if (d[0] === 0xFF && d[1] === 0xD8 && d[2] === 0xFF) {
|
||||
const [width, height] = jpgSize(d);
|
||||
return { mime: 'image/jpeg', width, height, animated: false };
|
||||
return { mime: 'image/jpeg', width, height };
|
||||
}
|
||||
// GIF: GIF87a or GIF89a
|
||||
if (d32[0] === 0x38464947 && (d[4] === 0x37 || d[4] === 0x39) && d[5] === 0x61) {
|
||||
return {
|
||||
mime: 'image/gif',
|
||||
width: d[6] | d[7] << 8,
|
||||
height: d[8] | d[9] << 8,
|
||||
animated: isAGIF(d)
|
||||
width: d[7] << 8 | d[6],
|
||||
height: d[9] << 8 | d[8]
|
||||
};
|
||||
}
|
||||
// QOI: qoif
|
||||
if (d32[0] === 0x66696F71) {
|
||||
return {
|
||||
mime: 'image/qoi',
|
||||
width: d[4] << 24 | d[5] << 16 | d[ 6] << 8 | d[ 7],
|
||||
height: d[8] << 24 | d[9] << 16 | d[10] << 8 | d[11],
|
||||
animated: false
|
||||
width: d[4] << 24 | d[5] << 16 | d[6] << 8 | d[7],
|
||||
height: d[8] << 24 | d[9] << 16 | d[10] << 8 | d[11]
|
||||
};
|
||||
}
|
||||
// WEBP: RIFF | xxxx | WEBP | VP8x
|
||||
if (d32[0] === 0x46464952 && d32[2] === 0x50424557 && (d32[3] & 0xFFFFFF) === 0x385056) {
|
||||
switch (d[15]) {
|
||||
case 0x58: // Extended WebP VP8X --> "X"
|
||||
return {
|
||||
mime: 'image/webp',
|
||||
width: (d[24] | d[25] << 8 | d[26] << 16) + 1,
|
||||
height: (d[27] | d[28] << 8 | d[29] << 16) + 1,
|
||||
animated: (d[20] & 0x02) !== 0
|
||||
};
|
||||
case 0x4C: // Lossless WebP VP8L --> "L"
|
||||
if (d[20] !== 0x2f) return UNSUPPORTED_TYPE;
|
||||
const dim = d[21] | d[22] << 8 | d[23] << 16 | d[24] << 24;
|
||||
return {
|
||||
mime: 'image/webp',
|
||||
width: (dim & 0x3FFF) + 1,
|
||||
height: (dim >>> 14 & 0x3FFF) + 1,
|
||||
animated: false
|
||||
};
|
||||
case 0x20: // Lossy WebP VP8 --> " "
|
||||
if (d[23] !== 0x9d || d[24] !== 0x01 || d[25] !== 0x2a) return UNSUPPORTED_TYPE;
|
||||
return {
|
||||
mime: 'image/webp',
|
||||
width: (d[26] | d[27] << 8) & 0x3FFF,
|
||||
height: (d[28] | d[29] << 8) & 0x3FFF,
|
||||
animated: false
|
||||
};
|
||||
}
|
||||
return UNSUPPORTED_TYPE;
|
||||
}
|
||||
// AVIF: Box size | ftyp | avif/avis
|
||||
if (d32[1] === 0x70797466 && (d32[2] === 0x66697661 || d32[2] === 0x73697661)) {
|
||||
let pos = -1;
|
||||
let anim = d32[2] === 0x73697661; // avis is meant to be animated
|
||||
// search for boxes within first 1024 bytes
|
||||
const limit = Math.min(d.length - 16, 1024);
|
||||
for (let i = 8; i < limit; i++) {
|
||||
// scan for ispe for dimensions
|
||||
if (pos === -1 && d[i] === 0x69 && d[i + 1] === 0x73 && d[i + 2] === 0x70 && d[i + 3] === 0x65) {
|
||||
pos = i;
|
||||
}
|
||||
// scan for stsz or moov
|
||||
if (!anim) {
|
||||
const isStsz = d[i] === 0x73 && d[i + 1] === 0x74 && d[i + 2] === 0x73 && d[i + 3] === 0x7A;
|
||||
const isMoov = d[i] === 0x6D && d[i + 1] === 0x6F && d[i + 2] === 0x6F && d[i + 3] === 0x76;
|
||||
if (isStsz || isMoov) {
|
||||
anim = true;
|
||||
}
|
||||
}
|
||||
if (pos !== -1 && anim) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pos !== -1) {
|
||||
// dimensions are in BE at +8 (width) at +12 (height)
|
||||
const width =
|
||||
d[pos + 8] << 24 |
|
||||
d[pos + 9] << 16 |
|
||||
d[pos + 10] << 8 |
|
||||
d[pos + 11];
|
||||
const height =
|
||||
d[pos + 12] << 24 |
|
||||
d[pos + 13] << 16 |
|
||||
d[pos + 14] << 8 |
|
||||
d[pos + 15];
|
||||
if (width > 0 && height > 0) {
|
||||
return { mime: 'image/avif', width, height, animated: anim };
|
||||
}
|
||||
}
|
||||
return UNSUPPORTED_TYPE;
|
||||
}
|
||||
return UNSUPPORTED_TYPE;
|
||||
}
|
||||
|
||||
|
||||
function jpgSize(d: Uint8Array): [number, number] {
|
||||
const len = d.length;
|
||||
let i = 4;
|
||||
let blockLength = d[i] << 8 | d[i + 1];
|
||||
if (blockLength < 2) return [0, 0];
|
||||
while (true) {
|
||||
i += blockLength;
|
||||
if (i >= len) {
|
||||
@@ -158,78 +80,5 @@ function jpgSize(d: Uint8Array): [number, number] {
|
||||
}
|
||||
i += 2;
|
||||
blockLength = d[i] << 8 | d[i + 1];
|
||||
if (blockLength < 2) return [0, 0];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function isAGIF(data: Uint8Array): boolean {
|
||||
let pos = 10;
|
||||
const gPacked = data[pos];
|
||||
const hasGP = (gPacked & 0x80) !== 0;
|
||||
pos += 3;
|
||||
if (hasGP) {
|
||||
const gpSize = 2 << (gPacked & 0x07);
|
||||
pos += 3 * gpSize;
|
||||
}
|
||||
let gceCount = 0;
|
||||
while (pos < data.length) {
|
||||
const blockType = data[pos];
|
||||
if (blockType === 0x21) { // Extension Block
|
||||
if (pos + 1 >= data.length) return false;
|
||||
const extLabel = data[pos + 1];
|
||||
if (extLabel === 0xF9) { // Graphic Control Extension
|
||||
gceCount++;
|
||||
if (gceCount > 1) return true; // early exit on 2nd frame
|
||||
}
|
||||
pos += 2;
|
||||
while (pos < data.length) {
|
||||
const blockSize = data[pos];
|
||||
if (blockSize === 0x00) break;
|
||||
pos += blockSize + 1;
|
||||
}
|
||||
if (pos >= data.length) return false;
|
||||
pos++;
|
||||
} else if (blockType === 0x2C) { // Image Descriptor
|
||||
if (pos + 10 >= data.length) return false;
|
||||
pos += 10;
|
||||
const lPacked = data[pos - 1];
|
||||
if ((lPacked & 0x80) !== 0) {
|
||||
const lpSize = 2 << (lPacked & 0x07);
|
||||
pos += 3 * lpSize;
|
||||
}
|
||||
if (pos >= data.length) return false;
|
||||
pos++;
|
||||
while (pos < data.length) {
|
||||
const blockSize = data[pos];
|
||||
if (blockSize === 0x00) break;
|
||||
pos += blockSize + 1;
|
||||
}
|
||||
if (pos >= data.length) return false;
|
||||
pos++;
|
||||
} else if (blockType === 0x3B) {
|
||||
break;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function isAPNG(d: Uint8Array): boolean {
|
||||
let p = 8;
|
||||
while (p + 8 < d.length) {
|
||||
const length = (d[p] << 24 | d[p + 1] << 16 | d[p + 2] << 8 | d[p + 3]) >>> 0;
|
||||
// 'acTL' before 'IDAT': APNG
|
||||
if (d[p + 4] === 0x61 && d[p + 5] === 0x63 && d[p + 6] === 0x54 && d[p + 7] === 0x4c) {
|
||||
return true;
|
||||
}
|
||||
// 'IDAT' first: no APNG
|
||||
if (d[p + 4] === 0x49 && d[p + 5] === 0x44 && d[p + 6] === 0x41 && d[p + 7] === 0x54) {
|
||||
return false;
|
||||
}
|
||||
p += 12 + length;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,6 @@ import { SixelHandler } from './SixelHandler';
|
||||
import { SixelImageStorage } from './SixelImageStorage';
|
||||
import { IIPImageStorage } from './IIPImageStorage';
|
||||
import { ITerminalExt, IImageAddonOptions, IResetHandler } from './Types';
|
||||
import { AnimationManager } from './AnimationManager';
|
||||
|
||||
|
||||
/**
|
||||
@@ -71,9 +70,7 @@ const DEFAULT_OPTIONS: IImageAddonOptions = {
|
||||
iipSupport: true,
|
||||
iipSizeLimit: 33554432,
|
||||
kittySupport: true,
|
||||
kittySizeLimit: 33554432,
|
||||
animationSupport: true, // alpha
|
||||
animationPixelLimit: 4194304 // limit to 2048 * 2048 pixels
|
||||
kittySizeLimit: 33554432
|
||||
};
|
||||
|
||||
// max palette size supported by the sixel lib (compile time setting)
|
||||
@@ -107,7 +104,6 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
|
||||
private _disposables: IDisposable[] = [];
|
||||
private _terminal: ITerminalExt | undefined;
|
||||
private _handlers: Map<String, IResetHandler> = new Map();
|
||||
private _aniManager: AnimationManager | undefined;
|
||||
private readonly _onImageAdded = new Emitter<void>();
|
||||
public readonly onImageAdded: IEvent<void> = this._onImageAdded.event;
|
||||
|
||||
@@ -148,11 +144,6 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
|
||||
terminal.options.windowOptions = windowOps;
|
||||
}
|
||||
|
||||
if (this._opts.animationSupport && typeof ImageDecoder === 'function') {
|
||||
this._aniManager = new AnimationManager(this._storage, this._renderer, terminal);
|
||||
this._disposeLater(terminal.onRender(range => this._aniManager!.viewportUpdated(range)));
|
||||
}
|
||||
|
||||
this._disposeLater(
|
||||
this._renderer,
|
||||
this._storage,
|
||||
@@ -196,7 +187,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
|
||||
// iTerm IIP handler
|
||||
if (this._opts.iipSupport) {
|
||||
const iipStorage = new IIPImageStorage(this._storage!);
|
||||
const iipHandler = new IIPHandler(this._opts, this._renderer!, iipStorage, terminal, this._aniManager);
|
||||
const iipHandler = new IIPHandler(this._opts, this._renderer!, iipStorage, terminal);
|
||||
this._handlers.set('iip', iipHandler);
|
||||
this._disposeLater(
|
||||
terminal._core._inputHandler._parser.registerOscHandler(1337, iipHandler)
|
||||
@@ -227,7 +218,6 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
|
||||
for (const handler of this._handlers.values()) {
|
||||
handler.reset();
|
||||
}
|
||||
this._aniManager?.reset();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,11 +5,12 @@
|
||||
|
||||
import { IDisposable } from '@xterm/xterm';
|
||||
import { ImageRenderer } from './ImageRenderer';
|
||||
import type {
|
||||
ITerminalExt, IImageAddonOptions, IImageSpec, ICellSize, IAddImageOpts
|
||||
import {
|
||||
ITerminalExt, IExtendedAttrsImage, IImageAddonOptions, IImageSpec,
|
||||
IBufferLineExt, BgFlags, Cell, Content, ICellSize, ExtFlags, Attributes,
|
||||
UnderlineStyle, IAddImageOpts
|
||||
} from './Types';
|
||||
import type { IBufferLine } from 'common/buffer/Types';
|
||||
import { CellData } from 'common/buffer/CellData';
|
||||
|
||||
|
||||
// fallback default cell size
|
||||
export const CELL_SIZE_DEFAULT: ICellSize = {
|
||||
@@ -17,12 +18,93 @@ export const CELL_SIZE_DEFAULT: ICellSize = {
|
||||
height: 14
|
||||
};
|
||||
|
||||
export class ImageTileInfo {
|
||||
/**
|
||||
* Extend extended attribute to also hold image tile information.
|
||||
*
|
||||
* Object definition is copied from base repo to fully mimick its behavior.
|
||||
* Image data is added as additional public properties `imageId` and `tileId`.
|
||||
*/
|
||||
class ExtendedAttrsImage implements IExtendedAttrsImage {
|
||||
private _ext: number = 0;
|
||||
public get ext(): number {
|
||||
if (this._urlId) {
|
||||
return (
|
||||
(this._ext & ~ExtFlags.UNDERLINE_STYLE) |
|
||||
(this.underlineStyle << 26)
|
||||
);
|
||||
}
|
||||
return this._ext;
|
||||
}
|
||||
public set ext(value: number) { this._ext = value; }
|
||||
|
||||
public get underlineStyle(): UnderlineStyle {
|
||||
// Always return the URL style if it has one
|
||||
if (this._urlId) {
|
||||
return UnderlineStyle.DASHED;
|
||||
}
|
||||
return (this._ext & ExtFlags.UNDERLINE_STYLE) >> 26;
|
||||
}
|
||||
public set underlineStyle(value: UnderlineStyle) {
|
||||
this._ext &= ~ExtFlags.UNDERLINE_STYLE;
|
||||
this._ext |= (value << 26) & ExtFlags.UNDERLINE_STYLE;
|
||||
}
|
||||
|
||||
public get underlineColor(): number {
|
||||
return this._ext & (Attributes.CM_MASK | Attributes.RGB_MASK);
|
||||
}
|
||||
public set underlineColor(value: number) {
|
||||
this._ext &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
|
||||
this._ext |= value & (Attributes.CM_MASK | Attributes.RGB_MASK);
|
||||
}
|
||||
|
||||
public get underlineVariantOffset(): number {
|
||||
const val = (this._ext & ExtFlags.VARIANT_OFFSET) >> 29;
|
||||
if (val < 0) {
|
||||
return val ^ 0xFFFFFFF8;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
public set underlineVariantOffset(value: number) {
|
||||
this._ext &= ~ExtFlags.VARIANT_OFFSET;
|
||||
this._ext |= (value << 29) & ExtFlags.VARIANT_OFFSET;
|
||||
}
|
||||
|
||||
private _urlId: number = 0;
|
||||
public get urlId(): number {
|
||||
return this._urlId;
|
||||
}
|
||||
public set urlId(value: number) {
|
||||
this._urlId = value;
|
||||
}
|
||||
|
||||
constructor(
|
||||
ext: number = 0,
|
||||
urlId: number = 0,
|
||||
public imageId = -1,
|
||||
public tileId = -1) {
|
||||
public tileId = -1
|
||||
) {
|
||||
this._ext = ext;
|
||||
this._urlId = urlId;
|
||||
}
|
||||
|
||||
public clone(): IExtendedAttrsImage {
|
||||
/**
|
||||
* Technically we dont need a clone variant of ExtendedAttrsImage,
|
||||
* as we never clone a cell holding image data.
|
||||
* Note: Clone is only meant to be used by the InputHandler for
|
||||
* sticky attributes, which is never the case for image data.
|
||||
* We still provide a proper clone method to reflect the full ext attr
|
||||
* state in case there are future use cases for clone.
|
||||
*/
|
||||
return new ExtendedAttrsImage(this._ext, this._urlId, this.imageId, this.tileId);
|
||||
}
|
||||
|
||||
public isEmpty(): boolean {
|
||||
return this.underlineStyle === UnderlineStyle.NONE && this._urlId === 0 && this.imageId === -1;
|
||||
}
|
||||
}
|
||||
const EMPTY_ATTRS = new ExtendedAttrsImage();
|
||||
|
||||
|
||||
/**
|
||||
* ImageStorage - extension of CoreTerminal:
|
||||
@@ -44,7 +126,6 @@ export class ImageStorage implements IDisposable {
|
||||
private _needsFullClear = false;
|
||||
// hard limit of stored pixels (fallback limit of 10 MB)
|
||||
private _pixelLimit: number = 2500000;
|
||||
private _workCell: CellData = new CellData();
|
||||
|
||||
private _viewportMetrics: { cols: number, rows: number };
|
||||
public onImageAdded: (() => void) | undefined;
|
||||
@@ -143,13 +224,6 @@ export class ImageStorage implements IDisposable {
|
||||
this._fullyCleared = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve image spec from storage.
|
||||
*/
|
||||
public getImage(id: number): IImageSpec | undefined {
|
||||
return this._images.get(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete an image by its internal storage ID.
|
||||
* Used by protocols that support explicit deletion (e.g. Kitty a=d).
|
||||
@@ -203,10 +277,10 @@ export class ImageStorage implements IDisposable {
|
||||
|
||||
this._terminal._core._inputHandler._dirtyRowTracker.markDirty(buffer.y);
|
||||
for (let row = 0; row < rows; ++row) {
|
||||
const line = buffer.lines.get(buffer.y + buffer.ybase)!;
|
||||
const line = buffer.lines.get(buffer.y + buffer.ybase);
|
||||
for (let col = 0; col < cols; ++col) {
|
||||
if (offset + col >= termCols) break;
|
||||
this._writeToCell(line, offset + col, imageId, row * cols + col);
|
||||
this._writeToCell(line as IBufferLineExt, offset + col, imageId, row * cols + col);
|
||||
tileCount++;
|
||||
}
|
||||
if (opts.scrolling) {
|
||||
@@ -353,44 +427,55 @@ export class ImageStorage implements IDisposable {
|
||||
const placeholderCalls: { col: number, row: number, count: number }[] = [];
|
||||
|
||||
// walk all cells in viewport and collect tiles found
|
||||
// Note: We check _extendedAttrs directly (not just HAS_EXTENDED flag)
|
||||
// because text writes clear the BG flag but leave image tile data intact.
|
||||
// This lets top-layer images survive text overwrites (kitty C=1 behavior).
|
||||
for (let row = start; row <= end; ++row) {
|
||||
const line = buffer.lines.get(row + buffer.ydisp);
|
||||
const line = buffer.lines.get(row + buffer.ydisp) as IBufferLineExt;
|
||||
if (!line) return;
|
||||
for (let col = 0; col < cols; ++col) {
|
||||
const e = line.getExtended(col)?.payload;
|
||||
if (e instanceof ImageTileInfo) {
|
||||
const imageId = e.imageId;
|
||||
if (imageId === undefined || imageId === -1) {
|
||||
let e: IExtendedAttrsImage;
|
||||
if (line.getBg(col) & BgFlags.HAS_EXTENDED) {
|
||||
e = line._extendedAttrs[col] ?? EMPTY_ATTRS;
|
||||
} else {
|
||||
const maybeImg = line._extendedAttrs[col] as IExtendedAttrsImage | undefined;
|
||||
if (!maybeImg || maybeImg.imageId === undefined || maybeImg.imageId === -1) {
|
||||
continue;
|
||||
}
|
||||
const imgSpec = this._images.get(imageId);
|
||||
if (e.tileId !== -1) {
|
||||
const startTile = e.tileId;
|
||||
const startCol = col;
|
||||
let count = 1;
|
||||
/**
|
||||
* merge tiles to the right into a single draw call, if:
|
||||
* - not at end of line
|
||||
* - cell has same image id
|
||||
* - cell has consecutive tile id
|
||||
*/
|
||||
while (++col < cols) {
|
||||
const nextE = line.getExtended(col)?.payload;
|
||||
if (!(nextE instanceof ImageTileInfo) || nextE.imageId !== imageId || nextE.tileId !== startTile + count) {
|
||||
break;
|
||||
}
|
||||
count++;
|
||||
e = maybeImg;
|
||||
}
|
||||
const imageId = e.imageId;
|
||||
if (imageId === undefined || imageId === -1) {
|
||||
continue;
|
||||
}
|
||||
const imgSpec = this._images.get(imageId);
|
||||
if (e.tileId !== -1) {
|
||||
const startTile = e.tileId;
|
||||
const startCol = col;
|
||||
let count = 1;
|
||||
/**
|
||||
* merge tiles to the right into a single draw call, if:
|
||||
* - not at end of line
|
||||
* - cell has same image id
|
||||
* - cell has consecutive tile id
|
||||
* Also check _extendedAttrs directly for cells where text cleared HAS_EXTENDED.
|
||||
*/
|
||||
while (++col < cols) {
|
||||
const nextE = line._extendedAttrs[col] as IExtendedAttrsImage | undefined;
|
||||
if (!nextE || nextE.imageId !== imageId || nextE.tileId !== startTile + count) {
|
||||
break;
|
||||
}
|
||||
col--;
|
||||
if (imgSpec) {
|
||||
if (imgSpec.actual) {
|
||||
drawCalls.push({ imgSpec, tileId: startTile, col: startCol, row, count });
|
||||
}
|
||||
} else if (this._opts.showPlaceholder) {
|
||||
placeholderCalls.push({ col: startCol, row, count });
|
||||
}
|
||||
this._fullyCleared = false;
|
||||
count++;
|
||||
}
|
||||
col--;
|
||||
if (imgSpec) {
|
||||
if (imgSpec.actual) {
|
||||
drawCalls.push({ imgSpec, tileId: startTile, col: startCol, row, count });
|
||||
}
|
||||
} else if (this._opts.showPlaceholder) {
|
||||
placeholderCalls.push({ col: startCol, row, count });
|
||||
}
|
||||
this._fullyCleared = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -428,9 +513,9 @@ export class ImageStorage implements IDisposable {
|
||||
const rows = buffer.lines.length;
|
||||
const oldCol = this._viewportMetrics.cols - 1;
|
||||
for (let row = 0; row < rows; ++row) {
|
||||
const line = buffer.lines.get(row)!;
|
||||
const e = line.getExtended(oldCol)?.payload;
|
||||
if (e instanceof ImageTileInfo) {
|
||||
const line = buffer.lines.get(row) as IBufferLineExt;
|
||||
if (line.getBg(oldCol) & BgFlags.HAS_EXTENDED) {
|
||||
const e: IExtendedAttrsImage = line._extendedAttrs[oldCol] ?? EMPTY_ATTRS;
|
||||
const imageId = e.imageId;
|
||||
if (imageId === undefined || imageId === -1) {
|
||||
continue;
|
||||
@@ -447,7 +532,7 @@ export class ImageStorage implements IDisposable {
|
||||
// expand only if right side is empty (nothing got wrapped from below)
|
||||
let hasData = false;
|
||||
for (let rightCol = oldCol + 1; rightCol > metrics.cols; ++rightCol) {
|
||||
if (line.hasContent(rightCol)) {
|
||||
if (line._data[rightCol * Cell.SIZE + Cell.CONTENT] & Content.HAS_CONTENT_MASK) {
|
||||
hasData = true;
|
||||
break;
|
||||
}
|
||||
@@ -459,7 +544,7 @@ export class ImageStorage implements IDisposable {
|
||||
const end = Math.min(metrics.cols, tilesPerRow - (e.tileId % tilesPerRow) + oldCol);
|
||||
let lastTile = e.tileId;
|
||||
for (let expandCol = oldCol + 1; expandCol < end; ++expandCol) {
|
||||
this._writeToCell(line, expandCol, imageId, ++lastTile);
|
||||
this._writeToCell(line as IBufferLineExt, expandCol, imageId, ++lastTile);
|
||||
imgSpec.tileCount++;
|
||||
}
|
||||
}
|
||||
@@ -473,10 +558,10 @@ export class ImageStorage implements IDisposable {
|
||||
*/
|
||||
public getImageAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined {
|
||||
const buffer = this._terminal._core.buffer;
|
||||
const line = buffer.lines.get(y);
|
||||
if (line) {
|
||||
const e = line.getExtended(x)?.payload;
|
||||
if (e instanceof ImageTileInfo && e.imageId && e.imageId !== -1) {
|
||||
const line = buffer.lines.get(y) as IBufferLineExt;
|
||||
if (line && line.getBg(x) & BgFlags.HAS_EXTENDED) {
|
||||
const e: IExtendedAttrsImage = line._extendedAttrs[x] ?? EMPTY_ATTRS;
|
||||
if (e.imageId && e.imageId !== -1) {
|
||||
const orig = this._images.get(e.imageId)?.orig;
|
||||
if (window.ImageBitmap && orig instanceof ImageBitmap) {
|
||||
const canvas = ImageRenderer.createCanvas(window.document, orig.width, orig.height);
|
||||
@@ -493,10 +578,10 @@ export class ImageStorage implements IDisposable {
|
||||
*/
|
||||
public extractTileAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined {
|
||||
const buffer = this._terminal._core.buffer;
|
||||
const line = buffer.lines.get(y);
|
||||
if (line) {
|
||||
const e = line.getExtended(x)?.payload;
|
||||
if (e instanceof ImageTileInfo && e.imageId && e.imageId !== -1 && e.tileId !== -1) {
|
||||
const line = buffer.lines.get(y) as IBufferLineExt;
|
||||
if (line && line.getBg(x) & BgFlags.HAS_EXTENDED) {
|
||||
const e: IExtendedAttrsImage = line._extendedAttrs[x] ?? EMPTY_ATTRS;
|
||||
if (e.imageId && e.imageId !== -1 && e.tileId !== -1) {
|
||||
const spec = this._images.get(e.imageId);
|
||||
if (spec) {
|
||||
return this._renderer.extractTile(spec, e.tileId);
|
||||
@@ -524,31 +609,31 @@ export class ImageStorage implements IDisposable {
|
||||
return used - current;
|
||||
}
|
||||
|
||||
private _writeToCell(line: IBufferLine, x: number, imageId: number, tileId: number): void {
|
||||
const workCell = this._workCell;
|
||||
line.loadCell(x, workCell);
|
||||
if (this._workCell.hasExtendedAttrs()) {
|
||||
const old = workCell.extended.payload;
|
||||
if (old instanceof ImageTileInfo) {
|
||||
// found an old ExtendedAttrsImage, since we know that
|
||||
// they are always isolated instances (single cell usage),
|
||||
// we can re-use it and just update their id entries
|
||||
const oldSpec = this._images.get(old.imageId);
|
||||
if (oldSpec) {
|
||||
// early eviction for in-viewport overwrites
|
||||
oldSpec.tileCount--;
|
||||
private _writeToCell(line: IBufferLineExt, x: number, imageId: number, tileId: number): void {
|
||||
if (line._data[x * Cell.SIZE + Cell.BG] & BgFlags.HAS_EXTENDED) {
|
||||
const old = line._extendedAttrs[x];
|
||||
if (old) {
|
||||
if (old.imageId !== undefined) {
|
||||
// found an old ExtendedAttrsImage, since we know that
|
||||
// they are always isolated instances (single cell usage),
|
||||
// we can re-use it and just update their id entries
|
||||
const oldSpec = this._images.get(old.imageId);
|
||||
if (oldSpec) {
|
||||
// early eviction for in-viewport overwrites
|
||||
oldSpec.tileCount--;
|
||||
}
|
||||
old.imageId = imageId;
|
||||
old.tileId = tileId;
|
||||
return;
|
||||
}
|
||||
old.imageId = imageId;
|
||||
old.tileId = tileId;
|
||||
// found a plain ExtendedAttrs instance, clone it to new entry
|
||||
line._extendedAttrs[x] = new ExtendedAttrsImage(old.ext, old.urlId, imageId, tileId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// fall-through: always create new ExtendedAttrs entry
|
||||
const extattr = workCell.extended.clone();
|
||||
extattr.payload = new ImageTileInfo(imageId, tileId);
|
||||
workCell.extended = extattr;
|
||||
workCell.updateExtended();
|
||||
line.setCell(x, workCell);
|
||||
// fall-through: always create new ExtendedAttrsImage entry
|
||||
line._data[x * Cell.SIZE + Cell.BG] |= BgFlags.HAS_EXTENDED;
|
||||
line._extendedAttrs[x] = new ExtendedAttrsImage(0, 0, imageId, tileId);
|
||||
}
|
||||
|
||||
private _evictOnAlternate(): void {
|
||||
@@ -561,16 +646,18 @@ export class ImageStorage implements IDisposable {
|
||||
// re-count tiles on whole buffer
|
||||
const buffer = this._terminal._core.buffer;
|
||||
for (let y = 0; y < this._terminal.rows; ++y) {
|
||||
const line = buffer.lines.get(y);
|
||||
const line = buffer.lines.get(y) as IBufferLineExt;
|
||||
if (!line) {
|
||||
continue;
|
||||
}
|
||||
for (let x = 0; x < this._terminal.cols; ++x) {
|
||||
const payload = line.getExtended(x)?.payload;
|
||||
if (payload instanceof ImageTileInfo) {
|
||||
const spec = this._images.get(payload.imageId);
|
||||
if (spec) {
|
||||
spec.tileCount++;
|
||||
if (line._data[x * Cell.SIZE + Cell.BG] & BgFlags.HAS_EXTENDED) {
|
||||
const imgId = line._extendedAttrs[x]?.imageId;
|
||||
if (imgId) {
|
||||
const spec = this._images.get(imgId);
|
||||
if (spec) {
|
||||
spec.tileCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Attributes, BgFlags, Content, ExtFlags, UnderlineStyle } from 'common/b
|
||||
import type { AttributeData } from 'common/buffer/AttributeData';
|
||||
import type { IParams, IDcsHandler, IOscHandler, IApcHandler, IEscapeSequenceParser } from 'common/parser/Types';
|
||||
import type { IInputHandler } from 'common/Types';
|
||||
import type { IBufferLine, IExtendedAttrs } from 'common/buffer/Types';
|
||||
import type { ITerminal, ReadonlyColorSet } from 'browser/Types';
|
||||
import type { IRenderDimensions } from 'browser/renderer/shared/Types';
|
||||
import type { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
|
||||
@@ -40,8 +41,6 @@ export interface IImageAddonOptions {
|
||||
iipSizeLimit: number;
|
||||
kittySupport: boolean;
|
||||
kittySizeLimit: number;
|
||||
animationSupport: boolean;
|
||||
animationPixelLimit: number;
|
||||
}
|
||||
|
||||
export interface IResetHandler {
|
||||
@@ -49,7 +48,6 @@ export interface IResetHandler {
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Stub into private interfaces.
|
||||
* This should be kept in line with common libs.
|
||||
@@ -57,6 +55,19 @@ export interface IResetHandler {
|
||||
* have a somewhat reliable testing against code changes in the core repo.
|
||||
*/
|
||||
|
||||
// overloaded IExtendedAttrs to hold image refs
|
||||
export interface IExtendedAttrsImage extends IExtendedAttrs {
|
||||
imageId: number;
|
||||
tileId: number;
|
||||
clone(): IExtendedAttrsImage;
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
export interface IBufferLineExt extends IBufferLine {
|
||||
_extendedAttrs: {[index: number]: IExtendedAttrsImage | undefined};
|
||||
_data: Uint32Array;
|
||||
}
|
||||
|
||||
interface IInputHandlerExt extends IInputHandler {
|
||||
_parser: IEscapeSequenceParser;
|
||||
_curAttrData: AttributeData;
|
||||
@@ -67,7 +78,6 @@ interface IInputHandlerExt extends IInputHandler {
|
||||
};
|
||||
onRequestReset(handler: () => void): IDisposable;
|
||||
}
|
||||
/* eslint-enable */
|
||||
|
||||
export interface ICoreTerminalExt extends ITerminal {
|
||||
_themeService: IThemeService | undefined;
|
||||
@@ -79,6 +89,8 @@ export interface ICoreTerminalExt extends ITerminal {
|
||||
export interface ITerminalExt extends Terminal {
|
||||
_core: ICoreTerminalExt;
|
||||
}
|
||||
/* eslint-enable */
|
||||
|
||||
|
||||
/**
|
||||
* Some storage definitions.
|
||||
|
||||
@@ -26,8 +26,6 @@ export interface IImageAddonOptions {
|
||||
iipSizeLimit: number;
|
||||
kittySupport: boolean;
|
||||
kittySizeLimit: number;
|
||||
animationSupport: boolean;
|
||||
animationPixelLimit: number;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
@@ -140,9 +138,7 @@ test.describe('ImageAddon', () => {
|
||||
iipSupport: true,
|
||||
iipSizeLimit: 33554432,
|
||||
kittySupport: true,
|
||||
kittySizeLimit: 33554432,
|
||||
animationSupport: true,
|
||||
animationPixelLimit: 4194304
|
||||
kittySizeLimit: 33554432
|
||||
};
|
||||
deepStrictEqual(await ctx.page.evaluate(`window.imageAddon._opts`), DEFAULT_OPTIONS);
|
||||
});
|
||||
@@ -159,9 +155,7 @@ test.describe('ImageAddon', () => {
|
||||
iipSupport: false,
|
||||
iipSizeLimit: 1000,
|
||||
kittySupport: false,
|
||||
kittySizeLimit: 1000,
|
||||
animationSupport: false,
|
||||
animationPixelLimit: 1000
|
||||
kittySizeLimit: 1000
|
||||
};
|
||||
await ctx.page.evaluate(opts => {
|
||||
(window as any).imageAddonCustom = new ImageAddon(opts.opts);
|
||||
@@ -441,15 +435,6 @@ test.describe('ImageAddon', () => {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test.describe('text overwrite removes tiles', () => {
|
||||
test('sixel', async () => {
|
||||
await assertTextClearsTiles(SIXEL_SEQ_0);
|
||||
});
|
||||
test('iip', async () => {
|
||||
await assertTextClearsTiles(TESTDATA_IIP[0][0]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -487,20 +472,3 @@ async function getOrigSize(id: number): Promise<[number, number]> {
|
||||
async function getImageAtBufferCell(x: number, y: number): Promise<string | undefined> {
|
||||
return ctx.page.evaluate<any>(`window.imageAddon.getImageAtBufferCell(${x}, ${y})?.toDataURL('image/png')`);
|
||||
}
|
||||
|
||||
async function hasTileAtBufferCell(x: number, y: number): Promise<boolean> {
|
||||
return ctx.page.evaluate(`!!window.imageAddon.extractTileAtBufferCell(${x}, ${y})`);
|
||||
}
|
||||
|
||||
async function assertTextClearsTiles(imageSeq: string): Promise<void> {
|
||||
await ctx.proxy.write('\x1b[H' + imageSeq);
|
||||
await pollFor(ctx.page, '!!window.imageAddon.extractTileAtBufferCell(5, 1)', true);
|
||||
ok(await hasTileAtBufferCell(0, 1));
|
||||
await ctx.proxy.write('\x1b[2;6H#######');
|
||||
for (let x = 5; x < 12; x++) {
|
||||
strictEqual(await hasTileAtBufferCell(x, 1), false);
|
||||
}
|
||||
ok(await hasTileAtBufferCell(0, 1));
|
||||
ok(await hasTileAtBufferCell(13, 1));
|
||||
ok(((await ctx.page.evaluate('window.term.buffer.active.getLine(1).translateToString(true)')) as string).includes('#######'));
|
||||
}
|
||||
|
||||
@@ -2213,21 +2213,6 @@ test.describe('Kitty Graphics Protocol', () => {
|
||||
await pollFor(ctx.page, 'window._imageAddedCount', 2);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('text overwrite removes tiles', () => {
|
||||
test('a=T placement', async () => {
|
||||
await ctx.proxy.write(`\x1b[H\x1b_Ga=T,f=100;${KITTY_MULTICOLOR_200X100_BASE64}\x1b\\`);
|
||||
await pollFor(ctx.page, '!!window.imageAddon.extractTileAtBufferCell(5, 1)', true);
|
||||
ok(await hasTileAtBufferCell(0, 1));
|
||||
await ctx.proxy.write('\x1b[2;6H#######');
|
||||
for (let x = 5; x < 12; x++) {
|
||||
strictEqual(await hasTileAtBufferCell(x, 1), false);
|
||||
}
|
||||
ok(await hasTileAtBufferCell(0, 1));
|
||||
ok(await hasTileAtBufferCell(13, 1));
|
||||
ok(((await ctx.page.evaluate('window.term.buffer.active.getLine(1).translateToString(true)')) as string).includes('#######'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -2277,7 +2262,3 @@ async function getPixels(col: number, row: number, x: number, y: number, w: numb
|
||||
return Array.from(ctx2d.getImageData(x, y, w, h).data);
|
||||
}, [col, row, x, y, w, h]);
|
||||
}
|
||||
|
||||
async function hasTileAtBufferCell(x: number, y: number): Promise<boolean> {
|
||||
return ctx.page.evaluate(`!!window.imageAddon.extractTileAtBufferCell(${x}, ${y})`);
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@ export class GlyphRenderer extends Disposable {
|
||||
private readonly _attributesBuffer: WebGLBuffer;
|
||||
|
||||
private _atlas: ITextureAtlas | undefined;
|
||||
private _lastSeenPageLayoutVersion: number = -1;
|
||||
private _lastAtlasPagesVersion: number = -1;
|
||||
private _pageOverflowWarned: boolean = false;
|
||||
private _activeBuffer: number = 0;
|
||||
private readonly _vertices: IVertices = {
|
||||
@@ -216,15 +216,17 @@ export class GlyphRenderer extends Disposable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Call when a frame is being drawn. Returns whether the full model must be rebuilt before
|
||||
* rendering this frame because the atlas page layout changed since this renderer last drew.
|
||||
* Returns whether the full model must be rebuilt before rendering this frame.
|
||||
* This is tracked per renderer (not on the shared atlas) so that every
|
||||
* terminal sharing the atlas rebuilds its model after a page merge, not just
|
||||
* the first one to render (vscode#322756).
|
||||
*/
|
||||
public beginFrame(): boolean {
|
||||
if (!this._atlas) {
|
||||
return true;
|
||||
}
|
||||
if (this._atlas.pageLayoutVersion !== this._lastSeenPageLayoutVersion) {
|
||||
this._lastSeenPageLayoutVersion = this._atlas.pageLayoutVersion;
|
||||
if (this._atlas.pagesVersion !== this._lastAtlasPagesVersion) {
|
||||
this._lastAtlasPagesVersion = this._atlas.pagesVersion;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -375,8 +377,9 @@ export class GlyphRenderer extends Disposable {
|
||||
|
||||
// Bind the atlas page texture if they have changed. AtlasPage.version is globally
|
||||
// monotonic, so a page object swap at the same index (which happens after a page merge)
|
||||
// is detected by the same comparison.
|
||||
// Clamp defensively in case the atlas unexpectedly exceeds texture capacity.
|
||||
// is detected by the same comparison. The page count is clamped to the fixed texture
|
||||
// array size so an atlas page overflow degrades (untextured glyphs) instead of throwing
|
||||
// mid-frame; the atlas is responsible for never exceeding maxAtlasPages.
|
||||
const pageCount = Math.min(this._atlas.pages.length, this._atlasTextures.length);
|
||||
if (this._atlas.pages.length > this._atlasTextures.length && !this._pageOverflowWarned) {
|
||||
this._pageOverflowWarned = true;
|
||||
@@ -394,7 +397,9 @@ export class GlyphRenderer extends Disposable {
|
||||
|
||||
public setAtlas(atlas: ITextureAtlas): void {
|
||||
this._atlas = atlas;
|
||||
this._lastSeenPageLayoutVersion = -1;
|
||||
// Force a model rebuild on the next frame as glyph coordinates from a
|
||||
// previous atlas are meaningless in the new one.
|
||||
this._lastAtlasPagesVersion = -1;
|
||||
this.invalidateAtlasTextures();
|
||||
}
|
||||
|
||||
|
||||
@@ -132,8 +132,16 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
}
|
||||
|
||||
private _pageLayoutVersion = 0;
|
||||
public get pageLayoutVersion(): number { return this._pageLayoutVersion; }
|
||||
/**
|
||||
* Incremented whenever the structure of the pages array changes in a way that
|
||||
* invalidates texture page indexes/coordinates cached outside the atlas (page
|
||||
* merges, overflow page creation). Renderers compare this against their own
|
||||
* last-seen value to decide when to rebuild their models; the atlas is shared
|
||||
* across terminals, so a consume-once flag would only repair the first
|
||||
* renderer to draw (see the shared-atlas garble in vscode#322756).
|
||||
*/
|
||||
private _pagesVersion = 0;
|
||||
public get pagesVersion(): number { return this._pagesVersion; }
|
||||
|
||||
public clearTexture(): void {
|
||||
if (this._pages[0].currentRow.x === 0 && this._pages[0].currentRow.y === 0) {
|
||||
@@ -145,11 +153,6 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
this._cacheMap.clear();
|
||||
this._cacheMapCombined.clear();
|
||||
this._didWarmUp = false;
|
||||
|
||||
// Invalidate renderer models so all texture pages are refreshed. The atlas may be shared, in
|
||||
// which case the clearing renderer has cleared only its own model and every other owner still
|
||||
// holds texture coords into the rows just wiped.
|
||||
this._pageLayoutVersion++;
|
||||
}
|
||||
|
||||
private _createNewPage(): AtlasPage {
|
||||
@@ -158,7 +161,7 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
// animation frame which would result in blank rendered areas. This is actually not that
|
||||
// expensive relative to drawing the glyphs, so there is no need to wait for an idle callback.
|
||||
if (TextureAtlas.maxAtlasPages && this._pages.length >= Math.max(4, TextureAtlas.maxAtlasPages)) {
|
||||
// Find the set of the largest 4 images, below the maximum size, with the highest
|
||||
// Find the set of the largest images, below the maximum size, with the highest
|
||||
// percentages used
|
||||
const pagesBySize = this._pages.filter(e => {
|
||||
return e.canvas.width * 2 <= (TextureAtlas.maxTextureSize || Constants.FORCED_MAX_TEXTURE_SIZE);
|
||||
@@ -168,50 +171,55 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
return b.percentageUsed - a.percentageUsed;
|
||||
});
|
||||
let sameSizeI = -1;
|
||||
let size = 0;
|
||||
for (let i = 0; i < pagesBySize.length; i++) {
|
||||
if (pagesBySize[i].canvas.width !== size) {
|
||||
sameSizeI = i;
|
||||
size = pagesBySize[i].canvas.width;
|
||||
} else if (i - sameSizeI === 3) {
|
||||
break;
|
||||
|
||||
// Find the largest group (up to 4) of same-sized pages, preferring larger page sizes. A
|
||||
// group of 2 or 3 still reduces (or at worst maintains) the page count net of the new page
|
||||
// pushed below; growing past the cap is never an option as GlyphRenderer's texture and
|
||||
// shader sampler arrays are sized to exactly maxAtlasPages (exceeding them crashes render).
|
||||
let bestGroupStart = -1;
|
||||
let bestGroupSize = 0;
|
||||
let groupStart = 0;
|
||||
for (let i = 1; i <= pagesBySize.length; i++) {
|
||||
if (i === pagesBySize.length || pagesBySize[i].canvas.width !== pagesBySize[groupStart].canvas.width) {
|
||||
const groupSize = Math.min(4, i - groupStart);
|
||||
if (groupSize > bestGroupSize) {
|
||||
bestGroupSize = groupSize;
|
||||
bestGroupStart = groupStart;
|
||||
if (groupSize === 4) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
groupStart = i;
|
||||
}
|
||||
}
|
||||
|
||||
// Gather details of the merge
|
||||
const mergingPages = pagesBySize.slice(sameSizeI, sameSizeI + 4);
|
||||
if (bestGroupSize >= 2) {
|
||||
// Gather details of the merge
|
||||
const mergingPages = pagesBySize.slice(bestGroupStart, bestGroupStart + bestGroupSize);
|
||||
const sortedMergingPagesIndexes = mergingPages.map(e => this._pages.indexOf(e)).sort((a, b) => a - b);
|
||||
const mergedPageIndex = this.pages.length - mergingPages.length;
|
||||
|
||||
// Only proceed with merge if we have exactly 4 same-sized pages. If not, we cannot
|
||||
// effectively reduce page count and merging would cause issues.
|
||||
if (mergingPages.length < 4 || mergingPages.some(p => p.canvas.width !== mergingPages[0].canvas.width)) {
|
||||
// Evict instead of adding a page beyond the renderer's texture capacity.
|
||||
// Merge into the new page
|
||||
const mergedPage = this._mergePages(mergingPages, mergedPageIndex);
|
||||
mergedPage.version = ++AtlasPage.nextVersion;
|
||||
|
||||
// Delete the pages, shifting glyph texture pages as needed
|
||||
for (let i = sortedMergingPagesIndexes.length - 1; i >= 0; i--) {
|
||||
this._deletePage(sortedMergingPagesIndexes[i]);
|
||||
}
|
||||
|
||||
// Add the new merged page to the end
|
||||
this.pages.push(mergedPage);
|
||||
|
||||
// Invalidate models so all texture pages are refreshed.
|
||||
this._pagesVersion++;
|
||||
this._onAddTextureAtlasCanvas.fire(mergedPage.canvas);
|
||||
} else {
|
||||
// No two same-sized pages below the maximum size exist, so merging cannot reduce the
|
||||
// page count. Evict all pages rather than exceed the renderers' fixed texture/sampler
|
||||
// capacity; glyphs re-rasterize on demand and models rebuild via pagesVersion.
|
||||
this._evictAllPages();
|
||||
const newPage = new AtlasPage(this._document, this._textureSize);
|
||||
this._pages.push(newPage);
|
||||
this._activePages.push(newPage);
|
||||
this._onAddTextureAtlasCanvas.fire(newPage.canvas);
|
||||
return newPage;
|
||||
}
|
||||
|
||||
const sortedMergingPagesIndexes = mergingPages.map(e => e.glyphs[0].texturePage).sort((a, b) => a - b);
|
||||
const mergedPageIndex = this.pages.length - mergingPages.length;
|
||||
|
||||
// Merge into the new page
|
||||
const mergedPage = this._mergePages(mergingPages, mergedPageIndex);
|
||||
mergedPage.version = ++AtlasPage.nextVersion;
|
||||
|
||||
// Delete the pages, shifting glyph texture pages as needed
|
||||
for (let i = sortedMergingPagesIndexes.length - 1; i >= 0; i--) {
|
||||
this._deletePage(sortedMergingPagesIndexes[i]);
|
||||
}
|
||||
|
||||
// Add the new merged page to the end
|
||||
this.pages.push(mergedPage);
|
||||
|
||||
// Invalidate renderer models so all texture pages are refreshed.
|
||||
this._pageLayoutVersion++;
|
||||
this._onAddTextureAtlasCanvas.fire(mergedPage.canvas);
|
||||
}
|
||||
|
||||
// All new atlas pages are created small as they are highly dynamic
|
||||
@@ -261,9 +269,14 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes every page and clears the glyph caches. This is the last resort when the page cap is
|
||||
* reached but no same-sized pages exist to merge: the page count must never exceed
|
||||
* maxAtlasPages because renderers size their texture and shader sampler arrays to exactly
|
||||
* that. Glyphs re-rasterize on demand and renderers rebuild their models via
|
||||
* {@link pagesVersion}.
|
||||
*/
|
||||
private _evictAllPages(): void {
|
||||
const startTime = performance.now();
|
||||
const pageCount = this._pages.length;
|
||||
for (const page of this._pages) {
|
||||
this._onRemoveTextureAtlasCanvas.fire(page.canvas);
|
||||
page.canvas.remove();
|
||||
@@ -274,8 +287,7 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
this._cacheMap.clear();
|
||||
this._cacheMapCombined.clear();
|
||||
this._didWarmUp = false;
|
||||
this._pageLayoutVersion++;
|
||||
this._logService.debug(`Evicted ${pageCount} WebGL atlas pages in ${(performance.now() - startTime).toFixed(2)}ms`);
|
||||
this._pagesVersion++;
|
||||
}
|
||||
|
||||
public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph {
|
||||
@@ -835,15 +847,11 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
// Create a new page for oversized glyphs as they come up
|
||||
if (rasterizedGlyph.size.x > this._textureSize) {
|
||||
if (!this._overflowSizePage) {
|
||||
// Make room for the oversized page without exceeding texture capacity.
|
||||
if (TextureAtlas.maxAtlasPages && this._pages.length >= TextureAtlas.maxAtlasPages) {
|
||||
this._evictAllPages();
|
||||
}
|
||||
this._overflowSizePage = new AtlasPage(this._document, this._config.deviceMaxTextureSize);
|
||||
this.pages.push(this._overflowSizePage);
|
||||
|
||||
// Invalidate renderer models so all texture pages are refreshed.
|
||||
this._pageLayoutVersion++;
|
||||
// Invalidate models so all texture pages are refreshed.
|
||||
this._pagesVersion++;
|
||||
this._onAddTextureAtlasCanvas.fire(this._overflowSizePage.canvas);
|
||||
}
|
||||
activePage = this._overflowSizePage;
|
||||
@@ -1123,7 +1131,7 @@ class AtlasPage {
|
||||
sourcePages[2]._usedPixels +
|
||||
sourcePages[3]._usedPixels;
|
||||
} else {
|
||||
// fallback for non quadmerges (should never be used)
|
||||
// 2- and 3-page merges, used when no 4-page same-size set exists at the page cap
|
||||
for (let i = 0; i < sourcePages.length; ++i) {
|
||||
this._glyphs = this._glyphs.concat(sourcePages[i].glyphs);
|
||||
this._usedPixels += sourcePages[i]._usedPixels;
|
||||
|
||||
@@ -68,12 +68,13 @@ export interface ITextureAtlas extends IDisposable {
|
||||
warmUp(): void;
|
||||
|
||||
/**
|
||||
* Incremented whenever cached glyph texture page mappings may be stale, such as after atlas page
|
||||
* merges or overflow page creation. Renderers compare this against their own last-seen value and
|
||||
* rebuild their model when it changes; a shared atlas can have many renderers, so this must not
|
||||
* be a consume-once flag.
|
||||
* Incremented whenever the pages array changes structurally (page merge,
|
||||
* overflow page creation), invalidating any texture page indexes/coordinates
|
||||
* cached by renderers. Tracked as a version rather than a consumable flag
|
||||
* because the atlas may be shared by multiple renderers, each of which must
|
||||
* notice the change independently.
|
||||
*/
|
||||
readonly pageLayoutVersion: number;
|
||||
readonly pagesVersion: number;
|
||||
|
||||
/**
|
||||
* Clear all glyphs from the texture atlas.
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2026 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { assert } from 'chai';
|
||||
import { createPatternCanvas } from './CustomGlyphRasterizer';
|
||||
|
||||
describe('CustomGlyphRasterizer', () => {
|
||||
describe('createPatternCanvas', () => {
|
||||
it('prefers an offscreen canvas without using the DOM canvas factory', () => {
|
||||
const expectedCanvas = {} as OffscreenCanvas;
|
||||
const calls: string[] = [];
|
||||
|
||||
const canvas = createPatternCanvas(
|
||||
2,
|
||||
3,
|
||||
(width, height) => {
|
||||
calls.push(`offscreen:${width}x${height}`);
|
||||
return expectedCanvas;
|
||||
},
|
||||
() => {
|
||||
calls.push('dom');
|
||||
return {} as HTMLCanvasElement;
|
||||
}
|
||||
);
|
||||
|
||||
assert.deepEqual({ canvas, calls }, {
|
||||
canvas: expectedCanvas,
|
||||
calls: ['offscreen:2x3']
|
||||
});
|
||||
});
|
||||
|
||||
it('uses the main-realm DOM canvas factory when OffscreenCanvas is unavailable', () => {
|
||||
const expectedCanvas = {} as HTMLCanvasElement;
|
||||
const calls: string[] = [];
|
||||
|
||||
const canvas = createPatternCanvas(
|
||||
4,
|
||||
5,
|
||||
undefined,
|
||||
(width, height) => {
|
||||
calls.push(`dom:${width}x${height}`);
|
||||
return expectedCanvas;
|
||||
}
|
||||
);
|
||||
|
||||
assert.deepEqual({ canvas, calls }, {
|
||||
canvas: expectedCanvas,
|
||||
calls: ['dom:4x5']
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -8,29 +8,6 @@ import type { ILogService } from 'common/services/Services';
|
||||
import { customGlyphDefinitions } from './CustomGlyphDefinitions';
|
||||
import { CustomGlyphDefinitionType, CustomGlyphScaleType, CustomGlyphVectorType, type CustomGlyphDefinitionPart, type CustomGlyphPathDrawFunctionDefinition, type CustomGlyphPatternDefinition, type ICustomGlyphSolidOctantBlockVector, type ICustomGlyphVectorShape } from './Types';
|
||||
|
||||
type PatternCanvas = HTMLCanvasElement | OffscreenCanvas;
|
||||
type PatternCanvasFactory = (width: number, height: number) => PatternCanvas;
|
||||
|
||||
const createOffscreenPatternCanvas: PatternCanvasFactory | undefined = typeof OffscreenCanvas === 'undefined'
|
||||
? undefined
|
||||
: (width, height) => new OffscreenCanvas(width, height);
|
||||
|
||||
const createDomPatternCanvas: PatternCanvasFactory = (width, height) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
return canvas;
|
||||
};
|
||||
|
||||
export function createPatternCanvas(
|
||||
width: number,
|
||||
height: number,
|
||||
offscreenCanvasFactory: PatternCanvasFactory | undefined = createOffscreenPatternCanvas,
|
||||
domCanvasFactory: PatternCanvasFactory = createDomPatternCanvas
|
||||
): PatternCanvas {
|
||||
return offscreenCanvasFactory?.(width, height) ?? domCanvasFactory(width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Try drawing a custom block element or box drawing character, returning whether it was
|
||||
* successfully drawn.
|
||||
@@ -481,9 +458,9 @@ function drawPatternChar(
|
||||
if (!pattern) {
|
||||
const width = charDefinition[0].length;
|
||||
const height = charDefinition.length;
|
||||
// The atlas canvas can be adopted into another document, so temporary resources must not use
|
||||
// its mutable ownerDocument.
|
||||
const tmpCanvas = createPatternCanvas(width, height);
|
||||
const tmpCanvas = ctx.canvas.ownerDocument.createElement('canvas');
|
||||
tmpCanvas.width = width;
|
||||
tmpCanvas.height = height;
|
||||
const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d'));
|
||||
const imageData = new ImageData(width, height);
|
||||
|
||||
|
||||
@@ -1,480 +1,103 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* Reproduces the single-terminal WebGL crash/garble when the texture atlas
|
||||
* page count overflows TextureAtlas.maxAtlasPages (vscode#322756 class).
|
||||
*
|
||||
* GlyphRenderer sizes its GL texture array and fragment-shader sampler array
|
||||
* to exactly maxAtlasPages at construction time, but TextureAtlas._createNewPage
|
||||
* pushes past that cap whenever a 4-page same-size merge is impossible (e.g. a
|
||||
* heterogeneous mix like 1024+512+512+512). The next GlyphRenderer.render then
|
||||
* throws "Cannot read properties of undefined (reading 'version')" and cells
|
||||
* reference sampler indexes the shader does not have, freezing/garbling the
|
||||
* terminal. Long heavy-CLI sessions hit this in production; the test makes it
|
||||
* fast by building the renderer with a small cap (the same code path as the
|
||||
* production 8/16/32 values).
|
||||
*
|
||||
* Chromium only (additive scope; Firefox/WebKit WebGL broken in CI, xtermjs#5854).
|
||||
*/
|
||||
|
||||
import { IImage32, decodePng } from '@lunapaint/png-codec';
|
||||
import test, { expect } from '@playwright/test';
|
||||
import type { Terminal, ITerminalInitOnlyOptions, ITerminalOptions } from '@xterm/xterm';
|
||||
import type { IWebglAddonOptions, WebglAddon } from '@xterm/addon-webgl';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import {
|
||||
captureRowSignatures,
|
||||
expectSignatureMatches,
|
||||
loadWebglStrict,
|
||||
resetMaxAtlasPages,
|
||||
setMaxAtlasPages,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateUniqueGlyphFlood } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
type CellSignature = number[];
|
||||
type TestTerminalConstructor = new (options?: ITerminalOptions & ITerminalInitOnlyOptions) => ITestTerminal;
|
||||
type TestWebglAddonConstructor = new (options?: IWebglAddonOptions) => ITestWebglAddon;
|
||||
const HEADER = ' OVERFLOW_REF_0123456789';
|
||||
const HEADER_COLS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
interface ITestTextureAtlasConstructor {
|
||||
maxAtlasPages: number | undefined;
|
||||
maxTextureSize: number | undefined;
|
||||
}
|
||||
|
||||
interface ITestAtlasPage {
|
||||
canvas: HTMLCanvasElement;
|
||||
}
|
||||
|
||||
interface ITestTextureAtlas {
|
||||
constructor: ITestTextureAtlasConstructor;
|
||||
pages: ITestAtlasPage[];
|
||||
pageLayoutVersion: number;
|
||||
_overflowSizePage?: ITestAtlasPage;
|
||||
_textureSize: number;
|
||||
}
|
||||
|
||||
interface ITestGlyphRenderer {
|
||||
_atlasTextures: unknown[];
|
||||
}
|
||||
|
||||
interface ITestRenderer {
|
||||
_charAtlas?: ITestTextureAtlas;
|
||||
_glyphRenderer?: {
|
||||
value?: ITestGlyphRenderer;
|
||||
};
|
||||
dimensions: {
|
||||
device: {
|
||||
cell: {
|
||||
width: number;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestRenderService {
|
||||
_renderer?: {
|
||||
value?: ITestRenderer;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestTerminal extends Terminal {
|
||||
_core?: {
|
||||
_renderService?: ITestRenderService;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestWebglAddon extends WebglAddon {
|
||||
_renderer?: ITestRenderer;
|
||||
}
|
||||
|
||||
interface IAtlasEventStats {
|
||||
removals: number;
|
||||
maxPages: number;
|
||||
}
|
||||
|
||||
interface ITestWindow extends Window {
|
||||
Terminal: TestTerminalConstructor;
|
||||
WebglAddon: TestWebglAddonConstructor;
|
||||
term: ITestTerminal;
|
||||
termB?: ITestTerminal;
|
||||
addon?: ITestWebglAddon;
|
||||
addonB?: ITestWebglAddon;
|
||||
atlasEventStats?: IAtlasEventStats;
|
||||
}
|
||||
|
||||
interface IAtlasLimits {
|
||||
maxAtlasPages: number;
|
||||
maxTextureSize: number;
|
||||
}
|
||||
|
||||
interface IAtlasState {
|
||||
pages: number;
|
||||
atlasTextures: number;
|
||||
pageLayoutVersion: number;
|
||||
overflowPageCreated: boolean;
|
||||
removals: number;
|
||||
maxPages: number;
|
||||
}
|
||||
|
||||
const NORMAL_HEADER = ' NORMAL_REF_0123456789';
|
||||
const POST_EVICTION_TEXT = ' AFTER_EVICTION_0123456789';
|
||||
const NORMAL_HEADER_COLS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const POST_EVICTION_COLS = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
||||
const TERM_B_SELECTOR = '#terminal-container-b .xterm-screen';
|
||||
const TERM_SELECTOR = '#terminal-container .xterm-screen';
|
||||
|
||||
async function loadWebglStrict(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
w.addon = new w.WebglAddon({ preserveDrawingBuffer: true });
|
||||
w.term.loadAddon(w.addon);
|
||||
});
|
||||
const isWebglRenderer = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
return !!w.addon && w.term._core?._renderService?._renderer?.value === w.addon._renderer;
|
||||
});
|
||||
expect(isWebglRenderer, 'WebGL renderer must be active').toBe(true);
|
||||
}
|
||||
|
||||
async function createTerminalB(ctx: ITestContext, cols: number): Promise<void> {
|
||||
await ctx.page.evaluate(columnCount => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
w.termB?.dispose();
|
||||
document.getElementById('terminal-container-b')?.remove();
|
||||
const element = document.createElement('div');
|
||||
element.id = 'terminal-container-b';
|
||||
document.body.appendChild(element);
|
||||
w.termB = new w.Terminal({ cols: columnCount, rows: 24, allowProposedApi: true });
|
||||
w.termB.open(element);
|
||||
w.addonB = new w.WebglAddon({ preserveDrawingBuffer: true });
|
||||
w.termB.loadAddon(w.addonB);
|
||||
}, cols);
|
||||
}
|
||||
|
||||
async function writeToBAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
await ctx.page.evaluate(value => new Promise<void>(resolve => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
if (!w.termB) {
|
||||
throw new Error('Terminal B must be created before writing to it');
|
||||
}
|
||||
const disposable = w.termB.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
w.termB.write(value);
|
||||
}), data);
|
||||
}
|
||||
|
||||
async function writeAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
const renderPromise = new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await ctx.proxy.write(data);
|
||||
await renderPromise;
|
||||
}
|
||||
|
||||
async function refreshAndWaitForRender(ctx: ITestContext, terminal: 'term' | 'termB'): Promise<void> {
|
||||
await ctx.page.evaluate(name => new Promise<void>(resolve => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const term = w[name];
|
||||
if (!term) {
|
||||
throw new Error(`${name} must exist before refreshing it`);
|
||||
}
|
||||
const disposable = term.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
term.refresh(0, term.rows - 1);
|
||||
}), terminal);
|
||||
}
|
||||
|
||||
async function configureAtlasLimits(ctx: ITestContext): Promise<IAtlasLimits> {
|
||||
const limits = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const atlas = w.term._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (!atlas || atlas.constructor.maxAtlasPages === undefined || atlas.constructor.maxTextureSize === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const result = {
|
||||
maxAtlasPages: atlas.constructor.maxAtlasPages,
|
||||
maxTextureSize: atlas.constructor.maxTextureSize
|
||||
};
|
||||
atlas.constructor.maxAtlasPages = 4;
|
||||
atlas.constructor.maxTextureSize = 512;
|
||||
return result;
|
||||
});
|
||||
expect(limits, 'TextureAtlas limits must be initialized').toBeDefined();
|
||||
return limits!;
|
||||
}
|
||||
|
||||
async function restoreAtlasLimits(ctx: ITestContext, limits: IAtlasLimits | undefined): Promise<void> {
|
||||
if (!limits) {
|
||||
return;
|
||||
}
|
||||
await ctx.page.evaluate(original => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const atlas = w.term._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (atlas) {
|
||||
atlas.constructor.maxAtlasPages = original.maxAtlasPages;
|
||||
atlas.constructor.maxTextureSize = original.maxTextureSize;
|
||||
}
|
||||
}, limits);
|
||||
}
|
||||
|
||||
async function installAtlasEventStats(ctx: ITestContext): Promise<void> {
|
||||
const installed = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const atlas = w.term._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (!atlas || !w.addon) {
|
||||
return false;
|
||||
}
|
||||
const stats: IAtlasEventStats = {
|
||||
removals: 0,
|
||||
maxPages: atlas.pages.length
|
||||
};
|
||||
w.atlasEventStats = stats;
|
||||
w.addon.onAddTextureAtlasCanvas(() => {
|
||||
stats.maxPages = Math.max(stats.maxPages, atlas.pages.length);
|
||||
});
|
||||
w.addon.onRemoveTextureAtlasCanvas(() => stats.removals++);
|
||||
return true;
|
||||
});
|
||||
expect(installed, 'atlas event tracking must be installed').toBe(true);
|
||||
}
|
||||
|
||||
async function getAtlasState(ctx: ITestContext): Promise<IAtlasState> {
|
||||
const state = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const renderer = w.term._core?._renderService?._renderer?.value;
|
||||
const atlas = renderer?._charAtlas;
|
||||
const glyphRenderer = renderer?._glyphRenderer?.value;
|
||||
const stats = w.atlasEventStats;
|
||||
if (!atlas || !glyphRenderer || !stats) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
pages: atlas.pages.length,
|
||||
atlasTextures: glyphRenderer._atlasTextures.length,
|
||||
pageLayoutVersion: atlas.pageLayoutVersion,
|
||||
overflowPageCreated: !!atlas._overflowSizePage,
|
||||
removals: stats.removals,
|
||||
maxPages: stats.maxPages
|
||||
};
|
||||
});
|
||||
expect(state, 'atlas state must be available').toBeDefined();
|
||||
return state!;
|
||||
}
|
||||
|
||||
function generateUniqueGlyphFlood(count: number, cols: number, offset: number): string {
|
||||
const base = 0x4E00;
|
||||
const range = 0x9FFF - base;
|
||||
const perRow = Math.max(1, Math.floor(cols / 2));
|
||||
let result = '';
|
||||
for (let i = 0; i < count; i++) {
|
||||
result += String.fromCodePoint(base + ((offset + i) % range));
|
||||
if ((i + 1) % perRow === 0 && i + 1 < count) {
|
||||
result += '\r\n';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function captureRowSignatures(ctx: ITestContext, selector: string, cols: number, row: number, sampleCols: number[], debugName: string): Promise<CellSignature[]> {
|
||||
const screenshotOptions = process.env.DEBUG ? { path: `out-esbuild-test/playwright/${debugName}.png` } : undefined;
|
||||
const buffer = await ctx.page.locator(selector).screenshot(screenshotOptions);
|
||||
const frame = {
|
||||
cols,
|
||||
rows: 24,
|
||||
decoded: (await decodePng(new Uint8Array(buffer), { force32: true })).image
|
||||
};
|
||||
return sampleCols.map(col => cellSignature(frame, col, row));
|
||||
}
|
||||
|
||||
function cellSignature(frame: { cols: number, rows: number, decoded: IImage32 }, col: number, row: number): CellSignature {
|
||||
const grid = 4;
|
||||
const data = frame.decoded.data;
|
||||
const imageWidth = frame.decoded.width;
|
||||
const cellWidth = frame.decoded.width / frame.cols;
|
||||
const cellHeight = frame.decoded.height / frame.rows;
|
||||
const x0 = (col - 1) * cellWidth;
|
||||
const y0 = (row - 1) * cellHeight;
|
||||
const sums = new Array<number>(grid * grid * 4).fill(0);
|
||||
const counts = new Array<number>(grid * grid).fill(0);
|
||||
const startX = Math.max(0, Math.floor(x0));
|
||||
const startY = Math.max(0, Math.floor(y0));
|
||||
const endX = Math.min(frame.decoded.width, Math.ceil(x0 + cellWidth));
|
||||
const endY = Math.min(frame.decoded.height, Math.ceil(y0 + cellHeight));
|
||||
|
||||
for (let y = startY; y < endY; y++) {
|
||||
const gy = Math.min(grid - 1, Math.max(0, Math.floor(((y - y0) / cellHeight) * grid)));
|
||||
for (let x = startX; x < endX; x++) {
|
||||
const gx = Math.min(grid - 1, Math.max(0, Math.floor(((x - x0) / cellWidth) * grid)));
|
||||
const sub = gy * grid + gx;
|
||||
const i = (y * imageWidth + x) * 4;
|
||||
sums[sub * 4] += data[i];
|
||||
sums[sub * 4 + 1] += data[i + 1];
|
||||
sums[sub * 4 + 2] += data[i + 2];
|
||||
sums[sub * 4 + 3] += data[i + 3];
|
||||
counts[sub]++;
|
||||
}
|
||||
}
|
||||
|
||||
const signature = new Array<number>(grid * grid * 4).fill(0);
|
||||
for (let sub = 0; sub < counts.length; sub++) {
|
||||
if (counts[sub] > 0) {
|
||||
signature[sub * 4] = sums[sub * 4] / counts[sub];
|
||||
signature[sub * 4 + 1] = sums[sub * 4 + 1] / counts[sub];
|
||||
signature[sub * 4 + 2] = sums[sub * 4 + 2] / counts[sub];
|
||||
signature[sub * 4 + 3] = sums[sub * 4 + 3] / counts[sub];
|
||||
}
|
||||
}
|
||||
return signature;
|
||||
}
|
||||
|
||||
function signatureDiff(actual: CellSignature, reference: CellSignature): number {
|
||||
let diff = 0;
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
diff = Math.max(diff, Math.abs(actual[i] - reference[i]));
|
||||
}
|
||||
return diff;
|
||||
}
|
||||
|
||||
function expectSignatureMatches(actual: CellSignature, reference: CellSignature, message: string): void {
|
||||
const diff = signatureDiff(actual, reference);
|
||||
expect(diff, `${message}; max channel diff ${diff}`).toBeLessThanOrEqual(14);
|
||||
}
|
||||
|
||||
test.describe('atlas page overflow (#6038)', () => {
|
||||
test.describe('atlas page overflow (#322756 class)', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium');
|
||||
test.describe.configure({ timeout: 90000 });
|
||||
test.describe.configure({ timeout: 60000 });
|
||||
|
||||
test('evicts normal pages when the page cap cannot be reduced by merging', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
test('renderer survives the atlas exceeding maxAtlasPages-sized textures', async ({ browser }) => {
|
||||
const ctx: ITestContext = await createTestContext(browser);
|
||||
const errors: string[] = [];
|
||||
const onError = (error: Error): void => { errors.push(error.message); };
|
||||
let limits: IAtlasLimits | undefined;
|
||||
const onError = (e: Error): void => { errors.push(e.message); };
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
// Bootstrap: create a throwaway WebGL terminal so the TextureAtlas class
|
||||
// statics exist, then lower the page cap. openTerminal() disposes the old
|
||||
// terminal (and its atlas), so the next WebGL renderer is CONSTRUCTED
|
||||
// with the small cap: its GL texture array and fragment-shader sampler
|
||||
// array have exactly 4 entries, faithfully mirroring production where
|
||||
// they always equal maxAtlasPages.
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
limits = await configureAtlasLimits(ctx);
|
||||
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await createTerminalB(ctx, 80);
|
||||
await installAtlasEventStats(ctx);
|
||||
|
||||
const atlasShared = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
return w.term._core?._renderService?._renderer?.value?._charAtlas === w.termB?._core?._renderService?._renderer?.value?._charAtlas;
|
||||
});
|
||||
expect(atlasShared, 'terminals with equal configs should share one texture atlas').toBe(true);
|
||||
const atlasTexturesLength = await ctx.page.evaluate(() =>
|
||||
(window as any).term._core._renderService._renderer.value._glyphRenderer.value._atlasTextures.length);
|
||||
expect(atlasTexturesLength, 'renderer must be built with the lowered page cap').toBe(4);
|
||||
|
||||
await writeToBAndWaitForRender(ctx, `\x1b[H${NORMAL_HEADER}\x1b[2;1H${POST_EVICTION_TEXT}`);
|
||||
const headerReference = await captureRowSignatures(ctx, TERM_B_SELECTOR, 80, 1, NORMAL_HEADER_COLS, 'atlas-overflow-header-reference');
|
||||
const postReference = await captureRowSignatures(ctx, TERM_B_SELECTOR, 80, 2, POST_EVICTION_COLS, 'atlas-overflow-post-reference');
|
||||
await writeToBAndWaitForRender(ctx, '\x1b[2;1H\x1b[2K');
|
||||
// Pinned header in the alt buffer; body churns distinct CJK glyphs below
|
||||
// (cursor-positioned, no trailing linefeed on the bottom row -> no scroll).
|
||||
await writeAndWaitForRender(ctx, `\x1b[?1049h\x1b[H${HEADER}`);
|
||||
const reference = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
await ctx.page.locator('#terminal-container .xterm-screen').screenshot({ path: 'out-esbuild-test/playwright/overflow-before.png' });
|
||||
|
||||
const initialState = await getAtlasState(ctx);
|
||||
const glyphsPerChunk = 23 * 40 - 1;
|
||||
for (let chunk = 0; chunk < 24; chunk++) {
|
||||
await ctx.proxy.write('\x1b[H\x1b[2J' + generateUniqueGlyphFlood(glyphsPerChunk, 80, chunk * glyphsPerChunk));
|
||||
for (let c = 0; c < 16; c++) {
|
||||
// Plain write + short wait instead of waiting for a render event: once
|
||||
// the overflow crash fires, render events stop arriving and a render
|
||||
// wait would hang the test instead of failing it.
|
||||
await ctx.proxy.write('\x1b[2;1H' + generateUniqueGlyphFlood(glyphsPerChunk, 80, c * glyphsPerChunk));
|
||||
await ctx.page.waitForTimeout(50);
|
||||
const state = await getAtlasState(ctx);
|
||||
if (state.removals > 0 || state.pages > state.atlasTextures || errors.length > 0) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
await ctx.page.waitForTimeout(300);
|
||||
await ctx.page.locator('#terminal-container .xterm-screen').screenshot({ path: 'out-esbuild-test/playwright/overflow-after.png' });
|
||||
|
||||
const evictionState = await getAtlasState(ctx);
|
||||
expect(evictionState.removals, 'normal atlas pages must be evicted at the page cap').toBeGreaterThan(0);
|
||||
expect(evictionState.pageLayoutVersion, 'eviction must invalidate renderer models').toBeGreaterThan(initialState.pageLayoutVersion);
|
||||
expect(evictionState.maxPages, 'atlas pages must stay within renderer texture capacity').toBeLessThanOrEqual(evictionState.atlasTextures);
|
||||
expect(errors, `renderer must not throw during atlas eviction: ${errors[0] ?? ''}`).toEqual([]);
|
||||
|
||||
await writeToBAndWaitForRender(ctx, `\x1b[2;1H${POST_EVICTION_TEXT}`);
|
||||
const termBHeader = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
return w.termB?.buffer.active.getLine(0)?.translateToString(true);
|
||||
const state = await ctx.page.evaluate(() => {
|
||||
const renderer = (window as any).term._core._renderService._renderer.value;
|
||||
return {
|
||||
pages: renderer._charAtlas.pages.length,
|
||||
atlasTextures: renderer._glyphRenderer.value._atlasTextures.length
|
||||
};
|
||||
});
|
||||
expect(termBHeader, 'terminal B buffer must still contain the header').toBe(NORMAL_HEADER);
|
||||
console.error('[overflow] pages=', state.pages, 'atlasTextures=', state.atlasTextures, 'pageErrors=', errors.length, errors[0] ?? '');
|
||||
|
||||
const headerAfter = await captureRowSignatures(ctx, TERM_B_SELECTOR, 80, 1, NORMAL_HEADER_COLS, 'atlas-overflow-header-after');
|
||||
const postAfter = await captureRowSignatures(ctx, TERM_B_SELECTOR, 80, 2, POST_EVICTION_COLS, 'atlas-overflow-post-after');
|
||||
for (let i = 0; i < NORMAL_HEADER_COLS.length; i++) {
|
||||
expectSignatureMatches(headerAfter[i], headerReference[i], `existing header col ${NORMAL_HEADER_COLS[i]} changed after eviction`);
|
||||
}
|
||||
for (let i = 0; i < POST_EVICTION_COLS.length; i++) {
|
||||
expectSignatureMatches(postAfter[i], postReference[i], `new text col ${POST_EVICTION_COLS[i]} changed after eviction`);
|
||||
}
|
||||
// Contract: the page count must never exceed the renderer's texture and
|
||||
// sampler capacity, and rendering must never throw.
|
||||
expect(errors, `GlyphRenderer must not crash when the atlas is saturated: ${errors[0] ?? ''}`).toEqual([]);
|
||||
expect(state.pages, 'atlas page count must stay within the renderer texture capacity').toBeLessThanOrEqual(state.atlasTextures);
|
||||
|
||||
const stableState = await getAtlasState(ctx);
|
||||
await refreshAndWaitForRender(ctx, 'termB');
|
||||
const refreshedState = await getAtlasState(ctx);
|
||||
expect(refreshedState.pageLayoutVersion, 'an unchanged full refresh must not evict again').toBe(stableState.pageLayoutVersion);
|
||||
expect(refreshedState.removals, 'an unchanged full refresh must not remove more pages').toBe(stableState.removals);
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
await restoreAtlasLimits(ctx, limits).catch(() => {});
|
||||
await ctx.page.close();
|
||||
}
|
||||
});
|
||||
|
||||
test('evicts before adding an oversized glyph page at the page cap', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
const errors: string[] = [];
|
||||
const onError = (error: Error): void => { errors.push(error.message); };
|
||||
let limits: IAtlasLimits | undefined;
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
await openTerminal(ctx, { cols: 160, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
limits = await configureAtlasLimits(ctx);
|
||||
|
||||
await openTerminal(ctx, { cols: 160, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await installAtlasEventStats(ctx);
|
||||
|
||||
let state = await getAtlasState(ctx);
|
||||
let offset = 0;
|
||||
for (let chunk = 0; chunk < 120 && state.pages < state.atlasTextures; chunk++) {
|
||||
const glyphCount = state.pages < state.atlasTextures - 1 ? 200 : 25;
|
||||
await ctx.proxy.write('\x1b[H\x1b[2J' + generateUniqueGlyphFlood(glyphCount, 160, offset));
|
||||
await ctx.page.waitForTimeout(50);
|
||||
offset += glyphCount;
|
||||
state = await getAtlasState(ctx);
|
||||
}
|
||||
expect(state.pages, 'normal atlas pages must reach the texture capacity before the oversized glyph').toBe(state.atlasTextures);
|
||||
expect(state.overflowPageCreated, 'normal glyph filling must not create the oversized page').toBe(false);
|
||||
expect(errors, `renderer must not fail while filling normal pages: ${errors[0] ?? ''}`).toEqual([]);
|
||||
|
||||
await writeAndWaitForRender(ctx, '\x1b[H\x1b[2K\x1b[24;1H');
|
||||
const sampleCols = [1, 8, 16, 24, 32];
|
||||
const blankSignatures = await captureRowSignatures(ctx, TERM_SELECTOR, 160, 1, sampleCols, 'atlas-overflow-wide-blank');
|
||||
const joinedLength = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const renderer = w.term._core?._renderService?._renderer?.value;
|
||||
const atlas = renderer?._charAtlas;
|
||||
if (!renderer || !atlas) {
|
||||
throw new Error('renderer and atlas must exist');
|
||||
}
|
||||
const cellWidth = renderer.dimensions.device.cell.width;
|
||||
const length = Math.min(w.term.cols - 1, Math.ceil(atlas._textureSize / cellWidth) + 32);
|
||||
if (length * cellWidth <= atlas._textureSize) {
|
||||
throw new Error('joined glyph must be wider than a normal atlas page');
|
||||
}
|
||||
const marker = 'W'.repeat(length);
|
||||
w.term.registerCharacterJoiner(text => text.startsWith(marker) ? [[0, length]] : []);
|
||||
return length;
|
||||
});
|
||||
|
||||
const beforeOversized = await getAtlasState(ctx);
|
||||
await ctx.proxy.write(`\x1b[H${'W'.repeat(joinedLength)}`);
|
||||
await ctx.page.waitForTimeout(50);
|
||||
const oversizedState = await getAtlasState(ctx);
|
||||
expect(oversizedState.overflowPageCreated, 'the joined glyph must use the oversized atlas page').toBe(true);
|
||||
expect(oversizedState.removals, 'normal pages must be evicted before adding the oversized page').toBeGreaterThan(beforeOversized.removals);
|
||||
expect(oversizedState.maxPages, 'oversized page creation must stay within renderer texture capacity').toBeLessThanOrEqual(oversizedState.atlasTextures);
|
||||
expect(oversizedState.pageLayoutVersion, 'oversized eviction must invalidate renderer models').toBeGreaterThan(beforeOversized.pageLayoutVersion);
|
||||
expect(errors, `renderer must not throw while adding the oversized page: ${errors[0] ?? ''}`).toEqual([]);
|
||||
|
||||
const wideSignatures = await captureRowSignatures(ctx, TERM_SELECTOR, 160, 1, sampleCols, 'atlas-overflow-wide-after');
|
||||
for (let i = 0; i < sampleCols.length; i++) {
|
||||
expect(signatureDiff(wideSignatures[i], blankSignatures[i]), `wide glyph col ${sampleCols[i]} must render visible pixels`).toBeGreaterThan(14);
|
||||
}
|
||||
|
||||
const stableState = await getAtlasState(ctx);
|
||||
await refreshAndWaitForRender(ctx, 'term');
|
||||
const refreshedState = await getAtlasState(ctx);
|
||||
expect(refreshedState.pageLayoutVersion, 'oversized glyph refresh must settle without another eviction').toBe(stableState.pageLayoutVersion);
|
||||
expect(refreshedState.removals, 'oversized glyph refresh must not remove more pages').toBe(stableState.removals);
|
||||
const wideAfterRefresh = await captureRowSignatures(ctx, TERM_SELECTOR, 160, 1, sampleCols, 'atlas-overflow-wide-refreshed');
|
||||
for (let i = 0; i < sampleCols.length; i++) {
|
||||
expectSignatureMatches(wideAfterRefresh[i], wideSignatures[i], `wide glyph col ${sampleCols[i]} changed after refresh`);
|
||||
// The untouched header must still render correctly after the churn.
|
||||
const after = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
for (let i = 0; i < HEADER_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `header col ${HEADER_COLS[i]} corrupted after atlas saturation`);
|
||||
}
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
await restoreAtlasLimits(ctx, limits).catch(() => {});
|
||||
// Restore the default so a lowered cap can never leak into other tests.
|
||||
await resetMaxAtlasPages(ctx).catch(() => { /* page may already be unusable after a crash */ });
|
||||
await ctx.page.close();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,288 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { decodePng, type IImage32 } from '@lunapaint/png-codec';
|
||||
import test, { expect } from '@playwright/test';
|
||||
import type { Terminal, ITerminalInitOnlyOptions, ITerminalOptions } from '@xterm/xterm';
|
||||
import type { IWebglAddonOptions, WebglAddon } from '@xterm/addon-webgl';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
|
||||
type CellSignature = number[];
|
||||
type TestTerminalConstructor = new (options?: ITerminalOptions & ITerminalInitOnlyOptions) => ITestTerminal;
|
||||
type TestWebglAddonConstructor = new (options?: IWebglAddonOptions) => ITestWebglAddon;
|
||||
|
||||
interface ITestTextureAtlas {
|
||||
readonly pages: ReadonlyArray<{ readonly canvas: HTMLCanvasElement }>;
|
||||
}
|
||||
|
||||
interface ITestGlyphRenderer {
|
||||
readonly _atlasTextures: ReadonlyArray<unknown>;
|
||||
}
|
||||
|
||||
interface ITestRenderer {
|
||||
_charAtlas?: ITestTextureAtlas;
|
||||
_glyphRenderer?: {
|
||||
value?: ITestGlyphRenderer;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestRenderService {
|
||||
_renderer?: {
|
||||
value?: ITestRenderer;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestTerminal extends Terminal {
|
||||
_core?: {
|
||||
_renderService?: ITestRenderService;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestWebglAddon extends WebglAddon {
|
||||
_renderer?: ITestRenderer;
|
||||
}
|
||||
|
||||
interface IAtlasEventStats {
|
||||
additions: number;
|
||||
maxPages: number;
|
||||
}
|
||||
|
||||
interface ITestWindow {
|
||||
WebglAddon: TestWebglAddonConstructor;
|
||||
term: ITestTerminal;
|
||||
addon?: ITestWebglAddon;
|
||||
atlasEventStats?: IAtlasEventStats;
|
||||
}
|
||||
|
||||
interface IAtlasState {
|
||||
additions: number;
|
||||
atlasTextures: number;
|
||||
maxPages: number;
|
||||
}
|
||||
|
||||
const REFERENCE_LINE = 'Ref0123456789ABCDEF';
|
||||
const REFERENCE_COLS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
|
||||
const TERM_SELECTOR = '#terminal-container .xterm-screen';
|
||||
|
||||
async function loadWebglStrict(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
w.addon = new w.WebglAddon({ preserveDrawingBuffer: true });
|
||||
w.term.loadAddon(w.addon);
|
||||
});
|
||||
const isWebglRenderer = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
return !!w.addon && w.term._core?._renderService?._renderer?.value === w.addon._renderer;
|
||||
});
|
||||
expect(isWebglRenderer, 'WebGL renderer must be active').toBe(true);
|
||||
}
|
||||
|
||||
async function installAtlasEventStats(ctx: ITestContext): Promise<void> {
|
||||
const installed = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const atlas = w.term._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (!atlas || !w.addon) {
|
||||
return false;
|
||||
}
|
||||
const stats: IAtlasEventStats = {
|
||||
additions: 0,
|
||||
maxPages: atlas.pages.length
|
||||
};
|
||||
w.atlasEventStats = stats;
|
||||
w.addon.onAddTextureAtlasCanvas(() => {
|
||||
stats.additions++;
|
||||
stats.maxPages = Math.max(stats.maxPages, atlas.pages.length);
|
||||
});
|
||||
return true;
|
||||
});
|
||||
expect(installed, 'atlas event tracking must be installed').toBe(true);
|
||||
}
|
||||
|
||||
async function getAtlasState(ctx: ITestContext): Promise<IAtlasState> {
|
||||
const state = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
const renderer = w.term._core?._renderService?._renderer?.value;
|
||||
const glyphRenderer = renderer?._glyphRenderer?.value;
|
||||
const stats = w.atlasEventStats;
|
||||
if (!glyphRenderer || !stats) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
additions: stats.additions,
|
||||
atlasTextures: glyphRenderer._atlasTextures.length,
|
||||
maxPages: stats.maxPages
|
||||
};
|
||||
});
|
||||
expect(state, 'atlas state must be available').toBeDefined();
|
||||
return state!;
|
||||
}
|
||||
|
||||
async function writeAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
const renderPromise = new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await ctx.proxy.write(data);
|
||||
await renderPromise;
|
||||
}
|
||||
|
||||
async function refreshAndWaitForRender(ctx: ITestContext): Promise<void> {
|
||||
const renderPromise = new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await ctx.proxy.refresh(0, (await ctx.proxy.rows) - 1);
|
||||
await renderPromise;
|
||||
}
|
||||
|
||||
function generateSyntheticTuiFrames(frameCount: number, cols: number, rows: number): string[] {
|
||||
const spinner = ['|', '/', '-', '\\'];
|
||||
const words = ['reading', 'rendering', 'atlas', 'terminal', 'buffer', 'tokens', 'diff', 'patch'];
|
||||
const frames: string[] = [];
|
||||
for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
|
||||
const lines = [
|
||||
`+${'-'.repeat(cols - 2)}+`,
|
||||
`|${(` ${spinner[frameIndex % spinner.length]} Copilot is working`).padEnd(cols - 2).slice(0, cols - 2)}|`,
|
||||
`+${'-'.repeat(cols - 2)}+`
|
||||
];
|
||||
for (let row = 3; row < rows - 1; row++) {
|
||||
const foreground = 31 + ((frameIndex + row) % 6);
|
||||
const text = `${words[(frameIndex + row) % words.length]} ${frameIndex}:${row}`;
|
||||
lines.push(`\x1b[${foreground}m${text}\x1b[0m`);
|
||||
}
|
||||
lines.push(`\x1b[2mtokens ${1000 + frameIndex * 37}\x1b[0m`);
|
||||
frames.push(`\x1b[2J\x1b[H${lines.join('\r\n')}`);
|
||||
}
|
||||
return frames;
|
||||
}
|
||||
|
||||
function generateUniqueGlyphFlood(count: number, cols: number, offset: number): string {
|
||||
const base = 0x4E00;
|
||||
const range = 0x9FFF - base;
|
||||
const perRow = Math.max(1, Math.floor(cols / 2));
|
||||
let result = '';
|
||||
for (let i = 0; i < count; i++) {
|
||||
result += String.fromCodePoint(base + ((offset + i) % range));
|
||||
if ((i + 1) % perRow === 0 && i + 1 < count) {
|
||||
result += '\r\n';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function captureRowSignatures(ctx: ITestContext, row: number, cols: number[], debugName: string): Promise<CellSignature[]> {
|
||||
const screenshotOptions = process.env.DEBUG ? { path: `out-esbuild-test/playwright/${debugName}.png` } : undefined;
|
||||
const buffer = await ctx.page.locator(TERM_SELECTOR).screenshot(screenshotOptions);
|
||||
const frame = {
|
||||
cols: await ctx.proxy.cols,
|
||||
rows: await ctx.proxy.rows,
|
||||
decoded: (await decodePng(new Uint8Array(buffer), { force32: true })).image
|
||||
};
|
||||
return cols.map(col => cellSignature(frame, col, row));
|
||||
}
|
||||
|
||||
function cellSignature(frame: { cols: number, rows: number, decoded: IImage32 }, col: number, row: number): CellSignature {
|
||||
const grid = 4;
|
||||
const data = frame.decoded.data;
|
||||
const imageWidth = frame.decoded.width;
|
||||
const cellWidth = frame.decoded.width / frame.cols;
|
||||
const cellHeight = frame.decoded.height / frame.rows;
|
||||
const x0 = (col - 1) * cellWidth;
|
||||
const y0 = (row - 1) * cellHeight;
|
||||
const sums = new Array<number>(grid * grid * 4).fill(0);
|
||||
const counts = new Array<number>(grid * grid).fill(0);
|
||||
const startX = Math.max(0, Math.floor(x0));
|
||||
const startY = Math.max(0, Math.floor(y0));
|
||||
const endX = Math.min(frame.decoded.width, Math.ceil(x0 + cellWidth));
|
||||
const endY = Math.min(frame.decoded.height, Math.ceil(y0 + cellHeight));
|
||||
|
||||
for (let y = startY; y < endY; y++) {
|
||||
const gy = Math.min(grid - 1, Math.max(0, Math.floor(((y - y0) / cellHeight) * grid)));
|
||||
for (let x = startX; x < endX; x++) {
|
||||
const gx = Math.min(grid - 1, Math.max(0, Math.floor(((x - x0) / cellWidth) * grid)));
|
||||
const sub = gy * grid + gx;
|
||||
const i = (y * imageWidth + x) * 4;
|
||||
sums[sub * 4] += data[i];
|
||||
sums[sub * 4 + 1] += data[i + 1];
|
||||
sums[sub * 4 + 2] += data[i + 2];
|
||||
sums[sub * 4 + 3] += data[i + 3];
|
||||
counts[sub]++;
|
||||
}
|
||||
}
|
||||
|
||||
const signature = new Array<number>(grid * grid * 4).fill(0);
|
||||
for (let sub = 0; sub < counts.length; sub++) {
|
||||
if (counts[sub] > 0) {
|
||||
signature[sub * 4] = sums[sub * 4] / counts[sub];
|
||||
signature[sub * 4 + 1] = sums[sub * 4 + 1] / counts[sub];
|
||||
signature[sub * 4 + 2] = sums[sub * 4 + 2] / counts[sub];
|
||||
signature[sub * 4 + 3] = sums[sub * 4 + 3] / counts[sub];
|
||||
}
|
||||
}
|
||||
return signature;
|
||||
}
|
||||
|
||||
function expectSignatureMatches(actual: CellSignature, reference: CellSignature, message: string): void {
|
||||
let diff = 0;
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
diff = Math.max(diff, Math.abs(actual[i] - reference[i]));
|
||||
}
|
||||
expect(diff, `${message}; max channel diff ${diff}`).toBeLessThanOrEqual(14);
|
||||
}
|
||||
|
||||
test.describe('WebGL atlas TUI stress (#6038)', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL atlas tests run on Chromium/SwiftShader only');
|
||||
test.describe.configure({ timeout: 90000 });
|
||||
|
||||
test('primary-buffer glyphs survive alternate-buffer redraws and atlas page churn', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
const errors: string[] = [];
|
||||
const onError = (error: Error): void => { errors.push(error.message); };
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24, scrollback: 5000 });
|
||||
await loadWebglStrict(ctx);
|
||||
await installAtlasEventStats(ctx);
|
||||
|
||||
await writeAndWaitForRender(ctx, REFERENCE_LINE);
|
||||
const reference = await captureRowSignatures(ctx, 1, REFERENCE_COLS, 'atlas-stress-reference');
|
||||
|
||||
await writeAndWaitForRender(ctx, '\x1b[?1049h');
|
||||
for (const frame of generateSyntheticTuiFrames(30, 80, 24)) {
|
||||
await writeAndWaitForRender(ctx, frame);
|
||||
}
|
||||
const glyphsPerViewport = 23 * 40 - 1;
|
||||
for (let chunk = 0; chunk < 4; chunk++) {
|
||||
await writeAndWaitForRender(ctx, `\x1b[2J\x1b[H${generateUniqueGlyphFlood(glyphsPerViewport, 80, chunk * glyphsPerViewport)}`);
|
||||
}
|
||||
await writeAndWaitForRender(ctx, '\x1b[?1049l');
|
||||
await refreshAndWaitForRender(ctx);
|
||||
|
||||
const state = await getAtlasState(ctx);
|
||||
expect(state.additions, 'stress workload must add atlas pages').toBeGreaterThan(0);
|
||||
expect(state.maxPages, 'stress workload must exercise multiple atlas pages').toBeGreaterThan(1);
|
||||
expect(state.maxPages, 'atlas pages must remain within renderer texture capacity').toBeLessThanOrEqual(state.atlasTextures);
|
||||
expect(errors, `renderer must not throw during TUI stress: ${errors[0] ?? ''}`).toEqual([]);
|
||||
|
||||
const primaryText = await ctx.page.evaluate(() => {
|
||||
const w = window as unknown as ITestWindow;
|
||||
return w.term.buffer.active.getLine(0)?.translateToString(true);
|
||||
});
|
||||
expect(primaryText, 'primary buffer must still contain the reference line').toBe(REFERENCE_LINE);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS, 'atlas-stress-after');
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], `primary-buffer glyph at col ${REFERENCE_COLS[i]} changed after TUI stress`);
|
||||
}
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
await ctx.page.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,77 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2026 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import test, { expect } from '@playwright/test';
|
||||
import { platform } from 'os';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
|
||||
interface ITestRendererWithAtlasCanvas {
|
||||
readonly _charAtlas?: {
|
||||
readonly _tmpCanvas?: HTMLCanvasElement;
|
||||
};
|
||||
}
|
||||
|
||||
async function writeAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
const renderPromise = new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await ctx.proxy.write(data);
|
||||
await renderPromise;
|
||||
}
|
||||
|
||||
test.describe('WebGL custom glyphs', () => {
|
||||
if (platform() === 'linux') {
|
||||
test.skip(({ browserName }) => browserName === 'firefox' || browserName === 'webkit');
|
||||
}
|
||||
|
||||
test('pattern glyphs render after the terminal is adopted into another document', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
const errors: string[] = [];
|
||||
const onError = (error: Error): void => { errors.push(error.message); };
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
await openTerminal(ctx);
|
||||
await ctx.page.evaluate(`
|
||||
window.addon = new window.WebglAddon({ customGlyphs: true });
|
||||
window.term.loadAddon(window.addon);
|
||||
`);
|
||||
await ctx.page.evaluate(() => {
|
||||
const frame = document.createElement('iframe');
|
||||
document.body.appendChild(frame);
|
||||
const auxiliaryDocument = frame.contentDocument;
|
||||
if (!auxiliaryDocument?.body || !window.term.element) {
|
||||
throw new Error('Auxiliary document and terminal element must be available');
|
||||
}
|
||||
const renderer = window.term._core?._renderService?._renderer?.value as ITestRendererWithAtlasCanvas | undefined;
|
||||
const atlasCanvas = renderer?._charAtlas?._tmpCanvas;
|
||||
if (!atlasCanvas) {
|
||||
throw new Error('Texture atlas canvas must be available');
|
||||
}
|
||||
// Model the atlas state after an uncached glyph has attached the measurement canvas.
|
||||
window.term.element.appendChild(atlasCanvas);
|
||||
auxiliaryDocument.body.appendChild(window.term.element);
|
||||
if (atlasCanvas.ownerDocument !== auxiliaryDocument) {
|
||||
throw new Error('Texture atlas canvas must be adopted into the auxiliary document');
|
||||
}
|
||||
auxiliaryDocument.createElement = () => {
|
||||
throw new Error('Not allowed to create elements in the auxiliary document');
|
||||
};
|
||||
});
|
||||
|
||||
await writeAndWaitForRender(ctx, '\u2591');
|
||||
await writeAndWaitForRender(ctx, 'X');
|
||||
|
||||
const line = await ctx.page.evaluate(() => window.term.buffer.active.getLine(0)?.translateToString(true));
|
||||
expect(errors, `renderer must not create pattern canvases in the auxiliary document: ${errors[0] ?? ''}`).toEqual([]);
|
||||
expect(line).toBe('\u2591X');
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
await ctx.page.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* WebGL device-pixel-ratio (HiDPI) and font-size ("resize") atlas tests.
|
||||
*
|
||||
* A devicePixelRatio > 1 and font-size changes both change the device cell
|
||||
* dimensions, which key the texture atlas cache and force the atlas to be
|
||||
* rebuilt. Historically these paths have produced blank/oversized/garbled glyphs
|
||||
* (e.g. xtermjs#4728, #5915/#5929). These tests assert glyphs render and stay
|
||||
* correct across those transitions.
|
||||
*
|
||||
* Chromium + SwiftShader only (additive scope; Firefox/WebKit WebGL broken in CI
|
||||
* per xtermjs#5854).
|
||||
*/
|
||||
|
||||
import test, { Browser, expect } from '@playwright/test';
|
||||
import { ITestContext, TerminalProxy, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import {
|
||||
assertTextureAtlasPresent,
|
||||
captureRowSignatures,
|
||||
expectSignatureMatches,
|
||||
loadWebglStrict,
|
||||
waitForRender,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
|
||||
const REFERENCE_COLS = [1, 2, 3, 4, 5, 6, 7, 8];
|
||||
|
||||
/**
|
||||
* Creates a test context whose page uses a specific devicePixelRatio. The shared
|
||||
* `createTestContext` helper always uses DPR 1 (`browser.newPage()`), so HiDPI
|
||||
* tests build their own context here.
|
||||
*/
|
||||
async function createDprContext(browser: Browser, deviceScaleFactor: number): Promise<ITestContext> {
|
||||
const context = await browser.newContext({ deviceScaleFactor });
|
||||
const page = await context.newPage();
|
||||
page.on('pageerror', e => console.error(`[dpr ${deviceScaleFactor}]`, e));
|
||||
await page.goto('/test');
|
||||
const proxy = new TerminalProxy(page);
|
||||
proxy.initPage();
|
||||
return {
|
||||
browser,
|
||||
page,
|
||||
termHandle: await page.evaluateHandle('window.term'),
|
||||
proxy
|
||||
};
|
||||
}
|
||||
|
||||
test.describe('WebGL HiDPI (devicePixelRatio) rendering', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL atlas tests run on Chromium/SwiftShader only');
|
||||
|
||||
test('initializes the WebGL renderer and scales to device pixels at devicePixelRatio 2', async ({ browser }) => {
|
||||
const ctx = await createDprContext(browser, 2);
|
||||
try {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
// GPU must be genuinely active at HiDPI (asserted inside loadWebglStrict).
|
||||
await loadWebglStrict(ctx);
|
||||
await writeAndWaitForRender(ctx, 'A W .');
|
||||
await assertTextureAtlasPresent(ctx);
|
||||
|
||||
// The WebGL renderer must render at the device resolution: device cell
|
||||
// dimensions should be ~2x the CSS cell dimensions. This catches the
|
||||
// DPR-scaling class of bugs (e.g. xtermjs#4728) without relying on
|
||||
// screenshotting a WebGL canvas at a non-1 device scale factor.
|
||||
const dims = await ctx.proxy.core.renderDimensions;
|
||||
expect(dims.device.cell.width).toBeGreaterThan(dims.css.cell.width * 1.8);
|
||||
expect(dims.device.cell.width).toBeLessThan(dims.css.cell.width * 2.2);
|
||||
expect(dims.device.cell.height).toBeGreaterThan(dims.css.cell.height * 1.8);
|
||||
expect(dims.device.cell.height).toBeLessThan(dims.css.cell.height * 2.2);
|
||||
} finally {
|
||||
await ctx.page.context().close();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('WebGL font-size change atlas integrity', () => {
|
||||
let ctx: ITestContext;
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL atlas tests run on Chromium/SwiftShader only');
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
ctx = await createDprContext(browser, 1);
|
||||
});
|
||||
test.afterAll(async () => await ctx.page.close());
|
||||
|
||||
test.beforeEach(async () => {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24, fontSize: 15 });
|
||||
await loadWebglStrict(ctx);
|
||||
});
|
||||
|
||||
test('glyphs stay correct after cycling font size (atlas rebuilds)', async () => {
|
||||
await writeAndWaitForRender(ctx, 'FontRef0123456789');
|
||||
const reference = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
|
||||
// Changing font size changes device cell dimensions -> the atlas is rebuilt.
|
||||
for (const fontSize of [12, 18, 21, 15]) {
|
||||
await ctx.proxy.setOption('fontSize', fontSize);
|
||||
await writeAndWaitForRender(ctx, '\r\nchurn');
|
||||
}
|
||||
|
||||
// Back at the original font size the reference glyphs must be unchanged.
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 16, `reference glyph at col ${REFERENCE_COLS[i]} corrupted after font-size cycling`);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* WebGL glyph + texture-atlas integrity tests.
|
||||
*
|
||||
* These tests verify that *glyphs* render correctly (not just that cell colors
|
||||
* are right) under conditions that stress the texture atlas: multiple atlas
|
||||
* pages, page merges and atlas clears. The goal is to catch the "garbled glyph"
|
||||
* corruption class reported in microsoft/vscode#322756.
|
||||
*
|
||||
* Note: CI runs WebGL on Chromium + SwiftShader (software WebGL). That catches
|
||||
* renderer/atlas *logic* corruption (stale texture pages, missing model clears),
|
||||
* but not GPU-driver-specific glitches. These tests target the former.
|
||||
*/
|
||||
|
||||
import test, { expect } from '@playwright/test';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import {
|
||||
assertTextureAtlasPresent,
|
||||
captureRowSignatures,
|
||||
expectSignatureDiffers,
|
||||
expectSignatureMatches,
|
||||
floodDistinctGlyphs,
|
||||
loadWebglStrict,
|
||||
resetMaxAtlasPages,
|
||||
setMaxAtlasPages,
|
||||
waitForRender,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
|
||||
let ctx: ITestContext;
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
ctx = await createTestContext(browser);
|
||||
});
|
||||
test.afterAll(async () => await ctx.page.close());
|
||||
|
||||
test.describe('WebGL glyph + atlas integrity', () => {
|
||||
// Additive scope: only run on Chromium (SwiftShader). Firefox/WebKit WebGL
|
||||
// tests are known-broken in CI (xtermjs#5854) and out of scope here.
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL atlas tests run on Chromium/SwiftShader only');
|
||||
|
||||
test.beforeEach(async () => {
|
||||
// Fresh terminal (and therefore a predictable atlas) per test.
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
});
|
||||
|
||||
// A lowered page cap must not leak into renderers built by later tests.
|
||||
test.afterEach(async () => await resetMaxAtlasPages(ctx));
|
||||
|
||||
test('renders distinct, non-blank glyphs', async () => {
|
||||
await writeAndWaitForRender(ctx, 'A W .');
|
||||
await assertTextureAtlasPresent(ctx);
|
||||
|
||||
const [a, w, dot, blank] = await captureRowSignatures(ctx, 1, [1, 3, 5, 40]);
|
||||
// A written cell must differ from an empty cell (glyph actually drawn).
|
||||
expectSignatureDiffers(a, blank, 24, 'glyph "A" should not be blank');
|
||||
expectSignatureDiffers(w, blank, 24, 'glyph "W" should not be blank');
|
||||
// Different glyphs must look different (signature has discriminating power).
|
||||
expectSignatureDiffers(a, w, 24, 'glyphs "A" and "W" should render differently');
|
||||
expectSignatureDiffers(a, dot, 24, 'glyphs "A" and "." should render differently');
|
||||
});
|
||||
|
||||
test('glyphs on the first atlas page stay correct after more pages are allocated', async () => {
|
||||
// Reference: a known row of glyphs that lands on the first atlas page.
|
||||
await writeAndWaitForRender(ctx, 'REFERENCE_LINE_0123456789\r\n');
|
||||
const cols = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
const reference = await captureRowSignatures(ctx, 1, cols);
|
||||
|
||||
// Flood thousands of distinct glyphs (one screenful rendered at a time, so
|
||||
// they actually rasterize) to force multiple atlas pages.
|
||||
const pages = await floodDistinctGlyphs(ctx, 4);
|
||||
expect(pages, 'flooding distinct glyphs should allocate more than one atlas page').toBeGreaterThan(1);
|
||||
|
||||
// Bring the reference line back into view and re-check its glyphs.
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, cols);
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `reference glyph at col ${cols[i]} corrupted after multi-page allocation`);
|
||||
}
|
||||
});
|
||||
|
||||
test('glyphs stay correct after a texture-atlas page merge', async () => {
|
||||
// Force merges to happen almost immediately.
|
||||
await writeAndWaitForRender(ctx, 'MERGE_REF_LINE_0123456789\r\n');
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
|
||||
const cols = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
const reference = await captureRowSignatures(ctx, 1, cols);
|
||||
|
||||
// Flood distinct glyphs (rendered per screenful) to exceed the tiny page cap
|
||||
// and trigger merges.
|
||||
const pages = await floodDistinctGlyphs(ctx, 12);
|
||||
expect(pages, 'flood should have allocated multiple atlas pages (and merged)').toBeGreaterThan(1);
|
||||
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, cols);
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `reference glyph at col ${cols[i]} corrupted after atlas page merge`);
|
||||
}
|
||||
});
|
||||
|
||||
test('glyphs re-render correctly after clearTextureAtlas() on the same terminal', async () => {
|
||||
await writeAndWaitForRender(ctx, 'CLEAR_REF_LINE_0123456789');
|
||||
const cols = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
const reference = await captureRowSignatures(ctx, 1, cols);
|
||||
|
||||
await ctx.proxy.clearTextureAtlas();
|
||||
// Force a full redraw so glyphs are re-rasterized into the cleared atlas.
|
||||
await ctx.proxy.refresh(0, (await ctx.proxy.rows) - 1);
|
||||
await waitForRender(ctx);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, cols);
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `glyph at col ${cols[i]} corrupted after clearTextureAtlas()`);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* Single-terminal guard for the vscode#322756 "garbled glyph" class: a pinned
|
||||
* alt-buffer header must render identically while the body churns enough
|
||||
* distinct colored glyphs to force texture-atlas page merges.
|
||||
*
|
||||
* Note this scenario is GREEN on current master: the single-terminal mid-frame
|
||||
* merge race was fixed upstream (merge-retry loop in WebglRenderer.renderRows +
|
||||
* globally monotonic AtlasPage versions). The test asserts the buffer content
|
||||
* first so a content bug (e.g. an accidental scroll from the churn stream) can
|
||||
* never masquerade as renderer corruption.
|
||||
*/
|
||||
import test, { expect } from '@playwright/test';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import { captureRowSignatures, expectSignatureMatches, getAtlasPageCount, loadWebglStrict, resetMaxAtlasPages, setMaxAtlasPages, writeAndWaitForRender } from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateColoredAsciiFlood } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
const HEADER = ' HEADER_REF_0123456789';
|
||||
|
||||
let ctx: ITestContext;
|
||||
test.beforeAll(async ({ browser }) => { ctx = await createTestContext(browser); });
|
||||
test.afterAll(async () => await ctx.page.close());
|
||||
|
||||
test.describe('single-terminal merge integrity (#322756 class)', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium');
|
||||
test.describe.configure({ timeout: 60000 });
|
||||
|
||||
// A lowered page cap must not leak into renderers built by later tests.
|
||||
test.afterEach(async () => await resetMaxAtlasPages(ctx));
|
||||
|
||||
test('pinned header renders identically across 30 merge-heavy body redraws', async () => {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
const cols = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
// Alt-buffer TUI: pinned header on row 1, body churns below (like Copilot CLI).
|
||||
await writeAndWaitForRender(ctx, `\x1b[?1049h\x1b[H${HEADER}`);
|
||||
const ref = await captureRowSignatures(ctx, 1, cols);
|
||||
let maxDiff = 0;
|
||||
for (let c = 0; c < 30; c++) {
|
||||
// Redraw body rows 2..24 with unique glyphs; the header row is never touched.
|
||||
let frame = '\x1b[2;1H';
|
||||
frame += generateColoredAsciiFlood(23 * 78, c * 23 * 78);
|
||||
await writeAndWaitForRender(ctx, frame);
|
||||
const now = await captureRowSignatures(ctx, 1, cols); // forces GPU sync
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
const d = Math.max(...ref[i].map((v, k) => Math.abs(v - now[i][k])));
|
||||
maxDiff = Math.max(maxDiff, d);
|
||||
}
|
||||
}
|
||||
console.error('[repro] pages=', await getAtlasPageCount(ctx), 'headerMaxDiff=', maxDiff);
|
||||
|
||||
// Guard: the header must still be in the buffer. If this fails the churn
|
||||
// stream scrolled the screen and any pixel diff is meaningless.
|
||||
const row1Text = await ctx.page.evaluate(() => (window as any).term.buffer.active.getLine(0)?.translateToString(true));
|
||||
expect(row1Text, 'churn stream must not scroll the pinned header out of the buffer').toBe(HEADER);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, cols);
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
expectSignatureMatches(after[i], ref[i], 14, `header col ${cols[i]} garbled`);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,92 +1,66 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* Reproduces the vscode#322756 "garbled glyph" corruption across terminals that
|
||||
* SHARE a texture atlas (CharAtlasCache hands the same TextureAtlas to every
|
||||
* terminal with an equal config — in VS Code that is every integrated terminal
|
||||
* using the same font settings, including task/background terminals).
|
||||
*
|
||||
* Mechanism: when the atlas merges pages it raises a consume-once
|
||||
* "clear model" flag (TextureAtlas.beginFrame). Only the FIRST terminal to
|
||||
* render consumes it and rebuilds its vertex model; every other terminal keeps
|
||||
* stale texture-page indexes/coordinates in its vertex buffer and draws wrong
|
||||
* glyphs on its next partial render, even though its buffer content is intact.
|
||||
*
|
||||
* The DOM-renderer control shows the corruption is exclusive to the GPU path
|
||||
* (`terminal.integrated.gpuAcceleration off` cannot reproduce it: the DOM
|
||||
* renderer has no texture atlas).
|
||||
*
|
||||
* Chromium only (additive scope; Firefox/WebKit WebGL broken in CI, xtermjs#5854).
|
||||
*/
|
||||
|
||||
import { IImage32, decodePng } from '@lunapaint/png-codec';
|
||||
import test, { expect } from '@playwright/test';
|
||||
import type { Terminal, ITerminalInitOnlyOptions, ITerminalOptions } from '@xterm/xterm';
|
||||
import type { IWebglAddonOptions, WebglAddon } from '@xterm/addon-webgl';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
|
||||
type CellSignature = number[];
|
||||
type TestTerminalConstructor = new (options?: ITerminalOptions & ITerminalInitOnlyOptions) => ITestTerminal;
|
||||
type TestWebglAddonConstructor = new (options?: IWebglAddonOptions) => ITestWebglAddon;
|
||||
|
||||
interface ITestTextureAtlasConstructor {
|
||||
maxAtlasPages: number | undefined;
|
||||
}
|
||||
|
||||
interface ITestTextureAtlas {
|
||||
constructor: ITestTextureAtlasConstructor;
|
||||
}
|
||||
|
||||
interface ITestRenderer {
|
||||
_charAtlas?: ITestTextureAtlas;
|
||||
}
|
||||
|
||||
interface ITestRenderService {
|
||||
_renderer?: {
|
||||
value?: ITestRenderer;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestTerminal extends Terminal {
|
||||
_core?: {
|
||||
_renderService?: ITestRenderService;
|
||||
};
|
||||
}
|
||||
|
||||
interface ITestWebglAddon extends WebglAddon {
|
||||
_renderer?: ITestRenderer;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window { // eslint-disable-line @typescript-eslint/naming-convention
|
||||
Terminal: TestTerminalConstructor;
|
||||
WebglAddon: TestWebglAddonConstructor;
|
||||
term: ITestTerminal;
|
||||
termB?: ITestTerminal;
|
||||
addon?: ITestWebglAddon;
|
||||
addonB?: ITestWebglAddon;
|
||||
}
|
||||
}
|
||||
import {
|
||||
captureRowSignatures,
|
||||
expectSignatureMatches,
|
||||
getAtlasPageCount,
|
||||
loadWebglStrict,
|
||||
setMaxAtlasPages,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateColoredAsciiFlood } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
const HEADER = ' HEADER_REF_0123456789';
|
||||
const HEADER_COLS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const TERM_B_SELECTOR = '#terminal-container-b .xterm-screen';
|
||||
|
||||
async function loadWebglStrict(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
window.addon = new window.WebglAddon({ preserveDrawingBuffer: true });
|
||||
window.term.loadAddon(window.addon);
|
||||
});
|
||||
const isWebglRenderer = await ctx.page.evaluate(() => {
|
||||
return !!window.addon && window.term?._core?._renderService?._renderer?.value === window.addon._renderer;
|
||||
});
|
||||
expect(isWebglRenderer, 'WebGL renderer must be active').toBe(true);
|
||||
}
|
||||
|
||||
async function createTerminalB(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
window.termB?.dispose();
|
||||
/**
|
||||
* Creates a second terminal ("termB") on the test page with the given options
|
||||
* and optionally loads the WebGL addon on it. Identical rendering options mean
|
||||
* CharAtlasCache gives it the same atlas instance as `window.term`.
|
||||
*/
|
||||
async function createTerminalB(ctx: ITestContext, options: { useWebgl: boolean }): Promise<void> {
|
||||
await ctx.page.evaluate(async (useWebgl) => {
|
||||
const w = window as any;
|
||||
w.termB?.dispose();
|
||||
document.getElementById('terminal-container-b')?.remove();
|
||||
const el = document.createElement('div');
|
||||
el.id = 'terminal-container-b';
|
||||
document.body.appendChild(el);
|
||||
window.termB = new window.Terminal({ cols: 80, rows: 24, allowProposedApi: true });
|
||||
window.termB.open(el);
|
||||
window.addonB = new window.WebglAddon({ preserveDrawingBuffer: true });
|
||||
window.termB.loadAddon(window.addonB);
|
||||
});
|
||||
w.termB = new w.Terminal({ cols: 80, rows: 24, allowProposedApi: true });
|
||||
w.termB.open(el);
|
||||
if (useWebgl) {
|
||||
w.addonB = new w.WebglAddon({ preserveDrawingBuffer: true });
|
||||
w.termB.loadAddon(w.addonB);
|
||||
}
|
||||
}, options.useWebgl);
|
||||
}
|
||||
|
||||
/** Writes data to termB and resolves after its next render event. */
|
||||
async function writeToBAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
await ctx.page.evaluate(d => new Promise<void>(resolve => {
|
||||
const termB = window.termB;
|
||||
if (!termB) {
|
||||
throw new Error('Terminal B must be created before writing to it');
|
||||
}
|
||||
const termB = (window as any).termB;
|
||||
const disposable = termB.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
@@ -95,185 +69,88 @@ async function writeToBAndWaitForRender(ctx: ITestContext, data: string): Promis
|
||||
}), data);
|
||||
}
|
||||
|
||||
async function writeAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
const renderPromise = new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await ctx.proxy.write(data);
|
||||
await renderPromise;
|
||||
async function getTermBRow1Text(ctx: ITestContext): Promise<string | undefined> {
|
||||
return ctx.page.evaluate(() => (window as any).termB.buffer.active.getLine(0)?.translateToString(true));
|
||||
}
|
||||
|
||||
async function setMaxAtlasPages(ctx: ITestContext, maxAtlasPages: number): Promise<void> {
|
||||
const applied = await ctx.page.evaluate(max => {
|
||||
const atlas = window.term?._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (!atlas) {
|
||||
return false;
|
||||
}
|
||||
atlas.constructor.maxAtlasPages = max;
|
||||
return true;
|
||||
}, maxAtlasPages);
|
||||
expect(applied, 'should be able to set TextureAtlas.maxAtlasPages').toBe(true);
|
||||
}
|
||||
|
||||
async function resetMaxAtlasPages(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
const atlas = window.term?._core?._renderService?._renderer?.value?._charAtlas;
|
||||
if (atlas) {
|
||||
atlas.constructor.maxAtlasPages = undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function generateColoredAsciiFlood(cells: number, offset: number = 0): string {
|
||||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let out = '';
|
||||
for (let i = 0; i < cells; i++) {
|
||||
const ch = letters[(offset + i) % letters.length];
|
||||
const fg = (offset + i) % 256;
|
||||
const bg = (offset + i * 7) % 256;
|
||||
out += `\x1b[38;5;${fg}m\x1b[48;5;${bg}m${ch}`;
|
||||
if ((i + 1) % 78 === 0 && i + 1 < cells) {
|
||||
out += '\x1b[0m\r\n';
|
||||
}
|
||||
}
|
||||
return out + '\x1b[0m';
|
||||
}
|
||||
|
||||
async function captureRowSignatures(ctx: ITestContext, row: number, cols: number[]): Promise<CellSignature[]> {
|
||||
const screenshotOptions = process.env.DEBUG ? { path: 'out-esbuild-test/playwright/shared-atlas-term-b.png' } : undefined;
|
||||
const buffer = await ctx.page.locator(TERM_B_SELECTOR).screenshot(screenshotOptions);
|
||||
const frame = {
|
||||
cols: 80,
|
||||
rows: 24,
|
||||
decoded: (await decodePng(new Uint8Array(buffer), { force32: true })).image
|
||||
};
|
||||
return cols.map(col => cellSignature(frame, col, row));
|
||||
}
|
||||
|
||||
function cellSignature(frame: { cols: number, rows: number, decoded: IImage32 }, col: number, row: number): CellSignature {
|
||||
const grid = 4;
|
||||
const data = frame.decoded.data;
|
||||
const imageWidth = frame.decoded.width;
|
||||
const cellWidth = frame.decoded.width / frame.cols;
|
||||
const cellHeight = frame.decoded.height / frame.rows;
|
||||
const x0 = (col - 1) * cellWidth;
|
||||
const y0 = (row - 1) * cellHeight;
|
||||
const sums = new Array<number>(grid * grid * 4).fill(0);
|
||||
const counts = new Array<number>(grid * grid).fill(0);
|
||||
const startX = Math.max(0, Math.floor(x0));
|
||||
const startY = Math.max(0, Math.floor(y0));
|
||||
const endX = Math.min(frame.decoded.width, Math.ceil(x0 + cellWidth));
|
||||
const endY = Math.min(frame.decoded.height, Math.ceil(y0 + cellHeight));
|
||||
|
||||
for (let y = startY; y < endY; y++) {
|
||||
const gy = Math.min(grid - 1, Math.max(0, Math.floor(((y - y0) / cellHeight) * grid)));
|
||||
for (let x = startX; x < endX; x++) {
|
||||
const gx = Math.min(grid - 1, Math.max(0, Math.floor(((x - x0) / cellWidth) * grid)));
|
||||
const sub = gy * grid + gx;
|
||||
const i = (y * imageWidth + x) * 4;
|
||||
sums[sub * 4] += data[i];
|
||||
sums[sub * 4 + 1] += data[i + 1];
|
||||
sums[sub * 4 + 2] += data[i + 2];
|
||||
sums[sub * 4 + 3] += data[i + 3];
|
||||
counts[sub]++;
|
||||
}
|
||||
}
|
||||
|
||||
const signature = new Array<number>(grid * grid * 4).fill(0);
|
||||
for (let sub = 0; sub < counts.length; sub++) {
|
||||
if (counts[sub] > 0) {
|
||||
signature[sub * 4] = sums[sub * 4] / counts[sub];
|
||||
signature[sub * 4 + 1] = sums[sub * 4 + 1] / counts[sub];
|
||||
signature[sub * 4 + 2] = sums[sub * 4 + 2] / counts[sub];
|
||||
signature[sub * 4 + 3] = sums[sub * 4 + 3] / counts[sub];
|
||||
}
|
||||
}
|
||||
return signature;
|
||||
}
|
||||
|
||||
function expectSignatureMatches(actual: CellSignature, reference: CellSignature, message: string): void {
|
||||
let diff = 0;
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
diff = Math.max(diff, Math.abs(actual[i] - reference[i]));
|
||||
}
|
||||
expect(diff, `${message}; max channel diff ${diff}`).toBeLessThanOrEqual(14);
|
||||
}
|
||||
|
||||
test.describe('shared-atlas garble across terminals (#6038)', () => {
|
||||
test.describe('shared-atlas garble across terminals (#322756)', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium');
|
||||
test.describe.configure({ timeout: 60000 });
|
||||
|
||||
test('keeps a second terminal rendering correctly after shared atlas page merges', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
test('terminal B keeps rendering its header correctly while terminal A forces atlas merges', async ({ browser }) => {
|
||||
const ctx: ITestContext = await createTestContext(browser);
|
||||
try {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await createTerminalB(ctx);
|
||||
await createTerminalB(ctx, { useWebgl: true });
|
||||
|
||||
// Both terminals must be using the same atlas instance for this test to
|
||||
// mean anything.
|
||||
const atlasShared = await ctx.page.evaluate(() => {
|
||||
return window.term._core?._renderService?._renderer?.value?._charAtlas === window.termB?._core?._renderService?._renderer?.value?._charAtlas;
|
||||
const w = window as any;
|
||||
const atlasA = w.term._core._renderService._renderer.value._charAtlas;
|
||||
const atlasB = w.termB._core._renderService._renderer.value._charAtlas;
|
||||
return !!atlasA && atlasA === atlasB;
|
||||
});
|
||||
expect(atlasShared, 'terminals with equal configs should share one texture atlas').toBe(true);
|
||||
|
||||
// Lower the cap AFTER both renderers exist so their shaders/texture
|
||||
// arrays keep the original size (this test targets stale vertex data,
|
||||
// not the page-overflow crash).
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
|
||||
// Render B's header pre-merge and capture its reference pixels.
|
||||
await writeToBAndWaitForRender(ctx, HEADER);
|
||||
const reference = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
await ctx.page.locator(TERM_B_SELECTOR).screenshot({ path: 'out-esbuild-test/playwright/termB-before.png' });
|
||||
const reference = await captureRowSignatures(ctx, 1, HEADER_COLS, { selector: TERM_B_SELECTOR, termGlobal: 'termB' });
|
||||
|
||||
// Churn terminal A with distinct colored glyphs to force page merges in
|
||||
// the SHARED atlas. A repairs itself (it consumes the clear-model flag);
|
||||
// B is never told.
|
||||
for (let c = 0; c < 10; c++) {
|
||||
await writeAndWaitForRender(ctx, '\x1b[2;1H' + generateColoredAsciiFlood(23 * 78, c * 23 * 78));
|
||||
}
|
||||
const pages = await getAtlasPageCount(ctx);
|
||||
expect(pages, 'churn should have exercised multiple atlas pages').toBeGreaterThan(1);
|
||||
|
||||
// A tiny unrelated update to B's LAST row triggers a partial render in B.
|
||||
// B's header row is untouched; with a healthy renderer its pixels must
|
||||
// not change.
|
||||
await writeToBAndWaitForRender(ctx, '\x1b[24;1Hx');
|
||||
const termBHeader = await ctx.page.evaluate(() => window.termB?.buffer.active.getLine(0)?.translateToString(true));
|
||||
expect(termBHeader, 'terminal B buffer must still contain the header').toBe(HEADER);
|
||||
await ctx.page.locator(TERM_B_SELECTOR).screenshot({ path: 'out-esbuild-test/playwright/termB-after.png' });
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
// Guard: B's buffer content is intact, so any pixel change is renderer
|
||||
// corruption by construction.
|
||||
expect(await getTermBRow1Text(ctx), 'terminal B buffer must still contain the header').toBe(HEADER);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, HEADER_COLS, { selector: TERM_B_SELECTOR, termGlobal: 'termB' });
|
||||
for (let i = 0; i < HEADER_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], `terminal B header col ${HEADER_COLS[i]} garbled by terminal A's atlas merges`);
|
||||
expectSignatureMatches(after[i], reference[i], 14, `terminal B header col ${HEADER_COLS[i]} garbled by terminal A's atlas merges`);
|
||||
}
|
||||
} finally {
|
||||
await resetMaxAtlasPages(ctx).catch(() => {});
|
||||
await ctx.page.close();
|
||||
}
|
||||
});
|
||||
|
||||
test('keeps a second terminal rendering correctly after terminal A clears the shared atlas', async ({ browser }) => {
|
||||
const ctx = await createTestContext(browser);
|
||||
test('DOM renderer control: same workload cannot garble terminal B (no atlas without GPU acceleration)', async ({ browser }) => {
|
||||
const ctx: ITestContext = await createTestContext(browser);
|
||||
try {
|
||||
// No WebGL addon on either terminal -> DOM renderer -> no texture atlas.
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await createTerminalB(ctx);
|
||||
|
||||
const atlasShared = await ctx.page.evaluate(() => {
|
||||
return window.term._core?._renderService?._renderer?.value?._charAtlas === window.termB?._core?._renderService?._renderer?.value?._charAtlas;
|
||||
});
|
||||
expect(atlasShared, 'terminals with equal configs should share one texture atlas').toBe(true);
|
||||
await createTerminalB(ctx, { useWebgl: false });
|
||||
|
||||
await writeToBAndWaitForRender(ctx, HEADER);
|
||||
const reference = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
const reference = await captureRowSignatures(ctx, 1, HEADER_COLS, { selector: TERM_B_SELECTOR, termGlobal: 'termB' });
|
||||
|
||||
// Terminal A alone clears the shared atlas, as embedders do to force a redraw (VS Code calls
|
||||
// this for every terminal on OS resume). This wipes the pages that terminal B's model still
|
||||
// holds texture coords into.
|
||||
await ctx.proxy.clearTextureAtlas();
|
||||
|
||||
// Terminal A repopulates the cleared pages with a different glyph set, so B's stale coords now
|
||||
// resolve to whatever A rasterized into those slots.
|
||||
await writeAndWaitForRender(ctx, '\x1b[2;1H' + generateColoredAsciiFlood(23 * 78));
|
||||
|
||||
// Nudge B into a render that does not touch row 1, mirroring a terminal that is idle but
|
||||
// visible. Row 1 must still be drawn from a model B rebuilt against the current atlas.
|
||||
for (let c = 0; c < 10; c++) {
|
||||
await writeAndWaitForRender(ctx, '\x1b[2;1H' + generateColoredAsciiFlood(23 * 78, c * 23 * 78));
|
||||
}
|
||||
await writeToBAndWaitForRender(ctx, '\x1b[24;1Hx');
|
||||
const termBHeader = await ctx.page.evaluate(() => window.termB?.buffer.active.getLine(0)?.translateToString(true));
|
||||
expect(termBHeader, 'terminal B buffer must still contain the header').toBe(HEADER);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, HEADER_COLS);
|
||||
expect(await getTermBRow1Text(ctx), 'terminal B buffer must still contain the header').toBe(HEADER);
|
||||
const after = await captureRowSignatures(ctx, 1, HEADER_COLS, { selector: TERM_B_SELECTOR, termGlobal: 'termB' });
|
||||
for (let i = 0; i < HEADER_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], `terminal B header col ${HEADER_COLS[i]} garbled by terminal A's atlas clear`);
|
||||
expectSignatureMatches(after[i], reference[i], 14, `DOM-rendered terminal B header col ${HEADER_COLS[i]} unexpectedly changed`);
|
||||
}
|
||||
} finally {
|
||||
await ctx.page.close();
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* Single-terminal WebGL atlas stress: try to reproduce the "garbled glyph"
|
||||
* corruption from microsoft/vscode#322756 in ONE terminal (no shared atlas),
|
||||
* via heavy unique-glyph churn that forces atlas page merges, both with content
|
||||
* pinned on screen (TUI-style) and mid-scroll. Chromium/SwiftShader only.
|
||||
*/
|
||||
|
||||
import test, { expect } from '@playwright/test';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import {
|
||||
captureRowSignatures,
|
||||
expectSignatureMatches,
|
||||
floodDistinctGlyphs,
|
||||
getAtlasPageCount,
|
||||
loadWebglStrict,
|
||||
resetMaxAtlasPages,
|
||||
setMaxAtlasPages,
|
||||
waitForRender,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateUniqueGlyphFlood } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
let ctx: ITestContext;
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
ctx = await createTestContext(browser);
|
||||
});
|
||||
test.afterAll(async () => await ctx.page.close());
|
||||
|
||||
test.describe('WebGL single-terminal heavy render + merge', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL atlas tests run on Chromium/SwiftShader only');
|
||||
test.describe.configure({ timeout: 30000 });
|
||||
|
||||
test.beforeEach(async () => {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24, scrollback: 5000 });
|
||||
await loadWebglStrict(ctx);
|
||||
});
|
||||
|
||||
// A lowered page cap must not leak into renderers built by later tests.
|
||||
test.afterEach(async () => await resetMaxAtlasPages(ctx));
|
||||
|
||||
test('heavy merge churn must not crash the GlyphRenderer (vscode#322756)', async () => {
|
||||
// Guard: heavy merges must not throw from GlyphRenderer.render. Note the
|
||||
// page cap here is lowered AFTER the renderer was built, so _atlasTextures
|
||||
// keeps its original (large) length and this test cannot hit the
|
||||
// page-overflow crash; that scenario needs the cap lowered BEFORE loading
|
||||
// the addon and is covered separately (WebglAtlasOverflow.test.ts).
|
||||
const errors: string[] = [];
|
||||
const onError = (e: Error): void => { errors.push(e.message); };
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
await floodDistinctGlyphs(ctx, 10);
|
||||
// Force a GPU read (screenshot) mid-churn so a render lands during/after a
|
||||
// merge, then churn more — this reliably exposes the version crash.
|
||||
await captureRowSignatures(ctx, 1, [1, 2, 3]);
|
||||
const pages = await floodDistinctGlyphs(ctx, 10);
|
||||
expect(pages, 'should have allocated/merged pages').toBeGreaterThan(1);
|
||||
await ctx.page.waitForTimeout(300);
|
||||
expect(errors, `renderer crashed during atlas merges: ${errors[0] ?? ''}`).toEqual([]);
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
}
|
||||
});
|
||||
|
||||
test('pinned header stays correct while body churns many pages', async () => {
|
||||
const cols = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
await writeAndWaitForRender(ctx, 'HEADER_REF_0123456789');
|
||||
const reference = await captureRowSignatures(ctx, 1, cols);
|
||||
|
||||
// Body churns unique glyphs (forces merges) while header line stays on screen.
|
||||
const pages = await floodDistinctGlyphs(ctx, 8);
|
||||
expect(pages, 'should have allocated/merged pages').toBeGreaterThan(1);
|
||||
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, cols);
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `header glyph col ${cols[i]} corrupted by single-terminal merges`);
|
||||
}
|
||||
});
|
||||
|
||||
test('visible rows match content while scrolling (no merge)', async () => {
|
||||
// Big scrollback of distinct glyphs across multiple pages (no tiny page cap,
|
||||
// so no merge), then scroll up/down repeatedly.
|
||||
for (let c = 0; c < 8; c++) {
|
||||
await writeAndWaitForRender(ctx, generateUniqueGlyphFlood(24 * 40, 80, c * 24 * 40));
|
||||
}
|
||||
expect(await getAtlasPageCount(ctx)).toBeGreaterThan(1);
|
||||
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const top = await captureRowSignatures(ctx, 1, [1, 2, 3, 4, 5]);
|
||||
await ctx.proxy.scrollToBottom();
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
const topAgain = await captureRowSignatures(ctx, 1, [1, 2, 3, 4, 5]);
|
||||
for (let i = 0; i < top.length; i++) {
|
||||
expectSignatureMatches(topAgain[i], top[i], 14, `row1 col${i + 1} changed after scroll round-trip`);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* WebGL "heavy TUI" stress tests: large scrollback + scrolling, alternate-buffer
|
||||
* full-screen redraws (like an agent CLI animating output), high-volume
|
||||
* rendering and replay of recorded real-world TUI sessions (vim, colored ls).
|
||||
*
|
||||
* The shared invariant: a known reference row of glyphs, captured in a fresh
|
||||
* atlas, must still render identically after the stress workload. If the WebGL
|
||||
* texture atlas is corrupted by the workload the reference glyphs change and the
|
||||
* test fails. See microsoft/vscode#322756.
|
||||
*
|
||||
* Chromium + SwiftShader only (additive scope; Firefox/WebKit WebGL are broken
|
||||
* in CI per xtermjs#5854).
|
||||
*/
|
||||
|
||||
import { readFileSync } from 'fs';
|
||||
import test, { expect } from '@playwright/test';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import {
|
||||
assertTextureAtlasPresent,
|
||||
captureRowSignatures,
|
||||
expectSignatureMatches,
|
||||
loadWebglStrict,
|
||||
waitForRender,
|
||||
writeAndWaitForRender
|
||||
} from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateMixedGlyphBlock, generateSyntheticTuiFrames, generateUniqueGlyphFlood } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
const REFERENCE_COLS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const REFERENCE_LINE = 'Ref0123456789ABCDEF';
|
||||
|
||||
let ctx: ITestContext;
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
ctx = await createTestContext(browser);
|
||||
});
|
||||
test.afterAll(async () => await ctx.page.close());
|
||||
|
||||
test.describe('WebGL heavy TUI / scrolling stress', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium', 'WebGL stress tests run on Chromium/SwiftShader only');
|
||||
|
||||
test.beforeEach(async () => {
|
||||
await openTerminal(ctx, { cols: 80, rows: 24, scrollback: 5000 });
|
||||
await loadWebglStrict(ctx);
|
||||
});
|
||||
|
||||
test('reference glyphs survive heavy scrolling through large scrollback', async () => {
|
||||
await writeAndWaitForRender(ctx, `${REFERENCE_LINE}\r\n`);
|
||||
const reference = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
|
||||
// Push the reference far up into scrollback with thousands of varied glyphs.
|
||||
for (let i = 0; i < 20; i++) {
|
||||
await ctx.proxy.write(generateMixedGlyphBlock(i + 1, 30, 70));
|
||||
}
|
||||
await waitForRender(ctx);
|
||||
|
||||
// Scroll around, then back to the very top where the reference lives.
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
await ctx.proxy.scrollPages(3);
|
||||
await waitForRender(ctx);
|
||||
await ctx.proxy.scrollToTop();
|
||||
await waitForRender(ctx);
|
||||
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `reference glyph at col ${REFERENCE_COLS[i]} corrupted after heavy scrolling`);
|
||||
}
|
||||
});
|
||||
|
||||
test('alternate-buffer TUI redraws do not corrupt the restored primary buffer', async () => {
|
||||
// Reference content lives in the PRIMARY buffer.
|
||||
await writeAndWaitForRender(ctx, `${REFERENCE_LINE}`);
|
||||
const reference = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
|
||||
// Animate a synthetic agent TUI in the alternate buffer.
|
||||
const frames = generateSyntheticTuiFrames({ seed: 7, frames: 30, cols: 80, rows: 24, useAltBuffer: true });
|
||||
for (const frame of frames) {
|
||||
await ctx.proxy.write(frame);
|
||||
}
|
||||
await waitForRender(ctx);
|
||||
await assertTextureAtlasPresent(ctx);
|
||||
|
||||
// Back in the primary buffer the reference glyphs must be intact.
|
||||
await ctx.proxy.refresh(0, (await ctx.proxy.rows) - 1);
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `primary-buffer glyph at col ${REFERENCE_COLS[i]} corrupted by alt-buffer TUI redraws`);
|
||||
}
|
||||
});
|
||||
|
||||
test('reference glyphs survive a heavy mixed render + unique-glyph churn', async () => {
|
||||
// Capture the reference rendering of a known line in a fresh atlas.
|
||||
await writeAndWaitForRender(ctx, `${REFERENCE_LINE}`);
|
||||
const reference = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
|
||||
// High-volume rendering: synthetic TUI frames (which clear/redraw the screen)
|
||||
// plus a large unique-glyph flood to churn the atlas, mimicking a long agent
|
||||
// CLI session.
|
||||
const frames = generateSyntheticTuiFrames({ seed: 3, frames: 40, cols: 80, rows: 24 });
|
||||
for (const frame of frames) {
|
||||
await ctx.proxy.write(frame);
|
||||
}
|
||||
await ctx.proxy.write(generateUniqueGlyphFlood(3000, 80));
|
||||
await waitForRender(ctx);
|
||||
|
||||
// The synthetic frames erase the screen, so re-render the reference line and
|
||||
// assert the (heavily churned) atlas still draws those glyphs correctly.
|
||||
await writeAndWaitForRender(ctx, `\x1b[2J\x1b[H${REFERENCE_LINE}`);
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], reference[i], 14, `reference glyph at col ${REFERENCE_COLS[i]} corrupted after heavy render`);
|
||||
}
|
||||
});
|
||||
|
||||
test('replaying recorded TUI sessions renders without errors or atlas corruption', async () => {
|
||||
const pageErrors: string[] = [];
|
||||
const onError = (err: Error): void => {
|
||||
pageErrors.push(err.message);
|
||||
};
|
||||
ctx.page.on('pageerror', onError);
|
||||
try {
|
||||
const fixtures = [
|
||||
'./test/fixtures/escape_sequence_files/t0090-alt_screen.in',
|
||||
'./test/fixtures/escape_sequence_files/t0502-bash_ls_color.in',
|
||||
'./test/fixtures/escape_sequence_files/t0500-bash_long_line.in',
|
||||
'./test/fixtures/escape_sequence_files/t0504-vim.in'
|
||||
];
|
||||
for (const fixture of fixtures) {
|
||||
const data = readFileSync(fixture, { encoding: 'latin1' });
|
||||
await ctx.proxy.write(data);
|
||||
}
|
||||
await waitForRender(ctx);
|
||||
await assertTextureAtlasPresent(ctx);
|
||||
|
||||
// Re-rendering the final frame must be idempotent (self-consistent): if the
|
||||
// atlas were corrupted, a forced redraw would differ from what's shown.
|
||||
const before = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
await ctx.proxy.refresh(0, (await ctx.proxy.rows) - 1);
|
||||
await waitForRender(ctx);
|
||||
const after = await captureRowSignatures(ctx, 1, REFERENCE_COLS);
|
||||
for (let i = 0; i < REFERENCE_COLS.length; i++) {
|
||||
expectSignatureMatches(after[i], before[i], 14, `fixture replay frame not self-consistent at col ${REFERENCE_COLS[i]}`);
|
||||
}
|
||||
expect(pageErrors, `no page errors during fixture replay, got: ${pageErrors.join(', ')}`).toEqual([]);
|
||||
} finally {
|
||||
ctx.page.off('pageerror', onError);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
* Produces BEFORE/AFTER screenshots of a single terminal under merge-heavy
|
||||
* churn for manual inspection (before.png / after.png, mono-*.png). On current
|
||||
* master the single-terminal merge path is healthy, so the pinned header lines
|
||||
* are expected to remain readable in the "after" images; a corrupted header in
|
||||
* these captures indicates a renderer regression. Note the mono "after" body is
|
||||
* SUPPOSED to look like glyph soup — that is the mixed box-drawing/braille
|
||||
* payload rendered faithfully, not corruption.
|
||||
*/
|
||||
import test from '@playwright/test';
|
||||
import { ITestContext, createTestContext, openTerminal } from '../../../test/playwright/TestUtils';
|
||||
import { loadWebglStrict, setMaxAtlasPages, writeAndWaitForRender } from '../../../test/playwright/RendererTestUtils';
|
||||
import { generateColoredAsciiFlood, generateMixedGlyphBlock } from '../../../test/playwright/SyntheticTui';
|
||||
|
||||
test.describe('visual #322756', () => {
|
||||
test.skip(({ browserName }) => browserName !== 'chromium');
|
||||
test.describe.configure({ timeout: 60000 });
|
||||
|
||||
test('capture before/after pinned header under merge churn', async ({ browser }) => {
|
||||
const ctx: ITestContext = await createTestContext(browser);
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
const screen = ctx.page.locator('#terminal-container .xterm-screen');
|
||||
// Header + readable sentences pinned at top; body region churns below.
|
||||
await writeAndWaitForRender(ctx, '\x1b[?1049h\x1b[H\x1b[97mHEADER: THE QUICK BROWN FOX 0123456789\r\nSTATUS: this line should stay readable\r\n');
|
||||
await screen.screenshot({ path: 'out-esbuild-test/playwright/before.png' });
|
||||
for (let c = 0; c < 30; c++) {
|
||||
await writeAndWaitForRender(ctx, '\x1b[5;1H' + generateColoredAsciiFlood(20 * 78, c * 20 * 78));
|
||||
}
|
||||
await screen.screenshot({ path: 'out-esbuild-test/playwright/after.png' });
|
||||
await ctx.page.close();
|
||||
});
|
||||
|
||||
// Issue-like framing: prefill realistic CLI text, force merges with a mixed
|
||||
// glyph payload, then rewrite the top lines clean. The rewritten header lines
|
||||
// must stay readable in mono-after.png.
|
||||
test('capture mono before/after (issue-like)', async ({ browser }) => {
|
||||
const ctx: ITestContext = await createTestContext(browser);
|
||||
await openTerminal(ctx, { cols: 80, rows: 24 });
|
||||
await loadWebglStrict(ctx);
|
||||
await setMaxAtlasPages(ctx, 4);
|
||||
const screen = ctx.page.locator('#terminal-container .xterm-screen');
|
||||
// Prefill a screenful of normal-looking CLI output (all rendered fine).
|
||||
await writeAndWaitForRender(ctx, '\x1b[?1049h\x1b[2J\x1b[H');
|
||||
let pre = '';
|
||||
for (let r = 0; r < 22; r++) {
|
||||
pre += ` $ Shell inspect bundled MCP JSON schema for type enum values ${r} lines\r\n`;
|
||||
}
|
||||
await writeAndWaitForRender(ctx, pre);
|
||||
await screen.screenshot({ path: 'out-esbuild-test/playwright/mono-before.png' });
|
||||
// Overflow the atlas (cap=4) so pages MERGE while most rows keep their cells,
|
||||
// then rewrite a few lines clean (like scroll/redraw).
|
||||
for (let c = 0; c < 12; c++) {
|
||||
let frame = '\x1b[3;1H';
|
||||
frame += generateMixedGlyphBlock(c + 1, 18, 78);
|
||||
await writeAndWaitForRender(ctx, frame);
|
||||
}
|
||||
await writeAndWaitForRender(ctx, '\x1b[1;1H\x1b[2K $ Shell grep installed Copilot CLI binary - 53 lines\r\n\x1b[2K Thought for 1s');
|
||||
await screen.screenshot({ path: 'out-esbuild-test/playwright/mono-after.png' });
|
||||
await ctx.page.close();
|
||||
});
|
||||
});
|
||||
@@ -67,8 +67,6 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
|
||||
dlIip.appendChild(dtIip);
|
||||
this._addDdWithButton(dlIip, 'image-demo3', 'palette (png File)');
|
||||
this._addDdWithButton(dlIip, 'image-demo4', 'dice (qoi MultipartFile)');
|
||||
this._addDdWithButton(dlIip, 'image-demo5', 'rose (webp File)');
|
||||
this._addDdWithButton(dlIip, 'image-demo6', 'kimono (avif MultipartFile)');
|
||||
container.appendChild(dlIip);
|
||||
|
||||
// Kitty demos
|
||||
@@ -175,15 +173,11 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
|
||||
document.getElementById('image-demo2')!.addEventListener('click',
|
||||
sixelDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/testfiles/test2.sixel'));
|
||||
document.getElementById('image-demo3')!.addEventListener('click',
|
||||
iipDemo('https://raw.githubusercontent.com/xtermjs/xterm.js/master/addons/addon-image/fixture/palette.png'));
|
||||
iipDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/palette.png'));
|
||||
document.getElementById('image-demo4')!.addEventListener('click',
|
||||
iipDemoMulti('https://raw.githubusercontent.com/xtermjs/xterm.js/master/addons/addon-image/fixture/testimages/dice.qoi'));
|
||||
document.getElementById('image-demo5')!.addEventListener('click',
|
||||
iipDemo('https://raw.githubusercontent.com/xtermjs/xterm.js/master/addons/addon-image/fixture/testimages/1_webp_a.webp'));
|
||||
document.getElementById('image-demo6')!.addEventListener('click',
|
||||
iipDemoMulti('https://raw.githubusercontent.com/xtermjs/xterm.js/master/addons/addon-image/fixture/testimages/kimono.crop.avif'));
|
||||
iipDemoMulti('https://raw.githubusercontent.com/jerch/xterm-wasm-parts/master/fixtures/qoi/dice.qoi'));
|
||||
document.getElementById('image-demo-kitty1')!.addEventListener('click',
|
||||
kittyDemo('https://raw.githubusercontent.com/xtermjs/xterm.js/master/addons/addon-image/fixture/palette.png'));
|
||||
kittyDemo('https://raw.githubusercontent.com/jerch/node-sixel/master/palette.png'));
|
||||
|
||||
// demo for image retrieval API
|
||||
this._terminal.element!.addEventListener('click', (ev: MouseEvent) => {
|
||||
|
||||
@@ -12,33 +12,31 @@ export class WebglWindow extends BaseWindow implements IControlWindow {
|
||||
|
||||
private _textureAtlasContainer!: HTMLElement;
|
||||
private _stressRunning = false;
|
||||
private _scrollOutput: HTMLInputElement | undefined;
|
||||
private _stressScrolling: HTMLInputElement | undefined;
|
||||
|
||||
public build(container: HTMLElement): void {
|
||||
const stressButtons = document.createElement('div');
|
||||
const stressDiv = document.createElement('div');
|
||||
const stressStart = document.createElement('button');
|
||||
stressStart.id = 'stress-start';
|
||||
stressStart.textContent = 'atlas stress start';
|
||||
stressStart.addEventListener('click', () => this._stress());
|
||||
stressButtons.appendChild(stressStart);
|
||||
stressDiv.appendChild(stressStart);
|
||||
|
||||
const stressStop = document.createElement('button');
|
||||
stressStop.id = 'stress-stop';
|
||||
stressStop.textContent = 'atlas stress stop';
|
||||
stressStop.addEventListener('click', () => this._stressRunning = false);
|
||||
stressButtons.appendChild(stressStop);
|
||||
container.appendChild(stressButtons);
|
||||
stressDiv.appendChild(stressStop);
|
||||
|
||||
const stressOptions = document.createElement('div');
|
||||
this._scrollOutput = document.createElement('input');
|
||||
this._scrollOutput.type = 'checkbox';
|
||||
this._scrollOutput.id = 'scroll-output';
|
||||
stressOptions.appendChild(this._scrollOutput);
|
||||
const scrollOutputLabel = document.createElement('label');
|
||||
scrollOutputLabel.htmlFor = 'scroll-output';
|
||||
scrollOutputLabel.textContent = 'Scroll output';
|
||||
stressOptions.appendChild(scrollOutputLabel);
|
||||
container.appendChild(stressOptions);
|
||||
this._stressScrolling = document.createElement('input');
|
||||
this._stressScrolling.type = 'checkbox';
|
||||
this._stressScrolling.id = 'stress-scrolling';
|
||||
stressDiv.appendChild(this._stressScrolling);
|
||||
const stressScrollingLabel = document.createElement('label');
|
||||
stressScrollingLabel.htmlFor = 'stress-scrolling';
|
||||
stressScrollingLabel.textContent = 'stress scrolling';
|
||||
stressDiv.appendChild(stressScrollingLabel);
|
||||
container.appendChild(stressDiv);
|
||||
|
||||
const zoomCheckbox = document.createElement('input');
|
||||
zoomCheckbox.type = 'checkbox';
|
||||
@@ -82,7 +80,7 @@ export class WebglWindow extends BaseWindow implements IControlWindow {
|
||||
return;
|
||||
}
|
||||
this._stressRunning = true;
|
||||
const scrollOutput = !!(this._scrollOutput?.checked);
|
||||
const scrolling = !!(this._stressScrolling?.checked);
|
||||
for (let r = 0; r < 256; r += 2) {
|
||||
for (let g = 0; g < 256; g += 2) {
|
||||
let s: string[] = [];
|
||||
@@ -93,7 +91,7 @@ export class WebglWindow extends BaseWindow implements IControlWindow {
|
||||
const rbg = `RGB: ${[r, g, b]}`;
|
||||
s.push(`\r\x1b[38;2;${r};${g};${b}m${rbg.padEnd(18, ' ')}${TEXT}`);
|
||||
if (s.length >= 16) {
|
||||
if (scrollOutput) {
|
||||
if (scrolling) {
|
||||
await new Promise<void>(r => this._terminal.write(s.join('\r\n') + '\r\n', r));
|
||||
} else {
|
||||
await new Promise<void>(r => this._terminal.write('\x1b[H' + s.join('\r\n'), r));
|
||||
|
||||
@@ -3061,16 +3061,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "5.0.9",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
|
||||
"integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
|
||||
"integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"balanced-match": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "20 || >=22"
|
||||
"node": "18 || 20 || >=22"
|
||||
}
|
||||
},
|
||||
"node_modules/braces": {
|
||||
@@ -3519,15 +3519,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/concurrently": {
|
||||
"version": "9.2.4",
|
||||
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.4.tgz",
|
||||
"integrity": "sha512-TZ0CEhyzvFjgtAvHTusDMgj7wNdihCh7LLLrzdUOXIhdlnL2JBBGA9eJxR24rtqgmdjh3OA3hrN1rCHj6HM8qA==",
|
||||
"version": "9.2.1",
|
||||
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
|
||||
"integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "4.1.2",
|
||||
"rxjs": "7.8.2",
|
||||
"shell-quote": "1.9.0",
|
||||
"shell-quote": "1.8.3",
|
||||
"supports-color": "8.1.1",
|
||||
"tree-kill": "1.2.2",
|
||||
"yargs": "17.7.2"
|
||||
@@ -4308,9 +4308,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/express-ws/node_modules/ws": {
|
||||
"version": "7.5.13",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.13.tgz",
|
||||
"integrity": "sha512-rsKI6xDBFVf4r/x8XyChGK04QR/XHroxs/jUcoWvtEZM8TPU/X/uIY9B1CsSzYws9ZJb/6bbBu7dPhFW00CAoA==",
|
||||
"version": "7.5.10",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
|
||||
"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -4351,9 +4351,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-uri": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
|
||||
"integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -4749,9 +4749,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/glob/node_modules/brace-expansion": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
|
||||
"integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
|
||||
"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -5795,9 +5795,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mocha/node_modules/brace-expansion": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
|
||||
"integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
|
||||
"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -7127,9 +7127,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/shell-quote": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.9.0.tgz",
|
||||
"integrity": "sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==",
|
||||
"version": "1.8.3",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
|
||||
"integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -7975,9 +7975,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/undici": {
|
||||
"version": "7.29.0",
|
||||
"resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
|
||||
"integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
|
||||
"version": "7.25.0",
|
||||
"resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
|
||||
"integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -8452,9 +8452,9 @@
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.21.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
|
||||
"integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
|
||||
"version": "8.20.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
|
||||
"integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
|
||||
@@ -492,7 +492,6 @@ export class CoreBrowserTerminal extends CoreTerminal implements ITerminal {
|
||||
// https://issuetracker.google.com/issues/260170397
|
||||
this.textarea.setAttribute('aria-multiline', 'false');
|
||||
}
|
||||
this.textarea.setAttribute('autocomplete', 'off');
|
||||
this.textarea.setAttribute('autocorrect', 'off');
|
||||
this.textarea.setAttribute('autocapitalize', 'off');
|
||||
this.textarea.setAttribute('spellcheck', 'false');
|
||||
|
||||
@@ -6,14 +6,16 @@
|
||||
import jsdom = require('jsdom');
|
||||
import { assert } from 'chai';
|
||||
import { DomRendererRowFactory } from './DomRendererRowFactory';
|
||||
import { DEFAULT_ATTR, FgFlags, BgFlags, Attributes, UnderlineStyle } from '../../../common/buffer/Constants';
|
||||
import { NULL_CELL_CODE, NULL_CELL_WIDTH, NULL_CELL_CHAR, DEFAULT_ATTR, FgFlags, BgFlags, Attributes, UnderlineStyle } from '../../../common/buffer/Constants';
|
||||
import { BufferLine, DEFAULT_ATTR_DATA } from '../../../common/buffer/BufferLine';
|
||||
import { BufferLineStringCache } from '../../../common/buffer/BufferLineStringCache';
|
||||
import { IBufferLine } from '../../../common/buffer/Types';
|
||||
import { CellData } from '../../../common/buffer/CellData';
|
||||
import { MockCoreService, MockDecorationService, MockOptionsService, createCellData, NULL_CELL_DATA } from '../../../common/TestUtils.test';
|
||||
import { MockCharacterJoinerService, MockCoreBrowserService, MockThemeService } from '../../TestUtils.test';
|
||||
import { TestWidthCache } from './WidthCache.test';
|
||||
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
describe('DomRendererRowFactory', () => {
|
||||
let dom: jsdom.JSDOM;
|
||||
@@ -515,7 +517,7 @@ describe('DomRendererRowFactory', () => {
|
||||
}
|
||||
|
||||
function createEmptyLineData(cols: number): IBufferLine {
|
||||
const lineData = new BufferLine(cols);
|
||||
const lineData = new BufferLine(TEST_STRING_CACHE, cols);
|
||||
for (let i = 0; i < cols; i++) {
|
||||
lineData.setCell(i, NULL_CELL_DATA);
|
||||
}
|
||||
|
||||
@@ -7,10 +7,12 @@ import { assert } from 'chai';
|
||||
import { ICharacterJoinerService } from './Services';
|
||||
import { CharacterJoinerService } from './CharacterJoinerService';
|
||||
import { BufferLine } from '../../common/buffer/BufferLine';
|
||||
import { BufferLineStringCache } from '../../common/buffer/BufferLineStringCache';
|
||||
import { IBufferLine } from '../../common/buffer/Types';
|
||||
import { CellData } from '../../common/buffer/CellData';
|
||||
import { MockBufferService, createCellData } from '../../common/TestUtils.test';
|
||||
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
describe('CharacterJoinerService', () => {
|
||||
let service: ICharacterJoinerService;
|
||||
@@ -23,7 +25,7 @@ describe('CharacterJoinerService', () => {
|
||||
lines.set(2, lineData([['a -> b -', 0xFFFFFFFF], ['> c -> d', 0]]));
|
||||
|
||||
lines.set(3, lineData([['no joined ranges']]));
|
||||
lines.set(4, new BufferLine(0));
|
||||
lines.set(4, new BufferLine(TEST_STRING_CACHE, 0));
|
||||
lines.set(5, lineData([['a', 0x11111111], [' -> b -> c -> '], ['d', 0x22222222]]));
|
||||
const line6 = lineData([['wi']]);
|
||||
line6.resize(line6.length + 1, createCellData(0, '¥', 2));
|
||||
@@ -268,7 +270,7 @@ describe('CharacterJoinerService', () => {
|
||||
type IPartialLineData = ([string] | [string, number]);
|
||||
|
||||
function lineData(data: IPartialLineData[]): IBufferLine {
|
||||
const tline = new BufferLine(0);
|
||||
const tline = new BufferLine(TEST_STRING_CACHE, 0);
|
||||
for (let i = 0; i < data.length; ++i) {
|
||||
const line = data[i][0];
|
||||
const attr = (data[i][1] || 0) as number;
|
||||
|
||||
@@ -9,11 +9,13 @@ import { SelectionModel } from '../selection/SelectionModel';
|
||||
import { IBuffer, IBufferLine } from '../../common/buffer/Types';
|
||||
import { MockBufferService, MockOptionsService, MockCoreService, MockMouseStateService, createCellData } from '../../common/TestUtils.test';
|
||||
import { BufferLine } from '../../common/buffer/BufferLine';
|
||||
import { BufferLineStringCache } from '../../common/buffer/BufferLineStringCache';
|
||||
import { IBufferService, IOptionsService } from '../../common/services/Services';
|
||||
import { MockCoreBrowserService, MockMouseService, MockRenderService } from '../TestUtils.test';
|
||||
import { CellData } from '../../common/buffer/CellData';
|
||||
import { IRenderService } from './Services';
|
||||
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
class TestSelectionService extends SelectionService {
|
||||
constructor(
|
||||
@@ -58,7 +60,7 @@ describe('SelectionService', () => {
|
||||
});
|
||||
|
||||
function stringToRow(text: string): IBufferLine {
|
||||
const result = new BufferLine(text.length);
|
||||
const result = new BufferLine(TEST_STRING_CACHE, text.length);
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
result.setCell(i, createCellData(0, text.charAt(i), 1));
|
||||
}
|
||||
@@ -66,7 +68,7 @@ describe('SelectionService', () => {
|
||||
}
|
||||
|
||||
function stringArrayToRow(chars: string[]): IBufferLine {
|
||||
const line = new BufferLine(chars.length);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, chars.length);
|
||||
chars.map((c, idx) => line.setCell(idx, createCellData(0, c, 1)));
|
||||
return line;
|
||||
}
|
||||
@@ -121,7 +123,7 @@ describe('SelectionService', () => {
|
||||
[0, 'o', 1, 'o'.charCodeAt(0)],
|
||||
[0, 'o', 1, 'o'.charCodeAt(0)]
|
||||
];
|
||||
const line = new BufferLine(data.length);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, data.length);
|
||||
for (let i = 0; i < data.length; ++i) line.setCell(i, CellData.fromCharData(data[i]));
|
||||
buffer.lines.set(0, line);
|
||||
// Ensure wide characters take up 2 columns
|
||||
|
||||
@@ -27,13 +27,11 @@ export class Emitter<T> {
|
||||
}
|
||||
|
||||
const entry = { fn: listener, thisArgs };
|
||||
this._listeners = this._listeners.slice();
|
||||
this._listeners.push(entry);
|
||||
|
||||
const result = toDisposable(() => {
|
||||
const idx = this._listeners.indexOf(entry);
|
||||
if (idx !== -1) {
|
||||
this._listeners = this._listeners.slice();
|
||||
this._listeners.splice(idx, 1);
|
||||
}
|
||||
});
|
||||
@@ -52,16 +50,23 @@ export class Emitter<T> {
|
||||
}
|
||||
|
||||
public fire(event: T): void {
|
||||
if (this._disposed || !this._listeners.length) {
|
||||
if (this._disposed) {
|
||||
return;
|
||||
}
|
||||
if (this._listeners.length === 1) {
|
||||
this._listeners[0].fn.call(this._listeners[0].thisArgs, event);
|
||||
return;
|
||||
}
|
||||
const listeners = this._listeners;
|
||||
for (let i = 0, len = listeners.length; i < len; ++i) {
|
||||
listeners[i].fn.call(listeners[i].thisArgs, event);
|
||||
switch (this._listeners.length) {
|
||||
case 0: return;
|
||||
case 1: {
|
||||
const { fn, thisArgs } = this._listeners[0];
|
||||
fn.call(thisArgs, event);
|
||||
return;
|
||||
}
|
||||
default: {
|
||||
// Snapshot listeners to allow modifications during iteration (2+ listeners)
|
||||
const listeners = this._listeners.slice();
|
||||
for (const { fn, thisArgs } of listeners) {
|
||||
fn.call(thisArgs, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2394,54 +2394,6 @@ describe('InputHandler', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('ED3 - erase saved lines', () => {
|
||||
beforeEach(() => {
|
||||
bufferService.resize(10, 5);
|
||||
});
|
||||
it('should stop locking the viewport when the scrollback the user scrolled into is erased', async () => {
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
await inputHandler.parseP(`old ${i}\r\n`);
|
||||
}
|
||||
bufferService.scrollLines(-5);
|
||||
assert.strictEqual(bufferService.isUserScrolling, true);
|
||||
|
||||
await inputHandler.parseP('\x1b[3J');
|
||||
|
||||
assert.strictEqual(bufferService.isUserScrolling, false);
|
||||
assert.strictEqual(bufferService.buffer.ybase, 0);
|
||||
assert.strictEqual(bufferService.buffer.ydisp, 0);
|
||||
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
await inputHandler.parseP(`new ${i}\r\n`);
|
||||
}
|
||||
|
||||
assert.strictEqual(bufferService.buffer.ydisp, bufferService.buffer.ybase);
|
||||
});
|
||||
it('should not reset the scroll position when erasing scrollback on a resized alt buffer', async () => {
|
||||
bufferService.resize(10, 50);
|
||||
bufferService.resize(10, 5);
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
await inputHandler.parseP(`old ${i}\r\n`);
|
||||
}
|
||||
bufferService.scrollLines(-5);
|
||||
const ydisp = bufferService.buffer.ydisp;
|
||||
|
||||
await inputHandler.parseP('\x1b[?1049h');
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
await inputHandler.parseP(`new ${i}\r\n`);
|
||||
}
|
||||
await inputHandler.parseP('\x1b[3J\x1b[?1049l');
|
||||
|
||||
assert.strictEqual(bufferService.isUserScrolling, true);
|
||||
assert.strictEqual(bufferService.buffer.ydisp, ydisp);
|
||||
|
||||
await inputHandler.parseP('more\r\n');
|
||||
|
||||
assert.strictEqual(bufferService.isUserScrolling, true);
|
||||
assert.strictEqual(bufferService.buffer.ydisp, ydisp);
|
||||
});
|
||||
});
|
||||
|
||||
describe('DECSCA and DECSED/DECSEL', () => {
|
||||
it('default is unprotected', async () => {
|
||||
await inputHandler.parseP('some text');
|
||||
|
||||
@@ -1286,11 +1286,6 @@ export class InputHandler extends Disposable implements IInputHandler {
|
||||
this._activeBuffer.lines.trimStart(scrollBackSize);
|
||||
this._activeBuffer.ybase = Math.max(this._activeBuffer.ybase - scrollBackSize, 0);
|
||||
this._activeBuffer.ydisp = Math.max(this._activeBuffer.ydisp - scrollBackSize, 0);
|
||||
// isUserScrolling tracks the normal buffer's viewport, so ED3 on the alt
|
||||
// screen must not touch it
|
||||
if (this._activeBuffer === this._bufferService.buffers.normal) {
|
||||
this._bufferService.isUserScrolling = false;
|
||||
}
|
||||
// Force a scroll event to refresh viewport
|
||||
this._onScroll.fire(0);
|
||||
}
|
||||
|
||||
@@ -139,7 +139,6 @@ export class AttributeData implements IAttributeData {
|
||||
*/
|
||||
export class ExtendedAttrs implements IExtendedAttrs {
|
||||
private _ext: number = 0;
|
||||
public payload: Object | undefined;
|
||||
public get ext(): number {
|
||||
if (this._urlId) {
|
||||
return (
|
||||
@@ -208,6 +207,6 @@ export class ExtendedAttrs implements IExtendedAttrs {
|
||||
* that needs to be persistant in the buffer.
|
||||
*/
|
||||
public isEmpty(): boolean {
|
||||
return this.underlineStyle === UnderlineStyle.NONE && this._urlId === 0 && this.payload === undefined;
|
||||
return this.underlineStyle === UnderlineStyle.NONE && this._urlId === 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,14 +8,24 @@ import { Buffer } from './Buffer';
|
||||
import { CircularList } from '../CircularList';
|
||||
import { MockOptionsService, MockBufferService, MockLogService, createCellData } from '../TestUtils.test';
|
||||
import { BufferLine, DEFAULT_ATTR_DATA } from './BufferLine';
|
||||
import { BufferLineStringCache } from './BufferLineStringCache';
|
||||
import { CellData } from './CellData';
|
||||
|
||||
import { ExtendedAttrs } from './AttributeData';
|
||||
|
||||
const INIT_COLS = 80;
|
||||
const INIT_ROWS = 24;
|
||||
const INIT_SCROLLBACK = 1000;
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
class TestBuffer extends Buffer {}
|
||||
class TestBuffer extends Buffer {
|
||||
public getStringCache(): BufferLineStringCache {
|
||||
return (this as unknown as { _stringCache: BufferLineStringCache })._stringCache;
|
||||
}
|
||||
|
||||
public getStringCacheClearTimeout(): unknown {
|
||||
return (this.getStringCache() as unknown as { _clearTimeout: { value: unknown } })._clearTimeout.value;
|
||||
}
|
||||
}
|
||||
|
||||
describe('Buffer', () => {
|
||||
let optionsService: MockOptionsService;
|
||||
@@ -1192,7 +1202,7 @@ describe('Buffer', () => {
|
||||
|
||||
describe ('translateBufferLineToString', () => {
|
||||
it('should handle selecting a section of ascii text', () => {
|
||||
const line = new BufferLine(4);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 4);
|
||||
line.setCell(0, createCellData(0, 'a', 1));
|
||||
line.setCell(1, createCellData(0, 'b', 1));
|
||||
line.setCell(2, createCellData(0, 'c', 1));
|
||||
@@ -1204,7 +1214,7 @@ describe('Buffer', () => {
|
||||
});
|
||||
|
||||
it('should handle a cut-off double width character by including it', () => {
|
||||
const line = new BufferLine(3);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 3);
|
||||
line.setCell(0, createCellData(0, '語', 2));
|
||||
line.setCell(1, createCellData(0, '', 0));
|
||||
line.setCell(2, createCellData(0, 'a', 1));
|
||||
@@ -1215,7 +1225,7 @@ describe('Buffer', () => {
|
||||
});
|
||||
|
||||
it('should handle a zero width character in the middle of the string by not including it', () => {
|
||||
const line = new BufferLine(3);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 3);
|
||||
line.setCell(0, createCellData(0, '語', 2));
|
||||
line.setCell(1, createCellData(0, '', 0));
|
||||
line.setCell(2, createCellData(0, 'a', 1));
|
||||
@@ -1232,7 +1242,7 @@ describe('Buffer', () => {
|
||||
});
|
||||
|
||||
it('should handle single width emojis', () => {
|
||||
const line = new BufferLine(2);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 2);
|
||||
line.setCell(0, createCellData(0, '😁', 1));
|
||||
line.setCell(1, createCellData(0, 'a', 1));
|
||||
buffer.lines.set(0, line);
|
||||
@@ -1245,7 +1255,7 @@ describe('Buffer', () => {
|
||||
});
|
||||
|
||||
it('should handle double width emojis', () => {
|
||||
const line = new BufferLine(2);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 2);
|
||||
line.setCell(0, createCellData(0, '😁', 2));
|
||||
line.setCell(1, createCellData(0, '', 0));
|
||||
buffer.lines.set(0, line);
|
||||
@@ -1256,7 +1266,7 @@ describe('Buffer', () => {
|
||||
const str2 = buffer.translateBufferLineToString(0, true, 0, 2);
|
||||
assert.equal(str2, '😁');
|
||||
|
||||
const line2 = new BufferLine(3);
|
||||
const line2 = new BufferLine(TEST_STRING_CACHE, 3);
|
||||
line2.setCell(0, createCellData(0, '😁', 2));
|
||||
line2.setCell(1, createCellData(0, '', 0));
|
||||
line2.setCell(2, createCellData(0, 'a', 1));
|
||||
@@ -1267,6 +1277,99 @@ describe('Buffer', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('line string cache cleanup', () => {
|
||||
it('should clear shared cache entries with a single timer', () => {
|
||||
const originalSetTimeout = globalThis.setTimeout;
|
||||
const originalClearTimeout = globalThis.clearTimeout;
|
||||
const originalDateNow = Date.now;
|
||||
let timeoutId = 0;
|
||||
let now = 0;
|
||||
const clearedTimeouts: number[] = [];
|
||||
const scheduledTimeouts = new Map<number, { delay: number, fire: () => void }>();
|
||||
(globalThis as any).setTimeout = ((handler: (...args: any[]) => void, timeout?: number) => {
|
||||
const id = ++timeoutId;
|
||||
scheduledTimeouts.set(id, {
|
||||
delay: timeout ?? 0,
|
||||
fire: () => {
|
||||
scheduledTimeouts.delete(id);
|
||||
handler();
|
||||
}
|
||||
});
|
||||
return id as ReturnType<typeof setTimeout>;
|
||||
}) as typeof setTimeout;
|
||||
(globalThis as any).clearTimeout = ((id: ReturnType<typeof setTimeout>) => {
|
||||
const numericId = id as unknown as number;
|
||||
clearedTimeouts.push(numericId);
|
||||
scheduledTimeouts.delete(numericId);
|
||||
}) as typeof clearTimeout;
|
||||
Date.now = () => now;
|
||||
try {
|
||||
buffer.fillViewportRows();
|
||||
buffer.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
|
||||
buffer.lines.get(1)!.setCell(0, createCellData(0, 'b', 1));
|
||||
|
||||
assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
|
||||
assert.equal(buffer.translateBufferLineToString(1, false), `b${' '.repeat(INIT_COLS - 1)}`);
|
||||
|
||||
const cache = buffer.getStringCache();
|
||||
assert.equal(cache.entries.size, 2);
|
||||
assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
|
||||
assert.equal(scheduledTimeouts.size, 1);
|
||||
assert.equal([...scheduledTimeouts.values()][0].delay, 15000);
|
||||
const initialTimerCreationCount = timeoutId;
|
||||
|
||||
now = 5000;
|
||||
assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
|
||||
assert.equal(timeoutId, initialTimerCreationCount);
|
||||
assert.equal(scheduledTimeouts.size, 1);
|
||||
assert.deepEqual(clearedTimeouts, []);
|
||||
|
||||
now = 15000;
|
||||
[...scheduledTimeouts.values()][0].fire();
|
||||
assert.equal(timeoutId, initialTimerCreationCount + 1);
|
||||
assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
|
||||
assert.equal(scheduledTimeouts.size, 1);
|
||||
assert.equal([...scheduledTimeouts.values()][0].delay, 5000);
|
||||
|
||||
now = 20000;
|
||||
[...scheduledTimeouts.values()][0].fire();
|
||||
|
||||
assert.equal(cache.entries.size, 0);
|
||||
assert.equal(buffer.getStringCacheClearTimeout(), undefined);
|
||||
|
||||
assert.equal(buffer.translateBufferLineToString(0, false), `a${' '.repeat(INIT_COLS - 1)}`);
|
||||
assert.equal(cache.entries.size, 1);
|
||||
} finally {
|
||||
Date.now = originalDateNow;
|
||||
globalThis.setTimeout = originalSetTimeout;
|
||||
globalThis.clearTimeout = originalClearTimeout;
|
||||
}
|
||||
});
|
||||
|
||||
it('should reset line string cache state on clear and resize', () => {
|
||||
buffer.fillViewportRows();
|
||||
buffer.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
|
||||
buffer.translateBufferLineToString(0, false);
|
||||
|
||||
const cache = buffer.getStringCache();
|
||||
assert.equal(cache.entries.size, 1);
|
||||
assert.ok(buffer.getStringCacheClearTimeout() !== undefined);
|
||||
|
||||
buffer.clear();
|
||||
assert.equal(cache.entries.size, 0);
|
||||
assert.equal(buffer.getStringCacheClearTimeout(), undefined);
|
||||
|
||||
buffer.fillViewportRows();
|
||||
buffer.lines.get(0)!.setCell(0, createCellData(0, 'b', 1));
|
||||
buffer.translateBufferLineToString(0, false);
|
||||
assert.equal(cache.entries.size, 1);
|
||||
|
||||
buffer.resize(INIT_COLS - 1, INIT_ROWS);
|
||||
assert.equal(cache.entries.size, 0);
|
||||
assert.equal(buffer.getStringCacheClearTimeout(), undefined);
|
||||
});
|
||||
});
|
||||
|
||||
describe('memory cleanup after shrinking', () => {
|
||||
it('should realign memory from idle task execution', async () => {
|
||||
buffer.fillViewportRows();
|
||||
|
||||
@@ -10,6 +10,7 @@ import { ICharset } from '../Types';
|
||||
import { IAttributeData, IBuffer, IBufferLine, ICellData } from './Types';
|
||||
import { ExtendedAttrs } from './AttributeData';
|
||||
import { BufferLine, DEFAULT_ATTR_DATA } from './BufferLine';
|
||||
import { BufferLineStringCache } from './BufferLineStringCache';
|
||||
import { getWrappedLineTrimmedLength, reflowLargerApplyNewLayout, reflowLargerCreateNewLayout, reflowLargerGetLinesToRemove, reflowSmallerGetNewLineLengths } from './BufferReflow';
|
||||
import { CellData } from './CellData';
|
||||
import { NULL_CELL_CHAR, NULL_CELL_CODE, NULL_CELL_WIDTH, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE, WHITESPACE_CELL_WIDTH } from './Constants';
|
||||
@@ -51,6 +52,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
private _isClearing: boolean = false;
|
||||
private _memoryCleanupQueue: InstanceType<typeof IdleTaskQueue>;
|
||||
private _memoryCleanupPosition = 0;
|
||||
private readonly _stringCache: BufferLineStringCache;
|
||||
|
||||
constructor(
|
||||
private _hasScrollback: boolean,
|
||||
@@ -68,6 +70,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
this._memoryCleanupQueue = new IdleTaskQueue(this._logService);
|
||||
this._register(toDisposable(() => this._memoryCleanupQueue.clear()));
|
||||
this._register(toDisposable(() => this.clearAllMarkers()));
|
||||
this._stringCache = this._register(new BufferLineStringCache());
|
||||
}
|
||||
|
||||
public getNullCell(attr?: IAttributeData): ICellData {
|
||||
@@ -97,7 +100,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
}
|
||||
|
||||
public getBlankLine(attr: IAttributeData, isWrapped?: boolean): IBufferLine {
|
||||
return new BufferLine(this._bufferService.cols, this.getNullCell(attr), isWrapped);
|
||||
return new BufferLine(this._stringCache, this._bufferService.cols, this.getNullCell(attr), isWrapped);
|
||||
}
|
||||
|
||||
public get hasScrollback(): boolean {
|
||||
@@ -142,6 +145,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
* Clears the buffer to its initial state, discarding all previous data.
|
||||
*/
|
||||
public clear(): void {
|
||||
this._stringCache.clear();
|
||||
this.ydisp = 0;
|
||||
this.ybase = 0;
|
||||
this.y = 0;
|
||||
@@ -160,6 +164,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
public resize(newCols: number, newRows: number): void {
|
||||
// store reference to null cell with default attrs
|
||||
const nullCell = this.getNullCell(DEFAULT_ATTR_DATA);
|
||||
this._stringCache.clear();
|
||||
|
||||
// count bufferlines with overly big memory to be cleaned afterwards
|
||||
let dirtyMemoryLines = 0;
|
||||
@@ -194,7 +199,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
if (this._optionsService.rawOptions.windowsPty.backend !== undefined || this._optionsService.rawOptions.windowsPty.buildNumber !== undefined) {
|
||||
// Just add the new missing rows on Windows as conpty reprints the screen with its
|
||||
// view of the world. Once a line enters scrollback for conpty it remains there
|
||||
this.lines.push(new BufferLine(newCols, nullCell, false));
|
||||
this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
|
||||
} else {
|
||||
if (this.ybase > 0 && this.lines.length <= this.ybase + this.y + addToY + 1) {
|
||||
// There is room above the buffer and there are no empty elements below the line,
|
||||
@@ -208,7 +213,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
} else {
|
||||
// Add a blank line if there is no buffer left at the top to scroll to, or if there
|
||||
// are blank lines after the cursor
|
||||
this.lines.push(new BufferLine(newCols, nullCell, false));
|
||||
this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -349,7 +354,7 @@ export class Buffer extends Disposable implements IBuffer {
|
||||
}
|
||||
if (this.lines.length < newRows) {
|
||||
// Add an extra row at the bottom of the viewport
|
||||
this.lines.push(new BufferLine(newCols, nullCell, false));
|
||||
this.lines.push(new BufferLine(this._stringCache, newCols, nullCell, false));
|
||||
}
|
||||
} else {
|
||||
if (this.ydisp === this.ybase) {
|
||||
|
||||
@@ -4,16 +4,19 @@
|
||||
*/
|
||||
import { NULL_CELL_CHAR, NULL_CELL_WIDTH, NULL_CELL_CODE, DEFAULT_ATTR, Content, UnderlineStyle, BgFlags, Attributes, FgFlags } from './Constants';
|
||||
import { BufferLine } from './BufferLine';
|
||||
import { BufferLineStringCache } from './BufferLineStringCache';
|
||||
import { CellData } from './CellData';
|
||||
import { CharData, IBufferLine, ICellData } from './Types';
|
||||
import { assert } from 'chai';
|
||||
import { AttributeData } from './AttributeData';
|
||||
import { createCellData, NULL_CELL_DATA, extendedAttributes } from '../TestUtils.test';
|
||||
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
|
||||
class TestBufferLine extends BufferLine {
|
||||
constructor(cols: number, fillCellData?: ICellData, isWrapped: boolean = false) {
|
||||
super(cols, fillCellData, isWrapped);
|
||||
super(TEST_STRING_CACHE, cols, fillCellData, isWrapped);
|
||||
}
|
||||
|
||||
public get combined(): {[index: number]: string} {
|
||||
@@ -21,19 +24,19 @@ class TestBufferLine extends BufferLine {
|
||||
}
|
||||
|
||||
public get cachedString(): string | undefined {
|
||||
return this._cacheValid ? this._cache : undefined;
|
||||
return this._getStringCacheEntry(false)?.value;
|
||||
}
|
||||
|
||||
public set cachedString(value: string | undefined) {
|
||||
this._cache = value ?? '';
|
||||
this._getStringCacheEntry(true)!.value = value;
|
||||
}
|
||||
|
||||
public get isCachedStringTrimmed(): boolean {
|
||||
return this._cacheTrimmed;
|
||||
return this._getStringCacheEntry(false)?.isTrimmed ?? false;
|
||||
}
|
||||
|
||||
public set isCachedStringTrimmed(value: boolean) {
|
||||
this._cacheTrimmed = value;
|
||||
this._getStringCacheEntry(true)!.isTrimmed = value;
|
||||
}
|
||||
|
||||
public toArray(): CharData[] {
|
||||
|
||||
@@ -8,6 +8,7 @@ import { AttributeData } from './AttributeData';
|
||||
import { CellData } from './CellData';
|
||||
import { Attributes, BgFlags, CHAR_DATA_ATTR_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX, Content, NULL_CELL_CHAR, NULL_CELL_CODE, NULL_CELL_WIDTH, WHITESPACE_CELL_CHAR } from './Constants';
|
||||
import { stringFromCodePoint } from '../input/TextDecoder';
|
||||
import { StringBuilder } from '../StringBuilder';
|
||||
|
||||
// Buffer memory layout:
|
||||
//
|
||||
@@ -36,20 +37,24 @@ const enum Cell {
|
||||
BG = 2 // currently unused
|
||||
}
|
||||
|
||||
|
||||
interface IExtendedAttrsExt extends IExtendedAttrs {
|
||||
_ext: number;
|
||||
_urlId: number;
|
||||
}
|
||||
|
||||
|
||||
export const DEFAULT_ATTR_DATA = Object.freeze(new AttributeData());
|
||||
|
||||
// Work variables to avoid garbage collection
|
||||
let $startIndex = 0;
|
||||
const $workCell = new CellData();
|
||||
const $extended = DEFAULT_ATTR_DATA.extended.clone() as IExtendedAttrsExt;
|
||||
const $translateToStringBuilder = new StringBuilder();
|
||||
|
||||
export interface IBufferLineStringCacheEntry {
|
||||
value: string | undefined;
|
||||
isTrimmed: boolean;
|
||||
generation: number;
|
||||
}
|
||||
|
||||
export interface IBufferLineStringCache {
|
||||
generation: number;
|
||||
allocateEntry(): IBufferLineStringCacheEntry;
|
||||
touch?(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typed array based bufferline implementation.
|
||||
@@ -72,14 +77,11 @@ export class BufferLine implements IBufferLine {
|
||||
protected _combined: {[index: number]: string} = {};
|
||||
/** Sparse cache; only read when `HAS_EXTENDED` is set in `_data`. */
|
||||
protected _extendedAttrs: {[index: number]: IExtendedAttrs | undefined} = {};
|
||||
protected _stringCacheEntryRef: WeakRef<IBufferLineStringCacheEntry> | undefined;
|
||||
public length: number;
|
||||
|
||||
/** line text cache */
|
||||
protected _cacheValid = false;
|
||||
protected _cache: string = '';
|
||||
protected _cacheTrimmed = false;
|
||||
|
||||
constructor(
|
||||
protected readonly _stringCache: IBufferLineStringCache,
|
||||
cols: number,
|
||||
fillCellData?: ICellData,
|
||||
public isWrapped: boolean = false
|
||||
@@ -116,7 +118,7 @@ export class BufferLine implements IBufferLine {
|
||||
* @deprecated
|
||||
*/
|
||||
public set(index: number, value: CharData): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
this._data[index * Constants.CELL_INDICIES + Cell.FG] = value[CHAR_DATA_ATTR_INDEX];
|
||||
if (value[CHAR_DATA_CHAR_INDEX].length > 1) {
|
||||
this._combined[index] = value[1];
|
||||
@@ -208,30 +210,21 @@ export class BufferLine implements IBufferLine {
|
||||
} else {
|
||||
cell.combinedData = '';
|
||||
}
|
||||
cell.extended = this.getExtended(index);
|
||||
return cell;
|
||||
}
|
||||
|
||||
public getExtended(index: number): IExtendedAttrs {
|
||||
$startIndex = index * Constants.CELL_INDICIES;
|
||||
if (this._data[$startIndex + Cell.BG] & BgFlags.HAS_EXTENDED) {
|
||||
return this._extendedAttrs[index]!;
|
||||
if (cell.bg & BgFlags.HAS_EXTENDED) {
|
||||
cell.extended = this._extendedAttrs[index]!;
|
||||
} else {
|
||||
// Do not mutate cell.extended in place: it may still reference this line's map entry from a
|
||||
// prior loadCell into a reused CellData (e.g. $workCell during insert/delete).
|
||||
cell.extended = DEFAULT_ATTR_DATA.extended.clone();
|
||||
}
|
||||
// Do not mutate cell.extended in place: it may still reference this line's map entry from a
|
||||
// prior loadCell into a reused CellData (e.g. $workCell during insert/delete).
|
||||
// We use $extended as blueprint and reset the internals
|
||||
// mimicking the ctor to avoid a new allocation.
|
||||
$extended._ext = 0;
|
||||
$extended._urlId = 0;
|
||||
$extended.payload = undefined;
|
||||
return $extended;
|
||||
return cell;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set data at `index` to `cell`.
|
||||
*/
|
||||
public setCell(index: number, cell: ICellData): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
if (cell.content & Content.IS_COMBINED_MASK) {
|
||||
this._combined[index] = cell.combinedData;
|
||||
}
|
||||
@@ -249,14 +242,13 @@ export class BufferLine implements IBufferLine {
|
||||
* it gets an optimized access method.
|
||||
*/
|
||||
public setCellFromCodepoint(index: number, codePoint: number, width: number, attrs: IAttributeData): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
if (attrs.bg & BgFlags.HAS_EXTENDED) {
|
||||
this._extendedAttrs[index] = attrs.extended;
|
||||
}
|
||||
const $idx = index * Constants.CELL_INDICIES;
|
||||
this._data[$idx + Cell.CONTENT] = codePoint | (width << Content.WIDTH_SHIFT);
|
||||
this._data[$idx + Cell.FG] = attrs.fg;
|
||||
this._data[$idx + Cell.BG] = attrs.bg;
|
||||
this._data[index * Constants.CELL_INDICIES + Cell.CONTENT] = codePoint | (width << Content.WIDTH_SHIFT);
|
||||
this._data[index * Constants.CELL_INDICIES + Cell.FG] = attrs.fg;
|
||||
this._data[index * Constants.CELL_INDICIES + Cell.BG] = attrs.bg;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -266,7 +258,7 @@ export class BufferLine implements IBufferLine {
|
||||
* by the previous `setDataFromCodePoint` call, we can omit it here.
|
||||
*/
|
||||
public addCodepointToCell(index: number, codePoint: number, width: number): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
let content = this._data[index * Constants.CELL_INDICIES + Cell.CONTENT];
|
||||
if (content & Content.IS_COMBINED_MASK) {
|
||||
// we already have a combined string, simply add
|
||||
@@ -293,7 +285,7 @@ export class BufferLine implements IBufferLine {
|
||||
}
|
||||
|
||||
public insertCells(pos: number, n: number, fillCellData: ICellData): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
pos %= this.length;
|
||||
|
||||
// handle fullwidth at pos: reset cell one to the left if pos is second cell of a wide char
|
||||
@@ -321,7 +313,7 @@ export class BufferLine implements IBufferLine {
|
||||
}
|
||||
|
||||
public deleteCells(pos: number, n: number, fillCellData: ICellData): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
pos %= this.length;
|
||||
if (n < this.length - pos) {
|
||||
for (let i = 0; i < this.length - pos - n; ++i) {
|
||||
@@ -348,7 +340,7 @@ export class BufferLine implements IBufferLine {
|
||||
}
|
||||
|
||||
public replaceCells(start: number, end: number, fillCellData: ICellData, respectProtect: boolean = false): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
// full branching on respectProtect==true, hopefully getting fast JIT for standard case
|
||||
if (respectProtect) {
|
||||
if (start && this.getWidth(start - 1) === 2 && !this.isProtected(start - 1)) {
|
||||
@@ -388,7 +380,7 @@ export class BufferLine implements IBufferLine {
|
||||
* excess memory (true after shrinking > Constants.CLEANUP_THRESHOLD).
|
||||
*/
|
||||
public resize(cols: number, fillCellData: ICellData): boolean {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
if (cols === this.length) {
|
||||
return this._data.length * 4 * Constants.CLEANUP_THRESHOLD < this._data.buffer.byteLength;
|
||||
}
|
||||
@@ -448,7 +440,7 @@ export class BufferLine implements IBufferLine {
|
||||
|
||||
/** fill a line with fillCharData */
|
||||
public fill(fillCellData: ICellData, respectProtect: boolean = false): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
// full branching on respectProtect==true, hopefully getting fast JIT for standard case
|
||||
if (respectProtect) {
|
||||
for (let i = 0; i < this.length; ++i) {
|
||||
@@ -466,7 +458,8 @@ export class BufferLine implements IBufferLine {
|
||||
}
|
||||
|
||||
/** alter to a full copy of line */
|
||||
public copyFrom(line: BufferLine, blank?: boolean): void {
|
||||
public copyFrom(line: BufferLine): void {
|
||||
this._invalidateStringCache();
|
||||
if (this.length !== line.length) {
|
||||
this._data = new Uint32Array(line._data);
|
||||
} else {
|
||||
@@ -474,29 +467,16 @@ export class BufferLine implements IBufferLine {
|
||||
this._data.set(line._data);
|
||||
}
|
||||
this.length = line.length;
|
||||
if (blank) {
|
||||
// a blank line may never hold combined or extended attrs,
|
||||
// thus we can skip handling them
|
||||
this._combined = {};
|
||||
this._extendedAttrs = {};
|
||||
} else {
|
||||
this._copySparseMapsFrom(line);
|
||||
}
|
||||
this._cache = '';
|
||||
this._cacheValid = false;
|
||||
this._copySparseMapsFrom(line);
|
||||
this.isWrapped = line.isWrapped;
|
||||
}
|
||||
|
||||
/** create a new clone */
|
||||
public clone(blank?: boolean): IBufferLine {
|
||||
const newLine = new BufferLine(0, undefined, false);
|
||||
public clone(): IBufferLine {
|
||||
const newLine = new BufferLine(this._stringCache, 0, undefined, false);
|
||||
newLine._data = new Uint32Array(this._data);
|
||||
newLine.length = this.length;
|
||||
if (!blank) {
|
||||
// a blank line may never hold combined or extended attrs,
|
||||
// thus we can skip handling them
|
||||
newLine._copySparseMapsFrom(this);
|
||||
}
|
||||
newLine._copySparseMapsFrom(this);
|
||||
newLine.isWrapped = this.isWrapped;
|
||||
return newLine;
|
||||
}
|
||||
@@ -520,7 +500,7 @@ export class BufferLine implements IBufferLine {
|
||||
}
|
||||
|
||||
public copyCellsFrom(src: BufferLine, srcCol: number, destCol: number, length: number, applyInReverse: boolean): void {
|
||||
this._cacheValid = false;
|
||||
this._invalidateStringCache();
|
||||
const srcData = src._data;
|
||||
if (applyInReverse) {
|
||||
for (let cell = length - 1; cell >= 0; cell--) {
|
||||
@@ -554,13 +534,17 @@ export class BufferLine implements IBufferLine {
|
||||
* returned string, the corresponding entries in `outColumns` will have the same column number.
|
||||
*/
|
||||
public translateToString(trimRight?: boolean, startCol?: number, endCol?: number, outColumns?: number[]): string {
|
||||
const isCanonical = (startCol === undefined || startCol === 0) && endCol === undefined && outColumns === undefined;
|
||||
if (isCanonical && this._cacheValid) {
|
||||
const isCanonicalRequest = (startCol === undefined || startCol === 0) && endCol === undefined && outColumns === undefined;
|
||||
if (isCanonicalRequest) {
|
||||
this._stringCache.touch?.();
|
||||
}
|
||||
const stringCacheEntry = isCanonicalRequest ? this._getStringCacheEntry(false) : undefined;
|
||||
if (isCanonicalRequest && stringCacheEntry?.value !== undefined) {
|
||||
if (trimRight) {
|
||||
return this._cacheTrimmed ? this._cache : this._cache.trimEnd();
|
||||
return stringCacheEntry.isTrimmed ? stringCacheEntry.value : stringCacheEntry.value.trimEnd();
|
||||
}
|
||||
if (!this._cacheTrimmed) {
|
||||
return this._cache;
|
||||
if (!stringCacheEntry.isTrimmed) {
|
||||
return stringCacheEntry.value;
|
||||
}
|
||||
}
|
||||
startCol = startCol ?? 0;
|
||||
@@ -571,12 +555,12 @@ export class BufferLine implements IBufferLine {
|
||||
if (outColumns) {
|
||||
outColumns.length = 0;
|
||||
}
|
||||
const cellContents: string[] = [];
|
||||
$translateToStringBuilder.reset();
|
||||
while (startCol < endCol) {
|
||||
const content = this._data[startCol * Constants.CELL_INDICIES + Cell.CONTENT];
|
||||
const cp = content & Content.CODEPOINT_MASK;
|
||||
const chars = (content & Content.IS_COMBINED_MASK) ? this._combined[startCol] : (cp) ? stringFromCodePoint(cp) : WHITESPACE_CELL_CHAR;
|
||||
cellContents.push(chars);
|
||||
$translateToStringBuilder.append(chars);
|
||||
if (outColumns) {
|
||||
for (let i = 0; i < chars.length; ++i) {
|
||||
outColumns.push(startCol);
|
||||
@@ -587,15 +571,39 @@ export class BufferLine implements IBufferLine {
|
||||
if (outColumns) {
|
||||
outColumns.push(startCol);
|
||||
}
|
||||
const result = cellContents.join('');
|
||||
if (isCanonical) {
|
||||
this._cache = result;
|
||||
this._cacheValid = true;
|
||||
this._cacheTrimmed = !!trimRight;
|
||||
const result = $translateToStringBuilder.toString();
|
||||
$translateToStringBuilder.reset();
|
||||
if (isCanonicalRequest) {
|
||||
const cacheEntry = this._getStringCacheEntry(true)!;
|
||||
cacheEntry.value = result;
|
||||
cacheEntry.isTrimmed = !!trimRight;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
protected _getStringCacheEntry(createIfNeeded: boolean): IBufferLineStringCacheEntry | undefined {
|
||||
const cachedEntry = this._stringCacheEntryRef?.deref();
|
||||
if (cachedEntry) {
|
||||
if (cachedEntry.generation === this._stringCache.generation) {
|
||||
return cachedEntry;
|
||||
}
|
||||
}
|
||||
if (!createIfNeeded) {
|
||||
return undefined;
|
||||
}
|
||||
const cacheEntry = this._stringCache.allocateEntry();
|
||||
this._stringCacheEntryRef = new WeakRef(cacheEntry);
|
||||
return cacheEntry;
|
||||
}
|
||||
|
||||
private _invalidateStringCache(): void {
|
||||
const cacheEntry = this._getStringCacheEntry(false);
|
||||
if (cacheEntry) {
|
||||
cacheEntry.value = undefined;
|
||||
cacheEntry.isTrimmed = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Copy sparse map entries for a single cell when `_data` flags require them. */
|
||||
private _copyCellMapsFrom(src: BufferLine, srcCol: number, destCol: number): void {
|
||||
const srcStart = srcCol * Constants.CELL_INDICIES;
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* Copyright (c) 2026 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import type { IBufferLineStringCache, IBufferLineStringCacheEntry } from './BufferLine';
|
||||
import { disposableTimeout } from '../Async';
|
||||
import { Disposable, MutableDisposable, toDisposable, type IDisposable } from '../Lifecycle';
|
||||
|
||||
const enum Constants {
|
||||
CACHE_TTL_MS = 15000
|
||||
}
|
||||
|
||||
export class BufferLineStringCache extends Disposable implements IBufferLineStringCache {
|
||||
public generation: number = 0;
|
||||
public readonly entries: Set<IBufferLineStringCacheEntry> = new Set();
|
||||
private readonly _clearTimeout = this._register(new MutableDisposable<IDisposable>());
|
||||
private _lastAccessTimestamp: number = 0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._register(toDisposable(() => this.entries.clear()));
|
||||
}
|
||||
|
||||
public touch(): void {
|
||||
this._scheduleClear();
|
||||
}
|
||||
|
||||
public allocateEntry(): IBufferLineStringCacheEntry {
|
||||
const entry: IBufferLineStringCacheEntry = {
|
||||
value: undefined,
|
||||
isTrimmed: false,
|
||||
generation: this.generation
|
||||
};
|
||||
this.entries.add(entry);
|
||||
this._scheduleClear();
|
||||
return entry;
|
||||
}
|
||||
|
||||
public clear(): void {
|
||||
this._clearTimeout.clear();
|
||||
this._lastAccessTimestamp = 0;
|
||||
this.generation++;
|
||||
for (const entry of this.entries) {
|
||||
entry.value = undefined;
|
||||
entry.isTrimmed = false;
|
||||
}
|
||||
this.entries.clear();
|
||||
}
|
||||
|
||||
private _scheduleClear(): void {
|
||||
this._lastAccessTimestamp = Date.now();
|
||||
if (this._clearTimeout.value) {
|
||||
return;
|
||||
}
|
||||
this._scheduleClearTimeout(Constants.CACHE_TTL_MS);
|
||||
}
|
||||
|
||||
private _scheduleClearTimeout(timeoutMs: number): void {
|
||||
this._clearTimeout.value = disposableTimeout(() => {
|
||||
const elapsed = Date.now() - this._lastAccessTimestamp;
|
||||
if (elapsed >= Constants.CACHE_TTL_MS) {
|
||||
this.clear();
|
||||
return;
|
||||
}
|
||||
this._scheduleClearTimeout(Constants.CACHE_TTL_MS - elapsed);
|
||||
}, timeoutMs);
|
||||
}
|
||||
}
|
||||
@@ -5,16 +5,18 @@
|
||||
import { assert } from 'chai';
|
||||
import { CircularList } from '../CircularList';
|
||||
import { BufferLine } from './BufferLine';
|
||||
import { BufferLineStringCache } from './BufferLineStringCache';
|
||||
import { CellData } from './CellData';
|
||||
import { NULL_CELL_CHAR, NULL_CELL_WIDTH, NULL_CELL_CODE } from './Constants';
|
||||
import { reflowLargerGetLinesToRemove, reflowSmallerGetNewLineLengths } from './BufferReflow';
|
||||
import { IBufferLine } from './Types';
|
||||
|
||||
const TEST_STRING_CACHE = new BufferLineStringCache();
|
||||
|
||||
describe('BufferReflow', () => {
|
||||
describe('reflowSmallerGetNewLineLengths', () => {
|
||||
it('should return correct line lengths for a small line with wide characters', () => {
|
||||
const line = new BufferLine(4);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 4);
|
||||
line.set(0, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line.set(1, [0, '', 0, 0]);
|
||||
line.set(2, [0, '语', 2, '语'.charCodeAt(0)]);
|
||||
@@ -24,7 +26,7 @@ describe('BufferReflow', () => {
|
||||
assert.deepEqual(reflowSmallerGetNewLineLengths([line], 4, 2), [2, 2], 'line: 汉, 语');
|
||||
});
|
||||
it('should return correct line lengths for a large line with wide characters', () => {
|
||||
const line = new BufferLine(12);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 12);
|
||||
for (let i = 0; i < 12; i += 4) {
|
||||
line.set(i, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line.set(i + 2, [0, '语', 2, '语'.charCodeAt(0)]);
|
||||
@@ -46,7 +48,7 @@ describe('BufferReflow', () => {
|
||||
assert.deepEqual(reflowSmallerGetNewLineLengths([line], 12, 2), [2, 2, 2, 2, 2, 2], 'line: 汉, 语, 汉, 语, 汉, 语');
|
||||
});
|
||||
it('should return correct line lengths for a string with wide and single characters', () => {
|
||||
const line = new BufferLine(6);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 6);
|
||||
line.set(0, [0, 'a', 1, 'a'.charCodeAt(0)]);
|
||||
line.set(1, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line.set(2, [0, '', 0, 0]);
|
||||
@@ -60,14 +62,14 @@ describe('BufferReflow', () => {
|
||||
assert.deepEqual(reflowSmallerGetNewLineLengths([line], 6, 2), [1, 2, 2, 1], 'line: a, 汉, 语, b');
|
||||
});
|
||||
it('should return correct line lengths for a wrapped line with wide and single characters', () => {
|
||||
const line1 = new BufferLine(6);
|
||||
const line1 = new BufferLine(TEST_STRING_CACHE, 6);
|
||||
line1.set(0, [0, 'a', 1, 'a'.charCodeAt(0)]);
|
||||
line1.set(1, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line1.set(2, [0, '', 0, 0]);
|
||||
line1.set(3, [0, '语', 2, '语'.charCodeAt(0)]);
|
||||
line1.set(4, [0, '', 0, 0]);
|
||||
line1.set(5, [0, 'b', 1, 'b'.charCodeAt(0)]);
|
||||
const line2 = new BufferLine(6, undefined, true);
|
||||
const line2 = new BufferLine(TEST_STRING_CACHE, 6, undefined, true);
|
||||
line2.set(0, [0, 'a', 1, 'a'.charCodeAt(0)]);
|
||||
line2.set(1, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line2.set(2, [0, '', 0, 0]);
|
||||
@@ -82,7 +84,7 @@ describe('BufferReflow', () => {
|
||||
assert.deepEqual(reflowSmallerGetNewLineLengths([line1, line2], 6, 2), [1, 2, 2, 2, 2, 2, 1], 'lines: a, 汉, 语, ba, 汉, 语, b');
|
||||
});
|
||||
it('should work on lines ending in null space', () => {
|
||||
const line = new BufferLine(5);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 5);
|
||||
line.set(0, [0, '汉', 2, '汉'.charCodeAt(0)]);
|
||||
line.set(1, [0, '', 0, 0]);
|
||||
line.set(2, [0, '语', 2, '语'.charCodeAt(0)]);
|
||||
@@ -100,7 +102,7 @@ describe('BufferReflow', () => {
|
||||
function createWrappedLines(chars: string): CircularList<IBufferLine> {
|
||||
const lines = new CircularList<IBufferLine>(chars.length);
|
||||
for (let i = 0; i < chars.length; i++) {
|
||||
const line = new BufferLine(1);
|
||||
const line = new BufferLine(TEST_STRING_CACHE, 1);
|
||||
line.set(0, [0, chars[i], 1, chars.charCodeAt(i)]);
|
||||
line.isWrapped = i > 0;
|
||||
lines.push(line);
|
||||
|
||||
@@ -82,4 +82,45 @@ describe('BufferSet', () => {
|
||||
assert.equal(bufferSet.alt.markers.length, 0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('lifecycle', () => {
|
||||
it('should dispose previous buffers on reset', () => {
|
||||
const oldNormal = bufferSet.normal as any;
|
||||
oldNormal.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
|
||||
oldNormal.translateBufferLineToString(0, false);
|
||||
|
||||
const oldCache = oldNormal._stringCache;
|
||||
assert.equal(oldCache.entries.size, 1);
|
||||
assert.notEqual(oldCache._clearTimeout.value, undefined);
|
||||
|
||||
bufferSet.reset();
|
||||
|
||||
assert.notEqual(bufferSet.normal, oldNormal);
|
||||
assert.equal(oldCache.entries.size, 0);
|
||||
assert.equal(oldCache._clearTimeout.value, undefined);
|
||||
});
|
||||
|
||||
it('should dispose both buffers when disposed', () => {
|
||||
const normal = bufferSet.normal as any;
|
||||
normal.lines.get(0)!.setCell(0, createCellData(0, 'a', 1));
|
||||
normal.translateBufferLineToString(0, false);
|
||||
|
||||
bufferSet.activateAltBuffer();
|
||||
const alt = bufferSet.alt as any;
|
||||
alt.lines.get(0)!.setCell(0, createCellData(0, 'b', 1));
|
||||
alt.translateBufferLineToString(0, false);
|
||||
|
||||
const normalCache = normal._stringCache;
|
||||
const altCache = alt._stringCache;
|
||||
assert.notEqual(normalCache._clearTimeout.value, undefined);
|
||||
assert.notEqual(altCache._clearTimeout.value, undefined);
|
||||
|
||||
bufferSet.dispose();
|
||||
|
||||
assert.equal(normalCache.entries.size, 0);
|
||||
assert.equal(altCache.entries.size, 0);
|
||||
assert.equal(normalCache._clearTimeout.value, undefined);
|
||||
assert.equal(altCache._clearTimeout.value, undefined);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -20,7 +20,6 @@ export interface IExtendedAttrs {
|
||||
underlineColor: number;
|
||||
underlineVariantOffset: number;
|
||||
urlId: number;
|
||||
payload: Object | undefined;
|
||||
clone(): IExtendedAttrs;
|
||||
isEmpty(): boolean;
|
||||
}
|
||||
@@ -132,8 +131,8 @@ export interface IBufferLine {
|
||||
resize(cols: number, fill: ICellData): boolean;
|
||||
cleanupMemory(): number;
|
||||
fill(fillCellData: ICellData, respectProtect?: boolean): void;
|
||||
copyFrom(line: IBufferLine, blank?: boolean): void;
|
||||
clone(blank?: boolean): IBufferLine;
|
||||
copyFrom(line: IBufferLine): void;
|
||||
clone(): IBufferLine;
|
||||
getTrimmedLength(): number;
|
||||
getNoBgTrimmedLength(): number;
|
||||
translateToString(trimRight?: boolean, startCol?: number, endCol?: number, outColumns?: number[]): string;
|
||||
@@ -147,7 +146,6 @@ export interface IBufferLine {
|
||||
getCodePoint(index: number): number;
|
||||
isCombined(index: number): number;
|
||||
getString(index: number): string;
|
||||
getExtended(index: number): IExtendedAttrs;
|
||||
}
|
||||
|
||||
export interface IMarker extends IDisposable {
|
||||
|
||||
@@ -86,12 +86,12 @@ export class BufferService extends Disposable implements IBufferService {
|
||||
// Insert the line using the fastest method
|
||||
if (bottomRow === buffer.lines.length - 1) {
|
||||
if (willBufferBeTrimmed) {
|
||||
buffer.lines.recycle().copyFrom(newLine, true);
|
||||
buffer.lines.recycle().copyFrom(newLine);
|
||||
} else {
|
||||
buffer.lines.push(newLine.clone(true));
|
||||
buffer.lines.push(newLine.clone());
|
||||
}
|
||||
} else {
|
||||
buffer.lines.splice(bottomRow + 1, 0, newLine.clone(true));
|
||||
buffer.lines.splice(bottomRow + 1, 0, newLine.clone());
|
||||
}
|
||||
|
||||
// Only adjust ybase and ydisp when the buffer is not trimmed
|
||||
@@ -113,7 +113,7 @@ export class BufferService extends Disposable implements IBufferService {
|
||||
// scrollback, instead we can just shift them in-place.
|
||||
const scrollRegionHeight = bottomRow - topRow + 1 /* as it's zero-based */;
|
||||
buffer.lines.shiftElements(topRow + 1, scrollRegionHeight - 1, -1);
|
||||
buffer.lines.set(bottomRow, newLine.clone(true));
|
||||
buffer.lines.set(bottomRow, newLine.clone());
|
||||
}
|
||||
|
||||
// Move the viewport to the bottom of the buffer unless the user is
|
||||
|
||||
@@ -214,7 +214,7 @@ export class DecorationLineCache extends Disposable {
|
||||
}
|
||||
|
||||
private _handleBufferLinesTrim(amount: number): void {
|
||||
if (amount <= 0 || !this._decorationsByLine.size) {
|
||||
if (amount <= 0) {
|
||||
return;
|
||||
}
|
||||
const newMap = new Map<number, IInternalDecoration[]>();
|
||||
|
||||
@@ -0,0 +1,362 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
import { IImage32, decodePng } from '@lunapaint/png-codec';
|
||||
import { expect } from '@playwright/test';
|
||||
import { ITestContext } from './TestUtils';
|
||||
import { generateUniqueGlyphFlood } from './SyntheticTui';
|
||||
|
||||
/**
|
||||
* A decoded screenshot of a terminal's render surface together with its grid
|
||||
* dimensions, used to sample per-cell pixels.
|
||||
*/
|
||||
export interface IRendererFrame {
|
||||
cols: number;
|
||||
rows: number;
|
||||
decoded: IImage32;
|
||||
}
|
||||
|
||||
/**
|
||||
* A coarse, downsampled fingerprint of a single cell's rendered pixels. It is an
|
||||
* `grid * grid` array of averaged `[r, g, b, a]` sub-cell colors, flattened.
|
||||
*
|
||||
* Averaging makes the signature tolerant to sub-pixel antialiasing differences
|
||||
* (which vary slightly even under SwiftShader) while still changing massively
|
||||
* when a glyph is garbled, blank, or drawn from the wrong texture atlas page.
|
||||
*/
|
||||
export type CellSignature = number[];
|
||||
|
||||
const DEFAULT_GRID = 4;
|
||||
const DEFAULT_SCREEN_SELECTOR = '#terminal-container .xterm-screen';
|
||||
|
||||
/**
|
||||
* Captures a fresh screenshot of a terminal render surface and decodes it.
|
||||
*
|
||||
* Unlike the cached helper in `SharedRendererTests.ts`, this always takes a new
|
||||
* screenshot and accepts a `selector` so multiple terminals (each in their own
|
||||
* container) can be sampled independently in the same test.
|
||||
* @param ctx The test context.
|
||||
* @param selector CSS selector for the `.xterm-screen` element to capture.
|
||||
* @param termGlobal Name of the `window` terminal global to read grid dimensions
|
||||
* from (default `'term'`); use e.g. `'termB'` for multi-terminal tests.
|
||||
*/
|
||||
export async function captureFrame(
|
||||
ctx: ITestContext,
|
||||
selector: string = DEFAULT_SCREEN_SELECTOR,
|
||||
termGlobal: string = 'term'
|
||||
): Promise<IRendererFrame> {
|
||||
const screenshotOptions = process.env.DEBUG
|
||||
? { path: `out-esbuild-test/playwright/screenshot-${termGlobal}.png` }
|
||||
: undefined;
|
||||
const buffer = await ctx.page.locator(selector).screenshot(screenshotOptions);
|
||||
const grid = await ctx.page.evaluate((name) => {
|
||||
const term = (window as any)[name];
|
||||
return { cols: term.cols as number, rows: term.rows as number };
|
||||
}, termGlobal);
|
||||
return {
|
||||
cols: grid.cols,
|
||||
rows: grid.rows,
|
||||
decoded: (await decodePng(new Uint8Array(buffer), { force32: true })).image
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the coarse pixel signature of a single 1-based cell from a frame.
|
||||
* @param frame The decoded frame to sample.
|
||||
* @param col The 1-based column.
|
||||
* @param row The 1-based row.
|
||||
* @param grid The sub-cell resolution per axis (default 4 -> 16 sub-cells).
|
||||
*/
|
||||
export function cellSignature(frame: IRendererFrame, col: number, row: number, grid: number = DEFAULT_GRID): CellSignature {
|
||||
const data = frame.decoded.data;
|
||||
const imageWidth = frame.decoded.width;
|
||||
const cellWidth = frame.decoded.width / frame.cols;
|
||||
const cellHeight = frame.decoded.height / frame.rows;
|
||||
const x0 = (col - 1) * cellWidth;
|
||||
const y0 = (row - 1) * cellHeight;
|
||||
|
||||
const subCount = grid * grid;
|
||||
const sums = new Array<number>(subCount * 4).fill(0);
|
||||
const counts = new Array<number>(subCount).fill(0);
|
||||
|
||||
const startX = Math.max(0, Math.floor(x0));
|
||||
const startY = Math.max(0, Math.floor(y0));
|
||||
const endX = Math.min(frame.decoded.width, Math.ceil(x0 + cellWidth));
|
||||
const endY = Math.min(frame.decoded.height, Math.ceil(y0 + cellHeight));
|
||||
|
||||
for (let y = startY; y < endY; y++) {
|
||||
const gy = Math.min(grid - 1, Math.max(0, Math.floor(((y - y0) / cellHeight) * grid)));
|
||||
for (let x = startX; x < endX; x++) {
|
||||
const gx = Math.min(grid - 1, Math.max(0, Math.floor(((x - x0) / cellWidth) * grid)));
|
||||
const sub = gy * grid + gx;
|
||||
const i = (y * imageWidth + x) * 4;
|
||||
sums[sub * 4] += data[i];
|
||||
sums[sub * 4 + 1] += data[i + 1];
|
||||
sums[sub * 4 + 2] += data[i + 2];
|
||||
sums[sub * 4 + 3] += data[i + 3];
|
||||
counts[sub]++;
|
||||
}
|
||||
}
|
||||
|
||||
const signature = new Array<number>(subCount * 4).fill(0);
|
||||
for (let sub = 0; sub < subCount; sub++) {
|
||||
if (counts[sub] > 0) {
|
||||
signature[sub * 4] = sums[sub * 4] / counts[sub];
|
||||
signature[sub * 4 + 1] = sums[sub * 4 + 1] / counts[sub];
|
||||
signature[sub * 4 + 2] = sums[sub * 4 + 2] / counts[sub];
|
||||
signature[sub * 4 + 3] = sums[sub * 4 + 3] / counts[sub];
|
||||
}
|
||||
}
|
||||
return signature;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the maximum absolute per-channel difference between two signatures.
|
||||
* @param a The first signature.
|
||||
* @param b The second signature.
|
||||
*/
|
||||
export function signatureMaxChannelDiff(a: CellSignature, b: CellSignature): number {
|
||||
if (a.length !== b.length) {
|
||||
return Number.POSITIVE_INFINITY;
|
||||
}
|
||||
let max = 0;
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
max = Math.max(max, Math.abs(a[i] - b[i]));
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts that two cell signatures are effectively identical (i.e. the glyph
|
||||
* rendered the same), within a tolerance for antialiasing noise. Use this after
|
||||
* a stress action (atlas page merge, atlas clear, scroll, resize) to assert a
|
||||
* reference glyph did not become garbled.
|
||||
* @param actual The signature observed after the stress action.
|
||||
* @param reference The baseline signature captured in a fresh atlas.
|
||||
* @param tolerance Max allowed per-channel difference (default 12 / 255).
|
||||
* @param message Optional assertion message.
|
||||
*/
|
||||
export function expectSignatureMatches(actual: CellSignature, reference: CellSignature, tolerance: number = 12, message?: string): void {
|
||||
const diff = signatureMaxChannelDiff(actual, reference);
|
||||
expect(diff, message ?? `glyph signature drifted by ${diff} (> ${tolerance}); likely corruption`).toBeLessThanOrEqual(tolerance);
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts that two cell signatures are meaningfully different. Useful as a
|
||||
* sanity check that distinct glyphs actually render differently (so the
|
||||
* signature has discriminating power) and that a cell is not blank.
|
||||
* @param a The first signature.
|
||||
* @param b The second signature.
|
||||
* @param minDiff Minimum required per-channel difference (default 24 / 255).
|
||||
* @param message Optional assertion message.
|
||||
*/
|
||||
export function expectSignatureDiffers(a: CellSignature, b: CellSignature, minDiff: number = 24, message?: string): void {
|
||||
const diff = signatureMaxChannelDiff(a, b);
|
||||
expect(diff, message ?? `signatures unexpectedly similar (${diff} < ${minDiff})`).toBeGreaterThanOrEqual(minDiff);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenience: capture a fresh frame and return the signature of one cell.
|
||||
* @param ctx The test context.
|
||||
* @param col The 1-based column.
|
||||
* @param row The 1-based row.
|
||||
* @param options Optional overrides.
|
||||
* @param options.selector CSS selector for the screen element to capture.
|
||||
* @param options.grid Sub-cell resolution per axis.
|
||||
* @param options.termGlobal Window terminal global to read dimensions from.
|
||||
*/
|
||||
export async function captureCellSignature(
|
||||
ctx: ITestContext,
|
||||
col: number,
|
||||
row: number,
|
||||
options: { selector?: string, grid?: number, termGlobal?: string } = {}
|
||||
): Promise<CellSignature> {
|
||||
const frame = await captureFrame(ctx, options.selector ?? DEFAULT_SCREEN_SELECTOR, options.termGlobal ?? 'term');
|
||||
return cellSignature(frame, col, row, options.grid ?? DEFAULT_GRID);
|
||||
}
|
||||
|
||||
/**
|
||||
* Captures the signatures of a contiguous run of cells on a single row from one
|
||||
* screenshot (cheaper than one screenshot per cell).
|
||||
* @param ctx The test context.
|
||||
* @param row The 1-based row.
|
||||
* @param cols The 1-based columns to sample.
|
||||
* @param options Optional overrides.
|
||||
* @param options.selector CSS selector for the screen element to capture.
|
||||
* @param options.grid Sub-cell resolution per axis.
|
||||
* @param options.termGlobal Window terminal global to read dimensions from.
|
||||
*/
|
||||
export async function captureRowSignatures(
|
||||
ctx: ITestContext,
|
||||
row: number,
|
||||
cols: number[],
|
||||
options: { selector?: string, grid?: number, termGlobal?: string } = {}
|
||||
): Promise<CellSignature[]> {
|
||||
const frame = await captureFrame(ctx, options.selector ?? DEFAULT_SCREEN_SELECTOR, options.termGlobal ?? 'term');
|
||||
return cols.map(col => cellSignature(frame, col, row, options.grid ?? DEFAULT_GRID));
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the WebGL addon onto `window.term` and asserts GPU acceleration is
|
||||
* genuinely active.
|
||||
*
|
||||
* This deliberately does NOT wrap loading in try/catch (unlike some existing
|
||||
* tests). If WebGL2 is unavailable the addon throws and the test must fail
|
||||
* loudly, because a silent fallback to the DOM renderer would make GPU
|
||||
* corruption tests pass falsely.
|
||||
* @param ctx The test context.
|
||||
* @param options WebGL addon options.
|
||||
* @param options.customGlyphs Whether to draw custom glyphs (defaults to the addon default).
|
||||
* @param options.preserveDrawingBuffer Whether to preserve the drawing buffer (defaults to true).
|
||||
*/
|
||||
export async function loadWebglStrict(
|
||||
ctx: ITestContext,
|
||||
options: { customGlyphs?: boolean, preserveDrawingBuffer?: boolean } = {}
|
||||
): Promise<void> {
|
||||
await ctx.page.evaluate((opts) => {
|
||||
const w = window as any;
|
||||
w.addon = new w.WebglAddon(opts);
|
||||
w.term.loadAddon(w.addon);
|
||||
}, { preserveDrawingBuffer: true, ...options });
|
||||
await assertWebglActive(ctx);
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts that the WebGL renderer (not the DOM renderer) is the active renderer
|
||||
* for `window.term`. Fails loudly on a silent DOM fallback.
|
||||
* @param ctx The test context.
|
||||
*/
|
||||
export async function assertWebglActive(ctx: ITestContext): Promise<void> {
|
||||
const state = await ctx.page.evaluate(() => {
|
||||
const w = window as any;
|
||||
const term = w.term;
|
||||
const addon = w.addon;
|
||||
const renderer = term?._core?._renderService?._renderer?.value;
|
||||
return {
|
||||
hasAddon: !!addon,
|
||||
// The addon's private renderer must be the one the render service is using.
|
||||
isWebglRenderer: !!addon && !!renderer && renderer === addon._renderer
|
||||
};
|
||||
});
|
||||
expect(state.hasAddon, 'WebglAddon should be loaded on window.term').toBe(true);
|
||||
expect(state.isWebglRenderer, 'WebGL renderer must be the active renderer (no silent DOM fallback)').toBe(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts the WebGL texture atlas canvas exists. Call after writing some content
|
||||
* so the atlas has been created. This is an additional public-API proof that the
|
||||
* GPU path actually rendered glyphs.
|
||||
* @param ctx The test context.
|
||||
*/
|
||||
export async function assertTextureAtlasPresent(ctx: ITestContext): Promise<void> {
|
||||
const hasAtlas = await ctx.page.evaluate(() => {
|
||||
const addon = (window as any).addon;
|
||||
return !!addon && addon.textureAtlas instanceof HTMLCanvasElement;
|
||||
});
|
||||
expect(hasAtlas, 'WebGL texture atlas canvas should exist after rendering').toBe(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the current number of pages in the active WebGL renderer's texture
|
||||
* atlas, via internals. Returns -1 if unavailable.
|
||||
* @param ctx The test context.
|
||||
*/
|
||||
export async function getAtlasPageCount(ctx: ITestContext): Promise<number> {
|
||||
return ctx.page.evaluate(() => {
|
||||
const renderer = (window as any).term?._core?._renderService?._renderer?.value;
|
||||
const atlas = renderer?._charAtlas;
|
||||
return atlas?.pages?.length ?? -1;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Forces the texture atlas to merge pages much sooner by lowering the static
|
||||
* `maxAtlasPages` knob on the live atlas class (reached via the atlas instance's
|
||||
* constructor). Must be called after the WebGL renderer/atlas exists.
|
||||
* @param ctx The test context.
|
||||
* @param maxAtlasPages The new page cap (the merge path triggers at >= max(4, this)).
|
||||
*/
|
||||
export async function setMaxAtlasPages(ctx: ITestContext, maxAtlasPages: number): Promise<void> {
|
||||
const applied = await ctx.page.evaluate((max) => {
|
||||
const renderer = (window as any).term?._core?._renderService?._renderer?.value;
|
||||
const atlas = renderer?._charAtlas;
|
||||
if (!atlas) {
|
||||
return false;
|
||||
}
|
||||
// maxAtlasPages is a static on the TextureAtlas class, reached via constructor.
|
||||
(atlas.constructor as any).maxAtlasPages = max;
|
||||
return true;
|
||||
}, maxAtlasPages);
|
||||
expect(applied, 'should be able to reach the texture atlas to set maxAtlasPages').toBe(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets `maxAtlasPages` to undefined so the next constructed renderer re-derives it from GL
|
||||
* capabilities. Call after any test that used {@link setMaxAtlasPages}: the static lives for
|
||||
* the page's lifetime, so without a reset every terminal opened later in the same file builds
|
||||
* its GL texture and shader sampler arrays at the lowered cap.
|
||||
* @param ctx The test context.
|
||||
*/
|
||||
export async function resetMaxAtlasPages(ctx: ITestContext): Promise<void> {
|
||||
await ctx.page.evaluate(() => {
|
||||
const renderer = (window as any).term?._core?._renderService?._renderer?.value;
|
||||
const atlas = renderer?._charAtlas;
|
||||
if (atlas) {
|
||||
(atlas.constructor as any).maxAtlasPages = undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes `chunks` screenfuls of distinct glyphs, rendering after each chunk.
|
||||
*
|
||||
* Only glyphs that are actually visible during a render get rasterized into the
|
||||
* texture atlas, so a single huge write mostly rasterizes the final viewport. To
|
||||
* accumulate enough distinct glyphs to allocate (and merge) multiple atlas pages
|
||||
* we must write a screenful, render it, then write the next distinct screenful.
|
||||
* @param ctx The test context.
|
||||
* @param chunks Number of screenfuls of distinct glyphs to write.
|
||||
* @param options Sizing overrides.
|
||||
* @param options.linesPerChunk Number of lines per screenful chunk.
|
||||
* @param options.cols Columns per line.
|
||||
* @returns The atlas page count after flooding.
|
||||
*/
|
||||
export async function floodDistinctGlyphs(
|
||||
ctx: ITestContext,
|
||||
chunks: number,
|
||||
options: { linesPerChunk?: number, cols?: number } = {}
|
||||
): Promise<number> {
|
||||
const linesPerChunk = options.linesPerChunk ?? 24;
|
||||
const cols = options.cols ?? 80;
|
||||
const glyphsPerChunk = linesPerChunk * Math.max(1, Math.floor(cols / 2));
|
||||
for (let c = 0; c < chunks; c++) {
|
||||
await writeAndWaitForRender(ctx, generateUniqueGlyphFlood(glyphsPerChunk, cols, c * glyphsPerChunk));
|
||||
}
|
||||
return getAtlasPageCount(ctx);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves once the terminal fires its next render event.
|
||||
* @param ctx The test context.
|
||||
*/
|
||||
export async function waitForRender(ctx: ITestContext): Promise<void> {
|
||||
await new Promise<void>(resolve => {
|
||||
const disposable = ctx.proxy.onRender(() => {
|
||||
disposable.dispose();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes data and waits for the terminal to render it.
|
||||
* @param ctx The test context.
|
||||
* @param data The data to write.
|
||||
*/
|
||||
export async function writeAndWaitForRender(ctx: ITestContext, data: string): Promise<void> {
|
||||
const renderPromise = waitForRender(ctx);
|
||||
await ctx.proxy.write(data);
|
||||
await renderPromise;
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
/**
|
||||
* Copyright (c) 2025 The xterm.js authors. All rights reserved.
|
||||
* @license MIT
|
||||
*
|
||||
* Deterministic generators that mimic the output of an AI/agent TUI CLI (e.g.
|
||||
* Copilot CLI): boxed panels, braille spinners, streaming colored text, status
|
||||
* lines, full-screen redraws and large unique-glyph floods.
|
||||
*
|
||||
* Everything here is seeded/precomputed and contains NO `Math.random`, `Date`
|
||||
* or other non-determinism, so the produced byte streams are stable across runs
|
||||
* and machines. This lets WebGL/atlas stress tests assert exact render results.
|
||||
*/
|
||||
|
||||
/** A tiny deterministic PRNG (mulberry32) so "random-looking" output is stable. */
|
||||
function mulberry32(seed: number): () => number {
|
||||
let a = seed >>> 0;
|
||||
return () => {
|
||||
a |= 0;
|
||||
a = (a + 0x6D2B79F5) | 0;
|
||||
let t = Math.imul(a ^ (a >>> 15), 1 | a);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
|
||||
const BRAILLE_SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
|
||||
const SGR_FG = [31, 32, 33, 34, 35, 36, 37, 90, 91, 92, 93, 94, 95, 96];
|
||||
const WORDS = [
|
||||
'analyzing', 'repository', 'reading', 'TextureAtlas', 'rendering', 'glyph',
|
||||
'webgl', 'terminal', 'buffer', 'scrollback', 'tokenizing', 'synthesizing',
|
||||
'patch', 'diff', 'commit', 'validate', 'compile', 'searching', 'context'
|
||||
];
|
||||
|
||||
/** Box-drawing characters (custom-glyph range that stresses the WebGL atlas). */
|
||||
const BOX = { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' };
|
||||
|
||||
const CSI = '\x1b[';
|
||||
const RESET = `${CSI}0m`;
|
||||
const CLEAR_HOME = `${CSI}2J${CSI}H`;
|
||||
const ENTER_ALT = `${CSI}?1049h`;
|
||||
const EXIT_ALT = `${CSI}?1049l`;
|
||||
|
||||
export interface ISyntheticTuiOptions {
|
||||
/** PRNG seed for stable pseudo-random content. */
|
||||
seed?: number;
|
||||
/** Number of full-screen redraw frames to emit. */
|
||||
frames?: number;
|
||||
/** Terminal columns to format for. */
|
||||
cols?: number;
|
||||
/** Terminal rows to format for. */
|
||||
rows?: number;
|
||||
/** Wrap each frame in alternate-buffer enter/exit (TUI app behavior). */
|
||||
useAltBuffer?: boolean;
|
||||
}
|
||||
|
||||
function pad(text: string, width: number): string {
|
||||
if (text.length >= width) {
|
||||
return text.slice(0, width);
|
||||
}
|
||||
return text + ' '.repeat(width - text.length);
|
||||
}
|
||||
|
||||
function boxLine(kind: 'top' | 'bottom' | 'mid', content: string, width: number): string {
|
||||
const inner = Math.max(0, width - 2);
|
||||
if (kind === 'top') {
|
||||
return `${BOX.tl}${BOX.h.repeat(inner)}${BOX.tr}`;
|
||||
}
|
||||
if (kind === 'bottom') {
|
||||
return `${BOX.bl}${BOX.h.repeat(inner)}${BOX.br}`;
|
||||
}
|
||||
return `${BOX.v}${pad(content, inner)}${BOX.v}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates an array of frame chunks that look like an animated agent TUI. Write
|
||||
* each chunk with a render in between to mimic streaming redraws. Each frame
|
||||
* clears the screen, redraws a bordered panel, a spinner, several colored
|
||||
* "assistant" lines and a status footer.
|
||||
* @param options Generation options.
|
||||
*/
|
||||
export function generateSyntheticTuiFrames(options: ISyntheticTuiOptions = {}): string[] {
|
||||
const seed = options.seed ?? 1;
|
||||
const frameCount = options.frames ?? 24;
|
||||
const cols = options.cols ?? 80;
|
||||
const rows = options.rows ?? 24;
|
||||
const rand = mulberry32(seed);
|
||||
|
||||
const panelWidth = Math.min(cols, 72);
|
||||
const bodyRows = Math.max(3, rows - 6);
|
||||
const frames: string[] = [];
|
||||
|
||||
for (let f = 0; f < frameCount; f++) {
|
||||
let frame = CLEAR_HOME;
|
||||
const spinner = BRAILLE_SPINNER[f % BRAILLE_SPINNER.length];
|
||||
frame += boxLine('top', '', panelWidth) + '\r\n';
|
||||
frame += boxLine('mid', ` ${spinner} Copilot is working...`, panelWidth) + '\r\n';
|
||||
frame += boxLine('bottom', '', panelWidth) + '\r\n';
|
||||
|
||||
for (let r = 0; r < bodyRows; r++) {
|
||||
const fg = SGR_FG[Math.floor(rand() * SGR_FG.length)];
|
||||
const wordCount = 3 + Math.floor(rand() * 6);
|
||||
let line = '';
|
||||
for (let w = 0; w < wordCount; w++) {
|
||||
const word = WORDS[Math.floor(rand() * WORDS.length)];
|
||||
line += `${CSI}${fg}m${word}${RESET} `;
|
||||
}
|
||||
frame += line + '\r\n';
|
||||
}
|
||||
|
||||
frame += `${CSI}2m── tokens ${1000 + f * 37} · ${spinner} streaming ──${RESET}`;
|
||||
frames.push(frame);
|
||||
}
|
||||
|
||||
if (options.useAltBuffer) {
|
||||
frames[0] = ENTER_ALT + frames[0];
|
||||
frames[frames.length - 1] = frames[frames.length - 1] + EXIT_ALT;
|
||||
}
|
||||
return frames;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a single string that writes `count` distinct Unicode glyphs, wrapping
|
||||
* at `cols`. Distinct codepoints each need their own texture-atlas slot, so this
|
||||
* is the primary lever for forcing the atlas to allocate (and, with a low
|
||||
* `maxAtlasPages`, merge) pages.
|
||||
*
|
||||
* Codepoints are drawn deterministically from CJK Unified Ideographs
|
||||
* (U+4E00..U+9FFF), which provides 20,000+ unique, mono-width glyphs.
|
||||
* @param count Number of distinct glyphs to emit.
|
||||
* @param cols Columns to wrap at (CJK glyphs are width-2, so half this many per row).
|
||||
* @param offset Starting offset into the codepoint range, so consecutive chunks
|
||||
* emit non-overlapping distinct glyphs.
|
||||
*/
|
||||
export function generateUniqueGlyphFlood(count: number, cols: number = 80, offset: number = 0): string {
|
||||
const base = 0x4E00;
|
||||
const range = 0x9FFF - 0x4E00; // 20,991 unique codepoints
|
||||
const perRow = Math.max(1, Math.floor(cols / 2));
|
||||
let out = '';
|
||||
for (let i = 0; i < count; i++) {
|
||||
out += String.fromCodePoint(base + ((offset + i) % range));
|
||||
if ((i + 1) % perRow === 0) {
|
||||
out += '\r\n';
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a deterministic block of mixed "interesting" glyphs spanning the
|
||||
* ranges most likely to exercise the renderer: ASCII, box drawing, block
|
||||
* elements, braille and powerline symbols. Useful as a stable reference payload.
|
||||
* @param seed PRNG seed.
|
||||
* @param lines Number of lines to emit.
|
||||
* @param cols Approximate columns per line.
|
||||
*/
|
||||
export function generateMixedGlyphBlock(seed: number = 1, lines: number = 10, cols: number = 60): string {
|
||||
const rand = mulberry32(seed);
|
||||
const ranges: [number, number][] = [
|
||||
[0x21, 0x7E], // printable ASCII
|
||||
[0x2500, 0x257F], // box drawing
|
||||
[0x2580, 0x259F], // block elements
|
||||
[0x2800, 0x28FF], // braille
|
||||
[0x2190, 0x21FF] // arrows
|
||||
];
|
||||
let out = '';
|
||||
for (let l = 0; l < lines; l++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const [lo, hi] = ranges[Math.floor(rand() * ranges.length)];
|
||||
out += String.fromCodePoint(lo + Math.floor(rand() * (hi - lo)));
|
||||
}
|
||||
out += '\r\n';
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits ASCII letters/words each in a distinct 256-color foreground+background.
|
||||
* Every (char,color) pair is a unique atlas glyph, so this fills/merges atlas
|
||||
* pages with realistic English text (no CJK). Deterministic.
|
||||
*
|
||||
* No `\r\n` is emitted after the final cell: when the flood's last line lands on
|
||||
* the terminal's bottom row a trailing linefeed would scroll the screen (in the
|
||||
* alt buffer this destroys pinned reference rows and makes glyph-integrity
|
||||
* assertions fail for buffer-content reasons rather than rendering reasons).
|
||||
* @param cells Number of colored cells to emit.
|
||||
* @param offset Color offset so consecutive chunks use new color combos.
|
||||
*/
|
||||
export function generateColoredAsciiFlood(cells: number, offset: number = 0): string {
|
||||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let out = '';
|
||||
for (let i = 0; i < cells; i++) {
|
||||
const ch = letters[(offset + i) % letters.length];
|
||||
const fg = (offset + i) % 256;
|
||||
const bg = (offset + i * 7) % 256;
|
||||
out += `\x1b[38;5;${fg}m\x1b[48;5;${bg}m${ch}`;
|
||||
if ((i + 1) % 78 === 0 && i + 1 < cells) { out += '\x1b[0m\r\n'; }
|
||||
}
|
||||
return out + '\x1b[0m';
|
||||
}
|
||||