Move remaining addon test buttons into their own windows

2026-02-01 08:26:20 -08:00
parent e96748cc79
commit 53efc95170
6 changed files with 362 additions and 244 deletions
@@ -5,6 +5,7 @@

 import { BaseWindow } from './baseWindow';
 import type { IControlWindow } from '../controlBar';
+import type { IImageAddonOptions } from '@xterm/addon-image';

 export class AddonImageWindow extends BaseWindow implements IControlWindow {
  public readonly id = 'addon-image';
@@ -46,6 +47,20 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
    this._imageOptionsTextarea.rows = 12;
    optionsLabel.appendChild(this._imageOptionsTextarea);
    container.appendChild(optionsLabel);
+
+    container.appendChild(document.createElement('br'));
+    container.appendChild(document.createElement('br'));
+
+    const dl = document.createElement('dl');
+    const dt = document.createElement('dt');
+    dt.textContent = 'Image Test';
+    dl.appendChild(dt);
+    this._addDdWithButton(dl, 'image-demo1', 'snake (sixel)');
+    this._addDdWithButton(dl, 'image-demo2', 'oranges (sixel)');
+    this._addDdWithButton(dl, 'image-demo3', 'palette (iip)');
+    container.appendChild(dl);
+
+    this._initImageAddonExposed();
  }

  public get imageStorageLimitInput(): HTMLInputElement {
@@ -59,4 +74,93 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
  public get imageOptionsTextarea(): HTMLTextAreaElement {
    return this._imageOptionsTextarea;
  }
+
+  private _addDdWithButton(dl: HTMLElement, id: string, label: string): void {
+    const dd = document.createElement('dd');
+    const button = document.createElement('button');
+    button.id = id;
+    button.textContent = label;
+    dd.appendChild(button);
+    dl.appendChild(dd);
+  }
+
+  private _initImageAddonExposed(): void {
+    const imageAddon = this._addons.image.instance!;
+    const defaultOptions: IImageAddonOptions = (imageAddon as any)._defaultOpts;
+    const limitStorageElement = document.querySelector<HTMLInputElement>('#image-storagelimit')!;
+    limitStorageElement.valueAsNumber = imageAddon.storageLimit;
+    this._addDomListener(limitStorageElement, 'change', () => {
+      try {
+        imageAddon.storageLimit = limitStorageElement.valueAsNumber;
+        limitStorageElement.valueAsNumber = imageAddon.storageLimit;
+        console.log('changed storageLimit to', imageAddon.storageLimit);
+      } catch (e) {
+        limitStorageElement.valueAsNumber = imageAddon.storageLimit;
+        console.log('storageLimit at', imageAddon.storageLimit);
+        throw e;
+      }
+    });
+    const showPlaceholderElement = document.querySelector<HTMLInputElement>('#image-showplaceholder')!;
+    showPlaceholderElement.checked = imageAddon.showPlaceholder;
+    this._addDomListener(showPlaceholderElement, 'change', () => {
+      imageAddon.showPlaceholder = showPlaceholderElement.checked;
+    });
+    const ctorOptionsElement = document.querySelector<HTMLTextAreaElement>('#image-options')!;
+    ctorOptionsElement.value = JSON.stringify(defaultOptions, null, 2);
+
+    const sixelDemo = (url: string) => () => fetch(url)
+      .then(resp => resp.arrayBuffer())
+      .then(buffer => {
+        this._terminal.write('\r\n');
+        this._terminal.write(new Uint8Array(buffer));
+      });
+
+    const iipDemo = (url: string) => () => fetch(url)
+      .then(resp => resp.arrayBuffer())
+      .then(buffer => {
+        const data = new Uint8Array(buffer);
+        let sdata = '';
+        for (let i = 0; i < data.length; ++i) sdata += String.fromCharCode(data[i]);
+        this._terminal.write('\r\n');
+        this._terminal.write(`\x1b]1337;File=inline=1;size=${data.length}:${btoa(sdata)}\x1b\\`);
+      });
+
+    document.getElementById('image-demo1')!.addEventListener('click',
+      sixelDemo('https://raw.githubusercontent.com/saitoha/libsixel/master/images/snake.six'));
+    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/jerch/node-sixel/master/palette.png'));
+
+    // demo for image retrieval API
+    this._terminal.element!.addEventListener('click', (ev: MouseEvent) => {
+      if (!ev.ctrlKey || !imageAddon) return;
+
+      // TODO...
+      // if (ev.altKey) {
+      //   const sel = term.getSelectionPosition();
+      //   if (sel) {
+      //     addons.image.instance
+      //       .extractCanvasAtBufferRange(term.getSelectionPosition())
+      //       ?.toBlob(data => window.open(URL.createObjectURL(data), '_blank'));
+      //     return;
+      //   }
+      // }
+
+      const pos = (this._terminal as any)._core._mouseService!.getCoords(ev, (this._terminal as any)._core.screenElement!, this._terminal.cols, this._terminal.rows);
+      const x = pos[0] - 1;
+      const y = pos[1] - 1;
+      const canvas = ev.shiftKey
+        // ctrl+shift+click: get single tile
+        ? imageAddon.extractTileAtBufferCell(x, this._terminal.buffer.active.viewportY + y)
+        // ctrl+click: get original image
+        : imageAddon.getImageAtBufferCell(x, this._terminal.buffer.active.viewportY + y);
+      canvas?.toBlob(data => data && window.open(URL.createObjectURL(data), '_blank'));
+    });
+  }
+
+  private _addDomListener(element: HTMLElement, type: string, handler: (...args: any[]) => any): void {
+    element.addEventListener(type, handler);
+    (this._terminal as any)._core._register({ dispose: () => element.removeEventListener(type, handler) });
+  }
 }