@koeroesi86/canvas-grid 1.0.15 → 26.11.1

package/build/types/utils/renderer.d.ts

@@ -0,0 +1,26 @@
+import type { RenderProps } from '../types';
+declare abstract class Renderer<Options extends object> {
+    readonly options: Options;
+    protected constructor(options: Options);
+    /** Applies the given options and notifies `optionsUpdated` with the previous ones. */
+    update(options: Partial<Options>): void;
+    optionsUpdated(_previous: Options): void;
+    clearCache(): void;
+}
+/**
+ * Renderer producing a bitmap from props; usable as a JSX tag through `element`.
+ * Bitmaps are reused through a bounded LRU cache whenever `cacheKey` returns a key.
+ */
+export declare abstract class CanvasRenderer<Options extends object> extends Renderer<Options> {
+    private readonly bitmaps;
+    abstract render(props: RenderProps): HTMLCanvasElement;
+    /** Props with the same key must render the same pixels. Undefined disables caching. */
+    protected cacheKey(_props: RenderProps): string | undefined;
+    /** Device pixels per CSS pixel of the layer being drawn to; bitmaps are rendered at this scale to stay sharp. */
+    pixelRatio: number;
+    clearCache(): void;
+    paint(ctx: CanvasRenderingContext2D, props: RenderProps, x: number, y: number): void;
+    readonly element: import("./jsx").Component<RenderProps>;
+    private renderBitmap;
+}
+export default Renderer;

package/build/types/utils/row-store.d.ts

@@ -0,0 +1,37 @@
+import type { Key, RowData, RowId } from '../types';
+export type Row = RowData;
+/**
+ * Rows in display order: a dense array with an id lookup and each row's top offset,
+ * so appends, lookups and finding the row at a scroll offset never scan every row.
+ * Removing rows renumbers the rows after the first removed one (once per call).
+ * Rows keep a `slot` into the column stores that does not change when the rows are sorted.
+ */
+declare class RowStore {
+    private items;
+    private readonly indexById;
+    /** `tops[i]` is the offset of row `i` from the top of the first row. */
+    private tops;
+    private end;
+    get length(): number;
+    /** Sum of all row heights. */
+    get totalHeight(): number;
+    get keys(): RowId[];
+    get(id: Key): Row | undefined;
+    at(index: number): Row | undefined;
+    topOf(index: number): number;
+    /** Index of the first row that ends below `offset`; `length` when the offset is past the last row. */
+    indexAt(offset: number): number;
+    /** Appends the row, or replaces the row with the same id in place. */
+    set(row: Omit<Row, 'index' | 'slot'>): void;
+    /**
+     * Removes the rows with the given ids, ignoring unknown ones.
+     * Returns the slots of the removed rows in ascending order, which the column stores must drop too.
+     */
+    removeMany(ids: Key[]): number[];
+    /** Reorders the rows; the sort is stable, so equal rows keep their relative order. */
+    sort(compare: (a: Row, b: Row) => number): void;
+    clear(): void;
+    /** Recomputes positions and offsets from `from` onwards. */
+    private reindexFrom;
+}
+export default RowStore;

package/build/types/utils/selectors.d.ts

@@ -0,0 +1,3 @@
+import type { RowId, RowInput } from '../types';
+export declare const getNow: () => number;
+export declare const getRowId: (row: RowInput, _index?: number) => RowId;

package/build/types/web-component.d.ts

