@diagrammo/dgmo 0.1.3 → 0.1.5

package/dist/index.js

@@ -1595,6 +1595,15 @@ var init_palettes = __esm({
   }
 });
 
+// src/fonts.ts
+var FONT_FAMILY;
+var init_fonts = __esm({
+  "src/fonts.ts"() {
+    "use strict";
+    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
+  }
+});
+
 // src/sequence/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -1606,6 +1615,16 @@ __export(renderer_exports, {
   renderSequenceDiagram: () => renderSequenceDiagram
 });
 import * as d3Selection from "d3-selection";
+function mix(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
 function renderRectParticipant(g, palette, isDark) {
   g.append("rect").attr("x", -W / 2).attr("y", 0).attr("width", W).attr("height", H).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark)).attr("stroke", stroke(palette)).attr("stroke-width", SW);
 }
@@ -1895,7 +1914,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   const allRenderSteps = buildRenderSequence(messages);
-  const renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  let renderSteps = hiddenMsgIndices.size > 0 ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex)) : allRenderSteps;
+  renderSteps = renderSteps.filter(
+    (s) => s.type === "call" || s.label
+  );
   const activations = activationsOff ? [] : computeActivations(renderSteps);
   const stepSpacing = 35;
   const BLOCK_HEADER_SPACE = 30;
@@ -2090,10 +2112,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style(
-    "font-family",
-    "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif"
-  );
+  const svg = d3Selection.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -2119,7 +2138,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxY = participantStartY - GROUP_PADDING_TOP;
     const boxH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
     const resolvedGroupColor = group.color ? resolveColor(group.color, palette) : void 0;
-    const fillColor = resolvedGroupColor ? `color-mix(in srgb, ${resolvedGroupColor} 10%, ${isDark ? palette.surface : palette.bg})` : isDark ? palette.surface : palette.bg;
+    const fillColor = resolvedGroupColor ? mix(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
     const strokeColor = resolvedGroupColor || palette.textMuted;
     svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
     svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
@@ -2242,7 +2261,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (msg) coveredLines.push(msg.lineNumber);
     }
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
-    const actFill = `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    const actFill = mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", palette.primary).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("class", "activation");
   });
   for (const ln of deferredLines) {
@@ -2414,6 +2433,7 @@ var init_renderer = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
     init_colors();
+    init_fonts();
     init_parser();
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
@@ -2425,7 +2445,7 @@ var init_renderer = __esm({
     MESSAGE_START_OFFSET = 30;
     LIFELINE_TAIL = 30;
     ARROWHEAD_SIZE = 8;
-    fill = (palette, isDark) => `color-mix(in srgb, ${palette.primary} ${isDark ? "15%" : "30%"}, ${isDark ? palette.surface : palette.bg})`;
+    fill = (palette, isDark) => mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     stroke = (palette) => palette.textMuted;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -3063,6 +3083,7 @@ function buildChartJsConfig(parsed, palette, _isDark) {
 }
 
 // src/echarts.ts
+init_fonts();
 init_colors();
 init_palettes();
 function parseEChart(content, palette) {
@@ -3297,7 +3318,7 @@ function buildEChartsOption(parsed, palette, _isDark) {
       color: textColor,
       fontSize: 18,
       fontWeight: "bold",
-      fontFamily: "system-ui, -apple-system, sans-serif"
+      fontFamily: FONT_FAMILY
     }
   } : void 0;
   const tooltipTheme = {
@@ -3940,6 +3961,7 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
 }
 
 // src/d3.ts
+init_fonts();
 init_colors();
 init_palettes();
 import * as d3Scale from "d3-scale";
@@ -5903,8 +5925,8 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem) {
     "transform",
     `translate(${width / 2},${titleHeight + cloudHeight / 2})`
   );
-  cloud().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font("system-ui, -apple-system, sans-serif").on("end", (layoutWords) => {
-    g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", "system-ui, -apple-system, sans-serif").style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).style(
+  cloud().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+    g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).style(
       "cursor",
       (d) => onClickItem && d.lineNumber ? "pointer" : "default"
     ).attr("text-anchor", "middle").attr(
@@ -5953,8 +5975,8 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
     );
-    cloud().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font("system-ui, -apple-system, sans-serif").on("end", (layoutWords) => {
-      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", "system-ui, -apple-system, sans-serif").style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
+    cloud().size([width, cloudHeight]).words(words.map((w) => ({ ...w, size: fontSize(w.weight) }))).padding(4).rotate(rotateFn).fontSize((d) => d.size).font(FONT_FAMILY).on("end", (layoutWords) => {
+      g.selectAll("text").data(layoutWords).join("text").style("font-size", (d) => `${d.size}px`).style("font-family", FONT_FAMILY).style("font-weight", "600").style("fill", (_d, i) => colors[i % colors.length]).attr("text-anchor", "middle").attr(
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
@@ -6558,6 +6580,7 @@ async function renderD3ForExport(content, theme, palette) {
       svgEl.style.background = "none";
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
     return svgEl.outerHTML;
   } finally {
     document.body.removeChild(container);