@avodado/render 0.1.1 → 0.1.2

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,35 @@ 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) {
+  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;
+    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;
-      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>`;
+      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>`;
     }
   });
   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 +2164,27 @@ 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 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"/>`;
 }
+var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 var round = (n) => Math.round(n * 10) / 10;
 
 // src/blocks/kanban.ts