@xterm/addon-image 0.10.0-beta.31 → 0.10.0-beta.310

package/src/ImageStorage.ts

@@ -5,8 +5,11 @@
 
 import { IDisposable } from '@xterm/xterm';
 import { ImageRenderer } from './ImageRenderer';
-import { ITerminalExt, IExtendedAttrsImage, IImageAddonOptions, IImageSpec, IBufferLineExt, BgFlags, Cell, Content, ICellSize, ExtFlags, Attributes, UnderlineStyle } from './Types';
-
+import type {
+  ITerminalExt, IImageAddonOptions, IImageSpec, ICellSize, 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 = {
@@ -14,93 +17,12 @@ export const CELL_SIZE_DEFAULT: ICellSize = {
   height: 14
 };
 
-/**
- * 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;
-  }
-
+class ImageTileInfo {
   constructor(
-    ext: number = 0,
-    urlId: number = 0,
     public imageId = -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;
+    public tileId = -1) {
   }
 }
-const EMPTY_ATTRS = new ExtendedAttrsImage();
-
 
 /**
  * ImageStorage - extension of CoreTerminal:
@@ -122,8 +44,11 @@ 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;
+  public onImageDeleted: ((storageId: number) => void) | undefined;
 
   constructor(
     private _terminal: ITerminalExt,
@@ -132,8 +57,10 @@ export class ImageStorage implements IDisposable {
   ) {
     try {
       this.setLimit(this._opts.storageLimit);
-    } catch (e: any) {
-      console.error(e.message);
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        console.error(e.message);
+      }
       console.warn(`storageLimit is set to ${this.getLimit()} MB`);
     }
     this._viewportMetrics = {
@@ -187,11 +114,13 @@ export class ImageStorage implements IDisposable {
 
   private _delImg(id: number): void {
     const spec = this._images.get(id);
+    if (!spec) return;
     this._images.delete(id);
     // FIXME: really ugly workaround to get bitmaps deallocated :(
-    if (spec && window.ImageBitmap && spec.orig instanceof ImageBitmap) {
+    if (window.ImageBitmap && spec.orig instanceof ImageBitmap) {
       spec.orig.close();
     }
+    this.onImageDeleted?.(id);
   }
 
   /**
@@ -215,27 +144,29 @@ export class ImageStorage implements IDisposable {
   }
 
   /**
-   * Only advance text cursor.
-   * This is an edge case from empty sixels carrying only a height but no pixels.
-   * Partially fixes https://github.com/jerch/xterm-addon-image/issues/37.
+   * Delete an image by its internal storage ID.
+   * Used by protocols that support explicit deletion (e.g. Kitty a=d).
    */
-  public advanceCursor(height: number): void {
-    if (this._opts.sixelScrolling) {
-      let cellSize = this._renderer.cellSize;
-      if (cellSize.width === -1 || cellSize.height === -1) {
-        cellSize = CELL_SIZE_DEFAULT;
-      }
-      const rows = Math.ceil(height / cellSize.height);
-      for (let i = 1; i < rows; ++i) {
-        this._terminal._core._inputHandler.lineFeed();
-      }
+  public deleteImage(id: number): void {
+    const spec = this._images.get(id);
+    if (spec) {
+      spec.marker?.dispose();
+      this._delImg(id);
     }
   }
 
   /**
    * Method to add an image to the storage.
+   * @param img - The image to add (canvas or bitmap).
+   * @param opts - Options for addImage:
+   *   - scrolling:  When true, cursor advances with the image.
+   *                 When false, image is placed at ORIGIN and cursor does not move.
+   *   - layer:      Which canvas layer to render on ('top' or 'bottom').
+   *   - zIndex:     Z-index for image layering within the same layer.
+   *   - cursorPos:  'vt340' for bottom-left, 'iip' for bottom.right.
+   * @returns The internal image ID assigned to the stored image.
    */
-  public addImage(img: HTMLCanvasElement | ImageBitmap): void {
+  public addImage(img: HTMLCanvasElement | ImageBitmap, opts: IAddImageOpts): number {
     // never allow storage to exceed memory limit
     this._evictOldest(img.width * img.height);
 
@@ -257,7 +188,7 @@ export class ImageStorage implements IDisposable {
     let offset = originX;
     let tileCount = 0;
 
-    if (!this._opts.sixelScrolling) {
+    if (!opts.scrolling) {
       buffer.x = 0;
       buffer.y = 0;
       offset = 0;
@@ -265,13 +196,13 @@ 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 as IBufferLineExt, offset + col, imageId, row * cols + col);
+        this._writeToCell(line, offset + col, imageId, row * cols + col);
         tileCount++;
       }
-      if (this._opts.sixelScrolling) {
+      if (opts.scrolling) {
         if (row < rows - 1) this._terminal._core._inputHandler.lineFeed();
       } else {
         if (++buffer.y >= termRows) break;
@@ -281,8 +212,12 @@ export class ImageStorage implements IDisposable {
     this._terminal._core._inputHandler._dirtyRowTracker.markDirty(buffer.y);
 
     // cursor positioning modes
-    if (this._opts.sixelScrolling) {
-      buffer.x = offset;
+    if (opts.scrolling) {
+      if (opts.cursorPos === 'iip') {
+        buffer.x = Math.min(offset + cols, termCols);
+      } else {
+        buffer.x = offset;
+      }
     } else {
       buffer.x = originX;
       buffer.y = originY;
@@ -324,11 +259,15 @@ export class ImageStorage implements IDisposable {
       actualCellSize: { ...cellSize },  // clone needed, since later modified
       marker: endMarker || undefined,
       tileCount,
-      bufferType: this._terminal.buffer.active.type
+      bufferType: this._terminal.buffer.active.type,
+      layer: opts.layer,
+      zIndex: opts.zIndex
     };
 
     // finally add the image
     this._images.set(imageId, imgSpec);
+    this.onImageAdded?.();
+    return imageId;
   }
 
 
@@ -338,16 +277,30 @@ export class ImageStorage implements IDisposable {
    */
   // TODO: Should we move this to the ImageRenderer?
   public render(range: { start: number, end: number }): void {
-    // setup image canvas in case we have none yet, but have images in store
-    if (!this._renderer.canvas && this._images.size) {
-      this._renderer.insertLayerToDom();
-      // safety measure - in case we cannot spawn a canvas at all, just exit
-      if (!this._renderer.canvas) {
-        return;
+    // Determine which layers have images
+    let hasTopImages = false;
+    let hasBottomImages = false;
+    for (const spec of this._images.values()) {
+      if (spec.layer === 'bottom') {
+        hasBottomImages = true;
+      } else {
+        hasTopImages = true;
       }
+      if (hasTopImages && hasBottomImages) break;
     }
+
+    // Lazily insert layers that are needed
+    if (hasTopImages && !this._renderer.hasLayer('top')) {
+      this._renderer.insertLayerToDom('top');
+      if (!this._renderer.hasLayer('top')) return;
+    }
+    if (hasBottomImages && !this._renderer.hasLayer('bottom')) {
+      this._renderer.insertLayerToDom('bottom');
+    }
+
     // rescale if needed
     this._renderer.rescaleCanvas();
+
     // exit early if we dont have any images to test for
     if (!this._images.size) {
       if (!this._fullyCleared) {
@@ -355,12 +308,25 @@ export class ImageStorage implements IDisposable {
         this._fullyCleared = true;
         this._needsFullClear = false;
       }
-      if (this._renderer.canvas) {
-        this._renderer.removeLayerFromDom();
+      if (this._renderer.hasLayer('top')) {
+        this._renderer.removeLayerFromDom('top');
+      }
+      if (this._renderer.hasLayer('bottom')) {
+        this._renderer.removeLayerFromDom('bottom');
       }
       return;
     }
 
+    // Remove layers no longer needed
+    if (!hasTopImages && this._renderer.hasLayer('top')) {
+      this._renderer.clearAll('top');
+      this._renderer.removeLayerFromDom('top');
+    }
+    if (!hasBottomImages && this._renderer.hasLayer('bottom')) {
+      this._renderer.clearAll('bottom');
+      this._renderer.removeLayerFromDom('bottom');
+    }
+
     // buffer switches force a full clear
     if (this._needsFullClear) {
       this._renderer.clearAll();
@@ -375,13 +341,17 @@ export class ImageStorage implements IDisposable {
     // clear drawing area
     this._renderer.clearLines(start, end);
 
-    // walk all cells in viewport and draw tiles found
+    // Collect draw calls so we can sort by z-index (lower z drawn first).
+    const drawCalls: { imgSpec: IImageSpec, tileId: number, col: number, row: number, count: number }[] = [];
+    const placeholderCalls: { col: number, row: number, count: number }[] = [];
+
+    // walk all cells in viewport and collect tiles found
     for (let row = start; row <= end; ++row) {
-      const line = buffer.lines.get(row + buffer.ydisp) as IBufferLineExt;
+      const line = buffer.lines.get(row + buffer.ydisp);
       if (!line) return;
       for (let col = 0; col < cols; ++col) {
-        if (line.getBg(col) & BgFlags.HAS_EXTENDED) {
-          let e: IExtendedAttrsImage = line._extendedAttrs[col] || EMPTY_ATTRS;
+        const e = line.getExtended(col)?.payload;
+        if (e instanceof ImageTileInfo) {
           const imageId = e.imageId;
           if (imageId === undefined || imageId === -1) {
             continue;
@@ -397,28 +367,39 @@ export class ImageStorage implements IDisposable {
              * - cell has same image id
              * - cell has consecutive tile id
              */
-            while (
-              ++col < cols
-              && (line.getBg(col) & BgFlags.HAS_EXTENDED)
-              && (e = line._extendedAttrs[col] || EMPTY_ATTRS)
-              && (e.imageId === imageId)
-              && (e.tileId === startTile + count)
-            ) {
+            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) {
               if (imgSpec.actual) {
-                this._renderer.draw(imgSpec, startTile, startCol, row, count);
+                drawCalls.push({ imgSpec, tileId: startTile, col: startCol, row, count });
               }
             } else if (this._opts.showPlaceholder) {
-              this._renderer.drawPlaceholder(startCol, row, count);
+              placeholderCalls.push({ col: startCol, row, count });
             }
             this._fullyCleared = false;
           }
         }
       }
     }
+
+    // Sort by z-index so lower z draws first (higher z renders on top)
+    drawCalls.sort((a, b) => a.imgSpec.zIndex - b.imgSpec.zIndex);
+
+    // Draw placeholders first (lowest priority)
+    for (const call of placeholderCalls) {
+      this._renderer.drawPlaceholder(call.col, call.row, call.count);
+    }
+
+    // Draw images in z-index order
+    for (const call of drawCalls) {
+      this._renderer.draw(call.imgSpec, call.tileId, call.col, call.row, call.count);
+    }
   }
 
   public viewportResize(metrics: { cols: number, rows: number }): void {
@@ -440,9 +421,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) as IBufferLineExt;
-      if (line.getBg(oldCol) & BgFlags.HAS_EXTENDED) {
-        const e: IExtendedAttrsImage = line._extendedAttrs[oldCol] || EMPTY_ATTRS;
+      const line = buffer.lines.get(row)!;
+      const e = line.getExtended(oldCol)?.payload;
+      if (e instanceof ImageTileInfo) {
         const imageId = e.imageId;
         if (imageId === undefined || imageId === -1) {
           continue;
@@ -459,7 +440,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._data[rightCol * Cell.SIZE + Cell.CONTENT] & Content.HAS_CONTENT_MASK) {
+          if (line.hasContent(rightCol)) {
             hasData = true;
             break;
           }
@@ -471,7 +452,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 as IBufferLineExt, expandCol, imageId, ++lastTile);
+          this._writeToCell(line, expandCol, imageId, ++lastTile);
           imgSpec.tileCount++;
         }
       }
@@ -485,10 +466,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) 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 line = buffer.lines.get(y);
+    if (line) {
+      const e = line.getExtended(x)?.payload;
+      if (e instanceof ImageTileInfo && 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);
@@ -505,10 +486,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) 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 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 spec = this._images.get(e.imageId);
         if (spec) {
           return this._renderer.extractTile(spec, e.tileId);
@@ -536,31 +517,31 @@ export class ImageStorage implements IDisposable {
     return used - current;
   }
 
-  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;
+  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--;
         }
-        // found a plain ExtendedAttrs instance, clone it to new entry
-        line._extendedAttrs[x] = new ExtendedAttrsImage(old.ext, old.urlId, imageId, tileId);
+        old.imageId = imageId;
+        old.tileId = tileId;
         return;
       }
     }
-    // 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);
+    // 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);
   }
 
   private _evictOnAlternate(): void {
@@ -573,18 +554,16 @@ 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) as IBufferLineExt;
+      const line = buffer.lines.get(y);
       if (!line) {
         continue;
       }
       for (let x = 0; x < this._terminal.cols; ++x) {
-        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++;
-            }
+        const payload = line.getExtended(x)?.payload;
+        if (payload instanceof ImageTileInfo) {
+          const spec = this._images.get(payload.imageId);
+          if (spec) {
+            spec.tileCount++;
           }
         }
       }

package/src/SixelHandler.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ImageStorage } from './ImageStorage';
+import { SixelImageStorage } from './SixelImageStorage';
 import { IDcsHandler, IParams, IImageAddonOptions, ITerminalExt, AttributeData, IResetHandler, ReadonlyColorSet } from './Types';
 import { toRGBA8888, BIG_ENDIAN, PALETTE_ANSI_256, PALETTE_VT340_COLOR } from 'sixel/lib/Colors';
 import { RGBA8888 } from 'sixel/lib/Types';
@@ -26,7 +26,7 @@ export class SixelHandler implements IDcsHandler, IResetHandler {
 
   constructor(
     private readonly _opts: IImageAddonOptions,
-    private readonly _storage: ImageStorage,
+    private readonly _storage: SixelImageStorage,
     private readonly _coreTerminal: ITerminalExt
   ) {
     DecoderAsync({
@@ -91,7 +91,7 @@ export class SixelHandler implements IDcsHandler, IResetHandler {
     const height = this._dec.height;
 
     // partial fix for https://github.com/jerch/xterm-addon-image/issues/37
-    if (!width || ! height) {
+    if (!width || !height) {
       if (height) {
         this._storage.advanceCursor(height);
       }
@@ -99,7 +99,7 @@ export class SixelHandler implements IDcsHandler, IResetHandler {
     }
 
     const canvas = ImageRenderer.createCanvas(undefined, width, height);
-    canvas.getContext('2d')?.putImageData(new ImageData(this._dec.data8, width, height), 0, 0);
+    canvas.getContext('2d')?.putImageData(new ImageData(this._dec.data8 as Uint8ClampedArray<ArrayBuffer>, width, height), 0, 0);
     if (this._dec.memoryUsage > MEM_PERMA_LIMIT) {
       this._dec.release();
     }

package/src/SixelImageStorage.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2020 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ImageStorage, CELL_SIZE_DEFAULT } from './ImageStorage';
+import { IImageAddonOptions, ITerminalExt, IAddImageOpts } from './Types';
+import { ImageRenderer } from './ImageRenderer';
+
+/**
+ * Sixel-specific image storage controller.
+ *
+ * Wraps the shared ImageStorage with sixel protocol semantics:
+ * - Cursor behavior governed by DECSET 80 (sixelScrolling option)
+ * - advanceCursor for empty sixels carrying only height
+ */
+export class SixelImageStorage {
+  private _addImageOpts: IAddImageOpts = { scrolling: true, layer: 'top', zIndex: 0, cursorPos: 'vt340' };
+  constructor(
+    private readonly _storage: ImageStorage,
+    private readonly _opts: IImageAddonOptions,
+    private readonly _renderer: ImageRenderer,
+    private readonly _terminal: ITerminalExt
+  ) {}
+
+  /**
+   * Add a sixel image to storage.
+   * Cursor behavior depends on the sixelScrolling option (DECSET 80).
+   */
+  public addImage(img: HTMLCanvasElement | ImageBitmap): void {
+    this._addImageOpts.scrolling = this._opts.sixelScrolling;
+    this._storage.addImage(img, this._addImageOpts);
+  }
+
+  /**
+   * Only advance text cursor.
+   * This is an edge case from empty sixels carrying only a height but no pixels.
+   * Partially fixes https://github.com/jerch/xterm-addon-image/issues/37.
+   */
+  public advanceCursor(height: number): void {
+    if (this._opts.sixelScrolling) {
+      let cellSize = this._renderer.cellSize;
+      if (cellSize.width === -1 || cellSize.height === -1) {
+        cellSize = CELL_SIZE_DEFAULT;
+      }
+      const rows = Math.ceil(height / cellSize.height);
+      for (let i = 1; i < rows; ++i) {
+        this._terminal._core._inputHandler.lineFeed();
+      }
+    }
+  }
+}