@weasel-js/core 1.10.1 → 1.11.1

package/dist/debug/createDebugOverlayLayer.js

@@ -1,225 +1,291 @@
-import { viewToTransform as e } from "../core/viewport/view.js";
-import { worldToScreen as t } from "../core/viewport/viewTransform.js";
-import { rotatePoint as n } from "../interactions/actions/rotate/geometry.js";
-import { DEFAULT_DEBUG_STROKES as r, DEFAULT_DEBUG_THEME as i } from "./defaultTheme.js";
-import { textCommandFromRuns as a } from "@weasel-js/renderer";
-import { PATH_L as o, PATH_M as s, PATH_Z as c } from "@weasel-js/geom";
+import { viewToTransform } from "../core/viewport/view.js";
+import { worldToScreen } from "../core/viewport/viewTransform.js";
+import { rotatePoint } from "../interactions/actions/rotate/geometry.js";
+import { DEFAULT_DEBUG_STROKES, DEFAULT_DEBUG_THEME } from "./defaultTheme.js";
+import { LINE_H, emitFramePanel, emitLayersPanel, emitTextPanel, rectPath as rectPath$1 } from "./overlayPanels.js";
+import { textCommandFromRuns } from "@weasel-js/renderer";
+import { PATH_L, PATH_M, PATH_Z } from "@weasel-js/geom";
+
 //#region src/debug/createDebugOverlayLayer.ts
