@diagrammo/dgmo 0.25.1 → 0.25.3

package/dist/index.cjs

@@ -58685,8 +58685,9 @@ function normalizeSvgForEmbed(input) {
     const h = tight.height + pad2 * 2;
     const canvas = readViewBox(svg);
     const TOL = 2;
-    const withinCanvas = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL;
-    if (withinCanvas) {
+    const MIN_COVERAGE = 0.5;
+    const trustworthy = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL && w >= canvas.width * MIN_COVERAGE && h >= canvas.height * MIN_COVERAGE;
+    if (trustworthy) {
       const vb = `${x} ${y} ${w} ${h}`;
       svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
     }
@@ -58781,8 +58782,11 @@ function computeBBox(svg) {
     const y = attr(tag, "y");
     if (x !== null && y !== null) {
       const w = text.length * 7;
-      push(x - w / 2, y - 14);
-      push(x + w / 2, y + 4);
+      const anchor = tag.match(/\btext-anchor="([^"]*)"/)?.[1] ?? "start";
+      const left = anchor === "middle" ? x - w / 2 : anchor === "end" ? x - w : x;
+      const right = anchor === "middle" ? x + w / 2 : anchor === "end" ? x : x + w;
+      push(left, y - 14);
+      push(right, y + 4);
     }
   }
   for (const m of svg.matchAll(/<path\b[^>]*?\bd="([^"]+)"/g)) {

package/dist/index.js

@@ -58690,8 +58690,9 @@ function normalizeSvgForEmbed(input) {
     const h = tight.height + pad2 * 2;
     const canvas = readViewBox(svg);
     const TOL = 2;
-    const withinCanvas = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL;
-    if (withinCanvas) {
+    const MIN_COVERAGE = 0.5;
+    const trustworthy = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL && w >= canvas.width * MIN_COVERAGE && h >= canvas.height * MIN_COVERAGE;
+    if (trustworthy) {
       const vb = `${x} ${y} ${w} ${h}`;
       svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
     }
@@ -58786,8 +58787,11 @@ function computeBBox(svg) {
     const y = attr(tag, "y");
     if (x !== null && y !== null) {
       const w = text.length * 7;
-      push(x - w / 2, y - 14);
-      push(x + w / 2, y + 4);
+      const anchor = tag.match(/\btext-anchor="([^"]*)"/)?.[1] ?? "start";
+      const left = anchor === "middle" ? x - w / 2 : anchor === "end" ? x - w : x;
+      const right = anchor === "middle" ? x + w / 2 : anchor === "end" ? x : x + w;
+      push(left, y - 14);
+      push(right, y + 4);
     }
   }
   for (const m of svg.matchAll(/<path\b[^>]*?\bd="([^"]+)"/g)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {
@@ -157,9 +157,9 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "echarts": "^6.0.0",
+    "echarts": "^6.1.0",
     "elkjs": "^0.11.1",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.1",
     "lz-string": "^1.5.0",
     "topojson-client": "^3.1.0"
   },
@@ -175,30 +175,30 @@
     "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.8",
-    "@types/jsdom": "^28.0.1",
+    "@types/jsdom": "^28.0.3",
     "@types/topojson-client": "^3.1.5",
-    "@vitest/coverage-v8": "^4.1.6",
-    "axe-core": "^4.10.0",
-    "cspell": "^10.0.0",
+    "@vitest/coverage-v8": "^4.1.8",
+    "axe-core": "^4.12.0",
+    "cspell": "^10.0.1",
     "depcheck": "^1.4.7",
     "esbuild": "^0.28.0",
-    "eslint": "^10.2.0",
+    "eslint": "^10.4.1",
     "eslint-plugin-security": "^4.0.0",
-    "fast-check": "^4.7.0",
+    "fast-check": "^4.8.0",
     "fflate": "^0.8.3",
     "husky": "^9.1.7",
-    "jscpd": "^4.0.9",
-    "knip": "^6.3.1",
-    "lint-staged": "^16.4.0",
+    "jscpd": "^4.2.4",
+    "knip": "^6.15.0",
+    "lint-staged": "^17.0.7",
     "madge": "^8.0.0",
     "mapshaper": "0.7.22",
-    "prettier": "^3.8.2",
-    "publint": "^0.3.18",
+    "prettier": "^3.8.3",
+    "publint": "^0.3.21",
     "tsup": "^8.5.1",
     "type-coverage": "^2.29.7",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.58.1",
-    "vitest": "^4.1.4"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.1",
+    "vitest": "^4.1.8"
   },
   "lint-staged": {
     "*.ts": [

package/src/utils/svg-embed.ts

@@ -38,23 +38,30 @@ export function normalizeSvgForEmbed(input: string): string {
     const y = tight.y - pad;
     const w = tight.width + pad * 2;
     const h = tight.height + pad * 2;
-    // Genuine content-tightening is ALWAYS a sub-rectangle of the renderer's
-    // export canvas. computeBBox is a best-effort string parser: it misreads
-    // path arc commands (`A rx ry rot … x y`) and ignores `<g transform>`, so
-    // it can return a box that strays OUTSIDE the canvas (negative origin or
-    // over-wide). That's a parse error, not real content — applying it shifts the
-    // viewBox and CLIPS the diagram (the right/bottom fall off in embeds). Only
-    // tighten when the computed box sits within the renderer's viewBox;
-    // otherwise keep the already-correct canvas bounds.
+    // The renderer's viewBox is authoritative; computeBBox may only shave dead
+    // margins off it. computeBBox is a best-effort string parser with two
+    // failure modes, and the renderer's canvas bounds catch both:
+    //   1. OVER-shoot — it misreads path arc commands (`A rx ry rot … x y`) and
+    //      yields a box that strays OUTSIDE the canvas (negative origin /
+    //      over-wide). Applying it shifts the viewBox and CLIPS the diagram.
+    //   2. UNDER-shoot — it can't see elements positioned via `transform`
+    //      (no x/y attrs), e.g. word-cloud words. It then measures only the
+    //      stragglers (the title) and collapses the box to a tiny region,
+    //      zooming that fragment to fill the frame.
+    // So only tighten when the computed box sits WITHIN the canvas AND still
+    // covers most of it; otherwise keep the renderer's correct bounds.
     const canvas = readViewBox(svg);
     const TOL = 2;
-    const withinCanvas =
+    const MIN_COVERAGE = 0.5; // a real trim shaves margins, not the diagram
+    const trustworthy =
       !canvas ||
       (x >= canvas.x - TOL &&
         y >= canvas.y - TOL &&
         x + w <= canvas.x + canvas.width + TOL &&
-        y + h <= canvas.y + canvas.height + TOL);
-    if (withinCanvas) {
+        y + h <= canvas.y + canvas.height + TOL &&
+        w >= canvas.width * MIN_COVERAGE &&
+        h >= canvas.height * MIN_COVERAGE);
+    if (trustworthy) {
       const vb = `${x} ${y} ${w} ${h}`;
       svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
     }
@@ -87,26 +94,34 @@ export function getEmbedSvgViewBox(
   };
 }
 
-/**
- * Compute an approximate content bounding box from raw element coordinates.
- *
- * This is a regex walk, not a real SVG layout — it ignores `transform`
- * attributes and uses a heuristic for text widths. dgmo's renderers mostly use
- * absolute coordinates within their viewBox, so the approximation is close
- * enough that the rendered output reliably fills the visible area.
- */
 /** Read the root `<svg>` viewBox as numbers, if present and well-formed. */
 function readViewBox(
   svg: string
 ): { x: number; y: number; width: number; height: number } | null {
   const m = svg.match(/<svg[^>]*?\bviewBox="([^"]+)"/);
   if (!m) return null;
-  const n = m[1]!.trim().split(/[\s,]+/).map(Number);
-  if (n.length !== 4 || n.some((v) => !Number.isFinite(v)) || n[2]! <= 0 || n[3]! <= 0)
+  const n = m[1]!
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  if (
+    n.length !== 4 ||
+    n.some((v) => !Number.isFinite(v)) ||
+    n[2]! <= 0 ||
+    n[3]! <= 0
+  )
     return null;
   return { x: n[0]!, y: n[1]!, width: n[2]!, height: n[3]! };
 }
 
+/**
+ * Compute an approximate content bounding box from raw element coordinates.
+ *
+ * This is a regex walk, not a real SVG layout — it ignores `transform`
+ * attributes and uses a heuristic for text widths. dgmo's renderers mostly use
+ * absolute coordinates within their viewBox, so the approximation is close
+ * enough that the rendered output reliably fills the visible area.
+ */
 function computeBBox(
   svg: string
 ): { x: number; y: number; width: number; height: number } | null {
@@ -189,9 +204,18 @@ function computeBBox(
     const y = attr(tag, 'y');
     if (x !== null && y !== null) {
       const w = text.length * 7;
-      // text-anchor may be start/middle/end; assume worst case (middle).
-      push(x - w / 2, y - 14);
-      push(x + w / 2, y + 4);
+      // Honor text-anchor so the horizontal extent points the right way:
+      // `start` (SVG default) grows rightward from x, `end` grows leftward,
+      // `middle` straddles x. Assuming middle for everything under-measures
+      // start-anchored text (e.g. pyramid right-column descriptions), which
+      // collapses the tight viewBox and clips that text in embeds.
+      const anchor = tag.match(/\btext-anchor="([^"]*)"/)?.[1] ?? 'start';
+      const left =
+        anchor === 'middle' ? x - w / 2 : anchor === 'end' ? x - w : x;
+      const right =
+        anchor === 'middle' ? x + w / 2 : anchor === 'end' ? x : x + w;
+      push(left, y - 14);
+      push(right, y + 4);
     }
   }