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

package/esm/marks/markRamp.js

@@ -0,0 +1,197 @@
+import { SCALE_TYPE_LOG, rampMidNorm, scaleTypeCode } from '../scoreScale.js';
+import { rampMidT } from '../shaders/colorRampLut.js.generated.js';
+import { MAX_COLOR_BANDS, MAX_COLOR_CUTS, RAMP_LINEAR, RAMP_LOG, RAMP_NONE, RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, RAMP_THRESHOLD, } from '../shaders/markColor.generated.js';
+import { normalizeScore } from '../shaders/scoreScale.js.generated.js';
+const NO_COLORS = new Uint32Array(0);
+/** Whether a colour scale is a threshold rather than a ramp. */
+export function isThreshold(scale) {
+    return 'cuts' in scale;
+}
+function midNormOf({ domain, scale, mid }) {
+    return rampMidNorm(domain[0], domain[1], scaleTypeCode(scale), mid);
+}
+const NO_RGBA = [0, 0, 0, 0];
+function bandsOf(colorAt) {
+    return Array.from({ length: MAX_COLOR_BANDS }, (_, i) => colorAt(i));
+}
+function rgbaOf(abgr) {
+    return [
+        (abgr & 255) / 255,
+        ((abgr >>> 8) & 255) / 255,
+        ((abgr >>> 16) & 255) / 255,
+        ((abgr >>> 24) & 255) / 255,
+    ];
+}
+function quad(values, from) {
+    return [
+        values[from] ?? 0,
+        values[from + 1] ?? 0,
+        values[from + 2] ?? 0,
+        values[from + 3] ?? 0,
+    ];
+}
+/**
+ * `markColor.slang`'s uniforms for a frame's colour scale, or for none: the
+ * mode, a ramp's domain and middle, and a threshold's cuts and band colours.
+ * Every valued shape's uniform block carries the set.
+ */
+export function rampUniforms(scale) {
+    const none = {
+        rampMode: RAMP_NONE,
+        rampMin: 0,
+        rampMax: 1,
+        rampMidNorm: 0.5,
+        colorCutCount: 0,
+        colorCuts: [quad([], 0), quad([], 0)],
+        colorBands: bandsOf(() => NO_RGBA),
+    };
+    if (!scale) {
+        return none;
+    }
+    if (isThreshold(scale)) {
+        const cuts = scale.cuts.slice(0, MAX_COLOR_CUTS);
+        return {
+            ...none,
+            rampMode: RAMP_THRESHOLD,
+            colorCutCount: cuts.length,
+            colorCuts: [quad(cuts, 0), quad(cuts, 4)],
+            colorBands: bandsOf(i => i <= cuts.length ? rgbaOf(scale.colors[i] ?? 0) : NO_RGBA),
+        };
+    }
+    return {
+        ...none,
+        rampMode: scale.scale === 'log' ? RAMP_LOG : RAMP_LINEAR,
+        rampMin: scale.domain[0],
+        rampMax: scale.domain[1],
+        rampMidNorm: midNormOf(scale),
+    };
+}
+/**
+ * The 4-byte instance lane, for the packer. Under a scale it is the value's
+ * float32 bits viewed as the `uint` the attribute declares — the reinterpret
+ * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative colour
+ * adds no lane. A constant colour fills a lane for the pack alone, which the
+ * payload never holds.
+ */
+export function colorBits(c, count) {
+    const { colorValue, color } = c;
+    return colorValue
+        ? rampValueBits(colorValue)
+        : typeof color === 'number'
+            ? new Uint32Array(count).fill(color)
+            : (color ?? NO_COLORS);
+}
+/** Instance `i`'s `color` alone, as a one-instance channel carries it. */
+export function instanceColor(color, i) {
+    return typeof color === 'number' ? color : color?.subarray(i, i + 1);
+}
+/** A value lane's float32 values viewed as their bits. */
+export function rampValueBits(values) {
+    return new Uint32Array(values.buffer, values.byteOffset, values.length);
+}
+/**
+ * A value lane's values kept where `keep` says, copied as bits: a JS number
+ * read out of the lane may lose the payload `RAMP_NO_VALUE_BITS` marks a
+ * feature with no value by.
+ */
+export function keepRampValues(values, keep) {
+    const kept = rampValueBits(values).filter((_, i) => keep(values[i], i));
+    return new Float32Array(kept.buffer, kept.byteOffset, kept.length);
+}
+/**
+ * The interval a value is in on a threshold: how many of the ascending cuts it
+ * is at or past, `thresholdIndex`'s rule and the shader's `thresholdBand`.
+ */
+export function thresholdBandOf(value, cuts) {
+    let band = 0;
+    for (const cut of cuts) {
+        if (value >= cut) {
+            band++;
+        }
+    }
+    return band;
+}
+function sameScale(a, b) {
+    if (isThreshold(a) || isThreshold(b)) {
+        return (isThreshold(a) &&
+            isThreshold(b) &&
+            a.cuts.length === b.cuts.length &&
+            a.cuts.every((cut, i) => cut === b.cuts[i]) &&
+            a.colors.length === b.colors.length &&
+            a.colors.every((color, i) => color === b.colors[i]));
+    }
+    return (a.domain[0] === b.domain[0] &&
+        a.domain[1] === b.domain[1] &&
+        a.scale === b.scale &&
+        a.lut === b.lut &&
+        midNormOf(a) === midNormOf(b));
+}
+/**
+ * The packed colours a painter fills with. Under a scale the values are baked
+ * against it once and kept on the payload, so a repaint at an unchanged scale
+ * — every pan and every hover — walks no values and the painters' fill
+ * batching still sees runs of one colour. The bake reruns when the domain, the
+ * scale type, the ramp's bytes or a threshold's cuts or colours move. A
+ * constant colour expands once and is kept the same way.
+ */
+export function paintColors(c, count, scale) {
+    const { colorValue, color } = c;
+    if (!scale || !colorValue) {
+        return typeof color === 'number'
+            ? constantColors(c, color, count)
+            : (color ?? NO_COLORS);
+    }
+    const bake = c.rampBake;
+    if (bake?.values === colorValue &&
+        bake.colors.length === count &&
+        sameScale(bake.scale, scale)) {
+        return bake.colors;
+    }
+    const colors = new Uint32Array(count);
+    const bits = rampValueBits(colorValue);
+    const colorOf = isThreshold(scale)
+        ? (value) => Number.isFinite(value)
+            ? scale.colors[thresholdBandOf(value, scale.cuts)]
+            : scale.colors[value > 0 ? scale.cuts.length : 0]
+        : rampColorOf(scale);
+    for (let i = 0; i < count; i++) {
+        const value = colorValue[i];
+        colors[i] =
+            bits[i] === RAMP_NO_VALUE_BITS
+                ? RAMP_NO_VALUE_COLOR
+                : Number.isNaN(value)
+                    ? RAMP_NOT_A_NUMBER_COLOR
+                    : colorOf(value);
+    }
+    c.rampBake = { values: colorValue, scale, colors };
+    return colors;
+}
+function constantColors(c, color, count) {
+    const bake = c.constantBake;
+    if (bake?.length === count && (count === 0 || bake[0] === color)) {
+        return bake;
+    }
+    const colors = new Uint32Array(count).fill(color);
+    c.constantBake = colors;
+    return colors;
+}
+function rampColorOf(ramp) {
+    const [min, max] = ramp.domain;
+    const log = ramp.scale === 'log';
+    const midNorm = midNormOf(ramp);
+    const { lut } = ramp;
+    const entries = lut.length / 4;
+    return (value) => {
+        const t = rampMidT(Number.isFinite(value)
+            ? normalizeScore(value, min, max, log ? SCALE_TYPE_LOG : 0, 1)
+            : value > 0
+                ? 1
+                : 0, midNorm);
+        const o = Math.round(t * (entries - 1)) * 4;
+        return (((lut[o + 3] << 24) |
+            (lut[o + 2] << 16) |
+            (lut[o + 1] << 8) |
+            lut[o]) >>>
+            0);
+    };
+}

