@jbrowse/render-core 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/marks/rowLane.d.ts

@@ -0,0 +1,39 @@
+import type { RowTable } from './rowTable.ts';
+/**
+ * The `row` lane a value shape may carry: which band an instance stands in,
+ * `rowHeight` px each, the value scale ruling every band on its own. A caller
+ * that declares no rows is on row 0 with the whole canvas for a band, which is
+ * the same arithmetic, so the shaders take the lane unconditionally.
+ */
+export interface RowChannel {
+    row?: Uint32Array;
+}
+export interface RowParams {
+    /** CSS px per row band; the canvas height when absent. */
+    rowHeight?: number;
+    /** CSS px every row's band starts below the canvas top, less a scroll; 0 when absent. */
+    rowOffsetPx?: number;
+    /**
+     * The table `row` is read through as a key: its drawn slot, hidden, or a
+     * colour override. Absent, `row` is the slot.
+     */
+    rowTable?: RowTable;
+}
+/** The lane the instance buffer packs: zeros where the caller sent none. */
+export declare function rowLane(row: Uint32Array | undefined, count: number): Uint32Array<ArrayBufferLike>;
+/**
+ * The `rowTableKeys` uniform: the table's key count, or -1 with none bound,
+ * which a shader reads as each `row` being its own slot.
+ */
+export declare function rowTableKeys({ rowTable }: Pick<RowParams, 'rowTable'>): number;
+/** What a pass reading the table binds. */
+export declare function rowTableTextures({ rowTable }: Pick<RowParams, 'rowTable'>): {
+    rowTable: import("./types.ts").MarkTexels | undefined;
+};
+export declare function bandHeightPx(params: RowParams, canvasHeight: number): number;
+/** The slot `key` is drawn on, undefined where the table hides it. */
+export declare function keySlot(key: number, table: RowTable | undefined): number | undefined;
+/** The slot instance `i` is drawn on, undefined where the table hides its key. */
+export declare function rowSlot(row: Uint32Array | undefined, i: number, table: RowTable | undefined): number | undefined;
+/** The colour instance `i` is drawn in: its key's override, else `color`. */
+export declare function rowColor(color: number, row: Uint32Array | undefined, i: number, table: RowTable | undefined): number;

package/esm/marks/rowLane.js

@@ -0,0 +1,41 @@
+import { HIDDEN_ROW, NO_ROW_COLOR } from './rowTable.js';
+const NO_ROWS = new Uint32Array(0);
+/** The lane the instance buffer packs: zeros where the caller sent none. */
+export function rowLane(row, count) {
+    return row ?? (count === 0 ? NO_ROWS : new Uint32Array(count));
+}
+/**
+ * The `rowTableKeys` uniform: the table's key count, or -1 with none bound,
+ * which a shader reads as each `row` being its own slot.
+ */
+export function rowTableKeys({ rowTable }) {
+    return rowTable ? rowTable.keys : -1;
+}
+/** What a pass reading the table binds. */
+export function rowTableTextures({ rowTable }) {
+    return { rowTable: rowTable?.texture };
+}
+export function bandHeightPx(params, canvasHeight) {
+    return params.rowHeight ?? canvasHeight;
+}
+function rowKey(row, i) {
+    return row === undefined ? 0 : row[i];
+}
+/** The slot `key` is drawn on, undefined where the table hides it. */
+export function keySlot(key, table) {
+    if (!table) {
+        return key;
+    }
+    const slot = key < table.keys ? table.slot[key] : HIDDEN_ROW;
+    return slot === HIDDEN_ROW ? undefined : slot;
+}
+/** The slot instance `i` is drawn on, undefined where the table hides its key. */
+export function rowSlot(row, i, table) {
+    return keySlot(rowKey(row, i), table);
+}
+/** The colour instance `i` is drawn in: its key's override, else `color`. */
+export function rowColor(color, row, i, table) {
+    const key = rowKey(row, i);
+    const override = table && key < table.keys ? table.color[key] : NO_ROW_COLOR;
+    return override >>> 24 === 0 ? color : override;
+}

