@kgdiff/renderer 0.0.0-stage → 0.1.0

package/src/draw/background.ts

@@ -0,0 +1,139 @@
+/**
+ * Background and dot grid.
+ *
+ * Dots (1.2 px) sit every 24 world units. When their screen spacing drops below 14.4 px they
+ * fade out (gone at 9.6 px, i.e. zoom 0.4) while the 4× coarser level stays, recursively, so the
+ * grid never moirés at any zoom. Each level is ONE `fillRect` with a repeating pattern whose
+ * tile is rasterized at the exact device-pixel spacing (cost independent of dot count).
+ */
+import type { Theme } from '@kgdiff/scene';
+import type { Ctx2D, Surface, SurfaceFactory } from '../ctx.js';
+import { smoothstep, TAU } from '../math.js';
+import type { View } from './view.js';
+
+export const GRID_SPACING = 24;
+export const GRID_DOT = 1.2;
+const FADE_LO = 9.6;
+const FADE_HI = 14.4;
+
+/** Levels to draw at zoom `k`: [spacing (world), alpha, omit every 4th dot] pairs, coarse first. */
+export function gridLevels(k: number): { spacing: number; alpha: number; nested: boolean }[] {
+  if (!(k > 0)) return [];
+  let spacing = GRID_SPACING;
+  for (let i = 0; i < 12 && spacing * k < FADE_LO; i++) spacing *= 4;
+  const a = smoothstep(FADE_LO, FADE_HI, spacing * k);
+  if (a >= 0.999) return [{ spacing, alpha: 1, nested: false }];
+  return [
+    { spacing: spacing * 4, alpha: 1, nested: false },
+    { spacing, alpha: a, nested: true },
+  ];
+}
+
+interface Tile {
+  surface: Surface;
+  key: string;
+  pattern: CanvasPattern | null;
+}
+
+/** Pattern tiles per grid level, re-rasterized only when the device spacing changes. */
+export class GridTiles {
+  private readonly tiles: (Tile | null)[] = [null, null];
+
+  constructor(private readonly factory: SurfaceFactory) {}
+
+  clear(): void {
+    this.tiles[0] = null;
+    this.tiles[1] = null;
+  }
+
+  /**
+   * Pattern for a tile `size` device px wide holding `m × m` dots (the first omitted when
+   * `nested`, as the coarser level draws it).
+   */
+  pattern(
+    ctx: Ctx2D,
+    slot: number,
+    size: number,
+    m: number,
+    nested: boolean,
+    color: string,
+    dotR: number,
+  ): CanvasPattern | null {
+    const key = `${size}|${m}|${nested}|${color}|${dotR}`;
+    let tile = this.tiles[slot] ?? null;
+    if (tile?.key === key) return tile.pattern;
+    if (!tile) {
+      const surface = this.factory(size, size);
+      if (!surface) return null;
+      tile = { surface, key: '', pattern: null };
+      this.tiles[slot] = tile;
+    }
+    const { canvas, ctx: tctx } = tile.surface;
+    canvas.width = size;
+    canvas.height = size;
+    tctx.setTransform(1, 0, 0, 1, 0, 0);
+    tctx.clearRect(0, 0, size, size);
+    tctx.fillStyle = color;
+    tctx.beginPath();
+    const step = size / m;
+    for (let j = 0; j < m; j++) {
+      for (let i = 0; i < m; i++) {
+        if (nested && i === 0 && j === 0) continue;
+        const cx = (i + 0.5) * step;
+        const cy = (j + 0.5) * step;
+        tctx.moveTo(cx + dotR, cy);
+        tctx.arc(cx, cy, dotR, 0, TAU);
+      }
+    }
+    tctx.fill();
+    tile.key = key;
+    tile.pattern = ctx.createPattern(canvas, 'repeat');
+    return tile.pattern;
+  }
+}
+
+export function drawBackground(
+  ctx: Ctx2D,
+  v: View,
+  theme: Theme,
+  tiles: GridTiles | null,
+  spotlight: number,
+): void {
+  ctx.globalAlpha = 1;
+  ctx.fillStyle = theme.canvas.background;
+  ctx.fillRect(0, 0, v.width, v.height);
+  if (!tiles) return;
+  const dim = 1 - 0.5 * Math.min(1, Math.max(0, Number.isFinite(spotlight) ? spotlight : 0));
+  const levels = gridLevels(v.k);
+  const dpr = v.dpr;
+  const W = Math.ceil(v.width * dpr);
+  const H = Math.ceil(v.height * dpr);
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  for (let slot = 0; slot < levels.length; slot++) {
+    const level = levels[slot]!;
+    const m = level.nested ? 4 : 1;
+    const period = m * level.spacing * v.k * dpr; // device px between tile repeats
+    const size = Math.max(2, Math.round(period));
+    const pattern = tiles.pattern(
+      ctx,
+      slot,
+      size,
+      m,
+      level.nested,
+      theme.canvas.grid,
+      (GRID_DOT / 2) * dpr,
+    );
+    if (!pattern || typeof pattern.setTransform !== 'function') continue;
+    const s = period / size;
+    // Align the first dot of the tile (at half a step) with world (0, 0).
+    const half = (0.5 * period) / m;
+    const e = (((v.ox * dpr - half) % period) + period) % period;
+    const f = (((v.oy * dpr - half) % period) + period) % period;
+    pattern.setTransform({ a: s, b: 0, c: 0, d: s, e, f });
+    ctx.globalAlpha = level.alpha * dim;
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, W, H);
+  }
+  ctx.restore();
+}

