@diagrammo/dgmo 0.8.20 → 0.8.22

package/src/graph/flowchart-parser.ts

@@ -5,7 +5,6 @@ import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
 import {
   measureIndent,
-  extractColor,
   inferArrowColor,
   parseFirstLine,
   OPTION_NOCOLON_RE,
@@ -32,55 +31,50 @@ interface NodeRef {
  * Try to parse a node reference from a text fragment.
  * Order matters: subroutine & document before process.
  */
-function parseNodeRef(text: string, palette?: PaletteColors): NodeRef | null {
+function parseNodeRef(text: string): NodeRef | null {
   const t = text.trim();
   if (!t) return null;
 
   // Subroutine: [[Label]]
   let m = t.match(/^\[\[([^\]]+)\]\]$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return {
-      id: nodeId('subroutine', label),
-      label,
-      shape: 'subroutine',
-      color,
-    };
+    const label = m[1].trim();
+    return { id: nodeId('subroutine', label), label, shape: 'subroutine' };
   }
 
   // Document: [Label~]
   m = t.match(/^\[([^\]]+)~\]$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return { id: nodeId('document', label), label, shape: 'document', color };
+    const label = m[1].trim();
+    return { id: nodeId('document', label), label, shape: 'document' };
   }
 
   // Process: [Label]
   m = t.match(/^\[([^\]]+)\]$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return { id: nodeId('process', label), label, shape: 'process', color };
+    const label = m[1].trim();
+    return { id: nodeId('process', label), label, shape: 'process' };
   }
 
   // Terminal: (Label) — use .+ (greedy) so (Label(color)) matches outermost parens
   m = t.match(/^\((.+)\)$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return { id: nodeId('terminal', label), label, shape: 'terminal', color };
+    const label = m[1].trim();
+    return { id: nodeId('terminal', label), label, shape: 'terminal' };
   }
 
   // Decision: <Label>
   m = t.match(/^<([^>]+)>$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return { id: nodeId('decision', label), label, shape: 'decision', color };
+    const label = m[1].trim();
+    return { id: nodeId('decision', label), label, shape: 'decision' };
   }
 
   // I/O: /Label/
   m = t.match(/^\/([^/]+)\/$/);
   if (m) {
-    const { label, color } = extractColor(m[1].trim(), palette);
-    return { id: nodeId('io', label), label, shape: 'io', color };
+    const label = m[1].trim();
+    return { id: nodeId('io', label), label, shape: 'io' };
   }
 
   return null;
@@ -370,7 +364,7 @@ export function parseFlowchart(
 
     if (segments.length === 1) {
       // Single node reference, no arrows
-      const ref = parseNodeRef(segments[0], palette);
+      const ref = parseNodeRef(segments[0]);
       if (ref) {
         const node = getOrCreateNode(ref, lineNumber);
         indentStack.push({ nodeId: node.id, indent });
@@ -398,7 +392,7 @@ export function parseFlowchart(
       }
 
       // This is a node text segment
-      const ref = parseNodeRef(seg, palette);
+      const ref = parseNodeRef(seg);
       if (!ref) continue;
 
       const node = getOrCreateNode(ref, lineNumber);

package/src/graph/layout.ts

@@ -3,6 +3,7 @@ import type {
   ParsedGraph,
   GraphNode,
   GraphEdge,
+  GraphGroup,
   GraphShape,
 } from './types';
 
@@ -33,12 +34,20 @@ export interface LayoutGroup {
   label: string;
   color?: string;
   lineNumber: number;
+  collapsed?: boolean;
   x: number;
   y: number;
   width: number;
   height: number;
 }
 
+export interface LayoutOptions {
+  /** Map of group ID → number of child nodes (for collapsed groups) */
+  collapsedChildCounts?: Map<string, number>;
+  /** Original groups before collapse (includes collapsed ones) */
+  originalGroups?: GraphGroup[];
+}
+
 export interface LayoutResult {
   nodes: LayoutNode[];
   edges: LayoutEdge[];
@@ -61,8 +70,33 @@ function computeNodeHeight(shape: GraphShape): number {
   return shape === 'decision' ? 60 : 50;
 }
 
-export function layoutGraph(graph: ParsedGraph): LayoutResult {
-  if (graph.nodes.length === 0) {
+export function layoutGraph(
+  graph: ParsedGraph,
+  options?: LayoutOptions
+): LayoutResult {
+  const collapsedChildCounts = options?.collapsedChildCounts;
+  const originalGroups = options?.originalGroups;
+
+  // Collapsed groups become synthetic nodes in the graph
+  const collapsedGroupNodes: GraphNode[] = [];
+  if (collapsedChildCounts && originalGroups) {
+    for (const group of originalGroups) {
+      if (collapsedChildCounts.has(group.id)) {
+        const count = collapsedChildCounts.get(group.id)!;
+        collapsedGroupNodes.push({
+          id: group.id,
+          label: `${group.label} (${count} state${count !== 1 ? 's' : ''})`,
+          shape: 'state',
+          lineNumber: group.lineNumber,
+          ...(group.color && { color: group.color }),
+        });
+      }
+    }
+  }
+
+  const allNodes = [...graph.nodes, ...collapsedGroupNodes];
+
+  if (allNodes.length === 0) {
     return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
   }
 
@@ -77,11 +111,11 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
 
   // Build a lookup for original node data
   const nodeDataMap = new Map<string, GraphNode>();
-  for (const node of graph.nodes) {
+  for (const node of allNodes) {
     nodeDataMap.set(node.id, node);
   }
 
-  // Add group parent nodes
+  // Add group parent nodes (only non-collapsed groups)
   if (graph.groups) {
     for (const group of graph.groups) {
       g.setNode(group.id, {
@@ -92,12 +126,12 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   }
 
   // Add nodes with computed dimensions
-  for (const node of graph.nodes) {
+  for (const node of allNodes) {
     const width = computeNodeWidth(node.label, node.shape);
     const height = computeNodeHeight(node.shape);
     g.setNode(node.id, { label: node.label, width, height });
 
-    // Set parent for grouped nodes
+    // Set parent for grouped nodes (only for non-collapsed groups)
     if (node.group && graph.groups?.some((gr) => gr.id === node.group)) {
       g.setParent(node.id, node.group);
     }
@@ -117,7 +151,11 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   dagre.layout(g);
 
   // Extract positioned nodes
-  const layoutNodes: LayoutNode[] = graph.nodes.map((node) => {
+  const collapsedGroupIds = collapsedChildCounts
+    ? new Set(collapsedChildCounts.keys())
+    : new Set<string>();
+
+  const layoutNodes: LayoutNode[] = allNodes.map((node) => {
     const pos = g.node(node.id);
     return {
       id: node.id,
@@ -147,10 +185,36 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   });
 
   // Compute group bounding boxes from member node positions
+  // Collapsed groups are included as layout groups with collapsed=true
+  // (their synthetic node is in layoutNodes for positioning)
   const layoutGroups: LayoutGroup[] = [];
-  if (graph.groups) {
+  const allGroups = graph.groups ?? [];
+
+  // Also include collapsed groups from originalGroups
+  if (originalGroups) {
+    for (const group of originalGroups) {
+      if (collapsedGroupIds.has(group.id)) {
+        const syntheticNode = layoutNodes.find((n) => n.id === group.id);
+        if (syntheticNode) {
+          layoutGroups.push({
+            id: group.id,
+            label: group.label,
+            color: group.color,
+            lineNumber: group.lineNumber,
+            collapsed: true,
+            x: syntheticNode.x - syntheticNode.width / 2,
+            y: syntheticNode.y - syntheticNode.height / 2,
+            width: syntheticNode.width,
+            height: syntheticNode.height,
+          });
+        }
+      }
+    }
+  }
+
+  if (allGroups.length > 0) {
     const nodeMap = new Map(layoutNodes.map((n) => [n.id, n]));
-    for (const group of graph.groups) {
+    for (const group of allGroups) {
       const members = group.nodeIds
         .map((id) => nodeMap.get(id))
         .filter((n): n is LayoutNode => n !== undefined);

package/src/graph/state-collapse.ts

@@ -0,0 +1,78 @@
+// ============================================================
+// State Diagram — Collapse/Expand Transform
+// ============================================================
+
+import type { ParsedGraph, GraphGroup } from './types';
+
+export interface StateCollapseResult {
+  parsed: ParsedGraph;
+  collapsedChildCounts: Map<string, number>;
+  originalGroups: GraphGroup[];
+}
+
+/**
+ * Pure transform: returns a new ParsedGraph with collapsed groups
+ * removed from the diagram content.
+ *
+ * - Children of collapsed groups removed from nodes
+ * - Edges redirected: endpoints in collapsed groups → group ID
+ * - Internal edges (both in same collapsed group) dropped
+ * - Duplicate edges (same source, target, label) deduplicated
+ * - Collapsed groups removed from groups[] (layout handles as nodes)
+ */
+export function collapseStateGroups(
+  parsed: ParsedGraph,
+  collapsedGroups: Set<string>
+): StateCollapseResult {
+  const originalGroups = parsed.groups ?? [];
+
+  if (collapsedGroups.size === 0 || originalGroups.length === 0) {
+    return { parsed, collapsedChildCounts: new Map(), originalGroups };
+  }
+
+  // Build group lookup by ID
+  const groupById = new Map<string, GraphGroup>();
+  for (const group of originalGroups) {
+    groupById.set(group.id, group);
+  }
+
+  // Build node → collapsed group lookup
+  const nodeToGroup = new Map<string, string>();
+  const collapsedChildCounts = new Map<string, number>();
+
+  for (const groupId of collapsedGroups) {
+    const group = groupById.get(groupId);
+    if (!group) continue;
+
+    for (const nodeId of group.nodeIds) {
+      nodeToGroup.set(nodeId, groupId);
+    }
+    collapsedChildCounts.set(groupId, group.nodeIds.length);
+  }
+
+  // Filter nodes: remove children of collapsed groups
+  const nodes = parsed.nodes.filter((n) => !nodeToGroup.has(n.id));
+
+  // Remap and deduplicate edges
+  const edgeKeys = new Set<string>();
+  const edges: typeof parsed.edges = [];
+  for (const edge of parsed.edges) {
+    const src = nodeToGroup.get(edge.source) ?? edge.source;
+    const tgt = nodeToGroup.get(edge.target) ?? edge.target;
+    // Drop internal edges (both endpoints in same collapsed group)
+    if (src === tgt && src !== edge.source) continue;
+    const key = `${src}|${tgt}|${edge.label ?? ''}`;
+    if (edgeKeys.has(key)) continue;
+    edgeKeys.add(key);
+    edges.push({ ...edge, source: src, target: tgt });
+  }
+
+  // Keep only groups that are not collapsed
+  const groups = originalGroups.filter((g) => !collapsedGroups.has(g.id));
+
+  return {
+    parsed: { ...parsed, nodes, edges, groups },
+    collapsedChildCounts,
+    originalGroups,
+  };
+}

package/src/graph/state-parser.ts

@@ -5,7 +5,6 @@ import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
 import {
   measureIndent,
-  extractColor,
   parseFirstLine,
   OPTION_NOCOLON_RE,
   ALL_CHART_TYPES,
@@ -173,10 +172,7 @@ interface NodeRef {
   color?: string;
 }
 
-function parseStateNodeRef(
-  text: string,
-  palette?: PaletteColors
-): NodeRef | null {
+function parseStateNodeRef(text: string): NodeRef | null {
   const t = text.trim();
   if (!t) return null;
 
@@ -189,14 +185,13 @@ function parseStateNodeRef(
     };
   }
 
-  // State: bare text with optional (color) suffix
-  const { label, color } = extractColor(t, palette);
+  // State: bare text
+  const label = t;
   if (!label) return null;
   return {
     id: `state:${label.toLowerCase().trim()}`,
     label,
     shape: 'state',
-    color,
   };
 }
 
@@ -380,7 +375,7 @@ export function parseState(
 
     if (segments.length === 1) {
       // Single state reference, no arrows — this is the canonical definition
-      const ref = parseStateNodeRef(segments[0], palette);
+      const ref = parseStateNodeRef(segments[0]);
       if (ref) {
         const node = getOrCreateNode(ref, lineNumber);
         // Standalone heading is the "definition" — update lineNumber so
@@ -409,7 +404,7 @@ export function parseState(
         continue;
       }
 
-      const ref = parseStateNodeRef(seg, palette);
+      const ref = parseStateNodeRef(seg);
       if (!ref) continue;
 
       const node = getOrCreateNode(ref, lineNumber);

package/src/graph/state-renderer.ts

@@ -11,7 +11,11 @@ import type { ParsedGraph } from './types';
 import type { LayoutResult, LayoutNode } from './layout';
 import { parseState } from './state-parser';
 import { layoutGraph } from './layout';
-import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from '../utils/title-constants';
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y,
+} from '../utils/title-constants';
 
 // ============================================================
 // Constants
@@ -38,12 +42,21 @@ function stateDefaultColor(palette: PaletteColors, colorOff?: boolean): string {
   return colorOff ? palette.textMuted : palette.colors.blue;
 }
 
-function stateFill(palette: PaletteColors, isDark: boolean, nodeColor?: string, colorOff?: boolean): string {
+function stateFill(
+  palette: PaletteColors,
+  isDark: boolean,
+  nodeColor?: string,
+  colorOff?: boolean
+): string {
   const color = nodeColor ?? stateDefaultColor(palette, colorOff);
   return mix(color, isDark ? palette.surface : palette.bg, 25);
 }
 
-function stateStroke(palette: PaletteColors, nodeColor?: string, colorOff?: boolean): string {
+function stateStroke(
+  palette: PaletteColors,
+  nodeColor?: string,
+  colorOff?: boolean
+): string {
   return nodeColor ?? stateDefaultColor(palette, colorOff);
 }
 
@@ -51,7 +64,8 @@ function stateStroke(palette: PaletteColors, nodeColor?: string, colorOff?: bool
 // Edge path generator
 // ============================================================
 
-const lineGenerator = d3Shape.line<{ x: number; y: number }>()
+const lineGenerator = d3Shape
+  .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
   .curve(d3Shape.curveBasis);
@@ -160,7 +174,10 @@ export function renderState(
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
       .attr('font-weight', TITLE_FONT_WEIGHT)
-      .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
+      .style(
+        'cursor',
+        onClickItem && graph.titleLineNumber ? 'pointer' : 'default'
+      )
       .text(graph.title);
 
     if (graph.titleLineNumber) {
@@ -168,8 +185,12 @@ export function renderState(
       if (onClickItem) {
         titleEl
           .on('click', () => onClickItem(graph.titleLineNumber!))
-          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
-          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+          .on('mouseenter', function () {
+            d3Selection.select(this).attr('opacity', 0.7);
+          })
+          .on('mouseleave', function () {
+            d3Selection.select(this).attr('opacity', 1);
+          });
       }
     }
   }
@@ -180,12 +201,15 @@ export function renderState(
     .attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
 
   // Render groups (background layer)
+  // Collapsed groups are rendered in the node layer instead — skip them here
   for (const group of layout.groups) {
+    if (group.collapsed) continue;
     if (group.width === 0 && group.height === 0) continue;
     const gx = group.x - GROUP_EXTRA_PADDING;
     const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
     const gw = group.width + GROUP_EXTRA_PADDING * 2;
-    const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
+    const gh =
+      group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
 
     const fillColor = group.color
       ? mix(group.color, isDark ? palette.surface : palette.bg, 10)
@@ -198,13 +222,13 @@ export function renderState(
       .append('g')
       .attr('class', 'st-group-wrapper')
       .attr('data-line-number', String(group.lineNumber))
-      .attr('data-group-id', group.id);
-
-    if (onClickItem) {
-      groupWrapper.style('cursor', 'pointer').on('click', () => {
-        onClickItem(group.lineNumber);
-      });
-    }
+      .attr('data-group-id', group.id)
+      .attr('data-group-toggle', group.id)
+      .attr('tabindex', '0')
+      .attr('role', 'button')
+      .attr('aria-expanded', 'true')
+      .attr('aria-label', `Collapse group ${group.label}`)
+      .style('cursor', 'pointer');
 
     groupWrapper
       .append('rect')
@@ -250,7 +274,13 @@ export function renderState(
   const LABEL_H = 16;
   const PERP_OFFSET = 10; // px offset perpendicular to edge direction
 
-  interface LabelPos { x: number; y: number; w: number; h: number; edgeIdx: number }
+  interface LabelPos {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    edgeIdx: number;
+  }
   const labelPositions: LabelPos[] = [];
 
   for (let ei = 0; ei < layout.edges.length; ei++) {
@@ -333,7 +363,8 @@ export function renderState(
 
         const lp = labelPosMap.get(ei);
         if (edge.label && lp) {
-          edgeG.append('rect')
+          edgeG
+            .append('rect')
             .attr('x', lp.x - lp.w / 2)
             .attr('y', lp.y - lp.h / 2 - 1)
             .attr('width', lp.w)
@@ -342,7 +373,8 @@ export function renderState(
             .attr('fill', palette.bg)
             .attr('opacity', 0.85)
             .attr('class', 'st-edge-label-bg');
-          edgeG.append('text')
+          edgeG
+            .append('text')
             .attr('x', lp.x)
             .attr('y', lp.y + 4)
             .attr('text-anchor', 'middle')
@@ -367,7 +399,8 @@ export function renderState(
 
       const lp = labelPosMap.get(ei);
       if (edge.label && lp) {
-        edgeG.append('rect')
+        edgeG
+          .append('rect')
           .attr('x', lp.x - lp.w / 2)
           .attr('y', lp.y - lp.h / 2 - 1)
           .attr('width', lp.w)
@@ -376,7 +409,8 @@ export function renderState(
           .attr('fill', palette.bg)
           .attr('opacity', 0.85)
           .attr('class', 'st-edge-label-bg');
-        edgeG.append('text')
+        edgeG
+          .append('text')
           .attr('x', lp.x)
           .attr('y', lp.y + 4)
           .attr('text-anchor', 'middle')
@@ -388,18 +422,36 @@ export function renderState(
     }
   }
 
+  // Build set of collapsed group IDs for special rendering
+  const collapsedGroupIds = new Set<string>();
+  for (const group of layout.groups) {
+    if (group.collapsed) collapsedGroupIds.add(group.id);
+  }
+
   // Render nodes (top layer)
   const colorOff = graph.options?.color === 'off';
   for (const node of layout.nodes) {
+    const isCollapsedGroup = collapsedGroupIds.has(node.id);
+
     const nodeG = contentG
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
-      .attr('class', 'st-node')
+      .attr('class', isCollapsedGroup ? 'st-group-wrapper st-node' : 'st-node')
       .attr('data-line-number', String(node.lineNumber))
-      .attr('data-node-id', node.id);
+      .attr('data-node-id', node.id)
+      .style('cursor', 'pointer');
 
-    if (onClickItem) {
-      nodeG.style('cursor', 'pointer').on('click', () => {
+    if (isCollapsedGroup) {
+      nodeG
+        .attr('data-group-toggle', node.id)
+        .attr('tabindex', '0')
+        .attr('role', 'button')
+        .attr('aria-expanded', 'false')
+        .attr('aria-label', `Expand group ${node.label}`);
+    }
+
+    if (onClickItem && !isCollapsedGroup) {
+      nodeG.on('click', () => {
         onClickItem(node.lineNumber);
       });
     }
@@ -413,6 +465,63 @@ export function renderState(
         .attr('r', PSEUDOSTATE_RADIUS)
         .attr('fill', palette.text)
         .attr('stroke', 'none');
+    } else if (isCollapsedGroup) {
+      // Collapsed group — distinctive rounded rect with collapse bar
+      const w = node.width;
+      const h = node.height;
+      const groupColor = node.color ?? stateDefaultColor(palette, colorOff);
+      const fillColor = mix(
+        groupColor,
+        isDark ? palette.surface : palette.bg,
+        15
+      );
+      const strokeColor = groupColor;
+      const COLLAPSE_BAR_H = 6;
+
+      // Main rect
+      nodeG
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', -h / 2)
+        .attr('width', w)
+        .attr('height', h)
+        .attr('rx', STATE_CORNER_RADIUS)
+        .attr('ry', STATE_CORNER_RADIUS)
+        .attr('fill', fillColor)
+        .attr('stroke', strokeColor)
+        .attr('stroke-width', NODE_STROKE_WIDTH);
+
+      // Collapse indicator bar at bottom (clipped to rounded corners)
+      const clipId = `st-clip-${node.id.replace(/[[\]:\s]/g, '')}`;
+      nodeG
+        .append('clipPath')
+        .attr('id', clipId)
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', -h / 2)
+        .attr('width', w)
+        .attr('height', h)
+        .attr('rx', STATE_CORNER_RADIUS);
+      nodeG
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', h / 2 - COLLAPSE_BAR_H)
+        .attr('width', w)
+        .attr('height', COLLAPSE_BAR_H)
+        .attr('fill', strokeColor)
+        .attr('opacity', 0.5)
+        .attr('clip-path', `url(#${clipId})`);
+
+      // Label
+      nodeG
+        .append('text')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('fill', palette.text)
+        .attr('font-size', NODE_FONT_SIZE)
+        .text(node.label);
     } else {
       // State — rounded rectangle
       const w = node.width;
@@ -460,7 +569,8 @@ export function renderStateForExport(
 
   const container = document.createElement('div');
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0);
+  const exportHeight =
+    layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0);
   container.style.width = `${exportWidth}px`;
   container.style.height = `${exportHeight}px`;
   container.style.position = 'absolute';
@@ -468,15 +578,10 @@ export function renderStateForExport(
   document.body.appendChild(container);
 
   try {
-    renderState(
-      container,
-      parsed,
-      layout,
-      palette,
-      isDark,
-      undefined,
-      { width: exportWidth, height: exportHeight }
-    );
+    renderState(container, parsed, layout, palette, isDark, undefined, {
+      width: exportWidth,
+      height: exportHeight,
+    });
 
     const svgEl = container.querySelector('svg');
     if (!svgEl) return '';