@@ -0,0 +1,189 @@
+import Collection from './utils/collection';
+import DataStore from './utils/data-store';
+import LruCache from './utils/lru-cache';
+import Loading from './utils/loading';
+import Layer from './utils/layer';
+import RendererRegistry from './utils/renderer-registry';
+import CellBackground from './cell-background';
+import HeaderRenderer from './header';
+import CellValueRenderer from './cell-value';
+import type { LayerOptions } from './utils/layer';
+import type { CellContext, CellRenderer, CellState, Key, RendererRef, RowId, RowInput, SortDirection, SortKey } from './types';
+import type { RowIdGetter } from './utils/data-store';
+/** What the grid remembers about a cell between frames. */
+interface CellEntry {
+    /** The raw value last drawn, and its formatted text; formatting only runs when the value differs. */
+    value: unknown;
+    formatted: string | undefined;
+    animating: boolean;
+    state: CellState;
+}
+export interface ColumnHeader {
+    index: number;
+    id: Key;
+    displayName?: string;
+    width: number;
+    /** Renderers drawing a cell of this column, in order. Defaults to the grid's `cellRenderers`. */
+    renderers?: RendererRef[];
+    valueFormatter: (value: unknown) => string;
+    /** Renderer drawing the header of this column. */
+    headerRenderer: RendererRef;
+}
+export type ColumnDefinition = Key | (Partial<ColumnHeader> & {
+    id: Key;
+});
+export interface Transaction {
+    add?: RowInput[];
+    remove?: RowInput[];
+    update?: RowInput[];
+}
+interface AgApi {
+    setRowData: (data: RowInput[]) => void;
+    updateRowData: (transaction: Transaction) => void;
+    setColumnDefs: (columns: ColumnDefinition[]) => void;
+    getRowNodeId: RowIdGetter;
+}
+export type { CellContext, CellRenderer, CellState, LayerOptions, RendererRef, SortDirection, SortKey };
+declare global {
+    interface HTMLElementTagNameMap {
+        'canvas-grid': CanvasGridComponent;
+    }
+}
+declare class CanvasGridComponent extends HTMLElement {
+    fps: number;
+    _font: string;
+    _headerFont: string;
+    headerHeight: number;
+    cellHeight: number;
+    cellPadding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    showRowNumbers: boolean;
+    showHeaders: boolean;
+    rowNumbersWidth: number;
+    ellipsis: string;
+    _backgroundColor: string;
+    _headerBackgroundColor: string;
+    textColor: string;
+    dataStore: DataStore;
+    _dataCollection: import("./utils/row-store").default;
+    /** Per-cell memory of the rows drawn recently; bounded, since only the rows in view need it. */
+    cellEntries: LruCache<Record<string, CellEntry>>;
+    getRowId: RowIdGetter;
+    headers: Collection<ColumnHeader>;
+    animationFrame: number | undefined;
+    scrollYOffset: number;
+    prevScrollYOffset: number;
+    scrollXOffset: number;
+    prevScrollXOffset: number;
+    lastRender: number;
+    lastDraw: number;
+    isScrolling: boolean;
+    scrollHelper: HTMLDivElement;
+    scrollArea: HTMLDivElement;
+    /** Canvases from bottom to top. */
+    layers: Layer[];
+    private readonly layersByName;
+    private readonly warnedLayers;
+    renderers: RendererRegistry;
+    /** Renderers drawing a cell when its column does not name its own. */
+    cellRenderers: RendererRef[];
+    cellBackgroundRenderer: CellBackground;
+    cellValueRenderer: CellValueRenderer;
+    headerCellRenderer: HeaderRenderer;
+    loadingIndicator: Loading;
+    /** Reused for every cell drawn; see CellContext. */
+    private readonly cell;
+    private readonly placeholderState;
+    throttleTransation: import("lodash").DebouncedFuncLeading<() => void>;
+    agApi: AgApi;
+    constructor();
+    /** Canvas of the content layer, which also defines the viewport size. */
+    get canvas(): HTMLCanvasElement;
+    get flashInDuration(): number;
+    set flashInDuration(flashInDuration: number);
+    get flashOutDuration(): number;
+    set flashOutDuration(flashOutDuration: number);
+    getLayer(name: string): Layer | undefined;
+    private requireLayer;
+    /** Adds a canvas on top of the existing layers, or below the layer named in `before`. */
+    addLayer(name: string, { alpha, before }?: LayerOptions): Layer;
+    removeLayer(name: string): void;
+    /** Makes a renderer available to columns under `name`; registering an existing name replaces it. */
+    registerRenderer(name: string, renderer: CellRenderer): void;
+    unregisterRenderer(name: string): void;
+    createScrollArea(): HTMLDivElement;
+    set font(font: string);
+    get font(): string;
+    set headerFont(font: string);
+    get headerFont(): string;
+    connectedCallback(): void;
+    private fontsTimeout;
+    private readonly onVisibilityChange;
+    private readonly onFontsLoaded;
+    cancelRender(): void;
+    /**
+     * Schedules a draw for the next animation frame. Nothing is drawn while the grid is idle:
+     * scrolling, data changes and resizes request a draw, and `draw` requests the next one itself while a cell animates.
+     */
+    requestRender(): void;
+    updateLastRender(): void;
+    render(): void;
+    hasScrolled(): boolean;
+    hasYScrolled(): boolean;
+    hasXScrolled(): boolean;
+    isInViewport(x?: number, y?: number, width?: number, height?: number): boolean;
+    /** Fills the shared context for something that is not a data cell: a header, row number or placeholder. */
+    private describe;
+    private paint;
+    private paintAll;
+    private isAnimating;
+    draw(forced?: boolean): void;
+    /** The columns overlapping the viewport horizontally, with their x position and values; found once per draw, not per row. */
+    private getVisibleColumns;
+    renderRowNumber(row: {
+        index: number;
+        height?: number;
+    }, y: number): void;
+    forceDraw(): void;
+    /** Viewport size in CSS pixels as of the last resize; cached because reading `clientWidth` per cell is slow. */
+    viewportWidth: number;
+    viewportHeight: number;
+    /** Device pixels per CSS pixel; canvases are scaled by it to stay sharp on HiDPI screens. */
+    get pixelRatio(): number;
+    /** Resizes the layers when the size or pixel ratio changed, then redraws everything. */
+    resize(): void;
+    /** Redraws when the element changes size, instead of checking on every frame. */
+    private observeSize;
+    /** The pixel ratio changes with browser zoom or when the window moves to another screen. */
+    private watchPixelRatio;
+    private resizeObserver;
+    private pixelRatioQuery;
+    /** A row's position and height along with its values by column id, or undefined for an unknown row. */
+    getRowData(rowId: RowId): {
+        id: Key;
+        index: number;
+        height: number;
+        values: Record<string, unknown>;
+    } | undefined;
+    /** Orders the rows by the given columns, in priority order; an empty list restores the original order. */
+    setSortModel(model: readonly SortKey[]): void;
+    getSortModel(): readonly SortKey[];
+    renderBrick(): void;
+    renderHeaders(): void;
+    getColumnHeader(key: Key): ColumnHeader | undefined;
+    get totalHeight(): number;
+    refreshScrollbar(): void;
+    queueUpdate(row: RowInput): void;
+    queueRemove(row: RowInput): void;
+    transaction({ add, remove, update }: Transaction): void;
+    clearValues(): void;
+    formatValue(key: Key, value: unknown): string;
+    setValues(data: RowInput[]): void;
+    setColumns(columns: ColumnDefinition[]): void;
+    disconnectedCallback(): void;
+}
+export default CanvasGridComponent;