@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/headless/canvas-cleanup.js

@@ -0,0 +1,70 @@
+const RUNTIME_DATA_FIELDS = new Set([
+    "leftChildCount",
+    "rightChildCount",
+    "locale"
+]);
+function persistentData(source) {
+    const data = {};
+    for (const [key, value] of Object.entries(source ?? {})){
+        if (RUNTIME_DATA_FIELDS.has(key)) continue;
+        if (typeof value === "function" || value === undefined) continue;
+        data[key] = value;
+    }
+    return data;
+}
+export function stripCallbacks(nodes) {
+    return nodes.map((n)=>{
+        const result = {
+            id: n.id,
+            type: n.type,
+            position: n.position,
+            data: persistentData(n.data)
+        };
+        if (n.parentId) result.parentId = n.parentId;
+        if (n.extent) result.extent = n.extent;
+        if (n.style) result.style = n.style;
+        if (typeof n.width === "number") result.width = n.width;
+        if (typeof n.height === "number") result.height = n.height;
+        if (typeof n.zIndex === "number") result.zIndex = n.zIndex;
+        return result;
+    });
+}
+export function removeOrphanedEdges(edges, nodeIds) {
+    return edges.filter((edge)=>nodeIds.has(edge.source) && nodeIds.has(edge.target));
+}
+export function sortParentsFirst(nodes) {
+    const idSet = new Set(nodes.map((n)=>n.id));
+    const roots = [];
+    const childrenOf = new Map();
+    for (const n of nodes){
+        if (!n.parentId || !idSet.has(n.parentId)) {
+            roots.push(n);
+        } else {
+            const siblings = childrenOf.get(n.parentId) ?? [];
+            siblings.push(n);
+            childrenOf.set(n.parentId, siblings);
+        }
+    }
+    const sorted = [];
+    const stack = roots.toReversed();
+    for(let node = stack.pop(); node !== undefined; node = stack.pop()){
+        sorted.push(node);
+        const children = childrenOf.get(node.id);
+        if (children) {
+            for(let i = children.length - 1; i >= 0; i--){
+                stack.push(children[i]);
+            }
+        }
+    }
+    return sorted;
+}
+export function fixBrokenParentIds(nodes) {
+    const nodeIds = new Set(nodes.map((n)=>n.id));
+    return nodes.map((node)=>{
+        if (node.parentId && !nodeIds.has(node.parentId)) {
+            const { parentId: _, extent: __, ...rest } = node;
+            return rest;
+        }
+        return node;
+    });
+}

package/dist/canvas/headless/edge-anchors.js

