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

package/esm/marks/index.d.ts

@@ -0,0 +1,33 @@
+export { defineMark, withPassId } from './types.ts';
+export { paintMarkBlocks } from './markPaint.ts';
+export { planMarks } from './markPlan.ts';
+export { inkOfInstances, shiftInk } from './markInk.ts';
+export { backToFront, nearestMarkHit, valueWindow } from './nearestMarkHit.ts';
+export { barMark } from './barMark.ts';
+export { pointMark } from './pointMark.ts';
+export { ruleMark } from './ruleMark.ts';
+export { spanMark } from './spanMark.ts';
+export { lineCenterMark, lineMarkOf, lineStepMark } from './lineMark.ts';
+export { linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.ts';
+export { ellipseDistance, ellipseNearest } from './ellipseDistance.ts';
+export { appendGlyph, pointInsetPx } from './glyphPaint.ts';
+export { recordPath } from './pathRecorder.ts';
+export { abgrToCssRgba, makeAbgrFill } from './colorFill.ts';
+export { RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, } from '../shaders/markColor.generated.ts';
+export { instanceColor, isThreshold, keepRampValues, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.ts';
+export { HIDDEN_ROW, NO_ROW_COLOR, RowKeys, buildRowTable } from './rowTable.ts';
+export { keySlot, rowColor, rowSlot } from './rowLane.ts';
+export { rowSpanIndex, spansInRow } from './rowSpanIndex.ts';
+export type { MarkPlan } from './markPlan.ts';
+export type { MarkInstance } from './markInk.ts';
+export type { HitWindow, NearestMarkHit } from './nearestMarkHit.ts';
+export type { Mark, MarkBand, MarkContext2D, MarkFrame, MarkImage, MarkColorScale, MarkRamp, MarkTexels, MarkThreshold, MarkTexture, MarkValueScaleType, InkRect, MarkHit, MarkShape, PlannedPass, StagedUniforms, TextureBinder, } from './types.ts';
+export type { BarChannels, BarParams } from './barMark.ts';
+export type { PointChannels, PointParams } from './pointMark.ts';
+export type { RuleChannels, RuleParams } from './ruleMark.ts';
+export type { SpanChannels, SpanParams } from './spanMark.ts';
+export type { LineChannels, LineInterpolate, LineParams } from './lineMark.ts';
+export type { LinkChannels, LinkParams, LinkRegion, LinkSizeScale, } from './linkMark.ts';
+export type { RowTable } from './rowTable.ts';
+export type { RowSpanIndex } from './rowSpanIndex.ts';
+export type { ColorChannel } from './markRamp.ts';

package/esm/marks/index.js

@@ -0,0 +1,20 @@
+export { defineMark, withPassId } from './types.js';
+export { paintMarkBlocks } from './markPaint.js';
+export { planMarks } from './markPlan.js';
+export { inkOfInstances, shiftInk } from './markInk.js';
+export { backToFront, nearestMarkHit, valueWindow } from './nearestMarkHit.js';
+export { barMark } from './barMark.js';
+export { pointMark } from './pointMark.js';
+export { ruleMark } from './ruleMark.js';
+export { spanMark } from './spanMark.js';
+export { lineCenterMark, lineMarkOf, lineStepMark } from './lineMark.js';
+export { linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.js';
+export { ellipseDistance, ellipseNearest } from './ellipseDistance.js';
+export { appendGlyph, pointInsetPx } from './glyphPaint.js';
+export { recordPath } from './pathRecorder.js';
+export { abgrToCssRgba, makeAbgrFill } from './colorFill.js';
+export { RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, } from '../shaders/markColor.generated.js';
+export { instanceColor, isThreshold, keepRampValues, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.js';
+export { HIDDEN_ROW, NO_ROW_COLOR, RowKeys, buildRowTable } from './rowTable.js';
+export { keySlot, rowColor, rowSlot } from './rowLane.js';
+export { rowSpanIndex, spansInRow } from './rowSpanIndex.js';

package/esm/marks/lineMark.d.ts

@@ -0,0 +1,37 @@
+import type { ColorChannel } from './markRamp.ts';
+import type { RowChannel, RowParams } from './rowLane.ts';
+import type { MarkColorScale, MarkShape } from './types.ts';
+import type { MarkValueScale } from './valueScale.ts';
+/**
+ * The `line` shape's channels: a stroke through consecutive instances of one
+ * row, in the order given, each instance a span from `x` to `x2` at `y` on the
+ * value scale. `gapBp` is the linear variant's break: a midpoint further than
+ * that from the previous one on its row starts a new run. It rides with the
+ * data, as the neighbour fields the packer derives from it do, so both
+ * backends break in the same place; absent, a row is one run.
+ */
+export interface LineChannels extends ColorChannel, RowChannel {
+    x: Uint32Array;
+    x2: Uint32Array;
+    y: Float32Array;
+    gapBp?: number;
+    count: number;
+}
+export interface LineParams extends RowParams, MarkValueScale {
+    /** The quantitative colour scale, for a line whose colour is a ramp or a threshold. */
+    colorScale?: MarkColorScale;
+    /** The value a step drops to across a gap. */
+    origin: number;
+    /** Stroke width in CSS px. */
+    lineWidth: number;
+    /** CSS px each row's value scale runs over; the row's own height when absent. */
+    rowBandPx?: number;
+}
+/** `step` holds each value across its span; `linear` joins the spans' midpoints. */
+export type LineInterpolate = 'step' | 'linear';
+/** The step variant: three square-capped quads an instance, flat filled. */
+export declare const lineStepMark: MarkShape<LineChannels, LineParams>;
+/** The linear variant: one round-capped capsule an instance, max blended. */
+export declare const lineCenterMark: MarkShape<LineChannels, LineParams>;
+/** The shape a line's `interpolate` draws with. */
+export declare function lineMarkOf(interpolate: LineInterpolate): MarkShape<LineChannels, LineParams>;

package/esm/marks/lineMark.js

@@ -0,0 +1,416 @@
+import { bpRangeXTuple } from '../blockClipUtils.js';
+import { CappedPath, getDpr, makeBpMapper } from '../canvas2dUtils.js';
+import * as centerShader from '../shaders/lineCenterMark.generated.js';
+import { GAP_Y, NO_PREV_X } from '../shaders/lineCommon.generated.js';
+import * as stepShader from '../shaders/lineStepMark.generated.js';
+import { valueToYPxScaled } from '../shaders/pointMark.js.generated.js';
+import { rowBandTopPx } from '../shaders/rowTable.js.generated.js';
+import { normalizeScoreUnclamped } from '../shaders/scoreScale.js.generated.js';
+import { slangPass } from '../slangPass.js';
+import { abgrToCssRgba } from './colorFill.js';
+import { colorBits, isThreshold, paintColors, rampUniforms, } from './markRamp.js';
+import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
+import { valueScaleUniforms } from './valueScale.js';
+const NO_GAP = Number.POSITIVE_INFINITY;
+function sameRow(row, a, b) {
+    return row[a] === row[b];
+}
+// Whether instance `i` abuts the one before it on its row, so the step joins
+// them at a shared corner.
+function abutsBefore(c, row, i) {
+    return i > 0 && sameRow(row, i - 1, i) && c.x2[i - 1] === c.x[i];
+}
+// Whether the linear variant links instance `i` to the one before it: the same
+// row, within `gapBp` midpoint to midpoint.
+function linksBefore(c, row, i) {
+    if (i === 0 || !sameRow(row, i - 1, i)) {
+        return false;
+    }
+    const gapBp = c.gapBp ?? NO_GAP;
+    return (c.x[i] + c.x2[i]) / 2 - (c.x[i - 1] + c.x2[i - 1]) / 2 <= gapBp;
+}
+function packStep(c) {
+    const { x, x2, y, count } = c;
+    const row = rowLane(c.row, count);
+    const prevY = new Float32Array(count);
+    const nextY = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+        prevY[i] = abutsBefore(c, row, i) ? y[i - 1] : GAP_Y;
+        // a joined next collapses the third quad onto the corner the next
+        // instance's first quad draws, so the seam is stroked once
+        nextY[i] = i < count - 1 && abutsBefore(c, row, i + 1) ? y[i] : GAP_Y;
+    }
+    return stepShader.packInstances({ x, x2, y, color: colorBits(c, count), row, prevY, nextY }, count);
+}
+function packCenter(c) {
+    const { x, x2, y, count } = c;
+    const row = rowLane(c.row, count);
+    const prevX = new Uint32Array(count);
+    const prevX2 = new Uint32Array(count);
+    const prevY = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+        const linked = linksBefore(c, row, i);
+        prevX[i] = linked ? x[i - 1] : NO_PREV_X;
+        prevX2[i] = linked ? x2[i - 1] : 0;
+        prevY[i] = linked ? y[i - 1] : 0;
+    }
+    return centerShader.packInstances({ x, x2, y, color: colorBits(c, count), row, prevX, prevX2, prevY }, count);
+}
+// The two modules share `lineCommon`'s uniform block, so either writer serves.
+function writeLineUniforms(scratch, clip, block, frame, params) {
+    const rowHeight = bandHeightPx(params, frame.canvasHeight);
+    stepShader.writeUniforms(scratch, {
+        bpRangeX: bpRangeXTuple(clip, block.reversed),
+        canvasHeight: frame.canvasHeight,
+        domainMin: params.domain[0],
+        domainMax: params.domain[1],
+        ...valueScaleUniforms(params),
+        ...rampUniforms(params.colorScale),
+        rowHeight,
+        rowBandPx: params.rowBandPx ?? rowHeight,
+        rowOffsetPx: params.rowOffsetPx ?? 0,
+        origin: params.origin,
+        lineWidth: params.lineWidth,
+        zero: 0,
+        viewportWidth: clip.scissorW,
+        devicePixelRatio: getDpr(),
+        rowTableKeys: rowTableKeys(params),
+    });
+}
+function lineFrame(block, frame, params) {
+    const pitch = bandHeightPx(params, frame.canvasHeight);
+    const { valueScaleType, valueSymlogConstant } = valueScaleUniforms(params);
+    return {
+        bpToPx: makeBpMapper(block),
+        pitch,
+        band: params.rowBandPx ?? pitch,
+        rowOffsetPx: params.rowOffsetPx ?? 0,
+        domainMin: params.domain[0],
+        domainMax: params.domain[1],
+        scaleType: valueScaleType,
+        symlogConstant: valueSymlogConstant,
+        table: params.rowTable,
+    };
+}
+function valueYPx(g, value, slot) {
+    return (rowBandTopPx(g.rowOffsetPx, g.pitch, slot) +
+        valueToYPxScaled(value, g.domainMin, g.domainMax, g.band, g.scaleType, g.symlogConstant));
+}
+// A value's y in the band for the colour test, placed UNCLAMPED where
+// `valueYPx` clamps it to draw: the cuts go through it, and so does the line a
+// threshold colours along, as the shader's `lineColorYPx` does.
+function colorYPx(g, value, slot) {
+    const norm = normalizeScoreUnclamped(value, g.domainMin, g.domainMax, g.scaleType, g.symlogConstant);
+    return rowBandTopPx(g.rowOffsetPx, g.pitch, slot) + (1 - norm) * g.band;
+}
+// One colour per instance: a change ends the stroke batch and reopens it from
+// the pen, so a segment carries the colour of the instance it belongs to, as
+// the shader's per-instance colour does.
+class InstancePen {
+    ctx;
+    colorOf;
+    lastAbgr = -1;
+    x = 0;
+    y = 0;
+    inRun = false;
+    constructor(ctx, colorOf) {
+        this.ctx = ctx;
+        this.colorOf = colorOf;
+        ctx.beginPath();
+    }
+    instance(i) {
+        const abgr = this.colorOf(i);
+        if (abgr === this.lastAbgr) {
+            return;
+        }
+        this.ctx.stroke();
+        this.ctx.beginPath();
+        if (this.inRun) {
+            this.ctx.moveTo(this.x, this.y);
+        }
+        this.ctx.strokeStyle = abgrToCssRgba(abgr);
+        this.lastAbgr = abgr;
+    }
+    moveTo(x, y) {
+        this.ctx.moveTo(x, y);
+        this.x = x;
+        this.y = y;
+        this.inRun = true;
+    }
+    lineTo(x, y) {
+        this.ctx.lineTo(x, y);
+        this.x = x;
+        this.y = y;
+    }
+    recolor() { }
+    endRun() {
+        this.inRun = false;
+    }
+    end() {
+        this.ctx.stroke();
+    }
+}
+// The part of the segment from y0 to y1, as a fraction of it, inside the band
+// top < y <= bottom; undefined where it misses. A band owns its lower edge,
+// so a line lying on a cut takes the colour above it, as the shader does.
+function bandSpan(y0, y1, top, bottom) {
+    if (y0 === y1) {
+        return top < y0 && y0 <= bottom ? [0, 1] : undefined;
+    }
+    const tTop = (top - y0) / (y1 - y0);
+    const tBottom = (bottom - y0) / (y1 - y0);
+    const t0 = Math.max(0, Math.min(tTop, tBottom));
+    const t1 = Math.min(1, Math.max(tTop, tBottom));
+    return t0 < t1 || (t0 === t1 && y0 + (y1 - y0) * t0 !== top)
+        ? [t0, t1]
+        : undefined;
+}
+// Keeps the part of each segment inside one threshold band, cut where it
+// crosses the band's edges, so a line stroked once per band changes colour
+// where the shader's fragments do. A point's colour y is where the band test
+// reads it and its y where it draws, which part where the drawn y is clamped.
+class BandPen {
+    ctx;
+    top;
+    bottom;
+    x = 0;
+    y = 0;
+    colorY = 0;
+    drawing = false;
+    path;
+    constructor(ctx, top, bottom) {
+        this.ctx = ctx;
+        this.top = top;
+        this.bottom = bottom;
+        this.path = new CappedPath(ctx, 'stroke');
+    }
+    instance() { }
+    moveTo(x, y, colorY = y) {
+        this.x = x;
+        this.y = y;
+        this.colorY = colorY;
+        this.drawing = false;
+    }
+    recolor(colorY) {
+        this.colorY = colorY;
+    }
+    lineTo(x, y, colorY = y) {
+        const span = bandSpan(this.colorY, colorY, this.top, this.bottom);
+        if (span) {
+            const [t0, t1] = span;
+            if (this.path.add()) {
+                this.drawing = false;
+            }
+            if (!this.drawing || t0 > 0) {
+                this.ctx.moveTo(this.x + (x - this.x) * t0, this.y + (y - this.y) * t0);
+            }
+            if (t0 < t1 || (t0 === 0 && t1 === 1)) {
+                this.ctx.lineTo(this.x + (x - this.x) * t1, this.y + (y - this.y) * t1);
+            }
+            this.drawing = t1 === 1;
+        }
+        else {
+            this.drawing = false;
+        }
+        this.x = x;
+        this.y = y;
+        this.colorY = colorY;
+    }
+    endRun() {
+        this.drawing = false;
+    }
+    end() {
+        this.path.flush();
+    }
+}
+// The step polyline over `indices`, in order: a rise from the origin, the top
+// across the span, the step at each joint and a drop to the origin at a gap.
+// A rise is coloured along the y it is drawn at, a level run by its value's
+// colour y, as the shader reads them.
+function traceStep(pen, c, g, rows, indices, origin) {
+    const { x, x2, y, row, count } = c;
+    let inRun = false;
+    for (const i of indices) {
+        const slot = rowSlot(row, i, g.table);
+        if (slot === undefined) {
+            if (inRun) {
+                pen.endRun();
+                inRun = false;
+            }
+            continue;
+        }
+        pen.instance(i);
+        const x1 = g.bpToPx(x[i]);
+        const xb = g.bpToPx(x2[i]);
+        const top = valueYPx(g, y[i], slot);
+        const originY = valueYPx(g, origin, slot);
+        const colorTop = colorYPx(g, y[i], slot);
+        if (!inRun) {
+            pen.moveTo(x1, originY);
+            inRun = true;
+        }
+        pen.lineTo(x1, top);
+        pen.recolor(colorTop);
+        pen.lineTo(xb, top, colorTop);
+        pen.recolor(top);
+        if (!(i < count - 1 && abutsBefore(c, rows, i + 1))) {
+            pen.lineTo(xb, originY);
+            pen.endRun();
+            inRun = false;
+        }
+    }
+}
+// The linear polyline over `indices`: one run per stretch of linked midpoints
+// on a row, a break opening a new subpath with a zero-length segment, which
+// paints the dot the shader's collapsed capsule draws.
+function traceCenter(pen, c, g, rows, indices) {
+    const { x, x2, y, row } = c;
+    for (const i of indices) {
+        const slot = rowSlot(row, i, g.table);
+        if (slot === undefined) {
+            continue;
+        }
+        pen.instance(i);
+        const cx = (g.bpToPx(x[i]) + g.bpToPx(x2[i])) / 2;
+        const cy = valueYPx(g, y[i], slot);
+        const colorY = colorYPx(g, y[i], slot);
+        const linked = linksBefore(c, rows, i) && rowSlot(row, i - 1, g.table) !== undefined;
+        if (!linked) {
+            pen.moveTo(cx, cy, colorY);
+        }
+        pen.lineTo(cx, cy, colorY);
+    }
+}
+// Under a threshold the line is stroked once per band per row, each pass
+// keeping the parts of the polyline inside its band; otherwise once, in each
+// instance's own colour.
+function paintLine(ctx, c, g, params, trace) {
+    const { row, count } = c;
+    const scale = params.colorScale;
+    if (scale && isThreshold(scale) && c.colorValue) {
+        const bySlot = new Map();
+        for (let i = 0; i < count; i++) {
+            const slot = rowSlot(row, i, g.table);
+            if (slot !== undefined) {
+                const held = bySlot.get(slot);
+                if (held) {
+                    held.push(i);
+                }
+                else {
+                    bySlot.set(slot, [i]);
+                }
+            }
+        }
+        const { cuts, colors } = scale;
+        for (const [slot, indices] of bySlot) {
+            const cutYs = cuts.map(cut => colorYPx(g, cut, slot));
+            for (let k = 0; k <= cuts.length; k++) {
+                ctx.strokeStyle = abgrToCssRgba(colors[k] ?? 0);
+                const pen = new BandPen(ctx, k < cuts.length ? cutYs[k] : Number.NEGATIVE_INFINITY, k > 0 ? cutYs[k - 1] : Number.POSITIVE_INFINITY);
+                trace(pen, indices);
+                pen.end();
+            }
+        }
+        return;
+    }
+    const color = paintColors(c, count, scale);
+    const pen = new InstancePen(ctx, i => rowColor(color[i], row, i, g.table));
+    trace(pen, Array.from({ length: count }, (_, i) => i));
+    pen.end();
+}
+function paintStep(ctx, c, block, frame, params) {
+    if (c.count === 0) {
+        return;
+    }
+    const g = lineFrame(block, frame, params);
+    const rows = rowLane(c.row, c.count);
+    ctx.lineWidth = params.lineWidth;
+    paintLine(ctx, c, g, params, (pen, indices) => {
+        traceStep(pen, c, g, rows, indices, params.origin);
+    });
+}
+function paintCenter(ctx, c, block, frame, params) {
+    if (c.count === 0) {
+        return;
+    }
+    const g = lineFrame(block, frame, params);
+    const rows = rowLane(c.row, c.count);
+    ctx.lineWidth = params.lineWidth;
+    // Round joins and caps match the GPU capsule so sharp bends do not nick.
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    paintLine(ctx, c, g, params, (pen, indices) => {
+        traceCenter(pen, c, g, rows, indices);
+    });
+}
+function box(x0, x1, y0, y1, half) {
+    const left = Math.min(x0, x1) - half;
+    const top = Math.min(y0, y1) - half;
+    return {
+        left,
+        top,
+        width: Math.max(x0, x1) + half - left,
+        height: Math.max(y0, y1) + half - top,
+    };
+}
+// The step's ink for one instance: its rise, its top and, where nothing abuts
+// it, its drop, each stroked `lineWidth` wide.
+function stepInk(c, block, frame, params, i) {
+    const { x, x2, y, row, count } = c;
+    const slot = rowSlot(row, i, params.rowTable);
+    if (slot === undefined) {
+        return undefined;
+    }
+    const g = lineFrame(block, frame, params);
+    const rows = rowLane(row, count);
+    const top = valueYPx(g, y[i], slot);
+    const originY = valueYPx(g, params.origin, slot);
+    const riseFrom = abutsBefore(c, rows, i)
+        ? valueYPx(g, y[i - 1], slot)
+        : originY;
+    const dropTo = i < count - 1 && abutsBefore(c, rows, i + 1) ? top : originY;
+    return box(g.bpToPx(x[i]), g.bpToPx(x2[i]), Math.min(top, riseFrom, dropTo), Math.max(top, riseFrom, dropTo), params.lineWidth / 2);
+}
+// The linear variant's ink for one instance: the segment from the previous
+// midpoint to its own, or its dot at a run start.
+function centerInk(c, block, frame, params, i) {
+    const { x, x2, y, row, count } = c;
+    const slot = rowSlot(row, i, params.rowTable);
+    if (slot === undefined) {
+        return undefined;
+    }
+    const g = lineFrame(block, frame, params);
+    const rows = rowLane(row, count);
+    const cx = (g.bpToPx(x[i]) + g.bpToPx(x2[i])) / 2;
+    const cy = valueYPx(g, y[i], slot);
+    const linked = linksBefore(c, rows, i) &&
+        rowSlot(row, i - 1, params.rowTable) !== undefined;
+    const px = linked ? (g.bpToPx(x[i - 1]) + g.bpToPx(x2[i - 1])) / 2 : cx;
+    const py = linked ? valueYPx(g, y[i - 1], slot) : cy;
+    return box(px, cx, py, cy, params.lineWidth / 2);
+}
+/** The step variant: three square-capped quads an instance, flat filled. */
+export const lineStepMark = {
+    id: 'lineStep',
+    pass: { ...slangPass({ id: 'lineStep', mod: stepShader }), pack: packStep },
+    writeUniforms: writeLineUniforms,
+    textures: rowTableTextures,
+    paintBlock: paintStep,
+    ink: stepInk,
+};
+/** The linear variant: one round-capped capsule an instance, max blended. */
+export const lineCenterMark = {
+    id: 'lineCenter',
+    pass: {
+        ...slangPass({ id: 'lineCenter', mod: centerShader }),
+        pack: packCenter,
+    },
+    writeUniforms: writeLineUniforms,
+    textures: rowTableTextures,
+    paintBlock: paintCenter,
+    ink: centerInk,
+};
+/** The shape a line's `interpolate` draws with. */
+export function lineMarkOf(interpolate) {
+    return interpolate === 'linear' ? lineCenterMark : lineStepMark;
+}

package/esm/marks/linkMark.d.ts

@@ -0,0 +1,76 @@
+import { LINK_ELSEWHERE, LINK_NO_REGION } from '../shaders/linkMark.consts.generated.ts';
+import type { ColorChannel } from './markRamp.ts';
+import type { RowChannel, RowParams } from './rowLane.ts';
+import type { MarkColorScale, MarkShape } from './types.ts';
+import type { MarkValueScale } from './valueScale.ts';
+/**
+ * The `link` shape's channels: a stroked curve from `x`, on the displayed
+ * region whose payload holds it, to `x2` on the displayed region `x2Region`
+ * names, {@link LINK_NO_REGION} where the far end lies on none and
+ * {@link LINK_ELSEWHERE} where another payload draws the curve. `y` is the
+ * apex's value on the band's scale where the mark names one, and `size` the
+ * raw value the stroke width reads through the size scale.
+ */
+export interface LinkChannels extends ColorChannel, RowChannel {
+    x: Uint32Array;
+    x2: Uint32Array;
+    x2Region: Uint32Array;
+    y?: Float32Array;
+    size?: Float32Array;
+    /**
+     * The breakend ticks each instance carries: two bits per foot, 1 pointing
+     * forward along the genome and 2 back, the `x` foot in the low pair.
+     */
+    feet?: Uint8Array;
+    count: number;
+}
+export declare const LINK_FOOT_FORWARD = 1;
+export declare const LINK_FOOT_REVERSE = 2;
+/** The `feet` lane's value for a tick at each foot, by genomic direction. */
+export declare function linkFeet(xDir: number, x2Dir: number): number;
+/**
+ * One displayed region as a foot places through it: the canvas px of an
+ * anchor bp chosen near the view, so a foot's offset from it stays inside
+ * float32 on the GPU, and the signed px per bp, negative on a reversed
+ * region.
+ */
+export interface LinkRegion {
+    anchorPx: number;
+    anchorBp: number;
+    signedPxPerBp: number;
+    /** The region's screen extent, which a foot stops at; unbounded when absent. */
+    leftPx?: number;
+    rightPx?: number;
+}
+export interface LinkSizeScale {
+    domain: [number, number];
+    scale: 'linear' | 'log';
+    range: [number, number];
+}
+export type LinkShape = 'dome' | 'arc' | 'line';
+export interface LinkParams extends RowParams, MarkValueScale {
+    /** The quantitative colour scale, for a link whose colour is a ramp or a threshold. */
+    colorScale?: MarkColorScale;
+    /** The view's displayed regions, indexed as `x2Region` and the block's own index are. */
+    regions: readonly LinkRegion[];
+    /**
+     * `dome` clamps the apex to the band; `arc` is a true semicircle; `line` is
+     * a straight segment at the apex height.
+     */
+    linkShape: LinkShape;
+    /** How far a stem rises from a foot whose mate lies on no displayed region. */
+    stemPx?: number;
+    /** A straight segment's `[dash, gap]` in CSS px, starting on a dash. */
+    strokeDash?: readonly [number, number];
+    /** How long a breakend foot runs where its region has the room. */
+    footPx?: number;
+    /** Whether the mark names a `y`, which then places the apex. */
+    valued: boolean;
+    /** The stroke width where no `size` channel is read. */
+    sizePx: number;
+    sizeScale?: LinkSizeScale;
+    /** How far inside the band the value range ends, the axis's own. */
+    insetPx?: number;
+}
+export declare const linkMark: MarkShape<LinkChannels, LinkParams>;
+export { LINK_ELSEWHERE, LINK_NO_REGION };