@heyramzi/ui 2.9.0 → 2.10.0

package/dist/canvas/editor/z-order.js

@@ -0,0 +1,82 @@
+export const INK_TYPES = new Set([
+    "stroke",
+    "text",
+    "shape"
+]);
+function layerOf(node) {
+    return typeof node.zIndex === "number" ? node.zIndex : 0;
+}
+function stacks(nodes) {
+    const byParent = new Map();
+    nodes.forEach((node, index)=>{
+        if (INK_TYPES.has(node.type ?? "")) return;
+        const key = node.parentId ?? "";
+        const stack = byParent.get(key) ?? [];
+        stack.push({
+            node,
+            index
+        });
+        byParent.set(key, stack);
+    });
+    for (const stack of byParent.values()){
+        stack.sort((a, b)=>layerOf(a.node) - layerOf(b.node) || a.index - b.index);
+    }
+    return byParent;
+}
+function moved(stack, picked, move) {
+    const isPicked = (slot)=>picked.has(slot.node.id);
+    if (move === "front") return [
+        ...stack.filter((s)=>!isPicked(s)),
+        ...stack.filter(isPicked)
+    ];
+    if (move === "back") return [
+        ...stack.filter(isPicked),
+        ...stack.filter((s)=>!isPicked(s))
+    ];
+    const next = [
+        ...stack
+    ];
+    if (move === "forward") {
+        for(let i = next.length - 2; i >= 0; i--){
+            if (isPicked(next[i]) && !isPicked(next[i + 1])) [next[i], next[i + 1]] = [
+                next[i + 1],
+                next[i]
+            ];
+        }
+    } else {
+        for(let i = 1; i < next.length; i++){
+            if (isPicked(next[i]) && !isPicked(next[i - 1])) [next[i], next[i - 1]] = [
+                next[i - 1],
+                next[i]
+            ];
+        }
+    }
+    return next;
+}
+export function reorderStack(nodes, picked, move) {
+    const layers = new Map();
+    for (const stack of stacks(nodes).values()){
+        if (!stack.some((slot)=>picked.has(slot.node.id))) continue;
+        const next = moved(stack, picked, move);
+        if (next.every((slot, i)=>slot === stack[i])) continue;
+        next.forEach((slot, rank)=>{
+            if (layerOf(slot.node) !== rank) layers.set(slot.node.id, rank);
+        });
+    }
+    if (layers.size === 0) return null;
+    return nodes.map((node)=>{
+        const layer = layers.get(node.id);
+        return layer === undefined ? node : {
+            ...node,
+            zIndex: layer
+        };
+    });
+}
+export function topLayer(nodes, parentId) {
+    let top = 0;
+    for (const node of nodes){
+        if (INK_TYPES.has(node.type ?? "") || (node.parentId ?? "") !== (parentId ?? "")) continue;
+        top = Math.max(top, layerOf(node));
+    }
+    return top > 0 ? top + 1 : undefined;
+}

package/dist/canvas/headless/alignment.js

@@ -0,0 +1,20 @@
+export function alignNodesHorizontally(nodes) {
+    if (nodes.length < 2) return;
+    const targetY = Math.min(...nodes.map((n)=>n.position.y));
+    for (const node of nodes){
+        node.position = {
+            ...node.position,
+            y: targetY
+        };
+    }
+}
+export function alignNodesVertically(nodes) {
+    if (nodes.length < 2) return;
+    const targetX = Math.min(...nodes.map((n)=>n.position.x));
+    for (const node of nodes){
+        node.position = {
+            ...node.position,
+            x: targetX
+        };
+    }
+}

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