package/esm/marks/nearestMarkHit.d.ts

@@ -0,0 +1,55 @@
+import type { RenderBlock } from '../renderBlock.ts';
+import type { RowParams } from './rowLane.ts';
+import type { Mark, MarkFrame, MarkHit } from './types.ts';
+import type { MarkValueScale } from './valueScale.ts';
+/**
+ * What a cursor's grab radius spans in one block for one mark: the bp, and
+ * the values the mark's shape can put ink at, every value for a shape with no
+ * `valueWindow`.
+ */
+export interface HitWindow {
+    block: RenderBlock;
+    bpMin: number;
+    bpMax: number;
+    valueMin: number;
+    valueMax: number;
+}
+/** A {@link MarkHit}, with the mark, block and region it was found in. */
+export interface NearestMarkHit<TRegion> extends MarkHit {
+    mark: number;
+    block: RenderBlock;
+    region: TRegion;
+}
+/**
+ * The instance nearest `(xPx, yPx)` within `radiusPx`, over the blocks the
+ * radius reaches. Marks are asked last to first and only a strictly nearer hit
+ * replaces the best, so a tie goes to the mark on top. `candidates` names what
+ * a mark is asked about in a block: what an index finds in the reach, or
+ * `backToFront` over every instance. `undefined` leaves the mark out, as a
+ * closed gate does. A mark spanning the view is asked first, over every region
+ * in `regionKeys` (the blocks' own by default) with an unbounded bp reach,
+ * since it paints over every block.
+ */
+export declare function nearestMarkHit<TRegion, TState extends MarkFrame>(marks: readonly Mark<TRegion, TState>[], blocks: readonly RenderBlock[], regionOf: (displayedRegionIndex: number) => TRegion | undefined, state: TState, xPx: number, yPx: number, { radiusPx, candidates, regionKeys, }: {
+    radiusPx: number;
+    regionKeys?: Iterable<number>;
+    candidates: (region: TRegion, mark: number, reach: HitWindow) => Iterable<number> | undefined;
+}): NearestMarkHit<TRegion> | undefined;
+/** `[end - 1 .. start]`: every instance as candidates, back to front. */
+export declare function backToFront(start: number, end: number): Iterable<number>;
+/**
+ * A value-scaled shape's `valueWindow`, read back through `denormalizeScore`
+ * inside each `rowHeight` band the radius touches — the whole canvas for a
+ * shape with no rows — the bands starting `rowOffsetPx` down, as the shapes
+ * place them. An end within reach of a band edge opens to infinity, where an
+ * out-of-domain value clamps, so a cursor near the seam reaches the
+ * neighbouring band too, and so does one within `edgePx` of it, where a bar's
+ * clip strip stands. A point passes its `insetPx`; a bar passes its `origin`,
+ * and its window opens away from the origin on the cursor's side, or both
+ * ways where the radius reaches the origin, which every bar stands on.
+ */
+export declare function valueWindow(yPx: number, radiusPx: number, { canvasHeight }: MarkFrame, scale: RowParams & MarkValueScale & {
+    insetPx?: number;
+    edgePx?: number;
+    origin?: number;
+}): [number, number];

