@weasel-js/core 1.10.0 → 1.11.0

package/dist/canvas/nodeShapes/textPainter.js

@@ -1,55 +1,188 @@
-import { nodeMemo as e } from "../../core/scene/nodeMemo.js";
-import { PAINT_SLOT as t } from "./memo.js";
-import { inkReach as n, resolveNodeStroke as r } from "./nodePaint.js";
-import { paintsPose as i } from "./poseBox.js";
-import { textCommandFromPose as a } from "@weasel-js/renderer";
-import { PATH_L as o, PATH_M as s, PATH_Z as c } from "@weasel-js/geom";
-import { textLineBoxes as l } from "@weasel-js/text";
+import { nodeMemo } from "../../core/scene/nodeMemo.js";
+import { PAINT_SLOT } from "./memo.js";
+import { inkReach, resolveNodeFill, resolveNodeStroke, strokeOutsetPerAxis } from "./nodePaint.js";
+import { paintsPose } from "./poseBox.js";
+import { commandFill, textCommandFromPose } from "@weasel-js/renderer";
+import { PATH_L, PATH_M, PATH_Z } from "@weasel-js/geom";
+import { textLineBoxes } from "@weasel-js/text";
+
 //#region src/canvas/nodeShapes/textPainter.ts
-function u(e, t) {
+/** `cmd` cut to `box`: a group whose clip is the box as a rect, which the
+*  renderer cuts on the CPU when the frame keeps it axis-aligned. */
+function clippedToBox(cmd, box) {
 	return {
-		x: t.x,
-		y: t.y,
-		width: t.width,
-		height: t.height,
-		text: e.text,
-		runs: e.runs,
-		style: e.style,
-		fill: e.fill,
-		stroke: r(e.stroke) ?? void 0,
-		verticalAlign: e.verticalAlign
+		kind: "group",
+		clip: {
+			kind: "rect",
+			x: box.x,
+			y: box.y,
+			width: box.width,
+			height: box.height
+		},
+		children: [cmd]
 	};
 }
-var d = {
+/** The box a text node's lines lay out in: its pose box, inset by
+*  `data.padding` and never past its center. */
+function textBoxOf(d, p) {
+	const pad = Math.max(0, d.padding ?? 0);
+	const px = Math.min(pad, p.width / 2);
+	const py = Math.min(pad, p.height / 2);
+	return {
+		x: p.x + px,
+		y: p.y + py,
+		width: p.width - 2 * px,
+		height: p.height - 2 * py
+	};
+}
+/** A `kit:text` node as the `TextPose` every text consumer reads, in the box
+*  {@link textBoxOf} insets. The stroke goes through the same resolver every
+*  other node kind's does, so one carrying no paint is dropped here rather
+*  than throwing in the renderer. */
+function textPoseOf(d, p) {
+	return {
+		...textBoxOf(d, p),
+		text: d.text,
+		runs: d.runs,
+		style: d.style,
+		fill: d.fill,
+		stroke: resolveNodeStroke(d.stroke) ?? void 0,
+		verticalAlign: d.verticalAlign
+	};
+}
+var TEXT_PAINTER = {
 	id: "kit:text",
-	matches: (e) => i(e.pose) ? e.data?.text != null : !1,
-	paint: (n, r) => e(n, t, r, () => [a(u(n.data, r))]),
-	silhouette: (e, t) => {
-		let n = l(u(e.data, t));
-		return n.length === 0 ? null : f(n);
+	snapsToBox: true,
+	matches: (node) => {
+		if (!paintsPose(node.pose)) return false;
+		return node.data?.text != null;
+	},
+	paint: (node, pose) => nodeMemo(node, PAINT_SLOT, pose, () => {
+		const d = node.data;
+		const laid = textCommandFromPose(textPoseOf(d, pose));
+		const text = d.overflow === "clip" ? clippedToBox(laid, pose) : laid;
+		const bg = resolveNodeFill(d.background, null);
+		if (!bg) return [text];
+		const fill = commandFill(bg, pose);
+		return [{
+			kind: "path",
+			path: {
+				kind: "rect",
+				x: pose.x,
+				y: pose.y,
+				width: pose.width,
+				height: pose.height
+			},
+			...fill ? { fill } : {}
+		}, text];
+	}),
+	silhouette: (node, pose) => {
+		const d = node.data;
+		if (resolveNodeFill(d.background, null)) return {
+			kind: "rect",
+			x: pose.x,
+			y: pose.y,
+			width: pose.width,
+			height: pose.height
+		};
+		const lines = textLineBoxes(textPoseOf(d, pose));
+		const boxes = d.overflow === "clip" ? cutRects(lines, pose) : lines;
+		if (boxes.length === 0) return null;
+		return rectsToPath(boxes);
 	},
-	ink: (e, t, i) => {
-		let a = e.data;
+	ink: (node, _pose, ctx) => {
+		const d = node.data;
 		return {
-			filled: !0,
-			...n(r(a.stroke), i?.scale)
+			filled: true,
+			...inkReach(resolveNodeStroke(d.stroke), ctx?.scale)
 		};
+	},
+	drawnBounds: (node, pose, ctx) => {
+		const d = node.data;
+		const stroke = resolveNodeStroke(d.stroke);
+		return stroke ? strokedLinesBox(pose, textLineBoxes(textPoseOf(d, pose)), strokeOutsetPerAxis(stroke, ctx)) : null;
 	}
 };
-function f(e) {
-	let t = new Uint8Array(e.length * 6), n = new Float32Array(e.length * 10), r = 0, i = 0;
-	for (let a of e) {
-		let { x: e, y: l, width: u, height: d } = a;
-		t[i++] = s, n[r++] = e, n[r++] = l, t[i++] = o, n[r++] = e + u, n[r++] = l, t[i++] = o, n[r++] = e + u, n[r++] = l + d, t[i++] = o, n[r++] = e, n[r++] = l + d, t[i++] = o, n[r++] = e, n[r++] = l, t[i++] = c;
+/** Each of `rects` cut to `box`, leaving out any it does not overlap. */
+function cutRects(rects, box) {
+	const out = [];
+	for (const r of rects) {
+		const x0 = Math.max(r.x, box.x);
+		const y0 = Math.max(r.y, box.y);
+		const x1 = Math.min(r.x + r.width, box.x + box.width);
+		const y1 = Math.min(r.y + r.height, box.y + box.height);
+		if (x1 > x0 && y1 > y0) out.push({
+			x: x0,
+			y: y0,
+			width: x1 - x0,
+			height: y1 - y0
+		});
+	}
+	return out;
+}
+/**
+* The layout box grown where a stroked line reaches it: each line box, cut to
+* the layout box, then outset by the stroke's reach. A line that overflows the
+* layout box is left to it — the layout box is what a text node claims.
+*/
+function strokedLinesBox(pose, lines, reach) {
+	if (!(reach.x > 0 || reach.y > 0)) return null;
+	let x0 = pose.x, y0 = pose.y, x1 = pose.x + pose.width, y1 = pose.y + pose.height;
+	for (const l of lines) {
+		const lx0 = Math.max(l.x, pose.x), ly0 = Math.max(l.y, pose.y);
+		const lx1 = Math.min(l.x + l.width, pose.x + pose.width), ly1 = Math.min(l.y + l.height, pose.y + pose.height);
+		if (lx1 <= lx0 || ly1 <= ly0) continue;
+		x0 = Math.min(x0, lx0 - reach.x);
+		y0 = Math.min(y0, ly0 - reach.y);
+		x1 = Math.max(x1, lx1 + reach.x);
+		y1 = Math.max(y1, ly1 + reach.y);
+	}
+	return {
+		x: x0,
+		y: y0,
+		width: x1 - x0,
+		height: y1 - y0
+	};
+}
+/**
+* Union of axis-aligned rects as one multi-contour `PolygonPath`.
+*
+* Every contour winds the same way, so `'nonzero'` reads overlapping rects as
+* covered rather than punching a hole where two lines happen to overlap —
+* which they do the moment `lineHeight` drops below 1.
+*/
+function rectsToPath(rects) {
+	const commands = new Uint8Array(rects.length * 6);
+	const coords = new Float32Array(rects.length * 10);
+	let ci = 0;
+	let cmd = 0;
+	for (const r of rects) {
+		const { x, y, width: w, height: h } = r;
+		commands[cmd++] = PATH_M;
+		coords[ci++] = x;
+		coords[ci++] = y;
+		commands[cmd++] = PATH_L;
+		coords[ci++] = x + w;
+		coords[ci++] = y;
+		commands[cmd++] = PATH_L;
+		coords[ci++] = x + w;
+		coords[ci++] = y + h;
+		commands[cmd++] = PATH_L;
+		coords[ci++] = x;
+		coords[ci++] = y + h;
+		commands[cmd++] = PATH_L;
+		coords[ci++] = x;
+		coords[ci++] = y;
+		commands[cmd++] = PATH_Z;
 	}
 	return {
 		kind: "polygon",
-		commands: t,
-		coords: n,
+		commands,
+		coords,
 		fillRule: "nonzero"
 	};
 }
-//#endregion
-export { d as TEXT_PAINTER, f as rectsToPath, u as textPoseOf };
 
+//#endregion
+export { TEXT_PAINTER, clippedToBox, rectsToPath, textBoxOf, textPoseOf };
 //# sourceMappingURL=textPainter.js.map

package/dist/canvas/nodeShapes/textPainter.js.map

@@ -1 +1 @@
-{"version":3,"file":"textPainter.js","names":["textPoseOf","p","d","resolveNodeStroke","TEXT_PAINTER","paintsPose","node","nodeMemo","PAINT_SLOT","pose","textCommandFromPose","boxes","textLineBoxes","rectsToPath","inkReach","ctx","commands","rects","coords","ci","cmd","r","w","h","PATH_M","x","y","PATH_L","PATH_Z"],"sources":["../../../src/canvas/nodeShapes/textPainter.ts"],"sourcesContent":["import {\n  PATH_L,\n  PATH_M,\n  PATH_Z,\n  type PolygonPath\n} from '@weasel-js/geom';\nimport type { Stroke, Fill } from '@weasel-js/paint';\nimport type { StyledRun, TextPose, TextStyle, TextVerticalAlign } from '@weasel-js/text';\nimport { textLineBoxes } from '@weasel-js/text';\nimport type { NodeShapeEntry } from 'canvas/NodeShape';\nimport { nodeMemo } from 'core/scene/nodeMemo';\nimport type { RectPose } from 'core/scene/types';\nimport { textCommandFromPose } from '@weasel-js/renderer';\nimport { PAINT_SLOT } from './memo';\nimport { inkReach, resolveNodeStroke } from './nodePaint';\nimport { paintsPose } from './poseBox';\n\n/** The `data` a `kit:text` node carries. */\nexport interface TextNodeData {\n  text: string;\n  style?: TextStyle;\n  runs?: readonly StyledRun[];\n  fill?: Fill | null;\n  stroke?: Stroke | null;\n  verticalAlign?: TextVerticalAlign;\n}\n\n/** A `kit:text` node as the `TextPose` every text consumer reads. The stroke\n *  goes through the same resolver every other node kind's does, so one\n *  carrying no paint is dropped here rather than throwing in the renderer. */\nexport function textPoseOf(d: TextNodeData, p: RectPose): TextPose {\n  return {\n    x: p.x, y: p.y, width: p.width, height: p.height,\n    text: d.text,\n    runs: d.runs as StyledRun[] | undefined,\n    style: d.style,\n    fill: d.fill,\n    stroke: resolveNodeStroke(d.stroke) ?? undefined,\n    verticalAlign: d.verticalAlign,\n  };\n}\n\nexport const TEXT_PAINTER: NodeShapeEntry<unknown, RectPose> = {\n  id: 'kit:text',\n  matches: (node) => {\n    if (!paintsPose(node.pose)) return false;\n    const d = node.data as { text?: string } | null;\n    return d?.text != null;\n  },\n  // Memoized because the renderer's layout cache keys on the `ResolvedRun[]` array\n  // identity: a fresh runs array per frame would leave that cache missing on every\n  // draw. Both resolvers are pure style merging — no font reads — so `(data, pose)` is\n  // the whole key. See PAINT_SLOT.\n  //\n  // `y` is the top of the first line box, not a baseline — see `TextDrawCommand.y`.\n  paint: (node, pose) => nodeMemo(node, PAINT_SLOT, pose, () => [\n    textCommandFromPose(textPoseOf(node.data as TextNodeData, pose)),\n  ]),\n  // The pose is a layout box, not a bounding box: the union of the line boxes is what\n  // the node actually covers, so picking, lasso, and clipping stop grabbing blank space.\n  //\n  // `null` rather than an empty path when there are no non-blank lines: a caller\n  // reading \"no silhouette\" falls back to the pose rect, which keeps an empty text\n  // node pickable.\n  silhouette: (node, pose) => {\n    const boxes = textLineBoxes(textPoseOf(node.data as TextNodeData, pose));\n    if (boxes.length === 0) return null;\n    return rectsToPath(boxes);\n  },\n  // `filled` is unconditional, `data.fill: null` included: the silhouette above is line\n  // boxes, not glyph ink, so reporting outline-only text as unfilled would leave it\n  // grabbable within a stroke width of a box edge and nowhere near the letters.\n  ink: (node, _pose, ctx) => {\n    const d = node.data as { stroke?: Stroke | null };\n    return { filled: true, ...inkReach(resolveNodeStroke(d.stroke), ctx?.scale) };\n  },\n};\n\n/**\n * Union of axis-aligned rects as one multi-contour `PolygonPath`.\n *\n * Every contour winds the same way, so `'nonzero'` reads overlapping rects as\n * covered rather than punching a hole where two lines happen to overlap —\n * which they do the moment `lineHeight` drops below 1.\n */\nexport function rectsToPath(rects: readonly { x: number; y: number; width: number; height: number }[]): PolygonPath {\n  const commands = new Uint8Array(rects.length * 6);\n  const coords = new Float32Array(rects.length * 10);\n  let ci = 0;\n  let cmd = 0;\n  for (const r of rects) {\n    const { x, y, width: w, height: h } = r;\n    commands[cmd++] = PATH_M; coords[ci++] = x; coords[ci++] = y;\n    commands[cmd++] = PATH_L; coords[ci++] = x + w; coords[ci++] = y;\n    commands[cmd++] = PATH_L; coords[ci++] = x + w; coords[ci++] = y + h;\n    commands[cmd++] = PATH_L; coords[ci++] = x; coords[ci++] = y + h;\n    commands[cmd++] = PATH_L; coords[ci++] = x; coords[ci++] = y;\n    commands[cmd++] = PATH_Z;\n  }\n  return { kind: 'polygon', commands, coords, fillRule: 'nonzero' };\n}\n"],"mappings":";;;;;;;;AA8BA,SAAgBA,EAAW,GAAiB,GAAuB;CACjE,OAAO;EACL,GAAGC,EAAE;EAAG,GAAGA,EAAE;EAAG,OAAOA,EAAE;EAAO,QAAQA,EAAE;EAC1C,MAAMC,EAAE;EACR,MAAMA,EAAE;EACR,OAAOA,EAAE;EACT,MAAMA,EAAE;EACR,QAAQC,EAAkBD,EAAE,MAAM,KAAK,KAAA;EACvC,eAAeA,EAAE;CACnB;AACF;AAEA,IAAaE,IAAkD;CAC7D,IAAI;CACJ,UAAU,MACHC,EAAWC,EAAK,IAAI,IACfA,EAAK,MACL,QAAQ,OAFiB;CAUrC,QAAQ,GAAM,MAASC,EAASD,GAAME,GAAYC,SAAY,CAC5DC,EAAoBV,EAAWM,EAAK,MAAsBG,CAAI,CAAC,CACjE,CAAC;CAOD,aAAa,GAAM,MAAS;EAC1B,IAAME,IAAQC,EAAcZ,EAAWM,EAAK,MAAsBG,CAAI,CAAC;EAEvE,OADIE,EAAM,WAAW,IAAU,OACxBE,EAAYF,CAAK;CAC1B;CAIA,MAAM,GAAM,GAAO,MAAQ;EACzB,IAAMT,IAAII,EAAK;EACf,OAAO;GAAE,QAAQ;GAAM,GAAGQ,EAASX,EAAkBD,EAAE,MAAM,GAAGa,GAAK,KAAK;EAAE;CAC9E;AACF;AASA,SAAgBF,EAAY,GAAwF;CAClH,IAAMG,IAAW,IAAI,WAAWC,EAAM,SAAS,CAAC,GAC1CC,IAAS,IAAI,aAAaD,EAAM,SAAS,EAAE,GAC7CE,IAAK,GACLC,IAAM;CACV,KAAK,IAAMC,KAAKJ,GAAO;EACrB,IAAM,EAAE,MAAG,MAAG,OAAOK,GAAG,QAAQC,MAAMF;EAMtC,AALA,EAAS,OAASG,GAAQ,EAAO,OAAQC,GAAG,EAAO,OAAQC,GAC3D,EAAS,OAASC,GAAQ,EAAO,OAAQF,IAAIH,GAAG,EAAO,OAAQI,GAC/D,EAAS,OAASC,GAAQ,EAAO,OAAQF,IAAIH,GAAG,EAAO,OAAQI,IAAIH,GACnE,EAAS,OAASI,GAAQ,EAAO,OAAQF,GAAG,EAAO,OAAQC,IAAIH,GAC/D,EAAS,OAASI,GAAQ,EAAO,OAAQF,GAAG,EAAO,OAAQC,GAC3D,EAAS,OAASE;CACpB;CACA,OAAO;EAAE,MAAM;EAAW;EAAU;EAAQ,UAAU;CAAU;AAClE"}
+{"version":3,"file":"textPainter.js","names":[],"sources":["../../../src/canvas/nodeShapes/textPainter.ts"],"sourcesContent":["import {\n  PATH_L,\n  PATH_M,\n  PATH_Z,\n  type PolygonPath,\n  type Rect,\n} from '@weasel-js/geom';\nimport type { Stroke, Fill } from '@weasel-js/paint';\nimport type { StyledRun, TextPose, TextStyle, TextVerticalAlign } from '@weasel-js/text';\nimport { textLineBoxes } from '@weasel-js/text';\nimport type { NodeShapeEntry } from 'canvas/NodeShape';\nimport { nodeMemo } from 'core/scene/nodeMemo';\nimport type { RectPose } from 'core/scene/types';\nimport { commandFill, textCommandFromPose, type DrawCommand } from '@weasel-js/renderer';\nimport { PAINT_SLOT } from './memo';\nimport { inkReach, resolveNodeFill, resolveNodeStroke, strokeOutsetPerAxis } from './nodePaint';\nimport { paintsPose } from './poseBox';\n\n/** The `data` a `kit:text` node carries. */\nexport interface TextNodeData {\n  text: string;\n  style?: TextStyle;\n  runs?: readonly StyledRun[];\n  fill?: Fill | null;\n  stroke?: Stroke | null;\n  verticalAlign?: TextVerticalAlign;\n  /** Paint for the whole pose box, drawn under the glyphs. `fill` is the\n   *  glyphs' own paint, so a box behind them needs a key of its own. */\n  background?: Fill | null;\n  /** World units between the pose box and the box the text lays out in, on\n   *  every side. */\n  padding?: number;\n  /** What happens to text that runs past the pose box: `'visible'` (the\n   *  default) draws it there, `'clip'` cuts it at the box's edge. */\n  overflow?: TextOverflow;\n}\n\n/** How a text node treats lines that run past its box. */\nexport type TextOverflow = 'visible' | 'clip';\n\ntype Box = { x: number; y: number; width: number; height: number };\n\n/** `cmd` cut to `box`: a group whose clip is the box as a rect, which the\n *  renderer cuts on the CPU when the frame keeps it axis-aligned. */\nexport function clippedToBox(cmd: DrawCommand, box: Box): DrawCommand {\n  return {\n    kind: 'group',\n    clip: { kind: 'rect', x: box.x, y: box.y, width: box.width, height: box.height },\n    children: [cmd],\n  };\n}\n\n/** The box a text node's lines lay out in: its pose box, inset by\n *  `data.padding` and never past its center. */\nexport function textBoxOf(\n  d: Pick<TextNodeData, 'padding'>,\n  p: RectPose,\n): { x: number; y: number; width: number; height: number } {\n  const pad = Math.max(0, d.padding ?? 0);\n  const px = Math.min(pad, p.width / 2);\n  const py = Math.min(pad, p.height / 2);\n  return { x: p.x + px, y: p.y + py, width: p.width - 2 * px, height: p.height - 2 * py };\n}\n\n/** A `kit:text` node as the `TextPose` every text consumer reads, in the box\n *  {@link textBoxOf} insets. The stroke goes through the same resolver every\n *  other node kind's does, so one carrying no paint is dropped here rather\n *  than throwing in the renderer. */\nexport function textPoseOf(d: TextNodeData, p: RectPose): TextPose {\n  return {\n    ...textBoxOf(d, p),\n    text: d.text,\n    runs: d.runs as StyledRun[] | undefined,\n    style: d.style,\n    fill: d.fill,\n    stroke: resolveNodeStroke(d.stroke) ?? undefined,\n    verticalAlign: d.verticalAlign,\n  };\n}\n\nexport const TEXT_PAINTER: NodeShapeEntry<unknown, RectPose> = {\n  id: 'kit:text',\n  snapsToBox: true,\n  matches: (node) => {\n    if (!paintsPose(node.pose)) return false;\n    const d = node.data as { text?: string } | null;\n    return d?.text != null;\n  },\n  // Memoized because the renderer's layout cache keys on the `ResolvedRun[]` array\n  // identity: a fresh runs array per frame would leave that cache missing on every\n  // draw. Both resolvers are pure style merging — no font reads — so `(data, pose)` is\n  // the whole key. See PAINT_SLOT.\n  //\n  // `y` is the top of the first line box, not a baseline — see `TextDrawCommand.y`.\n  paint: (node, pose) => nodeMemo(node, PAINT_SLOT, pose, (): DrawCommand[] => {\n    const d = node.data as TextNodeData;\n    const laid = textCommandFromPose(textPoseOf(d, pose));\n    const text = d.overflow === 'clip' ? clippedToBox(laid, pose) : laid;\n    const bg = resolveNodeFill(d.background, null);\n    if (!bg) return [text];\n    const fill = commandFill(bg, pose);\n    return [\n      { kind: 'path', path: { kind: 'rect', x: pose.x, y: pose.y, width: pose.width, height: pose.height }, ...(fill ? { fill } : {}) },\n      text,\n    ];\n  }),\n  // The pose is a layout box, not a bounding box: the union of the line boxes is what\n  // the node actually covers, so picking, lasso, and clipping stop grabbing blank space.\n  //\n  // `null` rather than an empty path when there are no non-blank lines: a caller\n  // reading \"no silhouette\" falls back to the pose rect, which keeps an empty text\n  // node pickable.\n  //\n  // A background is ink across the whole box, so a node with one is its box.\n  // A clipped node's lines are cut to the box, as they are drawn.\n  silhouette: (node, pose) => {\n    const d = node.data as TextNodeData;\n    if (resolveNodeFill(d.background, null)) {\n      return { kind: 'rect', x: pose.x, y: pose.y, width: pose.width, height: pose.height };\n    }\n    const lines = textLineBoxes(textPoseOf(d, pose));\n    const boxes = d.overflow === 'clip' ? cutRects(lines, pose) : lines;\n    if (boxes.length === 0) return null;\n    return rectsToPath(boxes);\n  },\n  // `filled` is unconditional, `data.fill: null` included: the silhouette above is line\n  // boxes, not glyph ink, so reporting outline-only text as unfilled would leave it\n  // grabbable within a stroke width of a box edge and nowhere near the letters.\n  ink: (node, _pose, ctx) => {\n    const d = node.data as { stroke?: Stroke | null };\n    return { filled: true, ...inkReach(resolveNodeStroke(d.stroke), ctx?.scale) };\n  },\n  drawnBounds: (node, pose, ctx) => {\n    const d = node.data as TextNodeData;\n    const stroke = resolveNodeStroke(d.stroke);\n    return stroke ? strokedLinesBox(pose, textLineBoxes(textPoseOf(d, pose)), strokeOutsetPerAxis(stroke, ctx)) : null;\n  },\n};\n\n/** Each of `rects` cut to `box`, leaving out any it does not overlap. */\nfunction cutRects(rects: readonly Box[], box: Box): Box[] {\n  const out: Box[] = [];\n  for (const r of rects) {\n    const x0 = Math.max(r.x, box.x);\n    const y0 = Math.max(r.y, box.y);\n    const x1 = Math.min(r.x + r.width, box.x + box.width);\n    const y1 = Math.min(r.y + r.height, box.y + box.height);\n    if (x1 > x0 && y1 > y0) out.push({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 });\n  }\n  return out;\n}\n\n/**\n * The layout box grown where a stroked line reaches it: each line box, cut to\n * the layout box, then outset by the stroke's reach. A line that overflows the\n * layout box is left to it — the layout box is what a text node claims.\n */\nfunction strokedLinesBox(pose: RectPose, lines: readonly Rect[], reach: { x: number; y: number }): Rect | null {\n  if (!(reach.x > 0 || reach.y > 0)) return null;\n  let x0 = pose.x, y0 = pose.y, x1 = pose.x + pose.width, y1 = pose.y + pose.height;\n  for (const l of lines) {\n    const lx0 = Math.max(l.x, pose.x), ly0 = Math.max(l.y, pose.y);\n    const lx1 = Math.min(l.x + l.width, pose.x + pose.width), ly1 = Math.min(l.y + l.height, pose.y + pose.height);\n    if (lx1 <= lx0 || ly1 <= ly0) continue;\n    x0 = Math.min(x0, lx0 - reach.x); y0 = Math.min(y0, ly0 - reach.y);\n    x1 = Math.max(x1, lx1 + reach.x); y1 = Math.max(y1, ly1 + reach.y);\n  }\n  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };\n}\n\n/**\n * Union of axis-aligned rects as one multi-contour `PolygonPath`.\n *\n * Every contour winds the same way, so `'nonzero'` reads overlapping rects as\n * covered rather than punching a hole where two lines happen to overlap —\n * which they do the moment `lineHeight` drops below 1.\n */\nexport function rectsToPath(rects: readonly { x: number; y: number; width: number; height: number }[]): PolygonPath {\n  const commands = new Uint8Array(rects.length * 6);\n  const coords = new Float32Array(rects.length * 10);\n  let ci = 0;\n  let cmd = 0;\n  for (const r of rects) {\n    const { x, y, width: w, height: h } = r;\n    commands[cmd++] = PATH_M; coords[ci++] = x; coords[ci++] = y;\n    commands[cmd++] = PATH_L; coords[ci++] = x + w; coords[ci++] = y;\n    commands[cmd++] = PATH_L; coords[ci++] = x + w; coords[ci++] = y + h;\n    commands[cmd++] = PATH_L; coords[ci++] = x; coords[ci++] = y + h;\n    commands[cmd++] = PATH_L; coords[ci++] = x; coords[ci++] = y;\n    commands[cmd++] = PATH_Z;\n  }\n  return { kind: 'polygon', commands, coords, fillRule: 'nonzero' };\n}\n"],"mappings":"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"}

package/dist/canvas/overChildren.js

@@ -0,0 +1,40 @@
+//#region src/canvas/overChildren.ts
+var OVER = /* @__PURE__ */ new WeakSet();
+/**
+* `cmds` as one command a scene walk paints after the node's children. Return
+* it among a `drawOne`'s other commands. Outside a scene walk it is an
+* ordinary group, painted where it sits in the list.
+*/
+function overChildren(cmds) {
+	const group = {
+		kind: "group",
+		children: cmds
+	};
+	OVER.add(group);
+	return group;
+}
+/** Whether `cmd` came from {@link overChildren}. */
+function isOverChildren(cmd) {
+	return OVER.has(cmd);
+}
+var NOTHING = [];
+/** `cmds` as what paints under the node's children and what paints over them.
+*  A list asking for nothing over comes back as `under` itself. */
+function splitOverChildren(cmds) {
+	if (!cmds.some(isOverChildren)) return {
+		under: cmds,
+		over: NOTHING
+	};
+	const under = [];
+	const over = [];
+	for (const cmd of cmds) if (isOverChildren(cmd)) over.push(...cmd.children);
+	else under.push(cmd);
+	return {
+		under,
+		over
+	};
+}
+
+//#endregion
+export { isOverChildren, overChildren, splitOverChildren };
+//# sourceMappingURL=overChildren.js.map

package/dist/canvas/overChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overChildren.js","names":[],"sources":["../../src/canvas/overChildren.ts"],"sourcesContent":["/**\n * How a painter asks for part of a node's paint to land on top of the node's\n * children: a container's label, a frame's title, a badge. A scene walk draws\n * a node before its children, so anything else a container paints is covered\n * by them.\n */\nimport type { DrawCommand, GroupDrawCommand } from '@weasel-js/renderer';\n\nconst OVER = new WeakSet<object>();\n\n/**\n * `cmds` as one command a scene walk paints after the node's children. Return\n * it among a `drawOne`'s other commands. Outside a scene walk it is an\n * ordinary group, painted where it sits in the list.\n */\nexport function overChildren(cmds: DrawCommand[]): DrawCommand {\n  const group: GroupDrawCommand = { kind: 'group', children: cmds };\n  OVER.add(group);\n  return group;\n}\n\n/** Whether `cmd` came from {@link overChildren}. */\nexport function isOverChildren(cmd: DrawCommand): boolean {\n  return OVER.has(cmd);\n}\n\nconst NOTHING: DrawCommand[] = [];\n\n/** `cmds` as what paints under the node's children and what paints over them.\n *  A list asking for nothing over comes back as `under` itself. */\nexport function splitOverChildren(cmds: DrawCommand[]): { under: DrawCommand[]; over: DrawCommand[] } {\n  if (!cmds.some(isOverChildren)) return { under: cmds, over: NOTHING };\n  const under: DrawCommand[] = [];\n  const over: DrawCommand[] = [];\n  for (const cmd of cmds) {\n    if (isOverChildren(cmd)) over.push(...(cmd as GroupDrawCommand).children);\n    else under.push(cmd);\n  }\n  return { under, over };\n}\n"],"mappings":";AAQA,IAAM,uBAAO,IAAI,QAAgB;;;;;;AAOjC,SAAgB,aAAa,MAAkC;CAC7D,MAAM,QAA0B;EAAE,MAAM;EAAS,UAAU;CAAK;CAChE,KAAK,IAAI,KAAK;CACd,OAAO;AACT;;AAGA,SAAgB,eAAe,KAA2B;CACxD,OAAO,KAAK,IAAI,GAAG;AACrB;AAEA,IAAM,UAAyB,CAAC;;;AAIhC,SAAgB,kBAAkB,MAAoE;CACpG,IAAI,CAAC,KAAK,KAAK,cAAc,GAAG,OAAO;EAAE,OAAO;EAAM,MAAM;CAAQ;CACpE,MAAM,QAAuB,CAAC;CAC9B,MAAM,OAAsB,CAAC;CAC7B,KAAK,MAAM,OAAO,MAChB,IAAI,eAAe,GAAG,GAAG,KAAK,KAAK,GAAI,IAAyB,QAAQ;MACnE,MAAM,KAAK,GAAG;CAErB,OAAO;EAAE;EAAO;CAAK;AACvB"}

package/dist/canvas/overlayRoleStrokes.js

@@ -1,5 +1,8 @@
 //#region src/canvas/overlayRoleStrokes.ts
-var e = {
+/** How each `polyline` overlay role reads. An action publishes the run and
+*  the word; this table is the whole of the paint, for the dispatcher overlay
+*  and for any tool previewing the same kind of run between gestures. */
+var OVERLAY_ROLE_STROKES = {
 	cut: {
 		paint: { color: "#e23b3b" },
 		width: 1,
@@ -9,9 +12,23 @@ var e = {
 		paint: { color: "#7ba7c7" },
 		width: 2,
 		dash: [4, 4]
+	},
+	falloff: {
+		paint: { color: "rgba(52, 120, 246, 0.28)" },
+		width: 10,
+		cap: "round",
+		join: "round"
+	},
+	measure: {
+		paint: { color: "#1f8fff" },
+		width: 1
+	},
+	lock: {
+		paint: { color: "#d9480f" },
+		width: 1.5
 	}
 };
-//#endregion
-export { e as OVERLAY_ROLE_STROKES };
 
+//#endregion
+export { OVERLAY_ROLE_STROKES };
 //# sourceMappingURL=overlayRoleStrokes.js.map

package/dist/canvas/overlayRoleStrokes.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayRoleStrokes.js","names":["OVERLAY_ROLE_STROKES"],"sources":["../../src/canvas/overlayRoleStrokes.ts"],"sourcesContent":["import type { CommandPaint, CommandStroke } from '@weasel-js/paint';\n\n/** How each `polyline` overlay role reads. An action publishes the run and\n *  the word; this table is the whole of the paint, for the dispatcher overlay\n *  and for any tool previewing the same kind of run between gestures. */\nexport const OVERLAY_ROLE_STROKES: Readonly<Record<string, CommandStroke & { paint: CommandPaint }>> = {\n  cut: { paint: { color: '#e23b3b' }, width: 1, dash: [6, 4] },\n  connector: { paint: { color: '#7ba7c7' }, width: 2, dash: [4, 4] },\n};\n"],"mappings":";AAKA,IAAaA,IAA0F;CACrG,KAAK;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;EAAG,MAAM,CAAC,GAAG,CAAC;CAAE;CAC3D,WAAW;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;EAAG,MAAM,CAAC,GAAG,CAAC;CAAE;AACnE"}
+{"version":3,"file":"overlayRoleStrokes.js","names":[],"sources":["../../src/canvas/overlayRoleStrokes.ts"],"sourcesContent":["import type { CommandPaint, CommandStroke } from '@weasel-js/paint';\n\n/** How each `polyline` overlay role reads. An action publishes the run and\n *  the word; this table is the whole of the paint, for the dispatcher overlay\n *  and for any tool previewing the same kind of run between gestures. */\nexport const OVERLAY_ROLE_STROKES: Readonly<Record<string, CommandStroke & { paint: CommandPaint }>> = {\n  cut: { paint: { color: '#e23b3b' }, width: 1, dash: [6, 4] },\n  connector: { paint: { color: '#7ba7c7' }, width: 2, dash: [4, 4] },\n  falloff: { paint: { color: 'rgba(52, 120, 246, 0.28)' }, width: 10, cap: 'round', join: 'round' },\n  measure: { paint: { color: '#1f8fff' }, width: 1 },\n  lock: { paint: { color: '#d9480f' }, width: 1.5 },\n};\n"],"mappings":";;;;AAKA,IAAa,uBAA0F;CACrG,KAAK;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;EAAG,MAAM,CAAC,GAAG,CAAC;CAAE;CAC3D,WAAW;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;EAAG,MAAM,CAAC,GAAG,CAAC;CAAE;CACjE,SAAS;EAAE,OAAO,EAAE,OAAO,2BAA2B;EAAG,OAAO;EAAI,KAAK;EAAS,MAAM;CAAQ;CAChG,SAAS;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;CAAE;CACjD,MAAM;EAAE,OAAO,EAAE,OAAO,UAAU;EAAG,OAAO;CAAI;AAClD"}

package/dist/canvas/paintCull.js

@@ -1,17 +1,29 @@
-import { boundsMissRect as e } from "@weasel-js/renderer";
-import { mat3 as t, poseFrameOf as n, viewToMat3 as r } from "@weasel-js/geom";
+import { boundsMissRect } from "@weasel-js/renderer";
+import { mat3 as mat3$1, poseFrameOf, viewToMat3 as viewToMat3$1 } from "@weasel-js/geom";
+
 //#region src/canvas/paintCull.ts
-function i(i, a, o) {
-	let s = a, c = r(a);
-	return (l, u, d = a) => {
-		d !== s && (s = d, c = r(d));
-		let f = i(l, u, d);
-		if (!f) return !1;
-		let p = n(u), m = p ? t.multiply(c, t.fromAffine(p)) : c;
-		return e(f, m, o);
+/**
+* A predicate true for the nodes whose paint cannot reach `rect` (screen
+* pixels) under `view`, by `paintBounds` taken through the pose frame
+* (`poseFrameOf`) `wrapNodeOutput` applies and then the view. A node `paintBounds` cannot
+* bound is never culled.
+*/
+function paintMissesView(paintBounds, view, rect) {
+	let last = view;
+	let toScreen = viewToMat3$1(view);
+	return (node, pose, layerView = view) => {
+		if (layerView !== last) {
+			last = layerView;
+			toScreen = viewToMat3$1(layerView);
+		}
+		const b = paintBounds(node, pose, layerView);
+		if (!b) return false;
+		const frame = poseFrameOf(pose);
+		const m = frame ? mat3$1.multiply(toScreen, mat3$1.fromAffine(frame)) : toScreen;
+		return boundsMissRect(b, m, rect);
 	};
 }
-//#endregion
-export { i as paintMissesView };
 
+//#endregion
+export { paintMissesView };
 //# sourceMappingURL=paintCull.js.map

package/dist/canvas/paintCull.js.map

@@ -1 +1 @@
-{"version":3,"file":"paintCull.js","names":["viewToMat3","mat3","mat3$1","viewToMat3$1","paintMissesView","last","view","toScreen","layerView","b","paintBounds","node","pose","frame","poseFrameOf","boundsMissRect","rect"],"sources":["../../src/canvas/paintCull.ts"],"sourcesContent":["import type { View } from 'core/viewport/view';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { poseFrameOf } from '@weasel-js/geom';\nimport { boundsMissRect, type CullRect } from '@weasel-js/renderer';\nimport { mat3, viewToMat3 } from '@weasel-js/geom';\n\n/** Where a node's paint can reach, before its pose frame — the scene\n *  slot's `paintBounds`. `null` means unknown, and the node is painted. */\nexport type PaintBoundsFn<TNode, TPose> = (node: TNode, pose: TPose, view: View) => Bounds | null;\n\n/**\n * A predicate true for the nodes whose paint cannot reach `rect` (screen\n * pixels) under `view`, by `paintBounds` taken through the pose frame\n * (`poseFrameOf`) `wrapNodeOutput` applies and then the view. A node `paintBounds` cannot\n * bound is never culled.\n */\nexport function paintMissesView<TNode, TPose>(\n  paintBounds: PaintBoundsFn<TNode, TPose>,\n  view: View,\n  rect: CullRect,\n): (node: TNode, pose: TPose, layerView?: View) => boolean {\n  // `layerView` is a parallax plane's own view; planes are few, so one slot\n  // of memo covers a walk that meets them layer by layer.\n  let last = view;\n  let toScreen = viewToMat3(view);\n  return (node, pose, layerView = view) => {\n    if (layerView !== last) { last = layerView; toScreen = viewToMat3(layerView); }\n    const b = paintBounds(node, pose, layerView);\n    if (!b) return false;\n    const frame = poseFrameOf(pose);\n    const m = frame ? mat3.multiply(toScreen, mat3.fromAffine(frame)) : toScreen;\n    return boundsMissRect(b, m, rect);\n  };\n}\n"],"mappings":";;;AAgBA,SAAgBI,EACd,GACA,GACA,GACyD;CAGzD,IAAIC,IAAOC,GACPC,IAAWP,EAAWM,CAAI;CAC9B,QAAQ,GAAM,GAAM,IAAYA,MAAS;EACvC,AAAIE,MAAcH,MAAQ,IAAOG,GAAW,IAAWR,EAAWQ,CAAS;EAC3E,IAAMC,IAAIC,EAAYC,GAAMC,GAAMJ,CAAS;EAC3C,IAAI,CAACC,GAAG,OAAO;EACf,IAAMI,IAAQC,EAAYF,CAAI,GACxB,IAAIC,IAAQZ,EAAK,SAASM,GAAUN,EAAK,WAAWY,CAAK,CAAC,IAAIN;EACpE,OAAOQ,EAAeN,GAAG,GAAGO,CAAI;CAClC;AACF"}
+{"version":3,"file":"paintCull.js","names":["viewToMat3","mat3"],"sources":["../../src/canvas/paintCull.ts"],"sourcesContent":["import type { View } from 'core/viewport/view';\nimport type { Bounds } from 'core/viewport/fitViewToBounds';\nimport { poseFrameOf } from '@weasel-js/geom';\nimport { boundsMissRect, type CullRect } from '@weasel-js/renderer';\nimport { mat3, viewToMat3 } from '@weasel-js/geom';\n\n/** Where a node's paint can reach, before its pose frame — the scene\n *  slot's `paintBounds`. `null` means unknown, and the node is painted. */\nexport type PaintBoundsFn<TNode, TPose> = (node: TNode, pose: TPose, view: View) => Bounds | null;\n\n/**\n * A predicate true for the nodes whose paint cannot reach `rect` (screen\n * pixels) under `view`, by `paintBounds` taken through the pose frame\n * (`poseFrameOf`) `wrapNodeOutput` applies and then the view. A node `paintBounds` cannot\n * bound is never culled.\n */\nexport function paintMissesView<TNode, TPose>(\n  paintBounds: PaintBoundsFn<TNode, TPose>,\n  view: View,\n  rect: CullRect,\n): (node: TNode, pose: TPose, layerView?: View) => boolean {\n  // `layerView` is a parallax plane's own view; planes are few, so one slot\n  // of memo covers a walk that meets them layer by layer.\n  let last = view;\n  let toScreen = viewToMat3(view);\n  return (node, pose, layerView = view) => {\n    if (layerView !== last) { last = layerView; toScreen = viewToMat3(layerView); }\n    const b = paintBounds(node, pose, layerView);\n    if (!b) return false;\n    const frame = poseFrameOf(pose);\n    const m = frame ? mat3.multiply(toScreen, mat3.fromAffine(frame)) : toScreen;\n    return boundsMissRect(b, m, rect);\n  };\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,gBACd,aACA,MACA,MACyD;CAGzD,IAAI,OAAO;CACX,IAAI,WAAWA,aAAW,IAAI;CAC9B,QAAQ,MAAM,MAAM,YAAY,SAAS;EACvC,IAAI,cAAc,MAAM;GAAE,OAAO;GAAW,WAAWA,aAAW,SAAS;EAAG;EAC9E,MAAM,IAAI,YAAY,MAAM,MAAM,SAAS;EAC3C,IAAI,CAAC,GAAG,OAAO;EACf,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,IAAI,QAAQC,OAAK,SAAS,UAAUA,OAAK,WAAW,KAAK,CAAC,IAAI;EACpE,OAAO,eAAe,GAAG,GAAG,IAAI;CAClC;AACF"}

package/dist/canvas/paintedCursorLayer.js

@@ -1,60 +1,84 @@
-import { pathFromD as e } from "@weasel-js/geom";
-import { GLYPHS as t, chromeLineWidthScale as n, cursorPaintMatrix as r, cursorPaintOps as i, cursorWorldSize as a } from "@weasel-js/cursor";
+import { pathFromD } from "@weasel-js/geom";
+import { GLYPHS, chromeLineWidthScale, cursorPaintMatrix, cursorPaintOps, cursorWorldSize } from "@weasel-js/cursor";
+
 //#region src/canvas/paintedCursorLayer.ts
-var o = "painted-cursor", s = /* @__PURE__ */ new Map();
-function c(t) {
-	let n = s.get(t);
-	return n === void 0 && (n = e(t), s.set(t, n)), n;
+/**
+* The painted tier: draws a cursor glyph into the scene when it is too big,
+* or too tied to the view, to be a CSS `url()` cursor.
+*
+* Screen-space: the glyph is chrome at the pointer, so it must not pan or zoom
+* with the camera. What *does* track the camera is a world-sized glyph's size,
+* and `view.scale` is read for that.
+*/
+/** Layer id, so a consumer can order or hide it like any other. */
+var PAINTED_CURSOR_LAYER_ID = "painted-cursor";
+/** Handing the renderer the same `Path` object every frame lets its mesh cache hit. */
+var pathCache = /* @__PURE__ */ new Map();
+function pathFor(d) {
+	let p = pathCache.get(d);
+	if (p === void 0) {
+		p = pathFromD(d);
+		pathCache.set(d, p);
+	}
+	return p;
 }
-function l(e) {
+function commandFor(op) {
 	return {
 		kind: "path",
-		path: c(e.d),
-		...e.fill === void 0 ? {} : { fill: { paint: { color: e.fill } } },
-		...e.stroke === void 0 ? {} : { stroke: {
-			paint: { color: e.stroke.color },
-			width: e.stroke.width,
+		path: pathFor(op.d),
+		...op.fill !== void 0 ? { fill: { paint: { color: op.fill } } } : {},
+		...op.stroke !== void 0 ? { stroke: {
+			paint: { color: op.stroke.color },
+			width: op.stroke.width,
 			cap: "round",
 			join: "round"
-		} }
+		} } : {}
 	};
 }
-function u(e) {
+/**
+* A screen-space layer that draws the glyph `state` currently holds at the pointer,
+* or nothing when it holds none. `<Canvas>` mounts one over its own state already.
+*/
+function createPaintedCursorLayer(state) {
 	return {
-		id: o,
+		id: PAINTED_CURSOR_LAYER_ID,
 		label: "Painted cursor",
 		space: "screen",
-		draw: (o, s) => {
-			let c = e.current();
-			if (!c) return [];
-			let { cursor: u, at: d } = c, f = t[u.glyph];
-			if (!f) return [];
-			let p = (s.scale.x + s.scale.y) / 2, m = u.worldRadius !== void 0, h = m ? a(f, u.worldRadius, p) : u.size ?? 24;
-			if (!(h > 0) || !Number.isFinite(h)) return [];
-			let g = i(f, m ? { lineWidthScale: n(f, h) } : {}), [_, v, y, b, x, S] = r(f, {
-				size: h,
-				angle: u.angle,
-				at: d
+		draw: (_data, view) => {
+			const frame = state.current();
+			if (!frame) return [];
+			const { cursor, at } = frame;
+			const glyph = GLYPHS[cursor.glyph];
+			if (!glyph) return [];
+			const scale = (view.scale.x + view.scale.y) / 2;
+			const worldSized = cursor.worldRadius !== void 0;
+			const size = worldSized ? cursorWorldSize(glyph, cursor.worldRadius, scale) : cursor.size ?? 24;
+			if (!(size > 0) || !Number.isFinite(size)) return [];
+			const ops = cursorPaintOps(glyph, worldSized ? { lineWidthScale: chromeLineWidthScale(glyph, size) } : {});
+			const [a, b, c, d, e, f] = cursorPaintMatrix(glyph, {
+				size,
+				angle: cursor.angle,
+				at
 			});
 			return [{
 				kind: "group",
 				transform: new Float32Array([
-					_,
-					v,
-					0,
-					y,
+					a,
 					b,
 					0,
-					x,
-					S,
+					c,
+					d,
+					0,
+					e,
+					f,
 					1
 				]),
-				children: g.map(l)
+				children: ops.map(commandFor)
 			}];
 		}
 	};
 }
-//#endregion
-export { o as PAINTED_CURSOR_LAYER_ID, u as createPaintedCursorLayer };
 
+//#endregion
+export { PAINTED_CURSOR_LAYER_ID, createPaintedCursorLayer };
 //# sourceMappingURL=paintedCursorLayer.js.map

package/dist/canvas/paintedCursorLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"paintedCursorLayer.js","names":["PAINTED_CURSOR_LAYER_ID","pathCache","pathFor","p","d","pathFromD","commandFor","op","createPaintedCursorLayer","frame","state","glyph","GLYPHS","cursor","scale","view","worldSized","size","cursorWorldSize","ops","cursorPaintOps","chromeLineWidthScale","a","b","c","e","f","cursorPaintMatrix"],"sources":["../../src/canvas/paintedCursorLayer.ts"],"sourcesContent":["/**\n * The painted tier: draws a cursor glyph into the scene when it is too big,\n * or too tied to the view, to be a CSS `url()` cursor.\n *\n * Screen-space: the glyph is chrome at the pointer, so it must not pan or zoom\n * with the camera. What *does* track the camera is a world-sized glyph's size,\n * and `view.scale` is read for that.\n */\n\nimport { GLYPHS } from '@weasel-js/cursor';\nimport {\n  chromeLineWidthScale,\n  cursorPaintMatrix,\n  cursorPaintOps,\n  cursorWorldSize,\n} from '@weasel-js/cursor';\nimport type { CursorPaintOp } from '@weasel-js/cursor';\nimport type { DrawCommand, PathDrawCommand } from '@weasel-js/renderer';\nimport type { RenderLayer } from 'core/layers/render';\nimport { pathFromD, type Path } from '@weasel-js/geom';\nimport type { PaintedCursorState } from '@weasel-js/cursor';\n\n/** Layer id, so a consumer can order or hide it like any other. */\nexport const PAINTED_CURSOR_LAYER_ID = 'painted-cursor';\n\n/** Handing the renderer the same `Path` object every frame lets its mesh cache hit. */\nconst pathCache = new Map<string, Path>();\nfunction pathFor(d: string): Path {\n  let p = pathCache.get(d);\n  if (p === undefined) {\n    p = pathFromD(d);\n    pathCache.set(d, p);\n  }\n  return p;\n}\n\nfunction commandFor(op: CursorPaintOp): PathDrawCommand {\n  return {\n    kind: 'path',\n    path: pathFor(op.d),\n    ...(op.fill !== undefined ? { fill: { paint: { color: op.fill } } } : {}),\n    ...(op.stroke !== undefined\n      ? {\n          stroke: {\n            paint: { color: op.stroke.color },\n            width: op.stroke.width,\n            cap: 'round' as const,\n            join: 'round' as const,\n          },\n        }\n      : {}),\n  };\n}\n\n/**\n * A screen-space layer that draws the glyph `state` currently holds at the pointer,\n * or nothing when it holds none. `<Canvas>` mounts one over its own state already.\n */\nexport function createPaintedCursorLayer(state: PaintedCursorState): RenderLayer<unknown> {\n  return {\n    id: PAINTED_CURSOR_LAYER_ID,\n    label: 'Painted cursor',\n    space: 'screen',\n    draw: (_data, view) => {\n      const frame = state.current();\n      if (!frame) return [];\n      const { cursor, at } = frame;\n      const glyph = GLYPHS[cursor.glyph];\n      if (!glyph) return [];\n\n      // A world-sized glyph holds its line weight in CSS px while its geometry\n      // grows — a ring at a 400px radius drawn with scaled weight is a filled\n      // blob. A single radius needs one scale factor, so average the axes.\n      const scale = (view.scale.x + view.scale.y) / 2;\n      const worldSized = cursor.worldRadius !== undefined;\n      const size = worldSized\n        ? cursorWorldSize(glyph, cursor.worldRadius as number, scale)\n        : (cursor.size ?? 24);\n      if (!(size > 0) || !Number.isFinite(size)) return [];\n\n      const ops = cursorPaintOps(\n        glyph,\n        worldSized ? { lineWidthScale: chromeLineWidthScale(glyph, size) } : {},\n      );\n      const [a, b, c, d, e, f] = cursorPaintMatrix(glyph, {\n        size,\n        angle: cursor.angle,\n        at,\n      });\n      // Column-major, the layout `Mat3` documents.\n      const transform = new Float32Array([a, b, 0, c, d, 0, e, f, 1]);\n      const children: DrawCommand[] = ops.map(commandFor);\n      return [{ kind: 'group', transform, children }];\n    },\n  };\n}\n"],"mappings":";;;AAuBA,IAAaA,IAA0B,kBAGjCC,oBAAY,IAAI,IAAkB;AACxC,SAASC,EAAQ,GAAiB;CAChC,IAAIC,IAAIF,EAAU,IAAIG,CAAC;CAKvB,OAJID,MAAM,KAAA,MACR,IAAIE,EAAUD,CAAC,GACfH,EAAU,IAAIG,GAAGD,CAAC,IAEbA;AACT;AAEA,SAASG,EAAW,GAAoC;CACtD,OAAO;EACL,MAAM;EACN,MAAMJ,EAAQK,EAAG,CAAC;EAClB,GAAIA,EAAG,SAAS,KAAA,IAAsD,CAAC,IAA3C,EAAE,MAAM,EAAE,OAAO,EAAE,OAAOA,EAAG,KAAK,EAAE,EAAE;EAClE,GAAIA,EAAG,WAAW,KAAA,IASd,CAAC,IARD,EACE,QAAQ;GACN,OAAO,EAAE,OAAOA,EAAG,OAAO,MAAM;GAChC,OAAOA,EAAG,OAAO;GACjB,KAAK;GACL,MAAM;EACR,EACF;CAEN;AACF;AAMA,SAAgBC,EAAyB,GAAiD;CACxF,OAAO;EACL,IAAIR;EACJ,OAAO;EACP,OAAO;EACP,OAAO,GAAO,MAAS;GACrB,IAAMS,IAAQC,EAAM,QAAQ;GAC5B,IAAI,CAACD,GAAO,OAAO,CAAC;GACpB,IAAM,EAAE,WAAQ,UAAOA,GACjBE,IAAQC,EAAOC,EAAO;GAC5B,IAAI,CAACF,GAAO,OAAO,CAAC;GAKpB,IAAMG,KAASC,EAAK,MAAM,IAAIA,EAAK,MAAM,KAAK,GACxCC,IAAaH,EAAO,gBAAgB,KAAA,GACpCI,IAAOD,IACTE,EAAgBP,GAAOE,EAAO,aAAuBC,CAAK,IACzDD,EAAO,QAAQ;GACpB,IAAI,EAAEI,IAAO,MAAM,CAAC,OAAO,SAASA,CAAI,GAAG,OAAO,CAAC;GAEnD,IAAME,IAAMC,EACVT,GACAK,IAAa,EAAE,gBAAgBK,EAAqBV,GAAOM,CAAI,EAAE,IAAI,CAAC,CACxE,GACM,CAACK,GAAGC,GAAGC,GAAGpB,GAAGqB,GAAGC,KAAKC,EAAkBhB,GAAO;IAClD;IACA,OAAOE,EAAO;IACd;GACF,CAAC;GAID,OAAO,CAAC;IAAE,MAAM;IAAS,WAAA,IAFH,aAAa;KAACS;KAAGC;KAAG;KAAGC;KAAGpB;KAAG;KAAGqB;KAAGC;KAAG;IAAC,CAEpC;IAAW,UADJP,EAAI,IAAIb,CACJ;GAAS,CAAC;EAChD;CACF;AACF"}
+{"version":3,"file":"paintedCursorLayer.js","names":[],"sources":["../../src/canvas/paintedCursorLayer.ts"],"sourcesContent":["/**\n * The painted tier: draws a cursor glyph into the scene when it is too big,\n * or too tied to the view, to be a CSS `url()` cursor.\n *\n * Screen-space: the glyph is chrome at the pointer, so it must not pan or zoom\n * with the camera. What *does* track the camera is a world-sized glyph's size,\n * and `view.scale` is read for that.\n */\n\nimport { GLYPHS } from '@weasel-js/cursor';\nimport {\n  chromeLineWidthScale,\n  cursorPaintMatrix,\n  cursorPaintOps,\n  cursorWorldSize,\n} from '@weasel-js/cursor';\nimport type { CursorPaintOp } from '@weasel-js/cursor';\nimport type { DrawCommand, PathDrawCommand } from '@weasel-js/renderer';\nimport type { RenderLayer } from 'core/layers/render';\nimport { pathFromD, type Path } from '@weasel-js/geom';\nimport type { PaintedCursorState } from '@weasel-js/cursor';\n\n/** Layer id, so a consumer can order or hide it like any other. */\nexport const PAINTED_CURSOR_LAYER_ID = 'painted-cursor';\n\n/** Handing the renderer the same `Path` object every frame lets its mesh cache hit. */\nconst pathCache = new Map<string, Path>();\nfunction pathFor(d: string): Path {\n  let p = pathCache.get(d);\n  if (p === undefined) {\n    p = pathFromD(d);\n    pathCache.set(d, p);\n  }\n  return p;\n}\n\nfunction commandFor(op: CursorPaintOp): PathDrawCommand {\n  return {\n    kind: 'path',\n    path: pathFor(op.d),\n    ...(op.fill !== undefined ? { fill: { paint: { color: op.fill } } } : {}),\n    ...(op.stroke !== undefined\n      ? {\n          stroke: {\n            paint: { color: op.stroke.color },\n            width: op.stroke.width,\n            cap: 'round' as const,\n            join: 'round' as const,\n          },\n        }\n      : {}),\n  };\n}\n\n/**\n * A screen-space layer that draws the glyph `state` currently holds at the pointer,\n * or nothing when it holds none. `<Canvas>` mounts one over its own state already.\n */\nexport function createPaintedCursorLayer(state: PaintedCursorState): RenderLayer<unknown> {\n  return {\n    id: PAINTED_CURSOR_LAYER_ID,\n    label: 'Painted cursor',\n    space: 'screen',\n    draw: (_data, view) => {\n      const frame = state.current();\n      if (!frame) return [];\n      const { cursor, at } = frame;\n      const glyph = GLYPHS[cursor.glyph];\n      if (!glyph) return [];\n\n      // A world-sized glyph holds its line weight in CSS px while its geometry\n      // grows — a ring at a 400px radius drawn with scaled weight is a filled\n      // blob. A single radius needs one scale factor, so average the axes.\n      const scale = (view.scale.x + view.scale.y) / 2;\n      const worldSized = cursor.worldRadius !== undefined;\n      const size = worldSized\n        ? cursorWorldSize(glyph, cursor.worldRadius as number, scale)\n        : (cursor.size ?? 24);\n      if (!(size > 0) || !Number.isFinite(size)) return [];\n\n      const ops = cursorPaintOps(\n        glyph,\n        worldSized ? { lineWidthScale: chromeLineWidthScale(glyph, size) } : {},\n      );\n      const [a, b, c, d, e, f] = cursorPaintMatrix(glyph, {\n        size,\n        angle: cursor.angle,\n        at,\n      });\n      // Column-major, the layout `GlMat3` documents.\n      const transform = new Float32Array([a, b, 0, c, d, 0, e, f, 1]);\n      const children: DrawCommand[] = ops.map(commandFor);\n      return [{ kind: 'group', transform, children }];\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAa,0BAA0B;;AAGvC,IAAM,4BAAY,IAAI,IAAkB;AACxC,SAAS,QAAQ,GAAiB;CAChC,IAAI,IAAI,UAAU,IAAI,CAAC;CACvB,IAAI,MAAM,QAAW;EACnB,IAAI,UAAU,CAAC;EACf,UAAU,IAAI,GAAG,CAAC;CACpB;CACA,OAAO;AACT;AAEA,SAAS,WAAW,IAAoC;CACtD,OAAO;EACL,MAAM;EACN,MAAM,QAAQ,GAAG,CAAC;EAClB,GAAI,GAAG,SAAS,SAAY,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC;EACvE,GAAI,GAAG,WAAW,SACd,EACE,QAAQ;GACN,OAAO,EAAE,OAAO,GAAG,OAAO,MAAM;GAChC,OAAO,GAAG,OAAO;GACjB,KAAK;GACL,MAAM;EACR,EACF,IACA,CAAC;CACP;AACF;;;;;AAMA,SAAgB,yBAAyB,OAAiD;CACxF,OAAO;EACL,IAAI;EACJ,OAAO;EACP,OAAO;EACP,OAAO,OAAO,SAAS;GACrB,MAAM,QAAQ,MAAM,QAAQ;GAC5B,IAAI,CAAC,OAAO,OAAO,CAAC;GACpB,MAAM,EAAE,QAAQ,OAAO;GACvB,MAAM,QAAQ,OAAO,OAAO;GAC5B,IAAI,CAAC,OAAO,OAAO,CAAC;GAKpB,MAAM,SAAS,KAAK,MAAM,IAAI,KAAK,MAAM,KAAK;GAC9C,MAAM,aAAa,OAAO,gBAAgB;GAC1C,MAAM,OAAO,aACT,gBAAgB,OAAO,OAAO,aAAuB,KAAK,IACzD,OAAO,QAAQ;GACpB,IAAI,EAAE,OAAO,MAAM,CAAC,OAAO,SAAS,IAAI,GAAG,OAAO,CAAC;GAEnD,MAAM,MAAM,eACV,OACA,aAAa,EAAE,gBAAgB,qBAAqB,OAAO,IAAI,EAAE,IAAI,CAAC,CACxE;GACA,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,kBAAkB,OAAO;IAClD;IACA,OAAO,OAAO;IACd;GACF,CAAC;GAID,OAAO,CAAC;IAAE,MAAM;IAAS,eAFH,aAAa;KAAC;KAAG;KAAG;KAAG;KAAG;KAAG;KAAG;KAAG;KAAG;IAAC,CAEpC;IAAW,UADJ,IAAI,IAAI,UACJ;GAAS,CAAC;EAChD;CACF;AACF"}

package/dist/canvas/pathOverlay.js

@@ -0,0 +1,63 @@
+import { createEmitter } from "@weasel-js/registry";
+
+//#region src/canvas/pathOverlay.ts
+/**
+* The kit's roles: `'chrome'` for a path shown for reference, `'picked'` for
+* one a gesture has taken, and `'remove'` for one it would delete.
+*/
+var PATH_OVERLAY_ROLES = {
+	chrome: {
+		fill: { color: "rgba(164, 139, 212, 0.18)" },
+		stroke: { color: "#a48bd4" }
+	},
+	picked: {
+		fill: { color: "rgba(164, 139, 212, 0.45)" },
+		stroke: { color: "#7d5fc0" }
+	},
+	remove: {
+		fill: { color: "rgba(226, 59, 59, 0.35)" },
+		stroke: { color: "#e23b3b" }
+	}
+};
+/** A store of transient paths and the layer that draws it; hand the layer to
+*  a tool's `overlay` or a canvas's `layers`. */
+function createPathOverlay({ id, label = "Transient paths", roles }) {
+	const styles = {
+		...PATH_OVERLAY_ROLES,
+		...roles
+	};
+	const changed = createEmitter();
+	let current = [];
+	const set = (paths) => {
+		if (paths.length === 0 && current.length === 0) return;
+		current = paths;
+		changed.emit();
+	};
+	return {
+		get: () => current,
+		set,
+		clear: () => set([]),
+		layer: {
+			id,
+			label,
+			space: "world",
+			subscribe: changed.subscribe,
+			draw: () => current.map(({ path, role = "chrome" }) => {
+				const style = styles[role] ?? styles["chrome"];
+				return {
+					kind: "path",
+					path,
+					...style.fill ? { fill: { paint: style.fill } } : {},
+					...style.stroke ? { stroke: {
+						paint: style.stroke,
+						width: { px: 1 }
+					} } : {}
+				};
+			})
+		}
+	};
+}
+
+//#endregion
+export { PATH_OVERLAY_ROLES, createPathOverlay };
+//# sourceMappingURL=pathOverlay.js.map