-var l = "debug-overlay", u = 60;
-function d({ sink: e, config: t }) {
-	let n = [];
+var DEBUG_OVERLAY_ID = "debug-overlay";
+var FPS_WINDOW = 60;
+/**
+* Screen-space `RenderLayer` that paints the sink's snapshot. Appended at
+* the top of the Canvas's layer stack when `debug` is enabled. World-space
+* coords in the snapshot are projected through `view` here, since the
+* layer itself runs at identity transform.
+*/
+function createDebugOverlayLayer({ sink, config }) {
+	const fpsHistory = [];
 	return {
-		id: l,
+		id: DEBUG_OVERLAY_ID,
 		label: "Debug overlay",
 		space: "screen",
-		alwaysOn: !0,
-		draw: (r, i, a) => (t.fps ? (n.push(typeof performance < "u" ? performance.now() : Date.now()), n.length > u && n.shift()) : n.length > 0 && (n.length = 0), f(e.snapshot(), t, i, a, n))
+		alwaysOn: true,
+		draw: (_data, view, dims) => {
+			if (config.fps) {
+				fpsHistory.push(typeof performance !== "undefined" ? performance.now() : Date.now());
+				if (fpsHistory.length > FPS_WINDOW) fpsHistory.shift();
+			} else if (fpsHistory.length > 0) fpsHistory.length = 0;
+			return buildDebugOverlayCommands(sink.snapshot(), config, view, dims, fpsHistory);
+		}
 	};
 }
-function f(t, n, a, o, s = []) {
-	let c = {
-		...i,
-		...n.theme ?? {}
-	}, l = {
-		...r,
-		...n.strokes ?? {}
-	}, u = t, d = e(a), f = [];
-	return n.viewport && u.viewport && j(f, u.viewport, a, o, c, l), n.hitboxes && v(f, u, a, d, c, l), n.bounds && y(f, u, a, d, c, l), n.handles && b(f, u, d, c, l), n.origins && x(f, u, d, c), n.snap && S(f, u, d, c, l), n.ids && C(f, u, d, c), n.layers && w(f, u, o, c), n.fps && A(f, s, u.frame, c), f;
+/**
+* The debug overlay's draw commands for one snapshot, in screen space (CSS
+* pixels of a `dims`-sized canvas looking through `view`). What the overlay
+* layer paints each frame, and what `renderDebugSnapshot` rasterizes.
+*
+* `frameTimes` are `performance.now()` stamps of recent paints, oldest first;
+* the frame panel derives its rate from them and shows none without two.
+*/
+function buildDebugOverlayCommands(snapshot, config, view, dims, frameTimes = []) {
+	const theme = {
+		...DEFAULT_DEBUG_THEME,
+		...config.theme ?? {}
+	};
+	const strokes = {
+		...DEFAULT_DEBUG_STROKES,
+		...config.strokes ?? {}
+	};
+	const s = snapshot;
+	const t = viewToTransform(view);
+	const out = [];
+	if (config.viewport && s.viewport) emitViewport(out, s.viewport, view, dims, theme, strokes);
+	if (config.hitboxes) emitHitboxes(out, s, view, t, theme, strokes);
+	if (config.bounds) emitBounds(out, s, view, t, theme, strokes);
+	if (config.highlight?.length) emitHighlight(out, s, new Set(config.highlight), view, t, theme, strokes);
+	if (config.handles) emitHandles(out, s, t, theme, strokes);
+	if (config.origins) emitOrigins(out, s, t, theme);
+	if (config.snap) emitSnap(out, s, t, theme, strokes);
+	if (config.ids) emitIds(out, s, t, theme);
+	if (config.layers) emitLayersPanel(out, s, dims, theme);
+	if (config.fps) emitFramePanel(out, frameTimes, s.frame, theme);
+	return out;
 }
-function p(e, t, n, r = 24) {
-	return m(e, t, n, n, r);
+function approxCircleScreen(cx, cy, r, segments = 24) {
+	return approxEllipseScreen(cx, cy, r, r, segments);
 }
-function m(e, t, n, r, i = 24) {
-	let a = new Uint8Array(i + 1), l = new Float32Array(i * 2);
-	a[0] = s, l[0] = e + n, l[1] = t;
-	for (let s = 1; s < i; s++) {
-		a[s] = o;
-		let c = s / i * Math.PI * 2;
-		l[s * 2] = e + n * Math.cos(c), l[s * 2 + 1] = t + r * Math.sin(c);
+function approxEllipseScreen(cx, cy, rx, ry, segments = 24) {
+	const cmds = new Uint8Array(segments + 1);
+	const coords = new Float32Array(segments * 2);
+	cmds[0] = PATH_M;
+	coords[0] = cx + rx;
+	coords[1] = cy;
+	for (let i = 1; i < segments; i++) {
+		cmds[i] = PATH_L;
+		const theta = i / segments * Math.PI * 2;
+		coords[i * 2] = cx + rx * Math.cos(theta);
+		coords[i * 2 + 1] = cy + ry * Math.sin(theta);
 	}
-	return a[i] = c, {
+	cmds[segments] = PATH_Z;
+	return {
 		kind: "polygon",
-		commands: a,
-		coords: l,
+		commands: cmds,
+		coords,
 		fillRule: "nonzero"
 	};
 }
-function h(e, r) {
-	let i = e.x + e.width / 2, a = e.y + e.height / 2, l = /* @__PURE__ */ new Float32Array(8);
-	return [
-		[e.x, e.y],
-		[e.x + e.width, e.y],
-		[e.x + e.width, e.y + e.height],
-		[e.x, e.y + e.height]
-	].forEach(([o, s], c) => {
-		let u = n(o, s, i, a, e.rotation), [d, f] = t(u.x, u.y, r);
-		l[c * 2] = d, l[c * 2 + 1] = f;
-	}), {
+/** A world rect turned `rotation` about its center, as the screen quad it
+*  lands on. */
+function rotatedRectScreen(r, t) {
+	const cx = r.x + r.width / 2, cy = r.y + r.height / 2;
+	const coords = /* @__PURE__ */ new Float32Array(8);
+	[
+		[r.x, r.y],
+		[r.x + r.width, r.y],
+		[r.x + r.width, r.y + r.height],
+		[r.x, r.y + r.height]
+	].forEach(([x, y], i) => {
+		const w = rotatePoint(x, y, cx, cy, r.rotation);
+		const [sx, sy] = worldToScreen(w.x, w.y, t);
+		coords[i * 2] = sx;
+		coords[i * 2 + 1] = sy;
+	});
+	return {
 		kind: "polygon",
 		commands: new Uint8Array([
-			s,
-			o,
-			o,
-			o,
-			c
+			PATH_M,
+			PATH_L,
+			PATH_L,
+			PATH_L,
+			PATH_Z
 		]),
-		coords: l,
+		coords,
 		fillRule: "nonzero"
 	};
 }
-function g(e, t, n, r) {
-	return {
-		kind: "rect",
-		x: e,
-		y: t,
-		width: n,
-		height: r
-	};
-}
-function _(e, t) {
+function strokeOf(s, color) {
 	return {
 		paint: {
 			kind: "solid",
-			color: t
+			color
 		},
-		width: e.width,
-		...e.dash && e.dash.length > 0 ? { dash: [...e.dash] } : {}
+		width: s.width,
+		...s.dash && s.dash.length > 0 ? { dash: [...s.dash] } : {}
 	};
 }
-function v(e, n, r, i, a, l) {
-	let u = {
+function emitHitboxes(out, s, view, t, theme, strokes) {
+	const fill = {
 		kind: "solid",
-		color: a.hitboxFill
-	}, d = _(l.hitbox, a.hitboxStroke);
-	for (let a of n.hitboxes) if (a.shape.kind === "rect" && a.shape.rotation) {
-		let t = h({
-			...a.shape,
-			rotation: a.shape.rotation
-		}, i);
-		e.push({
+		color: theme.hitboxFill
+	};
+	const stroke = strokeOf(strokes.hitbox, theme.hitboxStroke);
+	for (const h of s.hitboxes) if (h.shape.kind === "rect" && h.shape.rotation) {
+		const path = rotatedRectScreen({
+			...h.shape,
+			rotation: h.shape.rotation
+		}, t);
+		out.push({
 			kind: "path",
-			path: t,
-			fill: { paint: u },
-			stroke: d
+			path,
+			fill: { paint: fill },
+			stroke
 		});
-	} else if (a.shape.kind === "rect") {
-		let [n, o] = t(a.shape.x, a.shape.y, i), s = a.shape.width * r.scale.x, c = a.shape.height * r.scale.y;
-		e.push({
+	} else if (h.shape.kind === "rect") {
+		const [sx, sy] = worldToScreen(h.shape.x, h.shape.y, t);
+		const sw = h.shape.width * view.scale.x;
+		const sh = h.shape.height * view.scale.y;
+		out.push({
 			kind: "path",
-			path: g(n, o, s, c),
-			fill: { paint: u },
-			stroke: d
+			path: rectPath$1(sx, sy, sw, sh),
+			fill: { paint: fill },
+			stroke
 		});
-	} else if (a.shape.kind === "circle") {
-		let [n, o] = t(a.shape.cx, a.shape.cy, i), s = a.shape.r * Math.abs(r.scale.x), c = a.shape.r * Math.abs(r.scale.y);
-		e.push({
+	} else if (h.shape.kind === "circle") {
+		const [cx, cy] = worldToScreen(h.shape.cx, h.shape.cy, t);
+		const rx = h.shape.r * Math.abs(view.scale.x);
+		const ry = h.shape.r * Math.abs(view.scale.y);
+		out.push({
 			kind: "path",
-			path: m(n, o, s, c),
-			fill: { paint: u },
-			stroke: d
+			path: approxEllipseScreen(cx, cy, rx, ry),
+			fill: { paint: fill },
+			stroke
 		});
-	} else if (a.shape.kind === "polygon" && a.shape.points.length > 2) {
-		let n = a.shape.points, r = new Float32Array(n.length * 2);
-		n.forEach((e, n) => {
-			let [a, o] = t(e.x, e.y, i);
-			r[n * 2] = a, r[n * 2 + 1] = o;
+	} else if (h.shape.kind === "polygon" && h.shape.points.length > 2) {
+		const pts = h.shape.points;
+		const coords = new Float32Array(pts.length * 2);
+		pts.forEach((p, i) => {
+			const [sx, sy] = worldToScreen(p.x, p.y, t);
+			coords[i * 2] = sx;
+			coords[i * 2 + 1] = sy;
 		});
-		let l = new Uint8Array(n.length + 1).fill(o);
-		l[0] = s, l[n.length] = c, e.push({
+		const commands = new Uint8Array(pts.length + 1).fill(PATH_L);
+		commands[0] = PATH_M;
+		commands[pts.length] = PATH_Z;
+		out.push({
 			kind: "path",
 			path: {
 				kind: "polygon",
-				commands: l,
-				coords: r,
+				commands,
+				coords,
 				fillRule: "nonzero"
 			},
-			fill: { paint: u },
-			stroke: d
+			fill: { paint: fill },
+			stroke
+		});
+	}
+}
+function emitBounds(out, s, view, t, theme, strokes) {
+	const stroke = strokeOf(strokes.bounds, theme.bounds);
+	for (const b of s.bounds) {
+		const [sx, sy] = worldToScreen(b.bounds.x, b.bounds.y, t);
+		const sw = b.bounds.width * view.scale.x;
+		const sh = b.bounds.height * view.scale.y;
+		out.push({
+			kind: "path",
+			path: rectPath$1(sx, sy, sw, sh),
+			stroke
 		});
 	}
 }
-function y(e, n, r, i, a, o) {
-	let s = _(o.bounds, a.bounds);
-	for (let a of n.bounds) {
-		let [n, o] = t(a.bounds.x, a.bounds.y, i), c = a.bounds.width * r.scale.x, l = a.bounds.height * r.scale.y;
-		e.push({
+function emitHighlight(out, s, ids, view, t, theme, strokes) {
+	const stroke = strokeOf(strokes.highlight, theme.highlight);
+	for (const b of s.bounds) {
+		if (!ids.has(b.id)) continue;
+		const [sx, sy] = worldToScreen(b.bounds.x, b.bounds.y, t);
+		out.push({
 			kind: "path",
-			path: g(n, o, c, l),
-			stroke: s
+			path: rectPath$1(sx, sy, b.bounds.width * view.scale.x, b.bounds.height * view.scale.y),
+			stroke
 		});
 	}
 }
-function b(e, n, r, i, a) {
-	let c = _(a.handle, i.handle);
-	for (let i of n.handles) {
-		let [n, a] = t(i.position.x, i.position.y, r), l = {
+function emitHandles(out, s, t, theme, strokes) {
+	const stroke = strokeOf(strokes.handle, theme.handle);
+	for (const h of s.handles) {
+		const [cx, cy] = worldToScreen(h.position.x, h.position.y, t);
+		const horiz = {
 			kind: "polygon",
-			commands: new Uint8Array([s, o]),
+			commands: new Uint8Array([PATH_M, PATH_L]),
 			coords: new Float32Array([
-				n - 4,
-				a,
-				n + 4,
-				a
+				cx - 4,
+				cy,
+				cx + 4,
+				cy
 			]),
 			fillRule: "nonzero"
-		}, u = {
+		};
+		const vert = {
 			kind: "polygon",
-			commands: new Uint8Array([s, o]),
+			commands: new Uint8Array([PATH_M, PATH_L]),
 			coords: new Float32Array([
-				n,
-				a - 4,
-				n,
-				a + 4
+				cx,
+				cy - 4,
+				cx,
+				cy + 4
 			]),
 			fillRule: "nonzero"
 		};
-		e.push({
+		out.push({
 			kind: "path",
-			path: l,
-			stroke: c
-		}), e.push({
+			path: horiz,
+			stroke
+		});
+		out.push({
 			kind: "path",
-			path: u,
-			stroke: c
+			path: vert,
+			stroke
 		});
 	}
 }
-function x(e, n, r, i) {
-	let a = {
+function emitOrigins(out, s, t, theme) {
+	const fill = {
 		kind: "solid",
-		color: i.origin
+		color: theme.origin
 	};
-	for (let i of n.origins) {
-		let [n, o] = t(i.point.x, i.point.y, r);
-		e.push({
+	for (const o of s.origins) {
+		const [cx, cy] = worldToScreen(o.point.x, o.point.y, t);
+		out.push({
 			kind: "path",
-			path: p(n, o, 3),
-			fill: { paint: a }
+			path: approxCircleScreen(cx, cy, 3),
+			fill: { paint: fill }
 		});
 	}
 }
-function S(e, n, r, i, a) {
-	let o = i.snap;
-	for (let i of n.snap) {
-		let [n, s] = t(i.point.x, i.point.y, r), c = {
+function emitSnap(out, s, t, theme, strokes) {
+	const color = theme.snap;
+	for (const c of s.snap) {
+		const [cx, cy] = worldToScreen(c.point.x, c.point.y, t);
+		const cmd = {
 			kind: "path",
-			path: p(n, s, 4),
-			...i.accepted ? { fill: { paint: {
+			path: approxCircleScreen(cx, cy, 4),
+			...c.accepted ? { fill: { paint: {
 				kind: "solid",
-				color: o
-			} } } : { stroke: _(a.snap, o) }
+				color
+			} } } : { stroke: strokeOf(strokes.snap, color) }
 		};
-		e.push(c);
+		out.push(cmd);
 	}
 }
-function C(e, n, r, i) {
-	for (let o of n.bounds) {
-		let [n, s] = t(o.bounds.x, o.bounds.y, r);
-		e.push(a(n + 2, s + 11, [{
-			text: o.id,
+function emitIds(out, s, t, theme) {
+	for (const b of s.bounds) {
+		const [sx, sy] = worldToScreen(b.bounds.x, b.bounds.y, t);
+		out.push(textCommandFromRuns(sx + 2, sy + 11, [{
+			text: b.id,
 			fill: { paint: {
 				kind: "solid",
-				color: i.idText
+				color: theme.idText
 			} }
 		}], {
 			fontFamily: "ui-monospace, Menlo, monospace",
@@ -227,132 +293,59 @@ function C(e, n, r, i) {
 		}));
 	}
 }
-function w(e, t, n, r) {
-	if (t.layers.length === 0) return;
-	let i = t.layers.map((e) => `[${e.index}] ${e.id} (${e.space})`), o = 0;
-	for (let e of i) o = Math.max(o, e.length * 6.6);
-	let s = o + 12, c = i.length * 14 + 8, l = n.width - s - 8;
-	e.push({
+function emitViewport(out, rec, view, dims, theme, strokes) {
+	const t = viewToTransform(view);
+	const stroke = strokeOf(strokes.viewport, theme.viewport);
+	const { from, to } = rec;
+	const [fx, fy] = worldToScreen(from.x, from.y, t);
+	out.push({
 		kind: "path",
-		path: g(l, 8, s, c),
-		fill: { paint: {
-			kind: "solid",
-			color: r.layerTextBg
-		} }
-	});
-	for (let t = 0; t < i.length; t++) e.push(a(l + 6, 12 + t * 14, [{
-		text: i[t],
-		fill: { paint: {
-			kind: "solid",
-			color: r.layerText
-		} }
-	}], {
-		fontFamily: "ui-monospace, Menlo, monospace",
-		fontSize: 11
-	}));
-}
-var T = {
-	fontFamily: "ui-monospace, Menlo, monospace",
-	fontSize: 11
-}, E = 6.6, D = 14;
-function O(e, t, n, r, i, o) {
-	let s = 0;
-	for (let e of t) s = Math.max(s, e.length);
-	e.push({
-		kind: "path",
-		path: g(n, r, s * E + 12, t.length * D + 8),
-		fill: { paint: {
-			kind: "solid",
-			color: o
-		} }
+		path: rectPath$1(fx, fy, dims.width / from.scale.x * view.scale.x, dims.height / from.scale.y * view.scale.y),
+		stroke
 	});
-	for (let o = 0; o < t.length; o++) e.push(a(n + 6, r + 4 + o * D, [{
-		text: t[o],
-		fill: { paint: {
-			kind: "solid",
-			color: i
-		} }
-	}], T));
-}
-function k(e, t, n) {
-	return e.toFixed(n).padStart(t);
-}
-function A(e, t, n, r) {
-	let i = t.length >= 2 ? t[t.length - 1] - t[0] : 0, a = i > 0 ? i / (t.length - 1) : null, o = [[
-		"fps",
-		null,
-		a ? 1e3 / a : null,
-		"  "
-	], [
-		"frame",
-		null,
-		a,
-		"ms"
-	]];
-	if (n) {
-		o.push([
-			"paint",
-			n.drawCalls,
-			n.paintMs,
-			"ms"
-		]);
-		for (let e of n.layers) o.push([
-			e.id,
-			e.drawCalls,
-			e.ms,
-			"ms"
-		]);
-	}
-	let s = 0;
-	for (let [e] of o) s = Math.max(s, e.length);
-	let c = (e, t, n, r) => `${e.padEnd(s)} ${t.padStart(5)} ${n.padStart(7)} ${r}`, l = o.map(([e, t, n, r]) => c(e, t === null ? "" : String(t), n === null ? "—" : k(n, 7, 2), r));
-	n && l.splice(2, 0, c("", "draws", "cpu", "  ")), O(e, l, 8, 8, r.fpsText, r.fpsTextBg);
-}
-function j(n, r, i, a, o, s) {
-	let c = e(i), l = _(s.viewport, o.viewport), { from: u, to: d } = r, [f, m] = t(u.x, u.y, c);
-	if (n.push({
-		kind: "path",
-		path: g(f, m, a.width / u.scale.x * i.scale.x, a.height / u.scale.y * i.scale.y),
-		stroke: l
-	}), r.anchor) {
-		let [i, a] = t(r.anchor.x, r.anchor.y, e(u)), [d, f] = t(r.anchor.x, r.anchor.y, c);
-		n.push({
+	if (rec.anchor) {
+		const [ax0, ay0] = worldToScreen(rec.anchor.x, rec.anchor.y, viewToTransform(from));
+		const [ax1, ay1] = worldToScreen(rec.anchor.x, rec.anchor.y, t);
+		out.push({
 			kind: "path",
-			path: p(i, a, 2.5),
+			path: approxCircleScreen(ax0, ay0, 2.5),
 			fill: { paint: {
 				kind: "solid",
-				color: o.viewport
+				color: theme.viewport
 			} }
-		}), Math.hypot(d - i, f - a) > .5 && n.push({
+		});
+		if (Math.hypot(ax1 - ax0, ay1 - ay0) > .5) out.push({
 			kind: "path",
-			path: N(i, a, d, f),
-			stroke: l
-		}), n.push({
+			path: segment(ax0, ay0, ax1, ay1),
+			stroke
+		});
+		out.push({
 			kind: "path",
-			path: p(d, f, 6),
-			stroke: _({ width: s.viewport.width }, o.viewport)
+			path: approxCircleScreen(ax1, ay1, 6),
+			stroke: strokeOf({ width: strokes.viewport.width }, theme.viewport)
 		});
 	}
-	O(n, [r.kind === "pan" ? `pan   Δ ${M((u.x - d.x) * d.scale.x)} ${M((u.y - d.y) * d.scale.y)} px` : `zoom  ×${(d.scale.x / u.scale.x).toFixed(3)}  ${u.scale.x.toFixed(3)} → ${d.scale.x.toFixed(3)}`], 8, a.height - D - 16, o.viewport, o.layerTextBg);
+	const text = rec.kind === "pan" ? `pan   Δ ${signed((from.x - to.x) * to.scale.x)} ${signed((from.y - to.y) * to.scale.y)} px` : `zoom  ×${(to.scale.x / from.scale.x).toFixed(3)}  ${from.scale.x.toFixed(3)} → ${to.scale.x.toFixed(3)}`;
+	emitTextPanel(out, [text], 8, dims.height - LINE_H - 16, theme.viewport, theme.layerTextBg);
 }
-function M(e) {
-	let t = Math.abs(e) < .05 ? 0 : e;
-	return `${t >= 0 ? "+" : "-"}${Math.abs(t).toFixed(1)}`.padStart(8);
+function signed(v) {
+	const r = Math.abs(v) < .05 ? 0 : v;
+	return `${r >= 0 ? "+" : "-"}${Math.abs(r).toFixed(1)}`.padStart(8);
 }
-function N(e, t, n, r) {
+function segment(x0, y0, x1, y1) {
 	return {
 		kind: "polygon",
-		commands: new Uint8Array([s, o]),
+		commands: new Uint8Array([PATH_M, PATH_L]),
 		coords: new Float32Array([
-			e,
-			t,
-			n,
-			r
+			x0,
+			y0,
+			x1,
+			y1
 		]),
 		fillRule: "nonzero"
 	};
 }
-//#endregion
-export { l as DEBUG_OVERLAY_ID, f as buildDebugOverlayCommands, d as createDebugOverlayLayer };
 
+//#endregion
+export { DEBUG_OVERLAY_ID, buildDebugOverlayCommands, createDebugOverlayLayer };
 //# sourceMappingURL=createDebugOverlayLayer.js.map