package/src/draw/badges.ts

@@ -0,0 +1,93 @@
+/** Badge pass: compact change summaries (`+2 −1 ~1`, `⊕ 3`) as pills at a node's upper right. */
+import type { FrameVisuals, Theme } from '@kgdiff/scene';
+import type { Ctx2D } from '../ctx.js';
+import type { FrameCache } from '../frame-cache.js';
+import type { CollisionGrid } from '../labels.js';
+import { snap } from '../math.js';
+import type { Fonts, TextMeasurer } from '../text.js';
+import { roundRectPath } from './shapes.js';
+import { NODE_MIN_R, type View } from './view.js';
+
+export const BADGE_HEIGHT = 15;
+export const BADGE_PAD_X = 5;
+export const BADGE_FONT_SIZE = 10;
+
+/**
+ * Badges are laid out before label placement (they are obstacles labels and pills avoid) and
+ * drawn after nodes. The pill gets an opaque background first so its translucent tint reads the
+ * same over edges and over empty canvas.
+ */
+export class BadgePass {
+  /** x, y, w, h, node index per laid-out badge. */
+  private boxes = new Float64Array(5 * 32);
+  private count = 0;
+  private font = '';
+
+  /** Compute visible badge boxes and register them in `obstacles`. */
+  layout(
+    frame: FrameVisuals,
+    cache: FrameCache,
+    v: View,
+    fonts: Fonts,
+    measurer: TextMeasurer,
+    obstacles: CollisionGrid,
+  ): void {
+    this.count = 0;
+    if (cache.badges.length === 0) return;
+    const { k, ox, oy, dpr } = v;
+    const font = fonts.get(BADGE_FONT_SIZE, 600, true);
+    this.font = font;
+    for (const i of cache.badges) {
+      const n = frame.nodes[i]!;
+      const badge = n.badge!;
+      if (k < badge.minZoom || n.alpha < 0.02) continue;
+      // Anchor on the outermost outline (ring included) so the pill never covers it.
+      const ring = n.ring;
+      const r = Math.max(n.r * k, NODE_MIN_R) + (ring ? ring.gap + ring.width / 2 : 0);
+      const w = Math.ceil(measurer.width(font, badge.text)) + 2 * BADGE_PAD_X;
+      const h = BADGE_HEIGHT;
+      const bx = snap(n.x * k + ox + r * 0.7 - 2, dpr);
+      const by = snap(n.y * k + oy - r * 0.7 - h + 2, dpr);
+      if (bx + w < v.x0 || bx > v.x1 || by + h < v.y0 || by > v.y1) continue;
+      obstacles.insert(bx - 1, by - 1, w + 2, h + 2);
+      if (this.boxes.length < (this.count + 1) * 5) {
+        const next = new Float64Array(this.boxes.length * 2);
+        next.set(this.boxes);
+        this.boxes = next;
+      }
+      const o = this.count++ * 5;
+      this.boxes[o] = bx;
+      this.boxes[o + 1] = by;
+      this.boxes[o + 2] = w;
+      this.boxes[o + 3] = h;
+      this.boxes[o + 4] = i;
+    }
+  }
+
+  /** Draw the badges laid out by `layout`. */
+  draw(ctx: Ctx2D, frame: FrameVisuals, theme: Theme): void {
+    if (this.count === 0) return;
+    ctx.font = this.font;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    for (let b = 0; b < this.count; b++) {
+      const o = b * 5;
+      const bx = this.boxes[o]!;
+      const by = this.boxes[o + 1]!;
+      const w = this.boxes[o + 2]!;
+      const h = this.boxes[o + 3]!;
+      const n = frame.nodes[this.boxes[o + 4]!]!;
+      const badge = n.badge;
+      if (!badge) continue;
+      ctx.globalAlpha = n.alpha;
+      ctx.beginPath();
+      roundRectPath(ctx, bx, by, w, h, h / 2);
+      ctx.fillStyle = theme.canvas.background;
+      ctx.fill();
+      ctx.fillStyle = badge.background;
+      ctx.fill();
+      ctx.fillStyle = badge.color;
+      ctx.fillText(badge.text, bx + w / 2, by + h / 2 + 0.5);
+    }
+  }
+}