package/esm/marks/nearestMarkHit.js

@@ -0,0 +1,158 @@
+import { bpAtPxExact } from '../canvas2dUtils.js';
+import { canvasWideBlock } from '../renderBlock.js';
+import { denormalizeScore } from '../scoreScale.js';
+import { valueScaleUniforms } from './valueScale.js';
+const EVERY_VALUE = [-Infinity, Infinity];
+/**
+ * The instance nearest `(xPx, yPx)` within `radiusPx`, over the blocks the
+ * radius reaches. Marks are asked last to first and only a strictly nearer hit
+ * replaces the best, so a tie goes to the mark on top. `candidates` names what
+ * a mark is asked about in a block: what an index finds in the reach, or
+ * `backToFront` over every instance. `undefined` leaves the mark out, as a
+ * closed gate does. A mark spanning the view is asked first, over every region
+ * in `regionKeys` (the blocks' own by default) with an unbounded bp reach,
+ * since it paints over every block.
+ */
+export function nearestMarkHit(marks, blocks, regionOf, state, xPx, yPx, { radiusPx, candidates, regionKeys, }) {
+    let best;
+    let bestDistSq = radiusPx * radiusPx;
+    const ask = (m, block, region, reach) => {
+        const mark = marks[m];
+        if (!mark.hitNearest) {
+            return;
+        }
+        const values = mark.valueWindow
+            ? mark.valueWindow(region, block, state, yPx, radiusPx)
+            : EVERY_VALUE;
+        const asked = values &&
+            candidates(region, m, {
+                block,
+                ...reach,
+                valueMin: values[0],
+                valueMax: values[1],
+            });
+        const hit = asked &&
+            mark.hitNearest(region, block, state, xPx, yPx, asked, bestDistSq);
+        if (hit) {
+            bestDistSq = hit.distSq;
+            best = {
+                mark: m,
+                block,
+                region,
+                index: hit.index,
+                x: hit.x,
+                y: hit.y,
+                distSq: hit.distSq,
+            };
+        }
+    };
+    if (marks.some(m => m.spansView)) {
+        for (const key of regionKeys ?? blocks.map(b => b.displayedRegionIndex)) {
+            const region = regionOf(key);
+            if (region === undefined) {
+                continue;
+            }
+            const block = canvasWideBlock(key, state.canvasWidth);
+            for (let m = marks.length - 1; m >= 0; m--) {
+                if (marks[m].spansView) {
+                    ask(m, block, region, { bpMin: -Infinity, bpMax: Infinity });
+                }
+            }
+        }
+    }
+    for (const block of blocks) {
+        const region = regionOf(block.displayedRegionIndex);
+        const widthPx = block.screenEndPx - block.screenStartPx;
+        if (region === undefined || widthPx <= 0) {
+            continue;
+        }
+        const halfBp = (radiusPx * (block.end - block.start)) / widthPx;
+        const cursorBp = bpAtPxExact(xPx, block);
+        const bpMin = cursorBp - halfBp;
+        const bpMax = cursorBp + halfBp;
+        if (bpMax < block.start || bpMin > block.end) {
+            continue;
+        }
+        for (let m = marks.length - 1; m >= 0; m--) {
+            if (!marks[m].spansView) {
+                ask(m, block, region, { bpMin, bpMax });
+            }
+        }
+    }
+    return best;
+}
+/** `[end - 1 .. start]`: every instance as candidates, back to front. */
+export function backToFront(start, end) {
+    return new ReverseRange(start, end);
+}
+// A class rather than a generator: `for..of` steps this in a few ns where a
+// generator yields in tens.
+class ReverseRange {
+    i;
+    start;
+    result = { value: 0, done: false };
+    constructor(start, end) {
+        this.start = start;
+        this.i = end;
+    }
+    [Symbol.iterator]() {
+        return this;
+    }
+    next() {
+        const r = this.result;
+        if (this.i > this.start) {
+            this.i--;
+            r.value = this.i;
+            r.done = false;
+        }
+        else {
+            r.done = true;
+        }
+        return r;
+    }
+}
+/**
+ * A value-scaled shape's `valueWindow`, read back through `denormalizeScore`
+ * inside each `rowHeight` band the radius touches — the whole canvas for a
+ * shape with no rows — the bands starting `rowOffsetPx` down, as the shapes
+ * place them. An end within reach of a band edge opens to infinity, where an
+ * out-of-domain value clamps, so a cursor near the seam reaches the
+ * neighbouring band too, and so does one within `edgePx` of it, where a bar's
+ * clip strip stands. A point passes its `insetPx`; a bar passes its `origin`,
+ * and its window opens away from the origin on the cursor's side, or both
+ * ways where the radius reaches the origin, which every bar stands on.
+ */
+export function valueWindow(yPx, radiusPx, { canvasHeight }, scale) {
+    const { domain, insetPx = 0, edgePx = 0, origin } = scale;
+    const { valueScaleType, valueSymlogConstant } = valueScaleUniforms(scale);
+    const height = scale.rowHeight ?? canvasHeight;
+    const offset = scale.rowOffsetPx ?? 0;
+    const inset = Math.min(insetPx, height / 2);
+    const bands = height > 0 ? Math.ceil((canvasHeight - offset) / height) : 1;
+    const bandAt = (y) => bands > 1
+        ? Math.max(0, Math.min(bands - 1, Math.floor((y - offset) / height)))
+        : 0;
+    const lastBand = bandAt(yPx + radiusPx);
+    let valueMin = Infinity;
+    let valueMax = -Infinity;
+    for (let b = bandAt(yPx - radiusPx); b <= lastBand; b++) {
+        const top = offset + b * height;
+        const valueAt = (y) => denormalizeScore(1 - (y - top - inset) / (height - 2 * inset), domain[0], domain[1], valueScaleType, valueSymlogConstant);
+        const lo = yPx + radiusPx >= top + height - inset - edgePx
+            ? -Infinity
+            : valueAt(yPx + radiusPx);
+        const hi = yPx - radiusPx <= top + inset + edgePx
+            ? Infinity
+            : valueAt(yPx - radiusPx);
+        const [bandMin, bandMax] = origin === undefined
+            ? [lo, hi]
+            : lo > origin
+                ? [lo, Infinity]
+                : hi < origin
+                    ? [-Infinity, hi]
+                    : [-Infinity, Infinity];
+        valueMin = Math.min(valueMin, bandMin);
+        valueMax = Math.max(valueMax, bandMax);
+    }
+    return [valueMin, valueMax];
+}