@@ -0,0 +1,134 @@
+function center(rect) {
+    return {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+    };
+}
+function anchorOn(rect, side) {
+    const c = center(rect);
+    switch(side){
+        case "top":
+            return {
+                x: c.x,
+                y: rect.y,
+                side
+            };
+        case "bottom":
+            return {
+                x: c.x,
+                y: rect.y + rect.height,
+                side
+            };
+        case "left":
+            return {
+                x: rect.x,
+                y: c.y,
+                side
+            };
+        case "right":
+            return {
+                x: rect.x + rect.width,
+                y: c.y,
+                side
+            };
+    }
+}
+export function sideFromHandle(id) {
+    return id === "top" || id === "right" || id === "bottom" || id === "left" ? id : null;
+}
+function sideFacing(rect, point) {
+    const c = center(rect);
+    const dx = (point.x - c.x) / rect.width;
+    const dy = (point.y - c.y) / rect.height;
+    if (Math.abs(dx) > Math.abs(dy)) return dx >= 0 ? "right" : "left";
+    return dy >= 0 ? "bottom" : "top";
+}
+function pinnedAnchors(source, target, pins) {
+    if (pins.source && pins.target) {
+        return {
+            source: anchorOn(source, pins.source),
+            target: anchorOn(target, pins.target)
+        };
+    }
+    if (pins.source) {
+        const from = anchorOn(source, pins.source);
+        return {
+            source: from,
+            target: anchorOn(target, sideFacing(target, from))
+        };
+    }
+    if (pins.target) {
+        const to = anchorOn(target, pins.target);
+        return {
+            source: anchorOn(source, sideFacing(source, to)),
+            target: to
+        };
+    }
+    return null;
+}
+export function bestAnchors(source, target, pins = {}) {
+    const pinned = pinnedAnchors(source, target, pins);
+    if (pinned) return pinned;
+    const gapX = Math.max(target.x - (source.x + source.width), source.x - (target.x + target.width));
+    const gapY = Math.max(target.y - (source.y + source.height), source.y - (target.y + target.height));
+    if (gapX <= 0 && gapY <= 0) {
+        const side = detourSide(source, target);
+        return {
+            source: anchorOn(source, side),
+            target: anchorOn(target, side)
+        };
+    }
+    if (gapX > gapY) {
+        const targetIsRight = center(target).x >= center(source).x;
+        return {
+            source: anchorOn(source, targetIsRight ? "right" : "left"),
+            target: anchorOn(target, targetIsRight ? "left" : "right")
+        };
+    }
+    const targetIsBelow = center(target).y >= center(source).y;
+    return {
+        source: anchorOn(source, targetIsBelow ? "bottom" : "top"),
+        target: anchorOn(target, targetIsBelow ? "top" : "bottom")
+    };
+}
+function detourSide(source, target) {
+    const sL = source.x;
+    const sR = source.x + source.width;
+    const tL = target.x;
+    const tR = target.x + target.width;
+    if (sL <= tL && sR >= tR) {
+        return sR - tR >= tL - sL ? "right" : "left";
+    }
+    if (tL <= sL && tR >= sR) {
+        return tR - sR >= sL - tL ? "right" : "left";
+    }
+    return "right";
+}
+export function sideDetour(anchors, margin = 40) {
+    const { source, target } = anchors;
+    switch(source.side){
+        case "left":
+            return Math.min(source.x, target.x) - margin;
+        case "right":
+            return Math.max(source.x, target.x) + margin;
+        case "top":
+            return Math.min(source.y, target.y) - margin;
+        case "bottom":
+            return Math.max(source.y, target.y) + margin;
+    }
+}
+export function outlinePoint(o, toward, gap = 0) {
+    const dx = toward.x - o.cx;
+    const dy = toward.y - o.cy;
+    const len = Math.hypot(dx, dy);
+    if (len === 0) return {
+        x: o.cx,
+        y: o.cy
+    };
+    const t = o.round ? 1 / Math.hypot(dx / o.rx, dy / o.ry) : Math.min(dx === 0 ? Infinity : o.rx / Math.abs(dx), dy === 0 ? Infinity : o.ry / Math.abs(dy));
+    const reach = t * len + gap;
+    return {
+        x: o.cx + dx / len * reach,
+        y: o.cy + dy / len * reach
+    };
+}

package/dist/canvas/headless/edge-memo.js

