@diagrammo/dgmo 0.8.18 → 0.8.20

package/src/gantt/renderer.ts

@@ -8,7 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import { getSeriesColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
-import { computeTimeTicks } from '../d3';
+import { computeTimeTicks } from '../utils/time-ticks';
 import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
@@ -20,9 +20,11 @@ import {
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
   LEGEND_ICON_W,
+  LEGEND_GEAR_PILL_W,
   measureLegendText,
 } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
+import { controlsGroupCapsuleWidth } from '../utils/legend-layout';
 import type {
   LegendConfig,
   LegendState,
@@ -34,7 +36,7 @@ import {
   TITLE_Y,
 } from '../utils/title-constants';
 import type { PaletteColors } from '../palettes';
-import type { D3ExportDimensions } from '../d3';
+import type { D3ExportDimensions } from '../utils/d3-types';
 import type {
   ResolvedSchedule,
   ResolvedTask,
@@ -233,6 +235,8 @@ export function renderGantt(
     options?.currentActiveGroup
   );
   let criticalPathActive = false;
+  let dependenciesActive = !!resolved.options.dependencies;
+  let controlsExpanded = false;
 
   // ── Build row list (structural vs tag mode) ─────────────
 
@@ -264,11 +268,21 @@ export function renderGantt(
 
   const totalRows = rows.length;
 
+  // Pre-compute critical path / dependency flags (needed for legend height reservation)
+  const hasCriticalPath =
+    resolved.options.criticalPath &&
+    resolved.tasks.some((t) => t.isCriticalPath);
+  const hasDependencies =
+    resolved.options.dependencies &&
+    resolved.tasks.some((t) => t.task.dependencies.length > 0);
+
   // Vertical layout — matches timeline pattern (d3.ts:3649-3655)
   const title = resolved.options.title;
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve =
-    resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
+    resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies
+      ? LEGEND_HEIGHT + 8
+      : 0;
   const topDateLabelReserve = 22; // tick (6) + gap (4) + label height (~12)
   const hasOverheadLabels =
     resolved.markers.length > 0 || resolved.eras.length > 0;
@@ -327,13 +341,9 @@ export function renderGantt(
 
   // ── Tag legend (interactive) ────────────────────────────
 
-  const hasCriticalPath =
-    resolved.options.criticalPath &&
-    resolved.tasks.some((t) => t.isCriticalPath);
-
   function drawLegend() {
     svg.selectAll('.gantt-tag-legend-container').remove();
-    if (resolved.tagGroups.length > 0 || hasCriticalPath) {
+    if (resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies) {
       const legendY = titleHeight;
       renderTagLegend(
         svg,
@@ -359,17 +369,41 @@ export function renderGantt(
           recolorBars();
         },
         () => {
-          criticalPathActive = !criticalPathActive;
+          controlsExpanded = !controlsExpanded;
           drawLegend();
         },
         currentSwimlaneGroup,
         onSwimlaneChange,
         viewMode,
-        resolved.tasks
+        resolved.tasks,
+        controlsExpanded,
+        hasDependencies,
+        dependenciesActive,
+        (toggleId, active) => {
+          if (toggleId === 'critical-path') {
+            criticalPathActive = active;
+          } else if (toggleId === 'dependencies') {
+            dependenciesActive = active;
+            // Show/hide dependency arrows
+            g.selectAll<SVGElement, unknown>(
+              '.gantt-dep-arrow, .gantt-dep-arrowhead, .gantt-dep-label'
+            ).attr('display', active ? null : 'none');
+          }
+          drawLegend();
+        }
       );
     }
   }
 
+  function restoreHighlight() {
+    if (criticalPathActive) {
+      applyCriticalPathHighlight(svg, g);
+    } else {
+      svg.attr('data-critical-path-active', null);
+      resetHighlight(g, svg);
+    }
+  }
+
   function recolorBars() {
     g.selectAll<SVGGElement, unknown>('.gantt-task').each(function () {
       const el = d3Selection.select(this);
@@ -568,7 +602,7 @@ export function renderGantt(
           }
         })
         .on('mouseleave', () => {
-          resetHighlight(g, svg);
+          restoreHighlight();
           hideGanttDateIndicators(g);
         });
 
@@ -979,7 +1013,7 @@ export function renderGantt(
               .text(task.label);
           })
           .on('mouseleave', () => {
-            resetHighlight(g, svg);
+            restoreHighlight();
             hideGanttDateIndicators(g);
             g.selectAll('.gantt-milestone-hover-label').remove();
           });
@@ -1023,11 +1057,7 @@ export function renderGantt(
           })
           .on('mouseleave', () => {
             if (resolved.options.dependencies) {
-              if (criticalPathActive) {
-                applyCriticalPathHighlight(svg, g);
-              } else {
-                resetHighlight(g, svg);
-              }
+              restoreHighlight();
             }
             resetTaskLabels(svg);
             hideGanttDateIndicators(g);
@@ -1704,6 +1734,7 @@ function applyCriticalPathHighlight(
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   chartG: d3Selection.Selection<SVGGElement, unknown, null, undefined>
 ) {
+  svg.attr('data-critical-path-active', 'true');
   chartG.selectAll<SVGGElement, unknown>('.gantt-task').each(function () {
     const el = d3Selection.select(this);
     el.attr(
@@ -1827,6 +1858,34 @@ function drawSwimlaneIcon(
   return iconG;
 }
 
+function buildControlsToggles(
+  hasCriticalPath: boolean,
+  criticalPathActive: boolean,
+  hasDependencies: boolean,
+  dependenciesActive: boolean
+): import('../utils/legend-types').ControlsGroupToggle[] {
+  const toggles: import('../utils/legend-types').ControlsGroupToggle[] = [];
+  if (hasCriticalPath) {
+    toggles.push({
+      id: 'critical-path',
+      type: 'toggle',
+      label: 'Critical Path',
+      active: criticalPathActive,
+      onToggle: () => {},
+    });
+  }
+  if (hasDependencies) {
+    toggles.push({
+      id: 'dependencies',
+      type: 'toggle',
+      label: 'Dependencies',
+      active: dependenciesActive,
+      onToggle: () => {},
+    });
+  }
+  return toggles;
+}
+
 function renderTagLegend(
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   chartG: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
@@ -1841,16 +1900,16 @@ function renderTagLegend(
   criticalPathActive: boolean,
   optionLineNumbers: Record<string, number>,
   onToggle?: (groupName: string) => void,
-  onToggleCriticalPath?: () => void,
+  onToggleControlsExpand?: () => void,
   currentSwimlaneGroup?: string | null,
   onSwimlaneChange?: (group: string | null) => void,
   legendViewMode?: boolean,
-  resolvedTasks?: ResolvedTask[]
+  resolvedTasks?: ResolvedTask[],
+  controlsExpanded = false,
+  hasDependencies = false,
+  dependenciesActive = false,
+  onControlsToggle?: (toggleId: string, active: boolean) => void
 ): void {
-  const groupBg = isDark
-    ? mix(palette.surface, palette.bg, 50)
-    : mix(palette.surface, palette.bg, 30);
-
   // Build visible groups: active group expanded + swimlane group as compact pill
   let visibleGroups: TagGroup[];
   if (activeGroupName) {
@@ -1934,13 +1993,16 @@ function renderTagLegend(
   }
   totalW += Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
 
-  // Critical Path pill width
-  const cpLabel = 'Critical Path';
-  const cpPillW =
-    measureLegendText(cpLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  if (hasCriticalPath) {
+  // Controls group width — replaces standalone critical path pill
+  const hasControls = hasCriticalPath || hasDependencies;
+  const controlsToggleLabels: Array<{ label: string }> = [];
+  if (hasCriticalPath) controlsToggleLabels.push({ label: 'Critical Path' });
+  if (hasDependencies) controlsToggleLabels.push({ label: 'Dependencies' });
+  if (hasControls) {
     if (visibleGroups.length > 0) totalW += LEGEND_GROUP_GAP;
-    totalW += cpPillW;
+    totalW += controlsExpanded
+      ? controlsGroupCapsuleWidth(controlsToggleLabels)
+      : LEGEND_GEAR_PILL_W;
   }
 
   // Center over full container (matching title centering)
@@ -1952,8 +2014,6 @@ function renderTagLegend(
     .attr('class', 'gantt-tag-legend-container')
     .attr('transform', `translate(${legendX}, ${legendY})`);
 
-  let cursorX = 0;
-
   // Render tag groups via centralized legend system
   if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
@@ -1969,6 +2029,13 @@ function renderTagLegend(
       };
     });
 
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
+
     const legendConfig: LegendConfig = {
       groups: legendGroups,
       position: {
@@ -1977,16 +2044,30 @@ function renderTagLegend(
       },
       mode: 'fixed' as const,
       capsulePillAddonWidth: iconReserve,
+      controlsGroup:
+        controlsToggles.length > 0 ? { toggles: controlsToggles } : undefined,
+    };
+    const legendState: LegendState = {
+      activeGroup: activeGroupName,
+      controlsExpanded,
     };
-    const legendState: LegendState = { activeGroup: activeGroupName };
 
-    const tagGroupsW =
+    let tagGroupsW =
       visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) +
       Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    // Add controls group space to the renderLegendD3 container width
+    if (hasControls) {
+      if (visibleGroups.length > 0) tagGroupsW += LEGEND_GROUP_GAP;
+      tagGroupsW += controlsExpanded
+        ? controlsGroupCapsuleWidth(controlsToggleLabels)
+        : LEGEND_GEAR_PILL_W;
+    }
     const tagGroupG = legendRow.append('g');
 
     const legendCallbacks: LegendCallbacks = {
       onGroupToggle: onToggle,
+      onControlsExpand: onToggleControlsExpand,
+      onControlsToggle,
       onEntryHover: (groupName, entryValue) => {
         const tagKey = groupName.toLowerCase();
         if (entryValue) {
@@ -2092,67 +2173,43 @@ function renderTagLegend(
       legendCallbacks,
       tagGroupsW
     );
+  } else if (hasControls) {
+    // No tag groups, but controls group needs rendering
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
 
-    for (let i = 0; i < visibleGroups.length; i++) {
-      cursorX += groupWidths[i] + LEGEND_GROUP_GAP;
-    }
-  }
-
-  // Critical Path pill
-  if (hasCriticalPath) {
-    const cpLineNum = optionLineNumbers['critical-path'];
-    const cpG = legendRow
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'gantt-legend-critical-path')
-      .style('cursor', 'pointer')
-      .on('click', () => {
-        if (onToggleCriticalPath) onToggleCriticalPath();
-      });
-    if (cpLineNum) cpG.attr('data-line-number', String(cpLineNum));
-
-    cpG
-      .append('rect')
-      .attr('width', cpPillW)
-      .attr('height', LEGEND_HEIGHT)
-      .attr('rx', LEGEND_HEIGHT / 2)
-      .attr('fill', criticalPathActive ? palette.bg : groupBg);
-
-    if (criticalPathActive) {
-      cpG
-        .append('rect')
-        .attr('width', cpPillW)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', 'none')
-        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-        .attr('stroke-width', 0.75);
-    }
-
-    cpG
-      .append('text')
-      .attr('x', cpPillW / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-      .attr('text-anchor', 'middle')
-      .attr('font-size', `${LEGEND_PILL_FONT_SIZE}px`)
-      .attr('font-weight', '500')
-      .attr('fill', criticalPathActive ? palette.text : palette.textMuted)
-      .text(cpLabel);
+    const legendConfig: LegendConfig = {
+      groups: [],
+      position: {
+        placement: 'top-center' as const,
+        titleRelation: 'below-title' as const,
+      },
+      mode: 'fixed' as const,
+      controlsGroup: { toggles: controlsToggles },
+    };
 
-    // Apply persistent highlighting when active
-    if (criticalPathActive) {
-      applyCriticalPathHighlight(svg, chartG);
-    }
+    const tagGroupG = legendRow.append('g');
+    renderLegendD3(
+      tagGroupG,
+      legendConfig,
+      { activeGroup: null, controlsExpanded },
+      palette,
+      isDark,
+      {
+        onControlsExpand: onToggleControlsExpand,
+        onControlsToggle,
+      },
+      totalW
+    );
+  }
 
-    cpG
-      .on('mouseenter', () => {
-        applyCriticalPathHighlight(svg, chartG);
-      })
-      .on('mouseleave', () => {
-        if (!criticalPathActive) {
-          resetHighlightAll(svg, chartG);
-        }
-      });
+  // Apply persistent critical path highlighting when active
+  if (criticalPathActive) {
+    applyCriticalPathHighlight(svg, chartG);
   }
 }
 
@@ -2990,6 +3047,11 @@ function resetHighlight(
   g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>
 ): void {
+  // If critical path is actively toggled ON, restore its highlight instead of full reset
+  if (svg.attr('data-critical-path-active') === 'true') {
+    applyCriticalPathHighlight(svg, g);
+    return;
+  }
   g.selectAll<SVGGElement, unknown>('.gantt-task, .gantt-milestone').attr(
     'opacity',
     1

package/src/graph/flowchart-parser.ts

@@ -2,6 +2,7 @@ import { resolveColorWithDiagnostic } from '../colors';
 import type { DgmoError } from '../diagnostics';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
 import {
   measureIndent,
   extractColor,
@@ -87,15 +88,17 @@ function parseNodeRef(text: string, palette?: PaletteColors): NodeRef | null {
 
 /**
  * Split a line into segments around arrow tokens.
- * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`
+ * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`, and long-dash
+ * variants like `-->`, `--->`, `--foo--->` (TD-9 longest-match: the arrow
+ * token is the maximal run of `-+>`).
  *
  * Returns alternating: [nodeText, arrowText, nodeText, arrowText, nodeText, ...]
- * Where arrowText is the full arrow token like `-yes->` or `->`.
+ * Where arrowText is the synthesized full arrow token like `-yes->` or `->`
+ * (with visual dash-run length collapsed to the minimal `-...->` form —
+ * edge styling is not yet differentiated by arrow length).
  */
 function splitArrows(line: string): string[] {
   const segments: string[] = [];
-  let lastIndex = 0;
-  // Simpler approach: find all `->` positions, then determine if there's a label prefix
   const arrowPositions: {
     start: number;
     end: number;
@@ -103,60 +106,84 @@ function splitArrows(line: string): string[] {
     color?: string;
   }[] = [];
 
-  // Find all -> occurrences
+  // Find all arrow tokens. A token is a maximal run of `-+>` (one-or-more
+  // dashes followed by `>`). We scan for `->` and then expand leftward across
+  // adjacent dashes to absorb longer forms. `scanFloor` marks the lower
+  // bound for the next opening-dash search so an arrow's opening cannot
+  // reach back into the territory of a previously consumed arrow.
   let searchFrom = 0;
+  let scanFloor = 0;
   while (searchFrom < line.length) {
     const idx = line.indexOf('->', searchFrom);
     if (idx === -1) break;
 
-    // Look backwards from idx to find the start of the arrow (the `-` that starts the label)
-    let arrowStart = idx;
+    // TD-9: absorb the full arrow run leftward from idx, but not past the
+    // scanFloor (which is right after the previous arrow).
+    let runStart = idx;
+    while (runStart > scanFloor && line[runStart - 1] === '-') runStart--;
+    const arrowEnd = idx + 2; // position after `>`
+
+    // Look for an opening dash run before the arrow. The opening is the
+    // LEFTMOST `-` in the region `[scanFloor, runStart)` that is preceded by
+    // whitespace or start-of-line. Any dashes to its right up to the first
+    // non-dash character are part of the opening run; content after that is
+    // the label; the full arrow token runs from opening through `>`.
+    let arrowStart: number;
     let label: string | undefined;
     let color: string | undefined;
 
-    // Check if there's content between a preceding `-` and this `->` (e.g., `-yes->`)
-    // Walk backwards from idx-1 to find another `-` that could be the arrow start
-    if (idx > 0 && line[idx - 1] !== ' ' && line[idx - 1] !== '\t') {
-      // There might be label/color content attached: e.g. `-yes->` or `-(blue)->`
-      // The arrow token starts with `-` followed by optional label, optional (color), then `->`
-      // We need to find the opening `-` before any label text
-      // Scan backwards to find a `-` preceded by whitespace or start-of-line
-      let scanBack = idx - 1;
-      while (scanBack > 0 && line[scanBack] !== '-') {
-        scanBack--;
+    let openingStart = -1;
+    for (let i = scanFloor; i < runStart; i++) {
+      if (line[i] !== '-') continue;
+      const prevIsWsOrFloor =
+        i === 0 || i === scanFloor || /\s/.test(line[i - 1]);
+      if (prevIsWsOrFloor) {
+        openingStart = i;
+        break;
       }
-      // Check if this `-` could be the start of the arrow
-      if (
-        line[scanBack] === '-' &&
-        (scanBack === 0 || /\s/.test(line[scanBack - 1]))
-      ) {
-        // Content between opening `-` and `->` (strip trailing `-` that is part of `->`)
-        let arrowContent = line.substring(scanBack + 1, idx);
-        if (arrowContent.endsWith('-'))
-          arrowContent = arrowContent.slice(0, -1);
-        // Parse label and color from arrow content
-        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          color = colorMatch[1].trim();
-          const labelPart = arrowContent.substring(0, colorMatch.index!).trim();
-          if (labelPart) label = labelPart;
-        } else {
-          const labelPart = arrowContent.trim();
-          if (labelPart) label = labelPart;
-        }
-        arrowStart = scanBack;
+    }
+
+    if (openingStart !== -1) {
+      // End of opening run: consume consecutive dashes after openingStart.
+      let openingEnd = openingStart;
+      while (openingEnd < runStart && line[openingEnd] === '-') openingEnd++;
+
+      // Label content = everything between opening run and the arrow run.
+      const arrowContent = line.substring(openingEnd, runStart);
+      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        color = colorMatch[1].trim();
+        const labelPart = arrowContent.substring(0, colorMatch.index!).trim();
+        if (labelPart) label = labelPart;
+      } else {
+        const labelPart = arrowContent.trim();
+        if (labelPart) label = labelPart;
       }
+      arrowStart = openingStart;
+    } else {
+      // No opening dash run found. All absorbed leftward dashes belong to
+      // the arrow token itself (e.g. `A --> B` → arrow is `-->`, no label).
+      arrowStart = runStart;
     }
 
-    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
-    searchFrom = idx + 2;
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    searchFrom = arrowEnd;
+    scanFloor = arrowEnd;
   }
 
   if (arrowPositions.length === 0) {
     return [line];
   }
 
-  // Build segments
+  // Build segments.
+  //
+  // NOTE: the synthesized arrow token is always the short form (`->`,
+  // `-label->`, `-(color)->`). The actual dash run-length (`-->`, `--->`,
+  // `---->`) seen in the source is collapsed here. If we ever add
+  // dash-length-sensitive edge styling (e.g. Mermaid-style "long arrow"
+  // emphasis), thread `arrow.end - arrow.start - label?.length - color?.length`
+  // through to ArrowInfo so downstream renderers can honor it.
+  let lastIndex = 0;
   for (let i = 0; i < arrowPositions.length; i++) {
     const arrow = arrowPositions[i];
     const beforeText = line.substring(lastIndex, arrow.start).trim();
@@ -193,22 +220,32 @@ function parseArrowToken(
   diagnostics: DgmoError[]
 ): ArrowInfo {
   if (token === '->') return {};
-  // Color-only: -(color)->
-  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
-  if (colorOnly) {
-    return {
-      color: resolveColorWithDiagnostic(
-        colorOnly[1].trim(),
-        lineNumber,
-        diagnostics,
-        palette
-      ),
-    };
+  // TD-11: `-(X)->` is a color if and only if `X` is one of the 11 recognized
+  // palette color names. Otherwise the entire `(X)` becomes the label.
+  // Delegate the recognition rule to the shared `matchColorParens` helper.
+  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
+  if (bareParen) {
+    const colorName = matchColorParens(bareParen[1]);
+    if (colorName) {
+      return {
+        color: resolveColorWithDiagnostic(
+          colorName,
+          lineNumber,
+          diagnostics,
+          palette
+        ),
+      };
+    }
+    // Unrecognized color name → whole `(X)` is the label (fall through).
   }
   // -label(color)-> or -label->
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
-    const label = m[1]?.trim() || undefined;
+    const rawLabel = m[1] ?? '';
+    // Route label through TD-13/TD-14 validator.
+    const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let color = m[2]
       ? resolveColorWithDiagnostic(
           m[2].trim(),