package/esm/marks/pathRecorder.d.ts

@@ -0,0 +1,14 @@
+import type { MarkContext2D } from './types.ts';
+/**
+ * A 2D context that records what a painter traces as one SVG path, with the
+ * widest stroke and the dash it stroked with, so a highlight lies on the ink a
+ * shape painted rather than on a second tracing of it. Transforms are not
+ * followed; a painter that sets one records untransformed.
+ */
+export declare function recordPath(): {
+    ctx: MarkContext2D;
+    readonly d: string;
+    /** The widest stroke traced, 0 for a shape that only fills. */
+    readonly lineWidth: number;
+    readonly dash: string | undefined;
+};

package/esm/marks/pathRecorder.js

@@ -0,0 +1,80 @@
+const ELLIPSE_SEGMENTS = 48;
+/**
+ * A 2D context that records what a painter traces as one SVG path, with the
+ * widest stroke and the dash it stroked with, so a highlight lies on the ink a
+ * shape painted rather than on a second tracing of it. Transforms are not
+ * followed; a painter that sets one records untransformed.
+ */
+export function recordPath() {
+    const parts = [];
+    let dash = [];
+    let strokedDash = [];
+    let strokedWidth = 0;
+    const ctx = {
+        fillStyle: '',
+        strokeStyle: '',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        save() { },
+        restore() { },
+        clip() { },
+        beginPath() { },
+        translate() { },
+        scale() { },
+        rotate() { },
+        rect(x, y, w, h) {
+            parts.push(`M${x} ${y}h${w}v${h}h${-w}Z`);
+        },
+        fillRect(x, y, w, h) {
+            this.rect(x, y, w, h);
+        },
+        strokeRect(x, y, w, h) {
+            this.rect(x, y, w, h);
+        },
+        moveTo(x, y) {
+            parts.push(`M${x} ${y}`);
+        },
+        lineTo(x, y) {
+            parts.push(`L${x} ${y}`);
+        },
+        bezierCurveTo(c1x, c1y, c2x, c2y, x, y) {
+            parts.push(`C${c1x} ${c1y} ${c2x} ${c2y} ${x} ${y}`);
+        },
+        arc(x, y, r, start, end) {
+            this.ellipse(x, y, r, r, 0, start, end);
+        },
+        ellipse(x, y, rx, ry, _rotation, start, end) {
+            for (let k = 0; k <= ELLIPSE_SEGMENTS; k++) {
+                const a = start + ((end - start) * k) / ELLIPSE_SEGMENTS;
+                parts.push(`L${x + rx * Math.cos(a)} ${y + ry * Math.sin(a)}`);
+            }
+        },
+        setLineDash(segments) {
+            dash = segments;
+        },
+        closePath() {
+            parts.push('Z');
+        },
+        fill() { },
+        stroke() {
+            strokedWidth = Math.max(strokedWidth, this.lineWidth);
+            if (dash.length > 0) {
+                strokedDash = dash;
+            }
+        },
+    };
+    return {
+        ctx,
+        get d() {
+            return parts.join('');
+        },
+        /** The widest stroke traced, 0 for a shape that only fills. */
+        get lineWidth() {
+            return strokedWidth;
+        },
+        get dash() {
+            return strokedDash.length > 0 ? strokedDash.join(' ') : undefined;
+        },
+    };
+}

