@diagrammo/dgmo 0.25.3 → 0.25.5

package/dist/index.cjs

@@ -55801,6 +55801,59 @@ function getRotateFn(mode) {
   if (mode === "angled") return () => Math.round(Math.random() * 30 - 15);
   return () => 0;
 }
+function hasCanvas2d() {
+  try {
+    if (typeof document === "undefined") return false;
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" && !!canvas.getContext("2d");
+  } catch {
+    return false;
+  }
+}
+function estimateWordWidth(text, size) {
+  return text.length * size * WORDCLOUD_GLYPH_ADVANCE;
+}
+function layoutWordsNoCanvas(words, width, height, padding, rotateFn) {
+  const sorted = [...words].sort((a, b) => b.size - a.size);
+  const placed = [];
+  const maxR = Math.sqrt(width * width + height * height) / 2;
+  const aspect = width > 0 ? height / width : 1;
+  for (const w of sorted) {
+    const rotate = rotateFn();
+    const rawW = estimateWordWidth(w.text, w.size) + padding * 2;
+    const rawH = w.size + padding * 2;
+    const rad = rotate * Math.PI / 180;
+    const cos = Math.abs(Math.cos(rad));
+    const sin = Math.abs(Math.sin(rad));
+    const halfW = (rawW * cos + rawH * sin) / 2;
+    const halfH = (rawW * sin + rawH * cos) / 2;
+    let spot = null;
+    for (let t = 0; t < 4e3; t++) {
+      const a = t * 0.25;
+      const r = a * 1.4;
+      if (r > maxR) break;
+      const x = Math.cos(a) * r;
+      const y = Math.sin(a) * r * aspect;
+      if (x - halfW < -width / 2 || x + halfW > width / 2 || y - halfH < -height / 2 || y + halfH > height / 2) {
+        continue;
+      }
+      let collides = false;
+      for (const p of placed) {
+        if (Math.abs(x - p.x) < halfW + p.halfW && Math.abs(y - p.y) < halfH + p.halfH) {
+          collides = true;
+          break;
+        }
+      }
+      if (!collides) {
+        spot = { x, y };
+        break;
+      }
+    }
+    if (!spot) continue;
+    placed.push({ ...w, rotate, x: spot.x, y: spot.y, halfW, halfH });
+  }
+  return placed;
+}
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
     d3Selection23.select(container).selectAll(":not([data-d3-tooltip])").remove();
@@ -55837,13 +55890,19 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+    const sized = words.map((w) => ({ ...w, size: fontSize(w.weight) }));
+    const draw = (layoutWords) => {
       g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
       resolve();
-    }).start();
+    };
+    if (!hasCanvas2d()) {
+      draw(layoutWordsNoCanvas(sized, width, cloudHeight, 2, rotateFn));
+      return;
+    }
+    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(sized).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", draw).start();
   });
 }
 function fitCirclesToContainerAsymmetric(circles, w, h, mLeft, mRight, mTop, mBottom) {
@@ -57654,7 +57713,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
   }
   return finalizeSvgExport(container, theme, effectivePalette);
 }
