@weasel-js/core 1.10.0 → 1.11.0

package/dist/canvas/nodeShapes/imagePainter.js

@@ -1,87 +1,103 @@
-import { paintsPose as e, poseBoxBounds as t } from "./poseBox.js";
-import { getImageBitmap as n, imageStatus as r } from "@weasel-js/renderer";
-import { linePath as i } from "@weasel-js/geom";
+import { paintsPose, poseBoxBounds } from "./poseBox.js";
+import { getImageBitmap, imageStatus } from "@weasel-js/renderer";
+import { linePath } from "@weasel-js/geom";
+
 //#region src/canvas/nodeShapes/imagePainter.ts
-function a(e, t) {
+function sourceInPixels(s, bmp) {
 	return {
-		x: e.x * t.width,
-		y: e.y * t.height,
-		w: e.width * t.width,
-		h: e.height * t.height
+		x: s.x * bmp.width,
+		y: s.y * bmp.height,
+		w: s.width * bmp.width,
+		h: s.height * bmp.height
 	};
 }
-function o(e, t, n) {
-	if (n && n > 0) return {
-		width: Math.abs(e.width) * n / (t?.width || 1),
-		height: Math.abs(e.height) * n / (t?.height || 1)
+/** The whole bitmap's size in device pixels when `source` of it fills `pose`. */
+function drawnSize(pose, source, pixelScale) {
+	if (!(pixelScale && pixelScale > 0)) return void 0;
+	return {
+		width: Math.abs(pose.width) * pixelScale / (source?.width || 1),
+		height: Math.abs(pose.height) * pixelScale / (source?.height || 1)
 	};
 }
-var s = {
+/** Raster-image painter. Renders `data.image.src` (URL / blob: / data-URI)
+*  via an `ImageDrawCommand` once the bitmap has decoded; until then it paints
+*  a faint placeholder outline so the node stays visible + selectable (a
+*  reddish outline + slash marks a failed load). The decoded bitmap is owned
+*  by `imageCache`, keyed on `src`; the node holds only the serializable `src`.
+*  Registered before `kit:rect-fallback` so image nodes don't fall through. */
+var IMAGE_PAINTER = {
 	id: "kit:image",
-	matches: (t) => {
-		if (!e(t.pose)) return !1;
-		let n = t.data?.image?.src;
-		return typeof n == "string" && n.length > 0;
+	snapsToBox: true,
+	matches: (node) => {
+		if (!paintsPose(node.pose)) return false;
+		const src = node.data?.image?.src;
+		return typeof src === "string" && src.length > 0;
 	},
-	paint: (e, t, s) => {
-		let c = e.data, l = t, u = s?.resolveImage ? s.resolveImage(e) : n(c.image.src, o(l, c.image.source, s?.pixelScale));
-		if (u) return [{
+	paint: (node, pose, ctx) => {
+		const d = node.data;
+		const p = pose;
+		const bmp = ctx?.resolveImage ? ctx.resolveImage(node) : getImageBitmap(d.image.src, drawnSize(p, d.image.source, ctx?.pixelScale));
+		if (bmp) return [{
 			kind: "image",
-			image: u,
-			x: l.x,
-			y: l.y,
-			w: l.width,
-			h: l.height,
-			...c.image.opacity === void 0 ? {} : { opacity: c.image.opacity },
-			...c.image.source ? { source: a(c.image.source, u) } : {},
-			...c.image.flipX ? { flipX: !0 } : {},
-			...c.image.flipY ? { flipY: !0 } : {}
+			image: bmp,
+			x: p.x,
+			y: p.y,
+			w: p.width,
+			h: p.height,
+			...d.image.opacity !== void 0 ? { opacity: d.image.opacity } : {},
+			...d.image.source ? { source: sourceInPixels(d.image.source, bmp) } : {},
+			...d.image.flipX ? { flipX: true } : {},
+			...d.image.flipY ? { flipY: true } : {}
 		}];
-		let d = !s?.resolveImage && r(c.image.src) === "error", f = d ? "#d08a8a" : "#bbbbbb", p = [{
+		const error = ctx?.resolveImage ? false : imageStatus(d.image.src) === "error";
+		const color = error ? "#d08a8a" : "#bbbbbb";
+		const cmds = [{
 			kind: "path",
 			path: {
 				kind: "rect",
-				x: l.x,
-				y: l.y,
-				width: l.width,
-				height: l.height
+				x: p.x,
+				y: p.y,
+				width: p.width,
+				height: p.height
 			},
 			stroke: {
-				paint: { color: f },
+				paint: { color },
 				width: 1
 			}
 		}];
-		return d && p.push({
+		if (error) cmds.push({
 			kind: "path",
-			path: i({
-				x: l.x,
-				y: l.y
+			path: linePath({
+				x: p.x,
+				y: p.y
 			}, {
-				x: l.x + l.width,
-				y: l.y + l.height
+				x: p.x + p.width,
+				y: p.y + p.height
 			}),
 			stroke: {
-				paint: { color: f },
+				paint: { color },
 				width: 1
 			}
-		}), p;
+		});
+		return cmds;
 	},
-	silhouette: (e, t) => {
-		let n = t;
+	silhouette: (_node, pose) => {
+		const p = pose;
 		return {
 			kind: "rect",
-			x: n.x,
-			y: n.y,
-			width: n.width,
-			height: n.height
+			x: p.x,
+			y: p.y,
+			width: p.width,
+			height: p.height
 		};
 	},
-	bounds: (e, n, r) => t(n, c, r)
-}, c = {
+	bounds: (_node, pose, ctx) => poseBoxBounds(pose, IMAGE_PLACEHOLDER_STROKE, ctx)
+};
+var IMAGE_PLACEHOLDER_STROKE = {
 	paint: { color: "#000" },
 	width: 1
 };
-//#endregion
-export { s as IMAGE_PAINTER, c as IMAGE_PLACEHOLDER_STROKE, o as drawnSize, a as sourceInPixels };
 
+//#endregion
+export { IMAGE_PAINTER, IMAGE_PLACEHOLDER_STROKE, drawnSize, sourceInPixels };
 //# sourceMappingURL=imagePainter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"imagePainter.js","names":["sourceInPixels","s","bmp","drawnSize","pixelScale","pose","source","IMAGE_PAINTER","paintsPose","node","src","d","p","ctx","getImageBitmap","error","imageStatus","color","cmds","linePath","poseBoxBounds","IMAGE_PLACEHOLDER_STROKE"],"sources":["../../../src/canvas/nodeShapes/imagePainter.ts"],"sourcesContent":["import {\n  linePath\n} from '@weasel-js/geom';\nimport type { Stroke } from '@weasel-js/paint';\nimport type { NodeShapeEntry } from 'canvas/NodeShape';\nimport type { Node, RectPose } from 'core/scene/types';\nimport {\n  getImageBitmap, imageStatus, type ImageNodeData, type ImageRasterSize,\n} from '@weasel-js/renderer';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport { paintsPose, poseBoxBounds } from './poseBox';\n\n// ─── Built-in painters ─────────────────────────────────────────────────\n\nexport function sourceInPixels(\n  s: NonNullable<ImageNodeData['image']['source']>,\n  bmp: ImageBitmap,\n): { x: number; y: number; w: number; h: number } {\n  return {\n    x: s.x * bmp.width, y: s.y * bmp.height, w: s.width * bmp.width, h: s.height * bmp.height,\n  };\n}\n\n/** The whole bitmap's size in device pixels when `source` of it fills `pose`. */\nexport function drawnSize(\n  pose: RectPose,\n  source: ImageNodeData['image']['source'],\n  pixelScale: number | undefined,\n): ImageRasterSize | undefined {\n  if (!(pixelScale && pixelScale > 0)) return undefined;\n  return {\n    width: Math.abs(pose.width) * pixelScale / (source?.width || 1),\n    height: Math.abs(pose.height) * pixelScale / (source?.height || 1),\n  };\n}\n\n/** Raster-image painter. Renders `data.image.src` (URL / blob: / data-URI)\n *  via an `ImageDrawCommand` once the bitmap has decoded; until then it paints\n *  a faint placeholder outline so the node stays visible + selectable (a\n *  reddish outline + slash marks a failed load). The decoded bitmap is owned\n *  by `imageCache`, keyed on `src`; the node holds only the serializable `src`.\n *  Registered before `kit:rect-fallback` so image nodes don't fall through. */\nexport const IMAGE_PAINTER: NodeShapeEntry<unknown, RectPose> = {\n  id: 'kit:image',\n  matches: (node) => {\n    if (!paintsPose(node.pose)) return false;\n    const src = (node.data as { image?: { src?: unknown } } | null)?.image?.src;\n    return typeof src === 'string' && src.length > 0;\n  },\n  paint: (node, pose, ctx) => {\n    const d = node.data as ImageNodeData;\n    const p = pose;\n    const bmp = ctx?.resolveImage\n      ? ctx.resolveImage(node as unknown as Node<unknown, string, unknown>)\n      : getImageBitmap(d.image.src, drawnSize(p, d.image.source, ctx?.pixelScale));\n    if (bmp) {\n      return [{\n        kind: 'image',\n        image: bmp,\n        x: p.x, y: p.y, w: p.width, h: p.height,\n        ...(d.image.opacity !== undefined ? { opacity: d.image.opacity } : {}),\n        ...(d.image.source ? { source: sourceInPixels(d.image.source, bmp) } : {}),\n        ...(d.image.flipX ? { flipX: true } : {}),\n        ...(d.image.flipY ? { flipY: true } : {}),\n      }];\n    }\n    // Not ready — faint placeholder (grey while loading, reddish + slash on\n    // error). With a caller-supplied resolver the fallback is deterministic:\n    // always the plain grey outline, no ambient load-status read.\n    const error = ctx?.resolveImage ? false : imageStatus(d.image.src) === 'error';\n    const color = error ? '#d08a8a' : '#bbbbbb';\n    const cmds: DrawCommand[] = [{\n      kind: 'path',\n      path: { kind: 'rect', x: p.x, y: p.y, width: p.width, height: p.height },\n      stroke: { paint: { color }, width: 1 },\n    }];\n    if (error) {\n      cmds.push({\n        kind: 'path',\n        path: linePath({ x: p.x, y: p.y }, { x: p.x + p.width, y: p.y + p.height }),\n        stroke: { paint: { color }, width: 1 },\n      });\n    }\n    return cmds;\n  },\n  silhouette: (_node, pose) => {\n    const p = pose;\n    return { kind: 'rect', x: p.x, y: p.y, width: p.width, height: p.height };\n  },\n  // The placeholder's 1-unit outline is the only thing that leaves the box.\n  bounds: (_node, pose, ctx) => poseBoxBounds(pose, IMAGE_PLACEHOLDER_STROKE, ctx),\n};\n\nexport const IMAGE_PLACEHOLDER_STROKE: Stroke = { paint: { color: '#000' }, width: 1 };\n"],"mappings":";;;;AAcA,SAAgBA,EACd,GACA,GACgD;CAChD,OAAO;EACL,GAAGC,EAAE,IAAIC,EAAI;EAAO,GAAGD,EAAE,IAAIC,EAAI;EAAQ,GAAGD,EAAE,QAAQC,EAAI;EAAO,GAAGD,EAAE,SAASC,EAAI;CACrF;AACF;AAGA,SAAgBC,EACd,GACA,GACA,GAC6B;CAC7B,IAAMC,KAAcA,IAAa,GACjC,OAAO;EACL,OAAO,KAAK,IAAIC,EAAK,KAAK,IAAID,KAAcE,GAAQ,SAAS;EAC7D,QAAQ,KAAK,IAAID,EAAK,MAAM,IAAID,KAAcE,GAAQ,UAAU;CAClE;AACF;AAQA,IAAaC,IAAmD;CAC9D,IAAI;CACJ,UAAU,MAAS;EACjB,IAAI,CAACC,EAAWC,EAAK,IAAI,GAAG,OAAO;EACnC,IAAMC,IAAOD,EAAK,MAA+C,OAAO;EACxE,OAAO,OAAOC,KAAQ,YAAYA,EAAI,SAAS;CACjD;CACA,QAAQ,GAAM,GAAM,MAAQ;EAC1B,IAAMC,IAAIF,EAAK,MACTG,IAAIP,GACJH,IAAMW,GAAK,eACbA,EAAI,aAAaJ,CAAiD,IAClEK,EAAeH,EAAE,MAAM,KAAKR,EAAUS,GAAGD,EAAE,MAAM,QAAQE,GAAK,UAAU,CAAC;EAC7E,IAAIX,GACF,OAAO,CAAC;GACN,MAAM;GACN,OAAOA;GACP,GAAGU,EAAE;GAAG,GAAGA,EAAE;GAAG,GAAGA,EAAE;GAAO,GAAGA,EAAE;GACjC,GAAID,EAAE,MAAM,YAAY,KAAA,IAA2C,CAAC,IAAhC,EAAE,SAASA,EAAE,MAAM,QAAQ;GAC/D,GAAIA,EAAE,MAAM,SAAS,EAAE,QAAQX,EAAeW,EAAE,MAAM,QAAQT,CAAG,EAAE,IAAI,CAAC;GACxE,GAAIS,EAAE,MAAM,QAAQ,EAAE,OAAO,GAAK,IAAI,CAAC;GACvC,GAAIA,EAAE,MAAM,QAAQ,EAAE,OAAO,GAAK,IAAI,CAAC;EACzC,CAAC;EAKH,IAAMI,IAAQ,IAAK,gBAAuBC,EAAYL,EAAE,MAAM,GAAG,MAAM,SACjEM,IAAQF,IAAQ,YAAY,WAC5BG,IAAsB,CAAC;GAC3B,MAAM;GACN,MAAM;IAAE,MAAM;IAAQ,GAAGN,EAAE;IAAG,GAAGA,EAAE;IAAG,OAAOA,EAAE;IAAO,QAAQA,EAAE;GAAO;GACvE,QAAQ;IAAE,OAAO,EAAE,SAAM;IAAG,OAAO;GAAE;EACvC,CAAC;EAQD,OAPIG,KACFG,EAAK,KAAK;GACR,MAAM;GACN,MAAMC,EAAS;IAAE,GAAGP,EAAE;IAAG,GAAGA,EAAE;GAAE,GAAG;IAAE,GAAGA,EAAE,IAAIA,EAAE;IAAO,GAAGA,EAAE,IAAIA,EAAE;GAAO,CAAC;GAC1E,QAAQ;IAAE,OAAO,EAAE,SAAM;IAAG,OAAO;GAAE;EACvC,CAAC,GAEIM;CACT;CACA,aAAa,GAAO,MAAS;EAC3B,IAAMN,IAAIP;EACV,OAAO;GAAE,MAAM;GAAQ,GAAGO,EAAE;GAAG,GAAGA,EAAE;GAAG,OAAOA,EAAE;GAAO,QAAQA,EAAE;EAAO;CAC1E;CAEA,SAAS,GAAO,GAAM,MAAQQ,EAAcf,GAAMgB,GAA0BR,CAAG;AACjF,GAEaQ,IAAmC;CAAE,OAAO,EAAE,OAAO,OAAO;CAAG,OAAO;AAAE"}
+{"version":3,"file":"imagePainter.js","names":[],"sources":["../../../src/canvas/nodeShapes/imagePainter.ts"],"sourcesContent":["import {\n  linePath\n} from '@weasel-js/geom';\nimport type { Stroke } from '@weasel-js/paint';\nimport type { NodeShapeEntry } from 'canvas/NodeShape';\nimport type { Node, RectPose } from 'core/scene/types';\nimport {\n  getImageBitmap, imageStatus, type ImageNodeData, type ImageRasterSize,\n} from '@weasel-js/renderer';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport { paintsPose, poseBoxBounds } from './poseBox';\n\n// ─── Built-in painters ─────────────────────────────────────────────────\n\nexport function sourceInPixels(\n  s: NonNullable<ImageNodeData['image']['source']>,\n  bmp: ImageBitmap,\n): { x: number; y: number; w: number; h: number } {\n  return {\n    x: s.x * bmp.width, y: s.y * bmp.height, w: s.width * bmp.width, h: s.height * bmp.height,\n  };\n}\n\n/** The whole bitmap's size in device pixels when `source` of it fills `pose`. */\nexport function drawnSize(\n  pose: RectPose,\n  source: ImageNodeData['image']['source'],\n  pixelScale: number | undefined,\n): ImageRasterSize | undefined {\n  if (!(pixelScale && pixelScale > 0)) return undefined;\n  return {\n    width: Math.abs(pose.width) * pixelScale / (source?.width || 1),\n    height: Math.abs(pose.height) * pixelScale / (source?.height || 1),\n  };\n}\n\n/** Raster-image painter. Renders `data.image.src` (URL / blob: / data-URI)\n *  via an `ImageDrawCommand` once the bitmap has decoded; until then it paints\n *  a faint placeholder outline so the node stays visible + selectable (a\n *  reddish outline + slash marks a failed load). The decoded bitmap is owned\n *  by `imageCache`, keyed on `src`; the node holds only the serializable `src`.\n *  Registered before `kit:rect-fallback` so image nodes don't fall through. */\nexport const IMAGE_PAINTER: NodeShapeEntry<unknown, RectPose> = {\n  id: 'kit:image',\n  snapsToBox: true,\n  matches: (node) => {\n    if (!paintsPose(node.pose)) return false;\n    const src = (node.data as { image?: { src?: unknown } } | null)?.image?.src;\n    return typeof src === 'string' && src.length > 0;\n  },\n  paint: (node, pose, ctx) => {\n    const d = node.data as ImageNodeData;\n    const p = pose;\n    const bmp = ctx?.resolveImage\n      ? ctx.resolveImage(node as unknown as Node<unknown, string, unknown>)\n      : getImageBitmap(d.image.src, drawnSize(p, d.image.source, ctx?.pixelScale));\n    if (bmp) {\n      return [{\n        kind: 'image',\n        image: bmp,\n        x: p.x, y: p.y, w: p.width, h: p.height,\n        ...(d.image.opacity !== undefined ? { opacity: d.image.opacity } : {}),\n        ...(d.image.source ? { source: sourceInPixels(d.image.source, bmp) } : {}),\n        ...(d.image.flipX ? { flipX: true } : {}),\n        ...(d.image.flipY ? { flipY: true } : {}),\n      }];\n    }\n    // Not ready — faint placeholder (grey while loading, reddish + slash on\n    // error). With a caller-supplied resolver the fallback is deterministic:\n    // always the plain grey outline, no ambient load-status read.\n    const error = ctx?.resolveImage ? false : imageStatus(d.image.src) === 'error';\n    const color = error ? '#d08a8a' : '#bbbbbb';\n    const cmds: DrawCommand[] = [{\n      kind: 'path',\n      path: { kind: 'rect', x: p.x, y: p.y, width: p.width, height: p.height },\n      stroke: { paint: { color }, width: 1 },\n    }];\n    if (error) {\n      cmds.push({\n        kind: 'path',\n        path: linePath({ x: p.x, y: p.y }, { x: p.x + p.width, y: p.y + p.height }),\n        stroke: { paint: { color }, width: 1 },\n      });\n    }\n    return cmds;\n  },\n  silhouette: (_node, pose) => {\n    const p = pose;\n    return { kind: 'rect', x: p.x, y: p.y, width: p.width, height: p.height };\n  },\n  // The placeholder's 1-unit outline is the only thing that leaves the box.\n  bounds: (_node, pose, ctx) => poseBoxBounds(pose, IMAGE_PLACEHOLDER_STROKE, ctx),\n};\n\nexport const IMAGE_PLACEHOLDER_STROKE: Stroke = { paint: { color: '#000' }, width: 1 };\n"],"mappings":";;;;;AAcA,SAAgB,eACd,GACA,KACgD;CAChD,OAAO;EACL,GAAG,EAAE,IAAI,IAAI;EAAO,GAAG,EAAE,IAAI,IAAI;EAAQ,GAAG,EAAE,QAAQ,IAAI;EAAO,GAAG,EAAE,SAAS,IAAI;CACrF;AACF;;AAGA,SAAgB,UACd,MACA,QACA,YAC6B;CAC7B,IAAI,EAAE,cAAc,aAAa,IAAI,OAAO;CAC5C,OAAO;EACL,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,cAAc,QAAQ,SAAS;EAC7D,QAAQ,KAAK,IAAI,KAAK,MAAM,IAAI,cAAc,QAAQ,UAAU;CAClE;AACF;;;;;;;AAQA,IAAa,gBAAmD;CAC9D,IAAI;CACJ,YAAY;CACZ,UAAU,SAAS;EACjB,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,OAAO;EACnC,MAAM,MAAO,KAAK,MAA+C,OAAO;EACxE,OAAO,OAAO,QAAQ,YAAY,IAAI,SAAS;CACjD;CACA,QAAQ,MAAM,MAAM,QAAQ;EAC1B,MAAM,IAAI,KAAK;EACf,MAAM,IAAI;EACV,MAAM,MAAM,KAAK,eACb,IAAI,aAAa,IAAiD,IAClE,eAAe,EAAE,MAAM,KAAK,UAAU,GAAG,EAAE,MAAM,QAAQ,KAAK,UAAU,CAAC;EAC7E,IAAI,KACF,OAAO,CAAC;GACN,MAAM;GACN,OAAO;GACP,GAAG,EAAE;GAAG,GAAG,EAAE;GAAG,GAAG,EAAE;GAAO,GAAG,EAAE;GACjC,GAAI,EAAE,MAAM,YAAY,SAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,IAAI,CAAC;GACpE,GAAI,EAAE,MAAM,SAAS,EAAE,QAAQ,eAAe,EAAE,MAAM,QAAQ,GAAG,EAAE,IAAI,CAAC;GACxE,GAAI,EAAE,MAAM,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;GACvC,GAAI,EAAE,MAAM,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;EACzC,CAAC;EAKH,MAAM,QAAQ,KAAK,eAAe,QAAQ,YAAY,EAAE,MAAM,GAAG,MAAM;EACvE,MAAM,QAAQ,QAAQ,YAAY;EAClC,MAAM,OAAsB,CAAC;GAC3B,MAAM;GACN,MAAM;IAAE,MAAM;IAAQ,GAAG,EAAE;IAAG,GAAG,EAAE;IAAG,OAAO,EAAE;IAAO,QAAQ,EAAE;GAAO;GACvE,QAAQ;IAAE,OAAO,EAAE,MAAM;IAAG,OAAO;GAAE;EACvC,CAAC;EACD,IAAI,OACF,KAAK,KAAK;GACR,MAAM;GACN,MAAM,SAAS;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,GAAG;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC1E,QAAQ;IAAE,OAAO,EAAE,MAAM;IAAG,OAAO;GAAE;EACvC,CAAC;EAEH,OAAO;CACT;CACA,aAAa,OAAO,SAAS;EAC3B,MAAM,IAAI;EACV,OAAO;GAAE,MAAM;GAAQ,GAAG,EAAE;GAAG,GAAG,EAAE;GAAG,OAAO,EAAE;GAAO,QAAQ,EAAE;EAAO;CAC1E;CAEA,SAAS,OAAO,MAAM,QAAQ,cAAc,MAAM,0BAA0B,GAAG;AACjF;AAEA,IAAa,2BAAmC;CAAE,OAAO,EAAE,OAAO,OAAO;CAAG,OAAO;AAAE"}

package/dist/canvas/nodeShapes/measurePainter.js

@@ -0,0 +1,58 @@
+import { paintsPose } from "./poseBox.js";
+import { OVERLAY_ROLE_STROKES } from "../overlayRoleStrokes.js";
+import { measureEndsOf } from "../../features/measure/measurement.js";
+import { polylineFromPoints } from "@weasel-js/geom";
+
+//#region src/canvas/nodeShapes/measurePainter.ts
+/** Screen-px half-length of the tick across each end of a measurement. */
+var MEASURE_TICK_PX = 5;
+/**
+* A measurement's line and a tick across each end, as the measure painter
+* and the measurements layer draw it. `perPx` is world units per screen pixel, so the
+* line and its ticks keep their screen size at any zoom.
+*/
+function measureCommands(start, end, perPx) {
+	const stroke = {
+		...OVERLAY_ROLE_STROKES["measure"],
+		width: { px: 1 }
+	};
+	const len = Math.hypot(end.x - start.x, end.y - start.y);
+	const nx = len > 0 ? -(end.y - start.y) / len : 0;
+	const ny = len > 0 ? (end.x - start.x) / len : 1;
+	const half = MEASURE_TICK_PX * perPx;
+	const tick = (p) => ({
+		kind: "path",
+		path: polylineFromPoints([{
+			x: p.x - nx * half,
+			y: p.y - ny * half
+		}, {
+			x: p.x + nx * half,
+			y: p.y + ny * half
+		}]),
+		stroke
+	});
+	const out = [tick(start), tick(end)];
+	if (len > 0) out.unshift({
+		kind: "path",
+		path: polylineFromPoints([start, end]),
+		stroke
+	});
+	return out;
+}
+/** Paints a measurement node — `data.measure`, in world units — in the
+*  canvas's measure color. It has no silhouette: a measurement is not content
+*  to pick. */
+var MEASURE_PAINTER = {
+	id: "kit:measure",
+	matches: (node) => paintsPose(node.pose) && measureEndsOf(node) !== null,
+	paint: (node, _pose, ctx) => {
+		const ends = measureEndsOf(node);
+		if (!ends) return [];
+		const dpr = globalThis.devicePixelRatio || 1;
+		return measureCommands(ends.start, ends.end, dpr / (ctx?.pixelScale ?? dpr));
+	}
+};
+
+//#endregion
+export { MEASURE_PAINTER, MEASURE_TICK_PX, measureCommands };
+//# sourceMappingURL=measurePainter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"measurePainter.js","names":[],"sources":["../../../src/canvas/nodeShapes/measurePainter.ts"],"sourcesContent":["import { polylineFromPoints } from '@weasel-js/geom';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { NodeShapeEntry } from 'canvas/NodeShape';\nimport { OVERLAY_ROLE_STROKES } from 'canvas/overlayRoleStrokes';\nimport { measureEndsOf, type MeasurePoint } from 'features/measure/measurement';\nimport { paintsPose } from './poseBox';\n\n/** Screen-px half-length of the tick across each end of a measurement. */\nexport const MEASURE_TICK_PX = 5;\n\n/**\n * A measurement's line and a tick across each end, as the measure painter\n * and the measurements layer draw it. `perPx` is world units per screen pixel, so the\n * line and its ticks keep their screen size at any zoom.\n */\nexport function measureCommands(start: MeasurePoint, end: MeasurePoint, perPx: number): DrawCommand[] {\n  const stroke = { ...OVERLAY_ROLE_STROKES['measure'], width: { px: 1 } };\n  const len = Math.hypot(end.x - start.x, end.y - start.y);\n  // The ticks run across the line; with no length yet they stand upright.\n  const nx = len > 0 ? -(end.y - start.y) / len : 0;\n  const ny = len > 0 ? (end.x - start.x) / len : 1;\n  const half = MEASURE_TICK_PX * perPx;\n  const tick = (p: MeasurePoint): DrawCommand => ({\n    kind: 'path',\n    path: polylineFromPoints([{ x: p.x - nx * half, y: p.y - ny * half }, { x: p.x + nx * half, y: p.y + ny * half }]),\n    stroke,\n  });\n  const out: DrawCommand[] = [tick(start), tick(end)];\n  if (len > 0) out.unshift({ kind: 'path', path: polylineFromPoints([start, end]), stroke });\n  return out;\n}\n\n/** Paints a measurement node — `data.measure`, in world units — in the\n *  canvas's measure color. It has no silhouette: a measurement is not content\n *  to pick. */\nexport const MEASURE_PAINTER: NodeShapeEntry = {\n  id: 'kit:measure',\n  matches: (node) => paintsPose(node.pose) && measureEndsOf(node) !== null,\n  paint: (node, _pose, ctx) => {\n    const ends = measureEndsOf(node);\n    if (!ends) return [];\n    const dpr = globalThis.devicePixelRatio || 1;\n    return measureCommands(ends.start, ends.end, dpr / (ctx?.pixelScale ?? dpr));\n  },\n};\n"],"mappings":";;;;;;;AAQA,IAAa,kBAAkB;;;;;;AAO/B,SAAgB,gBAAgB,OAAqB,KAAmB,OAA8B;CACpG,MAAM,SAAS;EAAE,GAAG,qBAAqB;EAAY,OAAO,EAAE,IAAI,EAAE;CAAE;CACtE,MAAM,MAAM,KAAK,MAAM,IAAI,IAAI,MAAM,GAAG,IAAI,IAAI,MAAM,CAAC;CAEvD,MAAM,KAAK,MAAM,IAAI,EAAE,IAAI,IAAI,MAAM,KAAK,MAAM;CAChD,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,MAAM;CAC/C,MAAM,OAAO,kBAAkB;CAC/B,MAAM,QAAQ,OAAkC;EAC9C,MAAM;EACN,MAAM,mBAAmB,CAAC;GAAE,GAAG,EAAE,IAAI,KAAK;GAAM,GAAG,EAAE,IAAI,KAAK;EAAK,GAAG;GAAE,GAAG,EAAE,IAAI,KAAK;GAAM,GAAG,EAAE,IAAI,KAAK;EAAK,CAAC,CAAC;EACjH;CACF;CACA,MAAM,MAAqB,CAAC,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC;CAClD,IAAI,MAAM,GAAG,IAAI,QAAQ;EAAE,MAAM;EAAQ,MAAM,mBAAmB,CAAC,OAAO,GAAG,CAAC;EAAG;CAAO,CAAC;CACzF,OAAO;AACT;;;;AAKA,IAAa,kBAAkC;CAC7C,IAAI;CACJ,UAAU,SAAS,WAAW,KAAK,IAAI,KAAK,cAAc,IAAI,MAAM;CACpE,QAAQ,MAAM,OAAO,QAAQ;EAC3B,MAAM,OAAO,cAAc,IAAI;EAC/B,IAAI,CAAC,MAAM,OAAO,CAAC;EACnB,MAAM,MAAM,WAAW,oBAAoB;EAC3C,OAAO,gBAAgB,KAAK,OAAO,KAAK,KAAK,OAAO,KAAK,cAAc,IAAI;CAC7E;AACF"}

package/dist/canvas/nodeShapes/memo.js

@@ -1,9 +1,20 @@
 //#region src/canvas/nodeShapes/memo.ts
-var e = "shape:paint";
-function t(e) {
-	return (e.dependsOn?.length ?? 0) > 0 && e.derivePath !== void 0;
+/**
+* Slot for a painter's memoized `paint` output.
+*
+* Distinct from the silhouette slot even though the two mostly invalidate
+* together: the silhouette bakes `pose.rotation` in (paint does not — the
+* render wrap applies it), and paint alone can depend on `NodePaintCtx` and on
+* ambient readiness.
+*
+* **Only for painters that are a pure function of `(node, pose, data)`.**
+* `kit:text` and `kit:image` do not qualify.
+*/
+var PAINT_SLOT = "shape:paint";
+function derivesPath(node) {
+	return (node.dependsOn?.length ?? 0) > 0 && node.derivePath !== void 0;
 }
-//#endregion
-export { e as PAINT_SLOT, t as derivesPath };
 
+//#endregion
+export { PAINT_SLOT, derivesPath };
 //# sourceMappingURL=memo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"memo.js","names":["PAINT_SLOT","derivesPath","node"],"sources":["../../../src/canvas/nodeShapes/memo.ts"],"sourcesContent":["\n/**\n * Slot for a painter's memoized `paint` output.\n *\n * Distinct from the silhouette slot even though the two mostly invalidate\n * together: the silhouette bakes `pose.rotation` in (paint does not — the\n * render wrap applies it), and paint alone can depend on `NodePaintCtx` and on\n * ambient readiness.\n *\n * **Only for painters that are a pure function of `(node, pose, data)`.**\n * `kit:text` and `kit:image` do not qualify.\n */\nexport const PAINT_SLOT = 'shape:paint';\n\nexport function derivesPath(node: { dependsOn?: readonly unknown[] | 'children'; derivePath?: unknown }): boolean {\n  return (node.dependsOn?.length ?? 0) > 0 && node.derivePath !== undefined;\n}\n"],"mappings":";AAYA,IAAaA,IAAa;AAE1B,SAAgBC,EAAY,GAAsF;CAChH,QAAQC,EAAK,WAAW,UAAU,KAAK,KAAKA,EAAK,eAAe,KAAA;AAClE"}
+{"version":3,"file":"memo.js","names":[],"sources":["../../../src/canvas/nodeShapes/memo.ts"],"sourcesContent":["\n/**\n * Slot for a painter's memoized `paint` output.\n *\n * Distinct from the silhouette slot even though the two mostly invalidate\n * together: the silhouette bakes `pose.rotation` in (paint does not — the\n * render wrap applies it), and paint alone can depend on `NodePaintCtx` and on\n * ambient readiness.\n *\n * **Only for painters that are a pure function of `(node, pose, data)`.**\n * `kit:text` and `kit:image` do not qualify.\n */\nexport const PAINT_SLOT = 'shape:paint';\n\nexport function derivesPath(node: { dependsOn?: readonly unknown[] | 'children'; derivePath?: unknown }): boolean {\n  return (node.dependsOn?.length ?? 0) > 0 && node.derivePath !== undefined;\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,aAAa;AAE1B,SAAgB,YAAY,MAAsF;CAChH,QAAQ,KAAK,WAAW,UAAU,KAAK,KAAK,KAAK,eAAe;AAClE"}

package/dist/canvas/nodeShapes/nodePaint.js

@@ -1,68 +1,147 @@
-import { bumpNodeMemoGeneration as e } from "../../core/scene/nodeMemo.js";
-import { DEFAULT_SHAPE_FILL as t } from "../../util/paint.js";
-import { paintDrawKindRegistry as n } from "@weasel-js/renderer";
-import { countPathAnchors as r } from "@weasel-js/geom";
-import { markerReach as i, resolveStrokeWidth as a } from "@weasel-js/stroke";
+import { bumpNodeMemoGeneration } from "../../core/scene/nodeMemo.js";
+import { DEFAULT_SHAPE_FILL } from "../../util/paint.js";
+import { paintDrawKindRegistry } from "@weasel-js/renderer";
+import { countPathAnchors } from "@weasel-js/geom";
+import { markerReach, resolveStrokeWidth, widestStrokeWidth } from "@weasel-js/stroke";
+
 //#region src/canvas/nodeShapes/nodePaint.ts
-n.subscribe(e);
-function o(e, t) {
-	let n = e === void 0 ? t : e;
-	return n?.paint == null ? null : n;
+paintDrawKindRegistry.subscribe(bumpNodeMemoGeneration);
+/**
+* What a node's `data.fill` means to the built-in painters.
+*
+* Its {@link Paint} is used as-is — which is how a gradient or a pattern
+* reaches the renderer without a consumer registering a painter of its own.
+* `null` is an explicit "no fill", and so is a fill carrying no `paint`;
+* `undefined` takes the painter's fallback. Write the paint with
+* {@link solid} rather than by hand when all you have is a color.
+*/
+function resolveNodeFill(fill, fallback) {
+	const declared = fill === void 0 ? fallback : fill;
+	return declared?.paint == null ? null : declared;
 }
-function s(e) {
-	return e?.paint == null ? null : e;
+/** The stroke a built-in painter should emit, or `null` for "no stroke".
+*  `data.stroke` is a whole {@link Stroke} — width, cap, join, dash, miter
+*  limit, and align all reach the renderer. {@link strokeOf} builds one from a
+*  color.
+*
+*  A stroke carrying no `paint` reads as no stroke. The type requires `paint`,
+*  but a document is data, and a stroke assembled a field at a time arrives
+*  here without one; painting it throws out of the painter and takes the whole
+*  frame with it. */
+function resolveNodeStroke(stroke) {
+	if (stroke?.paint == null) return null;
+	return stroke;
 }
-function c(e, t) {
-	if (e === null) return {
+/** Per-side grab reach for a resolved stroke: world units for what the
+*  renderer builds in world, screen pixels for what it builds on screen — a
+*  `{ px }` width, and each head by its own size's units. */
+function inkReach(stroke, scale) {
+	if (stroke === null) return {
 		outset: 0,
 		inset: 0
 	};
-	let n = i(e), r = (t, n) => {
-		switch (e.align ?? "center") {
+	const heads = markerReach(stroke);
+	const sides = (width, headReach) => {
+		switch (stroke.align ?? "center") {
 			case "inner": return {
-				outset: n,
-				inset: t
+				outset: headReach,
+				inset: width
 			};
 			case "outer": return {
-				outset: t + n,
+				outset: width + headReach,
 				inset: 0
 			};
 			default: return {
-				outset: t / 2 + n,
-				inset: t / 2
+				outset: width / 2 + headReach,
+				inset: width / 2
 			};
 		}
-	}, o = e.width ?? 1, s = r(typeof o == "object" ? 0 : a(o, t ?? 1), n.world);
-	if (typeof o != "object" && !(n.px > 0)) return s;
-	let c = r(typeof o == "object" ? o.px : 0, n.px);
+	};
+	const width = stroke.width ?? 1;
+	const world = sides(widestStrokeWidth(typeof width === "object" ? 0 : resolveStrokeWidth(width, scale ?? 1), stroke.vertexWidths), heads.world);
+	if (typeof width !== "object" && !(heads.px > 0)) return world;
+	const px = sides(typeof width === "object" ? width.px : 0, heads.px);
 	return {
-		outset: s.outset,
-		inset: s.inset,
-		outsetPx: c.outset,
-		insetPx: c.inset
+		outset: world.outset,
+		inset: world.inset,
+		outsetPx: px.outset,
+		insetPx: px.inset
 	};
 }
-function l(e, t) {
-	let n = t?.vertexColors, i = e[0];
-	if (n === void 0 || i?.kind !== "path") return e;
-	let a = 4 * r(i.path), o = i.fill ? n("fill", i.vertexColors) : void 0, s = i.stroke ? n("stroke", i.stroke.vertexColors) : void 0, c = o?.length === a && o !== i.vertexColors, l = s?.length === a && s !== i.stroke?.vertexColors;
-	return !c && !l ? e : [{
-		...i,
-		...c ? { vertexColors: o } : {},
-		...l ? { stroke: {
-			...i.stroke,
-			vertexColors: s
-		} } : {}
-	}, ...e.slice(1)];
+/** How far `stroke` reaches outside its outline on every side, world units at
+*  `scale`: {@link inkReach}'s outset with its screen part resolved. */
+function strokeOutset(stroke, scale) {
+	const r = inkReach(stroke, scale);
+	return r.outset + (r.outsetPx ?? 0) / (scale > 0 ? scale : 1);
 }
-function u(e) {
-	let n = s(e.stroke), r = o(e.fill, n === null ? t : null);
-	return n === null ? { fill: r } : {
-		fill: r,
-		stroke: n
+/** {@link strokeOutset} per axis of the frame `ctx.screen` maps from: `x` past
+*  the left and right sides, `y` past the top and bottom. A `{ px }` reach
+*  is a disk on screen, and its extent along each axis of that frame is the
+*  support of the disk pulled back through the map. */
+function strokeOutsetPerAxis(stroke, ctx) {
+	const scale = ctx?.scale ?? 1;
+	const screen = ctx?.screen;
+	if (!screen) {
+		const r = strokeOutset(stroke, scale);
+		return {
+			x: r,
+			y: r
+		};
+	}
+	const r = inkReach(stroke, scale);
+	const px = r.outsetPx ?? 0;
+	if (px === 0) return {
+		x: r.outset,
+		y: r.outset
+	};
+	const [a, b, c, d] = screen;
+	const det = Math.abs(a * d - b * c);
+	if (!(det > 0)) return {
+		x: r.outset,
+		y: r.outset
+	};
+	return {
+		x: r.outset + px * Math.hypot(c, d) / det,
+		y: r.outset + px * Math.hypot(a, b) / det
 	};
 }
-//#endregion
-export { c as inkReach, u as pathPaintOf, o as resolveNodeFill, s as resolveNodeStroke, l as withAnimatedVertexColors };
+/** Apply {@link NodePaintCtx.vertexColors} to a path painter's body — its first
+*  command. Applied outside the paint memo, whose key
+*  cannot see an override: `cmds` comes back as-is when nothing changes, and
+*  otherwise as a copy, since a memoized list is not ours to edit. Colors whose
+*  length does not match the path's anchors are dropped. */
+function withAnimatedVertexColors(cmds, ctx) {
+	const resolve = ctx?.vertexColors;
+	const body = cmds[0];
+	if (resolve === void 0 || body?.kind !== "path") return cmds;
+	const expected = 4 * countPathAnchors(body.path);
+	const fill = body.fill ? resolve("fill", body.vertexColors) : void 0;
+	const stroke = body.stroke ? resolve("stroke", body.stroke.vertexColors) : void 0;
+	const fillChanged = fill?.length === expected && fill !== body.vertexColors;
+	const strokeChanged = stroke?.length === expected && stroke !== body.stroke?.vertexColors;
+	if (!fillChanged && !strokeChanged) return cmds;
+	return [{
+		...body,
+		...fillChanged ? { vertexColors: fill } : {},
+		...strokeChanged ? { stroke: {
+			...body.stroke,
+			vertexColors: stroke
+		} } : {}
+	}, ...cmds.slice(1)];
+}
+/** {@link PathPaint} of a node that keeps its paint in `data.fill` and
+*  `data.stroke`, as the built-in path painter draws it: a stroke with no
+*  `paint` is none, and an undeclared fill is the default shape fill unless
+*  the node is stroked. */
+function pathPaintOf(data) {
+	const stroke = resolveNodeStroke(data.stroke);
+	const fill = resolveNodeFill(data.fill, stroke !== null ? null : DEFAULT_SHAPE_FILL);
+	return stroke !== null ? {
+		fill,
+		stroke
+	} : { fill };
+}
 
+//#endregion
+export { inkReach, pathPaintOf, resolveNodeFill, resolveNodeStroke, strokeOutset, strokeOutsetPerAxis, withAnimatedVertexColors };
 //# sourceMappingURL=nodePaint.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nodePaint.js","names":["paintDrawKindRegistry","bumpNodeMemoGeneration","resolveNodeFill","declared","fill","fallback","resolveNodeStroke","stroke","inkReach","heads","markerReach","sides","headReach","width","world","resolveStrokeWidth","scale","px","withAnimatedVertexColors","resolve","ctx","body","cmds","expected","countPathAnchors","fillChanged","strokeChanged","pathPaintOf","data","DEFAULT_SHAPE_FILL"],"sources":["../../../src/canvas/nodeShapes/nodePaint.ts"],"sourcesContent":["import type { Paint, Stroke, Fill } from '@weasel-js/paint';\nimport type { NodeInk, NodePaintCtx } from 'canvas/NodeShape';\nimport { countPathAnchors } from '@weasel-js/geom';\nimport { markerReach } from '@weasel-js/stroke';\nimport { resolveStrokeWidth } from '@weasel-js/stroke';\nimport type { DrawCommand, PathDrawCommand } from '@weasel-js/renderer';\nimport { paintDrawKindRegistry } from '@weasel-js/renderer';\nimport { bumpNodeMemoGeneration } from 'core/scene/nodeMemo';\nimport { DEFAULT_SHAPE_FILL } from '../../util/paint';\n\n// The painters memoize a node's paint and resolve a fill's frame inside the\n// memo, so the kind set is ambient state that memo cannot see change.\npaintDrawKindRegistry.subscribe(bumpNodeMemoGeneration);\n\n/**\n * What a node's `data.fill` means to the built-in painters.\n *\n * Its {@link Paint} is used as-is — which is how a gradient or a pattern\n * reaches the renderer without a consumer registering a painter of its own.\n * `null` is an explicit \"no fill\", and so is a fill carrying no `paint`;\n * `undefined` takes the painter's fallback. Write the paint with\n * {@link solid} rather than by hand when all you have is a color.\n */\nexport function resolveNodeFill(\n  fill: Fill | null | undefined,\n  fallback: Fill | null,\n): PaintedFill | null {\n  const declared = fill === undefined ? fallback : fill;\n  return declared?.paint == null ? null : (declared as PaintedFill);\n}\n\n/** A fill that paints — what everything downstream of `resolveNodeFill`\n *  works with. */\nexport type PaintedFill = Fill & { paint: Paint };\n\n/** The stroke a built-in painter should emit, or `null` for \"no stroke\".\n *  `data.stroke` is a whole {@link Stroke} — width, cap, join, dash, miter\n *  limit, and align all reach the renderer. {@link strokeOf} builds one from a\n *  color.\n *\n *  A stroke carrying no `paint` reads as no stroke. The type requires `paint`,\n *  but a document is data, and a stroke assembled a field at a time arrives\n *  here without one; painting it throws out of the painter and takes the whole\n *  frame with it. */\nexport function resolveNodeStroke(stroke: Stroke | null | undefined): PaintedStroke | null {\n  if (stroke?.paint == null) return null;\n  return stroke as PaintedStroke;\n}\n\n/** A stroke that paints — what everything downstream of `resolveNodeStroke`\n *  works with. */\nexport type PaintedStroke = Stroke & { paint: Paint };\n\n/** Per-side grab reach for a resolved stroke: world units for what the\n *  renderer builds in world, screen pixels for what it builds on screen — a\n *  `{ px }` width, and each head by its own size's units. */\nexport function inkReach(\n  stroke: Stroke | null,\n  scale: number | undefined,\n): Pick<NodeInk, 'outset' | 'inset' | 'outsetPx' | 'insetPx'> {\n  if (stroke === null) return { outset: 0, inset: 0 };\n  // A marker paints past the path's own end, and the kit's rule is that\n  // visible chrome is hittable — so the reach has to cover it.\n  const heads = markerReach(stroke);\n  const sides = (width: number, headReach: number) => {\n    switch (stroke.align ?? 'center') {\n      case 'inner': return { outset: headReach, inset: width };\n      case 'outer': return { outset: width + headReach, inset: 0 };\n      default: return { outset: width / 2 + headReach, inset: width / 2 };\n    }\n  };\n  const width = stroke.width ?? 1;\n  const world = sides(typeof width === 'object' ? 0 : resolveStrokeWidth(width, scale ?? 1), heads.world);\n  if (typeof width !== 'object' && !(heads.px > 0)) return world;\n  const px = sides(typeof width === 'object' ? width.px : 0, heads.px);\n  return { outset: world.outset, inset: world.inset, outsetPx: px.outset, insetPx: px.inset };\n}\n\n/** Apply {@link NodePaintCtx.vertexColors} to a path painter's body — its first\n *  command. Applied outside the paint memo, whose key\n *  cannot see an override: `cmds` comes back as-is when nothing changes, and\n *  otherwise as a copy, since a memoized list is not ours to edit. Colors whose\n *  length does not match the path's anchors are dropped. */\nexport function withAnimatedVertexColors(cmds: DrawCommand[], ctx: NodePaintCtx | undefined): DrawCommand[] {\n  const resolve = ctx?.vertexColors;\n  const body = cmds[0];\n  if (resolve === undefined || body?.kind !== 'path') return cmds;\n  const expected = 4 * countPathAnchors(body.path);\n  const fill = body.fill ? resolve('fill', body.vertexColors) : undefined;\n  const stroke = body.stroke ? resolve('stroke', body.stroke.vertexColors) : undefined;\n  const fillChanged = fill?.length === expected && fill !== body.vertexColors;\n  const strokeChanged = stroke?.length === expected && stroke !== body.stroke?.vertexColors;\n  if (!fillChanged && !strokeChanged) return cmds;\n  const next: PathDrawCommand = {\n    ...body,\n    ...(fillChanged ? { vertexColors: fill as number[] } : {}),\n    ...(strokeChanged ? { stroke: { ...body.stroke!, vertexColors: stroke as number[] } } : {}),\n  };\n  return [next, ...cmds.slice(1)];\n}\n\n/** The paint a path node wears, resolved: what an action that turns ink into\n *  geometry reads from a node and tells a consumer to put on a result. */\nexport interface PathPaint {\n  /** `null` is no fill. */\n  fill: Fill | null;\n  /** Absent for no stroke. */\n  stroke?: Stroke;\n}\n\n/** {@link PathPaint} of a node that keeps its paint in `data.fill` and\n *  `data.stroke`, as the built-in path painter draws it: a stroke with no\n *  `paint` is none, and an undeclared fill is the default shape fill unless\n *  the node is stroked. */\nexport function pathPaintOf(data: { fill?: Fill | null; stroke?: Stroke | null }): PathPaint {\n  const stroke = resolveNodeStroke(data.stroke);\n  const fill = resolveNodeFill(data.fill, stroke !== null ? null : DEFAULT_SHAPE_FILL);\n  return stroke !== null ? { fill, stroke } : { fill };\n}\n"],"mappings":";;;;;;AAYAA,EAAsB,UAAUC,CAAsB;AAWtD,SAAgBC,EACd,GACA,GACoB;CACpB,IAAMC,IAAWC,MAAS,KAAA,IAAYC,IAAWD;CACjD,OAAOD,GAAU,SAAS,OAAO,OAAQA;AAC3C;AAeA,SAAgBG,EAAkB,GAAyD;CAEzF,OADIC,GAAQ,SAAS,OAAa,OAC3BA;AACT;AASA,SAAgBC,EACd,GACA,GAC4D;CAC5D,IAAID,MAAW,MAAM,OAAO;EAAE,QAAQ;EAAG,OAAO;CAAE;CAGlD,IAAME,IAAQC,EAAYH,CAAM,GAC1BI,KAAS,GAAe,MAAsB;EAClD,QAAQJ,EAAO,SAAS,UAAxB;GACE,KAAK,SAAS,OAAO;IAAE,QAAQK;IAAW,OAAOC;GAAM;GACvD,KAAK,SAAS,OAAO;IAAE,QAAQA,IAAQD;IAAW,OAAO;GAAE;GAC3D,SAAS,OAAO;IAAE,QAAQC,IAAQ,IAAID;IAAW,OAAOC,IAAQ;GAAE;EACpE;CACF,GACMA,IAAQN,EAAO,SAAS,GACxBO,IAAQH,EAAM,OAAOE,KAAU,WAAW,IAAIE,EAAmBF,GAAOG,KAAS,CAAC,GAAGP,EAAM,KAAK;CACtG,IAAI,OAAOI,KAAU,YAAY,EAAEJ,EAAM,KAAK,IAAI,OAAOK;CACzD,IAAMG,IAAKN,EAAM,OAAOE,KAAU,WAAWA,EAAM,KAAK,GAAGJ,EAAM,EAAE;CACnE,OAAO;EAAE,QAAQK,EAAM;EAAQ,OAAOA,EAAM;EAAO,UAAUG,EAAG;EAAQ,SAASA,EAAG;CAAM;AAC5F;AAOA,SAAgBC,EAAyB,GAAqB,GAA8C;CAC1G,IAAMC,IAAUC,GAAK,cACfC,IAAOC,EAAK;CAClB,IAAIH,MAAY,KAAA,KAAaE,GAAM,SAAS,QAAQ,OAAOC;CAC3D,IAAMC,IAAW,IAAIC,EAAiBH,EAAK,IAAI,GACzCjB,IAAOiB,EAAK,OAAOF,EAAQ,QAAQE,EAAK,YAAY,IAAI,KAAA,GACxDd,IAASc,EAAK,SAASF,EAAQ,UAAUE,EAAK,OAAO,YAAY,IAAI,KAAA,GACrEI,IAAcrB,GAAM,WAAWmB,KAAYnB,MAASiB,EAAK,cACzDK,IAAgBnB,GAAQ,WAAWgB,KAAYhB,MAAWc,EAAK,QAAQ;CAO7E,OANI,CAACI,KAAe,CAACC,IAAsBJ,IAMpC,CAAC;EAJN,GAAGD;EACH,GAAII,IAAc,EAAE,cAAcrB,EAAiB,IAAI,CAAC;EACxD,GAAIsB,IAAgB,EAAE,QAAQ;GAAE,GAAGL,EAAK;GAAS,cAAcd;EAAmB,EAAE,IAAI,CAAC;CAEnF,GAAM,GAAGe,EAAK,MAAM,CAAC,CAAC;AAChC;AAeA,SAAgBK,EAAY,GAAiE;CAC3F,IAAMpB,IAASD,EAAkBsB,EAAK,MAAM,GACtCxB,IAAOF,EAAgB0B,EAAK,MAAMrB,MAAW,OAAcsB,IAAP,IAAyB;CACnF,OAAOtB,MAAW,OAA0B,EAAE,QAAK,IAA1B;EAAE;EAAM;CAAO;AAC1C"}
+{"version":3,"file":"nodePaint.js","names":[],"sources":["../../../src/canvas/nodeShapes/nodePaint.ts"],"sourcesContent":["import type { Paint, Stroke, Fill } from '@weasel-js/paint';\nimport type { NodeInk, NodeInkCtx, NodePaintCtx } from 'canvas/NodeShape';\nimport { countPathAnchors } from '@weasel-js/geom';\nimport { markerReach } from '@weasel-js/stroke';\nimport { resolveStrokeWidth, widestStrokeWidth } from '@weasel-js/stroke';\nimport type { DrawCommand, PathDrawCommand } from '@weasel-js/renderer';\nimport { paintDrawKindRegistry } from '@weasel-js/renderer';\nimport { bumpNodeMemoGeneration } from 'core/scene/nodeMemo';\nimport { DEFAULT_SHAPE_FILL } from '../../util/paint';\n\n// The painters memoize a node's paint and resolve a fill's frame inside the\n// memo, so the kind set is ambient state that memo cannot see change.\npaintDrawKindRegistry.subscribe(bumpNodeMemoGeneration);\n\n/**\n * What a node's `data.fill` means to the built-in painters.\n *\n * Its {@link Paint} is used as-is — which is how a gradient or a pattern\n * reaches the renderer without a consumer registering a painter of its own.\n * `null` is an explicit \"no fill\", and so is a fill carrying no `paint`;\n * `undefined` takes the painter's fallback. Write the paint with\n * {@link solid} rather than by hand when all you have is a color.\n */\nexport function resolveNodeFill(\n  fill: Fill | null | undefined,\n  fallback: Fill | null,\n): PaintedFill | null {\n  const declared = fill === undefined ? fallback : fill;\n  return declared?.paint == null ? null : (declared as PaintedFill);\n}\n\n/** A fill that paints — what everything downstream of `resolveNodeFill`\n *  works with. */\nexport type PaintedFill = Fill & { paint: Paint };\n\n/** The stroke a built-in painter should emit, or `null` for \"no stroke\".\n *  `data.stroke` is a whole {@link Stroke} — width, cap, join, dash, miter\n *  limit, and align all reach the renderer. {@link strokeOf} builds one from a\n *  color.\n *\n *  A stroke carrying no `paint` reads as no stroke. The type requires `paint`,\n *  but a document is data, and a stroke assembled a field at a time arrives\n *  here without one; painting it throws out of the painter and takes the whole\n *  frame with it. */\nexport function resolveNodeStroke(stroke: Stroke | null | undefined): PaintedStroke | null {\n  if (stroke?.paint == null) return null;\n  return stroke as PaintedStroke;\n}\n\n/** A stroke that paints — what everything downstream of `resolveNodeStroke`\n *  works with. */\nexport type PaintedStroke = Stroke & { paint: Paint };\n\n/** Per-side grab reach for a resolved stroke: world units for what the\n *  renderer builds in world, screen pixels for what it builds on screen — a\n *  `{ px }` width, and each head by its own size's units. */\nexport function inkReach(\n  stroke: Stroke | null,\n  scale: number | undefined,\n): Pick<NodeInk, 'outset' | 'inset' | 'outsetPx' | 'insetPx'> {\n  if (stroke === null) return { outset: 0, inset: 0 };\n  // A marker paints past the path's own end, and the kit's rule is that\n  // visible chrome is hittable — so the reach has to cover it.\n  const heads = markerReach(stroke);\n  const sides = (width: number, headReach: number) => {\n    switch (stroke.align ?? 'center') {\n      case 'inner': return { outset: headReach, inset: width };\n      case 'outer': return { outset: width + headReach, inset: 0 };\n      default: return { outset: width / 2 + headReach, inset: width / 2 };\n    }\n  };\n  const width = stroke.width ?? 1;\n  // Per-vertex widths are world units even on a `{ px }` stroke.\n  const worldWidth = widestStrokeWidth(typeof width === 'object' ? 0 : resolveStrokeWidth(width, scale ?? 1), stroke.vertexWidths);\n  const world = sides(worldWidth, heads.world);\n  if (typeof width !== 'object' && !(heads.px > 0)) return world;\n  const px = sides(typeof width === 'object' ? width.px : 0, heads.px);\n  return { outset: world.outset, inset: world.inset, outsetPx: px.outset, insetPx: px.inset };\n}\n\n/** How far `stroke` reaches outside its outline on every side, world units at\n *  `scale`: {@link inkReach}'s outset with its screen part resolved. */\nexport function strokeOutset(stroke: Stroke | null, scale: number): number {\n  const r = inkReach(stroke, scale);\n  return r.outset + (r.outsetPx ?? 0) / (scale > 0 ? scale : 1);\n}\n\n/** {@link strokeOutset} per axis of the frame `ctx.screen` maps from: `x` past\n *  the left and right sides, `y` past the top and bottom. A `{ px }` reach\n *  is a disk on screen, and its extent along each axis of that frame is the\n *  support of the disk pulled back through the map. */\nexport function strokeOutsetPerAxis(stroke: Stroke | null, ctx: NodeInkCtx | undefined): { x: number; y: number } {\n  const scale = ctx?.scale ?? 1;\n  const screen = ctx?.screen;\n  if (!screen) {\n    const r = strokeOutset(stroke, scale);\n    return { x: r, y: r };\n  }\n  const r = inkReach(stroke, scale);\n  const px = r.outsetPx ?? 0;\n  if (px === 0) return { x: r.outset, y: r.outset };\n  const [a, b, c, d] = screen;\n  const det = Math.abs(a * d - b * c);\n  if (!(det > 0)) return { x: r.outset, y: r.outset };\n  return { x: r.outset + (px * Math.hypot(c, d)) / det, y: r.outset + (px * Math.hypot(a, b)) / det };\n}\n\n/** Apply {@link NodePaintCtx.vertexColors} to a path painter's body — its first\n *  command. Applied outside the paint memo, whose key\n *  cannot see an override: `cmds` comes back as-is when nothing changes, and\n *  otherwise as a copy, since a memoized list is not ours to edit. Colors whose\n *  length does not match the path's anchors are dropped. */\nexport function withAnimatedVertexColors(cmds: DrawCommand[], ctx: NodePaintCtx | undefined): DrawCommand[] {\n  const resolve = ctx?.vertexColors;\n  const body = cmds[0];\n  if (resolve === undefined || body?.kind !== 'path') return cmds;\n  const expected = 4 * countPathAnchors(body.path);\n  const fill = body.fill ? resolve('fill', body.vertexColors) : undefined;\n  const stroke = body.stroke ? resolve('stroke', body.stroke.vertexColors) : undefined;\n  const fillChanged = fill?.length === expected && fill !== body.vertexColors;\n  const strokeChanged = stroke?.length === expected && stroke !== body.stroke?.vertexColors;\n  if (!fillChanged && !strokeChanged) return cmds;\n  const next: PathDrawCommand = {\n    ...body,\n    ...(fillChanged ? { vertexColors: fill as number[] } : {}),\n    ...(strokeChanged ? { stroke: { ...body.stroke!, vertexColors: stroke as number[] } } : {}),\n  };\n  return [next, ...cmds.slice(1)];\n}\n\n/** The paint a path node wears, resolved: what an action that turns ink into\n *  geometry reads from a node and tells a consumer to put on a result. */\nexport interface PathPaint {\n  /** `null` is no fill. */\n  fill: Fill | null;\n  /** Absent for no stroke. */\n  stroke?: Stroke;\n}\n\n/** {@link PathPaint} of a node that keeps its paint in `data.fill` and\n *  `data.stroke`, as the built-in path painter draws it: a stroke with no\n *  `paint` is none, and an undeclared fill is the default shape fill unless\n *  the node is stroked. */\nexport function pathPaintOf(data: { fill?: Fill | null; stroke?: Stroke | null }): PathPaint {\n  const stroke = resolveNodeStroke(data.stroke);\n  const fill = resolveNodeFill(data.fill, stroke !== null ? null : DEFAULT_SHAPE_FILL);\n  return stroke !== null ? { fill, stroke } : { fill };\n}\n"],"mappings":"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"}

package/dist/canvas/nodeShapes/pathPainter.js

@@ -1,39 +1,53 @@
-import { nodeMemo as e } from "../../core/scene/nodeMemo.js";
-import { PAINT_SLOT as t } from "./memo.js";
-import { inkReach as n, pathPaintOf as r, resolveNodeStroke as i, withAnimatedVertexColors as a } from "./nodePaint.js";
-import { DERIVED_PAINTER as o } from "./derivedPainter.js";
-import { paintsPose as s, poseBoxBounds as c } from "./poseBox.js";
-import { commandFill as l, commandStroke as u } from "@weasel-js/renderer";
-import { pathInPoseFrame as d } from "@weasel-js/geom";
+import { nodeMemo } from "../../core/scene/nodeMemo.js";
+import { PAINT_SLOT } from "./memo.js";
+import { inkReach, pathPaintOf, resolveNodeStroke, withAnimatedVertexColors } from "./nodePaint.js";
+import { DERIVED_PAINTER } from "./derivedPainter.js";
+import { paintsPose, poseBoxBounds } from "./poseBox.js";
+import { strokedPoseBox } from "./strokedBounds.js";
+import { commandFill, commandStroke } from "@weasel-js/renderer";
+import { pathInPoseFrame } from "@weasel-js/geom";
+
 //#region src/canvas/nodeShapes/pathPainter.ts
-var f = {
+var PATH_PAINTER = {
 	id: "kit:path",
-	matches: (e) => s(e.pose) ? e.data?.path != null : !1,
-	paint: (n, i, s) => s?.derivedPath == null ? a(e(n, t, i, () => {
-		let e = n.data, t = d(e.path, i), { fill: a, stroke: o } = r(e), s = a && l(a, i), c = o && u(o, i);
+	matches: (node) => {
+		if (!paintsPose(node.pose)) return false;
+		return node.data?.path != null;
+	},
+	paint: (node, pose, ctx) => ctx?.derivedPath != null ? DERIVED_PAINTER.paint(node, pose, ctx) : withAnimatedVertexColors(nodeMemo(node, PAINT_SLOT, pose, () => {
+		const d = node.data;
+		const projected = pathInPoseFrame(d.path, pose);
+		const { fill: declared, stroke: strokeSpec } = pathPaintOf(d);
+		const fill = declared && commandFill(declared, pose);
+		const stroke = strokeSpec && commandStroke(strokeSpec, pose);
 		return [{
 			kind: "path",
-			path: t,
-			...s ? { fill: s } : {},
-			...s && e.vertexColors ? { vertexColors: e.vertexColors } : {},
-			...c ? { stroke: c } : {}
+			path: projected,
+			...fill ? { fill } : {},
+			...fill && d.vertexColors ? { vertexColors: d.vertexColors } : {},
+			...stroke ? { stroke } : {}
 		}];
-	}), s) : o.paint(n, i, s),
-	silhouette: (e, t, n) => {
-		if (n?.derivedPath != null) return n.derivedPath;
-		let r = e.data;
-		return d(r.path, t);
+	}), ctx),
+	silhouette: (node, pose, ctx) => {
+		if (ctx?.derivedPath != null) return ctx.derivedPath;
+		const d = node.data;
+		return pathInPoseFrame(d.path, pose);
 	},
-	ink: (e, t, i) => {
-		let a = e.data, { fill: o, stroke: s } = r(a);
+	ink: (node, _pose, ctx) => {
+		const d = node.data;
+		const { fill, stroke } = pathPaintOf(d);
 		return {
-			filled: o !== null,
-			...n(s ?? null, i?.scale)
+			filled: fill !== null,
+			...inkReach(stroke ?? null, ctx?.scale)
 		};
 	},
-	bounds: (e, t, n) => c(t, i(e.data.stroke), n)
+	bounds: (node, pose, ctx) => poseBoxBounds(pose, resolveNodeStroke(node.data.stroke), ctx),
+	drawnBounds: (node, pose, ctx) => {
+		const d = node.data;
+		return strokedPoseBox(node, pose, resolveNodeStroke(d.stroke), ctx, (at) => pathInPoseFrame(d.path, at));
+	}
 };
-//#endregion
-export { f as PATH_PAINTER };
 
+//#endregion
+export { PATH_PAINTER };
 //# sourceMappingURL=pathPainter.js.map