@avodado/render 0.2.2 → 0.2.3

package/dist/index.js

@@ -3374,6 +3374,28 @@ function rectRoundRight(x2, y, w2, h, r) {
   const rr2 = Math.min(r, w2 / 2, h / 2);
   return `M${x2},${y} h${w2 - rr2} a${rr2},${rr2} 0 0 1 ${rr2},${rr2} v${h - 2 * rr2} a${rr2},${rr2} 0 0 1 ${-rr2},${rr2} h${-(w2 - rr2)} z`;
 }
+function roundedPath(pts, r = 7) {
+  const round2 = (n) => Math.round(n * 10) / 10;
+  const first = pts[0];
+  if (first === void 0) return "";
+  let d = `M${round2(first.x)},${round2(first.y)}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const p2 = pts[i];
+    const a = pts[i - 1];
+    const b = pts[i + 1];
+    if (p2 === void 0 || a === void 0 || b === void 0) continue;
+    const d1 = Math.hypot(p2.x - a.x, p2.y - a.y) || 1;
+    const d2 = Math.hypot(b.x - p2.x, b.y - p2.y) || 1;
+    const r1 = Math.min(r, d1 / 2);
+    const r2 = Math.min(r, d2 / 2);
+    const p1 = { x: p2.x + (a.x - p2.x) / d1 * r1, y: p2.y + (a.y - p2.y) / d1 * r1 };
+    const p22 = { x: p2.x + (b.x - p2.x) / d2 * r2, y: p2.y + (b.y - p2.y) / d2 * r2 };
+    d += ` L${round2(p1.x)},${round2(p1.y)} Q${round2(p2.x)},${round2(p2.y)} ${round2(p22.x)},${round2(p22.y)}`;
+  }
+  const last = pts[pts.length - 1];
+  if (last !== void 0) d += ` L${round2(last.x)},${round2(last.y)}`;
+  return d;
+}
 
 // src/blocks/c4.ts
 function c4Style(n) {
@@ -3600,55 +3622,48 @@ function umlRel(kind) {
   }
 }
 function renderUml(data) {
+  const classes = data.classes ?? [];
   const rels = data.rels ?? [];
-  const classes = ensureGrid(data.classes ?? [], rels, "TB");
-  const colW = 150;
-  const gapX = 76;
-  const gapY = 58;
-  const padX = 24;
-  const padTop = 28;
-  const padBot = 20;
+  const colW = 152;
   const rowH = 14;
   const headH = (c) => 22 + (c.stereotype !== void 0 ? 10 : 0);
   const compH = (list) => (list !== void 0 && list.length > 0 ? list.length * rowH : 6) + 8;
   const clsH = (c) => headH(c) + compH(c.attrs) + compH(c.methods);
-  const cols = Math.max(1, ...classes.map((c) => c.col));
-  const rows = Math.max(1, ...classes.map((c) => c.row));
-  const bandH = /* @__PURE__ */ new Map();
-  const bandTop = /* @__PURE__ */ new Map();
-  let acc = padTop;
-  for (let r = 1; r <= rows; r++) {
-    const hs = classes.filter((c) => c.row === r).map(clsH);
-    const h = hs.length > 0 ? Math.max(...hs) : 60;
-    bandH.set(r, h);
-    bandTop.set(r, acc);
-    acc += h + gapY;
-  }
-  const xOf = (c) => padX + (c - 1) * (colW + gapX);
-  const rectFor2 = (c) => ({
-    x: xOf(c.col),
-    y: bandTop.get(c.row) ?? padTop,
-    w: colW,
-    h: clsH(c)
-  });
   const byId = new Map(classes.map((c) => [c.id, c]));
-  const width = padX * 2 + cols * colW + (cols - 1) * gapX;
-  const height = acc - gapY + padBot;
-  let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>UML class diagram</title><defs><marker id="umlTri" viewBox="0 0 14 14" refX="13" refY="7" markerWidth="15" markerHeight="15" orient="auto-start-reverse"><path d="M1,1 L13,7 L1,13 z" fill="#fff" stroke="#1a1a2e" stroke-width="1.2"/></marker><marker id="umlDiaF" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="#1a1a2e"/></marker><marker id="umlDiaH" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="#fff" stroke="#1a1a2e" stroke-width="1.2"/></marker><marker id="umlOpen" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" fill="none" stroke="#1a1a2e" stroke-width="1.3"/></marker></defs>`;
+  const validRels = rels.filter((rl) => byId.has(rl.from) && byId.has(rl.to));
+  const g = new To.graphlib.Graph({ multigraph: true });
+  g.setGraph({ rankdir: "TB", nodesep: 46, ranksep: 58, marginx: 20, marginy: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const c of classes) g.setNode(c.id, { width: colW, height: clsH(c) });
+  validRels.forEach((rl, i) => g.setEdge(rl.from, rl.to, {}, `e${i}`));
+  To.layout(g);
+  const graph = g.graph();
+  const width = Math.ceil(graph.width ?? 0);
+  const height = Math.ceil(graph.height ?? 0);
+  const at2 = /* @__PURE__ */ new Map();
+  for (const c of classes) {
+    const n = g.node(c.id);
+    if (n !== void 0) at2.set(c.id, { x: n.x - colW / 2, y: n.y - clsH(c) / 2 });
+  }
+  let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>UML class diagram</title><defs><marker id="umlTri" viewBox="0 0 14 14" refX="13" refY="7" markerWidth="15" markerHeight="15" orient="auto-start-reverse"><path d="M1,1 L13,7 L1,13 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlDiaF" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--charcoal)"/></marker><marker id="umlDiaH" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="var(--white)" stroke="var(--charcoal)" stroke-width="1.2"/></marker><marker id="umlOpen" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" fill="none" stroke="var(--charcoal)" stroke-width="1.3"/></marker></defs>`;
   const labels = [];
-  for (const rl of rels) {
-    const A2 = byId.get(rl.from);
-    const B2 = byId.get(rl.to);
-    if (!A2 || !B2) continue;
-    const p2 = ortho(rectFor2(A2), rectFor2(B2));
+  validRels.forEach((rl, i) => {
+    const e = g.edge(rl.from, rl.to, `e${i}`);
+    const pts = e?.points;
+    if (pts === void 0 || pts.length < 2) return;
     const st2 = umlRel(rl.kind);
     const start = st2.start !== void 0 ? ` marker-start="url(#${st2.start})"` : "";
     const end = st2.end !== void 0 ? ` marker-end="url(#${st2.end})"` : "";
-    s += `<path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.3" stroke-dasharray="${st2.dash}"${start}${end}/>`;
-    labels.push(edgePill(p2, rl.label));
-  }
+    s += `<path d="${roundedPath(pts, 9)}" fill="none" stroke="var(--charcoal)" stroke-width="1.3" stroke-dasharray="${st2.dash}"${start}${end}/>`;
+    if (rl.label !== void 0 && rl.label !== "") {
+      const mid = pts[Math.floor(pts.length / 2)];
+      if (mid !== void 0) labels.push(edgePill({ lx: mid.x, ly: mid.y }, rl.label));
+    }
+  });
   for (const c of classes) {
-    const r = rectFor2(c);
+    const p2 = at2.get(c.id);
+    if (p2 === void 0) continue;
+    const r = { x: p2.x, y: p2.y, w: colW, h: clsH(c) };
     const hh = headH(c);
     const aH = compH(c.attrs);
     const nameY = r.y + (c.stereotype !== void 0 ? 24 : 19);
@@ -4047,11 +4062,14 @@ function renderGrid(data) {
   for (const n of nodes) {
     const r = rectFor2(n);
     const st2 = blockStyle(n.kind);
-    const gl = nodeGlyph(n.kind, r.x + 16, r.y + 16, st2.accent);
-    const nx = gl.length > 0 ? r.x + 42 : r.x + 16;
-    const chip = gl.length === 0 && n.kind !== void 0 ? `<text x="${r.x + 16}" y="${r.y + 22}" class="blk-chip" fill="${st2.accent}">${escapeHtml(n.kind)}</text>` : "";
-    const tech = n.tech !== void 0 ? `<text x="${nx}" y="${r.y + (gl.length > 0 ? 50 : 60)}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "";
-    s += `<g filter="url(#gshadow)"><path d="${rectRoundRight(r.x, r.y, r.w, r.h, 9)}" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" fill="${st2.accent}"/>` + gl + chip + `<text x="${nx}" y="${r.y + (gl.length > 0 ? 34 : 44)}" class="blk-name" fill="${st2.text}">${escapeHtml(n.name)}</text>` + tech + `</g>`;
+    const badge = 38;
+    const bx = r.x + 13;
+    const by = r.y + (r.h - badge) / 2;
+    const glyph = nodeGlyph(n.kind, bx + 11, by + 11, "var(--white)");
+    const badgeInner = glyph.length > 0 ? glyph : `<text x="${bx + badge / 2}" y="${by + badge / 2 + 5}" text-anchor="middle" font-family="var(--font-display)" font-size="16" font-weight="700" fill="var(--white)">${escapeHtml((n.name ?? "?").slice(0, 1).toUpperCase())}</text>`;
+    const tx = bx + badge + 13;
+    const hasTech = n.tech !== void 0;
+    s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="12" fill="var(--white)" stroke="var(--rule)" stroke-width="1"/><rect x="${bx}" y="${by}" width="${badge}" height="${badge}" rx="10" fill="${st2.accent}"/>` + badgeInner + `<text x="${tx}" y="${r.y + r.h / 2 + (hasTech ? -3 : 5)}" class="blk-name" fill="var(--charcoal)">${escapeHtml(n.name)}</text>` + (hasTech ? `<text x="${tx}" y="${r.y + r.h / 2 + 14}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "") + `</g>`;
   }
   s += labels.join("");
   s += `</svg>`;