package/esm/marks/rowSpanIndex.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Instances from `x` to `x2` grouped by the row they stand in, each row's in
+ * start order, with the furthest end any instance of the row has reached so
+ * far: what answers which of a row's spans, bars, rules or line steps overlap
+ * a stretch of bp, in place of a spatial index over every instance. Each
+ * stands in its own row only, so the question a hover asks is one row's, and
+ * the answer is a binary search and a short walk.
+ */
+export interface RowSpanIndex {
+    /** Each row key's first position in `order`, and the end, at `key + 1`. */
+    readonly rowStart: Uint32Array;
+    /** The instance at each position: a row's together, in start order. */
+    readonly order: Uint32Array;
+    /** The furthest end among the row's instances up to each position. */
+    readonly reach: Uint32Array;
+}
+/**
+ * The index over `count` spans from `x` to `x2`, each in the row `row` names
+ * (row 0 where there is no lane). A counting sort by row, a sort of each row
+ * the input left out of start order, and one pass for the reach.
+ */
+export declare function rowSpanIndex(x: Uint32Array, x2: Uint32Array, row: Uint32Array | undefined, count?: number): RowSpanIndex;
+/**
+ * The instances of row `key` whose span meets `[bpMin, bpMax]`, the ends
+ * included, as a spatial index over the spans would answer them. The last
+ * span starting at or before `bpMax` is a binary search away; walking back,
+ * the reach says when no earlier span of the row can reach `bpMin`.
+ */
+export declare function spansInRow(index: RowSpanIndex, x: Uint32Array, x2: Uint32Array, key: number, bpMin: number, bpMax: number, out: number[]): void;

package/esm/marks/rowSpanIndex.js

@@ -0,0 +1,141 @@
+const lowEnd = (x, x2, i) => Math.min(x[i], x2[i]);
+const highEnd = (x, x2, i) => Math.max(x[i], x2[i]);
+// A row that arrived nearly in start order, as `cells` writes one (an
+// insertion lands just ahead of the run it interrupts), put in order by
+// insertion, which costs one move per piece out of place; a row further out of
+// order than that answers false and is left for `sortRow`.
+function nudgeRow(order, from, to, x, x2) {
+    let moves = 0;
+    const budget = 4 * (to - from);
+    for (let p = from + 1; p < to; p++) {
+        const i = order[p];
+        const start = lowEnd(x, x2, i);
+        let q = p - 1;
+        while (q >= from && lowEnd(x, x2, order[q]) > start) {
+            order[q + 1] = order[q];
+            q--;
+            if (++moves > budget) {
+                order[q + 1] = i;
+                return false;
+            }
+        }
+        order[q + 1] = i;
+    }
+    return true;
+}
+// One row's instances into start order, ties in the order they came: the
+// start and the position packed into one double where that is exact, which
+// keeps the typed sort off a comparator.
+function sortRow(order, from, to, x, x2) {
+    const n = to - from;
+    const slice = order.subarray(from, to);
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const i of slice) {
+        const s = lowEnd(x, x2, i);
+        lo = Math.min(lo, s);
+        hi = Math.max(hi, s);
+    }
+    if ((hi - lo + 1) * n < Number.MAX_SAFE_INTEGER) {
+        const keys = new Float64Array(n);
+        for (let k = 0; k < n; k++) {
+            keys[k] = (lowEnd(x, x2, slice[k]) - lo) * n + k;
+        }
+        keys.sort();
+        const placed = Uint32Array.from(slice);
+        for (let k = 0; k < n; k++) {
+            slice[k] = placed[keys[k] % n];
+        }
+    }
+    else {
+        slice.sort((a, b) => lowEnd(x, x2, a) - lowEnd(x, x2, b) || a - b);
+    }
+}
+/**
+ * The index over `count` spans from `x` to `x2`, each in the row `row` names
+ * (row 0 where there is no lane). A counting sort by row, a sort of each row
+ * the input left out of start order, and one pass for the reach.
+ */
+export function rowSpanIndex(x, x2, row, count = x.length) {
+    let rows = 1;
+    if (row) {
+        for (let i = 0; i < count; i++) {
+            if (row[i] + 1 > rows) {
+                rows = row[i] + 1;
+            }
+        }
+    }
+    const rowStart = new Uint32Array(rows + 1);
+    if (row) {
+        for (let i = 0; i < count; i++) {
+            rowStart[row[i] + 1]++;
+        }
+        for (let r = 0; r < rows; r++) {
+            rowStart[r + 1] = rowStart[r + 1] + rowStart[r];
+        }
+    }
+    else {
+        rowStart[1] = count;
+    }
+    const order = new Uint32Array(count);
+    if (row) {
+        const next = rowStart.slice(0, rows);
+        for (let i = 0; i < count; i++) {
+            order[next[row[i]]++] = i;
+        }
+    }
+    else {
+        for (let i = 0; i < count; i++) {
+            order[i] = i;
+        }
+    }
+    const reach = new Uint32Array(count);
+    for (let r = 0; r < rows; r++) {
+        const from = rowStart[r];
+        const to = rowStart[r + 1];
+        for (let p = from + 1; p < to; p++) {
+            if (lowEnd(x, x2, order[p]) < lowEnd(x, x2, order[p - 1])) {
+                if (!nudgeRow(order, from, to, x, x2)) {
+                    sortRow(order, from, to, x, x2);
+                }
+                break;
+            }
+        }
+        let furthest = 0;
+        for (let p = from; p < to; p++) {
+            furthest = Math.max(furthest, highEnd(x, x2, order[p]));
+            reach[p] = furthest;
+        }
+    }
+    return { rowStart, order, reach };
+}
+/**
+ * The instances of row `key` whose span meets `[bpMin, bpMax]`, the ends
+ * included, as a spatial index over the spans would answer them. The last
+ * span starting at or before `bpMax` is a binary search away; walking back,
+ * the reach says when no earlier span of the row can reach `bpMin`.
+ */
+export function spansInRow(index, x, x2, key, bpMin, bpMax, out) {
+    const { rowStart, order, reach } = index;
+    if (key + 1 >= rowStart.length) {
+        return;
+    }
+    const from = rowStart[key];
+    let lo = from;
+    let hi = rowStart[key + 1];
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (lowEnd(x, x2, order[mid]) <= bpMax) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    for (let p = lo - 1; p >= from && reach[p] >= bpMin; p--) {
+        const i = order[p];
+        if (highEnd(x, x2, i) >= bpMin) {
+            out.push(i);
+        }
+    }
+}

