@heyramzi/ui 2.9.0 → 2.10.0

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

@@ -0,0 +1,378 @@
+import { distanceToBox, distanceToSegment, areaOf, contains, num, solid, within } from "./figure-geometry.js";
+import { LAND_TOLERANCE } from "./break-apart-find.js";
+import { NOTE_TITLE_PX, accentOf, escapeMarkdown, fitScale, inked, penColorOf } from "./break-apart-style.js";
+const LABEL_H = 27;
+const BADGE_REACH = 6;
+const BADGE_LINK_REACH = 60;
+const MARK_MIN = 24;
+export function freshId(base, taken) {
+    let id = base;
+    for(let n = 2; taken.has(id); n += 1)id = `${base}-${n}`;
+    taken.add(id);
+    return id;
+}
+export function startPlan(source, pieces, drawing, artWidth) {
+    const { node } = source;
+    const taken = new Set(source.takenIds ?? []);
+    taken.add(node.id);
+    const cardIds = pieces.cards.map((_, i)=>freshId(`${node.id}-card-${i + 1}`, taken));
+    const frameIds = pieces.loose.frames.map((_, i)=>freshId(`${node.id}-frame-${i + 1}`, taken));
+    return {
+        node,
+        drawing,
+        scale: artWidth / (drawing.x2 - drawing.x1),
+        artLeft: source.art?.left ?? 0,
+        artTop: source.art?.top ?? (node.data.label ? LABEL_H : 0),
+        artWidth,
+        cards: pieces.cards,
+        loose: pieces.loose,
+        arrows: pieces.arrows,
+        edgeData: source.edgeData,
+        taken,
+        removed: new Set(),
+        ops: [],
+        cardIds,
+        frameIds,
+        shapes: 0
+    };
+}
+export function toBoard(plan, p) {
+    return {
+        x: Math.round(plan.node.position.x + plan.artLeft + (p.x - plan.drawing.x1) * plan.scale),
+        y: Math.round(plan.node.position.y + plan.artTop + (p.y - plan.drawing.y1) * plan.scale)
+    };
+}
+function frameOf(plan, box, self = -1) {
+    const { frames } = plan.loose;
+    let best = -1;
+    frames.forEach((frame, i)=>{
+        if (i === self || !within(box, frame.box, 1) || areaOf(frame.box) <= areaOf(box)) return;
+        if (best < 0 || areaOf(frame.box) < areaOf(frames[best].box)) best = i;
+    });
+    return best;
+}
+function frameOrigin(plan, frame) {
+    if (frame < 0) return {
+        x: 0,
+        y: 0
+    };
+    const { box } = plan.loose.frames[frame];
+    return toBoard(plan, {
+        x: box.x1,
+        y: box.y1
+    });
+}
+function placed(plan, box, frame) {
+    const at = toBoard(plan, {
+        x: box.x1,
+        y: box.y1
+    });
+    const origin = frameOrigin(plan, frame);
+    return {
+        x: at.x - origin.x,
+        y: at.y - origin.y
+    };
+}
+function parentOf(plan, frame) {
+    if (frame >= 0) return {
+        parentId: plan.frameIds[frame]
+    };
+    return plan.node.parentId ? {
+        parentId: plan.node.parentId
+    } : {};
+}
+function sizeOf(plan, box) {
+    return {
+        width: Math.round((box.x2 - box.x1) * plan.scale),
+        height: Math.round((box.y2 - box.y1) * plan.scale)
+    };
+}
+function strokeOf(plan, el) {
+    if (!solid(el.attrs.stroke)) return 1;
+    return Math.max(1, Math.round(num(el.attrs["stroke-width"], 1.5) * plan.scale));
+}
+function colorOf(el) {
+    const stroked = solid(el.attrs.stroke) ? penColorOf(el.attrs.stroke) : undefined;
+    return stroked ?? penColorOf(el.attrs.fill) ?? "ink";
+}
+export function addFrames(plan) {
+    plan.loose.frames.forEach((frame, i)=>{
+        plan.removed.add(frame.el);
+        const parent = frameOf(plan, frame.box, i);
+        const { width, height } = sizeOf(plan, frame.box);
+        plan.ops.push({
+            kind: "addNode",
+            node: {
+                id: plan.frameIds[i],
+                type: "wrapper",
+                position: placed(plan, frame.box, parent),
+                data: {
+                    nodeType: "wrapper",
+                    label: "",
+                    frame: true,
+                    stroke: colorOf(frame.el),
+                    strokeWidth: strokeOf(plan, frame.el),
+                    fill: inked(frame.el.attrs.fill) ? penColorOf(frame.el.attrs.fill) ?? "none" : "none"
+                },
+                style: {
+                    width,
+                    height
+                },
+                width,
+                height,
+                ...parentOf(plan, parent)
+            }
+        });
+    });
+}
+function addShape(plan, shape, box, frame) {
+    plan.shapes += 1;
+    const { width, height } = sizeOf(plan, box);
+    plan.ops.push({
+        kind: "addNode",
+        node: {
+            id: freshId(`${plan.node.id}-shape-${plan.shapes}`, plan.taken),
+            type: "shape",
+            position: placed(plan, box, frame),
+            data: {
+                strokeWidth: 2,
+                filled: false,
+                label: "",
+                ...shape
+            },
+            width,
+            height,
+            ...parentOf(plan, frame)
+        }
+    });
+}
+export function addShapes(plan) {
+    for (const shape of plan.loose.shapes){
+        plan.removed.add(shape.el);
+        const fill = shape.el.attrs.fill;
+        const fillPen = inked(fill) ? penColorOf(fill) : undefined;
+        addShape(plan, {
+            shape: "rectangle",
+            color: colorOf(shape.el),
+            strokeWidth: strokeOf(plan, shape.el),
+            filled: inked(fill),
+            ...fillPen ? {
+                fill: fillPen
+            } : {}
+        }, shape.box, frameOf(plan, shape.box));
+    }
+}
+function cardAt(cards, point) {
+    let best = -1;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    cards.forEach((card, index)=>{
+        if (!contains(card.box, point, LAND_TOLERANCE)) return;
+        const dx = Math.max(card.box.x1 - point.x, 0, point.x - card.box.x2);
+        const dy = Math.max(card.box.y1 - point.y, 0, point.y - card.box.y2);
+        const distance = Math.hypot(dx, dy);
+        if (distance < bestDistance) {
+            best = index;
+            bestDistance = distance;
+        }
+    });
+    return best;
+}
+function sideOf(box, point) {
+    const gaps = [
+        [
+            "left",
+            Math.abs(point.x - box.x1)
+        ],
+        [
+            "right",
+            Math.abs(point.x - box.x2)
+        ],
+        [
+            "top",
+            Math.abs(point.y - box.y1)
+        ],
+        [
+            "bottom",
+            Math.abs(point.y - box.y2)
+        ]
+    ];
+    return [
+        ...gaps
+    ].sort((a, b)=>a[1] - b[1])[0][0];
+}
+export function linksOf(plan) {
+    const links = [];
+    for (const arrow of plan.arrows){
+        const src = cardAt(plan.cards, arrow.from);
+        const dst = cardAt(plan.cards, arrow.to);
+        if (src >= 0 && dst >= 0 && src !== dst) links.push({
+            arrow,
+            src,
+            dst
+        });
+    }
+    return links;
+}
+function nearestCard(cards, badge) {
+    const reach = badge.r + BADGE_REACH;
+    let card = -1;
+    let cardGap = Number.POSITIVE_INFINITY;
+    cards.forEach((c, i)=>{
+        const gap = distanceToBox(c.box, badge.center);
+        if (gap <= reach && gap < cardGap) {
+            card = i;
+            cardGap = gap;
+        }
+    });
+    return card;
+}
+function nearestLink(links, badge) {
+    let link = null;
+    let linkGap = Math.max(BADGE_LINK_REACH, badge.r * 3);
+    for (const l of links){
+        const gap = distanceToSegment(l.arrow.from, l.arrow.to, badge.center);
+        if (gap < linkGap) {
+            link = l.arrow;
+            linkGap = gap;
+        }
+    }
+    return link;
+}
+function addMark(plan, badge) {
+    const side = Math.max(Math.round(badge.r * 2 * plan.scale), MARK_MIN);
+    const at = toBoard(plan, badge.center);
+    const frame = frameOf(plan, {
+        x1: badge.center.x,
+        y1: badge.center.y,
+        x2: badge.center.x,
+        y2: badge.center.y
+    });
+    const origin = frameOrigin(plan, frame);
+    plan.shapes += 1;
+    plan.ops.push({
+        kind: "addNode",
+        node: {
+            id: freshId(`${plan.node.id}-mark-${plan.shapes}`, plan.taken),
+            type: "shape",
+            position: {
+                x: at.x - origin.x - Math.round(side / 2),
+                y: at.y - origin.y - Math.round(side / 2)
+            },
+            data: {
+                shape: "ellipse",
+                color: colorOf(badge.circle),
+                strokeWidth: 2,
+                filled: true,
+                label: badge.label
+            },
+            width: side,
+            height: side,
+            ...parentOf(plan, frame)
+        }
+    });
+}
+export function placeBadges(plan, links) {
+    const linkLabels = new Map();
+    for (const badge of plan.loose.badges){
+        const card = nearestCard(plan.cards, badge);
+        const link = card < 0 ? nearestLink(links, badge) : null;
+        if (card >= 0) {
+            const kicker = plan.cards[card].kicker;
+            plan.cards[card].kicker = [
+                badge.label,
+                kicker
+            ].filter(Boolean).join(" · ");
+        } else if (link && !linkLabels.has(link)) linkLabels.set(link, badge.label);
+        else addMark(plan, badge);
+        plan.removed.add(badge.circle);
+        plan.removed.add(badge.text);
+    }
+    return linkLabels;
+}
+function noteData(plan, card, width, height) {
+    const accent = accentOf(card.rect.attrs.stroke);
+    const rx = num(card.rect.attrs.rx);
+    const textScale = fitScale(card, card.titleSize * plan.scale / NOTE_TITLE_PX, width, height);
+    return {
+        nodeType: "note",
+        label: card.title,
+        ...card.body.length > 0 ? {
+            content: card.body.map(escapeMarkdown).join("\n")
+        } : {},
+        ...card.kicker ? {
+            kicker: card.kicker
+        } : {},
+        ...accent ? {
+            accent
+        } : {},
+        ...rx < 3 ? {
+            shape: "rect"
+        } : {},
+        userHeight: height,
+        ...Math.abs(textScale - 1) > 0.02 ? {
+            textScale
+        } : {}
+    };
+}
+export function addCards(plan) {
+    const cardFrames = plan.cards.map((card)=>frameOf(plan, card.box));
+    plan.cards.forEach((card, i)=>{
+        for (const part of card.claimed)plan.removed.add(part);
+        const frame = cardFrames[i];
+        const { width, height } = sizeOf(plan, card.box);
+        plan.ops.push({
+            kind: "addNode",
+            node: {
+                id: plan.cardIds[i],
+                type: "note",
+                position: placed(plan, card.box, frame),
+                data: noteData(plan, card, width, height),
+                style: {
+                    width
+                },
+                width,
+                ...parentOf(plan, frame)
+            }
+        });
+    });
+}
+export function addEdges(plan, links, linkLabels) {
+    links.forEach(({ arrow, src: a, dst: b }, i)=>{
+        plan.removed.add(arrow.el);
+        if (arrow.head) plan.removed.add(arrow.head);
+        const reversed = arrow.startArrow && !arrow.endArrow;
+        const [src, dst] = reversed ? [
+            b,
+            a
+        ] : [
+            a,
+            b
+        ];
+        const [srcPt, dstPt] = reversed ? [
+            arrow.to,
+            arrow.from
+        ] : [
+            arrow.from,
+            arrow.to
+        ];
+        const label = linkLabels.get(arrow);
+        plan.ops.push({
+            kind: "addEdge",
+            edge: {
+                id: freshId(`${plan.node.id}-link-${i + 1}`, plan.taken),
+                source: plan.cardIds[src],
+                target: plan.cardIds[dst],
+                sourceHandle: sideOf(plan.cards[src].box, srcPt),
+                targetHandle: sideOf(plan.cards[dst].box, dstPt),
+                ...label ? {
+                    label
+                } : {},
+                data: {
+                    ...plan.edgeData,
+                    endArrow: arrow.startArrow || arrow.endArrow,
+                    startArrow: arrow.startArrow && arrow.endArrow
+                }
+            }
+        });
+    });
+}

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