@@ -0,0 +1,324 @@
+import { areaOf, boxOfEl, centerOf, contains, fontSize, hasText, isBold, isEl, num, plus, solid, strokeEnds, textLines, translateOf, visible, within } from "./figure-geometry.js";
+const MAX_CARD_TEXTS = 8;
+const MAX_CARD_AREA = 0.4;
+export const LAND_TOLERANCE = 8;
+export const ARROWHEAD_MAX = 20;
+const BADGE_MAX_CHARS = 2;
+const BADGE_MAX_R = 30;
+const MIN_SIDE = 4;
+const ORIGIN = {
+    x: 0,
+    y: 0
+};
+const anchorOf = (el, offset)=>({
+        x: num(el.attrs.x) + offset.x,
+        y: num(el.attrs.y) + offset.y
+    });
+function holdsText(rect, texts, offset) {
+    if (rect.tag !== "rect" || !visible(rect) || rect.attrs.fill === "none") return null;
+    const box = boxOfEl(rect, offset);
+    if (!box) return null;
+    return texts.some((t)=>contains(box, anchorOf(t, offset), 3)) ? box : null;
+}
+function splitBadge(inside, kids) {
+    let badge;
+    const words = [];
+    const badgeParts = [];
+    for (const t of inside){
+        const line = textLines(t).join(" ");
+        const dot = kids.find((k)=>k.tag === "circle" && Math.hypot(num(k.attrs.cx) - num(t.attrs.x), num(k.attrs.cy) - num(t.attrs.y)) <= num(k.attrs.r) + 2);
+        if (dot && line.length <= 2) {
+            badge = line;
+            badgeParts.push(dot, t);
+        } else words.push(t);
+    }
+    return {
+        badge,
+        words,
+        badgeParts
+    };
+}
+function headlineOf(ordered) {
+    const titleEl = ordered.find((t)=>isBold(t) && t.attrs["text-anchor"] !== "end") ?? [
+        ...ordered
+    ].sort((a, b)=>Number(isBold(b)) - Number(isBold(a)) || fontSize(b) - fontSize(a))[0];
+    const tag = ordered.find((t)=>t !== titleEl && t.attrs["text-anchor"] === "end" && Math.abs(num(t.attrs.y) - num(titleEl.attrs.y)) < 8);
+    const titleEls = [
+        titleEl
+    ];
+    const sameFace = (t)=>fontSize(t) === fontSize(titleEl) && isBold(t) === isBold(titleEl) && t.attrs["text-anchor"] === titleEl.attrs["text-anchor"];
+    for (const t of ordered.slice(ordered.indexOf(titleEl) + 1)){
+        if (t === tag || !sameFace(t)) break;
+        titleEls.push(t);
+    }
+    const bodyEls = ordered.filter((t)=>!titleEls.includes(t) && t !== tag);
+    return {
+        titleEls,
+        tag,
+        bodyEls
+    };
+}
+function bodyLines(bodyEls) {
+    const body = [];
+    let lastY = Number.NaN;
+    for (const t of bodyEls){
+        const text = textLines(t).join(" ");
+        if (Math.abs(num(t.attrs.y) - lastY) < 3 && body.length > 0) body[body.length - 1] += ` ${text}`;
+        else body.push(text);
+        lastY = num(t.attrs.y);
+    }
+    return body;
+}
+function chromeOf(req, claimed) {
+    const { kids, box, offset, taken } = req;
+    return kids.filter((k)=>{
+        if (claimed.has(k) || taken.has(k) || k.attrs.fill === "none") return false;
+        const kb = boxOfEl(k, offset);
+        return kb !== null && within(kb, box);
+    });
+}
+const readingOrder = (a, b)=>num(a.attrs.y) - num(b.attrs.y) || num(a.attrs.x) - num(b.attrs.x);
+function cardFromRect(req) {
+    const { group, kids, rect, box, offset, taken } = req;
+    const inside = kids.filter((k)=>hasText(k) && !taken.has(k) && contains(box, anchorOf(k, offset), 3));
+    if (inside.length === 0 || inside.length > MAX_CARD_TEXTS) return null;
+    const { badge, words, badgeParts } = splitBadge(inside, kids);
+    if (words.length === 0) return null;
+    const { titleEls, tag, bodyEls } = headlineOf([
+        ...words
+    ].sort(readingOrder));
+    const claimed = new Set([
+        rect,
+        ...badgeParts,
+        ...titleEls,
+        ...tag ? [
+            tag
+        ] : [],
+        ...bodyEls
+    ]);
+    for (const k of chromeOf(req, claimed))claimed.add(k);
+    return {
+        group,
+        offset,
+        rect,
+        box,
+        claimed,
+        title: titleEls.map((t)=>textLines(t).join(" ")).join(" "),
+        titleSize: fontSize(titleEls[0]),
+        kicker: [
+            badge,
+            tag ? textLines(tag).join(" ") : undefined
+        ].filter(Boolean).join(" · ") || undefined,
+        body: bodyLines(bodyEls)
+    };
+}
+function readPinCards({ group, kids, texts, offset }) {
+    const taken = new Set();
+    const out = [];
+    for (const rect of kids){
+        const box = holdsText(rect, texts, offset);
+        const found = box && cardFromRect({
+            group,
+            kids,
+            rect,
+            box,
+            offset,
+            taken
+        });
+        if (!found) continue;
+        for (const part of found.claimed)taken.add(part);
+        out.push(found);
+    }
+    return out;
+}
+function readOneCard({ group, kids, texts, offset }, drawing) {
+    if (texts.length > MAX_CARD_TEXTS || kids.some((k)=>k.tag === "g")) return [];
+    for (const rect of kids){
+        const box = holdsText(rect, texts, offset);
+        if (!box) continue;
+        if (areaOf(box) > areaOf(drawing) * MAX_CARD_AREA) return [];
+        const found = cardFromRect({
+            group,
+            kids,
+            rect,
+            box,
+            offset,
+            taken: new Set()
+        });
+        return found ? [
+            found
+        ] : [];
+    }
+    return [];
+}
+function readCards(group, offset, drawing) {
+    const kids = group.children.filter(isEl);
+    const texts = kids.filter(hasText);
+    if (texts.length === 0) return [];
+    const read = {
+        group,
+        kids,
+        texts,
+        offset
+    };
+    return "data-pins" in group.attrs ? readPinCards(read) : readOneCard(read, drawing);
+}
+export function findCards(el, offset, drawing, out) {
+    for (const child of el.children){
+        if (!isEl(child) || child.tag !== "g") continue;
+        const shift = translateOf(child);
+        if (!shift) continue;
+        const at = plus(offset, shift);
+        const found = readCards(child, at, drawing);
+        if (found.length > 0) out.push(...found);
+        else findCards(child, at, drawing, out);
+    }
+}
+function flatten(container, offset, pins, out) {
+    const kids = container.children.filter(isEl);
+    for (const el of kids){
+        if (el.tag === "g") {
+            const shift = translateOf(el);
+            if (shift) flatten(el, plus(offset, shift), pins || "data-pins" in el.attrs, out);
+            continue;
+        }
+        if (el.tag === "defs" || el.tag === "title" || el.tag === "desc") continue;
+        out.push({
+            el,
+            box: boxOfEl(el, offset),
+            offset,
+            kids,
+            container,
+            pins
+        });
+    }
+}
+function numbersDot(a, center, r) {
+    const at = anchorOf(a.el, a.offset);
+    return textLines(a.el).join(" ").length <= BADGE_MAX_CHARS && Math.hypot(at.x - center.x, at.y - center.y) <= r + 2;
+}
+function findBadges(free, texts) {
+    const parts = new Set();
+    const badges = [];
+    for (const c of free.filter((a)=>a.el.tag === "circle")){
+        const r = num(c.el.attrs.r);
+        if (!c.box || r <= 0 || r > BADGE_MAX_R) continue;
+        const center = centerOf(c.box);
+        const t = texts.find((a)=>!parts.has(a.el) && numbersDot(a, center, r));
+        if (!t) continue;
+        parts.add(c.el);
+        parts.add(t.el);
+        badges.push({
+            circle: c.el,
+            text: t.el,
+            center,
+            r,
+            label: textLines(t.el).join(" ")
+        });
+    }
+    return {
+        badges,
+        parts
+    };
+}
+const isTip = (box)=>box !== null && box.x2 - box.x1 <= ARROWHEAD_MAX && box.y2 - box.y1 <= ARROWHEAD_MAX;
+function isConnector(a, itemBoxes) {
+    if (![
+        "line",
+        "polyline",
+        "path"
+    ].includes(a.el.tag)) return false;
+    if (solid(a.el.attrs.fill)) return isTip(a.box);
+    const ends = strokeEnds(a.el, a.offset);
+    return ends !== null && ends.every((p)=>itemBoxes.some((b)=>contains(b, p, LAND_TOLERANCE)));
+}
+function leafRect(sweep, x, hasWords, out) {
+    if (!hasWords) {
+        out.shapes.push({
+            el: x.el,
+            box: x.box
+        });
+        return;
+    }
+    if (areaOf(x.box) > areaOf(sweep.drawing) * MAX_CARD_AREA) return;
+    const found = cardFromRect({
+        group: x.container,
+        kids: x.kids,
+        rect: x.el,
+        box: x.box,
+        offset: x.offset,
+        taken: sweep.taken
+    });
+    if (!found) return;
+    for (const part of found.claimed)sweep.taken.add(part);
+    out.cards.push(found);
+}
+function classifyRect(sweep, x, dropped, out) {
+    const { box } = x;
+    const inner = sweep.rects.filter((o)=>o !== x && !dropped.has(o) && within(o.box, box, 1) && areaOf(o.box) < areaOf(box));
+    const innerBoxes = [
+        ...inner.map((o)=>o.box),
+        ...sweep.groupCards.filter((c)=>within(c.box, box, 1)).map((c)=>c.box)
+    ];
+    const held = (point)=>innerBoxes.some((b)=>contains(b, point, 3)) ? false : contains(box, point, 3);
+    const own = sweep.words.filter((w)=>held(anchorOf(w.el, w.offset)));
+    if (innerBoxes.length === 0) {
+        leafRect(sweep, x, own.length > 0, out);
+        return;
+    }
+    const stray = sweep.strays.some(({ box: sb })=>sb !== null && within(sb, box, 1) && !innerBoxes.some((b)=>within(sb, b, 1)));
+    if (own.length > 0 || stray) {
+        out.panels.push(box);
+        for (const o of inner)dropped.add(o);
+        return;
+    }
+    if (innerBoxes.length >= 2) out.frames.push({
+        el: x.el,
+        box
+    });
+    else out.shapes.push({
+        el: x.el,
+        box
+    });
+}
+function sweepRects(sweep, out) {
+    const dropped = new Set();
+    for (const x of sweep.rects){
+        if (!dropped.has(x)) classifyRect(sweep, x, dropped, out);
+    }
+}
+export function findLoose(tree, drawing, taken, groupCards) {
+    const atoms = [];
+    flatten(tree, ORIGIN, false, atoms);
+    const free = atoms.filter((a)=>!a.pins && a.box && !taken.has(a.el));
+    const texts = free.filter((a)=>hasText(a.el));
+    const { badges, parts } = findBadges(free, texts);
+    const rects = free.filter((a)=>a.el.tag === "rect" && visible(a.el) && a.box !== null).filter((a)=>a.box.x2 - a.box.x1 >= MIN_SIDE && a.box.y2 - a.box.y1 >= MIN_SIDE).sort((a, b)=>areaOf(b.box) - areaOf(a.box));
+    const itemBoxes = [
+        ...rects.map((a)=>a.box),
+        ...groupCards.map((c)=>c.box)
+    ];
+    const strays = free.filter((a)=>![
+            "rect",
+            "text"
+        ].includes(a.el.tag) && !parts.has(a.el) && !isConnector(a, itemBoxes));
+    const out = {
+        cards: [],
+        shapes: [],
+        frames: [],
+        badges,
+        panels: []
+    };
+    const words = texts.filter((a)=>!parts.has(a.el));
+    sweepRects({
+        rects,
+        words,
+        strays,
+        groupCards,
+        drawing,
+        taken
+    }, out);
+    out.badges = out.badges.filter((b)=>!taken.has(b.circle) && !taken.has(b.text));
+    out.badges = out.badges.filter((b)=>!out.panels.some((p)=>contains(p, b.center, 0)));
+    return out;
+}

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

