2b:null 2c:["$","title",null,{"children":"Annotate | Tom Larkworthy | Observable"}] 31:T44e,md`## Surfaces: one coordinate space each \`a2Anchors\` splits anchoring in two. Finding the *node* is shared: persistent id → cell → \`region: "after"\` for content mounted beside it → a \`nth-of-type\` path within. Finding the *place inside that node* belongs to a **surface**, which is a coordinate space with four methods: | | | |---|---| | \`pick(el, loc)\` | is this click mine? | | \`describe(target, x, y, loc)\` | click → coordinates in my units | | \`find(loc, a)\` | which node holds those units now? | | \`place(target, a, loc)\` | coordinates → a screen point | Built in, most specific first: **text** (0), **plot** (10, data space via the chart's \`scale().invert\`), **svg** (20, user units through \`getScreenCTM()\`), **image** (30) and **element** (90), which matches everything. \`image\` and \`element\` are the same box-fraction helpers pointed at different nodes. A surface this build does not recognise is reported adrift rather than painted at a plausible-looking fraction — a wrong position that looks authoritative is worse than an honest one that looks lost.`32:T5f9b,a2Anchors = { const doc = window.document; const CELL_SEL = ".observablehq[cell]"; // legacy: named cells only, kept for callers const PANE_SEL = ".lp2-pane[data-module]"; const cssq = (s) => String(s).replace(/\\/g, "\\\\").replace(/"/g, '\\"'); // ---- per-pass memo ----------------------------------------------------- // A render resolves every annotation, and a render is driven by *other people's* DOM // mutations — a cell animating at 60fps drags each anchor down the ladder every frame. // Anything a pass reads out of the whole runtime or the whole document is therefore // computed once and shared, then dropped on the next task: a pass is synchronous, so a // microtask is exactly its end, and no caller has to know a cache exists. let pass = null; const passCache = () => { if (pass) return pass; pass = { nodes: null, text: null, byName: null, pid: new Map() }; window.queueMicrotask(() => { pass = null; }); return pass; }; const hashText = (s) => { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = window.Math.imul(h, 16777619); } return (h >>> 0).toString(36); }; const cellHashOf = (cellNode) => cellNode ? hashText((cellNode.getAttribute("cell") || "") + " " + (cellNode.textContent || "").slice(0, 500)) : null; // A cell's identity is its *variable*, not its `cell` attribute: unnamed cells have no // attribute at all, and a rename would otherwise orphan every annotation on it. const varForNode = (node) => !node || !runtime ? null : node.variable || [...runtime._variables].find((v) => v._observer && v._observer._node === node) || null; const pidOf = (node) => { const v = varForNode(node); try { return v ? persistentId(v) : null; } catch (e) { return null; } }; const cellIdOf = (cellNode) => cellNode ? { cell: cellNode.getAttribute("cell"), pid: pidOf(cellNode) } : { cell: null, pid: null }; // The cell div is the outermost `.observablehq` — the Inspector stamps that class on // inner nodes too, and closest() would stop at the wrong one. const outermostCellDiv = (el) => { let found = null, n = el; while (n && n.nodeType === 1) { if (n.classList && n.classList.contains("observablehq")) found = n; n = n.parentElement; } return found; }; // The host is what a quote/path is measured against. Usually the cell div; for an // editor-5 editor it is the editor itself, which is mounted as the cell div's *sibling* // (`div.after(editor)`), so nothing inside it has a cell ancestor to find. const hostOf = (el) => { const paneNode = el && el.closest ? el.closest(PANE_SEL) : null; let cellNode = outermostCellDiv(el); if (cellNode) return { cellNode, hostNode: cellNode, paneNode, region: "cell", afterIndex: 0 }; let n = el; while (n && n.nodeType === 1 && n !== doc.body) { let prev = n.previousElementSibling, back = 0; // nearest *preceding* cell div, not strictly the immediate sibling: the pane puts a // spacer between cells, and an editor may not be the first thing after its cell. while (prev && !(prev.classList && prev.classList.contains("observablehq"))) { prev = prev.previousElementSibling; back++; } if (prev) return { cellNode: prev, hostNode: n, paneNode, region: "after", afterIndex: back }; n = n.parentElement; } return { cellNode: null, hostNode: null, paneNode, region: "cell", afterIndex: 0 }; }; // nth-of-type chain from `root` down to `el`, so it survives sibling text edits. const pathWithin = (root, el) => { if (!el || el === root || !root.contains(el)) return null; const parts = []; let node = el; while (node && node !== root) { const parent = node.parentElement; if (!parent) return null; let i = 1; for (const sib of parent.children) { if (sib === node) break; if (sib.tagName === node.tagName) i++; } parts.unshift(node.tagName.toLowerCase() + ":nth-of-type(" + i + ")"); node = parent; } return parts.length ? parts.join(" > ") : null; }; const queryPath = (root, path) => { try { return root.querySelector(":scope > " + path); } catch (e) { return null; } }; // The cell attribute is a lopepage convention; observablehq.com renders plain // `.observablehq` divs. The variable knows its own display node either way. const moduleNamed = (name) => (name && runtime.mains && runtime.mains.get ? runtime.mains.get(name) : null) || null; // One scan of the runtime per pass instead of one per annotation: a notebook that boots // the whole corpus has thousands of variables and this used to be walked per anchor. const nodeIndex = () => { const c = passCache(); if (c.byName) return c.byName; const m = new Map(); for (const v of runtime._variables) { if (!v._name) continue; const n = v._observer && v._observer._node; if (!n || n.nodeType !== 1 || !n.isConnected) continue; let a = m.get(v._name); if (!a) m.set(v._name, a = []); a.push({ mod: v._module, node: n }); } c.byName = m; return m; }; const nodeForVariable = (moduleName, name, pane) => { const mod = moduleNamed(moduleName); let loose = null; for (const e of nodeIndex().get(name) || []) { const n = e.node; if (mod && e.mod === mod) return n; if (pane && pane.contains(n)) return n; if (!loose) loose = n; } // A named module that does not have this cell is a miss, not an invitation to take // some other module's cell of the same name. return mod ? null : loose; }; // Last rung: the words themselves. No cell, no pid, no attribute — re-find the quote in the // page text the way a web annotator does, and take whatever cell it landed in. const UNRENDERED = { SCRIPT: 1, STYLE: 1, NOSCRIPT: 1, TITLE: 1 }; // Our own boxes, and any code view: an open cell editor shows the annotation's own // source, which would make its quote look ambiguous and lose the anchor. const SKIP_SEL = "[data-a2-root],[data-a2-layer],.cm-editor,[data-a2-editor]"; const docTextNodes = () => { const c = passCache(); if (c.nodes) return c.nodes; const out = []; // Reject the excluded *subtree* rather than asking every text node for its ancestors: // `closest()` per text node was a quarter of a profiled frame on a page that mutates // every frame. A lopecode notebook also carries every module as a // `