@@ -0,0 +1,28 @@
+export function boxKey(rect) {
+    return rect ? `${rect.x},${rect.y},${rect.width},${rect.height}` : "";
+}
+export function parseBox(key) {
+    if (!key) return null;
+    const [x, y, width, height] = key.split(",").map(Number);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+export function createMemo(limit) {
+    const seen = new Map();
+    return (key, compute)=>{
+        const hit = seen.get(key);
+        if (hit !== undefined) {
+            seen.delete(key);
+            seen.set(key, hit);
+            return hit;
+        }
+        const value = compute();
+        seen.set(key, value);
+        if (seen.size > limit) seen.delete(seen.keys().next().value);
+        return value;
+    };
+}

package/dist/canvas/headless/edge-serialization.js

@@ -0,0 +1,31 @@
+export function serializeFlowEdge(edge) {
+    return {
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        ...edge.type && {
+            type: edge.type
+        },
+        ...edge.label && {
+            label: edge.label
+        },
+        ...edge.animated && {
+            animated: edge.animated
+        },
+        ...edge.sourceHandle && {
+            sourceHandle: edge.sourceHandle
+        },
+        ...edge.targetHandle && {
+            targetHandle: edge.targetHandle
+        },
+        ...edge.style && {
+            style: edge.style
+        },
+        ...edge.data && {
+            data: edge.data
+        }
+    };
+}
+export function serializeFlowEdges(edges) {
+    return edges.map(serializeFlowEdge);
+}

package/dist/canvas/headless/figure-geometry.js

@@ -0,0 +1,331 @@
+const FALLBACK_FONT = 16;
+const ORIGIN = {
+    x: 0,
+    y: 0
+};
+export function isEl(child) {
+    return typeof child !== "string";
+}
+export function num(value, fallback = 0) {
+    const parsed = Number.parseFloat(value ?? "");
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+export function solid(value) {
+    return Boolean(value) && value !== "none";
+}
+export function plus(a, b) {
+    return {
+        x: a.x + b.x,
+        y: a.y + b.y
+    };
+}
+export function translateOf(el) {
+    const raw = el.attrs.transform?.trim();
+    if (!raw) return {
+        x: 0,
+        y: 0
+    };
+    const match = raw.match(/^translate\(\s*(-?[\d.]+)[\s,]*(-?[\d.]+)?\s*\)$/);
+    return match ? {
+        x: Number(match[1]),
+        y: Number(match[2] ?? 0)
+    } : null;
+}
+export function union(a, b) {
+    if (!a) return b;
+    if (!b) return a;
+    return {
+        x1: Math.min(a.x1, b.x1),
+        y1: Math.min(a.y1, b.y1),
+        x2: Math.max(a.x2, b.x2),
+        y2: Math.max(a.y2, b.y2)
+    };
+}
+export function boxOf(points) {
+    if (points.length === 0) return null;
+    return {
+        x1: Math.min(...points.map((p)=>p.x)),
+        y1: Math.min(...points.map((p)=>p.y)),
+        x2: Math.max(...points.map((p)=>p.x)),
+        y2: Math.max(...points.map((p)=>p.y))
+    };
+}
+export function within(inner, outer, tolerance = 1) {
+    return inner.x1 >= outer.x1 - tolerance && inner.y1 >= outer.y1 - tolerance && inner.x2 <= outer.x2 + tolerance && inner.y2 <= outer.y2 + tolerance;
+}
+export function contains(box, point, tolerance) {
+    return point.x >= box.x1 - tolerance && point.x <= box.x2 + tolerance && point.y >= box.y1 - tolerance && point.y <= box.y2 + tolerance;
+}
+export const areaOf = (b)=>(b.x2 - b.x1) * (b.y2 - b.y1);
+export const centerOf = (b)=>({
+        x: (b.x1 + b.x2) / 2,
+        y: (b.y1 + b.y2) / 2
+    });
+export function distanceToBox(box, p) {
+    return Math.hypot(Math.max(box.x1 - p.x, 0, p.x - box.x2), Math.max(box.y1 - p.y, 0, p.y - box.y2));
+}
+export function distanceToSegment(a, b, p) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const len = dx * dx + dy * dy;
+    const t = len === 0 ? 0 : Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len));
+    return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+const PATH_ARITY = {
+    M: 2,
+    L: 2,
+    H: 1,
+    V: 1,
+    C: 6,
+    S: 4,
+    Q: 4,
+    T: 2,
+    A: 7,
+    Z: 0
+};
+function pathEnd(upper, rel, args, cur) {
+    const at = (from, value)=>rel ? from + value : value;
+    if (upper === "H") return {
+        x: at(cur.x, args[0]),
+        y: cur.y
+    };
+    if (upper === "V") return {
+        x: cur.x,
+        y: at(cur.y, args[0])
+    };
+    return {
+        x: at(cur.x, args[args.length - 2]),
+        y: at(cur.y, args[args.length - 1])
+    };
+}
+export function pathPoints(d) {
+    const out = [];
+    let cur = {
+        x: 0,
+        y: 0
+    };
+    let start = {
+        x: 0,
+        y: 0
+    };
+    for (const part of d.matchAll(/([a-zA-Z])([^a-zA-Z]*)/g)){
+        const cmd = part[1];
+        const upper = cmd.toUpperCase();
+        const size = PATH_ARITY[upper];
+        if (size === undefined) continue;
+        const nums = (part[2].match(/-?(?:\d+\.?\d*|\.\d+)(?:e-?\d+)?/gi) ?? []).map(Number);
+        if (upper === "Z") {
+            cur = start;
+            out.push(cur);
+            continue;
+        }
+        for(let i = 0; i + size <= nums.length; i += size){
+            cur = pathEnd(upper, cmd !== upper, nums.slice(i, i + size), cur);
+            if (upper === "M" && i === 0) start = cur;
+            out.push(cur);
+        }
+    }
+    return out;
+}
+export function pointList(raw) {
+    const nums = (raw ?? "").match(/-?(?:\d+\.?\d*|\.\d+)/g)?.map(Number) ?? [];
+    const out = [];
+    for(let i = 0; i + 1 < nums.length; i += 2)out.push({
+        x: nums[i],
+        y: nums[i + 1]
+    });
+    return out;
+}
+export function textLines(el) {
+    const lines = [];
+    let line = "";
+    const flush = ()=>{
+        const clean = line.replace(/\s+/g, " ").trim();
+        if (clean) lines.push(clean);
+        line = "";
+    };
+    for (const child of el.children){
+        if (typeof child === "string") line += child;
+        else if (child.tag === "tspan") {
+            if ("dy" in child.attrs || "y" in child.attrs) flush();
+            line += child.children.map((c)=>typeof c === "string" ? c : "").join("");
+        }
+    }
+    flush();
+    return lines;
+}
+export function isBold(el) {
+    const weight = el.attrs["font-weight"];
+    return num(weight) >= 600 || weight === "bold";
+}
+export function fontSize(el) {
+    return num(el.attrs["font-size"], FALLBACK_FONT);
+}
+function rectBox({ attrs: a }) {
+    return {
+        x1: num(a.x),
+        y1: num(a.y),
+        x2: num(a.x) + num(a.width),
+        y2: num(a.y) + num(a.height)
+    };
+}
+function ellipseBox({ attrs: a }) {
+    const rx = num(a.rx, num(a.r));
+    const ry = num(a.ry, num(a.r));
+    return {
+        x1: num(a.cx) - rx,
+        y1: num(a.cy) - ry,
+        x2: num(a.cx) + rx,
+        y2: num(a.cy) + ry
+    };
+}
+function lineBox({ attrs: a }) {
+    return boxOf([
+        {
+            x: num(a.x1),
+            y: num(a.y1)
+        },
+        {
+            x: num(a.x2),
+            y: num(a.y2)
+        }
+    ]);
+}
+function polyBox({ attrs: a }) {
+    return boxOf(pointList(a.points));
+}
+function pathBox({ attrs: a }) {
+    return boxOf(pathPoints(a.d ?? ""));
+}
+function textLeft(x, width, anchor) {
+    if (anchor === "middle") return x - width / 2;
+    return anchor === "end" ? x - width : x;
+}
+function textBox(el) {
+    const lines = textLines(el);
+    const size = fontSize(el);
+    const width = Math.max(0, ...lines.map((l)=>l.length)) * size * (isBold(el) ? 0.6 : 0.55);
+    const left = textLeft(num(el.attrs.x), width, el.attrs["text-anchor"]);
+    const y = num(el.attrs.y);
+    return {
+        x1: left,
+        y1: y - size * 0.8,
+        x2: left + width,
+        y2: y + size * 0.2 + Math.max(0, lines.length - 1) * size * 1.2
+    };
+}
+function groupBox(el) {
+    let box = null;
+    for (const child of el.children){
+        if (isEl(child)) box = union(box, boxOfEl(child, ORIGIN));
+    }
+    return box;
+}
+const MEASURE = new Map([
+    [
+        "rect",
+        rectBox
+    ],
+    [
+        "circle",
+        ellipseBox
+    ],
+    [
+        "ellipse",
+        ellipseBox
+    ],
+    [
+        "line",
+        lineBox
+    ],
+    [
+        "polyline",
+        polyBox
+    ],
+    [
+        "polygon",
+        polyBox
+    ],
+    [
+        "path",
+        pathBox
+    ],
+    [
+        "text",
+        textBox
+    ],
+    [
+        "g",
+        groupBox
+    ],
+    [
+        "svg",
+        groupBox
+    ]
+]);
+export function boxOfEl(el, offset) {
+    const box = MEASURE.get(el.tag)?.(el);
+    if (!box) return null;
+    const at = plus(offset, translateOf(el) ?? ORIGIN);
+    return {
+        x1: box.x1 + at.x,
+        y1: box.y1 + at.y,
+        x2: box.x2 + at.x,
+        y2: box.y2 + at.y
+    };
+}
+export function visible(el) {
+    const fill = el.attrs.fill;
+    const stroke = el.attrs.stroke;
+    return fill !== undefined && fill !== "none" || stroke !== undefined && stroke !== "none";
+}
+export function viewBoxOf(root) {
+    const raw = root.attrs.viewBox ?? root.attrs.viewbox;
+    if (raw) {
+        const [x, y, w, h] = raw.trim().split(/[\s,]+/).map(Number);
+        if (w > 0 && h > 0) return {
+            x1: x,
+            y1: y,
+            x2: x + w,
+            y2: y + h
+        };
+    }
+    const w = num(root.attrs.width);
+    const h = num(root.attrs.height);
+    return w > 0 && h > 0 ? {
+        x1: 0,
+        y1: 0,
+        x2: w,
+        y2: h
+    } : null;
+}
+export function hasText(el) {
+    return el.tag === "text" && textLines(el).length > 0;
+}
+export function strokeEnds(el, offset) {
+    const shift = translateOf(el);
+    if (!shift) return null;
+    const a = el.attrs;
+    let pts = [];
+    if (el.tag === "line") {
+        pts = [
+            {
+                x: num(a.x1),
+                y: num(a.y1)
+            },
+            {
+                x: num(a.x2),
+                y: num(a.y2)
+            }
+        ];
+    } else if (el.tag === "polyline") pts = pointList(a.points);
+    else if (el.tag === "path") pts = pathPoints(a.d ?? "");
+    if (pts.length < 2) return null;
+    const at = plus(offset, shift);
+    const first = pts[0];
+    const last = pts[pts.length - 1];
+    return [
+        plus(first, at),
+        plus(last, at)
+    ];
+}