@@ -0,0 +1,74 @@
+import { boxOfEl, centerOf, isEl, plus, solid, strokeEnds, translateOf } from "./figure-geometry.js";
+import { ARROWHEAD_MAX, findCards, findLoose } from "./break-apart-find.js";
+const ORIGIN = {
+    x: 0,
+    y: 0
+};
+function isTipPath(el) {
+    return el.tag === "path" && /z\s*$/i.test(el.attrs.d ?? "") && solid(el.attrs.fill);
+}
+function headNear(siblings, from, ends, offset) {
+    const next = siblings.slice(from + 1).find(isEl);
+    if (!next || !isTipPath(next)) return null;
+    const box = boxOfEl(next, offset);
+    if (!box || box.x2 - box.x1 > ARROWHEAD_MAX || box.y2 - box.y1 > ARROWHEAD_MAX) return null;
+    const middle = centerOf(box);
+    const d0 = Math.hypot(middle.x - ends[0].x, middle.y - ends[0].y);
+    const d1 = Math.hypot(middle.x - ends[1].x, middle.y - ends[1].y);
+    if (Math.min(d0, d1) > ARROWHEAD_MAX) return null;
+    return {
+        el: next,
+        end: d1 <= d0 ? 1 : 0
+    };
+}
+function isStrokeOnly(el) {
+    if (el.tag !== "path" && el.tag !== "line" && el.tag !== "polyline") return false;
+    return solid(el.attrs.stroke) && !solid(el.attrs.fill);
+}
+function arrowOf(parent, child, index, offset) {
+    if (!isStrokeOnly(child)) return null;
+    const ends = strokeEnds(child, offset);
+    if (!ends) return null;
+    const head = headNear(parent.children, index, ends, offset);
+    const startArrow = Boolean(child.attrs["marker-start"]) || head?.end === 0;
+    const endArrow = Boolean(child.attrs["marker-end"]) || head?.end === 1;
+    return {
+        el: child,
+        head: head?.el,
+        from: ends[0],
+        to: ends[1],
+        startArrow,
+        endArrow
+    };
+}
+function collectArrows(el, offset, out) {
+    el.children.forEach((child, index)=>{
+        if (!isEl(child)) return;
+        if (child.tag !== "g") {
+            const arrow = arrowOf(el, child, index, offset);
+            if (arrow) out.push(arrow);
+            return;
+        }
+        const shift = translateOf(child);
+        if (shift) collectArrows(child, plus(offset, shift), out);
+    });
+}
+export function findPieces(tree, drawing) {
+    const groupCards = [];
+    findCards(tree, ORIGIN, drawing, groupCards);
+    const claimed = new Set();
+    for (const card of groupCards)for (const part of card.claimed)claimed.add(part);
+    const loose = findLoose(tree, drawing, claimed, groupCards);
+    const cards = [
+        ...groupCards,
+        ...loose.cards
+    ];
+    if (cards.length + loose.shapes.length + loose.frames.length === 0) return null;
+    const arrows = [];
+    collectArrows(tree, ORIGIN, arrows);
+    return {
+        cards,
+        loose,
+        arrows
+    };
+}