@diagrammo/dgmo 0.75.0 → 0.77.0

package/dist/{chunk-DSH7NJ2G.js → chunk-QBM5BURJ.js}

@@ -6,7 +6,7 @@ import {
   mapLegendConfig,
   mapLegendGroups,
   parsePathRings
-} from "./chunk-BFTRW24X.js";
+} from "./chunk-WHWUVDYK.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -14,10 +14,10 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   measureText
 } from "./chunk-MTGGOCND.js";
@@ -781,4 +781,4 @@ export {
   renderMap,
   renderMapForExport
 };
-//# sourceMappingURL=chunk-DSH7NJ2G.js.map
+//# sourceMappingURL=chunk-QBM5BURJ.js.map

package/dist/{chunk-YVDBBWEP.js → chunk-QXMHBIQG.js}

@@ -10,13 +10,13 @@ import {
   hideTooltip,
   renderChartTitle,
   showTooltip
-} from "./chunk-UBW53CNS.js";
+} from "./chunk-3E4YB6TY.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -1672,4 +1672,4 @@ export {
   formatDateLabel,
   renderTimeline
 };
-//# sourceMappingURL=chunk-YVDBBWEP.js.map
+//# sourceMappingURL=chunk-QXMHBIQG.js.map

package/dist/{chunk-UWYZIGCB.js → chunk-RGW26UAR.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText
@@ -428,4 +428,4 @@ export {
   renderPyramid,
   renderPyramidForExport
 };
-//# sourceMappingURL=chunk-UWYZIGCB.js.map
+//# sourceMappingURL=chunk-RGW26UAR.js.map

package/dist/{chunk-QI4Q5ZZH.js → chunk-RV5A3EGI.js}

@@ -28,13 +28,13 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   getLegendExtent
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_HEIGHT
 } from "./chunk-YT5ICQ4R.js";
@@ -603,4 +603,4 @@ export {
   renderERDiagram,
   renderERDiagramForExport
 };
-//# sourceMappingURL=chunk-QI4Q5ZZH.js.map
+//# sourceMappingURL=chunk-RV5A3EGI.js.map

package/dist/{chunk-HGFKDSKZ.js → chunk-SI3PYDL4.js}

@@ -11,14 +11,14 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_GROUP_GAP
 } from "./chunk-YT5ICQ4R.js";
@@ -1001,4 +1001,4 @@ export {
   renderBracket,
   renderBracketForExport
 };
-//# sourceMappingURL=chunk-HGFKDSKZ.js.map
+//# sourceMappingURL=chunk-SI3PYDL4.js.map

package/dist/{chunk-CAPR5DET.js → chunk-SSEAULA5.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   resolveTagColor,
   tagAttrKey
@@ -401,4 +401,4 @@ function drawCenteredLabel(g, label, cx, cy, fill, fontSize, tight = false, halo
 export {
   renderSwimlaneForExport
 };
-//# sourceMappingURL=chunk-CAPR5DET.js.map
+//# sourceMappingURL=chunk-SSEAULA5.js.map

package/dist/{chunk-AYM472K3.js → chunk-SWUQJ5VR.js}

@@ -24,10 +24,10 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_HEIGHT
 } from "./chunk-YT5ICQ4R.js";
@@ -1039,4 +1039,4 @@ export {
   renderC4Deployment,
   renderC4DeploymentForExport
 };
-//# sourceMappingURL=chunk-AYM472K3.js.map
+//# sourceMappingURL=chunk-SWUQJ5VR.js.map

package/dist/{chunk-HFCKU73Y.js → chunk-TI4YUUW6.js}

@@ -24,10 +24,10 @@ import {
 } from "./chunk-RU2HHHYA.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   measureText,
   truncateText,
@@ -877,4 +877,4 @@ export {
   renderJourneyMap,
   renderJourneyMapForExport
 };
-//# sourceMappingURL=chunk-HFCKU73Y.js.map
+//# sourceMappingURL=chunk-TI4YUUW6.js.map

package/dist/{chunk-LYLRNAX2.js → chunk-TKIPK5P6.js}

@@ -1,9 +1,9 @@
 import {
   MONO_FAMILY
-} from "./chunk-XCAEHWQB.js";
+} from "./chunk-OZOHREFQ.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   truncateText
 } from "./chunk-MTGGOCND.js";