package/src/draw/collapsed.ts

@@ -0,0 +1,86 @@
+/** Collapsed-group pills (“+38 unchanged”): hidden nodes summarized at their centroid. */
+import type { CollapsedGroup, Theme } from '@kgdiff/scene';
+import type { Ctx2D } from '../ctx.js';
+import { crispOffset, snap } from '../math.js';
+import type { Fonts, TextMeasurer } from '../text.js';
+import { roundRectPath } from './shapes.js';
+import type { View } from './view.js';
+
+export const PILL_HEIGHT = 20;
+export const PILL_PAD_X = 8;
+export const PILL_FONT_SIZE = 11;
+
+const texts = new Map<number, string>();
+
+/** Pill text: the scene's localized `label`, else `+N` (cached per count). */
+export function pillText(g: CollapsedGroup): string {
+  if (typeof g.label === 'string' && g.label.length > 0) return g.label;
+  const count = g.count;
+  let t = texts.get(count);
+  if (t === undefined) {
+    t = `+${count.toLocaleString('en-US')}`;
+    if (texts.size > 4096) texts.clear();
+    texts.set(count, t);
+  }
+  return t;
+}
+
+/** Screen rectangle of a group's pill: [x, y, w, h] written into `out`. */
+export function pillRect(
+  g: CollapsedGroup,
+  v: Pick<View, 'k' | 'ox' | 'oy' | 'dpr'>,
+  fonts: Fonts,
+  measurer: TextMeasurer,
+  out: Float64Array,
+): Float64Array {
+  const w = Math.ceil(measurer.width(fonts.get(PILL_FONT_SIZE, 500), pillText(g))) + 2 * PILL_PAD_X;
+  out[0] = snap(g.x * v.k + v.ox - w / 2, v.dpr);
+  out[1] = snap(g.y * v.k + v.oy - PILL_HEIGHT / 2, v.dpr);
+  out[2] = w;
+  out[3] = PILL_HEIGHT;
+  return out;
+}
+
+const rect = new Float64Array(4);
+
+/** Draw the pills that won their spot in label placement (`shown[i] === 1`). */
+export function drawCollapsed(
+  ctx: Ctx2D,
+  groups: readonly CollapsedGroup[],
+  shown: Uint8Array,
+  v: View,
+  theme: Theme,
+  fonts: Fonts,
+  measurer: TextMeasurer,
+): void {
+  if (groups.length === 0) return;
+  const font = fonts.get(PILL_FONT_SIZE, 500);
+  const o = crispOffset(1, v.dpr);
+  let styled = false;
+  for (let i = 0; i < groups.length; i++) {
+    const g = groups[i]!;
+    if (shown[i] !== 1) continue;
+    pillRect(g, v, fonts, measurer, rect);
+    const x = rect[0]!;
+    const y = rect[1]!;
+    const w = rect[2]!;
+    const h = rect[3]!;
+    if (x + w < v.x0 || x > v.x1 || y + h < v.y0 || y > v.y1) continue;
+    if (!styled) {
+      ctx.globalAlpha = 1;
+      ctx.lineWidth = 1;
+      ctx.font = font;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      styled = true;
+    }
+    ctx.beginPath();
+    roundRectPath(ctx, x + o, y + o, w - 2 * o, h - 2 * o, h / 2);
+    ctx.fillStyle = theme.surface.raised;
+    ctx.fill();
+    ctx.strokeStyle = theme.surface.borderStrong;
+    ctx.stroke();
+    ctx.fillStyle = theme.text.secondary;
+    ctx.fillText(pillText(g), x + w / 2, y + h / 2 + 0.5);
+  }
+}

