@diagrammo/dgmo 0.87.0 → 0.89.0

package/dist/{chunk-WZ23JJ7U.js → chunk-4AJKOUBO.js}

@@ -4,7 +4,7 @@ import {
   layoutC4Containers,
   layoutC4Context,
   layoutC4Deployment
-} from "./chunk-DAX42XVH.js";
+} from "./chunk-LYLNMN77.js";
 import {
   appendArrowheadMarkers,
   appendReverseArrowheadMarkers
@@ -28,27 +28,20 @@ import {
 } from "./chunk-XCKNFFKM.js";
 import {
   serializeSvg
-} from "./chunk-LD2JSKU3.js";
+} from "./chunk-OOCVGX4W.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
 } from "./chunk-VLC6WNRD.js";
 import {
   renderIntegratedLegend
-} from "./chunk-LHL6HDUL.js";
+} from "./chunk-7SX4IY6T.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   parseC4
 } from "./chunk-GSYZZFI5.js";
-import {
-  LEGEND_HEIGHT
-} from "./chunk-RH2PROYG.js";
-import {
-  measureText,
-  wrapTextToWidth
-} from "./chunk-KAO7JL4I.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
@@ -59,12 +52,19 @@ import {
 import {
   fillModeFromOptions
 } from "./chunk-44GP7PD5.js";
+import {
+  LEGEND_HEIGHT
+} from "./chunk-I6GGMCTV.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-KAO7JL4I.js";
 import {
   contrastText,
   groupFill,
   mix,
   shapeFill
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 
 // src/c4/renderer.ts
 import * as d3Selection from "d3-selection";

package/dist/{chunk-YK4N6TBN.js → chunk-4R6OMKXB.js}

@@ -12,27 +12,27 @@ import {
 } from "./chunk-VLC6WNRD.js";
 import {
   renderIntegratedLegend
-} from "./chunk-LHL6HDUL.js";
+} from "./chunk-7SX4IY6T.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-FM3WAVB6.js";
+} from "./chunk-NS7L7YKH.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
+import {
+  fillModeFromOptions,
+  legendSuppressed
+} from "./chunk-44GP7PD5.js";
 import {
   measureText,
   truncateText,
   wrapTextToWidth
 } from "./chunk-KAO7JL4I.js";
-import {
-  fillModeFromOptions,
-  legendSuppressed
-} from "./chunk-44GP7PD5.js";
 import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 
 // src/tech-radar/renderer.ts
 import * as d3Selection2 from "d3-selection";

package/dist/{chunk-HEYGGSNQ.js → chunk-5LE2CTLS.js}

@@ -1,6 +1,6 @@
 import {
   buildSwatches
-} from "./chunk-ERNCPKD4.js";
+} from "./chunk-G2KHLANR.js";
 import {
   fixedParts,
   fixedTimeCells,
@@ -21,7 +21,7 @@ import {
   contrastText,
   mix,
   themeBaseBg
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 import {
   resolveColor
 } from "./chunk-2M4IGSCY.js";

package/dist/{chunk-AGO3PFGS.js → chunk-7C2RAGPT.js}

@@ -13,23 +13,34 @@ import {
 import {
   INLINE_HEADER_PAD,
   layoutInlineHeader
-} from "./chunk-3DOQOXXI.js";
+} from "./chunk-CNUN5GO6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
 } from "./chunk-VLC6WNRD.js";
 import {
-  renderIntegratedLegend
-} from "./chunk-LHL6HDUL.js";
+  keepSwimlaneToggleFocus,
+  renderIntegratedLegend,
+  wireSwimlaneToggle
+} from "./chunk-7SX4IY6T.js";
 import {
   controlsGroupCapsuleWidth,
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-FM3WAVB6.js";
+} from "./chunk-NS7L7YKH.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
+import {
+  normalizeName
+} from "./chunk-NOTA6TEI.js";
+import {
+  UNTAGGED_TAG_COLOR,
+  resolveActiveTagGroup,
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-L5AFONQU.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -44,38 +55,29 @@ import {
   LEGEND_PILL_PAD,
   measureLegendText,
   truncateLegendText
-} from "./chunk-RH2PROYG.js";
+} from "./chunk-I6GGMCTV.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
 } from "./chunk-KAO7JL4I.js";
