coneko-term 0.0.0-stage → 0.1.0

package/dist/renderer.d.ts

@@ -0,0 +1,261 @@
+import { type RowView } from "./terminal.js";
+import { type ImageDecoder, type ImageSource } from "./images.js";
+/** スクロールバーの幅（CSS ピクセル）。xterm.js 6.0.0 と同じ。 */
+export declare const SCROLLBAR_WIDTH = 14;
+/** `fit` の計算に使う値。長さはすべて CSS ピクセル。 */
+export interface FitInput {
+    /** 欄の中身の幅（padding を引いたもの）。 */
+    width: number;
+    /** 欄の中身の高さ（padding を引いたもの）。 */
+    height: number;
+    /** セルの幅。 */
+    cellWidth: number;
+    /** セルの高さ。 */
+    cellHeight: number;
+    /** スクロールバーの幅。`scrollback` が 0 なら 0。 */
+    scrollbarWidth: number;
+}
+/**
+ * 欄の大きさから列と行の数を出す。xterm.js 6.0.0 の FitAddon（`proposeDimensions`）と同じ式:
+ * 幅からスクロールバーの幅を引いてセルの幅で割り、切り捨てる。列は 2 以上、行は 1 以上。
+ * セルの大きさが分からない（0 以下）、または欄が見えていない（幅か高さが 0 以下）ときは
+ * `undefined`。
+ */
+export declare function proposeDimensions(input: FitInput): {
+    cols: number;
+    rows: number;
+} | undefined;
+/** 色の語（`RowView.cells` の色の並び）から作る、描画に使う色の表。 */
+export declare class Palette {
+    readonly foreground: string;
+    readonly background: string;
+    readonly cursor: string;
+    /** 選択範囲の色。半透明でよい（CSS の色）。 */
+    readonly selection: string;
+    /** ブロックカーソルの下の字の色。省略したら背景の色。 */
+    readonly cursorText: string;
+    private colors;
+    /** `ansi` は先頭の 16 色か、256 色すべて。 */
+    constructor(ansi: readonly string[], foreground: string, background: string, cursor: string, 
+    /** 選択範囲の色。半透明でよい（CSS の色）。 */
+    selection?: string, 
+    /** ブロックカーソルの下の字の色。省略したら背景の色。 */
+    cursorText?: string);
+    /** パレットの `index` 番の色。 */
+    get(index: number): string;
+    /**
+     * 色の語を CSS の色にする。上位 8 ビットが種類（0 既定、1 パレット、2 RGB）。
+     * `bold` のときは、パレットの 0 から 7 を明るい色（8 から 15）にする（xterm.js の既定）。
+     */
+    resolve(word: number, isBackground: boolean, bold?: boolean): string;
+}
+/** 描画が `Terminal` から読むもの。画像を描くには、`ImageSource` の 3 つと `readPlacements` も要る。 */
+export interface RenderSource extends Partial<ImageSource> {
+    /** 列の数。 */
+    readonly cols: number;
+    /** 行の数。 */
+    readonly rows: number;
+    /** スクロールバックの行数。 */
+    readonly scrollbackLength: number;
+    /** カーソルの状態。 */
+    readonly cursor: {
+        x: number;
+        y: number;
+        visible: boolean;
+        blinking: boolean;
+        shape: "block" | "underline" | "bar";
+    };
+    /** フォーカスがあるか。 */
+    readonly isFocused: boolean;
+    /** 画面の一番下から何行さかのぼって見ているか。 */
+    readonly viewportOffset: number;
+    /** 変わった行を返し、印を消す。 */
+    takeDirtyRows(): number[];
+    /** 表示位置を考えた、いま見えている `y` 行目の選択範囲 `[開始の列, 終わりの列)`。選択が無ければ `undefined`。 */
+    selectionSpan?(y: number): [number, number] | undefined;
+    /** 表示位置を考えた、いま見えている `y` 行目。 */
+    readViewportRow(y: number): RowView;
+    /** 画像の配置の並び（`WasmTerminal.placements` と同じ）。 */
+    readPlacements?(): ArrayLike<number>;
+    /** 追加のカーソルの `[x, y, 形]` の並び（`WasmTerminal.extra_cursors` と同じ）。 */
+    readExtraCursors?(): ArrayLike<number>;
+    /** 追加のカーソルの色の語 `[字の色, カーソルの色]`（`WasmTerminal.extra_cursor_colors` と同じ）。 */
+    readExtraCursorColors?(): ArrayLike<number>;
+}
+/** 描画の設定。 */
+export interface RenderOptions {
+    /** CSS の `font-family`。 */
+    fontFamily: string;
+    /** CSS ピクセル。 */
+    fontSize: number;
+    /** 字の高さに掛ける倍率。 */
+    lineHeight: number;
+    /** 色の表。 */
+    palette: Palette;
+}
+/** `CanvasRenderer` が使う Canvas 2D の道具。テストでは入れ替える。 */
+export interface RenderEnv {
+    /** 画面の `devicePixelRatio`。 */
+    devicePixelRatio(): number;
+    /** 次のフレームで `cb` を呼ぶよう頼む（`requestAnimationFrame`）。 */
+    requestFrame(cb: () => void): number;
+    /** `requestFrame` を取り消す。 */
+    cancelFrame(id: number): void;
+    /** 画像を読み解く道具。省くとブラウザーの機能を使う。 */
+    imageDecoder?: ImageDecoder;
+    /** いまの時刻（ミリ秒）。アニメーションのコマを進めるのに使う。省くと `performance.now()`。 */
+    now?(): number;
+}
+/** ブラウザーの `devicePixelRatio` と `requestAnimationFrame` を使う、既定の `RenderEnv`。 */
+export declare const browserEnv: RenderEnv;
+/** セルの大きさ。単位は CSS ピクセル。 */
+export interface CellSize {
+    width: number;
+    height: number;
+}
+/**
+ * Canvas 2D でターミナルの画面を描く。
+ *
+ * - 座標はすべてデバイスピクセルの整数で扱い、canvas の実際の大きさを
+ *   `devicePixelRatio` 倍にする。にじまない。
+ * - 描くのは `requestAnimationFrame` でまとめる。変わった行（と、カーソルが動いた行）だけを描く。
+ *   表示位置が動いたり、大きさ・フォント・色が変わったときは全部を描く。
+ */
+export declare class CanvasRenderer {
+    private canvas;
+    private source;
+    private options;
+    private env;
+    private ctx;
+    private dpr;
+    /** デバイスピクセルでのセルの大きさ。 */
+    private cellW;
+    private cellH;
+    /** セルの上端から、ベースラインまでの距離（デバイスピクセル）。 */
+    private baseline;
+    private descent;
+    private frame;
+    private needsFull;
+    private extraRows;
+    private lastCursor;
+    /** いま描く追加のカーソル。行ごと。 */
+    private extra;
+    /** 追加のカーソルの色の語 `[字の色, カーソルの色]`。 */
+    private extraColors;
+    /** 直前の描画で追加のカーソルがあった行。消えたときに描き直す。 */
+    private lastExtraRows;
+    private blinkOn;
+    private blinkTimer;
+    private disposed;
+    private cellSizeListeners;
+    /** 直前の描画で、スクロールバックを見ていたか。 */
+    private lastOffset;
+    private imageCache?;
+    /** 今のフレームで描く画像（読み解き済みのもの）。層ごと、`z` と ID の順。 */
+    private layers;
+    /** 直前のフレームで描いた画像の印。変わったら全部を描き直す。 */
+    private lastImageKey;
+    /** 直前のフレームで、回している画像があったか（あれば次のフレームも描く）。 */
+    private animating;
+    constructor(canvas: HTMLCanvasElement, source: RenderSource, options: RenderOptions, env?: RenderEnv);
+    /** セルの大きさ（CSS ピクセル）。 */
+    get cellSize(): CellSize;
+    /** デバイスピクセルでのセルの大きさ。 */
+    get deviceCellSize(): CellSize;
+    /** セルの大きさが変わった（フォントの読み込みや `devicePixelRatio` の変化のあと）。 */
+    onCellSizeChange(listener: (size: CellSize) => void): {
+        dispose(): void;
+    };
+    /** 設定を入れ替えて測り直す。 */
+    setOptions(options: RenderOptions): void;
+    private font;
+    /**
+     * 字の幅と高さを測る。フォントを読み終える前に測ると代わりのフォントの値になるので、
+     * 読み終えたら呼び直す（`Terminal.open` がそうする）。
+     */
+    measure(): void;
+    /** 列と行の数に合わせて canvas の大きさを決める。 */
+    private applySize;
+    /** 列と行の数が変わった。 */
+    resize(): void;
+    /** 全部を描き直す。 */
+    invalidate(): void;
+    /** 行 `ys`（見えている画面の行番号）を次のフレームで描き直す。 */
+    invalidateRows(ys: Iterable<number>): void;
+    /** 次のフレームで描く。何回呼んでも 1 回にまとめる。 */
+    requestRender(): void;
+    /** 画面に何か起きた（書き込みなど）。カーソルの点滅を最初に戻して描く。 */
+    touch(): void;
+    private restartBlink;
+    private stopBlink;
+    private updateBlink;
+    /** いま描く。通常は `requestRender` で足りる。 */
+    render(): void;
+    /**
+     * 見えている画像の配置を集めて層に分ける。前のフレームから変わったら `true`。
+     * 読み解きが終わっていない画像は、終わるまで描かない（終わったら描き直す）。
+     */
+    private collectImages;
+    /** 行 `y` にかかる画像を、`top` から始まる 1 行ぶんだけ描く。 */
+    private drawImages;
+    /** 追加のカーソルを、いま見える行ごとに集める。さかのぼって見ているときは出さない。 */
+    private collectExtraCursors;
+    private cursorShown;
+    private drawRow;
+    /** 追加のカーソルの形（主のカーソルに従うものは、いまの主の形にする）。 */
+    private extraShape;
+    /** 追加のカーソルのブロックの、字の色と背景色。`fg`・`bg` はそのセルの色。 */
+    private extraBlockColors;
+    /** 追加のカーソルのうち、ブロックで塗らないもの（中抜き・下線・縦棒）を描く。 */
+    private drawExtraCursorShape;
+    /**
+     * 行のセルごとの前景色・背景色・属性を決める（反転を適用し、太字なら明るい色にする）。
+     * `blockX` 列は、ブロックカーソルの色にする（なければ -1）。`extraBlocks` の列は、
+     * 追加のカーソルのブロックの色にする。
+     */
+    private resolveRowColors;
+    /** 背景を塗る。同じ色が続くところは 1 回で塗る。 */
+    private fillBackgroundRuns;
+    /** 選択範囲を、背景の上に半透明で重ねる。字はこの上に描く。 */
+    private fillSelection;
+    /** 字と、下線・取り消し線を描く。 */
+    private drawGlyphsAndLines;
+    /**
+     * 複数のセルにまたがる字（OSC 66）を描く。`dy` は、いまの行が四角の上から何行目か。
+     * 描くのは四角のうち、いまの行にかかる横長の帯だけ（行ごとに描き直すため）。
+     * 分数の大きさのときだけ、`v`・`h` の寄せ方で四角の中に置く。
+     */
+    private drawSized;
+    private lineThickness;
+    private drawUnderline;
+    /** ブロックで塗る場合は字ごと `drawRow` が塗るので、ここは中抜きと下線・縦棒。 */
+    private drawCursorShape;
+    /** 後始末。 */
+    dispose(): void;
+}
+/** スクロールバー。DOM で作る。見た目は xterm.js 6.0.0（VS Code のスクロールバー）に近づける。 */
+export declare class Scrollbar {
+    private api;
+    readonly track: HTMLElement;
+    private slider;
+    private cleanups;
+    private dragging;
+    /** いまのドラッグを終える関数。 */
+    private endDrag?;
+    constructor(host: HTMLElement, api: {
+        /** 全部の行の数（スクロールバック + 画面）。 */
+        total(): number;
+        /** 画面の行の数。 */
+        rows(): number;
+        /** 一番上に見えている行（0 が一番古い）。 */
+        viewportY(): number;
+        scrollToLine(line: number): void;
+        scrollLines(n: number): void;
+    });
+    private bind;
+    private startDrag;
+    /** 高さ（CSS ピクセル）と中身に合わせて、つまみの位置と大きさを決める。 */
+    update(heightPx: number, enabled: boolean): void;
+    /** 後始末。DOM から外し、ドラッグ中なら終える。 */
+    dispose(): void;
+}