@diagrammo/dgmo 0.2.6 → 0.2.8

package/src/sequence/renderer.ts

@@ -11,9 +11,10 @@ import type {
   SequenceElement,
   SequenceGroup,
   SequenceMessage,
+  SequenceNote,
   SequenceParticipant,
 } from './parser';
-import { isSequenceBlock, isSequenceSection } from './parser';
+import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
 
 // ============================================================
 // Layout Constants
@@ -30,6 +31,64 @@ const MESSAGE_START_OFFSET = 30;
 const LIFELINE_TAIL = 30;
 const ARROWHEAD_SIZE = 8;
 
+// Note rendering constants
+const NOTE_MAX_W = 200;
+const NOTE_FOLD = 10;
+const NOTE_PAD_H = 8;
+const NOTE_PAD_V = 6;
+const NOTE_FONT_SIZE = 10;
+const NOTE_LINE_H = 14;
+const NOTE_GAP = 15;
+const NOTE_CHAR_W = 6;
+const NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
+
+interface InlineSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+  href?: string;
+}
+
+function parseInlineMarkdown(text: string): InlineSpan[] {
+  const spans: InlineSpan[] = [];
+  const regex = /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|([^*_`[]+)/g;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match[1]) spans.push({ text: match[1], bold: true });       // **bold**
+    else if (match[2]) spans.push({ text: match[2], bold: true });  // __bold__
+    else if (match[3]) spans.push({ text: match[3], italic: true }); // *italic*
+    else if (match[4]) spans.push({ text: match[4], italic: true }); // _italic_
+    else if (match[5]) spans.push({ text: match[5], code: true });   // `code`
+    else if (match[6]) spans.push({ text: match[6], href: match[7] }); // [text](url)
+    else if (match[8]) spans.push({ text: match[8] });
+  }
+  return spans;
+}
+
+function wrapTextLines(text: string, maxChars: number): string[] {
+  const rawLines = text.split('\n');
+  const wrapped: string[] = [];
+  for (const line of rawLines) {
+    if (line.length <= maxChars) {
+      wrapped.push(line);
+    } else {
+      const words = line.split(' ');
+      let current = '';
+      for (const word of words) {
+        if (current && (current + ' ' + word).length > maxChars) {
+          wrapped.push(current);
+          current = word;
+        } else {
+          current = current ? current + ' ' + word : word;
+        }
+      }
+      if (current) wrapped.push(current);
+    }
+  }
+  return wrapped;
+}
+
 // Mix two hex colors in sRGB: pct% of a, rest of b
 function mix(a: string, b: string, pct: number): string {
   const parse = (h: string) => {
@@ -440,11 +499,16 @@ export function groupMessagesBySection(
           ...collectIndices(el.children),
           ...collectIndices(el.elseChildren)
         );
-      } else if (isSequenceSection(el)) {
-        // Sections inside blocks are not top-level — skip
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            indices.push(...collectIndices(branch.children));
+          }
+        }
+      } else if (isSequenceSection(el) || isSequenceNote(el)) {
+        // Sections and notes inside blocks are not messages — skip
         continue;
       } else {
-        const idx = messages.indexOf(el);
+        const idx = messages.indexOf(el as SequenceMessage);
         if (idx >= 0) indices.push(idx);
       }
     }
@@ -460,8 +524,8 @@ export function groupMessagesBySection(
       // Collect messages from this element into the current group
       if (isSequenceBlock(el)) {
         currentGroup.messageIndices.push(...collectIndices([el]));
-      } else {
-        const idx = messages.indexOf(el);
+      } else if (!isSequenceNote(el)) {
+        const idx = messages.indexOf(el as SequenceMessage);
         if (idx >= 0) currentGroup.messageIndices.push(idx);
       }
     }
@@ -793,8 +857,16 @@ export function renderSequenceDiagram(
       if (isSequenceBlock(el)) {
         const idx = findFirstMsgIndex(el.children);
         if (idx >= 0) return idx;
-      } else if (!isSequenceSection(el)) {
-        const idx = messages.indexOf(el);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            const branchIdx = findFirstMsgIndex(branch.children);
+            if (branchIdx >= 0) return branchIdx;
+          }
+        }
+        const elseIdx = findFirstMsgIndex(el.elseChildren);
+        if (elseIdx >= 0) return elseIdx;
+      } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
+        const idx = messages.indexOf(el as SequenceMessage);
         if (idx >= 0 && !hiddenMsgIndices.has(idx)) return idx;
       }
     }
@@ -820,6 +892,14 @@ export function renderSequenceDiagram(
       const firstIdx = findFirstMsgIndex(el.children);
       if (firstIdx >= 0) addExtra(firstIdx, BLOCK_HEADER_SPACE);
 
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          const firstBranchIdx = findFirstMsgIndex(branch.children);
+          if (firstBranchIdx >= 0) addExtra(firstBranchIdx, BLOCK_HEADER_SPACE);
+          markBlockSpacing(branch.children);
+        }
+      }
+
       const firstElseIdx = findFirstMsgIndex(el.elseChildren);
       if (firstElseIdx >= 0) addExtra(firstElseIdx, BLOCK_HEADER_SPACE);
 
@@ -837,6 +917,38 @@ export function renderSequenceDiagram(
     markBlockSpacing(elements);
   }
 
+  // Note spacing — add vertical room after messages that have notes attached
+  const NOTE_OFFSET_BELOW = 16; // gap between message arrow and top of note box
+  const computeNoteHeight = (text: string): number => {
+    const lines = wrapTextLines(text, NOTE_CHARS_PER_LINE);
+    return lines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
+  };
+  const markNoteSpacing = (els: SequenceElement[]): void => {
+    for (let i = 0; i < els.length; i++) {
+      const el = els[i];
+      if (isSequenceNote(el)) {
+        const noteH = computeNoteHeight(el.text);
+        // Find the next non-note element after this note
+        const nextIdx =
+          i + 1 < els.length ? findFirstMsgIndex([els[i + 1]]) : -1;
+        if (nextIdx >= 0) {
+          addExtra(nextIdx, noteH + NOTE_OFFSET_BELOW);
+        }
+      } else if (isSequenceBlock(el)) {
+        markNoteSpacing(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            markNoteSpacing(branch.children);
+          }
+        }
+        markNoteSpacing(el.elseChildren);
+      }
+    }
+  };
+  if (elements && elements.length > 0) {
+    markNoteSpacing(elements);
+  }
+
   // --- Section-aware Y layout ---
   // Sections get their own Y positions computed from content above them (not anchored
   // to messages below). This ensures toggling collapse/expand doesn't move the divider.
@@ -856,16 +968,28 @@ export function renderSequenceDiagram(
       for (const child of block.children) {
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
-        } else if (!isSequenceSection(child)) {
-          const idx = messages.indexOf(child);
+        } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
+          const idx = messages.indexOf(child as SequenceMessage);
           if (idx >= 0) indices.push(idx);
         }
       }
+      if (block.elseIfBranches) {
+        for (const branch of block.elseIfBranches) {
+          for (const child of branch.children) {
+            if (isSequenceBlock(child)) {
+              indices.push(...collectMsgIndicesFromBlock(child));
+            } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
+              const idx = messages.indexOf(child as SequenceMessage);
+              if (idx >= 0) indices.push(idx);
+            }
+          }
+        }
+      }
       for (const child of block.elseChildren) {
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
-        } else if (!isSequenceSection(child)) {
-          const idx = messages.indexOf(child);
+        } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
+          const idx = messages.indexOf(child as SequenceMessage);
           if (idx >= 0) indices.push(idx);
         }
       }
@@ -881,7 +1005,7 @@ export function renderSequenceDiagram(
       } else if (isSequenceBlock(el)) {
         currentTarget.push(...collectMsgIndicesFromBlock(el));
       } else {
-        const idx = messages.indexOf(el);
+        const idx = messages.indexOf(el as SequenceMessage);
         if (idx >= 0) currentTarget.push(idx);
       }
     }
@@ -1212,8 +1336,13 @@ export function renderSequenceDiagram(
           ...collectMsgIndices(el.children),
           ...collectMsgIndices(el.elseChildren)
         );
-      } else if (!isSequenceSection(el)) {
-        const idx = messages.indexOf(el);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            indices.push(...collectMsgIndices(branch.children));
+          }
+        }
+      } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
+        const idx = messages.indexOf(el as SequenceMessage);
         if (idx >= 0) indices.push(idx);
       }
     }
@@ -1242,8 +1371,21 @@ export function renderSequenceDiagram(
       if (!isSequenceBlock(el)) continue;
 
       const ifIndices = collectMsgIndices(el.children);
+      const elseIfBranchData: { label: string; indices: number[] }[] = [];
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          elseIfBranchData.push({
+            label: branch.label,
+            indices: collectMsgIndices(branch.children),
+          });
+        }
+      }
       const elseIndices = collectMsgIndices(el.elseChildren);
-      const allIndices = [...ifIndices, ...elseIndices];
+      const allIndices = [
+        ...ifIndices,
+        ...elseIfBranchData.flatMap((b) => b.indices),
+        ...elseIndices,
+      ];
       if (allIndices.length === 0) continue;
 
       // Find render step range
@@ -1308,6 +1450,34 @@ export function renderSequenceDiagram(
         blockLine: el.lineNumber,
       });
 
+      // Else-if dividers
+      for (const branchData of elseIfBranchData) {
+        if (branchData.indices.length > 0) {
+          let firstBranchStep = Infinity;
+          for (const mi of branchData.indices) {
+            const first = msgToFirstStep.get(mi);
+            if (first !== undefined)
+              firstBranchStep = Math.min(firstBranchStep, first);
+          }
+          if (firstBranchStep < Infinity) {
+            const dividerY = stepY(firstBranchStep) - stepSpacing / 2;
+            deferredLines.push({
+              x1: frameX,
+              y1: dividerY,
+              x2: frameX + frameW,
+              y2: dividerY,
+            });
+            deferredLabels.push({
+              x: frameX + 6,
+              y: dividerY + 14,
+              text: `else if ${branchData.label}`,
+              bold: false,
+              italic: true,
+            });
+          }
+        }
+      }
+
       // Else divider
       if (elseIndices.length > 0) {
         let firstElseStep = Infinity;
@@ -1336,6 +1506,11 @@ export function renderSequenceDiagram(
 
       // Recurse into nested blocks
       renderBlockFrames(el.children, depth + 1);
+      if (el.elseIfBranches) {
+        for (const branch of el.elseIfBranches) {
+          renderBlockFrames(branch.children, depth + 1);
+        }
+      }
       renderBlockFrames(el.elseChildren, depth + 1);
     }
   };
@@ -1681,6 +1856,157 @@ export function renderSequenceDiagram(
       }
     }
   });
+
+  // Render notes — folded-corner boxes attached to participant lifelines
+  const noteFill = isDark
+    ? mix(palette.surface, palette.bg, 50)
+    : mix(palette.bg, palette.surface, 15);
+
+  const findAssociatedStep = (note: SequenceNote): number => {
+    let bestMsgIndex = -1;
+    let bestLine = -1;
+    for (let mi = 0; mi < messages.length; mi++) {
+      if (
+        messages[mi].lineNumber < note.lineNumber &&
+        messages[mi].lineNumber > bestLine &&
+        !hiddenMsgIndices.has(mi)
+      ) {
+        bestLine = messages[mi].lineNumber;
+        bestMsgIndex = mi;
+      }
+    }
+    if (bestMsgIndex < 0) return -1;
+    return msgToFirstStep.get(bestMsgIndex) ?? -1;
+  };
+
+  const renderNoteElements = (els: SequenceElement[]): void => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        const px = participantX.get(el.participantId);
+        if (px === undefined) continue;
+        const si = findAssociatedStep(el);
+        if (si < 0) continue;
+        const noteY = stepY(si);
+
+        const wrappedLines = wrapTextLines(el.text, NOTE_CHARS_PER_LINE);
+        const noteH = wrappedLines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
+        const maxLineLen = Math.max(...wrappedLines.map((l) => l.length));
+        const noteW = Math.min(
+          NOTE_MAX_W,
+          Math.max(80, maxLineLen * NOTE_CHAR_W + NOTE_PAD_H * 2 + NOTE_FOLD)
+        );
+        const isRight = el.position === 'right';
+        const noteX = isRight
+          ? px + ACTIVATION_WIDTH + NOTE_GAP
+          : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
+        const noteTopY = noteY + NOTE_OFFSET_BELOW;
+
+        // Wrap in <g> with data attributes for toggle support
+        const noteG = svg
+          .append('g')
+          .attr('class', 'note')
+          .attr('data-note-toggle', '')
+          .attr('data-line-number', String(el.lineNumber))
+          .attr('data-line-end', String(el.endLineNumber));
+
+        // Folded-corner path
+        noteG
+          .append('path')
+          .attr(
+            'd',
+            [
+              `M ${noteX} ${noteTopY}`,
+              `L ${noteX + noteW - NOTE_FOLD} ${noteTopY}`,
+              `L ${noteX + noteW} ${noteTopY + NOTE_FOLD}`,
+              `L ${noteX + noteW} ${noteTopY + noteH}`,
+              `L ${noteX} ${noteTopY + noteH}`,
+              'Z',
+            ].join(' ')
+          )
+          .attr('fill', noteFill)
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 0.75)
+          .attr('class', 'note-box');
+
+        // Fold triangle
+        noteG
+          .append('path')
+          .attr(
+            'd',
+            [
+              `M ${noteX + noteW - NOTE_FOLD} ${noteTopY}`,
+              `L ${noteX + noteW - NOTE_FOLD} ${noteTopY + NOTE_FOLD}`,
+              `L ${noteX + noteW} ${noteTopY + NOTE_FOLD}`,
+            ].join(' ')
+          )
+          .attr('fill', 'none')
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 0.75)
+          .attr('class', 'note-fold');
+
+        // Render text with inline markdown
+        wrappedLines.forEach((line, li) => {
+          const textY =
+            noteTopY + NOTE_PAD_V + (li + 1) * NOTE_LINE_H - 3;
+          const isBullet = line.startsWith('- ');
+          const bulletIndent = isBullet ? 10 : 0;
+          const displayLine = isBullet ? line.slice(2) : line;
+          const textEl = noteG
+            .append('text')
+            .attr('x', noteX + NOTE_PAD_H + bulletIndent)
+            .attr('y', textY)
+            .attr('fill', palette.text)
+            .attr('font-size', NOTE_FONT_SIZE)
+            .attr('class', 'note-text');
+
+          if (isBullet) {
+            noteG
+              .append('text')
+              .attr('x', noteX + NOTE_PAD_H)
+              .attr('y', textY)
+              .attr('fill', palette.text)
+              .attr('font-size', NOTE_FONT_SIZE)
+              .text('\u2022');
+          }
+
+          const spans = parseInlineMarkdown(displayLine);
+          for (const span of spans) {
+            if (span.href) {
+              const a = textEl
+                .append('a')
+                .attr('href', span.href);
+              a.append('tspan')
+                .text(span.text)
+                .attr('fill', palette.primary)
+                .style('text-decoration', 'underline');
+            } else {
+              const tspan = textEl
+                .append('tspan')
+                .text(span.text);
+              if (span.bold) tspan.attr('font-weight', 'bold');
+              if (span.italic) tspan.attr('font-style', 'italic');
+              if (span.code)
+                tspan
+                  .attr('font-family', 'monospace')
+                  .attr('font-size', NOTE_FONT_SIZE - 1);
+            }
+          }
+        });
+      } else if (isSequenceBlock(el)) {
+        renderNoteElements(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            renderNoteElements(branch.children);
+          }
+        }
+        renderNoteElements(el.elseChildren);
+      }
+    }
+  };
+
+  if (elements && elements.length > 0) {
+    renderNoteElements(elements);
+  }
 }
 
 function renderParticipant(