package/esm/marks/rowTable.d.ts

@@ -0,0 +1,41 @@
+import type { MarkTexels } from './types.ts';
+/** The `slot` a hidden key holds. */
+export declare const HIDDEN_ROW = 4294967295;
+/** The `color` a key with no override holds: alpha 0, the instance's own colour. */
+export declare const NO_ROW_COLOR = 0;
+/**
+ * The row axis as a pass reads it: each key's drawn slot or `HIDDEN_ROW`, its
+ * packed ABGR colour override or `NO_ROW_COLOR`, and the RGBA8 texture the
+ * vertex stage samples for the same answers (`shaders/rowTable.slang` has the
+ * layout). One object, so the shader, the painter, the ink and the hit test
+ * cannot place a key differently. Immutable: a reorder, focus, hide or
+ * recolour builds a new one, and the backend uploads on identity.
+ */
+export interface RowTable {
+    readonly keys: number;
+    readonly slot: Uint32Array;
+    readonly color: Uint32Array;
+    readonly texture: MarkTexels;
+}
+/**
+ * The table for `slot[key]` and `color[key]`, both indexed by key: `slot` is
+ * `HIDDEN_ROW` where the key draws nothing, `color` is `NO_ROW_COLOR` where the
+ * instance keeps its own colour, an override alpha 0 being none. Both arrays
+ * are held, not copied. Each key's texel sits where the shader's own twins
+ * put it.
+ */
+export declare function buildRowTable(slot: Uint32Array, color?: Uint32Array): RowTable;
+/**
+ * The keys a display's rows carry across every region: a name's key is
+ * assigned the first time it is asked for and never moves, so a region encoded
+ * against the registry stays valid as later regions add names and the table
+ * alone follows the reader's order, focus and colours. Grows only.
+ */
+export declare class RowKeys {
+    private readonly index;
+    readonly names: string[];
+    keyOf(name: string): number;
+    /** The key a name holds, undefined where none was ever assigned. */
+    lookup(name: string): number | undefined;
+    get size(): number;
+}

package/esm/marks/rowTable.js

