mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
Merge branch 'master' into clusters
This commit is contained in:
Daniel Imms
+15
-2
@@ -18,6 +18,8 @@
|
||||
"addons/xterm-addon-canvas/src/tsconfig.json",
|
||||
"addons/xterm-addon-fit/src/tsconfig.json",
|
||||
"addons/xterm-addon-fit/test/tsconfig.json",
|
||||
"addons/xterm-addon-image/src/tsconfig.json",
|
||||
"addons/xterm-addon-image/test/tsconfig.json",
|
||||
"addons/xterm-addon-ligatures/src/tsconfig.json",
|
||||
"addons/xterm-addon-search/src/tsconfig.json",
|
||||
"addons/xterm-addon-search/test/tsconfig.json",
|
||||
@@ -40,6 +42,7 @@
|
||||
"addons/xterm-addon-unicode-graphemes/src/tiny-inflate.ts",
|
||||
"addons/xterm-addon-unicode-graphemes/src/unicode-trie.ts",
|
||||
"addons/xterm-addon-unicode-graphemes/src/UnicodeProperties.ts",
|
||||
"**/inwasm-sdks/*",
|
||||
"**/typings/*.d.ts",
|
||||
"**/node_modules",
|
||||
"**/*.js"
|
||||
@@ -93,7 +96,12 @@
|
||||
],
|
||||
"@typescript-eslint/naming-convention": [
|
||||
"warn",
|
||||
{ "selector": "default", "format": ["camelCase"] },
|
||||
{ "selector": "default", "format": ["camelCase"],
|
||||
"filter": {
|
||||
"regex": "^[a-z]",
|
||||
"match": true
|
||||
}
|
||||
},
|
||||
// variableLike
|
||||
{ "selector": "variable", "format": ["camelCase", "UPPER_CASE"] },
|
||||
{ "selector": "variable", "filter": "^I.+Service$", "format": ["PascalCase"], "prefix": ["I"] },
|
||||
@@ -102,7 +110,12 @@
|
||||
{ "selector": "memberLike", "modifiers": ["protected"], "format": ["camelCase"], "leadingUnderscore": "require" },
|
||||
{ "selector": "enumMember", "format": ["UPPER_CASE"] },
|
||||
// memberLike - Allow enum-like objects to use UPPER_CASE
|
||||
{ "selector": "property", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"] },
|
||||
{ "selector": "property", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"],
|
||||
"filter": {
|
||||
"regex": "^[a-z]",
|
||||
"match": true
|
||||
}
|
||||
},
|
||||
// restrict on* naming for events only
|
||||
{ "selector": "method", "modifiers": ["public"], "format": ["camelCase", "UPPER_CASE"], "custom": {
|
||||
"regex": "^on[A-Z].+",
|
||||
|
||||
@@ -28,6 +28,10 @@ opening an issue, read these pointers.
|
||||
- Be polite. Issues with an indignant or belligerent tone tend to be moved to the
|
||||
bottom of the pile.
|
||||
|
||||
## Answering discussion questions
|
||||
|
||||
Issues are only meant to track (likely) feature requests and bugs. We use [GitHub Discussions](https://github.com/xtermjs/xterm.js/discussions) for general Q&A as well as discussing possible features. If you want to help out, many questions get asked over at the [discussions page](https://github.com/xtermjs/xterm.js/discussions) which could use an expert as the core team is often stretched thin.
|
||||
|
||||
## Contributing code
|
||||
|
||||
You can find issues to work on by looking at the [help wanted](https://github.com/xtermjs/xterm.js/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) or [good first issue](https://github.com/xtermjs/xterm.js/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) issues. It's a good idea to comment on the issue saying that you're taking it, just in case someone else comes along and you duplicate work. Once you have your issue, here are the steps to contribute:
|
||||
|
||||
@@ -217,6 +217,8 @@ Xterm.js is used in several world-class applications to provide great terminal e
|
||||
- [**graSSHopper**](https://grasshopper.coding.kiwi): A simple SSH client with file explorer, history and many more features.
|
||||
- [**DomTerm**](https://domterm.org/xtermjs.html): Tiles and tabs. Detachable sessions (like tmux). [Remote connections](https://domterm.org/Remoting-over-ssh.html) using a nice ssh wrapper with predictive echo. Qt, Electron, Tauri/Wry, or desktop browser front-ends. Choose between xterm.js engine (faster) or native DomTerm (more functionality and graphics) - or both.
|
||||
- [**Cloudtutor.io**](https://cloudtutor.io): innovative online learning platform that offers users access to an interactive lab.
|
||||
- [**Helix Editor Playground**](https://github.com/tomgroenwoldt/helix-editor-playground): Online playground for the terminal based helix editor.
|
||||
- [**Coder**](https://github.com/coder/coder): Self-Hosted Remote Development Environments
|
||||
- [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. Note: Please add any new contributions to the end of the list only.
|
||||
|
||||
@@ -368,6 +368,11 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
|
||||
protected _drawChars(cell: ICellData, x: number, y: number): void {
|
||||
const chars = cell.getChars();
|
||||
this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y);
|
||||
|
||||
if (!this._charAtlas) {
|
||||
return;
|
||||
}
|
||||
|
||||
let glyph: IRasterizedGlyph;
|
||||
if (chars && chars.length > 1) {
|
||||
glyph = this._charAtlas.getRasterizedGlyphCombinedChar(chars, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
|
||||
|
||||
@@ -14,6 +14,7 @@ import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
|
||||
import { Terminal } from 'xterm';
|
||||
import { toDisposable } from 'common/Lifecycle';
|
||||
import { isFirefox } from 'common/Platform';
|
||||
import { CursorBlinkStateManager } from 'browser/renderer/shared/CursorBlinkStateManager';
|
||||
|
||||
interface ICursorState {
|
||||
x: number;
|
||||
@@ -60,6 +61,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
|
||||
'underline': this._renderUnderlineCursor.bind(this)
|
||||
};
|
||||
this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
|
||||
this._handleOptionsChanged();
|
||||
this.register(toDisposable(() => {
|
||||
this._cursorBlinkStateManager?.dispose();
|
||||
this._cursorBlinkStateManager = undefined;
|
||||
@@ -97,9 +99,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
|
||||
private _handleOptionsChanged(): void {
|
||||
if (this._optionsService.rawOptions.cursorBlink) {
|
||||
if (!this._cursorBlinkStateManager) {
|
||||
this._cursorBlinkStateManager = new CursorBlinkStateManager(this._coreBrowserService.isFocused, () => {
|
||||
this._render(true);
|
||||
}, this._coreBrowserService);
|
||||
this._cursorBlinkStateManager = new CursorBlinkStateManager(() => this._render(true), this._coreBrowserService);
|
||||
}
|
||||
} else {
|
||||
this._cursorBlinkStateManager?.dispose();
|
||||
@@ -238,139 +238,3 @@ export class CursorRenderLayer extends BaseRenderLayer {
|
||||
this._ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
class CursorBlinkStateManager {
|
||||
public isCursorVisible: boolean;
|
||||
|
||||
private _animationFrame: number | undefined;
|
||||
private _blinkStartTimeout: number | undefined;
|
||||
private _blinkInterval: number | undefined;
|
||||
|
||||
/**
|
||||
* The time at which the animation frame was restarted, this is used on the
|
||||
* next render to restart the timers so they don't need to restart the timers
|
||||
* multiple times over a short period.
|
||||
*/
|
||||
private _animationTimeRestarted: number | undefined;
|
||||
|
||||
constructor(
|
||||
isFocused: boolean,
|
||||
private _renderCallback: () => void,
|
||||
private _coreBrowserService: ICoreBrowserService
|
||||
) {
|
||||
this.isCursorVisible = true;
|
||||
if (isFocused) {
|
||||
this._restartInterval();
|
||||
}
|
||||
}
|
||||
|
||||
public get isPaused(): boolean { return !(this._blinkStartTimeout || this._blinkInterval); }
|
||||
|
||||
public dispose(): void {
|
||||
if (this._blinkInterval) {
|
||||
this._coreBrowserService.window.clearInterval(this._blinkInterval);
|
||||
this._blinkInterval = undefined;
|
||||
}
|
||||
if (this._blinkStartTimeout) {
|
||||
this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
|
||||
this._blinkStartTimeout = undefined;
|
||||
}
|
||||
if (this._animationFrame) {
|
||||
this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
|
||||
this._animationFrame = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
public restartBlinkAnimation(): void {
|
||||
if (this.isPaused) {
|
||||
return;
|
||||
}
|
||||
// Save a timestamp so that the restart can be done on the next interval
|
||||
this._animationTimeRestarted = Date.now();
|
||||
// Force a cursor render to ensure it's visible and in the correct position
|
||||
this.isCursorVisible = true;
|
||||
if (!this._animationFrame) {
|
||||
this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
|
||||
this._renderCallback();
|
||||
this._animationFrame = undefined;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
|
||||
// Clear any existing interval
|
||||
if (this._blinkInterval) {
|
||||
this._coreBrowserService.window.clearInterval(this._blinkInterval);
|
||||
this._blinkInterval = undefined;
|
||||
}
|
||||
|
||||
// Setup the initial timeout which will hide the cursor, this is done before
|
||||
// the regular interval is setup in order to support restarting the blink
|
||||
// animation in a lightweight way (without thrashing clearInterval and
|
||||
// setInterval).
|
||||
this._blinkStartTimeout = this._coreBrowserService.window.setTimeout(() => {
|
||||
// Check if another animation restart was requested while this was being
|
||||
// started
|
||||
if (this._animationTimeRestarted) {
|
||||
const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
|
||||
this._animationTimeRestarted = undefined;
|
||||
if (time > 0) {
|
||||
this._restartInterval(time);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the cursor
|
||||
this.isCursorVisible = false;
|
||||
this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
|
||||
this._renderCallback();
|
||||
this._animationFrame = undefined;
|
||||
});
|
||||
|
||||
// Setup the blink interval
|
||||
this._blinkInterval = this._coreBrowserService.window.setInterval(() => {
|
||||
// Adjust the animation time if it was restarted
|
||||
if (this._animationTimeRestarted) {
|
||||
// calc time diff
|
||||
// Make restart interval do a setTimeout initially?
|
||||
const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
|
||||
this._animationTimeRestarted = undefined;
|
||||
this._restartInterval(time);
|
||||
return;
|
||||
}
|
||||
|
||||
// Invert visibility and render
|
||||
this.isCursorVisible = !this.isCursorVisible;
|
||||
this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
|
||||
this._renderCallback();
|
||||
this._animationFrame = undefined;
|
||||
});
|
||||
}, BLINK_INTERVAL);
|
||||
}, timeToStart);
|
||||
}
|
||||
|
||||
public pause(): void {
|
||||
this.isCursorVisible = true;
|
||||
if (this._blinkInterval) {
|
||||
this._coreBrowserService.window.clearInterval(this._blinkInterval);
|
||||
this._blinkInterval = undefined;
|
||||
}
|
||||
if (this._blinkStartTimeout) {
|
||||
this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
|
||||
this._blinkStartTimeout = undefined;
|
||||
}
|
||||
if (this._animationFrame) {
|
||||
this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
|
||||
this._animationFrame = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
public resume(): void {
|
||||
// Clear out any existing timers just in case
|
||||
this.pause();
|
||||
|
||||
this._animationTimeRestarted = undefined;
|
||||
this._restartInterval();
|
||||
this.restartBlinkAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
node_modules/
|
||||
*.swp
|
||||
.lock-wscript
|
||||
lib/
|
||||
out/
|
||||
out-test/
|
||||
out-worker/
|
||||
.nyc_output/
|
||||
Makefile.gyp
|
||||
*.Makefile
|
||||
*.target.gyp.mk
|
||||
*.node
|
||||
example/*.log
|
||||
docs/
|
||||
npm-debug.log
|
||||
/.idea/
|
||||
.env
|
||||
build/
|
||||
.DS_Store
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# Keep bundled code out of Git
|
||||
dist/
|
||||
demo/dist/
|
||||
|
||||
# skip benchmark & inwasm folders, except builds
|
||||
.benchmark/
|
||||
timeline/
|
||||
inwasm-sdks/
|
||||
inwasm-builds/
|
||||
!inwasm-builds/**/final.wat
|
||||
!inwasm-builds/**/final.wasm
|
||||
!inwasm-builds/**/definition.json
|
||||
@@ -0,0 +1,10 @@
|
||||
.github
|
||||
fixture
|
||||
overwrite
|
||||
bootstrap.sh
|
||||
tsconfig.json
|
||||
webpack.config.js
|
||||
test
|
||||
out-test
|
||||
inwasm-sdks
|
||||
inwasm-builds
|
||||
@@ -0,0 +1,19 @@
|
||||
Copyright (c) 2019, 2020, 2021, 2022, 2023 The xterm.js authors (https://github.com/xtermjs/xterm.js)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@@ -0,0 +1,231 @@
|
||||
## xterm-addon-image
|
||||
|
||||
Inline image output in xterm.js. Supports SIXEL and iTerm's inline image protocol (IIP).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Install from npm
|
||||
|
||||
```bash
|
||||
npm install --save xterm-addon-image
|
||||
```
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
```ts
|
||||
import { Terminal } from 'xterm';
|
||||
import { ImageAddon, IImageAddonOptions } from 'xterm-addon-image';
|
||||
|
||||
// customize as needed (showing addon defaults)
|
||||
const customSettings: IImageAddonOptions = {
|
||||
enableSizeReports: true, // whether to enable CSI t reports (see below)
|
||||
pixelLimit: 16777216, // max. pixel size of a single image
|
||||
sixelSupport: true, // enable sixel support
|
||||
sixelScrolling: true, // whether to scroll on image output
|
||||
sixelPaletteLimit: 256, // initial sixel palette size
|
||||
sixelSizeLimit: 25000000, // size limit of a single sixel sequence
|
||||
storageLimit: 128, // FIFO storage limit in MB
|
||||
showPlaceholder: true, // whether to show a placeholder for evicted images
|
||||
iipSupport: true, // enable iTerm IIP support
|
||||
iipSizeLimit: 20000000 // size limit of a single IIP sequence
|
||||
}
|
||||
|
||||
// initialization
|
||||
const terminal = new Terminal();
|
||||
const imageAddon = new ImageAddon(customSettings);
|
||||
terminal.loadAddon(imageAddon);
|
||||
```
|
||||
|
||||
### General Notes
|
||||
|
||||
- *IMPORTANT:* The worker approach as done in previous releases got removed.
|
||||
The addon contructor no longer expects a worker path as first argument.
|
||||
|
||||
- By default the addon will activate these `windowOptions` reports on the terminal:
|
||||
- getWinSizePixels (CSI 14 t)
|
||||
- getCellSizePixels (CSI 16 t)
|
||||
- getWinSizeChars (CSI 18 t)
|
||||
|
||||
to help applications getting useful terminal metrics for their image preparations. Set `enableSizeReports` in the constructor options to `false`, if you dont want the addon to alter these terminal settings. This is especially useful, if you have very strict security needs not allowing any terminal reports, or deal with `windowOptions` by other means.
|
||||
|
||||
|
||||
### Operation Modes
|
||||
|
||||
- **SIXEL Support**
|
||||
Set by default, change it with `{sixelSupport: true}`.
|
||||
|
||||
- **Scrolling On | Off**
|
||||
By default scrolling is on, thus an image will advance the cursor at the bottom if needed.
|
||||
(see cursor positioning).
|
||||
|
||||
If scrolling is off, the image gets painted from the top left of the current viewport
|
||||
and might be truncated if the image exceeds the viewport size.
|
||||
The cursor position does not change.
|
||||
|
||||
You can customize this behavior with the constructor option `{sixelScrolling: false}`
|
||||
or with `DECSET 80` (off, binary: `\x1b [ ? 80 h`) and
|
||||
`DECRST 80` (on, binary: `\x1b [ ? 80 l`) during runtime.
|
||||
|
||||
- **Cursor Positioning**
|
||||
If scrolling is set, the cursor will be placed at the first image column of the last image row (VT340 mode).
|
||||
Other cursor positioning modes as used by xterm or mintty are not supported.
|
||||
|
||||
- **SIXEL Palette Handling**
|
||||
By default the addon limits the palette size to 256 registers (as demanded by the DEC specification).
|
||||
The limit can be increased to a maximum of 4096 registers (via `sixelPaletteLimit`).
|
||||
|
||||
The default palette is a mixture of VT340 colors (lower 16 registers), xterm colors (up to 256) and zeros (up to 4096).
|
||||
There is no private/shared palette distinction, palette colors are always carried over from a previous sixel image.
|
||||
Restoring the default palette size and colors is possible with `XTSMGRAPHICS 1 ; 2` (binary: `\x1b[?1;2S`).
|
||||
It gets also restored automatically on RIS and DECSTR.
|
||||
|
||||
Other than on older terminals, the underlying SIXEL library applies colors immediately to individual pixels
|
||||
(*printer mode*), thus it is technically possible to use more colors in one image than the palette has color slots.
|
||||
This feature is called *high-color* in libsixel.
|
||||
|
||||
A terminal wide shared palette mode with late indexed coloring of the output is not supported,
|
||||
therefore palette animations cannot be used.
|
||||
|
||||
- **SIXEL Raster Attributes Handling**
|
||||
If raster attributes were found in the SIXEL data (level 2), the image will always be truncated to the given height/width extend. We deviate here from the specification on purpose, as it allows several processing optimizations. For level 1 SIXEL data without any raster attributes the image can freely grow in width and height up to the last data byte, which has a much higher processing penalty. In general encoding libraries should not create level 1 data anymore and should not produce pixel information beyond the announced height/width extend. Both is discouraged by the >30 years old specification.
|
||||
|
||||
Currently the SIXEL implementation of the addon does not take custom pixel sizes into account, a SIXEL pixel will map 1:1 to a screen pixel.
|
||||
|
||||
- **IIP Support (iTerm's Inline Image Protocol)**
|
||||
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 and GIF
|
||||
- No animation support.
|
||||
- Image type hinting is not supported (always deducted from data header).
|
||||
- File download is not supported.
|
||||
- Filename gets parsed but not used.
|
||||
- Strict base64 handling as of RFC4648 §4 (standard alphabet, optional padding, no separator bytes allowed).
|
||||
- Payload size may not exceed CEIL(sizeParameter * 4 / 3).
|
||||
- Image scaling beyond terminal viewport size is allowed (e.g. `width=200%`).
|
||||
- Image pixel size is restricted by `pixelLimit` (pre- and post resizing).
|
||||
- Size parameter is restricted by `iipSizeLimit`.
|
||||
- Cursor positioning behaves the same as for sixel (see above).
|
||||
|
||||
|
||||
### Storage and Drawing Settings
|
||||
|
||||
The internal storage holds images up to `storageLimit` (in MB, calculated as 4-channel RBGA unpacked, default 100 MB). Once hit images get evicted by FIFO rules. Furthermore images on the alternate buffer will always be erased on buffer changes.
|
||||
|
||||
The addon exposes two properties to interact with the storage limits at runtime:
|
||||
- `storageLimit`
|
||||
Change the value to your needs at runtime. This is especially useful, if you have multiple terminal
|
||||
instances running, that all add to one upper memory limit.
|
||||
- `storageUsage`
|
||||
Inspect the current memory usage of the image storage.
|
||||
|
||||
By default the addon will show a placeholder pattern for evicted images that are still part
|
||||
of the terminal (e.g. in the scrollback). The pattern can be deactivated by toggling `showPlaceholder`.
|
||||
|
||||
### Image Data Retrieval
|
||||
|
||||
The addon provides the following API endpoints to retrieve raw image data as canvas:
|
||||
|
||||
- `getImageAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined`
|
||||
Returns the canvas containing the original image data (not resized) at the given buffer position.
|
||||
The buffer position is the 0-based absolute index (including scrollback at top).
|
||||
|
||||
- `extractTileAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined`
|
||||
Returns a canvas containing the actual single tile image data (maybe resized) at the given buffer position.
|
||||
The buffer position is the 0-based absolute index (including scrollback at top).
|
||||
Note that the canvas gets created and data copied over for every call, thus it is not suitable for performance critical actions.
|
||||
|
||||
### Memory Usage
|
||||
|
||||
The addon does most image processing in Javascript and therefore can occupy a rather big amount of memory. To get an idea where the memory gets eaten, lets look at the data flow and processing steps:
|
||||
- Incomming image data chunk at `term.write` (terminal)
|
||||
`term.write` might stock up incoming chunks. To circumvent this, you will need proper flow control (see xterm.js docs). Note that with image output it is more likely to run into this issue, as it can create lots of MBs in very short time.
|
||||
- Sequence Parser (terminal)
|
||||
The parser operates on a buffer containing up to 2^17 codepoints (~0.5 MB).
|
||||
- Sequence Handler - Chunk Decoding (addon)
|
||||
Image data chunks are processed immediately by the SIXEL decoder (streamlined). The decoder allocates memory for image
|
||||
pixels as needed. The allowed image size is restricted by `pixelLimit` (default 16M pixels), the decoder holds 2 pixel buffers at maximum during decoding (RGBA, ~128 MB for 16M pixels).
|
||||
- Sequence Handler - Image Finalization (addon)
|
||||
After decoding the final pixel buffer is grabbed by the sequence handler and written to a canvas of the same size (~64 MB for 16M pixels) and added to the storage.
|
||||
- Image Storage (addon)
|
||||
The image storage implements a FIFO cache, that will remove old images, if a new one arrives and `storageLimit` is hit (default 128 MB). The storage holds a canvas with the original image, and may additionally hold resized versions of images after a font rescaling. Both are accounted in `storageUsage` as a rough estimation of _pixels x 4 channels_.
|
||||
|
||||
Following the steps above, a rough estimation of maximum memory usage by the addon can be calculated with these formulas (in bytes):
|
||||
```typescript
|
||||
// storage alone
|
||||
const storageBytes = storageUsage * storageLimit * 1024 * 1024;
|
||||
// decoding alone
|
||||
const decodingBytes = sixelSizeLimit + 2 * (pixelLimit * 4);
|
||||
|
||||
// totals
|
||||
// inactive decoding
|
||||
const totalInactive = storageBytes;
|
||||
// active decoding
|
||||
const totalActive = storageBytes + decodingBytes;
|
||||
```
|
||||
|
||||
Note that browsers have offloading tricks for rarely touched memory segments, esp. `storageBytes` might not directly translate into real memory usage. Usage peaks will happen during active decoding of multiple big images due to the need of 2 full pixel buffers at the same time, which cannot be offloaded. Thus you may want to keep an eye on `pixelLimit` under limited memory conditions.
|
||||
Further note that the formulas above do not respect the Javascript object's overhead. Compared to the raw buffer needs the book keeping by these objects is rather small (<<5%).
|
||||
|
||||
_Why should I care about memory usage at all?_
|
||||
Well you don't have to, and it probably will just work fine with the addon defaults. But for bigger integrations, where much more data is held in the Javascript context (like multiple terminals on one page), it is likely to hit the engine's memory limit sooner or later under decoding and/or storage pressure.
|
||||
|
||||
_How can I adjust the memory usage?_
|
||||
- `pixelLimit`
|
||||
A constructor setting, thus you would have to anticipate, whether (multiple) terminals in your page gonna do lots of concurrent decoding. Since this is normally not the case and the memory usage is only temporarily peaking, a rather high value should work even with multiple terminals in one page.
|
||||
- `storageLimit`
|
||||
A constructor and a runtime setting. In conjunction with `storageUsage` you can do runtime checks and adjust the limit to your needs. If you have to lower the limit below the current usage, images will be removed in FIFO order and may turn into a placeholder in the terminal's scrollback (if `showPlaceholder` is set). When adjusting keep in mind to leave enough room for memory peaking for decoding.
|
||||
- `sixelSizeLimit`
|
||||
A constructor setting. This has only a small impact on peaking memory during decoding. It is meant to avoid processing of overly big or broken SIXEL sequences at an earlier phase, thus may stop the decoder from entering its memory intensive task for potentially invalid data.
|
||||
|
||||
|
||||
### Terminal Interaction
|
||||
|
||||
- Images already on the terminal screen will reshape on font-rescaling to keep the terminal cell coverage intact.
|
||||
This behavior might diverge from other terminals, but is in general the more desired one.
|
||||
- On terminal resize images may expand to the right automatically, if they were right-truncated before.
|
||||
They never expand to the bottom, if they were bottom-truncated before (e.g. from scrolling-off).
|
||||
- Text autowrapping from terminal resize may break and wrap images into multiple parts. This is unfortunate,
|
||||
but cannot be avoided, while sticking to the stronger terminal text-grid mechanics.
|
||||
(Yes images are a second class citizen on a mainly text-driven interface.)
|
||||
- Characters written over an image will erase the image information for affected cells.
|
||||
- Images are painted above BG/FG data not erasing it. More advanced "composition tricks" like painting images
|
||||
below FG/BG data are not possible. (We currently dont hook into BG/FG rendering itself.)
|
||||
- Previous image data at a cell will be erased on new image data. (We currently have no transparency composition.)
|
||||
|
||||
|
||||
### Performance & Latency
|
||||
|
||||
- Performance should be good enough for occasional SIXEL output from REPLs, up to downscaled movies
|
||||
from `mpv` with its SIXEL renderer (tested in the demo). For 3rd party xterm.js integrations this
|
||||
furthermore depends highly on the overall incoming data throughput.
|
||||
- Image processing has a high latency. Most of the latency though is inherited from xterm.js' incoming data route
|
||||
(PTY -> server process -> websocket -> xterm.js async parsing), where every step creates more waiting time.
|
||||
Since we cannot do much about that "long line", keep that in mind when you try to run more demanding applications with realtime drawing and interactive response needs.
|
||||
|
||||
|
||||
### Status
|
||||
|
||||
- Sixel support and image handling in xterm.js is considered beta quality.
|
||||
- IIP support is in alpha stage. Please file a bug for any awkwardities.
|
||||
|
||||
|
||||
### Changelog
|
||||
|
||||
- 0.5.0 integrate with xtermjs base repo (at v0.4.3)
|
||||
- 0.4.3 defer canvas creation
|
||||
- 0.4.2 fix image canvas resize
|
||||
- 0.4.1 compat release for xterm.js 5.2.0
|
||||
- 0.4.0 IIP support
|
||||
- 0.3.1 compat release for xterm.js 5.1.0
|
||||
- 0.3.0 important change: worker removed from addon
|
||||
- 0.2.0 compat release for xterm.js 5.0.0
|
||||
- 0.1.3 bugfix: avoid striping
|
||||
- 0.1.2 bugfix: reset clear flag
|
||||
- 0.1.1 bugfixes:
|
||||
- clear sticky image tiles on render
|
||||
- create xterm-addon-image folder from bootstrap.sh
|
||||
- fix peer dependency in package.json
|
||||
Executable
+22
@@ -0,0 +1,22 @@
|
||||
#!/bin/bash
|
||||
|
||||
# sixel endless mode
|
||||
# Should print an endless sine curve, abort with Ctrl-C.
|
||||
|
||||
period=200
|
||||
amplitude=50
|
||||
|
||||
sixels=(@\$ A\$ C\$ G\$ O\$ _\$-)
|
||||
pi=$(echo "scale=10; 4*a(1)" | bc -l)
|
||||
run=true
|
||||
trap run=false INT
|
||||
|
||||
echo -ne "\x1bP0;0;0q\"1;1#1;2;100;0;0#1"
|
||||
y=0
|
||||
while $run
|
||||
do
|
||||
x=$(echo "s(2*${pi}*${y}/${period})*${amplitude}+2*${amplitude}+0.5" | bc -l)
|
||||
echo -ne "!${x%%.*}?${sixels[$((y%6))]}"
|
||||
(( y++ ))
|
||||
done
|
||||
echo -e "\x1b\\"
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Executable
+52
File diff suppressed because one or more lines are too long
@@ -0,0 +1,44 @@
|
||||
const sixelEncode = require('../node_modules/sixel/lib/SixelEncoder').image2sixel;
|
||||
const toRGBA8888 = require('../node_modules/sixel/lib/Colors').toRGBA8888;
|
||||
|
||||
function createRect(size, color) {
|
||||
const pixels = new Uint32Array(size * size);
|
||||
pixels.fill(toRGBA8888(...color));
|
||||
return sixelEncode(new Uint8ClampedArray(pixels.buffer), size, size);
|
||||
}
|
||||
|
||||
function createRectMinusOne(size, color) {
|
||||
const pixels = new Uint32Array(size * size);
|
||||
if (size - 1) {
|
||||
const sub = new Uint32Array(size - 1);
|
||||
sub.fill(toRGBA8888(...color));
|
||||
const last = size * (size - 1);
|
||||
for (let y = 0; y < last; y += size) {
|
||||
pixels.set(sub, y);
|
||||
}
|
||||
}
|
||||
return sixelEncode(new Uint8ClampedArray(pixels.buffer), size, size);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
// clear + cursor and sixelScrolling off
|
||||
process.stdout.write('\x1b[2J\x1b[?25;80h');
|
||||
|
||||
for (let i = 1; i < 300; ++i) {
|
||||
await new Promise(res => setTimeout(() => {
|
||||
process.stdout.write(createRect(i, [0, 255, 0]));
|
||||
res();
|
||||
}, 5));
|
||||
}
|
||||
for (let i = 299; i >= 1; --i) {
|
||||
await new Promise(res => setTimeout(() => {
|
||||
process.stdout.write(createRectMinusOne(i, [0, 255, 0]));
|
||||
res();
|
||||
}, 5));
|
||||
}
|
||||
|
||||
// re-enable cursor and sixel scrolling
|
||||
process.stdout.write('\x1b[2J\x1b[?25;80l');
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -0,0 +1 @@
|
||||
]1337;File=inline=1;size=525;name=Li4vcGFsZXR0ZS5wbmc=:iVBORw0KGgoAAAANSUhEUgAAAoAAAABQCAYAAACJbMQlAAAABmJLR0QA/wD/AP+gvaeTAAABwklEQVR4nO3dwQnEMAwAQedIIem/yVwLBj0C3pm3uAO/Fj2ia631rh3P1lRu7vnof0+Z836zOe83m/N+sznvN5vzfrM57zeb+23+HAAAhxCAAAAxAhAAIEYAAgDECEAAgBgBCAAQIwABAGIEIABAjAAEAIi59z8tDQDACWwAAQBiBCAAQIwABACIEYAAADECEAAgRgACAMQIQACAGAEIABAjAAEAYlwCAQCIsQEEAIgRgAAAMQIQACBGAAIAxAhAAIAYAQgAECMAAQBiBCAAQIwABACIcQkEACDGBhAAIEYAAgDECEAAgBgBCAAQIwABAGIEIABAjAAEAIgRgAAAMQIQACDGJRAAgBgbQACAGAEIABAjAAEAYgQgAECMAAQAiBGAAAAxAhAAIEYAAgDECEAAgBiXQAAAYmwAAQBiBCAAQIwABACIEYAAADECEAAgRgACAMQIQACAGAEIABAjAAEAYlwCAQCIsQEEAIgRgAAAMQIQACBGAAIAxAhAAIAYAQgAECMAAQBiBCAAQIwABACIcQkEACDGBhAAIEYAAgDECEAAgBgBCAAQIwABAGIEIABAjAAEAIgRgAAAMQIQACDmDz4lC02AaqMRAAAAAElFTkSuQmCC
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+67
@@ -0,0 +1,67 @@
|
||||
#!/bin/bash
|
||||
|
||||
function print_palette() {
|
||||
L=$(( LOWER / 256))
|
||||
U=$(( (UPPER-1) / 256))
|
||||
for ((p = $L; p <= $U; p++))
|
||||
do
|
||||
echo "slot $((p*256))..$((p*256+255)):"
|
||||
echo -ne "\x1bP;1q"
|
||||
for i in {0..15}
|
||||
do
|
||||
a=$((i * 16 + p * 256))
|
||||
for j in {0..15}
|
||||
do
|
||||
echo -ne "#$((a+j))!6~"
|
||||
done
|
||||
echo -ne "\$-"
|
||||
done
|
||||
echo -e "\x1b\\"
|
||||
done
|
||||
}
|
||||
|
||||
colors=undefined
|
||||
max_colors=undefined
|
||||
|
||||
echo "Terminal Reports (XTSMGRAPHICS):"
|
||||
IFS=";" read -a REPLY -s -t 1 -d "S" -p $'\e[?1;1;0S'
|
||||
[[ ${REPLY[1]} == "0" ]] && colors=${REPLY[2]}
|
||||
echo "active colors: ${colors}"
|
||||
|
||||
IFS=";" read -a REPLY -s -t 1 -d "S" -p $'\e[?1;4;0S'
|
||||
[[ ${REPLY[1]} == "0" ]] && max_colors=${REPLY[2]}
|
||||
echo "max colors : ${max_colors}"
|
||||
echo
|
||||
|
||||
|
||||
# query up to colors by default
|
||||
# if colors is undefined (no XTSMGRAPHICS), assume 256
|
||||
ARG1=${1:-${colors}}
|
||||
if [[ $colors == "undefined" ]]
|
||||
then
|
||||
ARG1=${1:-256}
|
||||
fi
|
||||
LOWER=0
|
||||
UPPER=$ARG1
|
||||
ARG2=${2:-undefined}
|
||||
if [[ $ARG2 != "undefined" ]]
|
||||
then
|
||||
LOWER=ARG1
|
||||
UPPER=ARG2
|
||||
fi
|
||||
|
||||
if [[ $colors != "undefined" ]]
|
||||
then
|
||||
if [[ $colors -lt $UPPER ]] || [[ $colors -lt 256 ]]
|
||||
then
|
||||
echo -e "\x1b[33mNote: Active colors is smaller than test range."
|
||||
echo -e "A spec-conform terminal may repeat colors in 'slot mod ${colors}'.\x1b[m"
|
||||
echo
|
||||
fi
|
||||
else
|
||||
echo -e "\x1b[33mNote: Cannot query active colors."
|
||||
echo -e "The terminal may repeat colors beyond it max slot (e.g. slot mod 16).\x1b[m"
|
||||
echo
|
||||
fi
|
||||
|
||||
print_palette
|
||||
Executable
+141
@@ -0,0 +1,141 @@
|
||||
#!/bin/bash
|
||||
|
||||
function smiling_smiley() {
|
||||
echo -ne '\x1bP;2q"1;1;60;60
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!4]!22?!4]$-
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!4~!22?!4~$-
|
||||
#6!60~$
|
||||
!15?#1!30N$-
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function indifferent_smiley() {
|
||||
echo -ne '\x1bP;2q"1;1;60;60
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!4]!22?!4]$-
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!30N$-
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function sad_smiley() {
|
||||
echo -ne '\x1bP;2q"1;1;60;60
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!4]!22?!4]$-
|
||||
#6!60~$-
|
||||
!60~$-
|
||||
!60~$-
|
||||
!60~$-
|
||||
!60~$
|
||||
!15?#1!30N$
|
||||
!15?#1!4o!22?!4o$-
|
||||
#6!60~$
|
||||
!15?#1!4B!22?!4B$-
|
||||
#6!60~$-
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function smiling_smiley_slim() {
|
||||
echo -ne '\x1bP;1q"1;1;60;60
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
!15?#1!4~!22?!4~$-
|
||||
!15?#1!30N
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function indifferent_smiley_slim() {
|
||||
echo -ne '\x1bP;1q"1;1;60;60
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
!15?#6!4~!22?!4~$-
|
||||
!15?!4o!22?!4o$ !15?#1!30N$-
|
||||
!15?#6!4B!22?!4B
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function sad_smiley_slim() {
|
||||
echo -ne '\x1bP;1q"1;1;60;60
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
$-
|
||||
!15?#1!30N$
|
||||
!15?#1!4o!22?!4o$-
|
||||
!15?#1!4B!22?!4B$-
|
||||
'
|
||||
echo -ne '\x1b\\'
|
||||
}
|
||||
|
||||
function full() {
|
||||
smiling_smiley
|
||||
sleep .5
|
||||
indifferent_smiley
|
||||
sleep .5
|
||||
sad_smiley
|
||||
sleep .5
|
||||
indifferent_smiley
|
||||
sleep .5
|
||||
smiling_smiley
|
||||
}
|
||||
|
||||
function slim() {
|
||||
smiling_smiley
|
||||
sleep .5
|
||||
indifferent_smiley_slim
|
||||
sleep .5
|
||||
sad_smiley_slim
|
||||
sleep .5
|
||||
indifferent_smiley_slim
|
||||
sleep .5
|
||||
smiling_smiley_slim
|
||||
}
|
||||
|
||||
# clear screen and place cursor to 1;10
|
||||
echo -ne '\x1b[2J\x1b[10;1H'
|
||||
|
||||
# switch sixel scrolling off
|
||||
echo -ne '\x1b[?80h'
|
||||
|
||||
case "$1" in
|
||||
full ) full ;;
|
||||
slim ) slim ;;
|
||||
esac
|
||||
|
||||
# re-enable sixel scrolling
|
||||
echo -ne '\x1b[?80l'
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user