@@ -62,4 +62,4 @@ function escapeXml(s) {
 export {
   renderLiveLinkCard
 };
-//# sourceMappingURL=chunk-LYLRNAX2.js.map
+//# sourceMappingURL=chunk-TKIPK5P6.js.map

package/dist/{chunk-QT5UMFPE.js → chunk-U4DS2ODO.js}

@@ -1,9 +1,9 @@
 import {
   computeLegendLayout
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   CONTROLS_ICON_PATH,
   LEGEND_DOT_R,
@@ -294,4 +294,4 @@ export {
   renderLegendD3,
   renderIntegratedLegend
 };
-//# sourceMappingURL=chunk-QT5UMFPE.js.map
+//# sourceMappingURL=chunk-U4DS2ODO.js.map

package/dist/{chunk-XFLLYY3V.js → chunk-UBDVAHGK.js}

@@ -1,10 +1,11 @@
 import {
   edgeSplinePath,
-  fitDiagramToCanvas
-} from "./chunk-PDKUANDZ.js";
+  fitDiagramToCanvas,
+  selfLoopArcPath
+} from "./chunk-7IATMZSA.js";
 import {
   layoutGraph
-} from "./chunk-GE5RO4BS.js";
+} from "./chunk-N6MZSBOL.js";
 import {
   appendArrowheadMarkers
 } from "./chunk-LP7EC4MI.js";
@@ -35,14 +36,14 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   measureText
 } from "./chunk-MTGGOCND.js";
@@ -88,17 +89,6 @@ function stateFill(palette, isDark, nodeColor, colorOff, fillMode) {
 function stateStroke(palette, nodeColor, colorOff) {
   return nodeColor ?? stateDefaultColor(palette, colorOff);
 }
-function selfLoopPath(node) {
-  const cx = node.x;
-  const cy = node.y;
-  const r = node.width / 2;
-  const startX = cx + r;
-  const startY = cy - 5;
-  const endX = cx + r;
-  const endY = cy + 5;
-  const loopR = 25;
-  return `M ${startX} ${startY} C ${startX + loopR * 2} ${startY - loopR * 2}, ${endX + loopR * 2} ${endY + loopR * 2}, ${endX} ${endY}`;
-}
 function renderState(container, graph, layout, palette, isDark, onClickItem, exportDims) {
   d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -244,42 +234,46 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     groupWrapper.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "st-group");
     groupWrapper.append("text").attr("x", gx + 8).attr("y", gy + sGroupLabelFontSize + 4).attr("fill", strokeColor).attr("font-size", sGroupLabelFontSize).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "st-group-label").text(group.label);
   }
-  const selfLoopEdges = /* @__PURE__ */ new Set();
-  for (const edge of layout.edges) {
-    if (edge.source === edge.target) selfLoopEdges.add(edge.lineNumber);
-  }
-  const nodePositionMap = /* @__PURE__ */ new Map();
-  for (const node of layout.nodes) {
-    nodePositionMap.set(node.id, node);
-  }
   const LABEL_PAD = 8;
   const LABEL_H = 16;
   const PERP_OFFSET = 10;
