@weasel-js/labkit 1.7.0 → 1.7.1

package/src/annotations/frac.ts

@@ -1,13 +1,17 @@
+import {
+  type Box,
+  boundsOfCoords,
+  boxContainsBox,
+  boxContainsPoint,
+  type Rect,
+} from '@weasel-js/geom';
 import type { FracPoint, FracRect } from './types';
 
 /** A mark's box in its target's world: CSS pixels at zoom 1. Matches weasel's
  *  default `RectPose`, which is what the scene stores. */
-export interface WorldRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
+export type WorldRect = Rect;
+
+const boxOfFrac = (f: FracRect): Box => [f.x, f.y, f.x + f.w, f.y + f.h];
 
 /** Where a fraction lands on a content box of this size. */
 export function fracToWorld(f: FracRect, content: { w: number; h: number }): WorldRect {
@@ -46,22 +50,46 @@ export function roundFrac(f: FracRect): FracRect {
 /** Whether `pt` falls in `box`, widened by `tol` on every side so a hairline
  *  mark stays reachable. */
 export function fracContains(box: FracRect, pt: FracPoint, tol = 0): boolean {
-  return (
-    pt.x >= box.x - tol &&
-    pt.x <= box.x + box.w + tol &&
-    pt.y >= box.y - tol &&
-    pt.y <= box.y + box.h + tol
-  );
+  const [x0, y0, x1, y1] = boxOfFrac(box);
+  return boxContainsPoint([x0 - tol, y0 - tol, x1 + tol, y1 + tol], pt.x, pt.y);
 }
 
 /** Whether `outer` wholly encloses `inner`. A marquee takes what it encloses,
  *  not what it grazes — brushing selection is a different gesture, and this
  *  answers false for two rects that merely overlap. */
 export function fracEncloses(outer: FracRect, inner: FracRect): boolean {
-  return (
-    inner.x >= outer.x &&
-    inner.y >= outer.y &&
-    inner.x + inner.w <= outer.x + outer.w &&
-    inner.y + inner.h <= outer.y + outer.h
-  );
+  return boxContainsBox(boxOfFrac(outer), boxOfFrac(inner));
+}
+
+/** The smallest box holding every point — zero-size for a single one, and
+ *  `null` for none. */
+export function boundsOf(points: readonly FracPoint[]): FracRect | null {
+  const b = boundsOfCoords(points.flatMap((p) => [p.x, p.y]));
+  return b && { x: b[0], y: b[1], w: b[2] - b[0], h: b[3] - b[1] };
+}
+
+/** Points restated as fractions of `box` itself, so they move and stretch with
+ *  it. Unit-agnostic: `points` and `box` only have to share one. A box with no
+ *  width or height puts every point on its edge along that axis. */
+export function toShape(points: readonly FracPoint[], box: FracRect): FracPoint[] {
+  return points.map((p) => ({
+    x: box.w === 0 ? 0 : (p.x - box.x) / box.w,
+    y: box.h === 0 ? 0 : (p.y - box.y) / box.h,
+  }));
 }
+
+/** `toShape`'s inverse: a shape placed in `box`, in `box`'s units. */
+export function fromShape(shape: readonly FracPoint[], box: FracRect): FracPoint[] {
+  return shape.map((s) => ({ x: box.x + s.x * box.w, y: box.y + s.y * box.h }));
+}
+
+/** A world rect as the `{ x, y, w, h }` the shape helpers take. */
+export const boxOf = (r: WorldRect): FracRect => ({ x: r.x, y: r.y, w: r.width, h: r.height });
+
+const roundPoint = (p: FracPoint): FracPoint => ({
+  x: Math.round(p.x * DP) / DP,
+  y: Math.round(p.y * DP) / DP,
+});
+
+/** `roundFrac` for points. */
+export const roundPoints = (pts: readonly FracPoint[]): FracPoint[] => pts.map(roundPoint);

package/src/annotations/index.ts

@@ -23,6 +23,7 @@ export type {
   AnnotationMeaning,
   AnnotationPatch,
   AnnotationQuery,
+  AnnotationSelectionMode,
   AnnotationStatus,
   AnnotationsApi,
   AnnotationsCapability,

package/src/annotations/paint.test.ts

@@ -1,9 +1,11 @@
-import { describe, expect, it } from 'vitest';
-import { markCommands } from './paint';
+import { registerNodeShape, type SceneNode, shapeCoversPoint } from '@weasel-js/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { WorldRect } from './frac';
+import { markCommands, POINT_MARK_SHAPE } from './paint';
 import type { AnnotationData, AnnotationKind, FracPoint } from './types';
 
-const CONTENT = { w: 200, h: 100 };
 const POSE = { x: 20, y: 10, width: 60, height: 40 };
+const AT_50: WorldRect = { x: 50, y: 50, width: 0, height: 0 };
 
 function mark(kind: AnnotationKind, extra: Partial<AnnotationData> = {}) {
   return { pose: POSE, data: { target: 't', kind, ...extra } as AnnotationData };
@@ -17,20 +19,21 @@ function anchors(cmds: ReturnType<typeof markCommands>): number[] {
   return p.coords ? [...p.coords] : [];
 }
 
+/** In fractions of `POSE`: (35, 10) and (80, 30) in world. */
 const ENDS: readonly FracPoint[] = [
-  { x: 0.1, y: 0.2 },
-  { x: 0.6, y: 0.9 },
+  { x: 0.25, y: 0 },
+  { x: 1, y: 0.5 },
 ];
 
 describe('markCommands', () => {
   it('draws a rect at the pose', () => {
-    const [cmd] = markCommands(mark('rect'), CONTENT);
+    const [cmd] = markCommands(mark('rect'));
     expect(cmd).toMatchObject({ kind: 'path', path: { kind: 'rect', ...POSE } });
     expect((cmd as { fill?: unknown }).fill).toBeUndefined();
   });
 
   it('draws an ellipse inscribed in the pose', () => {
-    const pts = anchors(markCommands(mark('ellipse'), CONTENT));
+    const pts = anchors(markCommands(mark('ellipse')));
     const xs = pts.filter((_, i) => i % 2 === 0);
     const ys = pts.filter((_, i) => i % 2 === 1);
     expect(Math.min(...xs)).toBeCloseTo(POSE.x, 4);
@@ -39,21 +42,16 @@ describe('markCommands', () => {
     expect(Math.max(...ys)).toBeCloseTo(POSE.y + POSE.height, 4);
   });
 
-  it('runs a line between its two stored ends, converted to world', () => {
-    expect(anchors(markCommands(mark('line', { points: ENDS }), CONTENT))).toEqual([
-      0.1 * 200,
-      0.2 * 100,
-      0.6 * 200,
-      0.9 * 100,
-    ]);
+  it('runs a line between its two stored ends, placed in the pose', () => {
+    expect(anchors(markCommands(mark('line', { shape: ENDS })))).toEqual([35, 10, 80, 30]);
   });
 
   it('makes an arrow the same line, carrying an end marker', () => {
-    const cmds = markCommands(mark('arrow', { points: ENDS }), CONTENT);
+    const cmds = markCommands(mark('arrow', { shape: ENDS }));
     expect(cmds).toHaveLength(1);
     const stroke = (cmds[0] as { stroke?: { markerEnd?: unknown } }).stroke;
     expect(stroke?.markerEnd).toBe('arrow');
-    expect(anchors(cmds)).toEqual([0.1 * 200, 0.2 * 100, 0.6 * 200, 0.9 * 100]);
+    expect(anchors(cmds)).toEqual([35, 10, 80, 30]);
   });
 
   it('threads a freehand stroke through every point', () => {
@@ -62,15 +60,13 @@ describe('markCommands', () => {
       { x: 0.5, y: 0.5 },
       { x: 1, y: 0 },
     ];
-    expect(anchors(markCommands(mark('stroke', { points: pts }), CONTENT))).toEqual([
-      0, 0, 100, 50, 200, 0,
-    ]);
+    expect(anchors(markCommands(mark('stroke', { shape: pts })))).toEqual([20, 10, 50, 30, 80, 10]);
   });
 
-  it('falls back to the pose diagonal when a points kind has no points', () => {
-    // A stored mark from a writer that dropped `points` must still draw
+  it('falls back to the pose diagonal when a vertex kind has no shape', () => {
+    // A stored mark from a writer that dropped `shape` must still draw
     // something at the right place, not vanish.
-    expect(anchors(markCommands(mark('line'), CONTENT))).toEqual([
+    expect(anchors(markCommands(mark('line')))).toEqual([
       POSE.x,
       POSE.y,
       POSE.x + POSE.width,
@@ -79,18 +75,18 @@ describe('markCommands', () => {
   });
 
   it('draws text at the pose, carrying the title', () => {
-    const [cmd] = markCommands(mark('text', { title: 'missing edge' }), CONTENT);
+    const [cmd] = markCommands(mark('text', { title: 'missing edge' }));
     expect(cmd).toMatchObject({ kind: 'text', x: POSE.x, y: POSE.y });
     const runs = (cmd as { runs: { text: string }[] }).runs;
     expect(runs.map((r) => r.text).join('')).toBe('missing edge');
   });
 
   it('draws an untitled text mark as nothing rather than an empty run', () => {
-    expect(markCommands(mark('text'), CONTENT)).toEqual([]);
+    expect(markCommands(mark('text'))).toEqual([]);
   });
 
-  it('draws a point as a small unfilled ring centered on its one stored point', () => {
-    const cmds = markCommands(mark('point', { points: [{ x: 0.25, y: 0.5 }] }), CONTENT);
+  it('draws a point as a small unfilled ring centered on its position', () => {
+    const cmds = markCommands({ pose: AT_50, data: { target: 't', kind: 'point' } });
     expect(cmds).toHaveLength(1);
     expect((cmds[0] as { fill?: unknown }).fill).toBeUndefined();
     const pts = anchors(cmds);
@@ -104,9 +100,56 @@ describe('markCommands', () => {
   });
 });
 
+describe('a point mark at different zooms', () => {
+  const POINT = { pose: AT_50, data: { target: 't', kind: 'point' } as AnnotationData };
+  const radiusAt = (zoom: number) => {
+    const xs = anchors(markCommands(POINT, {}, { x: zoom, y: zoom })).filter((_, i) => i % 2 === 0);
+    return (Math.max(...xs) - Math.min(...xs)) / 2;
+  };
+
+  it('sizes the ring in screen pixels, so its world radius scales inversely with zoom', () => {
+    expect(radiusAt(2)).toBeCloseTo(2, 4);
+    expect(radiusAt(4)).toBeCloseTo(1, 4);
+  });
+
+  it('keeps the ring round on screen under a non-uniform scale', () => {
+    const pts = anchors(markCommands(POINT, {}, { x: 2, y: 4 }));
+    const xs = pts.filter((_, i) => i % 2 === 0);
+    const ys = pts.filter((_, i) => i % 2 === 1);
+    expect((Math.max(...xs) - Math.min(...xs)) * 2).toBeCloseTo(
+      (Math.max(...ys) - Math.min(...ys)) * 4,
+      4,
+    );
+  });
+});
+
+describe('picking a point mark', () => {
+  let dispose: () => void = () => {};
+  beforeEach(() => {
+    dispose = registerNodeShape(POINT_MARK_SHAPE, { priority: 'high' });
+  });
+  afterEach(() => dispose());
+
+  const pose: WorldRect = { x: 50, y: 50, width: 0, height: 0 };
+  const node = {
+    id: 'p',
+    kind: 'leaf',
+    layer: 'marks',
+    pose,
+    data: { target: 't', kind: 'point' },
+  } as unknown as SceneNode<AnnotationData, 'marks', WorldRect>;
+
+  // Ring radius 4px plus half the 2px outline: the ring's outer edge is 5px out.
+  it.each([1, 4])('reaches the ring it draws and no further, at zoom %i', (zoom) => {
+    const at = (px: number) => shapeCoversPoint(node, pose, 50 + px / zoom, 50, { scale: zoom });
+    expect(at(4.9)).toBe(true);
+    expect(at(5.5)).toBe(false);
+  });
+});
+
 describe('markCommands styling', () => {
   it('takes a status color over the default', () => {
-    const [cmd] = markCommands(mark('rect'), CONTENT, { color: '#30a46c' });
+    const [cmd] = markCommands(mark('rect'), { color: '#30a46c' });
     expect((cmd as { stroke?: { paint?: { color?: string } } }).stroke?.paint?.color).toBe(
       '#30a46c',
     );
@@ -114,21 +157,19 @@ describe('markCommands styling', () => {
 
   it('dashes a stale mark rather than hiding it', () => {
     // A stale mark still describes something; dropping it would lose it.
-    const [fresh] = markCommands(mark('rect'), CONTENT);
-    const [stale] = markCommands(mark('rect'), CONTENT, { stale: true });
+    const [fresh] = markCommands(mark('rect'));
+    const [stale] = markCommands(mark('rect'), { stale: true });
     expect((fresh as { stroke?: { dash?: number[] } }).stroke?.dash).toBeUndefined();
     expect((stale as { stroke?: { dash?: number[] } }).stroke?.dash).toEqual([6, 4]);
   });
 
   it('dashes a stale point ring like any other mark', () => {
-    const [ring] = markCommands(mark('point', { points: [{ x: 0.25, y: 0.5 }] }), CONTENT, {
-      stale: true,
-    });
+    const [ring] = markCommands(mark('point'), { stale: true });
     expect((ring as { stroke?: { dash?: number[] } }).stroke?.dash).toEqual([6, 4]);
   });
 
   it("colors a text mark's glyphs too, not only the outlines", () => {
-    const [cmd] = markCommands(mark('text', { title: 'x' }), CONTENT, { color: '#30a46c' });
+    const [cmd] = markCommands(mark('text', { title: 'x' }), { color: '#30a46c' });
     const runs = (cmd as { runs: { fill?: { color?: string } }[] }).runs;
     expect(runs[0]?.fill?.color).toBe('#30a46c');
   });

package/src/annotations/paint.ts

@@ -1,7 +1,16 @@
-import type { DrawCommand, Path, Stroke } from '@weasel-js/core';
-import { ellipsePath, linePath, PathBuilder, rectPath, textCommand } from '@weasel-js/core';
-import type { WorldRect } from './frac';
-import type { AnnotationData, FracPoint } from './types';
+import type { DrawCommand, NodeShapeEntry, Path, Stroke, View } from '@weasel-js/core';
+import {
+  ellipsePath,
+  HANDLE_BASE_PX,
+  linePath,
+  meanScale,
+  PathBuilder,
+  pxExtent,
+  rectPath,
+  textCommand,
+} from '@weasel-js/core';
+import { boxOf, fromShape, type WorldRect } from './frac';
+import type { AnnotationData } from './types';
 
 /** One loud color, not a themed one: a mark sits over the instrument's own
  *  picture and has to be legible against whatever that picture is. */
@@ -9,7 +18,11 @@ const MARK_COLOR = '#e5484d';
 /** World units, so a mark thickens with the picture it annotates. */
 const MARK_WIDTH = 2;
 const TEXT_SIZE = 14;
-const POINT_RADIUS = 4;
+const STALE_DASH = [6, 4];
+/** Screen pixels: a point marks a place rather than a region of the picture,
+ *  so it holds its size like a selection handle. */
+const POINT_RADIUS_PX = HANDLE_BASE_PX / 2;
+const UNIT_SCALE: View['scale'] = { x: 1, y: 1 };
 
 /** The subset of a mark's scene node this needs: where it is, and what it is. */
 export interface PaintableMark {
@@ -28,16 +41,11 @@ export interface MarkStyle {
   stale?: boolean;
 }
 
-const toWorld = (p: FracPoint, content: { w: number; h: number }) => ({
-  x: p.x * content.w,
-  y: p.y * content.h,
-});
-
-/** A mark's stored vertices in world units, or the pose's diagonal — a stored
- *  mark whose `points` did not survive still has to draw somewhere. */
-function vertices(m: PaintableMark, content: { w: number; h: number }): { x: number; y: number }[] {
-  const stored = m.data.points;
-  if (stored && stored.length >= 2) return stored.map((p) => toWorld(p, content));
+/** A mark's stored vertices placed in its pose, or the pose's diagonal — a
+ *  stored mark whose `shape` did not survive still has to draw somewhere. */
+function vertices(m: PaintableMark): { x: number; y: number }[] {
+  const stored = m.data.shape;
+  if (stored && stored.length >= 2) return fromShape(stored, boxOf(m.pose));
   const { x, y, width, height } = m.pose;
   return [
     { x, y },
@@ -57,14 +65,18 @@ function polyline(points: { x: number; y: number }[]): Path {
 /**
  * What one mark draws, in its target's world.
  *
- * Pure: a node and the target's content box in, draw commands out. Geometry
- * that a bounding box cannot describe — a line's ends, a stroke's path — comes
- * from `data.points`, which is in fractions like the bounds.
+ * Pure: a node in, draw commands out, in its target's world. Geometry that a
+ * bounding box cannot describe — a line's ends, a stroke's path — comes from
+ * `data.shape`, placed in the pose.
+ *
+ * `scale` is the view's, world to screen. Only a point reads it — its ring is
+ * sized in screen pixels — and the default draws that ring as though a world
+ * unit were a pixel.
  */
 export function markCommands(
   m: PaintableMark,
-  content: { w: number; h: number },
   style: MarkStyle = {},
+  scale: View['scale'] = UNIT_SCALE,
 ): DrawCommand[] {
   const color = style.color ?? MARK_COLOR;
   const stroke: Stroke = {
@@ -72,7 +84,7 @@ export function markCommands(
     width: MARK_WIDTH,
     cap: 'round',
     join: 'round',
-    ...(style.stale ? { dash: [6, 4] } : {}),
+    ...(style.stale ? { dash: STALE_DASH } : {}),
   };
 
   switch (m.data.kind) {
@@ -83,26 +95,32 @@ export function markCommands(
     case 'ellipse':
       return [{ kind: 'path', path: ellipsePath(m.pose), stroke }];
     case 'line': {
-      const [a, b] = vertices(m, content);
+      const [a, b] = vertices(m);
       return [{ kind: 'path', path: linePath(a, b), stroke }];
     }
     case 'arrow': {
-      const [a, b] = vertices(m, content);
+      const [a, b] = vertices(m);
       // The spec's arrow: a line carrying an end marker, not its own geometry.
       return [{ kind: 'path', path: linePath(a, b), stroke: { ...stroke, markerEnd: 'arrow' } }];
     }
     case 'stroke':
-      return [{ kind: 'path', path: polyline(vertices(m, content)), stroke }];
+      return [{ kind: 'path', path: polyline(vertices(m)), stroke }];
     case 'point': {
-      const stored = m.data.points?.[0];
-      const c = stored ? toWorld(stored, content) : { x: m.pose.x, y: m.pose.y };
-      const ring = {
-        x: c.x - POINT_RADIUS,
-        y: c.y - POINT_RADIUS,
-        width: 2 * POINT_RADIUS,
-        height: 2 * POINT_RADIUS,
-      };
-      return [{ kind: 'path', path: ellipsePath(ring), stroke }];
+      const c = { x: m.pose.x, y: m.pose.y };
+      const r = pxExtent(POINT_RADIUS_PX, scale);
+      const ring = { x: c.x - r.x, y: c.y - r.y, width: 2 * r.x, height: 2 * r.y };
+      const px = 1 / meanScale(scale);
+      return [
+        {
+          kind: 'path',
+          path: ellipsePath(ring),
+          stroke: {
+            ...stroke,
+            width: MARK_WIDTH * px,
+            ...(stroke.dash ? { dash: stroke.dash.map((d) => d * px) } : {}),
+          },
+        },
+      ];
     }
     case 'text': {
       const text = m.data.title;
@@ -124,3 +142,23 @@ export function markCommands(
     }
   }
 }
+
+/**
+ * What picking reads for a point mark: its pose is zero-size, so without this
+ * the pointer slop alone decides how close counts, whatever the ring's size.
+ * Registered by the overlay, which is the one place marks are picked.
+ */
+export const POINT_MARK_SHAPE: NodeShapeEntry<AnnotationData, WorldRect> = {
+  id: 'labkit:point-mark',
+  matches: (node) =>
+    node.layer === 'marks' && node.data?.kind === 'point' && typeof node.data.target === 'string',
+  // The overlay paints through its own draw callback. This is for a scene
+  // drawn without one.
+  paint: (node, pose) => markCommands({ pose, data: node.data }),
+  silhouette: (_node, pose) => rectPath(pose.x, pose.y, 0, 0),
+  // Filled, so a click inside the ring lands on it as it would on a handle.
+  ink: (_node, _pose, ctx) => {
+    const s = ctx?.scale ?? 1;
+    return { filled: true, outset: (POINT_RADIUS_PX + MARK_WIDTH / 2) / s, inset: 0 };
+  },
+};

package/src/annotations/store.test.ts

@@ -1,6 +1,8 @@
+import { asNodeId } from '@weasel-js/core';
 import { describe, expect, it, vi } from 'vitest';
+import { markCommands } from './paint';
 import { annotationsFromJSON, createAnnotationStore } from './store';
-import type { AnnotationInit, AnnotationTargetInfo } from './types';
+import type { AnnotationInit, AnnotationsApi, AnnotationTargetInfo, FracPoint } from './types';
 
 const TARGETS: AnnotationTargetInfo[] = [
   { id: 'naive', content: { w: 256, h: 170 }, positionDependsOn: ['angle', 'shading'] },
@@ -162,7 +164,7 @@ describe('the annotation store', () => {
   // because jsdom has no WebGL2 and the overlay's canvas never paints or
   // hit-tests. That the canvas is bound to this scene is core's claim.
   it('merges the selection across targets, and maps it back to annotation ids', () => {
-    const store = makeStore();
+    const store = createAnnotationStore({ targets: () => TARGETS, selection: 'per-target' });
     const onNaive = store.add(RING);
     const onOcct = store.add({ ...RING, target: 'occt' });
 
@@ -227,6 +229,86 @@ describe('the annotation store', () => {
     expect(fn.mock.calls.length).toBe(before);
   });
 
+  describe('across targets', () => {
+    /** Selects a mark the way its pane's canvas does: on that target's scene. */
+    const click = (store: AnnotationsApi, id: string): void => {
+      const [target, node] = id.split('/') as [string, string];
+      store.sceneFor(target).setSelection([asNodeId(node)]);
+    };
+
+    it('clears a selection standing in one target when a mark is selected in another', () => {
+      const store = makeStore();
+      const onNaive = store.add(RING);
+      const onOcct = store.add({ ...RING, target: 'occt' });
+
+      click(store, onNaive);
+      click(store, onOcct);
+      expect(store.selection()).toEqual([onOcct]);
+      expect(store.sceneFor('naive').getSelection()).toEqual([]);
+    });
+
+    it('tells subscribers once, after the other target is already cleared', () => {
+      const store = makeStore();
+      const onNaive = store.add(RING);
+      const onOcct = store.add({ ...RING, target: 'occt' });
+      click(store, onNaive);
+
+      const seen: (readonly string[])[] = [];
+      store.subscribe(() => seen.push(store.selection()));
+      click(store, onOcct);
+      expect(seen).toEqual([[onOcct]]);
+    });
+
+    it('keeps a setSelection naming two targets to the first one, in one event', () => {
+      const store = makeStore();
+      const onNaive = store.add(RING);
+      const onOcct = store.add({ ...RING, target: 'occt' });
+      click(store, onNaive);
+
+      const fn = vi.fn();
+      store.subscribe(fn);
+      store.setSelection([onOcct, onNaive]);
+      expect(store.selection()).toEqual([onOcct]);
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it('leaves the other target alone for a change that selects nothing new', () => {
+      const store = makeStore();
+      const onNaive = store.add(RING);
+      store.add({ ...RING, target: 'occt' });
+      click(store, onNaive);
+
+      store.add({ ...RING, target: 'occt' });
+      store.sceneFor('occt').setSelection([]);
+      expect(store.selection()).toEqual([onNaive]);
+    });
+
+    it("keeps each target's own selection under `selection: 'per-target'`", () => {
+      const store = createAnnotationStore({ targets: () => TARGETS, selection: 'per-target' });
+      const onNaive = store.add(RING);
+      const onOcct = store.add({ ...RING, target: 'occt' });
+
+      click(store, onNaive);
+      click(store, onOcct);
+      expect(store.selection()).toEqual([onNaive, onOcct]);
+
+      store.setSelection([onOcct, onNaive]);
+      expect(store.selection()).toEqual([onNaive, onOcct]);
+    });
+
+    it('reads the mode at each change, for a capability swapped under a live store', () => {
+      let mode: 'exclusive' | 'per-target' = 'per-target';
+      const store = createAnnotationStore({ targets: () => TARGETS, selection: () => mode });
+      const onNaive = store.add(RING);
+      const onOcct = store.add({ ...RING, target: 'occt' });
+
+      click(store, onNaive);
+      mode = 'exclusive';
+      click(store, onOcct);
+      expect(store.selection()).toEqual([onOcct]);
+    });
+  });
+
   it('round-trips through JSON, and the snapshot is JSON-clean', () => {
     const store = makeStore();
     const id = store.add(RING, { angle: 'iso', shading: 'outline' });
@@ -295,6 +377,134 @@ describe('the annotation store', () => {
   });
 });
 
+/** What a target's first mark draws, as its path's points in fractions of the
+ *  content box — the drawn side, to hold against what the store hit-tests. */
+function drawn(store: AnnotationsApi, target = 'naive'): FracPoint[] {
+  const { w, h } = TARGETS.find((t) => t.id === target)?.content ?? { w: 0, h: 0 };
+  const [painted] = store.paintedMarks(target);
+  if (!painted) throw new Error('no mark painted');
+  const [cmd] = markCommands(painted.mark, painted.style);
+  if (cmd?.kind !== 'path') throw new Error('expected a path command');
+  const coords = [...((cmd.path as { coords?: Float32Array }).coords ?? [])];
+  const out: FracPoint[] = [];
+  for (let i = 0; i < coords.length; i += 2) {
+    out.push({ x: (coords[i] ?? 0) / w, y: (coords[i + 1] ?? 0) / h });
+  }
+  return out;
+}
+
+const centerOf = (pts: FracPoint[]): FracPoint => {
+  const xs = pts.map((p) => p.x);
+  const ys = pts.map((p) => p.y);
+  return {
+    x: (Math.min(...xs) + Math.max(...xs)) / 2,
+    y: (Math.min(...ys) + Math.max(...ys)) / 2,
+  };
+};
+
+const expectNear = (got: readonly FracPoint[], want: readonly FracPoint[]) => {
+  expect(got).toHaveLength(want.length);
+  got.forEach((p, i) => {
+    expect(p.x).toBeCloseTo(want[i]?.x ?? Number.NaN, 3);
+    expect(p.y).toBeCloseTo(want[i]?.y ?? Number.NaN, 3);
+  });
+};
+
+describe('a moved mark', () => {
+  const POINT: AnnotationInit = {
+    target: 'naive',
+    kind: 'point',
+    frac: { x: 0.25, y: 0.5, w: 0, h: 0 },
+    points: [{ x: 0.25, y: 0.5 }],
+  };
+  const LINE: AnnotationInit = {
+    target: 'naive',
+    kind: 'line',
+    frac: { x: 0.1, y: 0.2, w: 0.5, h: 0.4 },
+    points: [
+      { x: 0.1, y: 0.6 },
+      { x: 0.6, y: 0.2 },
+    ],
+  };
+
+  it('draws a point where the store hit-tests it after update moves it', () => {
+    const store = makeStore();
+    const id = store.add(POINT);
+    store.update(id, { frac: { x: 0.75, y: 0.25, w: 0, h: 0 } });
+
+    expectNear([centerOf(drawn(store))], [{ x: 0.75, y: 0.25 }]);
+    expect(store.hitTest('naive', { x: 0.75, y: 0.25 }, 0.001).map((a) => a.id)).toEqual([id]);
+    expect(store.get(id)?.points).toEqual([{ x: 0.75, y: 0.25 }]);
+  });
+
+  it('carries a line and a stroke along with their bounds', () => {
+    for (const kind of ['line', 'arrow', 'stroke'] as const) {
+      const store = makeStore();
+      const id = store.add({ ...LINE, kind });
+      store.update(id, { frac: { x: 0.3, y: 0.3, w: 0.5, h: 0.4 } });
+      const moved = [
+        { x: 0.3, y: 0.7 },
+        { x: 0.8, y: 0.3 },
+      ];
+      expectNear(drawn(store), moved);
+      expect(store.get(id)?.points).toEqual(moved);
+    }
+  });
+
+  it('stretches stored vertices with a resized box', () => {
+    const store = makeStore();
+    const id = store.add(LINE);
+    store.update(id, { frac: { x: 0.1, y: 0.2, w: 0.25, h: 0.8 } });
+    expectNear(drawn(store), [
+      { x: 0.1, y: 1 },
+      { x: 0.35, y: 0.2 },
+    ]);
+  });
+
+  it('follows a pose written straight to the scene, the way the pane moves a mark', () => {
+    const store = makeStore();
+    const id = store.add(POINT);
+    const node = asNodeId(id.slice(id.lastIndexOf('/') + 1));
+    store.sceneFor('naive').setPose(node, { x: 0.5 * 256, y: 0.1 * 170, width: 0, height: 0 });
+
+    expectNear([centerOf(drawn(store))], [{ x: 0.5, y: 0.1 }]);
+    expect(store.get(id)?.points).toEqual([{ x: 0.5, y: 0.1 }]);
+  });
+
+  it('moves the bounds when only the points are patched', () => {
+    const store = makeStore();
+    const id = store.add(POINT);
+    store.update(id, { points: [{ x: 0.9, y: 0.9 }] });
+
+    expect(store.get(id)?.frac).toEqual({ x: 0.9, y: 0.9, w: 0, h: 0 });
+    expectNear([centerOf(drawn(store))], [{ x: 0.9, y: 0.9 }]);
+  });
+
+  it('reads points a store saved in content fractions, before they followed the bounds', () => {
+    const legacy = {
+      version: 1,
+      scenes: {
+        naive: {
+          version: 1,
+          systemLayers: [{ id: 'marks' }],
+          nodes: [
+            {
+              id: 'n1',
+              kind: 'leaf',
+              layer: 'marks',
+              pose: { x: 0.1 * 256, y: 0.2 * 170, width: 0.5 * 256, height: 0.4 * 170 },
+              data: { target: 'naive', kind: 'line', points: LINE.points },
+            },
+          ],
+        },
+      },
+    };
+    const store = annotationsFromJSON(legacy, () => TARGETS);
+    expectNear(drawn(store), LINE.points ?? []);
+    expect(store.get('naive/n1')?.points).toEqual(LINE.points);
+  });
+});
+
 describe('paintedMarks', () => {
   it("hands over a target's marks in world units with their resolved style", () => {
     let config: Record<string, string> = { angle: 'iso', shading: 'outline' };