-import {
-  normalizeName
-} from "./chunk-NOTA6TEI.js";
-import {
-  UNTAGGED_TAG_COLOR,
-  resolveActiveTagGroup,
-  resolveTagColor,
-  tagAttrKey
-} from "./chunk-L5AFONQU.js";
 import {
   contrastText,
   getEraColors,
   getSeriesColors,
   mix,
   shapeFill
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 
 // src/gantt/renderer.ts
 import * as d3Scale from "d3-scale";
 import * as d3Selection from "d3-selection";
 var BAR_H = 22;
 var ROW_GAP = 6;
-var GROUP_GAP = 14;
 var MILESTONE_SIZE = 10;
 var MIN_LEFT_MARGIN = 120;
 var BOTTOM_MARGIN = 40;
+var BOTTOM_AXIS_LABEL_RESERVE = 30;
 var RIGHT_MARGIN = 20;
 var LABEL_PAD = 8;
 var LABEL_GAP = 5;
@@ -131,6 +133,12 @@ function appendTaskIcon(textEl, label, isMilestone, iconColor, textColor) {
   textEl.append("tspan").attr("fill", textColor).text(" " + label);
 }
 function renderGantt(container, resolved, palette, isDark, options, exportDims) {
+  keepSwimlaneToggleFocus(
+    container,
+    () => drawGantt(container, resolved, palette, isDark, options, exportDims)
+  );
+}
+function drawGantt(container, resolved, palette, isDark, options, exportDims) {
   container.innerHTML = "";
   bandClipCounter = 0;
   if (resolved.tasks.length === 0) return;
@@ -213,9 +221,11 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(containerWidth, idealWidth);
   const sBarH = ctx.structural(BAR_H);
   const sRowGap = ctx.structural(ROW_GAP);
-  const sGroupGap = ctx.structural(GROUP_GAP);
   const sMilestoneSize = ctx.structural(MILESTONE_SIZE);
-  const sBottomMargin = ctx.aesthetic(BOTTOM_MARGIN);
+  const sBottomMargin = Math.max(
+    ctx.aesthetic(BOTTOM_MARGIN),
+    BOTTOM_AXIS_LABEL_RESERVE
+  );
   const sRightMargin = ctx.aesthetic(RIGHT_MARGIN);
   const sLabelPad = ctx.structural(LABEL_PAD);
   const sLabelGap = ctx.structural(LABEL_GAP);
@@ -225,10 +235,10 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const sTitleY = ctx.aesthetic(TITLE_Y);
   const sHeaderRowH = ctx.structural(HEADER_ROW_H);
   const sContentTopPad = ctx.aesthetic(CONTENT_TOP_PAD);
-  const sTopDateLabelReserve = ctx.structural(topDateLabelReserve);
+  const sTopDateLabelReserve = topDateLabelReserve;
   const sSprintLabelReserve = ctx.structural(sprintLabelReserve);
   const sTitleHeight = ctx.aesthetic(titleHeight);
-  const sTagLegendReserve = ctx.structural(tagLegendReserve);
+  const sTagLegendReserve = tagLegendReserve;
   const inlineRequested = resolved.options.legendInline === true && resolved.tagGroups.length > 0;
   const legendExtent = inlineRequested ? getLegendExtent(
     {
@@ -267,15 +277,17 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const sTodayLabelY = sTodayReserve ? -(sTopDateLabelReserve + sHeaderRowH / 2) : 0;
   const sMarkerLabelY = sMarkerReserve ? -(sTopDateLabelReserve + sTodayReserve + sHeaderRowH / 2) : 0;
   const sEraLabelY = sEraReserve ? -(sTopDateLabelReserve + sTodayReserve + sMarkerReserve + sHeaderRowH / 2) : 0;
-  const sContentH = isTagMode ? totalRows * (sBarH + sRowGap) : totalRows * (sBarH + sRowGap) + sGroupGap * resolved.groups.length;
+  const sContentH = isTagMode ? totalRows * (sBarH + sRowGap) : totalRows * (sBarH + sRowGap);
   const sInnerHeight = sContentTopPad + sContentH;
   const sOuterHeight = sMarginTop + sInnerHeight + sBottomMargin;
   const sprintRightPad = resolved.sprints.length > 0 ? 50 : 0;
-  const innerWidth = containerWidth - leftMargin - sRightMargin - sprintRightPad;
-  const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${containerWidth} ${sOuterHeight}`).attr("width", exportDims ? containerWidth : "100%").attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("overflow", "visible");
+  const containerHeight = options?.fitToContainer ? container.clientHeight : 0;
+  const layoutWidth = !exportDims && containerHeight > 0 && sOuterHeight > containerHeight ? containerWidth * sOuterHeight / containerHeight : containerWidth;
+  const innerWidth = layoutWidth - leftMargin - sRightMargin - sprintRightPad;
+  const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${layoutWidth} ${sOuterHeight}`).attr("width", exportDims ? containerWidth : "100%").attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("overflow", "visible");
   const g = svg.append("g").attr("transform", `translate(${leftMargin}, ${sMarginTop})`);
   if (showTitle) {
-    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
+    svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : layoutWidth / 2).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
   }
   function drawLegend() {
     svg.selectAll(".gantt-tag-legend-container").remove();
@@ -362,7 +374,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   drawLegend();
   const startTime = dateToFractionalYear(resolved.startDate);
   const endTime = dateToFractionalYear(resolved.endDate);
-  const domainPad = Math.max((endTime - startTime) * 0.02, 0.01);
+  const span = endTime - startTime;
+  const domainPad = span > 0 ? span * 0.02 : 1 / 365;
   const domainMin = startTime - domainPad;
   const domainMax = endTime + domainPad;
   const xScale = d3Scale.scaleLinear().domain([domainMin, domainMax]).range([0, innerWidth]);
@@ -1321,15 +1334,17 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
             isSwimlane,
             palette
           );
-          iconEl.append("title").text(`Group by ${groupName}`);
-          iconEl.style("cursor", "pointer").on("click", (event) => {
-            event.stopPropagation();
-            if (onSwimlaneChange) {
-              onSwimlaneChange(
+          wireSwimlaneToggle(
+            iconEl,
+            groupName,
+            isSwimlane,
+            !!onSwimlaneChange,
+            () => {
+              onSwimlaneChange?.(
                 currentSwimlaneGroup?.toLowerCase() === groupName.toLowerCase() ? null : groupName
               );
             }
-          });
+          );
         }
       }
     };

package/dist/{chunk-VJ2KROJ5.js → chunk-7KPHRTND.js}

@@ -1,6 +1,6 @@
 import {
   buildMapProjection
-} from "./chunk-BV6PKJUS.js";
+} from "./chunk-LR6RRDWN.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_Y