package/esm/marks/pointMark.d.ts

@@ -0,0 +1,42 @@
+import type { BlockClipResult } from '../blockClipUtils.ts';
+import type { RenderBlock } from '../renderBlock.ts';
+import type { ColorChannel } from './markRamp.ts';
+import type { RowChannel, RowParams } from './rowLane.ts';
+import type { MarkFrame, MarkColorScale, MarkShape } from './types.ts';
+import type { MarkValueScale } from './valueScale.ts';
+/**
+ * The `point` shape's channels: a glyph per instance at the centre of
+ * `x`..`x2`, on the `y` scale.
+ */
+export interface PointChannels extends ColorChannel, RowChannel {
+    x: Uint32Array;
+    x2: Uint32Array;
+    y: Float32Array;
+    glyph: Uint8Array;
+    count: number;
+}
+/** What the point and rule shapes share: a value scale, rows and a colour scale. */
+export interface ValuedMarkParams extends RowParams, MarkValueScale {
+    /** The quantitative colour scale, for a mark whose colour is a ramp or a threshold. */
+    colorScale?: MarkColorScale;
+    /**
+     * How far inside the plot the value range ends, so a mark at a domain
+     * endpoint draws whole — `glyphPaint`'s `pointInsetPx`, and the same number
+     * the display's axis takes as its offset. Absent centres it on the edge.
+     */
+    insetPx?: number;
+}
+export interface PointParams extends ValuedMarkParams {
+    /** Glyph diameter in CSS px. */
+    diameterPx: number;
+}
+/**
+ * The point shader's uniforms, which the rule shape draws through too:
+ * `radiusPx` is half a glyph or half a rule's thickness.
+ */
+export declare function writePointUniforms(scratch: ArrayBuffer, clip: BlockClipResult, block: RenderBlock, frame: MarkFrame, params: ValuedMarkParams, shape: {
+    radiusPx: number;
+    rule: boolean;
+    minWidthPx: number;
+}): void;
+export declare const pointMark: MarkShape<PointChannels, PointParams>;

