@diagrammo/dgmo 0.8.9 → 0.8.11

package/src/sequence/parser.ts

@@ -91,6 +91,7 @@ export interface SequenceMessage {
 export interface ElseIfBranch {
   label: string;
   children: SequenceElement[];
+  lineNumber: number;
 }
 
 export interface SequenceBlock {
@@ -100,6 +101,7 @@ export interface SequenceBlock {
   children: SequenceElement[];
   elseChildren: SequenceElement[];
   elseIfBranches?: ElseIfBranch[];
+  elseLineNumber?: number;
   lineNumber: number;
 }
 
@@ -1114,6 +1116,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
           const branch: ElseIfBranch = {
             label: elseIfMatch[1].trim(),
             children: [],
+            lineNumber,
           };
           if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
           top.block.elseIfBranches.push(branch);
@@ -1141,6 +1144,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         if (top.block.type === 'if') {
           top.inElse = true;
           top.activeElseIfBranch = undefined;
+          top.block.elseLineNumber = lineNumber;
         }
       }
       continue;

package/src/sequence/renderer.ts

@@ -24,18 +24,9 @@ import type {
 import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
 import { resolveSequenceTags } from './tag-resolution';
 import type { ResolvedTagMap } from './tag-resolution';
-import {
-  LEGEND_HEIGHT,
-  LEGEND_PILL_PAD,
-  LEGEND_PILL_FONT_SIZE,
-  LEGEND_CAPSULE_PAD,
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_DOT_GAP,
-  LEGEND_ENTRY_TRAIL,
-  LEGEND_GROUP_GAP,
-  measureLegendText,
-} from '../utils/legend-constants';
+import { LEGEND_HEIGHT } from '../utils/legend-constants';
+import { renderLegendD3 } from '../utils/legend-d3';
+import type { LegendConfig, LegendState } from '../utils/legend-types';
 import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 
 // ============================================================
@@ -1598,146 +1589,35 @@ export function renderSequenceDiagram(
   // Render legend pills for tag groups
   if (parsed.tagGroups.length > 0) {
     const legendY = TOP_MARGIN + titleOffset;
-    const groupBg = isDark
-      ? mix(palette.surface, palette.bg, 50)
-      : mix(palette.surface, palette.bg, 30);
-
-    // Pre-compute pill/capsule widths for centering
-    const legendItems: Array<{
-      group: (typeof parsed.tagGroups)[0];
-      isActive: boolean;
-      pillWidth: number;
-      totalWidth: number;
-      entries: Array<{ value: string; color: string }>;
-    }> = [];
-    for (const tg of parsed.tagGroups) {
-      if (tg.entries.length === 0) continue;
-      const isActive =
-        !!activeTagGroup &&
-        tg.name.toLowerCase() === activeTagGroup.toLowerCase();
-      const pillWidth =
-        measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-      const entries = tg.entries.map((e) => ({
-        value: e.value,
-        color: resolveColor(e.color) ?? e.color,
+    // Resolve tag colors for legend entries
+    const resolvedGroups = parsed.tagGroups
+      .filter((tg) => tg.entries.length > 0)
+      .map((tg) => ({
+        name: tg.name,
+        entries: tg.entries.map((e) => ({
+          value: e.value,
+          color: resolveColor(e.color) ?? e.color,
+        })),
       }));
-      let totalWidth = pillWidth;
-      if (isActive) {
-        let entriesWidth = 0;
-        for (const entry of entries) {
-          entriesWidth +=
-            LEGEND_DOT_R * 2 +
-            LEGEND_ENTRY_DOT_GAP +
-            measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
-            LEGEND_ENTRY_TRAIL;
-        }
-        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
-      }
-      legendItems.push({ group: tg, isActive, pillWidth, totalWidth, entries });
-    }
-
-    // Center legend horizontally
-    const totalLegendWidth =
-      legendItems.reduce((s, item) => s + item.totalWidth, 0) +
-      (legendItems.length - 1) * LEGEND_GROUP_GAP;
-    let legendX = (svgWidth - totalLegendWidth) / 2;
-
-    const legendContainer = svg.append('g').attr('class', 'sequence-legend');
-    if (activeTagGroup) {
-      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
-    }
-
-    for (const item of legendItems) {
-      const gEl = legendContainer
-        .append('g')
-        .attr('transform', `translate(${legendX}, ${legendY})`)
-        .attr('class', 'sequence-legend-group')
-        .attr('data-legend-group', item.group.name.toLowerCase())
-        .style('cursor', 'pointer');
-
-      // Outer capsule background (active only)
-      if (item.isActive) {
-        gEl
-          .append('rect')
-          .attr('width', item.totalWidth)
-          .attr('height', LEGEND_HEIGHT)
-          .attr('rx', LEGEND_HEIGHT / 2)
-          .attr('fill', groupBg);
-      }
-
-      const pillXOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
-      const pillYOff = LEGEND_CAPSULE_PAD;
-      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-
-      // Pill background
-      gEl
-        .append('rect')
-        .attr('x', pillXOff)
-        .attr('y', pillYOff)
-        .attr('width', item.pillWidth)
-        .attr('height', pillH)
-        .attr('rx', pillH / 2)
-        .attr('fill', item.isActive ? palette.bg : groupBg);
-
-      // Active pill border
-      if (item.isActive) {
-        gEl
-          .append('rect')
-          .attr('x', pillXOff)
-          .attr('y', pillYOff)
-          .attr('width', item.pillWidth)
-          .attr('height', pillH)
-          .attr('rx', pillH / 2)
-          .attr('fill', 'none')
-          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-          .attr('stroke-width', 0.75);
-      }
-
-      // Pill text
-      gEl
-        .append('text')
-        .attr('x', pillXOff + item.pillWidth / 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', item.isActive ? palette.text : palette.textMuted)
-        .attr('text-anchor', 'middle')
-        .text(item.group.name);
-
-      // Entries inside capsule (active only)
-      if (item.isActive) {
-        let entryX = pillXOff + item.pillWidth + 4;
-        for (const entry of item.entries) {
-          const entryG = gEl
-            .append('g')
-            .attr('data-legend-entry', entry.value.toLowerCase())
-            .style('cursor', 'pointer');
-
-          entryG
-            .append('circle')
-            .attr('cx', entryX + LEGEND_DOT_R)
-            .attr('cy', LEGEND_HEIGHT / 2)
-            .attr('r', LEGEND_DOT_R)
-            .attr('fill', entry.color);
-
-          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-          entryG
-            .append('text')
-            .attr('x', textX)
-            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
-            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-            .attr('fill', palette.textMuted)
-            .text(entry.value);
-
-          entryX =
-            textX +
-            measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
-            LEGEND_ENTRY_TRAIL;
-        }
-      }
-
-      legendX += item.totalWidth + LEGEND_GROUP_GAP;
-    }
+    const legendConfig: LegendConfig = {
+      groups: resolvedGroups,
+      position: { placement: 'top-center', titleRelation: 'below-title' },
+      mode: 'fixed',
+    };
+    const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
+    const legendG = svg
+      .append('g')
+      .attr('class', 'sequence-legend')
+      .attr('transform', `translate(0,${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      undefined,
+      svgWidth
+    );
   }
 
   // Render group boxes (behind participant shapes)
@@ -1882,6 +1762,7 @@ export function renderSequenceDiagram(
     y1: number;
     x2: number;
     y2: number;
+    blockLine?: number;
   }> = [];
 
   // Recursive block renderer — draws borders/dividers now, defers label text
@@ -1890,12 +1771,17 @@ export function renderSequenceDiagram(
       if (!isSequenceBlock(el)) continue;
 
       const ifIndices = collectMsgIndices(el.children);
-      const elseIfBranchData: { label: string; indices: number[] }[] = [];
+      const elseIfBranchData: {
+        label: string;
+        indices: number[];
+        lineNumber: number;
+      }[] = [];
       if (el.elseIfBranches) {
         for (const branch of el.elseIfBranches) {
           elseIfBranchData.push({
             label: branch.label,
             indices: collectMsgIndices(branch.children),
+            lineNumber: branch.lineNumber,
           });
         }
       }
@@ -1985,6 +1871,7 @@ export function renderSequenceDiagram(
               y1: dividerY,
               x2: frameX + frameW,
               y2: dividerY,
+              blockLine: branchData.lineNumber,
             });
             deferredLabels.push({
               x: frameX + 6,
@@ -1992,6 +1879,7 @@ export function renderSequenceDiagram(
               text: `else if ${branchData.label}`,
               bold: false,
               italic: true,
+              blockLine: branchData.lineNumber,
             });
           }
         }
@@ -2012,6 +1900,7 @@ export function renderSequenceDiagram(
             y1: dividerY,
             x2: frameX + frameW,
             y2: dividerY,
+            blockLine: el.elseLineNumber,
           });
           deferredLabels.push({
             x: frameX + 6,
@@ -2019,6 +1908,7 @@ export function renderSequenceDiagram(
             text: 'else',
             bold: false,
             italic: true,
+            blockLine: el.elseLineNumber,
           });
         }
       }
@@ -2100,7 +1990,7 @@ export function renderSequenceDiagram(
 
   // Render deferred else dividers (on top of activations)
   for (const ln of deferredLines) {
-    svg
+    const line = svg
       .append('line')
       .attr('x1', ln.x1)
       .attr('y1', ln.y1)
@@ -2108,7 +1998,10 @@ export function renderSequenceDiagram(
       .attr('y2', ln.y2)
       .attr('stroke', palette.textMuted)
       .attr('stroke-width', 1)
-      .attr('stroke-dasharray', '2 3');
+      .attr('stroke-dasharray', '2 3')
+      .attr('class', 'block-divider');
+    if (ln.blockLine !== undefined)
+      line.attr('data-block-line', String(ln.blockLine));
   }
 
   // Render deferred block labels (on top of activations)