@@ -0,0 +1,75 @@
+import { rowTablePlaneHeight, rowTableTexelX, rowTableTexelY, rowTableWidth, } from '../shaders/rowTable.js.generated.js';
+/** The `slot` a hidden key holds. */
+export const HIDDEN_ROW = 0xffffffff;
+/** The `color` a key with no override holds: alpha 0, the instance's own colour. */
+export const NO_ROW_COLOR = 0;
+const MAX_SLOT = 0xffffff;
+/**
+ * The table for `slot[key]` and `color[key]`, both indexed by key: `slot` is
+ * `HIDDEN_ROW` where the key draws nothing, `color` is `NO_ROW_COLOR` where the
+ * instance keeps its own colour, an override alpha 0 being none. Both arrays
+ * are held, not copied. Each key's texel sits where the shader's own twins
+ * put it.
+ */
+export function buildRowTable(slot, color = new Uint32Array(slot.length)) {
+    const keys = slot.length;
+    if (color.length !== keys) {
+        throw new Error(`buildRowTable: ${keys} slots but ${color.length} colours; both are per key`);
+    }
+    const width = rowTableWidth(keys);
+    const plane = rowTablePlaneHeight(keys);
+    const bytes = new Uint8Array(width * plane * 2 * 4);
+    for (let key = 0; key < keys; key++) {
+        const s = slot[key];
+        const x = rowTableTexelX(key, keys);
+        const y = rowTableTexelY(key, keys);
+        const o = (y * width + x) * 4;
+        if (s !== HIDDEN_ROW) {
+            if (s > MAX_SLOT) {
+                throw new Error(`buildRowTable: slot ${s} of key ${key} exceeds the ${MAX_SLOT} the table holds`);
+            }
+            bytes[o] = s & 0xff;
+            bytes[o + 1] = (s >>> 8) & 0xff;
+            bytes[o + 2] = (s >>> 16) & 0xff;
+            bytes[o + 3] = 0xff;
+        }
+        const c = color[key];
+        const p = ((y + plane) * width + x) * 4;
+        bytes[p] = c & 0xff;
+        bytes[p + 1] = (c >>> 8) & 0xff;
+        bytes[p + 2] = (c >>> 16) & 0xff;
+        bytes[p + 3] = c >>> 24;
+    }
+    return {
+        keys,
+        slot,
+        color,
+        texture: { bytes, width, height: plane * 2 },
+    };
+}
+/**
+ * The keys a display's rows carry across every region: a name's key is
+ * assigned the first time it is asked for and never moves, so a region encoded
+ * against the registry stays valid as later regions add names and the table
+ * alone follows the reader's order, focus and colours. Grows only.
+ */
+export class RowKeys {
+    index = new Map();
+    names = [];
+    keyOf(name) {
+        let key = this.index.get(name);
+        if (key === undefined) {
+            key = this.names.length;
+            this.names.push(name);
+            this.index.set(name, key);
+        }
+        return key;
+    }
+    /** The key a name holds, undefined where none was ever assigned. */
+    lookup(name) {
+        return this.index.get(name);
+    }
+    get size() {
+        return this.names.length;
+    }
+}

package/esm/marks/ruleMark.d.ts

@@ -0,0 +1,21 @@
+import type { ColorChannel } from './markRamp.ts';
+import type { ValuedMarkParams } from './pointMark.ts';
+import type { RowChannel } from './rowLane.ts';
+import type { MarkShape } from './types.ts';
+/**
+ * The `rule` shape's channels: a segment across `x`..`x2` at `y`, Vega-Lite's
+ * `rule` with `x`, `x2` and `y`.
+ */
+export interface RuleChannels extends ColorChannel, RowChannel {
+    x: Uint32Array;
+    x2: Uint32Array;
+    y: Float32Array;
+    count: number;
+}
+export interface RuleParams extends ValuedMarkParams {
+    /** Thickness in CSS px. */
+    sizePx: number;
+    /** Narrowest a rule is painted, in CSS px, grown from its `x` end. */
+    minWidthPx: number;
+}
+export declare const ruleMark: MarkShape<RuleChannels, RuleParams>;

package/esm/marks/ruleMark.js

