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

package/esm/marks/drawAgainstHit.js

@@ -0,0 +1,407 @@
+import { inkOnRect } from './markHit.js';
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+/**
+ * A `MarkContext2D` that records every rect a painter fills, in paint order and
+ * in CANVAS coordinates — `fillRect` and path `rect` alike, so a shape that
+ * batches by colour records the same list as one that fills per instance. A
+ * path traced with `moveTo`/`lineTo`/`bezierCurveTo` and filled records its
+ * bounding box, the extent a shape whose hit test answers a polygon's box
+ * (the variant inversion triangle) is checked against; a curve contributes its control
+ * points, whose hull contains it.
+ *
+ * A **stroked** path records one rect per `moveTo`/`lineTo` edge, each the
+ * edge's bounding box widened by half the current `lineWidth` — the extent a
+ * round cap reaches on all four sides. Per edge rather than per `stroke()`,
+ * because a painter that batches a colour run into one path (dotplot's) would
+ * otherwise record the run's hull as a single instance. `fillStyle` on such a
+ * record is the `strokeStyle` it went down in; the field is the colour of the
+ * ink either way.
+ *
+ * `save`/`restore` bracket the transform and the styles the way a real context
+ * does, and every recorded point goes through the CTM. The half-widths — a
+ * stroke's and a `strokeRect`'s — are measured AFTER it, so they are exact under
+ * a translation and approximate under a scale; no shape in tree strokes under
+ * one, and a rotated CTM records the ink's axis-aligned box rather than its
+ * silhouette.
+ */
+const CURVE_SEGMENTS = 64;
+export function recordingContext() {
+    const calls = [];
+    const points = [];
+    const edges = [];
+    let m = [...IDENTITY];
+    const stack = [];
+    const px = (x, y) => m[0] * x + m[2] * y + m[4];
+    const py = (x, y) => m[1] * x + m[3] * y + m[5];
+    const pushPoint = (x, y) => {
+        points.push([px(x, y), py(x, y)]);
+    };
+    // The transformed box of an axis-aligned rect. An axis-aligned CTM scales the
+    // extents directly rather than differencing two mapped corners, so an
+    // untranslated rect records the width the painter asked for and not a value
+    // one ulp off it; only a rotation falls back to the four-corner hull.
+    const boxOf = (x, y, w, h) => {
+        if (m[1] === 0 && m[2] === 0) {
+            const x0 = px(x, y);
+            const y0 = py(x, y);
+            const dx = m[0] * w;
+            const dy = m[3] * h;
+            return {
+                x: Math.min(x0, x0 + dx),
+                y: Math.min(y0, y0 + dy),
+                w: Math.abs(dx),
+                h: Math.abs(dy),
+            };
+        }
+        const xs = [px(x, y), px(x + w, y), px(x, y + h), px(x + w, y + h)];
+        const ys = [py(x, y), py(x + w, y), py(x, y + h), py(x + w, y + h)];
+        const left = Math.min(...xs);
+        const top = Math.min(...ys);
+        return {
+            x: left,
+            y: top,
+            w: Math.max(...xs) - left,
+            h: Math.max(...ys) - top,
+        };
+    };
+    const ctx = {
+        fillStyle: '',
+        strokeStyle: '',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        save() {
+            const { fillStyle, strokeStyle, lineWidth, lineCap } = this;
+            stack.push({ m: [...m], fillStyle, strokeStyle, lineWidth, lineCap });
+        },
+        restore() {
+            const saved = stack.pop();
+            if (saved) {
+                m = saved.m;
+                this.fillStyle = saved.fillStyle;
+                this.strokeStyle = saved.strokeStyle;
+                this.lineWidth = saved.lineWidth;
+                this.lineCap = saved.lineCap;
+            }
+        },
+        translate(x, y) {
+            m = [m[0], m[1], m[2], m[3], px(x, y), py(x, y)];
+        },
+        scale(x, y) {
+            m = [m[0] * x, m[1] * x, m[2] * y, m[3] * y, m[4], m[5]];
+        },
+        rotate(angle) {
+            const c = Math.cos(angle);
+            const s = Math.sin(angle);
+            m = [
+                m[0] * c + m[2] * s,
+                m[1] * c + m[3] * s,
+                m[2] * c - m[0] * s,
+                m[3] * c - m[1] * s,
+                m[4],
+                m[5],
+            ];
+        },
+        beginPath() {
+            points.length = 0;
+            edges.length = 0;
+        },
+        clip() { },
+        setLineDash(_segments) { },
+        moveTo(x, y) {
+            pushPoint(x, y);
+        },
+        lineTo(x, y) {
+            const from = points.at(-1);
+            pushPoint(x, y);
+            const to = points.at(-1);
+            if (from) {
+                edges.push([from[0], from[1], to[0], to[1]]);
+            }
+        },
+        bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+            pushPoint(cp1x, cp1y);
+            pushPoint(cp2x, cp2y);
+            pushPoint(x, y);
+        },
+        arc(x, y, radius, start = 0, end = 2 * Math.PI) {
+            this.ellipse(x, y, radius, radius, 0, start, end);
+        },
+        // Flattened into edges, so a stroked curve records the boxes its
+        // segments cover the way a polyline does; a filled one still records its
+        // point hull.
+        ellipse(x, y, radiusX, radiusY, _rotation = 0, start = 0, end = 2 * Math.PI) {
+            for (let k = 0; k <= CURVE_SEGMENTS; k++) {
+                const a = start + ((end - start) * k) / CURVE_SEGMENTS;
+                this.lineTo(x + radiusX * Math.cos(a), y + radiusY * Math.sin(a));
+            }
+        },
+        closePath() { },
+        fill() {
+            if (points.length > 0) {
+                const xs = points.map(p => p[0]);
+                const ys = points.map(p => p[1]);
+                const x = Math.min(...xs);
+                const y = Math.min(...ys);
+                calls.push({
+                    x,
+                    y,
+                    w: Math.max(...xs) - x,
+                    h: Math.max(...ys) - y,
+                    fillStyle: this.fillStyle,
+                });
+                points.length = 0;
+                edges.length = 0;
+            }
+        },
+        stroke() {
+            const half = this.lineWidth / 2;
+            for (const [ax, ay, bx, by] of edges) {
+                const x = Math.min(ax, bx) - half;
+                const y = Math.min(ay, by) - half;
+                calls.push({
+                    x,
+                    y,
+                    w: Math.max(ax, bx) + half - x,
+                    h: Math.max(ay, by) + half - y,
+                    fillStyle: this.strokeStyle,
+                });
+            }
+            points.length = 0;
+            edges.length = 0;
+        },
+        rect(x, y, w, h) {
+            calls.push({ ...boxOf(x, y, w, h), fillStyle: this.fillStyle });
+        },
+        fillRect(x, y, w, h) {
+            calls.push({ ...boxOf(x, y, w, h), fillStyle: this.fillStyle });
+        },
+        strokeRect(x, y, w, h) {
+            const half = this.lineWidth / 2;
+            const box = boxOf(x, y, w, h);
+            calls.push({
+                x: box.x - half,
+                y: box.y - half,
+                w: box.w + this.lineWidth,
+                h: box.h + this.lineWidth,
+                fillStyle: this.strokeStyle,
+            });
+        },
+    };
+    return { ctx, calls };
+}
+function contains(r, x, y, slack = 0) {
+    return (x >= r.x - slack &&
+        x <= r.x + r.w + slack &&
+        y >= r.y - slack &&
+        y <= r.y + r.h + slack);
+}
+function unionBox(rs) {
+    let box;
+    for (const r of rs) {
+        box = box
+            ? {
+                x: Math.min(box.x, r.x),
+                y: Math.min(box.y, r.y),
+                w: Math.max(box.x + box.w, r.x + r.w) - Math.min(box.x, r.x),
+                h: Math.max(box.y + box.h, r.y + r.h) - Math.min(box.y, r.y),
+            }
+            : { x: r.x, y: r.y, w: r.w, h: r.h };
+    }
+    return box;
+}
+// The float slack the two distance comparisons take. Both sides are px
+// arithmetic over the same projection, so a real disagreement is orders of
+// magnitude above this and a rounding one is below it.
+const EPS = 1e-9;
+const MAX_VIOLATIONS = 10;
+/**
+ * The ink clause of {@link sweepMarkAgainstHit} alone, for a mark with no
+ * `hitNearest`: `boxes[i]` is what the painter recorded for instance `i`.
+ */
+export function inkViolations(mark, channels, block, state, boxes, inkSlackPx) {
+    const violations = [];
+    if (!mark.ink) {
+        return violations;
+    }
+    for (let i = 0; i < boxes.length; i++) {
+        const r = mark.ink(channels, block, state, i);
+        const b = boxes[i];
+        if (r && !b) {
+            violations.push(`${i} painted nothing but has ink`);
+        }
+        else if (b && !r) {
+            violations.push(`${i} painted but has no ink`);
+        }
+        else if (b && r) {
+            const gaps = [
+                b.x - r.left,
+                r.left + r.width - (b.x + b.w),
+                b.y - r.top,
+                r.top + r.height - (b.y + b.h),
+            ];
+            if (gaps.some(g => g < -EPS)) {
+                violations.push(`${i} painted (${b.x}, ${b.y}, ${b.w}, ${b.h}) outside its ink (${r.left}, ${r.top}, ${r.width}, ${r.height})`);
+            }
+            else if (gaps.some(g => g > inkSlackPx + EPS)) {
+                violations.push(`${i}'s ink (${r.left}, ${r.top}, ${r.width}, ${r.height}) is more than ${inkSlackPx}px outside its painting (${b.x}, ${b.y}, ${b.w}, ${b.h})`);
+            }
+        }
+        if (violations.length >= MAX_VIOLATIONS) {
+            return violations;
+        }
+    }
+    return violations;
+}
+function hitViolations(hit, boxes, x, y) {
+    const violations = [];
+    const box = hit && boxes[hit.index];
+    if (hit && !box) {
+        violations.push(`(${x}, ${y}) answered ${hit.index}, which painted nothing`);
+    }
+    else if (hit && box) {
+        if (!contains(box, hit.x, hit.y, EPS)) {
+            violations.push(`(${x}, ${y}) answered ${hit.index} with ink at (${hit.x}, ${hit.y}), off its painting`);
+        }
+        const toBox = inkOnRect(x, y, box.x, box.y, box.w, box.h).distSq;
+        if (hit.distSq < toBox - EPS) {
+            violations.push(`(${x}, ${y}) answered ${hit.index} at ${hit.distSq}, nearer than its painting (${toBox})`);
+        }
+        const toPoint = (x - hit.x) ** 2 + (y - hit.y) ** 2;
+        if (Math.abs(hit.distSq - toPoint) > EPS * Math.max(1, toPoint)) {
+            violations.push(`(${x}, ${y}) answered ${hit.index} at ${hit.distSq}, which is not the distance to the ink it named (${toPoint})`);
+        }
+    }
+    return violations;
+}
+/**
+ * The draw-against-hit gate: paint the block, then walk it in `step` px and
+ * hold `hitNearest` to what the painter actually put on the canvas.
+ *
+ * **What the painter drew for instance `i` has to be attributed to `i`,** and
+ * there are two ways to get that. A mark whose every instance is one `fillRect`
+ * gets it positionally, which is the default and needs nothing. A mark that
+ * batches a colour run into one path (`point`'s glyphs), or that skips an
+ * instance the view has scrolled past (`cell`'s off-canvas rows), cannot be read
+ * that way at all — the batch has fewer rects than instances, or the wrong ones.
+ * `sliceOne` is the way in for those: hand back one instance's channels and the
+ * sweep paints it alone, so the attribution holds by construction and a culled
+ * instance is visibly an empty painting.
+ *
+ * Four claims, all of them one-directional and true of every mark:
+ *
+ * - an instance that painted nothing is never the answer,
+ * - `hit.x`/`hit.y` — where the mark says its ink is — lies inside the box the
+ *   painter drew for the instance the hit names,
+ * - `hit.distSq` is no smaller than the distance to that box, since the box
+ *   contains the ink and cannot be farther than it,
+ * - `hit.distSq` IS the distance to `hit.x`/`hit.y`, which is `MarkHit`'s own
+ *   contract rather than a fact about the painting: a mark that answers a
+ *   distance its own reported point does not support has two spellings of where
+ *   its ink is, and the nearest-wins walk is resolved by the one the caller
+ *   cannot see.
+ *
+ * The fifth is the containment rule: **a point the rule contains answers the
+ * nearest painted instance it contains**, the last-painted where tied, since the
+ * sweep hands candidates back to front. The default rule is the painted box, so
+ * a point on a box answers that box, and off every box a hit target wider than
+ * its ink may still answer. The default holds only where the box IS the hit
+ * target — every `fillRect` mark, and `cell`'s inversion triangle, which answers
+ * as its bounding box on purpose — and not for a glyph, whose box is a superset
+ * of its ink, so it runs exactly when the batch painted one rect per instance. A
+ * mark whose hit rule is not its box (the pileup's bp containment) passes
+ * `contains`, which is then the whole rule: the sweep covers the whole canvas,
+ * and a point the rule contains nowhere answers nothing.
+ *
+ * A mark declaring `ink` is held to one more clause, per instance: the box the
+ * painter recorded for `i` lies inside `ink(i)`, and each edge of `ink(i)` lies
+ * within `inkSlackPx` (default 1) of the painting's — so the rect is tight to
+ * the ink within a pixel on every side, which admits a seam overdraw or a pixel
+ * snap and rejects a rect that is the wrong row, the wrong width or the whole
+ * canvas. An instance that painted nothing must answer no ink, and one with ink
+ * must have painted.
+ *
+ * Returns the violations rather than asserting, so a test reads as
+ * `expect(sweep(...)).toEqual([])`. `maxDistSq` is the bound the hit test is
+ * asked with, `Infinity` unless the caller's differs.
+ */
+export function sweepMarkAgainstHit(mark, channels, block, state, { maxDistSq = Infinity, step = 0.5, sliceOne, inkSlackPx = 1, contains: rule, } = {}) {
+    const { count } = channels;
+    const paint = (c) => {
+        const { ctx, calls } = recordingContext();
+        mark.paintBlock(ctx, c, block, state);
+        return calls;
+    };
+    const rects = paint(channels);
+    const perRect = rects.length === count;
+    if (!perRect && !sliceOne) {
+        return [`painted ${rects.length} rects for ${count} instances`];
+    }
+    const boxes = sliceOne
+        ? Array.from({ length: count }, (_, i) => unionBox(paint(sliceOne(channels, i))))
+        : rects.map(r => ({ x: r.x, y: r.y, w: r.w, h: r.h }));
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    for (const b of boxes) {
+        if (b) {
+            yMin = Math.min(yMin, b.y);
+            yMax = Math.max(yMax, b.y + b.h);
+        }
+    }
+    if (yMin === Infinity) {
+        return [`painted nothing for ${count} instances`];
+    }
+    const violations = inkViolations(mark, channels, block, state, boxes, inkSlackPx);
+    if (violations.length >= MAX_VIOLATIONS) {
+        return violations;
+    }
+    if (!mark.hitNearest) {
+        return ['no hit test'];
+    }
+    const claims = rule ??
+        (perRect
+            ? (k, x, y) => contains(boxes[k], x, y)
+            : undefined);
+    const candidates = Array.from({ length: count }, (_, k) => count - 1 - k);
+    const x0 = Math.min(block.screenStartPx, block.screenEndPx) - 1;
+    const x1 = Math.max(block.screenStartPx, block.screenEndPx) + 1;
+    const y0 = rule ? -1 : Math.floor(yMin) - 1;
+    const y1 = rule ? state.canvasHeight + 1 : yMax + 1;
+    let answered = 0;
+    for (let y = y0; y <= y1; y += step) {
+        for (let x = x0; x <= x1; x += step) {
+            let expected = -1;
+            let expectedDistSq = maxDistSq;
+            if (claims) {
+                for (const k of candidates) {
+                    const b = boxes[k];
+                    if (b && claims(k, x, y)) {
+                        const distSq = inkOnRect(x, y, b.x, b.y, b.w, b.h).distSq;
+                        if (expected === -1
+                            ? distSq < maxDistSq
+                            : distSq < expectedDistSq - EPS) {
+                            expected = k;
+                            expectedDistSq = distSq;
+                        }
+                    }
+                }
+            }
+            const hit = mark.hitNearest(channels, block, state, x, y, candidates, maxDistSq);
+            if (hit) {
+                answered++;
+            }
+            violations.push(...hitViolations(hit, boxes, x, y));
+            if (expected === -1
+                ? rule !== undefined && hit !== undefined
+                : hit?.index !== expected) {
+                violations.push(`(${x}, ${y}) should answer ${expected === -1 ? 'nothing' : expected}, answered ${hit?.index ?? 'nothing'}`);
+            }
+            if (violations.length >= MAX_VIOLATIONS) {
+                return violations;
+            }
+        }
+    }
+    return answered === 0 && violations.length === 0
+        ? [`no swept point answered any of ${count} instances`]
+        : violations;
+}