package/src/draw/edges.ts

@@ -0,0 +1,135 @@
+/**
+ * Edge pass: one path + one stroke per style bucket (and one fill for its arrowheads),
+ * buckets in z order. Endpoints are trimmed at node radii; culled against the region.
+ */
+import type { FrameVisuals } from '@kgdiff/scene';
+import { type Ctx2D, NO_DASH } from '../ctx.js';
+import type { EdgeBucket, FrameCache } from '../frame-cache.js';
+import { segmentHitsRect } from '../math.js';
+import { LINK_ARROW, LINK_NONE, linkPath, loopCenterY, loopPath, loopRadius } from './link.js';
+import { arrowPath } from './shapes.js';
+import { ARROW_GAP, CULL_MARGIN, NODE_MIN_R, type View } from './view.js';
+
+const tip = new Float64Array(4);
+let arrows = new Float64Array(4 * 256);
+
+function pushArrow(n: number): void {
+  if (arrows.length < (n + 1) * 4) {
+    const next = new Float64Array(arrows.length * 2);
+    next.set(arrows);
+    arrows = next;
+  }
+  const o = n * 4;
+  arrows[o] = tip[0]!;
+  arrows[o + 1] = tip[1]!;
+  arrows[o + 2] = tip[2]!;
+  arrows[o + 3] = tip[3]!;
+}
+
+function applyStroke(ctx: Ctx2D, b: EdgeBucket): void {
+  ctx.globalAlpha = b.alpha;
+  ctx.strokeStyle = b.color;
+  ctx.lineWidth = b.width;
+  ctx.setLineDash(b.dash ?? NO_DASH);
+  ctx.lineDashOffset = b.dash ? b.dashOffset : 0;
+  ctx.lineCap = b.dash ? 'butt' : 'round';
+  ctx.lineJoin = 'round';
+}
+
+/** Whether a link is a self-loop (both endpoints at the same world position). */
+export function isLoop(x1: number, y1: number, x2: number, y2: number): boolean {
+  return Math.abs(x2 - x1) + Math.abs(y2 - y1) < 1e-9;
+}
+
+/** Arrowhead LOD: shown from `arrowMinZoom` on (a missing / NaN threshold shows it). */
+export function showsArrow(arrow: boolean, minZoom: number, k: number): boolean {
+  return arrow && !(k < minZoom);
+}
+
+export function drawEdges(ctx: Ctx2D, frame: FrameVisuals, cache: FrameCache, v: View): void {
+  const { k, ox, oy } = v;
+  const minX = v.x0 - CULL_MARGIN;
+  const maxX = v.x1 + CULL_MARGIN;
+  const minY = v.y0 - CULL_MARGIN;
+  const maxY = v.y1 + CULL_MARGIN;
+  const edges = frame.edges;
+  for (const b of cache.edgeBuckets) {
+    let started = false;
+    let nArrows = 0;
+    const members = b.members;
+    for (let m = 0; m < members.length; m++) {
+      const e = edges[members[m]!]!;
+      const x1 = e.x1 * k + ox;
+      const y1 = e.y1 * k + oy;
+      const x2 = e.x2 * k + ox;
+      const y2 = e.y2 * k + oy;
+      const r1 = Math.max(e.r1 * k, NODE_MIN_R);
+      const loop = isLoop(e.x1, e.y1, e.x2, e.y2);
+      if (loop) {
+        const rho = loopRadius(r1, e.curvature);
+        const cy = loopCenterY(y1, r1, rho);
+        if (x1 + rho < minX || x1 - rho > maxX || cy + rho < minY || cy - rho > maxY) {
+          v.stats.culledEdges++;
+          continue;
+        }
+      } else if (e.curvature === 0) {
+        if (!segmentHitsRect(x1, y1, x2, y2, minX, minY, maxX, maxY)) {
+          v.stats.culledEdges++;
+          continue;
+        }
+      } else {
+        const cx = (x1 + x2) / 2 - (y2 - y1) * e.curvature;
+        const cy = (y1 + y2) / 2 + (x2 - x1) * e.curvature;
+        if (
+          Math.max(x1, x2, cx) < minX ||
+          Math.min(x1, x2, cx) > maxX ||
+          Math.max(y1, y2, cy) < minY ||
+          Math.min(y1, y2, cy) > maxY
+        ) {
+          v.stats.culledEdges++;
+          continue;
+        }
+      }
+      if (!started) {
+        applyStroke(ctx, b);
+        ctx.beginPath();
+        started = true;
+      }
+      let res: number;
+      if (loop) {
+        res = loopPath(ctx, x1, y1, r1, e.curvature, e.progress);
+      } else {
+        const arrow = showsArrow(e.arrow, e.arrowMinZoom, k);
+        const r2 = Math.max(e.r2 * k, NODE_MIN_R) + (arrow ? ARROW_GAP : 0);
+        res = linkPath(
+          ctx,
+          x1,
+          y1,
+          x2,
+          y2,
+          e.curvature,
+          r1,
+          r2,
+          e.progress,
+          e.fromTarget,
+          arrow,
+          tip,
+        );
+        if (res === LINK_ARROW) pushArrow(nArrows++);
+      }
+      if (res !== LINK_NONE) v.stats.edges++;
+    }
+    if (!started) continue;
+    ctx.stroke();
+    v.stats.edgeStrokes++;
+    if (nArrows > 0) {
+      ctx.fillStyle = b.color;
+      ctx.beginPath();
+      for (let a = 0; a < nArrows; a++) {
+        const o = a * 4;
+        arrowPath(ctx, arrows[o]!, arrows[o + 1]!, arrows[o + 2]!, arrows[o + 3]!);
+      }
+      ctx.fill();
+    }
+  }
+}

