@diagrammo/dgmo 0.44.1 → 0.46.0

package/dist/advanced.cjs

@@ -5149,10 +5149,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     legendG.selectAll("*").remove();
     if (currentLayout.height === 0) return;
     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);
     }
@@ -5959,7 +5956,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       if (currentActiveGroup) {
         legendContainer.attr(
           "data-legend-active",
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
       const iconAddon = viewMode ? 0 : LG_ICON_W;
@@ -25614,7 +25611,7 @@ function renderLegendSvg(groups, options) {
     track(pill.x, pill.y, pill.width, pill.height);
   }
   const classAttr = className ? ` class="${esc(className)}"` : "";
-  const activeAttr = activeGroup ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"` : "";
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"` : "";
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return {
     svg,
@@ -28108,7 +28105,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -30942,7 +30939,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   if (fixedLegend) {
     const legendParent = svg.append("g").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,
@@ -37426,7 +37423,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {
@@ -41454,7 +41451,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -42069,7 +42066,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -45742,7 +45739,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const appHostedPlayback = controlsHost === "app" && !!playback;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
-    legendG.attr("data-legend-active", activeGroup.toLowerCase());
+    legendG.attr("data-legend-active", tagAttrKey(activeGroup));
   }
   const allGroups = legendGroups.map((g) => ({
     name: g.name,
@@ -69374,6 +69371,7 @@ async function exportVisualization(ctx) {
 init_charts_d3();
 
 // src/utils/hover-styles.ts
+init_tag_groups();
 var MAX_HOVER_GROUPS = 40;
 var DEFAULT_DIM_OPACITY = 0.4;
 var LIFT_DECL = "filter:saturate(1.4) brightness(1.06)";
@@ -69768,7 +69766,7 @@ function deriveFromSvg(svg, spec) {
     if (spec.groupAttrMode === "tag-active") {
       const slug = root.querySelector("[data-legend-active]")?.getAttribute("data-legend-active");
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         const names = /* @__PURE__ */ new Set();
         root.querySelectorAll(spec.markSelector).forEach((el) => {
@@ -69823,10 +69821,16 @@ var DOM_GLOBALS = [
   "HTMLElement",
   "SVGElement"
 ];
-var domRefCount = 0;
-var domInstallPromise = null;
-var domInstalledByUs = false;
-async function installDom() {
+var DOM_STATE_KEY = /* @__PURE__ */ Symbol.for("diagrammo.dgmo.dom-globals");
+function domState() {
+  const g = globalThis;
+  return g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false
+  };
+}
+async function installDom(state) {
   const { JSDOM } = await loadJsdom();
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
     url: "http://localhost/"
@@ -69845,23 +69849,25 @@ async function installDom() {
       configurable: true
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 async function acquireDom() {
-  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;
 }
 function releaseDom() {
-  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[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");

package/dist/advanced.js

@@ -5147,10 +5147,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     legendG.selectAll("*").remove();
     if (currentLayout.height === 0) return;
     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);
     }
@@ -5959,7 +5956,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       if (currentActiveGroup) {
         legendContainer.attr(
           "data-legend-active",
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
       const iconAddon = viewMode ? 0 : LG_ICON_W;
@@ -25612,7 +25609,7 @@ function renderLegendSvg(groups, options) {
     track(pill.x, pill.y, pill.width, pill.height);
   }
   const classAttr = className ? ` class="${esc(className)}"` : "";
-  const activeAttr = activeGroup ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"` : "";
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"` : "";
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return {
     svg,
@@ -28103,7 +28100,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -30939,7 +30936,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   if (fixedLegend) {
     const legendParent = svg.append("g").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,
@@ -37422,7 +37419,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {
@@ -41451,7 +41448,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -42066,7 +42063,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -45739,7 +45736,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const appHostedPlayback = controlsHost === "app" && !!playback;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
-    legendG.attr("data-legend-active", activeGroup.toLowerCase());
+    legendG.attr("data-legend-active", tagAttrKey(activeGroup));
   }
   const allGroups = legendGroups.map((g) => ({
     name: g.name,
@@ -69100,6 +69097,7 @@ async function exportVisualization(ctx) {
 init_charts_d3();
 
 // src/utils/hover-styles.ts
+init_tag_groups();
 var MAX_HOVER_GROUPS = 40;
 var DEFAULT_DIM_OPACITY = 0.4;
 var LIFT_DECL = "filter:saturate(1.4) brightness(1.06)";
@@ -69494,7 +69492,7 @@ function deriveFromSvg(svg, spec) {
     if (spec.groupAttrMode === "tag-active") {
       const slug = root.querySelector("[data-legend-active]")?.getAttribute("data-legend-active");
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         const names = /* @__PURE__ */ new Set();
         root.querySelectorAll(spec.markSelector).forEach((el) => {
@@ -69549,10 +69547,16 @@ var DOM_GLOBALS = [
   "HTMLElement",
   "SVGElement"
 ];
-var domRefCount = 0;
-var domInstallPromise = null;
-var domInstalledByUs = false;
-async function installDom() {
+var DOM_STATE_KEY = /* @__PURE__ */ Symbol.for("diagrammo.dgmo.dom-globals");
+function domState() {
+  const g = globalThis;
+  return g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false
+  };
+}
+async function installDom(state) {
   const { JSDOM } = await loadJsdom();
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
     url: "http://localhost/"
@@ -69571,23 +69575,25 @@ async function installDom() {
       configurable: true
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 async function acquireDom() {
-  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;
 }
 function releaseDom() {
-  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[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");