package/esm/marks/ellipseDistance.d.ts

@@ -0,0 +1,10 @@
+export declare function ellipseDistance(px: number, py: number, rx: number, ry: number): number;
+/**
+ * The point of the ellipse nearest (px, py), in the ellipse's own frame, and
+ * how far it is: what a hit test hands back as the ink it found.
+ */
+export declare function ellipseNearest(px: number, py: number, rx: number, ry: number): {
+    x: number;
+    y: number;
+    dist: number;
+};

package/esm/marks/ellipseDistance.js

@@ -0,0 +1,136 @@
+// Exact distance from a point to the axis-aligned ellipse |p/ab| = 1 — Inigo
+// Quilez's closed-form solve of the quartic, in float64.
+//
+// THIS IS A SECOND COPY of `sdEllipse` in curveDistance.slang, and the header
+// there carries the argument for why it is not generated instead. The short
+// version: making it liftable also enrolls it in `check-shader-oracle`, which
+// referees the float64 twin against slangc's float32 C++ — and a quartic solve
+// is exactly the shape that comparison cannot referee, because float32 loses
+// the solver before the transliteration is in question.
+//
+// So the two copies are NOT held together by parity with each other. What has to
+// agree is which ellipse, and that is the radii pair `linkMark.slang` lifts
+// (`linkRadiiPx`), which both the shader and this file's callers read. Given the same two radii, this is geometry with one right answer, and
+// `ellipseDistance.test.ts` pins it against a brute-force minimum over the
+// parametric angle — a stronger check than agreeing with a float32 evaluation
+// of the same formula would have been.
+//
+// The closed form rather than an iterative solve, for the reason the shader
+// gives: the arc band produces very flat ellipses (a 25px band under a 1500px
+// pair is 44:1, and it goes past 88:1), and a seeded Newton on the parametric
+// angle runs away entirely there.
+// The first-quadrant solve: `co` is the cosine of the parametric angle of the
+// nearest point to (qx, qy), radii (ax, ay), with the point and radii already
+// mirrored into the half where qx <= qy.
+function nearestCos(qx, qy, ax, ay) {
+    const l = ay * ay - ax * ax;
+    const m = (ax * qx) / l;
+    const m2 = m * m;
+    const n = (ay * qy) / l;
+    const n2 = n * n;
+    const c = (m2 + n2 - 1) / 3;
+    const c3 = c * c * c;
+    const d = c3 + m2 * n2;
+    const g = m + m * n2;
+    let co;
+    if (d < 0) {
+        const h = Math.acos(clamp1((c3 + m2 * n2 * 2) / c3)) / 3;
+        const s = Math.cos(h);
+        const t = Math.sin(h) * Math.sqrt(3);
+        const ux = Math.sqrt(Math.max(-c * (s + t + 2) + m2, 0));
+        const uy = Math.sqrt(Math.max(-c * (s - t + 2) + m2, 0));
+        co =
+            (uy + Math.sign(l) * ux + Math.abs(g) / Math.max(ux * uy, 1e-20) - m) / 2;
+    }
+    else {
+        const qq = c3 + m2 * n2 * 2;
+        const h = 2 * m * n * Math.sqrt(d);
+        const s = Math.sign(qq + h) * Math.cbrt(Math.abs(qq + h));
+        const t = Math.sign(qq - h) * Math.cbrt(Math.abs(qq - h));
+        const ux = -s - t - c * 4 + 2 * m2;
+        const uy = (s - t) * Math.sqrt(3);
+        const rm = Math.hypot(ux, uy);
+        co =
+            (uy / Math.sqrt(Math.max(rm - ux, 1e-20)) +
+                (2 * g) / Math.max(rm, 1e-20) -
+                m) /
+                2;
+    }
+    return clamp1(co);
+}
+export function ellipseDistance(px, py, rx, ry) {
+    let qx = Math.abs(px);
+    let qy = Math.abs(py);
+    let ax = rx;
+    let ay = ry;
+    // Solve in the half where q.x <= q.y, mirroring point and radii together.
+    if (qx > qy) {
+        ;
+        [qx, qy] = [qy, qx];
+        [ax, ay] = [ay, ax];
+    }
+    // Degenerate to the point at the origin, which the circle test below cannot
+    // catch: its threshold is `ay * ay`, so it reads `abs(l) < 0` and lets a zero
+    // divisor through. Same guard as curveDistance.slang's.
+    // Degenerate to the point at the origin, which the circle test below cannot
+    // catch: its threshold is `ay * ay`, so it reads `abs(l) < 0` and lets a zero
+    // divisor through. Same guard as curveDistance.slang's.
+    if (ax * ax + ay * ay <= 0) {
+        return Math.hypot(qx, qy);
+    }
+    const l = ay * ay - ax * ax;
+    // Circle: `l` is the solver's divisor, so hand those back the exact answer
+    // rather than a division by ~0. Reachable — a clamped dome's ry is pinned to
+    // the band while rx tracks the pair's width, so they cross.
+    if (Math.abs(l) < 1e-6 * ay * ay) {
+        return Math.abs(Math.hypot(qx, qy) - ax);
+    }
+    const co = nearestCos(qx, qy, ax, ay);
+    return Math.hypot(ax * co - qx, ay * Math.sqrt(Math.max(1 - co * co, 0)) - qy);
+}
+/**
+ * The point of the ellipse nearest (px, py), in the ellipse's own frame, and
+ * how far it is: what a hit test hands back as the ink it found.
+ */
+export function ellipseNearest(px, py, rx, ry) {
+    let qx = Math.abs(px);
+    let qy = Math.abs(py);
+    let ax = rx;
+    let ay = ry;
+    const swapped = qx > qy;
+    if (swapped) {
+        ;
+        [qx, qy] = [qy, qx];
+        [ax, ay] = [ay, ax];
+    }
+    const l = ay * ay - ax * ax;
+    let nx;
+    let ny;
+    if (ax * ax + ay * ay <= 0) {
+        nx = 0;
+        ny = 0;
+    }
+    else if (Math.abs(l) < 1e-6 * ay * ay) {
+        const len = Math.hypot(qx, qy);
+        nx = len > 0 ? (qx / len) * ax : ax;
+        ny = len > 0 ? (qy / len) * ax : 0;
+    }
+    else {
+        const co = nearestCos(qx, qy, ax, ay);
+        nx = ax * co;
+        ny = ay * Math.sqrt(Math.max(1 - co * co, 0));
+    }
+    const dist = Math.hypot(nx - qx, ny - qy);
+    if (swapped) {
+        ;
+        [nx, ny] = [ny, nx];
+    }
+    return {
+        x: px < 0 ? -nx : nx,
+        y: py < 0 ? -ny : ny,
+        dist,
+    };
+}
+function clamp1(x) {
+    return x < -1 ? -1 : x > 1 ? 1 : x;
+}