package/dist/canvas/headless/fit-viewport.js

@@ -0,0 +1,82 @@
+const FALLBACK_NODE = {
+    width: 240,
+    height: 80
+};
+function num(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function cssDim(css, prop) {
+    const found = css.match(new RegExp(`(?:^|[;\\s])${prop}:\\s*(\\d+(?:\\.\\d+)?)px`))?.[1];
+    return found ? Number(found) : null;
+}
+function styleDim(style, prop) {
+    if (typeof style === "string") return cssDim(style, prop);
+    if (!style || typeof style !== "object") return null;
+    return num(style[prop]);
+}
+function readSize(node) {
+    return {
+        width: num(node.width) ?? styleDim(node.style, "width") ?? FALLBACK_NODE.width,
+        height: num(node.height) ?? styleDim(node.style, "height") ?? FALLBACK_NODE.height
+    };
+}
+export function diagramBounds(nodes) {
+    const boxes = nodes.filter((node)=>!node.parentId).map((node)=>({
+            ...readSize(node),
+            x: node.position.x,
+            y: node.position.y
+        }));
+    if (boxes.length === 0) return null;
+    const minX = Math.min(...boxes.map((box)=>box.x));
+    const minY = Math.min(...boxes.map((box)=>box.y));
+    const maxX = Math.max(...boxes.map((box)=>box.x + box.width));
+    const maxY = Math.max(...boxes.map((box)=>box.y + box.height));
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+    };
+}
+export function fitViewport(nodes, container, padding = 0.04) {
+    const bounds = diagramBounds(nodes);
+    if (!bounds || bounds.width <= 0 || bounds.height <= 0) return null;
+    if (container.width <= 0 || container.height <= 0) return null;
+    const usableWidth = container.width * (1 - padding * 2);
+    const usableHeight = container.height * (1 - padding * 2);
+    const zoom = Math.min(usableWidth / bounds.width, usableHeight / bounds.height);
+    return {
+        x: (container.width - bounds.width * zoom) / 2 - bounds.x * zoom,
+        y: (container.height - bounds.height * zoom) / 2 - bounds.y * zoom,
+        zoom
+    };
+}
+const MIN_READABLE_ZOOM = 0.3;
+export function openingViewport(nodes, container, padding = 0.04, gutter = 0) {
+    const whole = fitViewport(nodes, container, padding);
+    if (!whole || whole.zoom >= MIN_READABLE_ZOOM) return whole;
+    const bounds = diagramBounds(nodes);
+    if (!bounds) return null;
+    const inset = container.width * padding;
+    const left = inset + gutter;
+    const zoom = Math.min((container.width - left - inset) / bounds.width, 1);
+    return {
+        x: left - bounds.x * zoom,
+        y: inset - bounds.y * zoom,
+        zoom
+    };
+}
+export function viewShowsContent(nodes, viewport, container, inset = {
+    left: 0
+}) {
+    const bounds = diagramBounds(nodes);
+    if (!bounds || viewport.zoom <= 0) return true;
+    const left = (inset.left - viewport.x) / viewport.zoom;
+    const right = (container.width - viewport.x) / viewport.zoom;
+    const top = -viewport.y / viewport.zoom;
+    const bottom = (container.height - viewport.y) / viewport.zoom;
+    const onScreen = bounds.x < right && bounds.x + bounds.width > left && bounds.y < bottom && bounds.y + bounds.height > top;
+    if (!onScreen) return false;
+    const fits = bounds.width * viewport.zoom <= container.width - inset.left;
+    return !(fits && bounds.x < left - 4 / viewport.zoom);
+}