@avodado/render 0.1.2 → 0.2.0

package/dist/index.js

@@ -2124,11 +2124,12 @@ function renderErd(data) {
     const lo = Math.min(sx, tx) + 10;
     const hi = Math.max(sx, tx) - 10;
     const midX = hi > lo ? clamp((sx + tx) / 2, lo, hi) : (sx + tx) / 2;
-    s += `<path d="M${round(sx)},${round(fkY)} H${round(midX)} V${round(pkY)} H${round(tx)}" fill="none" stroke="var(--gray)" stroke-width="1.5"/><circle cx="${round(sx)}" cy="${round(fkY)}" r="2.6" fill="var(--gray)"/>` + arrowHeadH(tx, pkY, rightward);
-    if (r.card !== void 0) {
-      const w2 = 30;
+    const card = parseCard(r.card);
+    s += `<path d="M${round(sx)},${round(fkY)} H${round(midX)} V${round(pkY)} H${round(tx)}" fill="none" stroke="var(--gray)" stroke-width="1.5"/>` + crowFoot(sx, fkY, rightward ? 1 : -1, card.fromMany) + crowFoot(tx, pkY, rightward ? -1 : 1, card.toMany);
+    if (r.label !== void 0 && r.label !== "") {
+      const w2 = Math.max(30, r.label.length * 6.4);
       const cy = (fkY + pkY) / 2;
-      s += `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${w2}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.card)}</text>`;
+      s += `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${round(w2)}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.label)}</text>`;
     }
   });
   for (const b of boxes) {
@@ -2180,9 +2181,19 @@ function pickFkIndex(columns, toName) {
   });
   return (match ?? first).i;
 }
-function arrowHeadH(x2, y, pointRight) {
-  const dx = pointRight ? -10 : 10;
-  return `<path d="M${round(x2 + dx)},${round(y - 5)} L${round(x2)},${round(y)} L${round(x2 + dx)},${round(y + 5)}" fill="none" stroke="var(--navy)" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>`;
+function parseCard(card) {
+  if (card === void 0) return { fromMany: true, toMany: false };
+  const parts = card.split(":");
+  const many = (p2) => p2 !== void 0 && p2.trim().toUpperCase() !== "1";
+  return { fromMany: many(parts[0]), toMany: many(parts[1]) };
+}
+function crowFoot(bx, y, outward, many) {
+  if (many) {
+    const ax = bx + outward * 14;
+    return `<path d="M${round(ax)},${round(y)} L${round(bx)},${round(y - 7)} M${round(ax)},${round(y)} L${round(bx)},${round(y)} M${round(ax)},${round(y)} L${round(bx)},${round(y + 7)}" fill="none" stroke="var(--navy)" stroke-width="1.4" stroke-linecap="round"/>`;
+  }
+  const tx = bx + outward * 9;
+  return `<line x1="${round(tx)}" y1="${round(y - 6)}" x2="${round(tx)}" y2="${round(y + 6)}" stroke="var(--navy)" stroke-width="1.4" stroke-linecap="round"/>`;
 }
 var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 var round = (n) => Math.round(n * 10) / 10;
@@ -2721,6 +2732,51 @@ function edgePill(p2, label, err = false) {
   return `<g><rect x="${p2.lx - w2 / 2}" y="${p2.ly - 9}" width="${w2}" height="18" rx="9" fill="#fff" stroke="#d1d5db"/><text x="${p2.lx}" y="${p2.ly + 3}" class="edge-label${errClass}">${escapeHtml(label)}</text></g>`;
 }
 
+// src/blocks/autoLayout.ts
+function ensureGrid(items, edges, rankdir) {
+  const allPlaced = items.length > 0 && items.every((n) => n.col !== void 0 && n.row !== void 0);
+  if (allPlaced) {
+    return items.map((n) => ({ ...n, col: n.col, row: n.row }));
+  }
+  const grid = autoGrid(
+    items.map((n) => n.id),
+    edges,
+    rankdir
+  );
+  return items.map((n) => {
+    const g = grid.get(n.id) ?? { col: 1, row: 1 };
+    return { ...n, col: g.col, row: g.row };
+  });
+}
+function autoGrid(ids, edges, rankdir) {
+  const idSet = new Set(ids);
+  const g = new To.graphlib.Graph();
+  g.setGraph({ rankdir, nodesep: 16, ranksep: 16, marginx: 0, marginy: 0 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const id of ids) g.setNode(id, { width: 10, height: 10 });
+  for (const e of edges) {
+    if (e.from !== e.to && idSet.has(e.from) && idSet.has(e.to)) g.setEdge(e.from, e.to);
+  }
+  To.layout(g);
+  const pos = ids.map((id) => {
+    const n = g.node(id);
+    return { id, x: Math.round(n?.x ?? 0), y: Math.round(n?.y ?? 0) };
+  });
+  const out = /* @__PURE__ */ new Map();
+  if (rankdir === "TB") {
+    const ranks = [...new Set(pos.map((p2) => p2.y))].sort((a, b) => a - b);
+    ranks.forEach((yv, ri) => {
+      pos.filter((p2) => p2.y === yv).sort((a, b) => a.x - b.x).forEach((p2, ci) => out.set(p2.id, { col: ci + 1, row: ri + 1 }));
+    });
+  } else {
+    const ranks = [...new Set(pos.map((p2) => p2.x))].sort((a, b) => a - b);
+    ranks.forEach((xv, ci) => {
+      pos.filter((p2) => p2.x === xv).sort((a, b) => a.y - b.y).forEach((p2, ri) => out.set(p2.id, { col: ci + 1, row: ri + 1 }));
+    });
+  }
+  return out;
+}
+
 // src/blocks/flow.ts
 function flowStyle(kind) {
   switch (kind ?? "process") {
@@ -2736,8 +2792,8 @@ function flowStyle(kind) {
 }
 var ERR_LABEL_RE = /^(no|fail|error|reject)/i;
 function renderFlowSvg(data) {
-  const nodes = data.nodes ?? [];
   const edges = data.edges ?? [];
+  const nodes = ensureGrid(data.nodes ?? [], edges, "TB");
   const cellW = 176;
   const cellH = 70;
   const gapX = 60;
@@ -2828,8 +2884,8 @@ function pillCls(kind) {
   return "pill pill-active";
 }
 function renderState(data) {
-  const states = data.states ?? [];
   const trans = data.transitions ?? [];
+  const states = ensureGrid(data.states ?? [], trans, "LR");
   const cellW = 168;
   const cellH = 64;
   const gapX = 74;
@@ -2901,8 +2957,8 @@ function dfdStyle(kind) {
   }
 }
 function renderDfd(data) {
-  const nodes = data.nodes ?? [];
   const edges = data.edges ?? [];
+  const nodes = ensureGrid(data.nodes ?? [], edges, "LR");
   const cellW = 168;
   const cellH = 76;
   const gapX = 60;
@@ -3424,8 +3480,8 @@ var LEGEND = [
   { sw: "#f3f4f6", label: "External" }
 ];
 function renderC4(data) {
-  const nodes = data.nodes ?? [];
   const edges = data.edges ?? [];
+  const nodes = ensureGrid(data.nodes ?? [], edges, "TB");
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const cellW = 212;
   const cellH = 102;
@@ -3524,8 +3580,8 @@ function umlRel(kind) {
   }
 }
 function renderUml(data) {
-  const classes = data.classes ?? [];
   const rels = data.rels ?? [];
+  const classes = ensureGrid(data.classes ?? [], rels, "TB");
   const colW = 204;
   const gapX = 64;
   const gapY = 50;