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

package/esm/hal/webgl2Hal.js

@@ -181,6 +181,9 @@ export class WebGL2Hal extends GpuHalBase {
         // Programs link on first draw (`getPass`). The first links here as a
         // canary, so a GL stack that cannot compile our shaders throws while
         // `createGpuHal` can still fall back to Canvas2D.
+        // Starting every pass's compile here was a loss (headed Chrome, Intel UHD
+        // 630): the GPU process ran all 17 programs before the 10 a first BAM draw
+        // needs, and a first visit drew at 1094 ms against 907.
         const canary = descriptors[0];
         if (canary) {
             this.passes.set(canary.id, {
@@ -301,7 +304,15 @@ export class WebGL2Hal extends GpuHalBase {
         if (this.disposed) {
             return { x: getDpr(), y: getDpr() };
         }
-        return syncCanvasSize(this.canvas, width, height).scale;
+        // Resized past 7680x4320 px of area, Chrome shrinks the drawing buffer and
+        // leaves canvas.width/height at the requested size, so the scale comes from
+        // the buffer. A lost context reads 0x0 and falls back to syncCanvasSize's.
+        const { scale } = syncCanvasSize(this.canvas, width, height);
+        const { drawingBufferWidth: bufferW, drawingBufferHeight: bufferH } = this.gl;
+        return {
+            x: width > 0 && bufferW > 0 ? bufferW / width : scale.x,
+            y: height > 0 && bufferH > 0 ? bufferH / height : scale.y,
+        };
     }
     /**
      * Nothing to give back. WebGL2 multisamples in the drawing buffer the context
@@ -351,23 +362,24 @@ export class WebGL2Hal extends GpuHalBase {
         const gl = this.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         gl.disable(gl.SCISSOR_TEST);
-        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
         gl.clearColor(clearR, clearG, clearB, clearA);
         gl.clear(gl.COLOR_BUFFER_BIT);
     }
     setScissor(x, y, w, h) {
         const gl = this.gl;
         gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(x, this.canvas.height - y - h, w, h);
+        gl.scissor(x, gl.drawingBufferHeight - y - h, w, h);
     }
     clearScissor() {
         this.gl.disable(this.gl.SCISSOR_TEST);
     }
     setViewport(x, y, w, h) {
-        this.gl.viewport(x, this.canvas.height - y - h, w, h);
+        this.gl.viewport(x, this.gl.drawingBufferHeight - y - h, w, h);
     }
     clearViewport() {
-        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        const gl = this.gl;
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     }
     drawPass(passId, regionKey, bufferPassId, verticesPerInstance) {
         const gl = this.gl;
@@ -410,7 +422,7 @@ export class WebGL2Hal extends GpuHalBase {
     endFrame() {
         const gl = this.gl;
         gl.disable(gl.SCISSOR_TEST);
-        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     }
     releaseResources() {
         const gl = this.gl;

package/esm/hal/webgpuHal.js

@@ -113,7 +113,7 @@ export class WebGPUHal extends GpuHalBase {
     // at 1 there is no MSAA texture at all rather than a smaller one, which is
     // the whole point of the knob.
     sampleCount;
-    // The multisampled colour attachment, resolved into the canvas texture at the
+    // The multisampled color attachment, resolved into the canvas texture at the
     // end of the frame. Null for the life of the HAL when `sampleCount` is 1.
     msaaTexture = null;
     msaaView = null;
@@ -395,7 +395,7 @@ export class WebGPUHal extends GpuHalBase {
         const existing = byName.get(binding.name);
         if (existing) {
             // Same hazard as a buffer, and no longer a hypothetical one: every
-            // `uploadTexture` in tree is a colour ramp, and since the ramp became a
+            // `uploadTexture` in tree is a color ramp, and since the ramp became a
             // `defineMark` `texture` they are all written by `GpuMarkBackend`'s
             // `bindRamp` from inside `drawRegion` — mid-frame, between an encoded
             // draw and its submit. The deferral is what makes replacing one there

package/esm/linkFeet.d.ts

@@ -0,0 +1,4 @@
+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;

package/esm/linkFeet.js

@@ -0,0 +1,7 @@
+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);
+}

package/esm/marks/barMark.d.ts

@@ -13,7 +13,7 @@ export interface BarChannels extends ColorChannel, RowChannel {
     count: number;
 }
 export interface BarParams extends RowParams, MarkValueScale {
-    /** The quantitative colour scale, for a bar whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a bar whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
     /** The value bars grow from; a bar below it hangs down. */
     origin: number;

package/esm/marks/barMark.js

@@ -94,6 +94,8 @@ export const barMark = {
         const yScale = valueScaleUniforms(params);
         const table = params.rowTable;
         const [domainMin, domainMax] = params.domain;
+        const { seamPx } = params;
+        const seamLeft = block.reversed ? seamPx : 0;
         let clipped = false;
         for (let i = 0; i < count; i++) {
             const slot = rowSlot(row, i, table);
@@ -104,7 +106,7 @@ export const barMark = {
             const r = barRect(bpToPx, x[i], x2[i], y[i], top, band, params, yScale);
             if (r) {
                 setFill(rowColor(color[i], row, i, table));
-                ctx.fillRect(r.left, r.top, r.width + params.seamPx, r.height);
+                ctx.fillRect(r.left - seamLeft, r.top, r.width + seamPx, r.height);
             }
             clipped ||=
                 clipSide(y[i], domainMin, domainMax, yScale.valueScaleType) !== 0;
@@ -123,7 +125,7 @@ export const barMark = {
             const { top, band } = barBand(params, frame.canvasHeight, slot);
             const s = stripRect(bpToPx, x[i], x2[i], y[i], top, band, params, yScale);
             if (s) {
-                ctx.fillRect(s.left, s.top, s.width + params.seamPx, s.height);
+                ctx.fillRect(s.left - seamLeft, s.top, s.width + seamPx, s.height);
             }
         }
     },

package/esm/marks/colorFill.d.ts

@@ -3,13 +3,13 @@
  *
  * `@jbrowse/core/util/colorBits` re-exports `abgrToCssRgba` from here: core
  * depends on render-core, never the reverse. The direction that genuinely
- * needs core is resolving a CSS colour to a packed number, which is why a
- * shape takes packed colours and the display resolves them.
+ * needs core is resolving a CSS color to a packed number, which is why a
+ * shape takes packed colors and the display resolves them.
  */
 export declare function abgrToCssRgba(c: number): string;
 /**
- * A fill-style setter that only touches `ctx.fillStyle` when the colour
- * changes. Most of a painting is runs of one colour, and both the string
+ * A fill-style setter that only touches `ctx.fillStyle` when the color
+ * changes. Most of a painting is runs of one color, and both the string
  * allocation and the context write cost more than the comparison.
  */
 export declare function makeAbgrFill(ctx: {

package/esm/marks/colorFill.js

@@ -3,16 +3,16 @@
  *
  * `@jbrowse/core/util/colorBits` re-exports `abgrToCssRgba` from here: core
  * depends on render-core, never the reverse. The direction that genuinely
- * needs core is resolving a CSS colour to a packed number, which is why a
- * shape takes packed colours and the display resolves them.
+ * needs core is resolving a CSS color to a packed number, which is why a
+ * shape takes packed colors and the display resolves them.
  */
 export function abgrToCssRgba(c) {
     const a = ((c >>> 24) & 255) / 255;
     return `rgba(${c & 255},${(c >>> 8) & 255},${(c >>> 16) & 255},${a})`;
 }
 /**
- * A fill-style setter that only touches `ctx.fillStyle` when the colour
- * changes. Most of a painting is runs of one colour, and both the string
+ * A fill-style setter that only touches `ctx.fillStyle` when the color
+ * changes. Most of a painting is runs of one color, and both the string
  * allocation and the context write cost more than the comparison.
  */
 export function makeAbgrFill(ctx) {

package/esm/marks/connectorMark.d.ts

@@ -0,0 +1,48 @@
+import type { RenderBlock } from '../renderBlock.ts';
+import type { LinkRegion } from './linkMark.ts';
+import type { MarkShape } from './types.ts';
+/**
+ * The `connector` shape's channels: a stroked cubic from `x` on the displayed
+ * region whose payload holds it, at row `row`'s centre, to `x2` on the
+ * displayed region `x2Region` names, at row `row2`'s. `bend` is the depth in
+ * px a dipping connector reaches below its ends, or `CONNECTOR_BOW` for one
+ * that bows up over its row; `width` the stroke in CSS px; `color` ABGR with
+ * its alpha; `bits` the `CONNECTOR_*` flags: each end's strand, a split
+ * junction's leading second end, a straight segment, a dash, an arrowhead.
+ */
+export interface ConnectorChannels {
+    x: Uint32Array;
+    x2: Uint32Array;
+    x2Region: Uint32Array;
+    row: Uint32Array;
+    row2: Uint32Array;
+    bend: Float32Array;
+    width: Float32Array;
+    color: Uint32Array;
+    bits: Uint8Array;
+    count: number;
+}
+export interface ConnectorParams {
+    /** The view's displayed regions, indexed as `x2Region` and the block's own index are. */
+    regions: readonly LinkRegion[];
+    /** Canvas y of row 0's centre. */
+    rowOffsetPx: number;
+    /** Canvas px between two rows' centres. */
+    rowPitchPx: number;
+    /** How far an arrowhead's arms reach back and off the row. */
+    arrowPx: number;
+    /** A dashed connector's `[dash, gap]` in CSS px, starting on a dash. */
+    strokeDash?: readonly [number, number];
+    maxHandlePx?: number;
+}
+/**
+ * A connector's two ends in canvas px, for a gesture that acts on the nearer
+ * one; undefined where the instance places nowhere.
+ */
+export declare function connectorEnds(c: ConnectorChannels, block: RenderBlock, params: ConnectorParams, i: number): {
+    x: number;
+    y: number;
+    x2: number;
+    y2: number;
+} | undefined;
+export declare const connectorMark: MarkShape<ConnectorChannels, ConnectorParams>;

package/esm/marks/connectorMark.js

@@ -0,0 +1,285 @@
+import { getDpr } from '../canvas2dUtils.js';
+import { CONNECTOR_ARROW, CONNECTOR_CURVE_SEGMENTS, CONNECTOR_DASHED, CONNECTOR_LEADING_2, CONNECTOR_MAX_HANDLE_PX, CONNECTOR_MAX_REACH_PX, CONNECTOR_MINUS_1, CONNECTOR_MINUS_2, CONNECTOR_STRAIGHT, } from '../shaders/connectorMark.consts.generated.js';
+import * as shader from '../shaders/connectorMark.generated.js';
+import { connectorBudgetPx, connectorHandlePx, connectorLiftPx, connectorStrokePx, connectorTangent, } from '../shaders/connectorMark.js.generated.js';
+import { slangPass } from '../slangPass.js';
+import { abgrToCssRgba } from './colorFill.js';
+import { regionPx, viewRegionUniforms } from './linkMark.js';
+import { nearestInk } from './markHit.js';
+function newPlaced() {
+    return {
+        x0: 0,
+        y0: 0,
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        x3: 0,
+        y3: 0,
+        strokePx: 0,
+        arrow: false,
+        back: 0,
+    };
+}
+const strandOf = (bits, bit) => ((bits & bit) !== 0 ? -1 : 1);
+// Places instance `i` into `p` as the shader does, or answers false where its
+// far end lies on no displayed region the table holds.
+function place(c, params, own, i, p, dpr) {
+    const { regions } = params;
+    const far = c.x2Region[i];
+    const ownRegion = regions[own];
+    const farRegion = regions[far];
+    if (!ownRegion || !farRegion) {
+        return false;
+    }
+    const bits = c.bits[i];
+    p.x0 = regionPx(regions, own, c.x[i]);
+    p.y0 = params.rowOffsetPx + c.row[i] * params.rowPitchPx;
+    p.x3 = regionPx(regions, far, c.x2[i]);
+    p.y3 = params.rowOffsetPx + c.row2[i] * params.rowPitchPx;
+    p.strokePx = connectorStrokePx(c.width[i], dpr);
+    const reversed2 = farRegion.signedPxPerBp < 0;
+    const strand2 = strandOf(bits, CONNECTOR_MINUS_2);
+    p.arrow = (bits & CONNECTOR_ARROW) !== 0;
+    p.back = (reversed2 ? -strand2 : strand2) * -params.arrowPx;
+    if ((bits & CONNECTOR_STRAIGHT) !== 0) {
+        p.x1 = p.x0;
+        p.y1 = p.y0;
+        p.x2 = p.x3;
+        p.y2 = p.y3;
+        return true;
+    }
+    const dx = p.x3 - p.x0;
+    const dy = p.y3 - p.y0;
+    const budget = connectorBudgetPx(dx, dy);
+    const handle = connectorHandlePx(budget, params.maxHandlePx ?? CONNECTOR_MAX_HANDLE_PX);
+    const lift = connectorLiftPx(budget, dy, c.bend[i]);
+    const t1 = connectorTangent(strandOf(bits, CONNECTOR_MINUS_1), 0, ownRegion.signedPxPerBp < 0 ? 1 : 0);
+    const t2 = connectorTangent(strand2, (bits & CONNECTOR_LEADING_2) !== 0 ? 1 : 0, reversed2 ? 1 : 0);
+    p.x1 = p.x0 + handle * t1;
+    p.y1 = p.y0 - lift;
+    p.x2 = p.x3 + handle * t2;
+    p.y2 = p.y3 - lift;
+    return true;
+}
+// The curve's point at `t`, written into `out`.
+function cubicAt(p, t, out) {
+    const s = 1 - t;
+    const a = s * s * s;
+    const b = 3 * s * s * t;
+    const d = 3 * s * t * t;
+    const e = t * t * t;
+    out.x = a * p.x0 + b * p.x1 + d * p.x2 + e * p.x3;
+    out.y = a * p.y0 + b * p.y1 + d * p.y2 + e * p.y3;
+}
+// A connector whose ends both lie further off the canvas than any curve can
+// reach back onto it draws nothing there.
+function offCanvas(p, frame) {
+    const reach = CONNECTOR_MAX_REACH_PX + p.strokePx;
+    return (Math.max(p.y0, p.y3) + reach < 0 ||
+        Math.min(p.y0, p.y3) - reach > frame.canvasHeight);
+}
+function traceCurve(ctx, p) {
+    ctx.moveTo(p.x0, p.y0);
+    ctx.bezierCurveTo(p.x1, p.y1, p.x2, p.y2, p.x3, p.y3);
+}
+function traceArrow(ctx, p, arrowPx) {
+    ctx.moveTo(p.x3 + p.back, p.y3 - arrowPx);
+    ctx.lineTo(p.x3, p.y3);
+    ctx.moveTo(p.x3 + p.back, p.y3 + arrowPx);
+    ctx.lineTo(p.x3, p.y3);
+}
+const svgNumber = (n) => Math.round(n * 100) / 100;
+function svgPathOf(p, arrowPx) {
+    const parts = [];
+    const pt = (x, y) => `${svgNumber(x)} ${svgNumber(y)}`;
+    const sink = {
+        moveTo: (x, y) => parts.push(`M${pt(x, y)}`),
+        lineTo: (x, y) => parts.push(`L${pt(x, y)}`),
+        bezierCurveTo: (x1, y1, x2, y2, x, y) => parts.push(`C${pt(x1, y1)} ${pt(x2, y2)} ${pt(x, y)}`),
+    };
+    traceCurve(sink, p);
+    if (p.arrow) {
+        traceArrow(sink, p, arrowPx);
+    }
+    return parts.join('');
+}
+const POINT = { x: 0, y: 0 };
+// The box the stroke lies in: the hull of the curve's chords, its arrow, and
+// half the stroke.
+function inkBox(p, arrowPx) {
+    let left = Math.min(p.x0, p.x3);
+    let right = Math.max(p.x0, p.x3);
+    let top = Math.min(p.y0, p.y3);
+    let bottom = Math.max(p.y0, p.y3);
+    for (let k = 1; k < CONNECTOR_CURVE_SEGMENTS; k++) {
+        cubicAt(p, k / CONNECTOR_CURVE_SEGMENTS, POINT);
+        left = Math.min(left, POINT.x);
+        right = Math.max(right, POINT.x);
+        top = Math.min(top, POINT.y);
+        bottom = Math.max(bottom, POINT.y);
+    }
+    if (p.arrow) {
+        left = Math.min(left, p.x3 + p.back);
+        right = Math.max(right, p.x3 + p.back);
+        top = Math.min(top, p.y3 - arrowPx);
+        bottom = Math.max(bottom, p.y3 + arrowPx);
+    }
+    const half = p.strokePx / 2;
+    return {
+        left: left - half,
+        top: top - half,
+        width: right - left + p.strokePx,
+        height: bottom - top + p.strokePx,
+    };
+}
+// The nearest point to (px, py) on segment (ax, ay)-(bx, by), into `best`
+// where it is nearer than what `best` holds.
+function nearSegment(ax, ay, bx, by, px, py, best) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const lenSq = dx * dx + dy * dy;
+    const t = lenSq > 0
+        ? Math.min(1, Math.max(0, ((px - ax) * dx + (py - ay) * dy) / lenSq))
+        : 0;
+    const x = ax + t * dx;
+    const y = ay + t * dy;
+    const distSq = (px - x) ** 2 + (py - y) ** 2;
+    if (distSq < best.distSq) {
+        best.x = x;
+        best.y = y;
+        best.distSq = distSq;
+    }
+}
+// The nearest point of the drawn ink's centreline, over the chords the GPU
+// strip is built from.
+function nearestOnConnector(p, arrowPx, px, py) {
+    const best = { x: p.x0, y: p.y0, distSq: Infinity };
+    let ax = p.x0;
+    let ay = p.y0;
+    for (let k = 1; k <= CONNECTOR_CURVE_SEGMENTS; k++) {
+        cubicAt(p, k / CONNECTOR_CURVE_SEGMENTS, POINT);
+        nearSegment(ax, ay, POINT.x, POINT.y, px, py, best);
+        ax = POINT.x;
+        ay = POINT.y;
+    }
+    if (p.arrow) {
+        for (const sign of [-1, 1]) {
+            nearSegment(p.x3 + p.back, p.y3 + sign * arrowPx, p.x3, p.y3, px, py, best);
+        }
+    }
+    return best;
+}
+/**
+ * A connector's two ends in canvas px, for a gesture that acts on the nearer
+ * one; undefined where the instance places nowhere.
+ */
+export function connectorEnds(c, block, params, i) {
+    const p = newPlaced();
+    return place(c, params, block.displayedRegionIndex, i, p, getDpr())
+        ? { x: p.x0, y: p.y0, x2: p.x3, y2: p.y3 }
+        : undefined;
+}
+const PLACED = newPlaced();
+export const connectorMark = {
+    id: 'connector',
+    spansView: true,
+    pass: {
+        ...slangPass({ id: 'connector', mod: shader }),
+        pack: c => shader.packInstances({
+            x: c.x,
+            x2: c.x2,
+            x2Region: c.x2Region,
+            row: c.row,
+            row2: c.row2,
+            bend: c.bend,
+            width: c.width,
+            color: c.color,
+            bits: c.bits,
+        }, c.count),
+    },
+    writeUniforms(scratch, _clip, block, frame, params) {
+        shader.writeUniforms(scratch, {
+            canvasHeight: frame.canvasHeight,
+            canvasWidth: frame.canvasWidth,
+            devicePixelRatio: getDpr(),
+            rowOffsetPx: params.rowOffsetPx,
+            rowPitchPx: params.rowPitchPx,
+            maxHandlePx: params.maxHandlePx ?? CONNECTOR_MAX_HANDLE_PX,
+            dashPx: params.strokeDash?.[0] ?? 0,
+            gapPx: params.strokeDash?.[1] ?? 0,
+            arrowPx: params.arrowPx,
+            zero: 0,
+            ...viewRegionUniforms(params.regions, block.displayedRegionIndex),
+        });
+    },
+    paintsBlock(block, _frame, params) {
+        return params.regions[block.displayedRegionIndex] !== undefined;
+    },
+    paintBlock(ctx, c, block, frame, params) {
+        const own = block.displayedRegionIndex;
+        const dpr = getDpr();
+        const dash = params.strokeDash ? [...params.strokeDash] : [];
+        ctx.lineCap = 'butt';
+        for (let i = 0; i < c.count; i++) {
+            if (!place(c, params, own, i, PLACED, dpr) || offCanvas(PLACED, frame)) {
+                continue;
+            }
+            ctx.lineWidth = PLACED.strokePx;
+            ctx.strokeStyle = abgrToCssRgba(c.color[i]);
+            ctx.setLineDash((c.bits[i] & CONNECTOR_DASHED) !== 0 ? dash : []);
+            ctx.beginPath();
+            traceCurve(ctx, PLACED);
+            ctx.stroke();
+            if (PLACED.arrow) {
+                ctx.setLineDash([]);
+                ctx.beginPath();
+                traceArrow(ctx, PLACED, params.arrowPx);
+                ctx.stroke();
+            }
+        }
+        ctx.setLineDash([]);
+    },
+    ink(c, block, _frame, params, i) {
+        const p = newPlaced();
+        if (!place(c, params, block.displayedRegionIndex, i, p, getDpr())) {
+            return undefined;
+        }
+        return {
+            ...inkBox(p, params.arrowPx),
+            stroke: {
+                d: svgPathOf(p, params.arrowPx),
+                widthPx: p.strokePx,
+                originX: 0,
+                originY: 0,
+            },
+        };
+    },
+    hitNearest(c, block, _frame, params, xPx, yPx, candidates, maxDistSq) {
+        const own = block.displayedRegionIndex;
+        const dpr = getDpr();
+        const reach = Math.sqrt(maxDistSq);
+        return nearestInk(candidates, maxDistSq, i => {
+            if (!place(c, params, own, i, PLACED, dpr)) {
+                return undefined;
+            }
+            const box = inkBox(PLACED, params.arrowPx);
+            if (xPx < box.left - reach ||
+                xPx > box.left + box.width + reach ||
+                yPx < box.top - reach ||
+                yPx > box.top + box.height + reach) {
+                return undefined;
+            }
+            const near = nearestOnConnector(PLACED, params.arrowPx, xPx, yPx);
+            const dist = Math.sqrt(near.distSq);
+            const half = PLACED.strokePx / 2;
+            if (dist <= half) {
+                return { x: xPx, y: yPx, distSq: 0 };
+            }
+            const t = half / 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 };
+        });
+    },
+};

package/esm/marks/drawAgainstHit.d.ts

@@ -65,7 +65,7 @@ export declare function inkViolations<C, S extends MarkFrame>(mark: Mark<C, S>,
  * **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
+ * batches a color 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

package/esm/marks/drawAgainstHit.js

@@ -3,7 +3,7 @@ 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
+ * batches by color 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
@@ -12,9 +12,9 @@ const IDENTITY = [1, 0, 0, 1, 0, 0];
  * 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
+ * because a painter that batches a color 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
+ * record is the `strokeStyle` it went down in; the field is the color of the
  * ink either way.
  *
  * `save`/`restore` bracket the transform and the styles the way a real context
@@ -281,7 +281,7 @@ function hitViolations(hit, boxes, x, y) {
  * **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
+ * batches a color 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

package/esm/marks/glyphPaint.d.ts

@@ -3,11 +3,12 @@ import type { InkRect, MarkContext2D } from './types.ts';
 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)`.
+ * `(cx, y)`. The triangle is `triangleHeight` tall, `diameter` unless the
+ * mark draws one wider than it is tall.
  *
  * 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
+ * is. The caller owns `beginPath`/`fill`, so a run of one color can batch into
  * a single fill.
  *
  * Its own module, not `pointMark.ts`'s: this is the half of the shape a
@@ -15,7 +16,7 @@ export type GlyphPath = Pick<MarkContext2D, 'moveTo' | 'lineTo' | 'closePath' |
  * 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;
+export declare function appendGlyph(ctx: GlyphPath, glyph: number, cx: number, y: number, diameter: number, triangleHeight?: 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
@@ -33,4 +34,4 @@ export declare function pointInsetPx(diameter: number): number;
  * 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;
+export declare function glyphBox(glyph: number, cx: number, y: number, diameter: number, triangleHeight?: number): InkRect;

package/esm/marks/glyphPaint.js

@@ -3,11 +3,12 @@ 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)`.
+ * `(cx, y)`. The triangle is `triangleHeight` tall, `diameter` unless the
+ * mark draws one wider than it is tall.
  *
  * 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
+ * is. The caller owns `beginPath`/`fill`, so a run of one color can batch into
  * a single fill.
  *
  * Its own module, not `pointMark.ts`'s: this is the half of the shape a
@@ -15,12 +16,13 @@ import { DIAMOND_GLYPH_SCALE, GLYPH_DIAMOND, GLYPH_SQUARE, GLYPH_TRIANGLE, } fro
  * 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) {
+export function appendGlyph(ctx, glyph, cx, y, diameter, triangleHeight = 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);
+        const ry = triangleHeight / 2;
+        ctx.moveTo(cx - r, y - ry);
+        ctx.lineTo(cx + r, y - ry);
+        ctx.lineTo(cx, y + ry);
         ctx.closePath();
     }
     else if (glyph === GLYPH_DIAMOND) {
@@ -58,8 +60,16 @@ export function pointInsetPx(diameter) {
  * 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) {
+export function glyphBox(glyph, cx, y, diameter, triangleHeight = diameter) {
     const r = diameter / 2;
+    if (glyph === GLYPH_TRIANGLE) {
+        return {
+            left: cx - r,
+            top: y - triangleHeight / 2,
+            width: diameter,
+            height: triangleHeight,
+        };
+    }
     if (glyph === GLYPH_DIAMOND) {
         const ri = r * DIAMOND_GLYPH_SCALE;
         return { left: cx - ri, top: y - ri, width: 2 * ri, height: 2 * ri };