package/dist/{chunk-LHL6HDUL.js → chunk-7SX4IY6T.js}

@@ -1,9 +1,12 @@
 import {
   computeLegendLayout
-} from "./chunk-FM3WAVB6.js";
+} from "./chunk-NS7L7YKH.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
+import {
+  tagAttrKey
+} from "./chunk-L5AFONQU.js";
 import {
   CONTROLS_ICON_PATH,
   LEGEND_DOT_R,
@@ -11,17 +14,15 @@ import {
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_TOGGLE_CLASS,
   LEGEND_TOGGLE_DOT_R,
   LEGEND_TOGGLE_OFF_OPACITY,
   legendChromeColors,
   measureLegendText
-} from "./chunk-RH2PROYG.js";
-import {
-  tagAttrKey
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-I6GGMCTV.js";
 import {
   valueRampStops
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 
 // src/utils/legend-d3.ts
 function centerText(sel) {
@@ -45,6 +46,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
       legendG.attr("data-legend-active", null);
     }
     const { groupBg, pillBorder } = legendChromeColors(palette, isDark);
+    const interactive = config.mode !== "export";
     if (currentLayout.activeCapsule) {
       renderCapsule(
         legendG,
@@ -53,11 +55,12 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
         groupBg,
         pillBorder,
         isDark,
+        interactive,
         callbacks
       );
     }
     for (const pill of currentLayout.pills) {
-      renderPill(legendG, pill, palette, groupBg, callbacks);
+      renderPill(legendG, pill, palette, groupBg, interactive, callbacks);
     }
     if (currentLayout.controlsGroup) {
       renderControlsGroup(
@@ -81,6 +84,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
         config.controls
       );
     }
+    if (interactive) restorePillFocus(legendG.node());
   }
   render();
   return {
@@ -99,11 +103,46 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     }
   };
 }
-function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, callbacks) {
+function wireGroupToggleKeys(target, groupName, isActive) {
+  target.classed(LEGEND_PILL_TOGGLE_CLASS, true).attr("role", "button").attr("tabindex", "0").attr("aria-label", groupName).attr("aria-pressed", isActive ? "true" : "false").on("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    event.stopPropagation();
+    const el = event.currentTarget;
+    const view = el.ownerDocument.defaultView;
+    if (!view) return;
+    const host = legendHost(el);
+    pendingPillFocus = host ? { host, label: groupName } : null;
+    el.dispatchEvent(new view.MouseEvent("click", { bubbles: true }));
+  });
+}
+var pendingPillFocus = null;
+function legendHost(el) {
+  let svg = el.ownerSVGElement;
+  while (svg?.ownerSVGElement) svg = svg.ownerSVGElement;
+  return svg?.parentElement ?? null;
+}
+function restorePillFocus(root) {
+  const pending = pendingPillFocus;
+  if (!pending || !root || !pending.host.contains(root)) return;
+  const doc = root.ownerDocument;
+  if (doc.activeElement && doc.activeElement !== doc.body) return;
+  for (const el of root.querySelectorAll(
+    `.${LEGEND_PILL_TOGGLE_CLASS}`
+  )) {
+    if (el.getAttribute("aria-label") === pending.label) {
+      pendingPillFocus = null;
+      el.focus();
+      return;
+    }
+  }
+}
+function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, interactive, callbacks) {
   const g = parent.append("g").attr("transform", `translate(${capsule.x},${capsule.y})`).attr("data-legend-group", tagAttrKey(capsule.groupName)).style("cursor", "pointer");
   g.append("rect").attr("width", capsule.width).attr("height", capsule.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
   const pill = capsule.pill;
-  g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+  const pillRect = g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+  if (interactive) wireGroupToggleKeys(pillRect, capsule.groupName, true);
   g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
   g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "normal").attr("fill", palette.text).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(capsule.groupName);
   if (capsule.gradient) {
@@ -140,9 +179,10 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, ca
     callbacks.onGroupRendered(capsule.groupName, g, true);
   }
 }