package/esm/marks/glyphPaint.d.ts

@@ -0,0 +1,36 @@
+import type { InkRect, MarkContext2D } from './types.ts';
+/** The path calls a glyph is built from — what a recorder has to answer. */
+export type GlyphPath = Pick<MarkContext2D, 'moveTo' | 'lineTo' | 'closePath' | 'rect' | 'arc'>;
+/**
+ * Append one of the `point` shape's glyphs to the current path, centred on
+ * `(cx, y)`.
+ *
+ * The disc/crisp-square split and the square's snap are pointGlyph.slang's
+ * (adr-051), so the painter cannot drift from the shader about where the split
+ * is. The caller owns `beginPath`/`fill`, so a run of one colour can batch into
+ * a single fill.
+ *
+ * Its own module, not `pointMark.ts`'s: this is the half of the shape a
+ * consumer can want without the pass, and importing it through the shape would
+ * hand that consumer the shader's WGSL and GLSL strings. Wiggle's scatter mode
+ * is that consumer.
+ */
+export declare function appendGlyph(ctx: GlyphPath, glyph: number, cx: number, y: number, diameter: number): void;
+/**
+ * Room a glyph needs at each end of a plot whose display wants its topmost and
+ * bottommost points drawn whole: a bar's datum is its top edge and never
+ * overshoots, a glyph's is its centre, so one at domain max loses its top half
+ * off the canvas. The diamond's scale, since that is the largest thing the
+ * shape draws and `glyphBox` measures it the same way.
+ *
+ * A display passes this as the point shape's `insetPx` and gives its axis the
+ * same number as an offset, so domain max goes on labelling the row the
+ * topmost glyph centres on.
+ */
+export declare function pointInsetPx(diameter: number): number;
+/**
+ * The box `appendGlyph` paints inside, by the same split and snap: the
+ * diamond is scaled by `DIAMOND_GLYPH_SCALE` and the small square snaps to
+ * the pixel grid, so neither is the diameter about the centre.
+ */
+export declare function glyphBox(glyph: number, cx: number, y: number, diameter: number): InkRect;

