@diagrammo/dgmo 0.44.1 → 0.46.0

package/src/render.ts

@@ -24,11 +24,29 @@ const DOM_GLOBALS = [
   'HTMLElement',
   'SVGElement',
 ] as const;
-let domRefCount = 0;
-let domInstallPromise: Promise<void> | null = null;
-let domInstalledByUs = false;
+// The ref-count state lives on `globalThis` under a well-known symbol rather
+// than in module state: dist/index and dist/block are each self-contained
+// bundles, so a host importing both gets two copies of this module. With
+// per-copy state, each copy keeps its own ref-count over the SAME
+// `globalThis.document` — one copy's release tears down globals mid-render of
+// the other. `Symbol.for` puts every copy on one shared count.
+interface DomGlobalsState {
+  refCount: number;
+  installPromise: Promise<void> | null;
+  installedByUs: boolean;
+}
+const DOM_STATE_KEY = Symbol.for('diagrammo.dgmo.dom-globals');
+
+function domState(): DomGlobalsState {
+  const g = globalThis as { [DOM_STATE_KEY]?: DomGlobalsState };
+  return (g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false,
+  });
+}
 
-async function installDom(): Promise<void> {
+async function installDom(state: DomGlobalsState): Promise<void> {
   const { JSDOM } = await loadJsdom();
   // Concrete URL → non-opaque origin, so host code that touches
   // window.localStorage during a same-process render doesn't throw.
@@ -49,7 +67,7 @@ async function installDom(): Promise<void> {
       configurable: true,
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 
 /**
@@ -58,22 +76,24 @@ async function installDom(): Promise<void> {
  * we did not install). Pair every successful call with `releaseDom()`.
  */
 async function acquireDom(): Promise<void> {
-  if (typeof document !== 'undefined' && !domInstalledByUs) return;
-  domRefCount++;
-  if (!domInstallPromise) domInstallPromise = installDom();
-  await domInstallPromise;
+  const state = domState();
+  if (typeof document !== 'undefined' && !state.installedByUs) return;
+  state.refCount++;
+  if (!state.installPromise) state.installPromise = installDom(state);
+  await state.installPromise;
 }
 
 /** Tear down the jsdom globals once no render is in flight. */
 function releaseDom(): void {
-  if (!domInstalledByUs) return;
-  if (--domRefCount > 0) return;
+  const state = domState();
+  if (!state.installedByUs) return;
+  if (--state.refCount > 0) return;
   for (const key of DOM_GLOBALS) {
     delete (globalThis as Record<string, unknown>)[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 
 /**

package/src/sitemap/renderer.ts

@@ -663,7 +663,7 @@ export function renderSitemap(
       .attr('class', 'sitemap-legend-fixed')
       .attr('transform', `translate(0, ${sDiagramPadding + fixedTitleH})`);
     if (activeTagGroup) {
-      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+      legendParent.attr('data-legend-active', tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent,

package/src/swimlane/renderer.ts

@@ -153,6 +153,7 @@ export function renderSwimlaneForExport(
     .attr('width', width)
     .attr('height', height)
     .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('font-family', FONT_FAMILY) as unknown as D3Svg;
 
   const defs = svg.append('defs');

package/src/timeline/renderer.ts

@@ -1299,7 +1299,7 @@ function renderTimelineTagLegendOverlay(
       if (currentActiveGroup) {
         legendContainer.attr(
           'data-legend-active',
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
 

package/src/utils/hover-styles.ts

@@ -25,6 +25,8 @@
 // there is no opacity double-up. `render({ bakeHover: false })` opts out.
 // ============================================================
 
+import { tagAttrKey } from './tag-groups';
+
 /** How a chart's cross-highlight rules are shaped. `self` = self-emphasis only
  *  (no cross-highlight — single-series / non-relational charts). */
 export type HoverStrategy = 'enumerated' | 'structural' | 'connection' | 'self';
@@ -599,7 +601,10 @@ function deriveFromSvg(svg: string, spec: HoverSpec): HoverDerived {
         .querySelector('[data-legend-active]')
         ?.getAttribute('data-legend-active');
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        // Defensive re-slug: legacy SVGs (pre-0.46) carried the raw lowercased
+        // group name here, which is not a valid attribute name when the group
+        // name contains spaces/parens — querySelectorAll would throw.
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         // Fallback for charts with no legend-active marker (e.g. mindmap): if
         // the marks carry exactly ONE distinct `data-tag-*` group, use it.

package/src/utils/legend-d3.ts

@@ -74,10 +74,7 @@ export function renderLegendD3(
 
     // Set active attribute on container
     if (currentState.activeGroup) {
-      legendG.attr(
-        'data-legend-active',
-        currentState.activeGroup.toLowerCase()
-      );
+      legendG.attr('data-legend-active', tagAttrKey(currentState.activeGroup));
     } else {
       legendG.attr('data-legend-active', null);
     }

package/src/utils/legend-svg.ts

@@ -180,7 +180,7 @@ export function renderLegendSvg(
 
   const classAttr = className ? ` class="${esc(className)}"` : '';
   const activeAttr = activeGroup
-    ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"`
+    ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"`
     : '';
   const svg = `<g${classAttr}${activeAttr}>${parts.join('')}</g>`;