package/esm/marks/pointMark.js

@@ -0,0 +1,125 @@
+import { bpRangeXTuple } from '../blockClipUtils.js';
+import { CappedPath, getDpr, makeBpMapper } 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 { abgrToCssRgba } from './colorFill.js';
+import { appendGlyph, glyphBox } from './glyphPaint.js';
+import { inkAtPoint, nearestInk } from './markHit.js';
+import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { valueWindow } from './nearestMarkHit.js';
+import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
+import { valueScaleUniforms } from './valueScale.js';
+/**
+ * The point shader's uniforms, which the rule shape draws through too:
+ * `radiusPx` is half a glyph or half a rule's thickness.
+ */
+export function writePointUniforms(scratch, clip, block, frame, params, shape) {
+    shader.writeUniforms(scratch, {
+        bpRangeX: bpRangeXTuple(clip, block.reversed),
+        canvasHeight: frame.canvasHeight,
+        domainMin: params.domain[0],
+        domainMax: params.domain[1],
+        ...valueScaleUniforms(params),
+        ...rampUniforms(params.colorScale),
+        zero: 0,
+        // viewportWidth and radiusPx stay in CSS units to match canvasHeight:
+        // mixing a DPR-scaled radius with a CSS-scaled height draws vertically
+        // stretched ellipses on hi-DPI.
+        viewportWidth: clip.scissorW,
+        radiusPx: shape.radiusPx,
+        rowHeight: bandHeightPx(params, frame.canvasHeight),
+        rowOffsetPx: params.rowOffsetPx ?? 0,
+        reverse: params.reverse ? 1 : 0,
+        insetPx: params.insetPx ?? 0,
+        devicePixelRatio: getDpr(),
+        rowTableKeys: rowTableKeys(params),
+        rule: shape.rule ? 1 : 0,
+        minWidthPx: shape.minWidthPx,
+    });
+}
+export const pointMark = {
+    id: 'point',
+    pass: {
+        ...slangPass({ id: 'point', mod: shader }),
+        pack: c => shader.packInstances({ ...c, color: colorBits(c, c.count), row: rowLane(c.row, c.count) }, c.count),
+    },
+    writeUniforms(scratch, clip, block, frame, params) {
+        writePointUniforms(scratch, clip, block, frame, params, {
+            radiusPx: params.diameterPx / 2,
+            rule: false,
+            minWidthPx: 0,
+        });
+    },
+    textures: rowTableTextures,
+    paintBlock(ctx, channels, block, frame, params) {
+        const { x, x2, y, glyph, row, count } = channels;
+        if (count === 0) {
+            return;
+        }
+        const color = paintColors(channels, count, params.colorScale);
+        const { diameterPx, domain, insetPx = 0, rowOffsetPx: top = 0, rowTable: table, } = params;
+        const reverse = params.reverse ? 1 : 0;
+        const band = bandHeightPx(params, frame.canvasHeight);
+        const domainMin = domain[0];
+        const domainMax = domain[1];
+        const { valueScaleType: st, valueSymlogConstant: c } = valueScaleUniforms(params);
+        const bpToPx = makeBpMapper(block);
+        let current = color[0];
+        ctx.fillStyle = abgrToCssRgba(current);
+        const path = new CappedPath(ctx, 'fill');
+        for (let i = 0; i < count; i++) {
+            const slot = rowSlot(row, i, table);
+            if (slot === undefined) {
+                continue;
+            }
+            const abgr = rowColor(color[i], row, i, table);
+            if (abgr !== current) {
+                path.flush();
+                current = abgr;
+                ctx.fillStyle = abgrToCssRgba(abgr);
+            }
+            path.add();
+            const yPx = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y[i], domainMin, domainMax, band, st, insetPx, c));
+            appendGlyph(ctx, glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, yPx, diameterPx);
+        }
+        path.flush();
+    },
+    // The box `appendGlyph` paints inside.
+    ink(channels, block, frame, params, i) {
+        const { x, x2, y, glyph, row } = channels;
+        const slot = rowSlot(row, i, params.rowTable);
+        if (slot === undefined) {
+            return undefined;
+        }
+        const { diameterPx, domain, insetPx = 0 } = params;
+        const bpToPx = makeBpMapper(block);
+        const band = bandHeightPx(params, frame.canvasHeight);
+        const { valueScaleType: st, valueSymlogConstant: c } = valueScaleUniforms(params);
+        const cy = pointRowYPx(rowBandTopPx(params.rowOffsetPx ?? 0, band, slot), band, params.reverse ? 1 : 0, pointYPx(y[i], domain[0], domain[1], band, st, insetPx, c));
+        return glyphBox(glyph[i], (bpToPx(x[i]) + bpToPx(x2[i])) / 2, cy, diameterPx);
+    },
+    // Its own rather than the one `ink` implies: a dense plot stacks glyphs
+    // whose boxes all contain the cursor at distance 0, and the one under the
+    // cursor is the nearest CENTRE, which no box can say.
+    hitNearest(channels, block, frame, params, xPx, yPx, candidates, maxDistSq) {
+        const { x, x2, y, row } = channels;
+        const bpToPx = makeBpMapper(block);
+        const { domain, insetPx = 0, rowOffsetPx: top = 0, rowTable: table, } = params;
+        const reverse = params.reverse ? 1 : 0;
+        const domainMin = domain[0];
+        const domainMax = domain[1];
+        const band = bandHeightPx(params, frame.canvasHeight);
+        const { valueScaleType: st, valueSymlogConstant: c } = valueScaleUniforms(params);
+        return nearestInk(candidates, maxDistSq, i => {
+            const slot = rowSlot(row, i, table);
+            if (slot === undefined) {
+                return undefined;
+            }
+            const cy = pointRowYPx(rowBandTopPx(top, band, slot), band, reverse, pointYPx(y[i], domainMin, domainMax, band, st, insetPx, c));
+            return inkAtPoint(xPx, yPx, (bpToPx(x[i]) + bpToPx(x2[i])) / 2, cy);
+        });
+    },
+    valueWindow,
+};