src/enhance/targets.ts

Functions

Imports

It imports src/enhance/marks.ts. Imported by src/enhance/chart.ts.

Source

1/** The shapes the layer draws over marks: pointer targets and the focus ring. */
2
3import { SVG_NS, shape } from "./marks.js";
4
5/** The smallest pointer target, in CSS pixels (WCAG 2.2 SC 2.5.8). */
6const TARGET = 24;
7
8/**
9 * An invisible target around a mark smaller than 24 CSS pixels, so it is large enough to point
10 * at (WCAG 2.2 SC 2.5.8, A5). Drawn beneath the marks, so a mark still wins where targets
11 * overlap in dense charts. Null when the mark is big enough already.
12 */
13export function hitArea(mark: SVGGraphicsElement): SVGRectElement | null {
14  const scale = mark.getScreenCTM()?.a ?? 0;
15  const parent = mark.parentElement;
16  if (!(scale > 0) || !parent) return null;
17  const box = (shape(mark) as SVGGraphicsElement).getBBox();
18  const side = TARGET / scale;
19  if (box.width >= side && box.height >= side) return null;
20  const width = Math.max(box.width, side);
21  const height = Math.max(box.height, side);
22  const hit = document.createElementNS(SVG_NS, "rect");
23  hit.setAttribute("class", "enarratio-hit");
24  hit.setAttribute("aria-hidden", "true");
25  hit.setAttribute("x", String(box.x + box.width / 2 - width / 2));
26  hit.setAttribute("y", String(box.y + box.height / 2 - height / 2));
27  hit.setAttribute("width", String(width));
28  hit.setAttribute("height", String(height));
29  parent.insertBefore(hit, parent.firstChild);
30  return hit;
31}
32
33/**
34 * The focus ring around a mark: a background-colored ring inside a focus-colored one, so the ring
35 * shows against any series color beside it, not only against the background (F7).
36 */
37export function focusRing(mark: SVGGraphicsElement): SVGGElement | null {
38  const parent = mark.parentElement;
39  if (!parent) return null;
40  const box = (shape(mark) as SVGGraphicsElement).getBBox();
41  const scale = mark.getScreenCTM()?.a || 1;
42  const pad = 2 / scale;
43  const ring = document.createElementNS(SVG_NS, "g");
44  ring.setAttribute("class", "enarratio-focus-ring");
45  ring.setAttribute("aria-hidden", "true");
46  for (const [cls, extra] of [
47    ["enarratio-focus-ring-inner", pad],
48    ["enarratio-focus-ring-outer", pad + 3.5 / scale],
49  ] as const) {
50    const rect = document.createElementNS(SVG_NS, "rect");
51    rect.setAttribute("class", cls);
52    rect.setAttribute("x", String(box.x - extra));
53    rect.setAttribute("y", String(box.y - extra));
54    rect.setAttribute("width", String(box.width + 2 * extra));
55    rect.setAttribute("height", String(box.height + 2 * extra));
56    rect.setAttribute("rx", String(2 / scale));
57    ring.append(rect);
58  }
59  parent.append(ring);
60  return ring;
61}