@@ -0,0 +1,91 @@
+import { bpProjection, projectBp, spanLeft } from '../canvas2dUtils.js';
+import * as shader from '../shaders/pointMark.generated.js';
+import { pointRowYPx, pointYPx } from '../shaders/pointMark.js.generated.js';
+import { rowBandTopPx } from '../shaders/rowTable.js.generated.js';
+import { slangPass } from '../slangPass.js';
+import { makeAbgrFill } from './colorFill.js';
+import { colorBits, paintColors } from './markRamp.js';
+import { valueWindow } from './nearestMarkHit.js';
+import { writePointUniforms } from './pointMark.js';
+import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableTextures, } from './rowLane.js';
+import { valueScaleUniforms } from './valueScale.js';
+function ruleFrame(block, frame, params) {
+    const { valueScaleType, valueSymlogConstant } = valueScaleUniforms(params);
+    return {
+        ...bpProjection(block),
+        band: bandHeightPx(params, frame.canvasHeight),
+        rowOffsetPx: params.rowOffsetPx ?? 0,
+        reverse: params.reverse ? 1 : 0,
+        domainMin: params.domain[0],
+        domainMax: params.domain[1],
+        scaleType: valueScaleType,
+        symlogConstant: valueSymlogConstant,
+        insetPx: params.insetPx ?? 0,
+        sizePx: params.sizePx,
+        minWidthPx: params.minWidthPx,
+        table: params.rowTable,
+        left: 0,
+        top: 0,
+        width: 0,
+    };
+}
+function placeRule(c, g, i) {
+    const slot = rowSlot(c.row, i, g.table);
+    if (slot === undefined) {
+        return false;
+    }
+    const xa = projectBp(g, c.x[i]);
+    const xb = projectBp(g, c.x2[i]);
+    const width = Math.max(g.minWidthPx, Math.abs(xb - xa));
+    const valueY = pointYPx(c.y[i], g.domainMin, g.domainMax, g.band, g.scaleType, g.insetPx, g.symlogConstant);
+    g.left = spanLeft(xa, xb, width);
+    g.width = width;
+    g.top =
+        pointRowYPx(rowBandTopPx(g.rowOffsetPx, g.band, slot), g.band, g.reverse, valueY) -
+            g.sizePx / 2;
+    return true;
+}
+export const ruleMark = {
+    id: 'rule',
+    pass: {
+        ...slangPass({ id: 'rule', mod: shader }),
+        pack: c => shader.packInstances({
+            ...c,
+            color: colorBits(c, c.count),
+            glyph: new Uint8Array(c.count),
+            row: rowLane(c.row, c.count),
+        }, c.count),
+    },
+    writeUniforms(scratch, clip, block, frame, params) {
+        writePointUniforms(scratch, clip, block, frame, params, {
+            radiusPx: params.sizePx / 2,
+            rule: true,
+            minWidthPx: params.minWidthPx,
+        });
+    },
+    textures: rowTableTextures,
+    paintBlock(ctx, channels, block, frame, params) {
+        const { count, row } = channels;
+        if (count === 0) {
+            return;
+        }
+        const color = paintColors(channels, count, params.colorScale);
+        const g = ruleFrame(block, frame, params);
+        const setFill = makeAbgrFill(ctx);
+        for (let i = 0; i < count; i++) {
+            if (placeRule(channels, g, i)) {
+                setFill(rowColor(color[i], row, i, g.table));
+                ctx.fillRect(g.left, g.top, g.width, g.sizePx);
+            }
+        }
+    },
+    ink(channels, block, frame, params, i) {
+        const g = ruleFrame(block, frame, params);
+        return placeRule(channels, g, i)
+            ? { left: g.left, top: g.top, width: g.width, height: g.sizePx }
+            : undefined;
+    },
+    valueWindow(yPx, radiusPx, frame, params) {
+        return valueWindow(yPx, radiusPx + params.sizePx / 2, frame, params);
+    },
+};

package/esm/marks/spanMark.d.ts

@@ -0,0 +1,42 @@
+import type { ColorChannel } from './markRamp.ts';
+import type { RowTable } from './rowTable.ts';
+import type { MarkColorScale, MarkShape } from './types.ts';
+/**
+ * The `span` shape's channels: a coloured rectangle from `x` to `x2` on the
+ * band belonging to `row`, its colour packed or, under a colour scale, the
+ * value it resolves from.
+ */
+export interface SpanChannels extends ColorChannel {
+    x: Uint32Array;
+    x2: Uint32Array;
+    /** The band's slot, or its key where the params bind a `rowTable`. */
+    row: Uint32Array;
+    count: number;
+}
+export interface SpanParams {
+    /** The quantitative colour scale, for a span whose colour is a ramp or a threshold. */
+    colorScale?: MarkColorScale;
+    /** CSS px per row. */
+    rowHeight: number;
+    /** Fraction of the row the rect fills, leaving inter-row gaps. */
+    rowProportion: number;
+    /**
+     * Narrowest a span is painted, in CSS px. A caller whose marks tile writes
+     * zero; one whose marks are sparse intervals floors them.
+     */
+    minWidthPx: number;
+    /**
+     * CSS px the **painter alone** adds to each span's right edge, closing the
+     * hairline two antialiased `fillRect`s leave where tiling runs meet on a
+     * fractional pixel. The GPU pass needs none, and the ink excludes it.
+     */
+    seamPx: number;
+    /** Rows-area scroll offset in CSS px; 0 for a canvas sized to its content. */
+    scrollTop: number;
+    /**
+     * The table `row` is read through as a key: its drawn slot, hidden, or a
+     * colour override. Absent, `row` is the slot.
+     */
+    rowTable?: RowTable;
+}
+export declare const spanMark: MarkShape<SpanChannels, SpanParams>;