package/esm/marks/glyphPaint.js

@@ -0,0 +1,77 @@
+import { SMALL_POINT_MAX_DIAMETER } from '../shaders/pointGlyph.generated.js';
+import { crispSquareTopLeftPx } from '../shaders/pointGlyph.js.generated.js';
+import { DIAMOND_GLYPH_SCALE, GLYPH_DIAMOND, GLYPH_SQUARE, GLYPH_TRIANGLE, } from '../shaders/pointMark.consts.generated.js';
+/**
+ * Append one of the `point` shape's glyphs to the current path, centred on
+ * `(cx, y)`.
+ *
+ * The disc/crisp-square split and the square's snap are pointGlyph.slang's
+ * (adr-051), so the painter cannot drift from the shader about where the split
+ * is. The caller owns `beginPath`/`fill`, so a run of one colour can batch into
+ * a single fill.
+ *
+ * Its own module, not `pointMark.ts`'s: this is the half of the shape a
+ * consumer can want without the pass, and importing it through the shape would
+ * hand that consumer the shader's WGSL and GLSL strings. Wiggle's scatter mode
+ * is that consumer.
+ */
+export function appendGlyph(ctx, glyph, cx, y, diameter) {
+    const r = diameter / 2;
+    if (glyph === GLYPH_TRIANGLE) {
+        ctx.moveTo(cx - r, y - r);
+        ctx.lineTo(cx + r, y - r);
+        ctx.lineTo(cx, y + r);
+        ctx.closePath();
+    }
+    else if (glyph === GLYPH_DIAMOND) {
+        const ri = r * DIAMOND_GLYPH_SCALE;
+        ctx.moveTo(cx, y - ri);
+        ctx.lineTo(cx + ri, y);
+        ctx.lineTo(cx, y + ri);
+        ctx.lineTo(cx - ri, y);
+        ctx.closePath();
+    }
+    else if (glyph === GLYPH_SQUARE || diameter <= SMALL_POINT_MAX_DIAMETER) {
+        ctx.rect(crispSquareTopLeftPx(cx, diameter), crispSquareTopLeftPx(y, diameter), diameter, diameter);
+    }
+    else {
+        ctx.moveTo(cx + r, y);
+        ctx.arc(cx, y, r, 0, Math.PI * 2);
+    }
+}
+/**
+ * Room a glyph needs at each end of a plot whose display wants its topmost and
+ * bottommost points drawn whole: a bar's datum is its top edge and never
+ * overshoots, a glyph's is its centre, so one at domain max loses its top half
+ * off the canvas. The diamond's scale, since that is the largest thing the
+ * shape draws and `glyphBox` measures it the same way.
+ *
+ * A display passes this as the point shape's `insetPx` and gives its axis the
+ * same number as an offset, so domain max goes on labelling the row the
+ * topmost glyph centres on.
+ */
+export function pointInsetPx(diameter) {
+    return (diameter / 2) * DIAMOND_GLYPH_SCALE;
+}
+/**
+ * The box `appendGlyph` paints inside, by the same split and snap: the
+ * diamond is scaled by `DIAMOND_GLYPH_SCALE` and the small square snaps to
+ * the pixel grid, so neither is the diameter about the centre.
+ */
+export function glyphBox(glyph, cx, y, diameter) {
+    const r = diameter / 2;
+    if (glyph === GLYPH_DIAMOND) {
+        const ri = r * DIAMOND_GLYPH_SCALE;
+        return { left: cx - ri, top: y - ri, width: 2 * ri, height: 2 * ri };
+    }
+    if (glyph === GLYPH_SQUARE ||
+        (glyph !== GLYPH_TRIANGLE && diameter <= SMALL_POINT_MAX_DIAMETER)) {
+        return {
+            left: crispSquareTopLeftPx(cx, diameter),
+            top: crispSquareTopLeftPx(y, diameter),
+            width: diameter,
+            height: diameter,
+        };
+    }
+    return { left: cx - r, top: y - r, width: diameter, height: diameter };
+}