@@ -0,0 +1,93 @@
+import { SKETCH_ACCENTS, sketchColors } from "./sketch.js";
+import { PEN_HEX } from "../pen/colors.js";
+export const NOTE_TITLE_PX = 19;
+export const NOTE_BODY_PX = 15;
+const NOTE_TITLE_LINE = 26;
+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;
+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));
+}
+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;
+}
+export function escapeMarkdown(line) {
+    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;
+}
+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;
+}
+export function inked(color) {
+    const rgb = channels(color);
+    return Boolean(rgb) && Math.min(...rgb) < 240;
+}
+export const round1 = (n)=>Math.round(n * 10) / 10;
+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;
+}

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

@@ -0,0 +1,206 @@
+import { sanitizeFigureSvg } from "./svg-figure.js";
+import { PEN_HEX } from "../pen/colors.js";
+import { isEl, translateOf, union, viewBoxOf, boxOfEl } from "./figure-geometry.js";
+import { findPieces } from "./break-apart-pieces.js";
+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;
+const CAPTION_GAP = 8;
+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
+    };
+}
+function escapeText(value) {
+    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}>`;
+}
+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
+    };
+}
+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;
+}
+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
+                } : {}
+            }
+        });
+    }
+}
+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
+        });
+    }
+}
+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
+    };
+}