@xterm/addon-image 0.7.0-beta.1

package/src/IIPMetrics.test.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { imageType, IMetrics } from './IIPMetrics';
+
+// fix missing nodejs decl
+declare const require: (s: string) => any;
+const fs = require('fs');
+
+
+const TEST_IMAGES: [string, IMetrics][] = [
+  ['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 }],
+  ['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 }]
+];
+
+
+describe('IIPMetrics', () => {
+  it('bunch of testimages', () => {
+    for (let i = 0; i < TEST_IMAGES.length; ++i) {
+      const imageData = fs.readFileSync('./addons/addon-image/fixture/testimages/' + TEST_IMAGES[i][0]);
+      assert.deepStrictEqual(imageType(imageData), TEST_IMAGES[i][1]);
+    }
+  });
+});

package/src/IIPMetrics.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+
+export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'unsupported' | '';
+
+export interface IMetrics {
+  mime: ImageType;
+  width: number;
+  height: number;
+}
+
+export const UNSUPPORTED_TYPE: IMetrics = {
+  mime: 'unsupported',
+  width: 0,
+  height: 0
+};
+
+export function imageType(d: Uint8Array): IMetrics {
+  if (d.length < 24) {
+    return UNSUPPORTED_TYPE;
+  }
+  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]
+    };
+  }
+  // JPEG: FF D8 FF E0 xx xx JFIF  or  FF D8 FF E1 xx xx Exif 00 00
+  if ((d32[0] === 0xE0FFD8FF || d32[0] === 0xE1FFD8FF)
+    &&  (
+      (d[6] === 0x4a && d[7] === 0x46 && d[8] === 0x49 && d[9] === 0x46)
+        ||  (d[6] === 0x45 && d[7] === 0x78 && d[8] === 0x69 && d[9] === 0x66)
+    )
+  ) {
+    const [width, height] = jpgSize(d);
+    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[7] << 8 | d[6],
+      height: d[9] << 8 | d[8]
+    };
+  }
+  return UNSUPPORTED_TYPE;
+}
+
+function jpgSize(d: Uint8Array): [number, number] {
+  const len = d.length;
+  let i = 4;
+  let blockLength = d[i] << 8 | d[i + 1];
+  while (true) {
+    i += blockLength;
+    if (i >= len) {
+      // exhausted without size info
+      return [0, 0];
+    }
+    if (d[i] !== 0xFF) {
+      return [0, 0];
+    }
+    if (d[i + 1] === 0xC0 || d[i + 1] === 0xC2) {
+      if (i + 8 < len) {
+        return [
+          d[i + 7] << 8 | d[i + 8],
+          d[i + 5] << 8 | d[i + 6]
+        ];
+      }
+      return [0, 0];
+    }
+    i += 2;
+    blockLength = d[i] << 8 | d[i + 1];
+  }
+}

package/src/ImageAddon.ts

