@avodado/render 0.2.5 → 0.2.7

package/dist/index.js

@@ -2110,6 +2110,7 @@ function renderErd(data) {
     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>`;
+  const labels = [];
   validRels.forEach((r) => {
     const src = byName.get(r.from);
     const tgt = byName.get(r.to);
@@ -2129,7 +2130,9 @@ function renderErd(data) {
     if (r.label !== void 0 && r.label !== "") {
       const w2 = Math.max(30, r.label.length * 6.4);
       const cy = (fkY + pkY) / 2;
-      s += `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${round(w2)}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.label)}</text>`;
+      labels.push(
+        `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${round(w2)}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.label)}</text>`
+      );
     }
   });
   for (const b of boxes) {
@@ -2156,6 +2159,7 @@ function renderErd(data) {
       s += `<line x1="${round(x2)}" y1="${round(rowTop)}" x2="${round(x2 + b.w)}" y2="${round(rowTop)}" class="er-rowline"/><text x="${round(x2 + b.w / 2)}" y="${round(rowTop + 16)}" class="er-col dim" text-anchor="middle">\u2026 +${b.hidden} more</text>`;
     }
   }
+  s += labels.join("");
   s += `</svg>`;
   const opts = {
     tag: "ER",
@@ -3124,6 +3128,7 @@ function renderGraph(data) {
   const width = padX * 2 + cols * cellW + (cols - 1) * gapX;
   const height = padTop + rows * cellH + (rows - 1) * gapY + padBot;
   let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Graph</title>`;
+  const labels = [];
   for (const e of edges) {
     const A2 = byId.get(e.from);
     const B2 = byId.get(e.to);
@@ -3131,13 +3136,15 @@ function renderGraph(data) {
     const p2 = ortho(rectFor2(A2), rectFor2(B2));
     const directed = (e.dir ?? "directed") !== "undirected";
     const markerAttr = directed ? ` marker-end="url(#gArrow)"` : "";
-    s += `<g><path d="${p2.d}" fill="none" stroke="#6b7280" stroke-width="1.4"${markerAttr}/>` + edgePill(p2, e.label) + `</g>`;
+    s += `<path d="${p2.d}" fill="none" stroke="#6b7280" stroke-width="1.4"${markerAttr}/>`;
+    labels.push(edgePill(p2, e.label));
   }
   for (const n of nodes) {
     const r = rectFor2(n);
     const c = CHART_COLORS3[(n.group ?? 0) % CHART_COLORS3.length] ?? "#0e54a1";
     s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="20" fill="#fff" stroke="${c}" stroke-width="1.6"/><text x="${r.cx}" y="${r.cy + 4}" class="blk-name" fill="${c}" text-anchor="middle" style="font-size:12px">${escapeHtml(n.label)}</text></g>`;
   }
+  s += labels.join("");
   s += `</svg>`;
   return diagramFrame(
     {
@@ -3254,12 +3261,14 @@ function renderSwimlane(data) {
     if (L2 === void 0) continue;
     s += `<g><rect x="${padX}" y="${yLane(i)}" width="${width - padX * 2}" height="${laneH}" fill="${i % 2 ? "#fafafa" : "#fff"}" stroke="#e5e7eb"/><rect x="${padX}" y="${yLane(i)}" width="${labelW}" height="${laneH}" fill="#0e54a1"/><text x="${padX + 14}" y="${yLane(i) + laneH / 2 + 4}" class="sl-lane-label">${escapeHtml(L2.label)}</text></g>`;
   }
+  const labels = [];
   for (const lk of links) {
     const A2 = byId.get(lk.from);
     const B2 = byId.get(lk.to);
     if (!A2 || !B2) continue;
     const p2 = ortho(rectFor2(A2), rectFor2(B2));
-    s += `<g><path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.4" marker-end="url(#gArrow)"/>` + edgePill(p2, lk.label) + `</g>`;
+    s += `<path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.4" marker-end="url(#gArrow)"/>`;
+    labels.push(edgePill(p2, lk.label));
   }
   for (const st2 of steps) {
     const r = rectFor2(st2);
@@ -3270,6 +3279,7 @@ function renderSwimlane(data) {
     ).join("");
     s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="7" fill="${c.fill}" stroke="${c.stroke}" stroke-width="1.3"/>` + texts + `</g>`;
   }
+  s += labels.join("");
   s += `</svg>`;
   return diagramFrame(
     {
@@ -3948,6 +3958,7 @@ function renderCluster(data) {
     const kindLabel = cb.c.kind !== void 0 ? `<text x="${cb.x + cb.w - 14}" y="${cb.y + 21}" class="cl-kind">${escapeHtml(cb.c.kind)}</text>` : "";
     s += `<g><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cb.h}" rx="12" fill="var(--navy)" fill-opacity="0.035" stroke="var(--navy)" stroke-width="1.4" stroke-dasharray="8 5"/><rect x="${cb.x}" y="${cb.y}" width="${cb.w}" height="${cHeader}" rx="12" fill="var(--navy)"/><rect x="${cb.x}" y="${cb.y + cHeader - 12}" width="${cb.w}" height="12" fill="#0e54a1"/><text x="${cb.x + 16}" y="${cb.y + 21}" class="cl-head">${escapeHtml(cb.c.label)}</text>` + kindLabel + `</g>`;
   }