package/src/draw/glyphs.ts

@@ -0,0 +1,168 @@
+/**
+ * Glyph passes. Lines (merge / split / move / replacement arrows, edge ghosts, dotted
+ * suggestions with a `?` mark) are drawn above edges and below nodes, trimmed at `r1` / `r2`
+ * like edges; pivots are drawn above nodes so the dot on the shared endpoint stays visible.
+ * Edge ghosts (the before form of a retargeted / carried edge) are drawn like edges: the glyph's
+ * own dash (`4 3` in overlays, solid while crossfading in replay) and an edge-sized arrowhead,
+ * always shown since ghosts only exist for changed edges.
+ * Kinds this renderer does not know degrade to a plain line, so new scene kinds never break it.
+ */
+import type { FrameVisuals, GlyphVisual, Theme } from '@kgdiff/scene';
+import { type Ctx2D, NO_DASH } from '../ctx.js';
+import type { FrameCache } from '../frame-cache.js';
+import { TAU } from '../math.js';
+import type { Fonts } from '../text.js';
+import { LINK_ARROW, linkMidpoint, linkPath } from './link.js';
+import { arrowPath } from './shapes.js';
+import { ARROW_GAP, CULL_MARGIN, NODE_MIN_R, type View } from './view.js';
+
+/** Default suggestion pattern: round dots every 4 px. */
+export const SUGGESTION_DASH: readonly number[] = Object.freeze([0.001, 4]);
+/** Radius (px) of the suggestion `?` mark. */
+export const SUGGESTION_MARK_R = 7;
+
+export interface GlyphStyle {
+  /** Arrowhead at the end (a glyph's own `arrow` flag, when present, overrides it). */
+  readonly arrow: boolean;
+  /** Pattern used when the glyph has no `dash`. */
+  readonly dash: readonly number[] | null;
+  /** `?` mark at the midpoint. */
+  readonly mark: boolean;
+}
+
+const ARC: GlyphStyle = { arrow: true, dash: null, mark: false };
+const SUGGESTION: GlyphStyle = { arrow: false, dash: SUGGESTION_DASH, mark: true };
+const PLAIN: GlyphStyle = { arrow: false, dash: null, mark: false };
+
+/** How a glyph kind is drawn; unknown kinds (newer scenes) are a plain line. */
+export function glyphStyle(kind: string): GlyphStyle {
+  switch (kind) {
+    case 'merge-arrow':
+    case 'split-arrow':
+    case 'move-arrow':
+    case 'replacement-arrow':
+    case 'edge-ghost':
+      return ARC;
+    case 'suggestion':
+      return SUGGESTION;
+    default:
+      return PLAIN;
+  }
+}
+
+/** World radius → screen trim (px); 0 when the endpoint is not a node. */
+function trim(r: number, k: number): number {
+  return r > 0 && Number.isFinite(r) ? Math.max(r * k, NODE_MIN_R) : 0;
+}
+
+const tip = new Float64Array(4);
+
+export function drawGlyphArcs(
+  ctx: Ctx2D,
+  frame: FrameVisuals,
+  cache: FrameCache,
+  v: View,
+  theme: Theme,
+  fonts: Fonts,
+): void {
+  const { k, ox, oy } = v;
+  const minX = v.x0 - CULL_MARGIN;
+  const maxX = v.x1 + CULL_MARGIN;
+  const minY = v.y0 - CULL_MARGIN;
+  const maxY = v.y1 + CULL_MARGIN;
+  for (const i of cache.glyphArcs) {
+    const g = frame.glyphs[i]!;
+    const x1 = g.x1 * k + ox;
+    const y1 = g.y1 * k + oy;
+    const x2 = g.x2 * k + ox;
+    const y2 = g.y2 * k + oy;
+    const c = Number.isFinite(g.curvature) ? g.curvature : 0;
+    const cx = (x1 + x2) / 2 - (y2 - y1) * c;
+    const cy = (y1 + y2) / 2 + (x2 - x1) * c;
+    if (
+      Math.max(x1, x2, cx) < minX ||
+      Math.min(x1, x2, cx) > maxX ||
+      Math.max(y1, y2, cy) < minY ||
+      Math.min(y1, y2, cy) > maxY
+    ) {
+      continue;
+    }
+    const style = glyphStyle(g.kind);
+    const own = (g as GlyphVisual & { readonly arrow?: boolean }).arrow;
+    const arrow = typeof own === 'boolean' ? own : style.arrow;
+    const t1 = trim(g.r1, k);
+    const t2 = trim(g.r2, k);
+    const dash = g.dash !== null && g.dash.length > 0 ? g.dash : style.dash;
+    ctx.globalAlpha = g.alpha;
+    ctx.strokeStyle = g.color;
+    ctx.lineWidth = g.width;
+    ctx.setLineDash(dash ?? NO_DASH);
+    ctx.lineDashOffset = 0;
+    ctx.lineCap = dash === null || (dash[0] ?? 0) < 0.5 ? 'round' : 'butt';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    const res = linkPath(
+      ctx,
+      x1,
+      y1,
+      x2,
+      y2,
+      c,
+      t1,
+      t2 > 0 && arrow ? t2 + ARROW_GAP : t2,
+      g.progress,
+      false,
+      arrow,
+      tip,
+    );
+    ctx.stroke();
+    if (res === LINK_ARROW) {
+      ctx.fillStyle = g.color;
+      ctx.beginPath();
+      arrowPath(ctx, tip[0]!, tip[1]!, tip[2]!, tip[3]!);
+      ctx.fill();
+    }
+    if (style.mark && g.progress >= 1 && Math.hypot(x2 - x1, y2 - y1) > 6 * SUGGESTION_MARK_R) {
+      const [mx, my] = linkMidpoint(x1, y1, x2, y2, c);
+      ctx.setLineDash(NO_DASH);
+      ctx.beginPath();
+      ctx.arc(mx, my, SUGGESTION_MARK_R, 0, TAU);
+      ctx.fillStyle = theme.canvas.background;
+      ctx.fill();
+      ctx.lineWidth = 1.25;
+      ctx.stroke();
+      ctx.fillStyle = g.color;
+      ctx.font = fonts.get(10, 700);
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('?', mx, my + 0.5);
+    }
+  }
+}
+
+export function drawPivots(
+  ctx: Ctx2D,
+  frame: FrameVisuals,
+  cache: FrameCache,
+  v: View,
+  theme: Theme,
+): void {
+  const { k, ox, oy } = v;
+  for (const i of cache.pivots) {
+    const g = frame.glyphs[i]!;
+    const x = g.x1 * k + ox;
+    const y = g.y1 * k + oy;
+    // A dot of diameter `width` px, separated from what is under it by a background outline.
+    const r = Math.max(1.5, g.width / 2);
+    if (x + r < v.x0 || x - r > v.x1 || y + r < v.y0 || y - r > v.y1) continue;
+    ctx.globalAlpha = g.alpha;
+    ctx.fillStyle = theme.canvas.background;
+    ctx.beginPath();
+    ctx.arc(x, y, r + 1.5, 0, TAU);
+    ctx.fill();
+    ctx.fillStyle = g.color;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, TAU);
+    ctx.fill();
+  }
+}