@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IIPHandler } from './IIPHandler';
+import { ITerminalAddon, IDisposable } from '@xterm/xterm';
+import { ImageRenderer } from './ImageRenderer';
+import { ImageStorage, CELL_SIZE_DEFAULT } from './ImageStorage';
+import { SixelHandler } from './SixelHandler';
+import { ITerminalExt, IImageAddonOptions, IResetHandler } from './Types';
+
+
+// default values of addon ctor options
+const DEFAULT_OPTIONS: IImageAddonOptions = {
+  enableSizeReports: true,
+  pixelLimit: 16777216, // limit to 4096 * 4096 pixels
+  sixelSupport: true,
+  sixelScrolling: true,
+  sixelPaletteLimit: 256,
+  sixelSizeLimit: 25000000,
+  storageLimit: 128,
+  showPlaceholder: true,
+  iipSupport: true,
+  iipSizeLimit: 20000000
+};
+
+// max palette size supported by the sixel lib (compile time setting)
+const MAX_SIXEL_PALETTE_SIZE = 4096;
+
+// definitions for _xtermGraphicsAttributes sequence
+const enum GaItem {
+  COLORS = 1,
+  SIXEL_GEO = 2,
+  REGIS_GEO = 3
+}
+const enum GaAction {
+  READ = 1,
+  SET_DEFAULT = 2,
+  SET = 3,
+  READ_MAX = 4
+}
+const enum GaStatus {
+  SUCCESS = 0,
+  ITEM_ERROR = 1,
+  ACTION_ERROR = 2,
+  FAILURE = 3
+}
+
+
+export class ImageAddon implements ITerminalAddon {
+  private _opts: IImageAddonOptions;
+  private _defaultOpts: IImageAddonOptions;
+  private _storage: ImageStorage | undefined;
+  private _renderer: ImageRenderer | undefined;
+  private _disposables: IDisposable[] = [];
+  private _terminal: ITerminalExt | undefined;
+  private _handlers: Map<String, IResetHandler> = new Map();
+
+  constructor(opts?: Partial<IImageAddonOptions>) {
+    this._opts = Object.assign({}, DEFAULT_OPTIONS, opts);
+    this._defaultOpts = Object.assign({}, DEFAULT_OPTIONS, opts);
+  }
+
+  public dispose(): void {
+    for (const obj of this._disposables) {
+      obj.dispose();
+    }
+    this._disposables.length = 0;
+    this._handlers.clear();
+  }
+
+  private _disposeLater(...args: IDisposable[]): void {
+    for (const obj of args) {
+      this._disposables.push(obj);
+    }
+  }
+
+  public activate(terminal: ITerminalExt): void {
+    this._terminal = terminal;
+
+    // internal data structures
+    this._renderer = new ImageRenderer(terminal);
+    this._storage = new ImageStorage(terminal, this._renderer, this._opts);
+
+    // enable size reports
+    if (this._opts.enableSizeReports) {
+      // const windowOptions = terminal.getOption('windowOptions');
+      // windowOptions.getWinSizePixels = true;
+      // windowOptions.getCellSizePixels = true;
+      // windowOptions.getWinSizeChars = true;
+      // terminal.setOption('windowOptions', windowOptions);
+      const windowOps = terminal.options.windowOptions || {};
+      windowOps.getWinSizePixels = true;
+      windowOps.getCellSizePixels = true;
+      windowOps.getWinSizeChars = true;
+      terminal.options.windowOptions = windowOps;
+    }
+
+    this._disposeLater(
+      this._renderer,
+      this._storage,
+
+      // DECSET/DECRST/DA1/XTSMGRAPHICS handlers
+      terminal.parser.registerCsiHandler({ prefix: '?', final: 'h' }, params => this._decset(params)),
+      terminal.parser.registerCsiHandler({ prefix: '?', final: 'l' }, params => this._decrst(params)),
+      terminal.parser.registerCsiHandler({ final: 'c' }, params => this._da1(params)),
+      terminal.parser.registerCsiHandler({ prefix: '?', final: 'S' }, params => this._xtermGraphicsAttributes(params)),
+
+      // render hook
+      terminal.onRender(range => this._storage?.render(range)),
+
+      /**
+       * reset handlers covered:
+       * - DECSTR
+       * - RIS
+       * - Terminal.reset()
+       */
+      terminal.parser.registerCsiHandler({ intermediates: '!', final: 'p' }, () => this.reset()),
+      terminal.parser.registerEscHandler({ final: 'c' }, () => this.reset()),
+      terminal._core._inputHandler.onRequestReset(() => this.reset()),
+
+      // wipe canvas and delete alternate images on buffer switch
+      terminal.buffer.onBufferChange(() => this._storage?.wipeAlternate()),
+
+      // extend images to the right on resize
+      terminal.onResize(metrics => this._storage?.viewportResize(metrics))
+    );
+
+    // SIXEL handler
+    if (this._opts.sixelSupport) {
+      const sixelHandler = new SixelHandler(this._opts, this._storage!, terminal);
+      this._handlers.set('sixel', sixelHandler);
+      this._disposeLater(
+        terminal._core._inputHandler._parser.registerDcsHandler({ final: 'q' }, sixelHandler)
+      );
+    }
+
+    // iTerm IIP handler
+    if (this._opts.iipSupport) {
+      const iipHandler = new IIPHandler(this._opts, this._renderer!, this._storage!, terminal);
+      this._handlers.set('iip', iipHandler);
+      this._disposeLater(
+        terminal._core._inputHandler._parser.registerOscHandler(1337, iipHandler)
+      );
+    }
+  }
+
+  // Note: storageLimit is skipped here to not intoduce a surprising side effect.
+  public reset(): boolean {
+    // reset options customizable by sequences to defaults
+    this._opts.sixelScrolling = this._defaultOpts.sixelScrolling;
+    this._opts.sixelPaletteLimit = this._defaultOpts.sixelPaletteLimit;
+    // also clear image storage
+    this._storage?.reset();
+    // reset protocol handlers
+    for (const handler of this._handlers.values()) {
+      handler.reset();
+    }
+    return false;
+  }
+
+  public get storageLimit(): number {
+    return this._storage?.getLimit() || -1;
+  }
+
+  public set storageLimit(limit: number) {
+    this._storage?.setLimit(limit);
+    this._opts.storageLimit = limit;
+  }
+
+  public get storageUsage(): number {
+    if (this._storage) {
+      return this._storage.getUsage();
+    }
+    return -1;
+  }
+
+  public get showPlaceholder(): boolean {
+    return this._opts.showPlaceholder;
+  }
+
+  public set showPlaceholder(value: boolean) {
+    this._opts.showPlaceholder = value;
+    this._renderer?.showPlaceholder(value);
+  }
+
+  public getImageAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined {
+    return this._storage?.getImageAtBufferCell(x, y);
+  }
+
+  public extractTileAtBufferCell(x: number, y: number): HTMLCanvasElement | undefined {
+    return this._storage?.extractTileAtBufferCell(x, y);
+  }
+
+  private _report(s: string): void {
+    this._terminal?._core.coreService.triggerDataEvent(s);
+  }
+
+  private _decset(params: (number | number[])[]): boolean {
+    for (let i = 0; i < params.length; ++i) {
+      switch (params[i]) {
+        case 80:
+          this._opts.sixelScrolling = false;
+          break;
+      }
+    }
+    return false;
+  }
+
+  private _decrst(params: (number | number[])[]): boolean {
+    for (let i = 0; i < params.length; ++i) {
+      switch (params[i]) {
+        case 80:
+          this._opts.sixelScrolling = true;
+          break;
+      }
+    }
+    return false;
+  }
+
+  // overload DA to return something more appropriate
+  private _da1(params: (number | number[])[]): boolean {
+    if (params[0]) {
+      return true;
+    }
+    // reported features:
+    // 62 - VT220
+    // 4 - SIXEL support
+    // 9 - charsets
+    // 22 - ANSI colors
+    if (this._opts.sixelSupport) {
+      this._report(`\x1b[?62;4;9;22c`);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Implementation of xterm's graphics attribute sequence.
+   *
+   * Supported features:
+   * - read/change palette limits (max 4096 by sixel lib)
+   * - read SIXEL canvas geometry (reports current window canvas or
+   *   squared pixelLimit if canvas > pixel limit)
+   *
+   * Everything else is deactivated.
+   */
+  private _xtermGraphicsAttributes(params: (number | number[])[]): boolean {
+    if (params.length < 2) {
+      return true;
+    }
+    if (params[0] === GaItem.COLORS) {
+      switch (params[1]) {
+        case GaAction.READ:
+          this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${this._opts.sixelPaletteLimit}S`);
+          return true;
+        case GaAction.SET_DEFAULT:
+          this._opts.sixelPaletteLimit = this._defaultOpts.sixelPaletteLimit;
+          this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${this._opts.sixelPaletteLimit}S`);
+          // also reset protocol handlers for now
+          for (const handler of this._handlers.values()) {
+            handler.reset();
+          }
+          return true;
+        case GaAction.SET:
+          if (params.length > 2 && !(params[2] instanceof Array) && params[2] <= MAX_SIXEL_PALETTE_SIZE) {
+            this._opts.sixelPaletteLimit = params[2];
+            this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${this._opts.sixelPaletteLimit}S`);
+          } else {
+            this._report(`\x1b[?${params[0]};${GaStatus.ACTION_ERROR}S`);
+          }
+          return true;
+        case GaAction.READ_MAX:
+          this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${MAX_SIXEL_PALETTE_SIZE}S`);
+          return true;
+        default:
+          this._report(`\x1b[?${params[0]};${GaStatus.ACTION_ERROR}S`);
+          return true;
+      }
+    }
+    if (params[0] === GaItem.SIXEL_GEO) {
+      switch (params[1]) {
+        // we only implement read and read_max here
+        case GaAction.READ:
+          let width = this._renderer?.dimensions?.css.canvas.width;
+          let height = this._renderer?.dimensions?.css.canvas.height;
+          if (!width || !height) {
+            // for some reason we have no working image renderer
+            // --> fallback to default cell size
+            const cellSize = CELL_SIZE_DEFAULT;
+            width = (this._terminal?.cols || 80) * cellSize.width;
+            height = (this._terminal?.rows || 24) * cellSize.height;
+          }
+          if (width * height < this._opts.pixelLimit) {
+            this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${width.toFixed(0)};${height.toFixed(0)}S`);
+          } else {
+            // if we overflow pixelLimit report that squared instead
+            const x = Math.floor(Math.sqrt(this._opts.pixelLimit));
+            this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${x};${x}S`);
+          }
+          return true;
+        case GaAction.READ_MAX:
+          // read_max returns pixelLimit as square area
+          const x = Math.floor(Math.sqrt(this._opts.pixelLimit));
+          this._report(`\x1b[?${params[0]};${GaStatus.SUCCESS};${x};${x}S`);
+          return true;
+        default:
+          this._report(`\x1b[?${params[0]};${GaStatus.ACTION_ERROR}S`);
+          return true;
+      }
+    }
+    // exit with error on ReGIS or any other requests
+    this._report(`\x1b[?${params[0]};${GaStatus.ITEM_ERROR}S`);
+    return true;
+  }
+}