@diagrammo/dgmo 0.8.10 → 0.8.12

package/src/d3.ts

@@ -5,6 +5,7 @@ import * as d3Array from 'd3-array';
 import cloud from 'd3-cloud';
 import { FONT_FAMILY } from './fonts';
 import { injectBranding } from './branding';
+import { computeQuadrantPointLabels, type LabelRect } from './label-layout';
 
 // ============================================================
 // Types
@@ -19,22 +20,22 @@ export type VisualizationType =
   | 'quadrant'
   | 'sequence';
 
-export interface D3DataItem {
+interface D3DataItem {
   label: string;
   values: number[];
   color: string | null;
   lineNumber: number;
 }
 
-export interface WordCloudWord {
+interface WordCloudWord {
   text: string;
   weight: number;
   lineNumber: number;
 }
 
-export type WordCloudRotate = 'none' | 'mixed' | 'angled';
+type WordCloudRotate = 'none' | 'mixed' | 'angled';
 
-export interface WordCloudOptions {
+interface WordCloudOptions {
   rotate: WordCloudRotate;
   max: number;
   minSize: number;
@@ -56,7 +57,7 @@ export interface ArcLink {
   lineNumber: number;
 }
 
-export type ArcOrder = 'appearance' | 'name' | 'group' | 'degree';
+type ArcOrder = 'appearance' | 'name' | 'group' | 'degree';
 
 export interface ArcNodeGroup {
   name: string;
@@ -65,9 +66,9 @@ export interface ArcNodeGroup {
   lineNumber: number;
 }
 
-export type TimelineSort = 'time' | 'group' | 'tag';
+type TimelineSort = 'time' | 'group' | 'tag';
 
-export interface TimelineEvent {
+interface TimelineEvent {
   date: string;
   endDate: string | null;
   label: string;
@@ -77,13 +78,13 @@ export interface TimelineEvent {
   uncertain?: boolean;
 }
 
-export interface TimelineGroup {
+interface TimelineGroup {
   name: string;
   color: string | null;
   lineNumber: number;
 }
 
-export interface TimelineEra {
+interface TimelineEra {
   startDate: string;
   endDate: string;
   label: string;
@@ -91,40 +92,40 @@ export interface TimelineEra {
   lineNumber: number;
 }
 
-export interface TimelineMarker {
+interface TimelineMarker {
   date: string;
   label: string;
   color: string | null;
   lineNumber: number;
 }
 
-export interface VennSet {
+interface VennSet {
   name: string;
   alias: string | null;
   color: string | null;
   lineNumber: number;
 }
 
-export interface VennOverlap {
+interface VennOverlap {
   sets: string[];
   label: string | null;
   lineNumber: number;
 }
 
-export interface QuadrantLabel {
+interface QuadrantLabel {
   text: string;
   color: string | null;
   lineNumber: number;
 }
 
-export interface QuadrantPoint {
+interface QuadrantPoint {
   label: string;
   x: number;
   y: number;
   lineNumber: number;
 }
 
-export interface QuadrantLabels {
+interface QuadrantLabels {
   topRight: QuadrantLabel | null;
   topLeft: QuadrantLabel | null;
   bottomLeft: QuadrantLabel | null;
@@ -192,7 +193,9 @@ import {
 import {
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   resolveTagColor,
+  resolveActiveTagGroup,
   stripDefaultModifier,
 } from './utils/tag-groups';
 import type { TagGroup } from './utils/tag-groups';
@@ -1476,6 +1479,9 @@ export function parseVisualization(
           result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
         suggest
       );
+      validateTagGroupNames(result.timelineTagGroups, (line, msg) =>
+        result.diagnostics.push(makeDgmoError(line, msg, 'warning'))
+      );
       for (const group of result.timelineTagGroups) {
         if (!group.defaultValue) continue;
         const key = group.name.toLowerCase();
@@ -3404,6 +3410,78 @@ function buildEraTooltipHtml(era: TimelineEra): string {
 // Timeline Renderer
 // ============================================================
 
+/**
+ * Renders timeline group legend as pills (colored dot + text in rounded rect),
+ * matching the centralized legend pill style.
+ */
+function renderTimelineGroupLegend(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  groups: TimelineGroup[],
+  groupColorMap: Map<string, string>,
+  textColor: string,
+  palette: PaletteColors,
+  isDark: boolean,
+  legendY: number,
+  onHover: (name: string) => void,
+  onLeave: () => void
+): void {
+  const PILL_H = 22;
+  const DOT_R = 4;
+  const DOT_GAP = 4;
+  const PAD_X = 10;
+  const FONT_SIZE = 11;
+  const GAP = 8;
+  const pillBg = isDark
+    ? mix(palette.surface, palette.bg, 50)
+    : mix(palette.surface, palette.bg, 30);
+
+  let legendX = 0;
+  for (const grp of groups) {
+    const color = groupColorMap.get(grp.name) ?? textColor;
+    const textW = measureLegendText(grp.name, FONT_SIZE);
+    const pillW = PAD_X + DOT_R * 2 + DOT_GAP + textW + PAD_X;
+
+    const itemG = g
+      .append('g')
+      .attr('class', 'tl-legend-item')
+      .attr('data-group', grp.name)
+      .style('cursor', 'pointer')
+      .on('mouseenter', () => onHover(grp.name))
+      .on('mouseleave', () => onLeave());
+
+    // Pill background
+    itemG
+      .append('rect')
+      .attr('x', legendX)
+      .attr('y', legendY - PILL_H / 2)
+      .attr('width', pillW)
+      .attr('height', PILL_H)
+      .attr('rx', PILL_H / 2)
+      .attr('fill', pillBg);
+
+    // Colored dot
+    itemG
+      .append('circle')
+      .attr('cx', legendX + PAD_X + DOT_R)
+      .attr('cy', legendY)
+      .attr('r', DOT_R)
+      .attr('fill', color);
+
+    // Label text
+    itemG
+      .append('text')
+      .attr('x', legendX + PAD_X + DOT_R * 2 + DOT_GAP)
+      .attr('y', legendY)
+      .attr('dy', '0.35em')
+      .attr('fill', textColor)
+      .attr('font-size', `${FONT_SIZE}px`)
+      .attr('font-family', FONT_FAMILY)
+      .text(grp.name);
+
+    legendX += pillW + GAP;
+  }
+}
+
 /**
  * Renders a timeline chart into the given container using D3.
  * Supports horizontal (default) and vertical orientation.
@@ -4037,38 +4115,19 @@ export function renderTimeline(
         );
       }
 
-      // Group legend
+      // Group legend (pill style)
       if (timelineGroups.length > 0) {
-        let legendX = 0;
-        const legendY = -55;
-        for (const grp of timelineGroups) {
-          const color = groupColorMap.get(grp.name) ?? textColor;
-          const itemG = g
-            .append('g')
-            .attr('class', 'tl-legend-item')
-            .attr('data-group', grp.name)
-            .style('cursor', 'pointer')
-            .on('mouseenter', () => fadeToGroup(g, grp.name))
-            .on('mouseleave', () => fadeReset(g));
-
-          itemG
-            .append('circle')
-            .attr('cx', legendX)
-            .attr('cy', legendY)
-            .attr('r', 5)
-            .attr('fill', color);
-
-          itemG
-            .append('text')
-            .attr('x', legendX + 10)
-            .attr('y', legendY)
-            .attr('dy', '0.35em')
-            .attr('fill', textColor)
-            .attr('font-size', '11px')
-            .text(grp.name);
-
-          legendX += grp.name.length * 7 + 30;
-        }
+        renderTimelineGroupLegend(
+          g,
+          timelineGroups,
+          groupColorMap,
+          textColor,
+          palette,
+          isDark,
+          -55,
+          (name) => fadeToGroup(g, name),
+          () => fadeReset(g)
+        );
       }
 
       g.append('line')
@@ -4525,8 +4584,7 @@ export function renderTimeline(
               .attr('dy', '0.35em')
               .attr('text-anchor', 'start')
               .attr('fill', textColor)
-              .attr('font-size', '14px')
-              .attr('font-weight', '700')
+              .attr('font-size', '13px')
               .text(ev.label);
           } else {
             // Text outside bar - check if it fits on left or must go right
@@ -4656,38 +4714,20 @@ export function renderTimeline(
       );
     }
 
-    // Group legend at top-left
+    // Group legend at top-left (pill style)
     if (timelineGroups.length > 0) {
-      let legendX = 0;
       const legendY = timelineScale ? -75 : -55;
-      for (const grp of timelineGroups) {
-        const color = groupColorMap.get(grp.name) ?? textColor;
-        const itemG = g
-          .append('g')
-          .attr('class', 'tl-legend-item')
-          .attr('data-group', grp.name)
-          .style('cursor', 'pointer')
-          .on('mouseenter', () => fadeToGroup(g, grp.name))
-          .on('mouseleave', () => fadeReset(g));
-
-        itemG
-          .append('circle')
-          .attr('cx', legendX)
-          .attr('cy', legendY)
-          .attr('r', 5)
-          .attr('fill', color);
-
-        itemG
-          .append('text')
-          .attr('x', legendX + 10)
-          .attr('y', legendY)
-          .attr('dy', '0.35em')
-          .attr('fill', textColor)
-          .attr('font-size', '11px')
-          .text(grp.name);
-
-        legendX += grp.name.length * 7 + 30;
-      }
+      renderTimelineGroupLegend(
+        g,
+        timelineGroups,
+        groupColorMap,
+        textColor,
+        palette,
+        isDark,
+        legendY,
+        (name) => fadeToGroup(g, name),
+        () => fadeReset(g)
+      );
     }
 
     sorted.forEach((ev, i) => {
@@ -4815,8 +4855,7 @@ export function renderTimeline(
             .attr('dy', '0.35em')
             .attr('text-anchor', 'start')
             .attr('fill', textColor)
-            .attr('font-size', '14px')
-            .attr('font-weight', '700')
+            .attr('font-size', '13px')
             .text(ev.label);
         } else {
           // Text outside bar - check if it fits on left or must go right
@@ -5461,7 +5500,7 @@ export function renderVenn(
   exportDims?: D3ExportDimensions
 ): void {
   const { vennSets, vennOverlaps, title } = parsed;
-  if (vennSets.length < 2) return;
+  if (vennSets.length < 2 || vennSets.length > 3) return;
 
   const init = initD3Chart(container, palette, exportDims);
   if (!init) return;
@@ -5539,7 +5578,9 @@ export function renderVenn(
   // Suppress WebKit focus ring on interactive SVG elements
   svg
     .append('style')
-    .text('circle:focus, circle:focus-visible { outline: none !important; }');
+    .text(
+      'circle:focus, circle:focus-visible { outline-solid: none !important; }'
+    );
 
   // Title
   renderChartTitle(
@@ -5870,7 +5911,7 @@ export function renderVenn(
       .attr('class', 'venn-hit-target')
       .attr('data-line-number', String(vennSets[i].lineNumber))
       .style('cursor', onClickItem ? 'pointer' : 'default')
-      .style('outline', 'none')
+      .style('outline-solid', 'none')
       .on('mouseenter', () => {
         showRegionOverlay([i]);
       })
@@ -5926,7 +5967,7 @@ export function renderVenn(
       .attr('class', 'venn-hit-target')
       .attr('data-line-number', declaredOv ? String(declaredOv.lineNumber) : '')
       .style('cursor', onClickItem && declaredOv ? 'pointer' : 'default')
-      .style('outline', 'none')
+      .style('outline-solid', 'none')
       .on('mouseenter', () => {
         showRegionOverlay(idxs);
       })
@@ -6416,40 +6457,88 @@ export function renderQuadrant(
     return 'bottom-right';
   };
 
+  // Build obstacle rects from quadrant watermark labels for collision avoidance
+  const POINT_RADIUS = 6;
+  const POINT_LABEL_FONT_SIZE = 12;
+  const quadrantLabelObstacles: LabelRect[] = quadrantDefsWithLabel.map((d) => {
+    const layout = labelLayouts.get(d.label!.text)!;
+    const totalW =
+      Math.max(...layout.lines.map((l) => l.length)) *
+      layout.fontSize *
+      CHAR_WIDTH_RATIO;
+    const totalH = layout.lines.length * layout.fontSize * 1.2;
+    return {
+      x: d.labelX - totalW / 2,
+      y: d.labelY - totalH / 2,
+      w: totalW,
+      h: totalH,
+    };
+  });
+
+  // Compute collision-free label positions for all points
+  const pointPixels = quadrantPoints.map((point) => ({
+    label: point.label,
+    cx: xScale(point.x),
+    cy: yScale(point.y),
+  }));
+
+  const placedPointLabels = computeQuadrantPointLabels(
+    pointPixels,
+    { left: 0, top: 0, right: chartWidth, bottom: chartHeight },
+    quadrantLabelObstacles,
+    POINT_RADIUS,
+    POINT_LABEL_FONT_SIZE
+  );
+
   // Draw data points (circles and labels)
   const pointsG = chartG.append('g').attr('class', 'points');
 
-  quadrantPoints.forEach((point) => {
+  quadrantPoints.forEach((point, i) => {
     const cx = xScale(point.x);
     const cy = yScale(point.y);
     const quadrant = getPointQuadrant(point.x, point.y);
     const quadDef = quadrantDefs.find((d) => d.position === quadrant);
     const pointColor =
       quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
+    const placed = placedPointLabels[i];
 
     const pointG = pointsG
       .append('g')
       .attr('class', 'point-group')
       .attr('data-line-number', String(point.lineNumber));
 
+    // Connector line (drawn first so it renders behind circle and label)
+    if (placed.connectorLine) {
+      pointG
+        .append('line')
+        .attr('x1', placed.connectorLine.x1)
+        .attr('y1', placed.connectorLine.y1)
+        .attr('x2', placed.connectorLine.x2)
+        .attr('y2', placed.connectorLine.y2)
+        .attr('stroke', pointColor)
+        .attr('stroke-width', 1)
+        .attr('opacity', 0.5);
+    }
+
     // Circle with white fill and colored border for visibility on opaque quadrants
     pointG
       .append('circle')
       .attr('cx', cx)
       .attr('cy', cy)
-      .attr('r', 6)
+      .attr('r', POINT_RADIUS)
       .attr('fill', '#ffffff')
       .attr('stroke', pointColor)
       .attr('stroke-width', 2);
 
-    // Label (palette text color adapts to light/dark mode)
+    // Label at computed position
     pointG
       .append('text')
-      .attr('x', cx)
-      .attr('y', cy - 10)
-      .attr('text-anchor', 'middle')
+      .attr('x', placed.x)
+      .attr('y', placed.y)
+      .attr('text-anchor', placed.anchor)
+      .attr('dominant-baseline', 'central')
       .attr('fill', textColor)
-      .attr('font-size', '12px')
+      .attr('font-size', `${POINT_LABEL_FONT_SIZE}px`)
       .attr('font-weight', '700')
       .style('text-shadow', `0 1px 2px ${shadowColor}`)
       .text(point.label);
@@ -6468,7 +6557,7 @@ export function renderQuadrant(
       })
       .on('mouseleave', () => {
         hideTooltip(tooltip);
-        pointG.select('circle').attr('r', 6);
+        pointG.select('circle').attr('r', POINT_RADIUS);
       })
       .on('click', () => {
         if (onClickItem && point.lineNumber) onClickItem(point.lineNumber);
@@ -6609,8 +6698,11 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup =
-      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      orgParsed.tagGroups,
+      orgParsed.options['active-tag'],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6660,8 +6752,11 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup =
-      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      sitemapParsed.tagGroups,
+      sitemapParsed.options['active-tag'],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6718,7 +6813,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       undefined,
-      options?.tagGroup
+      resolveActiveTagGroup(
+        kanbanParsed.tagGroups,
+        kanbanParsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6775,7 +6874,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        erParsed.tagGroups,
+        erParsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6803,7 +6906,10 @@ export async function renderForExport(
       blLayout,
       effectivePalette,
       theme === 'dark',
-      { exportDims: { width: exportWidth, height: exportHeight } }
+      {
+        exportDims: { width: exportWidth, height: exportHeight },
+        activeTagGroup: options?.tagGroup,
+      }
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6860,7 +6966,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        c4Parsed.tagGroups,
+        c4Parsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6902,7 +7012,11 @@ export async function renderForExport(
 
     const infraComputed = computeInfra(infraParsed);
     const infraLayout = layoutInfra(infraComputed);
-    const activeTagGroup = options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      infraParsed.tagGroups,
+      infraParsed.options['active-tag'],
+      options?.tagGroup
+    );
 
     const titleOffset = infraParsed.title ? 40 : 0;
     const legendGroups = computeInfraLegendGroups(
@@ -7055,7 +7169,11 @@ export async function renderForExport(
       isDark,
       undefined,
       dims,
-      orgExportState?.activeTagGroup ?? options?.tagGroup,
+      resolveActiveTagGroup(
+        parsed.timelineTagGroups,
+        undefined,
+        orgExportState?.activeTagGroup ?? options?.tagGroup
+      ),
       orgExportState?.swimlaneTagGroup
     );
   } else if (parsed.type === 'venn') {