@diagrammo/dgmo 0.1.2 → 0.1.4

package/dist/index.js

@@ -1606,6 +1606,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 +1905,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;
@@ -2119,7 +2132,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 +2255,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) {
@@ -2425,7 +2438,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;