package/esm/marks/spanMark.js

@@ -0,0 +1,81 @@
+import { bpRangeXTuple } from '../blockClipUtils.js';
+import { bpProjection, projectBp, spanLeft } from '../canvas2dUtils.js';
+import { drawnRowHeightPx, rowBandOffsetPx, } from '../shaders/rowRect.js.generated.js';
+import * as shader from '../shaders/spanMark.generated.js';
+import { slangPass } from '../slangPass.js';
+import { makeAbgrFill } from './colorFill.js';
+import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { rowColor, rowSlot, rowTableKeys, rowTableTextures } from './rowLane.js';
+function spanFrame(block, params) {
+    const { rowHeight, rowProportion } = params;
+    const { originPx, startBp, spanBp, signedSpanPx } = bpProjection(block);
+    return {
+        originPx,
+        startBp,
+        spanBp,
+        signedSpanPx,
+        rowHeight,
+        scrollTop: params.scrollTop,
+        bandOffsetPx: rowBandOffsetPx(rowHeight, rowProportion),
+        minWidthPx: params.minWidthPx,
+        table: params.rowTable,
+        left: 0,
+        top: 0,
+        width: 0,
+        height: drawnRowHeightPx(rowHeight, rowProportion),
+    };
+}
+function placeSpan(c, g, i) {
+    const slot = rowSlot(c.row, i, g.table);
+    if (slot === undefined) {
+        return false;
+    }
+    const xa = projectBp(g, c.x[i]);
+    const xb = projectBp(g, c.x2[i]);
+    const width = Math.max(g.minWidthPx, Math.abs(xb - xa));
+    g.left = spanLeft(xa, xb, width);
+    g.top = g.bandOffsetPx + g.rowHeight * slot - g.scrollTop;
+    g.width = width;
+    return true;
+}
+export const spanMark = {
+    id: 'span',
+    pass: {
+        ...slangPass({ id: 'span', mod: shader }),
+        pack: c => shader.packInstances({ ...c, color: colorBits(c, c.count) }, c.count),
+    },
+    writeUniforms(scratch, clip, block, frame, params) {
+        shader.writeUniforms(scratch, {
+            bpRangeX: bpRangeXTuple(clip, block.reversed),
+            canvasHeight: frame.canvasHeight,
+            minCellDenomPx: clip.scissorW,
+            minCellPx: params.minWidthPx,
+            zero: 0,
+            rowHeight: params.rowHeight,
+            rowProportion: params.rowProportion,
+            scrollTop: params.scrollTop,
+            rowTableKeys: rowTableKeys(params),
+            ...rampUniforms(params.colorScale),
+        });
+    },
+    textures: rowTableTextures,
+    paintBlock(ctx, channels, block, _frame, params) {
+        const { count, row } = channels;
+        const { seamPx } = params;
+        const color = paintColors(channels, count, params.colorScale);
+        const g = spanFrame(block, params);
+        const setFill = makeAbgrFill(ctx);
+        for (let i = 0; i < count; i++) {
+            if (placeSpan(channels, g, i)) {
+                setFill(rowColor(color[i], row, i, g.table));
+                ctx.fillRect(g.left, g.top, g.width + seamPx, g.height);
+            }
+        }
+    },
+    ink(channels, block, _frame, params, i) {
+        const g = spanFrame(block, params);
+        return placeSpan(channels, g, i)
+            ? { left: g.left, top: g.top, width: g.width, height: g.height }
+            : undefined;
+    },
+};