-function renderPill(parent, pill, palette, groupBg, callbacks) {
+function renderPill(parent, pill, palette, groupBg, interactive, callbacks) {
   const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", tagAttrKey(pill.groupName)).style("cursor", "pointer");
-  g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
+  const pillRect = g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
+  if (interactive) wireGroupToggleKeys(pillRect, pill.groupName, false);
   g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "normal").attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
   if (callbacks?.onGroupToggle) {
     const cb = callbacks.onGroupToggle;
@@ -289,8 +329,40 @@ function renderIntegratedLegend(container, opts) {
     opts.width
   );
 }
+var SWIMLANE_TOGGLE_CLASS = "dgmo-swimlane-toggle";
+function wireSwimlaneToggle(iconEl, groupName, isActive, interactive, activate) {
+  const label = `Group by ${groupName}`;
+  iconEl.append("title").text(label);
+  iconEl.style("cursor", "pointer").on("click", (event) => {
+    event.stopPropagation();
+    activate();
+  });
+  if (!interactive) return;
+  iconEl.classed(SWIMLANE_TOGGLE_CLASS, true).attr("role", "button").attr("tabindex", "0").attr("aria-label", label).attr("aria-pressed", isActive ? "true" : "false").on("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    event.stopPropagation();
+    activate();
+  });
+}
+function keepSwimlaneToggleFocus(container, render) {
+  const active = container.ownerDocument.activeElement;
+  const label = active && container.contains(active) && active.classList.contains(SWIMLANE_TOGGLE_CLASS) ? active.getAttribute("aria-label") : null;
+  render();
+  if (label === null) return;
+  for (const el of container.querySelectorAll(
+    `.${SWIMLANE_TOGGLE_CLASS}`
+  )) {
+    if (el.getAttribute("aria-label") === label) {
+      el.focus();
+      return;
+    }
+  }
+}
 
 export {
   renderLegendD3,
-  renderIntegratedLegend
+  renderIntegratedLegend,
+  wireSwimlaneToggle,
+  keepSwimlaneToggleFocus
 };

package/dist/{chunk-LSQGJN5H.js → chunk-7W4XLIVH.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk-XCKNFFKM.js";
 import {
   layoutInlineHeader
-} from "./chunk-3DOQOXXI.js";
+} from "./chunk-CNUN5GO6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -34,17 +34,27 @@ import {
 } from "./chunk-VLC6WNRD.js";
 import {
   renderIntegratedLegend
-} from "./chunk-LHL6HDUL.js";
+} from "./chunk-7SX4IY6T.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-FM3WAVB6.js";
+} from "./chunk-NS7L7YKH.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   parseInfra
 } from "./chunk-GUTZCRBT.js";
+import {
+  preprocessDescriptionLine
+} from "./chunk-IYULMRBE.js";
+import {
+  tagAttrKey
+} from "./chunk-L5AFONQU.js";
+import {
+  legendInlineRequested,
+  legendSuppressed
+} from "./chunk-44GP7PD5.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -55,29 +65,19 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-RH2PROYG.js";
+} from "./chunk-I6GGMCTV.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
 } from "./chunk-KAO7JL4I.js";
-import {
-  preprocessDescriptionLine
-} from "./chunk-IYULMRBE.js";
-import {
-  tagAttrKey
-} from "./chunk-L5AFONQU.js";
-import {
-  legendInlineRequested,
-  legendSuppressed
-} from "./chunk-44GP7PD5.js";
 import {
   contrastText,
   groupFill,
   groupStroke,
   mix,
   shapeFill
-} from "./chunk-7HWY4QAJ.js";
+} from "./chunk-L24LESXF.js";
 import {
   resolveColor
 } from "./chunk-2M4IGSCY.js";