@avodado/render 0.2.3 → 0.2.4

package/dist/index.js

@@ -3645,7 +3645,7 @@ function renderUml(data) {
     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>`;
+  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 = [];
   validRels.forEach((rl, i) => {
     const e = g.edge(rl.from, rl.to, `e${i}`);
@@ -4028,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;
@@ -4062,14 +4062,11 @@ function renderGrid(data) {
   for (const n of nodes) {
     const r = rectFor2(n);
     const st2 = blockStyle(n.kind);
-    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>`;
+    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>`;
   }
   s += labels.join("");
   s += `</svg>`;