@diagrammo/dgmo 0.7.2 → 0.7.3

package/dist/index.js

@@ -13169,6 +13169,9 @@ function renderInitiativeStatus(container, parsed, layout, palette, isDark, opti
       const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
       const groupW = isActive ? lg.width : pillW;
       const gEl = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "is-legend-group").attr("data-legend-group", lg.key).style("cursor", "pointer");
+      if (!isActive) {
+        gEl.attr("data-export-ignore", "true");
+      }
       if (isActive) {
         gEl.append("rect").attr("width", groupW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
       }
@@ -13181,17 +13184,32 @@ function renderInitiativeStatus(container, parsed, layout, palette, isDark, opti
       gEl.append("text").attr("x", pillXOff + pillW / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(lg.name);
       if (isActive) {
         const hiddenSet = !lg.isStatus ? hiddenTagValues?.get(lg.key) : void 0;
-        let entryX = pillXOff + pillW + 4;
+        const entryStartX = pillXOff + pillW + 4;
+        const entryData = [];
+        let estimatedX = entryStartX;
         for (const entry of lg.entries) {
           const isHidden = hiddenSet?.has(entry.value) ?? false;
-          const entryG = gEl.append("g").attr("data-legend-entry", entry.value).style("cursor", !lg.isStatus ? "pointer" : "default");
+          const estimatedTextW = entry.label.length * LEGEND_ENTRY_FONT_W;
+          const entryG = gEl.append("g").attr("data-legend-entry", entry.value).attr("transform", `translate(${estimatedX}, 0)`).style("cursor", "pointer");
+          const entryW = LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + estimatedTextW + LEGEND_ENTRY_TRAIL;
+          entryG.append("rect").attr("x", -2).attr("y", 0).attr("width", entryW + 4).attr("height", LEGEND_HEIGHT).attr("fill", "transparent");
           if (isHidden) {
-            entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", "none").attr("stroke", entry.color).attr("stroke-width", 1.2).attr("opacity", 0.5);
+            entryG.append("circle").attr("cx", LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", "none").attr("stroke", entry.color).attr("stroke-width", 1.2).attr("opacity", 0.5);
           } else {
-            entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+            entryG.append("circle").attr("cx", LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
           }
-          entryG.append("text").attr("x", entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).attr("opacity", isHidden ? 0.4 : 1).attr("text-decoration", isHidden ? "line-through" : "none").text(entry.label);
-          entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+          const textEl = entryG.append("text").attr("x", LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).attr("opacity", isHidden ? 0.4 : 1).attr("text-decoration", isHidden ? "line-through" : "none").text(entry.label);
+          entryData.push({ g: entryG, textEl: textEl.node(), estimatedW: estimatedTextW });
+          estimatedX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + estimatedTextW + LEGEND_ENTRY_TRAIL;
+        }
+        let reflowX = entryStartX;
+        for (const ed of entryData) {
+          const measuredW = ed.textEl.getComputedTextLength?.() ?? 0;
+          const textW = measuredW > 0 ? measuredW : ed.estimatedW;
+          ed.g.attr("transform", `translate(${reflowX}, 0)`);
+          const actualEntryW = LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + textW + LEGEND_ENTRY_TRAIL;
+          ed.g.select("rect").attr("width", actualEntryW + 4);
+          reflowX += actualEntryW;
         }
       }
       cursorX += groupW + LEGEND_GROUP_GAP;
@@ -25437,6 +25455,7 @@ function finalizeSvgExport(container, theme, palette, options) {
   }
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
+  svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
   const svgHtml = svgEl.outerHTML;
   document.body.removeChild(container);
   if (options?.branding !== false) {