@avodado/render 0.1.1 → 0.2.0

package/dist/index.js

@@ -2083,13 +2083,20 @@ function renderErd(data) {
       hidden = cols.length - rows.length;
     }
     const bodyRows = rows.length + (hidden > 0 ? 1 : 0);
-    const h = HEAD_H + bodyRows * ROW_H + BOT_PAD;
-    return { name: e.name, rows, hidden, w: COL_W, h };
+    return {
+      name: e.name,
+      cols,
+      rows,
+      hidden,
+      pkIdx: cols.findIndex((c) => c.pk === true),
+      w: COL_W,
+      h: HEAD_H + bodyRows * ROW_H + BOT_PAD
+    };
   });
   const byName = new Map(boxes.map((b) => [b.name, b]));
   const validRels = rels.filter((r) => byName.has(r.from) && byName.has(r.to));
   const g = new To.graphlib.Graph({ multigraph: true });
-  g.setGraph({ rankdir: "LR", nodesep: 34, ranksep: 86, marginx: 18, marginy: 18 });
+  g.setGraph({ rankdir: "LR", nodesep: 38, ranksep: 96, marginx: 18, marginy: 18 });
   g.setDefaultEdgeLabel(() => ({}));
   for (const b of boxes) g.setNode(b.name, { width: b.w, height: b.h });
   validRels.forEach((r, i) => g.setEdge(r.from, r.to, {}, `e${i}`));
@@ -2097,30 +2104,36 @@ function renderErd(data) {
   const graph = g.graph();
   const W2 = Math.ceil(graph.width ?? 0);
   const H2 = Math.ceil(graph.height ?? 0);
-  const topLeft = /* @__PURE__ */ new Map();
+  const at2 = /* @__PURE__ */ new Map();
   for (const b of boxes) {
     const n = g.node(b.name);
-    topLeft.set(b.name, { x: n.x - b.w / 2, y: n.y - b.h / 2 });
+    at2.set(b.name, { x: n.x - b.w / 2, y: n.y - b.h / 2 });
   }
   let s = `<svg viewBox="0 0 ${W2} ${H2}" role="img"><title>Entity-relationship diagram</title>`;
-  validRels.forEach((r, i) => {
-    const e = g.edge(r.from, r.to, `e${i}`);
-    const pts = e?.points;
-    if (!pts || pts.length < 2) return;
-    const first = pts[0];
-    const last = pts[pts.length - 1];
-    const prev = pts[pts.length - 2];
-    if (first === void 0 || last === void 0 || prev === void 0) return;
-    const line = pts.map((p2) => `${round(p2.x)},${round(p2.y)}`).join(" ");
-    s += `<polyline points="${line}" fill="none" stroke="var(--gray)" stroke-width="1.5"/><circle cx="${round(first.x)}" cy="${round(first.y)}" r="2.6" fill="var(--gray)"/>` + arrowHead(prev, last);
-    const mid = r.card !== void 0 ? pts[Math.floor(pts.length / 2)] : void 0;
-    if (r.card !== void 0 && mid !== void 0) {
-      const w2 = 30;
-      s += `<rect x="${round(mid.x - w2 / 2)}" y="${round(mid.y - 9)}" width="${w2}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(mid.x)}" y="${round(mid.y + 3)}" class="edge-label">${escapeHtml(r.card)}</text>`;
+  validRels.forEach((r) => {
+    const src = byName.get(r.from);
+    const tgt = byName.get(r.to);
+    const sp = at2.get(r.from);
+    const tp = at2.get(r.to);
+    if (!src || !tgt || !sp || !tp) return;
+    const fkY = rowAnchorY(src, sp.y, pickFkIndex(src.cols, tgt.name));
+    const pkY = rowAnchorY(tgt, tp.y, tgt.pkIdx);
+    const rightward = tp.x + tgt.w / 2 >= sp.x + src.w / 2;
+    const sx = rightward ? sp.x + src.w : sp.x;
+    const tx = rightward ? tp.x : tp.x + tgt.w;
+    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;
+    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="${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) {
-    const p2 = topLeft.get(b.name);
+    const p2 = at2.get(b.name);
     if (!p2) continue;
     const { x: x2, y } = p2;
     s += `<rect x="${round(x2)}" y="${round(y)}" width="${b.w}" height="${b.h}" rx="5" fill="var(--white)" stroke="var(--navy)"/><path d="M${round(x2)},${round(y + HEAD_H)} v${ -27} a5,5 0 0 1 5,-5 h${b.w - 10} a5,5 0 0 1 5,5 v${HEAD_H - 5} z" fill="var(--navy)"/><text x="${round(x2 + b.w / 2)}" y="${round(y + 21)}" class="er-head-text">${escapeHtml(b.name)}</text>`;
@@ -2152,16 +2165,37 @@ function renderErd(data) {
   };
   return diagramFrame(opts, s);
 }
-function arrowHead(from, to) {
-  const ang = Math.atan2(to.y - from.y, to.x - from.x);
-  const len = 10;
-  const spread = 0.42;
-  const b1x = to.x - len * Math.cos(ang - spread);
-  const b1y = to.y - len * Math.sin(ang - spread);
-  const b2x = to.x - len * Math.cos(ang + spread);
-  const b2y = to.y - len * Math.sin(ang + spread);
-  return `<path d="M${round(b1x)},${round(b1y)} L${round(to.x)},${round(to.y)} L${round(b2x)},${round(b2y)}" fill="none" stroke="var(--navy)" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>`;
+function rowAnchorY(box, topY, idx) {
+  if (idx >= 0 && idx < box.rows.length) return topY + HEAD_H + idx * ROW_H + ROW_H / 2;
+  return topY + box.h / 2;
+}
+function pickFkIndex(columns, toName) {
+  const fks = columns.map((c, i) => ({ c, i })).filter((x2) => x2.c.fk === true);
+  const first = fks[0];
+  if (first === void 0) return -1;
+  const t = toName.toLowerCase();
+  const singular = t.replace(/s$/, "");
+  const match = fks.find((x2) => {
+    const n = x2.c.name.toLowerCase();
+    return n.includes(t) || n.includes(singular);
+  });
+  return (match ?? first).i;
+}
+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;
 
 // src/blocks/kanban.ts
@@ -2698,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") {
@@ -2713,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;
@@ -2805,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;
@@ -2878,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;
@@ -3401,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;
@@ -3501,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;