@onjmin/oekaki/dist/index.d.ts

レイヤー概念があるお絵描きパッケージ

/**
 * RGBA配列
 */
type RGBA = [number, number, number, number];
/**
 * 塗りつぶし
 *
 * 多分bfsや
 */
declare const floodFill: (data: Uint8ClampedArray, width: number, height: number, startX: number, startY: number, fillColor: RGBA) => Uint8ClampedArray | null;

/**
 * お絵描きの履歴に特化した連結リスト
 *
 * 余計な変換がないんでUint8ClampedArrayを履歴に使うとええぞ
 */
declare class LinkedList<T> {
    #private;
    constructor();
    /**
     * 履歴を1つ追加
     */
    add(value: T): void;
    /**
     * 履歴を1つ戻す
     */
    undo(): T | null;
    /**
     * 履歴を1つ進める
     */
    redo(): T | null;
}

/**
 * インポート先から書き換え可能な入れ物
 */
declare class Config<T> {
    #private;
    constructor(defaultValue: T, reactive?: () => void);
    get value(): T;
    set value(next: T);
}
/**
 * ペンの色
 */
declare const color: Config<string>;
/**
 * ブラシの太さ
 */
declare const brushSize: Config<number>;
/**
 * ペンの太さ
 */
declare const penSize: Config<number>;
/**
 * 消しゴムの太さ
 */
declare const eraserSize: Config<number>;
/**
 * 左右反転
 */
declare const flipped: Config<boolean>;
/**
 * 1ドットの大きさ
 */
declare const getDotSize: () => number;
/**
 * 1ドットの大きさを変更する
 *
 * @param dotPenScale ドットペンの太さの倍率（1が最小）
 * @param maxDotCount ドットを最大でいくつに分割するか（解像度的な意味）
 * @param canvasLength 分割対象（幅か高さのどちらに合わせるか）
 */
declare const setDotSize: (dotPenScale?: number, maxDotCount?: number, canvasLength?: number) => void;
/**
 * レイヤーリストを取得
 *
 * 内部レイヤーリストは削除されると添え字そのままnullになるんやが
 * この関数はnullを除外したレイヤーリストを返すんやで
 */
declare const getLayers: () => LayeredCanvas[];
/**
 * レイヤーリストを読み込む
 *
 * init()不要の差し替え
 * @param layers getLayers()から取得できる値
 */
declare const setLayers: (layers: LayeredCanvas[]) => void;
/**
 * 背景用
 */
declare const lowerLayer: Config<LayeredCanvas | null>;
/**
 * 描画検出用
 */
declare const upperLayer: Config<LayeredCanvas | null>;
/**
 * レイヤーキャンバス初期化
 */
declare const init: (mountTarget: HTMLElement, width?: number, height?: number) => void;
/**
 * カーソルの座標取得
 */
declare const getXY: (e: MouseEvent) => [number, number, number];
/**
 * ユーザーのクリックイベント
 * PC専用ショートカットを考えるときなどに
 */
declare const onClick: (callback: (x: number, y: number, buttons: number) => void) => void;
/**
 * ユーザーの描画中イベント
 */
declare const onDraw: (callback: (x: number, y: number, buttons: number) => void) => void;
/**
 * ユーザーの描画完了イベント
 */
declare const onDrawn: (callback: (x: number, y: number, buttons: number) => void) => void;
/**
 * ストレージなどに一時保存可能なレイヤー情報
 */
type LayeredCanvasMeta = {
    name: string;
    index: number;
    hash: number;
    visible: boolean;
    opacity: number;
    locked: boolean;
    used: boolean;
    uuid: string;
};
/**
 * レイヤークラス
 */
declare class LayeredCanvas {
    #private;
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    /**
     * レイヤー名
     */
    name: string;
    /**
     * 内部レイヤーリストの添え字
     */
    index: number;
    /**
     * レイヤーの描画履歴
     */
    history: LinkedList<Uint8ClampedArray<ArrayBufferLike>>;
    /**
     * 差分検出用ハッシュ
     */
    hash: number;
    /**
     * レイヤーロック
     */
    locked: boolean;
    /**
     * 使用済みレイヤー
     */
    used: boolean;
    /**
     * レイヤーの一意なid
     */
    uuid: string;
    constructor(name?: string, uuid?: string);
    /**
     * ストレージなどに一時保存可能なレイヤー情報
     */
    get meta(): LayeredCanvasMeta;
    /**
     * ストレージなどに一時保存可能なレイヤー情報
     */
    set meta(meta: LayeredCanvasMeta);
    /**
     * レイヤーの削除
     */
    delete(): void;
    /**
     * 1つ背面のレイヤー
     */
    get prev(): LayeredCanvas | null;
    /**
     * 1つ前面のレイヤー
     */
    get next(): LayeredCanvas | null;
    /**
     * レイヤーの入れ替え
     */
    swap(to: number): void;
    /**
     * レイヤーの可視性
     */
    get visible(): boolean;
    /**
     * レイヤーの可視性
     */
    set visible(visible: boolean);
    /**
     * レイヤーの不透明度[%]
     */
    get opacity(): number;
    /**
     * レイヤーの不透明度[%]
     */
    set opacity(opacity: number);
    /**
     * レイヤーのUint8ClampedArray
     */
    get data(): Uint8ClampedArray;
    /**
     * レイヤーのUint8ClampedArray
     */
    set data(data: Uint8ClampedArray);
    /**
     * 差分検出
     */
    modified(): boolean;
    /**
     * レイヤーの描画履歴の保存
     */
    trace(): void;
    /**
     * レイヤーの描画履歴を1つ戻す
     */
    undo(): void;
    /**
     * レイヤーの描画履歴を1つ進める
     */
    redo(): void;
    /**
     * 全消し
     */
    clear(): void;
    /**
     * ドット基準で平行移動
     *
     * @param dx x差分
     * @param dy y差分
     */
    translateByDot(dx: number, dy: number): void;
    /**
     * 平行移動
     *
     * @param dx x差分
     * @param dy y差分
     */
    translate(dx: number, dy: number): void;
    /**
     * ドット基準の消しゴム
     */
    eraseByDot(x: number, y: number): void;
    /**
     * ドット基準のペン
     */
    drawByDot(x: number, y: number): void;
    /**
     * 消しゴム
     */
    erase(x: number, y: number): void;
    /**
     * ペン
     */
    draw(x: number, y: number): void;
    /**
     * ブラシ
     */
    drawLine(fromX: number, fromY: number, toX: number, toY: number): void;
}
/**
 * 全レイヤーを1枚のcanvasに書き出す
 */
declare const render: () => HTMLCanvasElement;
/**
 * nullを詰める
 *
 * 内部レイヤーリストは削除されると添え字そのままnullになるんやが
 * 気が向いたときに掃除や
 */
declare const refresh: () => void;

/**
 * 線形補間
 *
 * イベントは連続して発生しないんで、間の座標を計算する必要があるんや
 */
declare const lerp: (x: number, y: number, _x: number, _y: number) => number[][];

export { Config, LayeredCanvas, type LayeredCanvasMeta, LinkedList, type RGBA, brushSize, color, eraserSize, flipped, floodFill, getDotSize, getLayers, getXY, init, lerp, lowerLayer, onClick, onDraw, onDrawn, penSize, refresh, render, setDotSize, setLayers, upperLayer };