-var d3Scale2, d3Selection23, d3Shape11, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, EXPORT_WIDTH, EXPORT_HEIGHT;
+var d3Scale2, d3Selection23, d3Shape11, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, WORDCLOUD_GLYPH_ADVANCE, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
@@ -57820,6 +57879,7 @@ var init_d3 = __esm({
     ARC_BASELINE_STROKE_WIDTH = 1;
     timelineCollapseState = /* @__PURE__ */ new WeakMap();
     tlBandClipCounter = 0;
+    WORDCLOUD_GLYPH_ADVANCE = 0.62;
     EXPORT_WIDTH = 1200;
     EXPORT_HEIGHT = 800;
   }
@@ -58306,31 +58366,52 @@ init_d3();
 init_echarts();
 init_dgmo_router();
 init_registry();
-async function ensureDom() {
-  if (typeof document !== "undefined") return;
+var DOM_GLOBALS = [
+  "document",
+  "window",
+  "navigator",
+  "HTMLElement",
+  "SVGElement"
+];
+var domRefCount = 0;
+var domInstallPromise = null;
+var domInstalledByUs = false;
+async function installDom() {
   const { JSDOM } = await loadJsdom();
-  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-  const win = dom.window;
-  Object.defineProperty(globalThis, "document", {
-    value: win.document,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "window", {
-    value: win,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "navigator", {
-    value: win.navigator,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "HTMLElement", {
-    value: win.HTMLElement,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "SVGElement", {
-    value: win.SVGElement,
-    configurable: true
+  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+    url: "http://localhost/"
   });
+  const win = dom.window;
+  const values = {
+    document: win.document,
+    window: win,
+    navigator: win.navigator,
+    HTMLElement: win.HTMLElement,
+    SVGElement: win.SVGElement
+  };
+  for (const key of DOM_GLOBALS) {
+    Object.defineProperty(globalThis, key, {
+      value: values[key],
+      configurable: true
+    });
+  }
+  domInstalledByUs = true;
+}
+async function acquireDom() {
+  if (typeof document !== "undefined" && !domInstalledByUs) return;
+  domRefCount++;
+  if (!domInstallPromise) domInstallPromise = installDom();
+  await domInstallPromise;
+}
+function releaseDom() {
+  if (!domInstalledByUs) return;
+  if (--domRefCount > 0) return;
+  for (const key of DOM_GLOBALS) {
+    delete globalThis[key];
+  }
+  domInstalledByUs = false;
+  domInstallPromise = null;
+  domRefCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");
@@ -58364,16 +58445,21 @@ async function render(content, options) {
     );
     return { svg: svg2, diagnostics };
   }
-  await ensureDom();
-  const svg = await renderForExport(content, theme, paletteColors, viewState, {
-    ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
-    ...options?.c4System !== void 0 && { c4System: options.c4System },
-    ...options?.c4Container !== void 0 && {
-      c4Container: options.c4Container
-    },
-    ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
-    ...options?.mapData !== void 0 && { mapData: options.mapData }
-  });
+  await acquireDom();
+  let svg;
+  try {
+    svg = await renderForExport(content, theme, paletteColors, viewState, {
+      ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
+      ...options?.c4System !== void 0 && { c4System: options.c4System },
+      ...options?.c4Container !== void 0 && {
+        c4Container: options.c4Container
+      },
+      ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
+      ...options?.mapData !== void 0 && { mapData: options.mapData }
+    });
+  } finally {
+    releaseDom();
+  }
   if (chartType === "map") {
     try {
       const [{ parseMap: parseMap2 }, { resolveMap: resolveMap2 }, { loadMapData: loadMapData2 }] = await Promise.all(

package/dist/index.js

@@ -55830,6 +55830,59 @@ function getRotateFn(mode) {
   if (mode === "angled") return () => Math.round(Math.random() * 30 - 15);
   return () => 0;
 }
+function hasCanvas2d() {
+  try {
+    if (typeof document === "undefined") return false;
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" && !!canvas.getContext("2d");
+  } catch {
+    return false;
+  }
+}
+function estimateWordWidth(text, size) {
+  return text.length * size * WORDCLOUD_GLYPH_ADVANCE;
+}
+function layoutWordsNoCanvas(words, width, height, padding, rotateFn) {
+  const sorted = [...words].sort((a, b) => b.size - a.size);
+  const placed = [];
+  const maxR = Math.sqrt(width * width + height * height) / 2;
+  const aspect = width > 0 ? height / width : 1;
+  for (const w of sorted) {
+    const rotate = rotateFn();
+    const rawW = estimateWordWidth(w.text, w.size) + padding * 2;
+    const rawH = w.size + padding * 2;
+    const rad = rotate * Math.PI / 180;
+    const cos = Math.abs(Math.cos(rad));
+    const sin = Math.abs(Math.sin(rad));
+    const halfW = (rawW * cos + rawH * sin) / 2;
+    const halfH = (rawW * sin + rawH * cos) / 2;
+    let spot = null;
+    for (let t = 0; t < 4e3; t++) {
+      const a = t * 0.25;
+      const r = a * 1.4;
+      if (r > maxR) break;
+      const x = Math.cos(a) * r;
+      const y = Math.sin(a) * r * aspect;
+      if (x - halfW < -width / 2 || x + halfW > width / 2 || y - halfH < -height / 2 || y + halfH > height / 2) {
+        continue;
+      }
+      let collides = false;
+      for (const p of placed) {
+        if (Math.abs(x - p.x) < halfW + p.halfW && Math.abs(y - p.y) < halfH + p.halfH) {
+          collides = true;
+          break;
+        }
+      }
+      if (!collides) {
+        spot = { x, y };
+        break;
+      }
+    }
+    if (!spot) continue;
+    placed.push({ ...w, rotate, x: spot.x, y: spot.y, halfW, halfH });
+  }
+  return placed;
+}
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
     d3Selection23.select(container).selectAll(":not([data-d3-tooltip])").remove();
@@ -55866,13 +55919,19 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    cloud().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+    const sized = words.map((w) => ({ ...w, size: fontSize(w.weight) }));
+    const draw = (layoutWords) => {
       g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
       resolve();
-    }).start();
+    };
+    if (!hasCanvas2d()) {
+      draw(layoutWordsNoCanvas(sized, width, cloudHeight, 2, rotateFn));
+      return;
+    }
+    cloud().size([width, cloudHeight]).words(sized).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", draw).start();
   });
 }
 function fitCirclesToContainerAsymmetric(circles, w, h, mLeft, mRight, mTop, mBottom) {
@@ -57683,7 +57742,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
   }
   return finalizeSvgExport(container, theme, effectivePalette);
 }
-var DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, EXPORT_WIDTH, EXPORT_HEIGHT;
+var DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, WORDCLOUD_GLYPH_ADVANCE, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
@@ -57844,6 +57903,7 @@ var init_d3 = __esm({
     ARC_BASELINE_STROKE_WIDTH = 1;
     timelineCollapseState = /* @__PURE__ */ new WeakMap();
     tlBandClipCounter = 0;
+    WORDCLOUD_GLYPH_ADVANCE = 0.62;
     EXPORT_WIDTH = 1200;
     EXPORT_HEIGHT = 800;
   }
@@ -58311,31 +58371,52 @@ init_d3();
 init_echarts();
 init_dgmo_router();
 init_registry();
-async function ensureDom() {
-  if (typeof document !== "undefined") return;
+var DOM_GLOBALS = [
+  "document",
+  "window",
+  "navigator",
+  "HTMLElement",
+  "SVGElement"
+];
+var domRefCount = 0;
+var domInstallPromise = null;
+var domInstalledByUs = false;
+async function installDom() {
   const { JSDOM } = await loadJsdom();
-  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-  const win = dom.window;
-  Object.defineProperty(globalThis, "document", {
-    value: win.document,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "window", {
-    value: win,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "navigator", {
-    value: win.navigator,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "HTMLElement", {
-    value: win.HTMLElement,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "SVGElement", {
-    value: win.SVGElement,
-    configurable: true
+  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+    url: "http://localhost/"
   });
+  const win = dom.window;
+  const values = {
+    document: win.document,
+    window: win,
+    navigator: win.navigator,
+    HTMLElement: win.HTMLElement,
+    SVGElement: win.SVGElement
+  };
+  for (const key of DOM_GLOBALS) {
+    Object.defineProperty(globalThis, key, {
+      value: values[key],
+      configurable: true
+    });
+  }
+  domInstalledByUs = true;
+}
+async function acquireDom() {
+  if (typeof document !== "undefined" && !domInstalledByUs) return;
+  domRefCount++;
+  if (!domInstallPromise) domInstallPromise = installDom();
+  await domInstallPromise;
+}
+function releaseDom() {
+  if (!domInstalledByUs) return;
+  if (--domRefCount > 0) return;
+  for (const key of DOM_GLOBALS) {
+    delete globalThis[key];
+  }
+  domInstalledByUs = false;
+  domInstallPromise = null;
+  domRefCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");
@@ -58369,16 +58450,21 @@ async function render(content, options) {
     );
     return { svg: svg2, diagnostics };
   }
-  await ensureDom();
-  const svg = await renderForExport(content, theme, paletteColors, viewState, {
-    ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
-    ...options?.c4System !== void 0 && { c4System: options.c4System },
-    ...options?.c4Container !== void 0 && {
-      c4Container: options.c4Container
-    },
-    ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
-    ...options?.mapData !== void 0 && { mapData: options.mapData }
-  });
+  await acquireDom();
+  let svg;
+  try {
+    svg = await renderForExport(content, theme, paletteColors, viewState, {
+      ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
+      ...options?.c4System !== void 0 && { c4System: options.c4System },
+      ...options?.c4Container !== void 0 && {
+        c4Container: options.c4Container
+      },
+      ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
+      ...options?.mapData !== void 0 && { mapData: options.mapData }
+    });
+  } finally {
+    releaseDom();
+  }
   if (chartType === "map") {
     try {
       const [{ parseMap: parseMap2 }, { resolveMap: resolveMap2 }, { loadMapData: loadMapData2 }] = await Promise.all(

package/dist/internal.cjs

@@ -56088,6 +56088,59 @@ function getRotateFn(mode) {
   if (mode === "angled") return () => Math.round(Math.random() * 30 - 15);
   return () => 0;
 }
+function hasCanvas2d() {
+  try {
+    if (typeof document === "undefined") return false;
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" && !!canvas.getContext("2d");
+  } catch {
+    return false;
+  }
+}
+function estimateWordWidth(text, size) {
+  return text.length * size * WORDCLOUD_GLYPH_ADVANCE;
+}
+function layoutWordsNoCanvas(words, width, height, padding, rotateFn) {
+  const sorted = [...words].sort((a, b) => b.size - a.size);
+  const placed = [];
+  const maxR = Math.sqrt(width * width + height * height) / 2;
+  const aspect = width > 0 ? height / width : 1;
+  for (const w of sorted) {
+    const rotate = rotateFn();
+    const rawW = estimateWordWidth(w.text, w.size) + padding * 2;
+    const rawH = w.size + padding * 2;
+    const rad = rotate * Math.PI / 180;
+    const cos = Math.abs(Math.cos(rad));
+    const sin = Math.abs(Math.sin(rad));
+    const halfW = (rawW * cos + rawH * sin) / 2;
+    const halfH = (rawW * sin + rawH * cos) / 2;
+    let spot = null;
+    for (let t = 0; t < 4e3; t++) {
+      const a = t * 0.25;
+      const r = a * 1.4;
+      if (r > maxR) break;
+      const x = Math.cos(a) * r;
+      const y = Math.sin(a) * r * aspect;
+      if (x - halfW < -width / 2 || x + halfW > width / 2 || y - halfH < -height / 2 || y + halfH > height / 2) {
+        continue;
+      }
+      let collides = false;
+      for (const p of placed) {
+        if (Math.abs(x - p.x) < halfW + p.halfW && Math.abs(y - p.y) < halfH + p.halfH) {
+          collides = true;
+          break;
+        }
+      }
+      if (!collides) {
+        spot = { x, y };
+        break;
+      }
+    }
+    if (!spot) continue;
+    placed.push({ ...w, rotate, x: spot.x, y: spot.y, halfW, halfH });
+  }
+  return placed;
+}
 function renderWordCloud(container, parsed, palette, _isDark, onClickItem, exportDims) {
   const { words, cloudOptions } = parsed;
   const title = parsed.noTitle ? null : parsed.title;
@@ -56128,21 +56181,24 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
     "transform",
     `translate(${width / 2},${sTitleHeight + cloudHeight / 2})`
   );
-  (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(sPadding).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+  const sized = words.map((w) => ({ ...w, size: fontSize(w.weight) }));
+  const draw = (layoutWords) => {
     g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).style(
       "cursor",
       (d) => onClickItem && d.lineNumber ? "pointer" : "default"
-    ).attr("text-anchor", "middle").attr(
-      "transform",
-      (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
-    ).attr("data-line-number", (d) => {
+    ).attr("text-anchor", "middle").attr("transform", (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`).attr("data-line-number", (d) => {
       const ln = d.lineNumber;
       return ln ? String(ln) : null;
     }).text((d) => d.text).on("click", (_event, d) => {
       const ln = d.lineNumber;
       if (onClickItem && ln) onClickItem(ln);
     });
-  }).start();
+  };
+  if (!hasCanvas2d()) {
+    draw(layoutWordsNoCanvas(sized, width, cloudHeight, sPadding, rotateFn));
+    return;
+  }
+  (0, import_d3_cloud.default)().size([width, cloudHeight]).words(sized).padding(sPadding).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", draw).start();
 }
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
@@ -56180,13 +56236,19 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+    const sized = words.map((w) => ({ ...w, size: fontSize(w.weight) }));
+    const draw = (layoutWords) => {
       g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
       resolve();
-    }).start();
+    };
+    if (!hasCanvas2d()) {
+      draw(layoutWordsNoCanvas(sized, width, cloudHeight, 2, rotateFn));
+      return;
+    }
+    (0, import_d3_cloud.default)().size([width, cloudHeight]).words(sized).padding(2).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", draw).start();
   });
 }
 function fitCirclesToContainerAsymmetric(circles, w, h, mLeft, mRight, mTop, mBottom) {
@@ -57997,7 +58059,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
   }
   return finalizeSvgExport(container, theme, effectivePalette);
 }
-var d3Scale2, d3Selection23, d3Shape11, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, EXPORT_WIDTH, EXPORT_HEIGHT;
+var d3Scale2, d3Selection23, d3Shape11, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN_TOP, ARC_MARGIN_RIGHT, ARC_MARGIN_BOTTOM, ARC_MARGIN_LEFT, ARC_MARGIN_LEFT_VERTICAL, ARC_NODE_RADIUS, ARC_NODE_STROKE_WIDTH, ARC_NODE_LABEL_FONT, ARC_GROUP_LABEL_FONT, ARC_BAND_HALF_W, ARC_BAND_HALF_H, ARC_BAND_RADIUS, ARC_BAND_LABEL_X_OFFSET, ARC_BAND_LABEL_Y_OFFSET, ARC_BAND_LABEL_BOTTOM_OFFSET, ARC_NODE_LABEL_X_OFFSET, ARC_NODE_LABEL_Y_OFFSET, ARC_STROKE_MIN, ARC_STROKE_MAX, ARC_BASELINE_STROKE_WIDTH, timelineCollapseState, tlBandClipCounter, WORDCLOUD_GLYPH_ADVANCE, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
@@ -58164,6 +58226,7 @@ var init_d3 = __esm({
     ARC_BASELINE_STROKE_WIDTH = 1;
     timelineCollapseState = /* @__PURE__ */ new WeakMap();
     tlBandClipCounter = 0;
+    WORDCLOUD_GLYPH_ADVANCE = 0.62;
     EXPORT_WIDTH = 1200;
     EXPORT_HEIGHT = 800;
   }
@@ -58913,31 +58976,52 @@ init_d3();
 init_echarts();
 init_dgmo_router();
 init_registry();
-async function ensureDom() {
-  if (typeof document !== "undefined") return;
+var DOM_GLOBALS = [
+  "document",
+  "window",
+  "navigator",
+  "HTMLElement",
+  "SVGElement"
+];
+var domRefCount = 0;
+var domInstallPromise = null;
+var domInstalledByUs = false;
+async function installDom() {
   const { JSDOM } = await loadJsdom();
-  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-  const win = dom.window;
-  Object.defineProperty(globalThis, "document", {
-    value: win.document,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "window", {
-    value: win,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "navigator", {
-    value: win.navigator,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "HTMLElement", {
-    value: win.HTMLElement,
-    configurable: true
-  });
-  Object.defineProperty(globalThis, "SVGElement", {
-    value: win.SVGElement,
-    configurable: true
+  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+    url: "http://localhost/"
   });
+  const win = dom.window;
+  const values = {
+    document: win.document,
+    window: win,
+    navigator: win.navigator,
+    HTMLElement: win.HTMLElement,
+    SVGElement: win.SVGElement
+  };
+  for (const key of DOM_GLOBALS) {
+    Object.defineProperty(globalThis, key, {
+      value: values[key],
+      configurable: true
+    });
+  }
+  domInstalledByUs = true;
+}
+async function acquireDom() {
+  if (typeof document !== "undefined" && !domInstalledByUs) return;
+  domRefCount++;
+  if (!domInstallPromise) domInstallPromise = installDom();
+  await domInstallPromise;
+}
+function releaseDom() {
+  if (!domInstalledByUs) return;
+  if (--domRefCount > 0) return;
+  for (const key of DOM_GLOBALS) {
+    delete globalThis[key];
+  }
+  domInstalledByUs = false;
+  domInstallPromise = null;
+  domRefCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");
@@ -58971,16 +59055,21 @@ async function render(content, options) {
     );
     return { svg: svg2, diagnostics };
   }
-  await ensureDom();
-  const svg = await renderForExport(content, theme, paletteColors, viewState, {
-    ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
-    ...options?.c4System !== void 0 && { c4System: options.c4System },
-    ...options?.c4Container !== void 0 && {
-      c4Container: options.c4Container
-    },
-    ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
-    ...options?.mapData !== void 0 && { mapData: options.mapData }
-  });
+  await acquireDom();
+  let svg;
+  try {
+    svg = await renderForExport(content, theme, paletteColors, viewState, {
+      ...options?.c4Level !== void 0 && { c4Level: options.c4Level },
+      ...options?.c4System !== void 0 && { c4System: options.c4System },
+      ...options?.c4Container !== void 0 && {
+        c4Container: options.c4Container
+      },
+      ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
+      ...options?.mapData !== void 0 && { mapData: options.mapData }
+    });
+  } finally {
+    releaseDom();
+  }
   if (chartType === "map") {
     try {
       const [{ parseMap: parseMap2 }, { resolveMap: resolveMap2 }, { loadMapData: loadMapData2 }] = await Promise.all(