@avodado/render 0.2.5 → 0.2.6

package/dist/index.js

@@ -4006,11 +4006,11 @@ function renderGrid(data) {
   const edges = data.edges ?? [];
   const cellW = 178;
   const cellH = 80;
-  const gapX = 54;
-  const gapY = 60;
-  const padX = 32;
-  const padTop = 46;
-  const padBot = 28;
+  const gapX = 64;
+  const gapY = 68;
+  const padX = 38;
+  const padTop = 52;
+  const padBot = 36;
   const cols = Math.max(
     1,
     ...nodes.map((n) => (n.col ?? 1) + ((n.w ?? 1) - 1)),
@@ -4030,10 +4030,10 @@ function renderGrid(data) {
     h: cellH
   });
   const groupRect = (g) => ({
-    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
+    x: xOf(g.col) - 28,
+    y: yOf(g.row) - 38,
+    w: (g.cols ?? 1) * cellW + ((g.cols ?? 1) - 1) * gapX + 56,
+    h: (g.rows ?? 1) * cellH + ((g.rows ?? 1) - 1) * gapY + 66
   });
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const width = padX * 2 + cols * cellW + (cols - 1) * gapX;
@@ -4044,12 +4044,8 @@ function renderGrid(data) {
   let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Block diagram</title>`;
   for (const g of sortedGroups) {
     const r = groupRect(g);
-    const col = safeColor(g.color, "#0e54a1");
-    const badgeW = 16 + g.label.length * 6.4;
-    const isContainer = (g.cols ?? 1) >= 2 && (g.rows ?? 1) >= 2;
-    const zone = `<rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="10" fill="${col}" fill-opacity="0.06" stroke="${col}" stroke-opacity="0.55" stroke-width="1.3" stroke-dasharray="7 5"/>`;
-    const label = isContainer ? `<rect x="${r.x + (r.w - badgeW) / 2}" y="${r.y - 1}" width="${badgeW}" height="20" rx="10" fill="${col}"/><text x="${r.x + r.w / 2}" y="${r.y + 13}" class="grp-label" fill="#fff" text-anchor="middle">${escapeHtml(g.label)}</text>` : `<path d="M${r.x} ${r.y + 20} L${r.x} ${r.y + 10} a10 10 0 0 1 10 -10 h${badgeW - 10} v20 z" fill="${col}"/><text x="${r.x + badgeW / 2}" y="${r.y + 14}" class="grp-label" fill="#fff" text-anchor="middle">${escapeHtml(g.label)}</text>`;
-    s += `<g>${zone}${label}</g>`;
+    const col = safeColor(g.color, "#475569");
+    s += `<g><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="12" fill="none" stroke="${col}" stroke-opacity="0.6" stroke-width="1.3" stroke-dasharray="7 5"/><text x="${r.x + 16}" y="${r.y + 19}" class="grp-label" fill="${col}">${escapeHtml(g.label)}</text></g>`;
   }
   const labels = [];
   for (const e of edges) {