+  const labels = [];
   for (const e of edges) {
     const A2 = rects.get(e.from);
     const B2 = rects.get(e.to);
@@ -3960,7 +3971,8 @@ function renderCluster(data) {
       marker: "gArrow",
       err: false
     };
-    s += `<g><path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>` + edgePill(p2, e.label, st2.err) + `</g>`;
+    s += `<path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>`;
+    labels.push(edgePill(p2, e.label, st2.err));
   }
   for (const sv of services) {
     const r = rects.get(sv.id);
@@ -3980,6 +3992,7 @@ function renderCluster(data) {
     })() : "";
     s += `<g filter="url(#gshadow)"><path d="${rectRoundRight(r.x, r.y, r.w, r.h, 8)}" 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 + `<text x="${nx}" y="${r.y + (sv.tech !== void 0 ? 26 : 30)}" class="blk-name" fill="${st2.text}" style="font-size:12px">${escapeHtml(sv.label)}</text>` + techLine + repIndicator + `</g>`;
   }
+  s += labels.join("");
   s += `</svg>`;
   return diagramFrame(
     {
@@ -4006,11 +4019,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 +4043,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 +4057,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) {
@@ -4318,13 +4327,15 @@ function renderFelogicGraph(data, frame) {
     const col = safeColor(g.color, "#0e54a1");
     s += `<g><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="10" fill="${col}" fill-opacity="0.05" stroke="${col}" stroke-opacity="0.5" stroke-width="1.2" stroke-dasharray="7 5"/><text x="${r.x + 14}" y="${r.y + 15}" class="grp-label" fill="${col}">${escapeHtml(g.label)}</text></g>`;
   }
+  const labels = [];
   for (const e of edges) {
     const A2 = byId.get(e.from);
     const B2 = byId.get(e.to);
     if (!A2 || !B2) continue;
     const p2 = ortho(rectFor2(A2), rectFor2(B2));
     const st2 = feEdge(e.kind);
-    s += `<g><path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>` + edgePill(p2, e.label) + `</g>`;
+    s += `<path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>`;
+    labels.push(edgePill(p2, e.label));
   }
   for (const n of nodes) {
     const r = rectFor2(n);
@@ -4343,6 +4354,7 @@ function renderFelogicGraph(data, frame) {
     const note = n.note !== void 0 ? `<text x="${nx}" y="${noteY}" class="blk-tech" fill="${st2.solid === true ? "#cfe0f3" : st2.accent}" text-anchor="${anchor}">${escapeHtml(n.note)}</text>` : "";
     s += `<g filter="url(#gshadow)">` + card + stripe + gl + stereo + `<text x="${nx}" y="${nameY}" class="blk-name" fill="${st2.text}" text-anchor="${anchor}">${escapeHtml(n.name)}</text>` + note + `</g>`;
   }
+  s += labels.join("");
   s += `</svg>`;
   return diagramFrame(
     {