+  const nodeCenters = /* @__PURE__ */ new Map();
+  for (const node of layout.nodes) nodeCenters.set(node.id, node);
   const labelPositions = [];
   for (let ei = 0; ei < layout.edges.length; ei++) {
     const edge = layout.edges[ei];
     if (!edge.label) continue;
     const bgW = measureText(edge.label, sEdgeLabelFontSize) + LABEL_PAD;
     let lx, ly;
-    if (edge.source === edge.target) {
-      const node = nodePositionMap.get(edge.source);
-      if (!node) continue;
-      lx = node.x + node.width / 2 + 30;
-      ly = node.y;
-    } else if (edge.points.length >= 2) {
+    if (edge.points.length >= 2) {
       const midIdx = Math.floor(edge.points.length / 2);
       const midPt = edge.points[midIdx];
       const prev = edge.points[Math.max(0, midIdx - 1)];
       const next = edge.points[Math.min(edge.points.length - 1, midIdx + 1)];
-      const dx = next.x - prev.x;
-      const dy = next.y - prev.y;
-      const len = Math.sqrt(dx * dx + dy * dy);
-      if (len > 0) {
-        lx = midPt.x + -dy / len * PERP_OFFSET;
-        ly = midPt.y + dx / len * PERP_OFFSET;
+      const self = edge.source === edge.target;
+      const node = self ? nodeCenters.get(edge.source) : void 0;
+      if (self && node) {
+        const ox = midPt.x - node.x;
+        const oy = midPt.y - node.y;
+        const olen = Math.sqrt(ox * ox + oy * oy);
+        if (olen > 0) {
+          lx = midPt.x + ox / olen * PERP_OFFSET;
+          ly = midPt.y + oy / olen * PERP_OFFSET;
+        } else {
+          lx = midPt.x;
+          ly = midPt.y;
+        }
       } else {
-        lx = midPt.x;
-        ly = midPt.y;
+        const dx = next.x - prev.x;
+        const dy = next.y - prev.y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (len > 0) {
+          lx = midPt.x + -dy / len * PERP_OFFSET;
+          ly = midPt.y + dx / len * PERP_OFFSET;
+        } else {
+          lx = midPt.x;
+          ly = midPt.y;
+        }
       }
     } else {
       continue;
@@ -305,18 +299,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     const edgeG = contentG.append("g").attr("class", "st-edge-group").attr("data-line-number", String(edge.lineNumber)).attr("data-source", edge.source).attr("data-target", edge.target);
     const edgeColor = palette.textMuted;
     const markerId = "st-arrow";
-    if (edge.source === edge.target) {
-      const node = nodePositionMap.get(edge.source);
-      if (node) {
-        edgeG.append("path").attr("d", selfLoopPath(node)).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
-        const lp = labelPosMap.get(ei);
-        if (edge.label && lp) {
-          edgeG.append("rect").attr("x", lp.x - lp.w / 2).attr("y", lp.y - lp.h / 2 - 1).attr("width", lp.w).attr("height", lp.h).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "st-edge-label-bg");
-          edgeG.append("text").attr("x", lp.x).attr("y", lp.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", sEdgeLabelFontSize).attr("class", "st-edge-label").text(edge.label);
-        }
-      }
-    } else if (edge.points.length >= 2) {
-      const pathD = edgeSplinePath(edge.points);
+    if (edge.points.length >= 2) {
+      const pathD = edge.source === edge.target ? selfLoopArcPath(edge.points) ?? edgeSplinePath(edge.points) : edgeSplinePath(edge.points);
       if (pathD) {
         edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
       }
@@ -481,4 +465,4 @@ export {
   renderState,
   renderStateForExport
 };
-//# sourceMappingURL=chunk-XFLLYY3V.js.map
+//# sourceMappingURL=chunk-UBDVAHGK.js.map

package/dist/{chunk-JL7BDLC6.js → chunk-UH5YTZN7.js}

@@ -11,7 +11,7 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-UBW53CNS.js";
+} from "./chunk-3E4YB6TY.js";
 import {
   layoutInlineHeader
 } from "./chunk-MG3DE3VO.js";
@@ -23,10 +23,10 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   computeLegendLayout
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
@@ -2151,4 +2151,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-JL7BDLC6.js.map
+//# sourceMappingURL=chunk-UH5YTZN7.js.map

package/dist/{chunk-GEURKGZS.js → chunk-V4NHFY22.js}

@@ -16,13 +16,13 @@ import {
 } from "./chunk-DEW62ON3.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QT5UMFPE.js";
+} from "./chunk-U4DS2ODO.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-4SXHMFFP.js";
+} from "./chunk-VRPV6QXR.js";
 import {
   FONT_FAMILY
-} from "./chunk-UTCPNJND.js";
+} from "./chunk-53SEVJQM.js";
 import {
   LEGEND_HEIGHT,
   measureLegendText
@@ -1154,4 +1154,4 @@ export {
   renderKanban,
   renderKanbanForExport
 };
-//# sourceMappingURL=chunk-GEURKGZS.js.map
+//# sourceMappingURL=chunk-V4NHFY22.js.map

package/dist/{chunk-4SXHMFFP.js → chunk-VRPV6QXR.js}

@@ -108,9 +108,10 @@ function entriesWidth(entries) {
   }
   return w;
 }
-function entryWidth(value) {
+function legendEntryWidth(value) {
   return LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
 }
+var entryWidth = legendEntryWidth;
 function controlWidth(control) {
   let w = CONTROL_PILL_PAD;
   if (control.label) {
@@ -125,12 +126,12 @@ function controlWidth(control) {
   }
   return w;
 }
-function capsuleWidth(name, entries, containerWidth, addonWidth = 0) {
+function capsuleWidth(name, entries, containerWidth, addonWidth = 0, trailWidth = 0) {
   const pw = pillWidth(name);
   const maxCapsuleW = containerWidth;
   const baseW = LEGEND_CAPSULE_PAD * 2 + pw + 4 + addonWidth;
   const ew = entriesWidth(entries);
-  const singleRowW = baseW + ew;
+  const singleRowW = baseW + ew + trailWidth;
   if (singleRowW <= maxCapsuleW + 0.5) {
     return {
       width: singleRowW,
@@ -139,7 +140,7 @@ function capsuleWidth(name, entries, containerWidth, addonWidth = 0) {
       visibleEntries: entries.length
     };
   }
-  const rowWidth = maxCapsuleW - LEGEND_CAPSULE_PAD;
+  const rowWidth = maxCapsuleW - LEGEND_CAPSULE_PAD - trailWidth;
   let row = 1;
   let rowX = LEGEND_CAPSULE_PAD + pw + 4 + addonWidth;
   let visible = 0;
@@ -321,7 +322,8 @@ function computeLegendLayout(config, state, containerWidth) {
       activeCapsule = buildCapsuleLayout(
         g,
         groupAvailW,
-        config.capsulePillAddonWidth ?? 0
+        config.capsulePillAddonWidth ?? 0,
+        config.capsuleTrailingAddonWidth ?? 0
       );
     } else if (!activeGroupName || config.showInactivePills) {
       const pw = pillWidth(g.name);
@@ -360,14 +362,15 @@ function computeLegendLayout(config, state, containerWidth) {
     }
   };
 }
-function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
+function buildCapsuleLayout(group, containerWidth, addonWidth = 0, trailWidth = 0) {
   if (group.gradient) return buildGradientCapsuleLayout(group, group.gradient);
   const pw = pillWidth(group.name);
   const info = capsuleWidth(
     group.name,
     group.entries,
     containerWidth,
-    addonWidth
+    addonWidth,
+    trailWidth
   );
   const pill = {
     groupName: group.name,
@@ -381,7 +384,7 @@ function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
   const ex = LEGEND_CAPSULE_PAD + pw + 4 + addonWidth;
   let ey = 0;
   let rowX = ex;
-  const maxRowW = containerWidth - LEGEND_CAPSULE_PAD;
+  const maxRowW = containerWidth - LEGEND_CAPSULE_PAD - trailWidth;
   let currentRow = 0;
   for (let i = 0; i < info.visibleEntries; i++) {
     const entry = group.entries[i];
@@ -433,7 +436,12 @@ function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
     pill,
     entries,
     ...info.moreCount > 0 && { moreCount: info.moreCount },
-    ...addonWidth > 0 && { addonX: LEGEND_CAPSULE_PAD + pw + 4 }
+    ...addonWidth > 0 && { addonX: LEGEND_CAPSULE_PAD + pw + 4 },
+    // After the last entry, on whatever row that entry ended on — `rowX` and
+    // `ey` are exactly the cursor the loop left behind.
+    ...trailWidth > 0 && {
+      trailingAddon: { x: rowX, y: ey, width: trailWidth }
+    }
   };
 }
 function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW, alignLeft = false, controlsGroup) {
@@ -528,10 +536,11 @@ function getMaxLegendReservedHeight(config, containerWidth) {
   const groups = config.groups;
   if (groups.length === 0) return LEGEND_HEIGHT;
   const addon = config.capsulePillAddonWidth ?? 0;
+  const trail = config.capsuleTrailingAddonWidth ?? 0;
   let max = LEGEND_HEIGHT;
   for (const g of groups) {
     if (g.entries.length === 0) continue;
-    const info = capsuleWidth(g.name, g.entries, containerWidth, addon);
+    const info = capsuleWidth(g.name, g.entries, containerWidth, addon, trail);
     const h = info.entryRows * LEGEND_HEIGHT;
     if (h > max) max = h;
   }
@@ -551,7 +560,8 @@ function getLegendExtent(config, state, containerWidth) {
     const c = layout.activeCapsule;
     track(c.x, c.y, c.width, c.height);
   }
-  for (const pill of layout.pills) track(pill.x, pill.y, pill.width, pill.height);
+  for (const pill of layout.pills)
+    track(pill.x, pill.y, pill.width, pill.height);
   return {
     width: right - (left === Infinity ? 0 : left),
     height: bottom || LEGEND_HEIGHT
@@ -560,10 +570,11 @@ function getLegendExtent(config, state, containerWidth) {
 
 export {
   compactNumber,
+  legendEntryWidth,
   controlsGroupCapsuleWidth,
   computeLegendLayout,
   getLegendReservedHeight,
   getMaxLegendReservedHeight,
   getLegendExtent
 };
-//# sourceMappingURL=chunk-4SXHMFFP.js.map
+//# sourceMappingURL=chunk-VRPV6QXR.js.map