@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/headless/break-apart-style.js

@@ -1,5 +1,7 @@
+// Break apart, the look: which sketch accent or pen colour a drawn colour maps to, and how big a note sets.
 import { SKETCH_ACCENTS, sketchColors } from "./sketch.js";
 import { PEN_HEX } from "../pen/colors.js";
+/** A note's type and spacing in px (sketch-note.svelte), for estimating how tall a card sets. */
 export const NOTE_TITLE_PX = 19;
 export const NOTE_BODY_PX = 15;
 const NOTE_TITLE_LINE = 26;
@@ -7,87 +9,90 @@ const NOTE_BODY_LINE = 21.75;
 const NOTE_PAD_X = 40;
 const NOTE_PAD_Y = 32;
 const NOTE_GAP = 10;
-const NOTE_GLYPH = 0.55;
-const NOTE_GLYPH_CAPS = 0.7;
-const FIT_MARGIN = 0.92;
+/** Average glyph width as a share of the type size. */
+const NOTE_GLYPH = .55;
+const NOTE_GLYPH_CAPS = .7;
+/** Aim a little under the drawn height, since the estimate wraps by character count. */
+const FIT_MARGIN = .92;
 function channels(hex) {
-    const m = hex?.trim().match(/^#([\da-f]{3}|[\da-f]{6})$/i);
-    if (!m) return null;
-    const full = m[1].length === 3 ? [
-        ...m[1]
-    ].map((c)=>c + c).join("") : m[1];
-    return [
-        0,
-        2,
-        4
-    ].map((i)=>Number.parseInt(full.slice(i, i + 2), 16));
+	const m = hex?.trim().match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+	if (!m) return null;
+	const full = m[1].length === 3 ? [...m[1]].map((c) => c + c).join("") : m[1];
+	return [
+		0,
+		2,
+		4
+	].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
 }
+/** The sketch accent nearest the rect's stroke. A grey or an unknown colour reads as ink, the default. */
 export function accentOf(stroke) {
-    const rgb = channels(stroke);
-    if (!rgb) return undefined;
-    const spread = Math.max(...rgb) - Math.min(...rgb);
-    if (spread < 40) return undefined;
-    let best = null;
-    for (const name of SKETCH_ACCENTS){
-        const target = channels(sketchColors(name).stroke);
-        if (!target) continue;
-        const distance = Math.hypot(...rgb.map((v, i)=>v - target[i]));
-        if (!best || distance < best.distance) best = {
-            name,
-            distance
-        };
-    }
-    return best && best.name !== "ink" && best.distance < 90 ? best.name : undefined;
+	const rgb = channels(stroke);
+	if (!rgb) return undefined;
+	const spread = Math.max(...rgb) - Math.min(...rgb);
+	if (spread < 40) return undefined;
+	let best = null;
+	for (const name of SKETCH_ACCENTS) {
+		const target = channels(sketchColors(name).stroke);
+		if (!target) continue;
+		const distance = Math.hypot(...rgb.map((v, i) => v - target[i]));
+		if (!best || distance < best.distance) best = {
+			name,
+			distance
+		};
+	}
+	return best && best.name !== "ink" && best.distance < 90 ? best.name : undefined;
 }
+/** Card text is markdown: a stray `*` or a leading `-` would turn into formatting. */
 export function escapeMarkdown(line) {
-    return line.replace(/([\\`*_~[\]])/g, "\\$1").replace(/^([#>+-]|\d+\.)/, "\\$1");
+	return line.replace(/([\\`*_~[\]])/g, "\\$1").replace(/^([#>+-]|\d+\.)/, "\\$1");
 }
 function hueOf([r, g, b]) {
-    const max = Math.max(r, g, b);
-    const d = max - Math.min(r, g, b);
-    if (d === 0) return 0;
-    const h = max === r ? (g - b) / d % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
-    return (h * 60 + 360) % 360;
+	const max = Math.max(r, g, b);
+	const d = max - Math.min(r, g, b);
+	if (d === 0) return 0;
+	const h = max === r ? (g - b) / d % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+	return (h * 60 + 360) % 360;
 }
+/** The pen colour whose hue is nearest, or undefined for a grey, a white or a black. */
 export function penColorOf(color) {
-    const rgb = channels(color);
-    if (!rgb || Math.max(...rgb) - Math.min(...rgb) < 40) return undefined;
-    const hue = hueOf(rgb);
-    let best = null;
-    for (const name of Object.keys(PEN_HEX)){
-        const target = channels(PEN_HEX[name].light);
-        if (!target || name === "ink") continue;
-        const diff = Math.abs(hue - hueOf(target));
-        const gap = Math.min(diff, 360 - diff);
-        if (!best || gap < best.gap) best = {
-            name,
-            gap
-        };
-    }
-    return best?.name;
+	const rgb = channels(color);
+	if (!rgb || Math.max(...rgb) - Math.min(...rgb) < 40) return undefined;
+	const hue = hueOf(rgb);
+	let best = null;
+	for (const name of Object.keys(PEN_HEX)) {
+		const target = channels(PEN_HEX[name].light);
+		if (!target || name === "ink") continue;
+		const diff = Math.abs(hue - hueOf(target));
+		const gap = Math.min(diff, 360 - diff);
+		if (!best || gap < best.gap) best = {
+			name,
+			gap
+		};
+	}
+	return best?.name;
 }
+/** A solid colour, not white or paper. */
 export function inked(color) {
-    const rgb = channels(color);
-    return Boolean(rgb) && Math.min(...rgb) < 240;
+	const rgb = channels(color);
+	return Boolean(rgb) && Math.min(...rgb) < 240;
 }
-export const round1 = (n)=>Math.round(n * 10) / 10;
+export const round1 = (n) => Math.round(n * 10) / 10;
+/** The share a note shows at: its title at the drawn size, or smaller until the copy fits the drawn box. */
 export function fitScale(card, matched, boxW, boxH) {
-    const glyph = (text)=>text === text.toUpperCase() ? NOTE_GLYPH_CAPS : NOTE_GLYPH;
-    const lines = (text, px, inner)=>{
-        const widest = Math.max(...text.split(/\s+/).map((w)=>w.length)) * px * glyph(text);
-        if (widest > inner) return 99;
-        return Math.max(1, Math.ceil(text.length * px * glyph(text) / inner));
-    };
-    const heightAt = (z)=>{
-        const inner = Math.max(boxW / z - NOTE_PAD_X, 40);
-        const title = lines([
-            card.kicker,
-            card.title
-        ].filter(Boolean).join(" "), NOTE_TITLE_PX, inner);
-        const body = card.body.reduce((n, line)=>n + lines(line, NOTE_BODY_PX, inner), 0);
-        return (NOTE_PAD_Y + title * NOTE_TITLE_LINE + (body ? NOTE_GAP + body * NOTE_BODY_LINE : 0)) * z;
-    };
-    let z = matched;
-    for(let i = 0; i < 16 && z > 0.2 && heightAt(z) > boxH * FIT_MARGIN; i += 1)z *= 0.92;
-    return Math.round(z * 1000) / 1000;
+	// Capitals run wide, and a word wider than the card breaks mid-word, so that counts as too tall.
+	const glyph = (text) => text === text.toUpperCase() ? NOTE_GLYPH_CAPS : NOTE_GLYPH;
+	const lines = (text, px, inner) => {
+		const widest = Math.max(...text.split(/\s+/).map((w) => w.length)) * px * glyph(text);
+		if (widest > inner) return 99;
+		return Math.max(1, Math.ceil(text.length * px * glyph(text) / inner));
+	};
+	const heightAt = (z) => {
+		const inner = Math.max(boxW / z - NOTE_PAD_X, 40);
+		const title = lines([card.kicker, card.title].filter(Boolean).join(" "), NOTE_TITLE_PX, inner);
+		const body = card.body.reduce((n, line) => n + lines(line, NOTE_BODY_PX, inner), 0);
+		return (NOTE_PAD_Y + title * NOTE_TITLE_LINE + (body ? NOTE_GAP + body * NOTE_BODY_LINE : 0)) * z;
+	};
+	let z = matched;
+	for (let i = 0; i < 16 && z > .2 && heightAt(z) > boxH * FIT_MARGIN; i += 1) z *= .92;
+	return Math.round(z * 1e3) / 1e3;
 }

package/dist/canvas/headless/break-apart.js

@@ -6,201 +6,208 @@ import { NOTE_BODY_PX, NOTE_TITLE_PX, round1 } from "./break-apart-style.js";
 import { addCards, addEdges, addFrames, addShapes, freshId, linksOf, placeBadges, startPlan } from "./break-apart-plan.js";
 const TEXT_NODE = 3;
 const ELEMENT_NODE = 1;
+/** Space between the drawing and the caption set under it. */
 const CAPTION_GAP = 8;
+// =========================
+// TREE
+// =========================
+/** Read a DOM element (or any node shaped like one) into a tree. */
 export function treeFromElement(el) {
-    const attrs = {};
-    for (const attr of Array.from(el.attributes ?? []))attrs[attr.name] = attr.value;
-    const children = [];
-    for (const child of Array.from(el.childNodes ?? [])){
-        if (child.nodeType === TEXT_NODE) children.push(child.textContent ?? "");
-        else if (child.nodeType === ELEMENT_NODE) children.push(treeFromElement(child));
-    }
-    return {
-        tag: el.localName ?? "",
-        attrs,
-        children
-    };
+	const attrs = {};
+	for (const attr of Array.from(el.attributes ?? [])) attrs[attr.name] = attr.value;
+	const children = [];
+	for (const child of Array.from(el.childNodes ?? [])) {
+		if (child.nodeType === TEXT_NODE) children.push(child.textContent ?? "");
+		else if (child.nodeType === ELEMENT_NODE) children.push(treeFromElement(child));
+	}
+	return {
+		tag: el.localName ?? "",
+		attrs,
+		children
+	};
 }
 function escapeText(value) {
-    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function serialize(child) {
-    if (typeof child === "string") return escapeText(child);
-    const attrs = Object.entries(child.attrs).map(([name, value])=>` ${name}="${value.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}"`).join("");
-    return `<${child.tag}${attrs}>${child.children.map(serialize).join("")}</${child.tag}>`;
+	if (typeof child === "string") return escapeText(child);
+	const attrs = Object.entries(child.attrs).map(([name, value]) => ` ${name}="${value.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}"`).join("");
+	return `<${child.tag}${attrs}>${child.children.map(serialize).join("")}</${child.tag}>`;
 }
+// =========================
+// WHAT IS LEFT
+// =========================
 function prune(el, removed) {
-    const children = [];
-    for (const child of el.children){
-        if (removed.has(child)) continue;
-        if (isEl(child) && child.tag === "g") {
-            const kept = prune(child, removed);
-            if (kept.children.some((c)=>isEl(c) ? true : c.trim() !== "")) children.push(kept);
-            continue;
-        }
-        children.push(child);
-    }
-    return {
-        ...el,
-        children
-    };
+	const children = [];
+	for (const child of el.children) {
+		if (removed.has(child)) continue;
+		if (isEl(child) && child.tag === "g") {
+			const kept = prune(child, removed);
+			// A group left with no shape, only whitespace, is gone.
+			if (kept.children.some((c) => isEl(c) ? true : c.trim() !== "")) children.push(kept);
+			continue;
+		}
+		children.push(child);
+	}
+	return {
+		...el,
+		children
+	};
 }
+/** The ink left once the cards are out: drawable shapes and text, ignoring defs. */
 function leftover(el) {
-    let box = null;
-    for (const child of el.children){
-        if (!isEl(child) || child.tag === "defs" || child.tag === "title" || child.tag === "desc") continue;
-        if (child.tag === "g") {
-            const shift = translateOf(child) ?? {
-                x: 0,
-                y: 0
-            };
-            const inner = leftover(child);
-            if (inner) {
-                box = union(box, {
-                    x1: inner.x1 + shift.x,
-                    y1: inner.y1 + shift.y,
-                    x2: inner.x2 + shift.x,
-                    y2: inner.y2 + shift.y
-                });
-            }
-            continue;
-        }
-        box = union(box, boxOfEl(child, {
-            x: 0,
-            y: 0
-        }));
-    }
-    return box;
+	let box = null;
+	for (const child of el.children) {
+		if (!isEl(child) || child.tag === "defs" || child.tag === "title" || child.tag === "desc") continue;
+		if (child.tag === "g") {
+			const shift = translateOf(child) ?? {
+				x: 0,
+				y: 0
+			};
+			const inner = leftover(child);
+			if (inner) {
+				box = union(box, {
+					x1: inner.x1 + shift.x,
+					y1: inner.y1 + shift.y,
+					x2: inner.x2 + shift.x,
+					y2: inner.y2 + shift.y
+				});
+			}
+			continue;
+		}
+		box = union(box, boxOfEl(child, {
+			x: 0,
+			y: 0
+		}));
+	}
+	return box;
 }
+/** Nothing is left to draw: the figure goes, and its title and caption stay as text above and below the pieces. */
 function replaceWithText(plan) {
-    const { node, taken, ops, drawing, scale, artTop } = plan;
-    ops.push({
-        kind: "removeNode",
-        nodeId: node.id
-    });
-    const accent = node.data.accent;
-    const color = Object.keys(PEN_HEX).find((c)=>c === accent) ?? "ink";
-    const textWidth = Math.round(plan.artWidth);
-    const words = [
-        [
-            String(node.data.label ?? ""),
-            NOTE_TITLE_PX,
-            node.position.y
-        ],
-        [
-            String(node.data.caption ?? ""),
-            NOTE_BODY_PX,
-            Math.round(node.position.y + artTop + (drawing.y2 - drawing.y1) * scale + CAPTION_GAP)
-        ]
-    ];
-    for (const [i, [text, fontSize, y]] of words.entries()){
-        if (!text) continue;
-        ops.push({
-            kind: "addNode",
-            node: {
-                id: freshId(`${node.id}-text-${i === 0 ? "title" : "caption"}`, taken),
-                type: "text",
-                position: {
-                    x: node.position.x,
-                    y
-                },
-                data: {
-                    text,
-                    color,
-                    fontSize,
-                    fixedWidth: true
-                },
-                width: textWidth,
-                height: Math.round(fontSize * 1.4),
-                ...node.parentId ? {
-                    parentId: node.parentId
-                } : {}
-            }
-        });
-    }
+	const { node, taken, ops, drawing, scale, artTop } = plan;
+	ops.push({
+		kind: "removeNode",
+		nodeId: node.id
+	});
+	const accent = node.data.accent;
+	const color = Object.keys(PEN_HEX).find((c) => c === accent) ?? "ink";
+	const textWidth = Math.round(plan.artWidth);
+	const words = [[
+		String(node.data.label ?? ""),
+		NOTE_TITLE_PX,
+		node.position.y
+	], [
+		String(node.data.caption ?? ""),
+		NOTE_BODY_PX,
+		Math.round(node.position.y + artTop + (drawing.y2 - drawing.y1) * scale + CAPTION_GAP)
+	]];
+	for (const [i, [text, fontSize, y]] of words.entries()) {
+		if (!text) continue;
+		ops.push({
+			kind: "addNode",
+			node: {
+				id: freshId(`${node.id}-text-${i === 0 ? "title" : "caption"}`, taken),
+				type: "text",
+				position: {
+					x: node.position.x,
+					y
+				},
+				data: {
+					text,
+					color,
+					fontSize,
+					fixedWidth: true
+				},
+				width: textWidth,
+				height: Math.round(fontSize * 1.4),
+				...node.parentId ? { parentId: node.parentId } : {}
+			}
+		});
+	}
 }
+/** The figure keeps its height, so its caption stays under the pieces; only the sides shrink. */
 function shrinkFigure(plan, rest, ink) {
-    const { node, drawing, scale, ops } = plan;
-    const crop = {
-        x1: Math.max(ink.x1, drawing.x1),
-        y1: drawing.y1,
-        x2: Math.min(ink.x2, drawing.x2),
-        y2: drawing.y2
-    };
-    const cropW = crop.x2 - crop.x1;
-    const cropH = crop.y2 - crop.y1;
-    const markup = sanitizeFigureSvg(serialize({
-        ...rest,
-        attrs: {
-            ...rest.attrs,
-            viewBox: `${round1(crop.x1)} ${round1(crop.y1)} ${round1(cropW)} ${round1(cropH)}`
-        }
-    }));
-    const width = Math.round(cropW * scale);
-    const board = node.data.board;
-    ops.push({
-        kind: "patchNode",
-        nodeId: node.id,
-        data: {
-            svg: markup ?? "",
-            ...board?.w ? {
-                board: {
-                    ...board,
-                    w: width
-                }
-            } : {}
-        },
-        width,
-        style: {
-            width
-        }
-    });
-    const shift = {
-        x: Math.round(node.position.x + (crop.x1 - drawing.x1) * scale),
-        y: Math.round(node.position.y + (crop.y1 - drawing.y1) * scale)
-    };
-    if (shift.x !== node.position.x || shift.y !== node.position.y) {
-        ops.push({
-            kind: "moveNode",
-            nodeId: node.id,
-            position: shift
-        });
-    }
+	const { node, drawing, scale, ops } = plan;
+	const crop = {
+		x1: Math.max(ink.x1, drawing.x1),
+		y1: drawing.y1,
+		x2: Math.min(ink.x2, drawing.x2),
+		y2: drawing.y2
+	};
+	const cropW = crop.x2 - crop.x1;
+	const cropH = crop.y2 - crop.y1;
+	const markup = sanitizeFigureSvg(serialize({
+		...rest,
+		attrs: {
+			...rest.attrs,
+			viewBox: `${round1(crop.x1)} ${round1(crop.y1)} ${round1(cropW)} ${round1(cropH)}`
+		}
+	}));
+	const width = Math.round(cropW * scale);
+	const board = node.data.board;
+	ops.push({
+		kind: "patchNode",
+		nodeId: node.id,
+		data: {
+			svg: markup ?? "",
+			...board?.w ? { board: {
+				...board,
+				w: width
+			} } : {}
+		},
+		width,
+		style: { width }
+	});
+	const shift = {
+		x: Math.round(node.position.x + (crop.x1 - drawing.x1) * scale),
+		y: Math.round(node.position.y + (crop.y1 - drawing.y1) * scale)
+	};
+	if (shift.x !== node.position.x || shift.y !== node.position.y) {
+		ops.push({
+			kind: "moveNode",
+			nodeId: node.id,
+			position: shift
+		});
+	}
 }
+// =========================
+// BREAK APART
+// =========================
+/** Ops that swap a figure for cards, links, shapes and frames, or null with none in it. The rest stays as a smaller figure. */
 export function breakApartFigure(input) {
-    const { node, tree } = input;
-    const drawing = viewBoxOf(tree);
-    const artWidth = input.art?.width ?? node.width;
-    if (!drawing || !artWidth) return null;
-    const pieces = findPieces(tree, drawing);
-    if (!pieces) return null;
-    const plan = startPlan(input, pieces, drawing, artWidth);
-    addFrames(plan);
-    addShapes(plan);
-    const links = linksOf(plan);
-    const linkLabels = placeBadges(plan, links);
-    addCards(plan);
-    addEdges(plan, links, linkLabels);
-    const counts = {
-        cards: plan.cards.length,
-        edges: links.length,
-        shapes: plan.shapes,
-        frames: plan.loose.frames.length
-    };
-    const rest = prune(tree, plan.removed);
-    const ink = leftover(rest);
-    if (!ink) {
-        replaceWithText(plan);
-        return {
-            ops: plan.ops,
-            ...counts,
-            remains: false
-        };
-    }
-    shrinkFigure(plan, rest, ink);
-    return {
-        ops: plan.ops,
-        ...counts,
-        remains: true
-    };
+	const { node, tree } = input;
+	const drawing = viewBoxOf(tree);
+	const artWidth = input.art?.width ?? node.width;
+	if (!drawing || !artWidth) return null;
+	const pieces = findPieces(tree, drawing);
+	if (!pieces) return null;
+	const plan = startPlan(input, pieces, drawing, artWidth);
+	addFrames(plan);
+	addShapes(plan);
+	const links = linksOf(plan);
+	const linkLabels = placeBadges(plan, links);
+	addCards(plan);
+	addEdges(plan, links, linkLabels);
+	const counts = {
+		cards: plan.cards.length,
+		edges: links.length,
+		shapes: plan.shapes,
+		frames: plan.loose.frames.length
+	};
+	const rest = prune(tree, plan.removed);
+	const ink = leftover(rest);
+	if (!ink) {
+		replaceWithText(plan);
+		return {
+			ops: plan.ops,
+			...counts,
+			remains: false
+		};
+	}
+	shrinkFigure(plan, rest, ink);
+	return {
+		ops: plan.ops,
+		...counts,
+		remains: true
+	};
 }