@avodado/render 0.2.2 → 0.2.4

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="11" markerHeight="11" 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="13" markerHeight="8" 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="13" markerHeight="8" 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="10" markerHeight="10" 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);
@@ -4013,10 +4028,10 @@ function renderGrid(data) {
     h: cellH
   });
   const groupRect = (g) => ({
-    x: xOf(g.col) - 16,
-    y: yOf(g.row) - 22,
-    w: (g.cols ?? 1) * cellW + ((g.cols ?? 1) - 1) * gapX + 32,
-    h: (g.rows ?? 1) * cellH + ((g.rows ?? 1) - 1) * gapY + 38
+    x: xOf(g.col) - 22,
+    y: yOf(g.row) - 30,
+    w: (g.cols ?? 1) * cellW + ((g.cols ?? 1) - 1) * gapX + 44,
+    h: (g.rows ?? 1) * cellH + ((g.rows ?? 1) - 1) * gapY + 54
   });
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const width = padX * 2 + cols * cellW + (cols - 1) * gapX;