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

package/esm/marks/linkMark.js

@@ -0,0 +1,585 @@
+import { getDpr } from '../canvas2dUtils.js';
+import { SCALE_TYPE_LOG } from '../scoreScale.js';
+import { distToWideCirclePx } from '../shaders/curveDistance.js.generated.js';
+import { LINK_CURVE_SEGMENTS, LINK_ELSEWHERE, LINK_FAR_SCREEN_WIDTHS, LINK_FOOT_PX, LINK_MAX_REGIONS, LINK_NO_REGION, LINK_NO_SIZE, LINK_LINE_MIN_PX, LINK_SHAPE_ARC, LINK_SHAPE_DOME, LINK_SHAPE_LINE, LINK_SIZE_CONSTANT, LINK_SIZE_SCALED, LINK_STEM_PX, } from '../shaders/linkMark.consts.generated.js';
+import * as shader from '../shaders/linkMark.generated.js';
+import { linkApexPx, linkBaseYPx, linkFootDir, linkFootLenPx, linkRadiiPx, linkStrokeWidthPx, linkValuePx, } from '../shaders/linkMark.js.generated.js';
+import { slangPass } from '../slangPass.js';
+import { abgrToCssRgba } from './colorFill.js';
+import { ellipseNearest } from './ellipseDistance.js';
+import { nearestInk } from './markHit.js';
+import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
+import { valueScaleUniforms } from './valueScale.js';
+export const LINK_FOOT_FORWARD = 1;
+export const LINK_FOOT_REVERSE = 2;
+/** The `feet` lane's value for a tick at each foot, by genomic direction. */
+export function linkFeet(xDir, x2Dir) {
+    const bits = (d) => d > 0 ? LINK_FOOT_FORWARD : d < 0 ? LINK_FOOT_REVERSE : 0;
+    return bits(xDir) | (bits(x2Dir) << 2);
+}
+const KIND_ELLIPSE = 0;
+const KIND_CIRCLE = 1;
+const KIND_STEM = 2;
+const KIND_NONE = 3;
+const KIND_LINE = 4;
+// The painter's leg polyline: enough segments that the chord sagitta on any
+// leg the band can show is under a pixel.
+const LEG_SEGMENTS = 32;
+function linkFrame(block, frame, params) {
+    const band = bandHeightPx(params, frame.canvasHeight);
+    const { valueScaleType, valueSymlogConstant } = valueScaleUniforms(params);
+    const { sizeScale } = params;
+    return {
+        band,
+        rowOffsetPx: params.rowOffsetPx ?? 0,
+        table: params.rowTable,
+        reverse: params.reverse ? 1 : 0,
+        ySign: params.reverse ? -1 : 1,
+        stemPx: params.stemPx ?? LINK_STEM_PX,
+        reach: Math.max(band - (params.insetPx ?? 0), 0),
+        screenW: frame.canvasWidth,
+        regions: params.regions,
+        own: block.displayedRegionIndex,
+        dpr: getDpr(),
+        scaleType: valueScaleType,
+        symlogConstant: valueSymlogConstant,
+        domainMin: params.domain[0],
+        domainMax: params.domain[1],
+        insetPx: params.insetPx ?? 0,
+        shape: linkShapeCode(params.linkShape),
+        valued: params.valued ? 1 : 0,
+        sizeMode: sizeScale ? LINK_SIZE_SCALED : LINK_SIZE_CONSTANT,
+        sizePx: params.sizePx,
+        sizeDomainMin: sizeScale?.domain[0] ?? 0,
+        sizeDomainMax: sizeScale?.domain[1] ?? 1,
+        sizeScaleType: sizeScale?.scale === 'log' ? SCALE_TYPE_LOG : 0,
+        sizeRangeMin: sizeScale?.range[0] ?? params.sizePx,
+        sizeRangeMax: sizeScale?.range[1] ?? params.sizePx,
+        kind: KIND_STEM,
+        xPx: 0,
+        x2Px: 0,
+        baseY: 0,
+        rx: 0,
+        ry: 0,
+        legHeight: 0,
+        legSweep: 0,
+        strokePx: 0,
+        footPx: params.footPx ?? LINK_FOOT_PX,
+        xPadPx: Math.max(params.sizePx, sizeScale?.range[0] ?? 0, sizeScale?.range[1] ?? 0, 1.5 / getDpr()) /
+            2 +
+            LINK_LINE_MIN_PX / 2,
+        foot1Dir: 0,
+        foot1Len: 0,
+        foot2Dir: 0,
+        foot2Len: 0,
+    };
+}
+// A straight line's strip needs one segment; a curve's, the full count.
+function curveSegments(params) {
+    return params.linkShape === 'line' ? 1 : LINK_CURVE_SEGMENTS;
+}
+// The curve's strip, then the two feet's six vertices each.
+const FOOT_STRIP_VERTS = 12;
+function linkShapeCode(shape) {
+    return shape === 'arc'
+        ? LINK_SHAPE_ARC
+        : shape === 'line'
+            ? LINK_SHAPE_LINE
+            : LINK_SHAPE_DOME;
+}
+function regionPx(regions, index, bp) {
+    const r = regions[index];
+    return r.anchorPx + (bp - r.anchorBp) * r.signedPxPerBp;
+}
+// Whether instance `i`'s ink can reach [lo, hi] horizontally, off its two feet
+// alone: every shape's ink lies between them, padded by half the widest stroke,
+// a foot's length, and half a `line`'s shortest length. Two table lookups, so
+// a scan over tens of thousands of instances places only those it could hit.
+function reachesX(c, g, i, lo, hi) {
+    const region = c.x2Region[i];
+    if (region === LINK_ELSEWHERE) {
+        return false;
+    }
+    const x = regionPx(g.regions, g.own, c.x[i]);
+    const x2 = region < g.regions.length && region < LINK_MAX_REGIONS
+        ? regionPx(g.regions, region, c.x2[i])
+        : x;
+    const pad = g.xPadPx + (c.feet?.[i] ? g.footPx : 0);
+    return x2 > x
+        ? x2 + pad >= lo && x - pad <= hi
+        : x + pad >= lo && x2 - pad <= hi;
+}
+function sizeOf(c, i) {
+    const v = c.size?.[i];
+    return v !== undefined && Number.isFinite(v) ? v : LINK_NO_SIZE;
+}
+// A foot's tick through its own region: the genomic direction mirrored where
+// the region draws right to left, and held short of the region's edge.
+function footOn(region, x, genomicDir, footPx) {
+    const dir = genomicDir * Math.sign(region.signedPxPerBp);
+    const len = linkFootLenPx(x, dir, region.leftPx ?? -Infinity, region.rightPx ?? Infinity, footPx);
+    return dir !== 0 && len > 0 ? { dir, len } : { dir: 0, len: 0 };
+}
+function placeFeet(c, g, i) {
+    const feet = c.feet?.[i] ?? 0;
+    const placed = g.kind !== KIND_STEM && g.kind !== KIND_NONE;
+    const one = feet === 0 || g.kind === KIND_NONE
+        ? { dir: 0, len: 0 }
+        : footOn(g.regions[g.own], g.xPx, linkFootDir(feet, 0), g.footPx);
+    const two = feet === 0 || !placed
+        ? { dir: 0, len: 0 }
+        : footOn(g.regions[c.x2Region[i]], g.x2Px, linkFootDir(feet, 2), g.footPx);
+    g.foot1Dir = one.dir;
+    g.foot1Len = one.len;
+    g.foot2Dir = two.dir;
+    g.foot2Len = two.len;
+}
+function placeLink(c, g, i) {
+    placeCurve(c, g, i);
+    placeFeet(c, g, i);
+}
+function placeCurve(c, g, i) {
+    const slot = rowSlot(c.row, i, g.table);
+    if (slot === undefined) {
+        g.kind = KIND_NONE;
+        return;
+    }
+    const { regions } = g;
+    g.strokePx = linkStrokeWidthPx(sizeOf(c, i), g.sizeMode, g.sizePx, g.sizeDomainMin, g.sizeDomainMax, g.sizeScaleType, g.sizeRangeMin, g.sizeRangeMax, g.dpr);
+    g.baseY = linkBaseYPx(g.rowOffsetPx, g.band, slot, g.reverse);
+    g.xPx = regionPx(regions, g.own, c.x[i]);
+    const region = c.x2Region[i];
+    if (region === LINK_ELSEWHERE) {
+        g.kind = KIND_NONE;
+        return;
+    }
+    if (region >= regions.length || region >= LINK_MAX_REGIONS) {
+        g.kind = KIND_STEM;
+        g.x2Px = g.xPx;
+        g.rx = 0;
+        g.ry = g.stemPx;
+        return;
+    }
+    g.x2Px = regionPx(regions, region, c.x2[i]);
+    const pairHalf = Math.abs(g.x2Px - g.xPx) / 2;
+    const valuePx = linkValuePx(c.y ? c.y[i] : 0, g.domainMin, g.domainMax, g.band, g.scaleType, g.insetPx, g.symlogConstant);
+    const apex = linkApexPx(pairHalf, g.reach, g.shape, g.valued, valuePx);
+    if (g.shape === LINK_SHAPE_LINE) {
+        g.kind = KIND_LINE;
+        g.rx = Math.max(2 * pairHalf, LINK_LINE_MIN_PX);
+        g.ry = apex;
+        return;
+    }
+    const [rx, ry] = linkRadiiPx(pairHalf, apex, g.screenW);
+    g.rx = rx;
+    g.ry = ry;
+    if (2 * pairHalf > LINK_FAR_SCREEN_WIDTHS * g.screenW) {
+        g.kind = KIND_CIRCLE;
+        g.legSweep = Math.asin(Math.min(1, Math.max(0, (g.reach + g.strokePx / 2) / Math.max(rx, 1e-6))));
+        g.legHeight = rx * Math.sin(g.legSweep);
+    }
+    else {
+        g.kind = KIND_ELLIPSE;
+    }
+}
+function sizeLane(c) {
+    const lane = new Float32Array(c.count);
+    for (let i = 0; i < c.count; i++) {
+        lane[i] = sizeOf(c, i);
+    }
+    return lane;
+}
+const NO_VALUES = new Float32Array(0);
+const NO_FEET = new Uint8Array(0);
+// The region table the uniform writer takes, mutated in place per write so a
+// frame allocates nothing per block.
+const TABLE = Array.from({ length: LINK_MAX_REGIONS }, () => [0, 0, 0, 0]);
+function writeEntry(entry, { anchorPx, anchorBp, signedPxPerBp }) {
+    const lo = anchorBp % 4096;
+    entry[0] = anchorPx;
+    entry[1] = anchorBp - lo;
+    entry[2] = lo;
+    entry[3] = signedPxPerBp;
+    return entry;
+}
+const OWN = [0, 0, 0, 0];
+function tableEntry(region) {
+    return region ? writeEntry(OWN, region) : OWN.fill(0);
+}
+// Past float32's reach, so an unbounded edge never shortens a foot.
+const UNBOUNDED_PX = 1e30;
+const SPANS = Array.from({ length: LINK_MAX_REGIONS / 2 }, () => [0, 0, 0, 0]);
+const OWN_SPAN = [0, 0, 0, 0];
+function writeSpan(entry, at, region) {
+    entry[at] = region?.leftPx ?? -UNBOUNDED_PX;
+    entry[at + 1] = region?.rightPx ?? UNBOUNDED_PX;
+    return entry;
+}
+function fillTable(regions) {
+    const n = Math.min(regions.length, LINK_MAX_REGIONS);
+    for (let i = 0; i < n; i++) {
+        writeEntry(TABLE[i], regions[i]);
+        writeSpan(SPANS[i >> 1], (i & 1) === 0 ? 0 : 2, regions[i]);
+    }
+    return n;
+}
+// Canvas y of a point `up` px from the baseline on the drawn side.
+function yAt(g, up) {
+    return g.baseY - g.ySign * up;
+}
+function lineStart(g) {
+    return (g.xPx + g.x2Px) / 2 - g.rx / 2;
+}
+// The visible part of a far circle's leg rising from `footX`, in canvas px,
+// built from the foot outward with the half-angle identity as the shader
+// does, so a radius past 1e6 px cancels nothing.
+function legPoints(g, footX, legDir) {
+    const points = [];
+    for (let k = 0; k <= LEG_SEGMENTS; k++) {
+        const b = (k / LEG_SEGMENTS) * g.legSweep;
+        const sh = Math.sin(b / 2);
+        points.push({
+            x: footX + legDir * (-2 * g.rx * sh * sh),
+            y: yAt(g, Math.sin(b) * g.rx),
+        });
+    }
+    return points;
+}
+function tracePath(ctx, g) {
+    const { baseY } = g;
+    if (g.kind === KIND_STEM) {
+        ctx.moveTo(g.xPx, baseY);
+        ctx.lineTo(g.xPx, yAt(g, g.stemPx));
+        return;
+    }
+    if (g.kind === KIND_LINE) {
+        const x = lineStart(g);
+        const y = yAt(g, g.ry);
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + g.rx, y);
+        return;
+    }
+    const left = Math.min(g.xPx, g.x2Px);
+    const right = Math.max(g.xPx, g.x2Px);
+    if (g.kind === KIND_CIRCLE) {
+        for (const [footX, legDir] of [
+            [right, 1],
+            [left, -1],
+        ]) {
+            const points = legPoints(g, footX, legDir);
+            ctx.moveTo(points[0].x, points[0].y);
+            for (let k = 1; k < points.length; k++) {
+                ctx.lineTo(points[k].x, points[k].y);
+            }
+        }
+        return;
+    }
+    const mid = (left + right) / 2;
+    if (g.reverse) {
+        ctx.moveTo(mid + g.rx, baseY);
+        ctx.ellipse(mid, baseY, g.rx, g.ry, 0, 0, Math.PI);
+    }
+    else {
+        ctx.moveTo(mid - g.rx, baseY);
+        ctx.ellipse(mid, baseY, g.rx, g.ry, 0, Math.PI, 2 * Math.PI);
+    }
+}
+// The ticks, a half stroke inside the band so one on its edge draws whole.
+function footSegments(g) {
+    const y = yAt(g, g.strokePx / 2);
+    const segments = [];
+    if (g.foot1Len > 0) {
+        segments.push({ from: g.xPx, to: g.xPx + g.foot1Dir * g.foot1Len, y });
+    }
+    if (g.foot2Len > 0) {
+        segments.push({ from: g.x2Px, to: g.x2Px + g.foot2Dir * g.foot2Len, y });
+    }
+    return segments;
+}
+const svgNumber = (n) => Math.round(n * 100) / 100;
+// The curve and its feet as an SVG path, traced by the painter's own
+// `tracePath`. Every arc starts where the path already stands.
+function svgPathOf(g) {
+    const parts = [];
+    const point = (x, y) => `${svgNumber(x)} ${svgNumber(y)}`;
+    tracePath({
+        moveTo: (x, y) => parts.push(`M${point(x, y)}`),
+        lineTo: (x, y) => parts.push(`L${point(x, y)}`),
+        ellipse: (cx, cy, rx, ry, _rotation, from, to) => {
+            const large = Math.abs(to - from) > Math.PI ? 1 : 0;
+            const sweep = to > from ? 1 : 0;
+            const end = point(cx + rx * Math.cos(to), cy + ry * Math.sin(to));
+            parts.push(`A${svgNumber(rx)} ${svgNumber(ry)} 0 ${large} ${sweep} ${end}`);
+        },
+    }, g);
+    for (const { from, to, y } of footSegments(g)) {
+        parts.push(`M${point(from, y)}L${point(to, y)}`);
+    }
+    return parts.join('');
+}
+function footBox({ from, to, y }, half) {
+    const left = Math.min(from, to);
+    return {
+        left: left - half,
+        top: y - half,
+        width: Math.abs(to - from) + 2 * half,
+        height: 2 * half,
+    };
+}
+function union(a, b) {
+    const left = Math.min(a.left, b.left);
+    const top = Math.min(a.top, b.top);
+    return {
+        left,
+        top,
+        width: Math.max(a.left + a.width, b.left + b.width) - left,
+        height: Math.max(a.top + a.height, b.top + b.height) - top,
+    };
+}
+function dashes(g) {
+    return g.kind === KIND_LINE || g.kind === KIND_STEM;
+}
+// The box from the baseline to `rise` px off it, padded by `pad`.
+function riseBox(g, left, width, rise, pad) {
+    const top = g.reverse ? g.baseY - pad : g.baseY - rise - pad;
+    return { left, top, width, height: rise + 2 * pad };
+}
+function inkBox(g) {
+    const curve = curveBox(g);
+    const half = g.strokePx / 2;
+    return curve
+        ? footSegments(g).reduce((box, f) => union(box, footBox(f, half)), curve)
+        : undefined;
+}
+function curveBox(g) {
+    if (g.kind === KIND_NONE) {
+        return undefined;
+    }
+    const half = g.strokePx / 2;
+    if (g.kind === KIND_STEM) {
+        return riseBox(g, g.xPx - half, g.strokePx, g.stemPx, half);
+    }
+    if (g.kind === KIND_LINE) {
+        return {
+            left: lineStart(g) - half,
+            top: yAt(g, g.ry) - half,
+            width: g.rx + g.strokePx,
+            height: g.strokePx,
+        };
+    }
+    const left = Math.min(g.xPx, g.x2Px);
+    const right = Math.max(g.xPx, g.x2Px);
+    const rise = g.kind === KIND_CIRCLE ? g.legHeight : g.ry;
+    return riseBox(g, left - half, right - left + g.strokePx, rise, half);
+}
+// The nearest point of the drawn curve to (px, py), in canvas px, and how far
+// the cursor is from it. Measured with the curve rising above its baseline:
+// under a reversed scale the cursor is reflected there and the answer back.
+function nearestOnCurve(g, px, py) {
+    const flip = (y) => (g.reverse ? 2 * g.baseY - y : y);
+    const rising = nearestRising(g, px, flip(py));
+    let near = { ...rising, y: flip(rising.y) };
+    for (const { from, to, y } of footSegments(g)) {
+        const x = Math.min(Math.max(from, to), Math.max(Math.min(from, to), px));
+        const dist = Math.hypot(px - x, py - y);
+        if (dist < near.dist) {
+            near = { x, y, dist };
+        }
+    }
+    return near;
+}
+function nearestRising(g, px, py) {
+    const { baseY } = g;
+    if (g.kind === KIND_STEM) {
+        const y = Math.min(baseY, Math.max(baseY - g.stemPx, py));
+        return { x: g.xPx, y, dist: Math.hypot(px - g.xPx, py - y) };
+    }
+    if (g.kind === KIND_LINE) {
+        const start = lineStart(g);
+        const x = Math.min(start + g.rx, Math.max(start, px));
+        const y = baseY - g.ry;
+        return { x, y, dist: Math.hypot(px - x, py - y) };
+    }
+    const left = Math.min(g.xPx, g.x2Px);
+    const right = Math.max(g.xPx, g.x2Px);
+    if (g.kind === KIND_CIRCLE) {
+        let best;
+        for (const [footX, legDir] of [
+            [right, 1],
+            [left, -1],
+        ]) {
+            const dist = distToWideCirclePx((px - footX) * legDir, py - baseY, g.rx);
+            if (!best || dist < best.dist) {
+                // The nearest point of the whole circle, then held to the leg the
+                // painter drew: from the foot up to the band's reach.
+                const cx = footX - legDir * g.rx;
+                const vx = px - cx;
+                const vy = py - baseY;
+                const len = Math.hypot(vx, vy) || 1;
+                let x = cx + (vx / len) * g.rx;
+                let y = baseY + (vy / len) * g.rx;
+                if (y >= baseY) {
+                    x = footX;
+                    y = baseY;
+                }
+                else if (y < baseY - g.legHeight) {
+                    const sh = Math.sin(g.legSweep / 2);
+                    x = footX + legDir * (-2 * g.rx * sh * sh);
+                    y = baseY - g.legHeight;
+                }
+                best = { x, y, dist: Math.hypot(px - x, py - y) };
+            }
+        }
+        return best;
+    }
+    const mid = (left + right) / 2;
+    if (py > baseY) {
+        const x = px < mid ? left : right;
+        return { x, y: baseY, dist: Math.hypot(px - x, py - baseY) };
+    }
+    const near = ellipseNearest(px - mid, py - baseY, g.rx, g.ry);
+    return { x: mid + near.x, y: baseY + near.y, dist: near.dist };
+}
+export const linkMark = {
+    id: 'link',
+    spansView: true,
+    pass: {
+        ...slangPass({ id: 'link', mod: shader }),
+        pack: c => shader.packInstances({
+            x: c.x,
+            x2: c.x2,
+            x2Region: c.x2Region,
+            y: c.y ?? (c.count === 0 ? NO_VALUES : new Float32Array(c.count)),
+            size: sizeLane(c),
+            color: colorBits(c, c.count),
+            row: rowLane(c.row, c.count),
+            feet: c.feet ?? (c.count === 0 ? NO_FEET : new Uint8Array(c.count)),
+        }, c.count),
+    },
+    writeUniforms(scratch, _clip, block, frame, params) {
+        const { sizeScale } = params;
+        shader.writeUniforms(scratch, {
+            canvasHeight: frame.canvasHeight,
+            devicePixelRatio: getDpr(),
+            rowHeight: bandHeightPx(params, frame.canvasHeight),
+            rowOffsetPx: params.rowOffsetPx ?? 0,
+            reverse: params.reverse ? 1 : 0,
+            stemPx: params.stemPx ?? LINK_STEM_PX,
+            dashPx: params.strokeDash?.[0] ?? 0,
+            gapPx: params.strokeDash?.[1] ?? 0,
+            footPx: params.footPx ?? LINK_FOOT_PX,
+            curveSegments: curveSegments(params),
+            insetPx: params.insetPx ?? 0,
+            domainMin: params.domain[0],
+            domainMax: params.domain[1],
+            ...valueScaleUniforms(params),
+            ...rampUniforms(params.colorScale),
+            valued: params.valued ? 1 : 0,
+            linkShape: linkShapeCode(params.linkShape),
+            sizeMode: sizeScale ? LINK_SIZE_SCALED : LINK_SIZE_CONSTANT,
+            sizeConstantPx: params.sizePx,
+            sizeDomainMin: sizeScale?.domain[0] ?? 0,
+            sizeDomainMax: sizeScale?.domain[1] ?? 1,
+            sizeScaleType: sizeScale?.scale === 'log' ? SCALE_TYPE_LOG : 0,
+            sizeRangeMin: sizeScale?.range[0] ?? params.sizePx,
+            sizeRangeMax: sizeScale?.range[1] ?? params.sizePx,
+            canvasWidth: frame.canvasWidth,
+            regionCount: fillTable(params.regions),
+            zero: 0,
+            ownEntry: tableEntry(params.regions[block.displayedRegionIndex]),
+            ownSpan: writeSpan(OWN_SPAN, 0, params.regions[block.displayedRegionIndex]),
+            regionTable: TABLE,
+            regionSpan: SPANS,
+            rowTableKeys: rowTableKeys(params),
+        });
+    },
+    textures: rowTableTextures,
+    paintsBlock(block, _frame, params) {
+        return params.regions[block.displayedRegionIndex] !== undefined;
+    },
+    verticesPerInstance(_frame, params) {
+        return (curveSegments(params) + 1) * 2 + FOOT_STRIP_VERTS;
+    },
+    paintBlock(ctx, channels, block, frame, params) {
+        const { count } = channels;
+        if (count === 0) {
+            return;
+        }
+        const color = paintColors(channels, count, params.colorScale);
+        const g = linkFrame(block, frame, params);
+        const dash = params.strokeDash ? [...params.strokeDash] : [];
+        ctx.lineCap = 'butt';
+        for (let i = 0; i < count; i++) {
+            if (!reachesX(channels, g, i, 0, frame.canvasWidth)) {
+                continue;
+            }
+            placeLink(channels, g, i);
+            if (g.kind === KIND_NONE) {
+                continue;
+            }
+            ctx.lineWidth = g.strokePx;
+            ctx.strokeStyle = abgrToCssRgba(rowColor(color[i], channels.row, i, g.table));
+            ctx.setLineDash(dashes(g) ? dash : []);
+            ctx.beginPath();
+            tracePath(ctx, g);
+            ctx.stroke();
+            const feet = footSegments(g);
+            if (feet.length > 0) {
+                ctx.setLineDash([]);
+                ctx.beginPath();
+                for (const { from, to, y } of feet) {
+                    ctx.moveTo(from, y);
+                    ctx.lineTo(to, y);
+                }
+                ctx.stroke();
+            }
+        }
+        ctx.setLineDash([]);
+    },
+    // The box the stroke lies in, the curve's extent padded by half the stroke,
+    // which the sweep holds the painting to; a highlight strokes the curve
+    // itself. The hit test below is the curve's own.
+    ink(channels, block, frame, params, i) {
+        const g = linkFrame(block, frame, params);
+        placeLink(channels, g, i);
+        const box = inkBox(g);
+        return (box && {
+            ...box,
+            stroke: {
+                d: svgPathOf(g),
+                widthPx: g.strokePx,
+                originX: 0,
+                originY: 0,
+            },
+        });
+    },
+    hitNearest(channels, block, frame, params, xPx, yPx, candidates, maxDistSq) {
+        const g = linkFrame(block, frame, params);
+        const reach = Math.sqrt(maxDistSq);
+        return nearestInk(candidates, maxDistSq, i => {
+            if (!reachesX(channels, g, i, xPx - reach, xPx + reach)) {
+                return undefined;
+            }
+            placeLink(channels, g, i);
+            const box = inkBox(g);
+            if (!box ||
+                xPx < box.left - reach ||
+                xPx > box.left + box.width + reach ||
+                yPx < box.top - reach ||
+                yPx > box.top + box.height + reach) {
+                return undefined;
+            }
+            const near = nearestOnCurve(g, xPx, yPx);
+            const half = g.strokePx / 2;
+            if (near.dist <= half) {
+                return { x: xPx, y: yPx, distSq: 0 };
+            }
+            const t = half / near.dist;
+            const x = near.x + (xPx - near.x) * t;
+            const y = near.y + (yPx - near.y) * t;
+            return { x, y, distSq: (xPx - x) ** 2 + (yPx - y) ** 2 };
+        });
+    },
+};
+export { LINK_ELSEWHERE, LINK_NO_REGION };