@diagrammo/dgmo 0.8.9 → 0.8.11

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;
@@ -205,9 +206,14 @@ import {
   LEGEND_ENTRY_FONT_SIZE as TL_LEGEND_ENTRY_FONT_SIZE,
   LEGEND_ENTRY_DOT_GAP as TL_LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL as TL_LEGEND_ENTRY_TRAIL,
-  LEGEND_GROUP_GAP as TL_LEGEND_GROUP_GAP,
   measureLegendText,
 } from './utils/legend-constants';
+import { renderLegendD3 } from './utils/legend-d3';
+import type {
+  LegendConfig,
+  LegendState,
+  LegendCallbacks,
+} from './utils/legend-types';
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -4520,8 +4526,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
@@ -4810,8 +4815,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
@@ -4866,7 +4870,7 @@ export function renderTimeline(
     const LG_ENTRY_FONT_SIZE = TL_LEGEND_ENTRY_FONT_SIZE;
     const LG_ENTRY_DOT_GAP = TL_LEGEND_ENTRY_DOT_GAP;
     const LG_ENTRY_TRAIL = TL_LEGEND_ENTRY_TRAIL;
-    const LG_GROUP_GAP = TL_LEGEND_GROUP_GAP;
+    // LG_GROUP_GAP no longer needed — centralized legend handles spacing
     const LG_ICON_W = 20; // swimlane icon area (icon + surrounding space) — local
 
     const mainSvg = d3Selection.select(container).select<SVGSVGElement>('svg');
@@ -4875,10 +4879,6 @@ export function renderTimeline(
       // Position legend at top, below title
       const legendY = title ? 50 : 10;
 
-      const groupBg = isDark
-        ? mix(palette.surface, palette.bg, 50)
-        : mix(palette.surface, palette.bg, 30);
-
       // Pre-compute group widths (minified and expanded)
       type LegendGroup = {
         group: TagGroup;
@@ -4980,20 +4980,6 @@ export function renderTimeline(
 
         if (visibleGroups.length === 0) return;
 
-        // Compute total width and center horizontally in SVG
-        const totalW =
-          visibleGroups.reduce((s, lg) => {
-            const isActive =
-              viewMode ||
-              (currentActiveGroup != null &&
-                lg.group.name.toLowerCase() ===
-                  currentActiveGroup.toLowerCase());
-            return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
-          }, 0) +
-          (visibleGroups.length - 1) * LG_GROUP_GAP;
-
-        let cx = (width - totalW) / 2;
-
         // Legend container for data-legend-active attribute
         const legendContainer = mainSvg
           .append('g')
@@ -5005,177 +4991,113 @@ export function renderTimeline(
           );
         }
 
-        for (const lg of visibleGroups) {
-          const groupKey = lg.group.name.toLowerCase();
-          const isActive =
-            viewMode ||
-            (currentActiveGroup != null &&
-              currentActiveGroup.toLowerCase() === groupKey);
-          const isSwimActive =
-            currentSwimlaneGroup != null &&
-            currentSwimlaneGroup.toLowerCase() === groupKey;
-
-          const pillLabel = lg.group.name;
-          const pillWidth =
-            measureLegendText(pillLabel, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
-
-          const gEl = legendContainer
-            .append('g')
-            .attr('transform', `translate(${cx}, ${legendY})`)
-            .attr('class', 'tl-tag-legend-group tl-tag-legend-entry')
-            .attr('data-legend-group', groupKey)
-            .attr('data-tag-group', groupKey)
-            .attr('data-legend-entry', '__group__');
-
-          if (!viewMode) {
-            gEl.style('cursor', 'pointer').on('click', () => {
-              currentActiveGroup =
-                currentActiveGroup === groupKey ? null : groupKey;
-              drawLegend();
-              recolorEvents();
-              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-            });
-          }
-
-          // Outer capsule background (active only)
-          if (isActive) {
-            gEl
-              .append('rect')
-              .attr('width', lg.expandedWidth)
-              .attr('height', LG_HEIGHT)
-              .attr('rx', LG_HEIGHT / 2)
-              .attr('fill', groupBg);
-          }
-
-          const pillXOff = isActive ? LG_CAPSULE_PAD : 0;
-          const pillYOff = LG_CAPSULE_PAD;
-          const pillH = LG_HEIGHT - LG_CAPSULE_PAD * 2;
-
-          // Pill background
-          gEl
-            .append('rect')
-            .attr('x', pillXOff)
-            .attr('y', pillYOff)
-            .attr('width', pillWidth)
-            .attr('height', pillH)
-            .attr('rx', pillH / 2)
-            .attr('fill', isActive ? palette.bg : groupBg);
-
-          // Active pill border
-          if (isActive) {
-            gEl
-              .append('rect')
-              .attr('x', pillXOff)
-              .attr('y', pillYOff)
-              .attr('width', 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 + pillWidth / 2)
-            .attr('y', LG_HEIGHT / 2 + LG_PILL_FONT_SIZE / 2 - 2)
-            .attr('font-size', LG_PILL_FONT_SIZE)
-            .attr('font-weight', '500')
-            .attr('font-family', FONT_FAMILY)
-            .attr('fill', isActive ? palette.text : palette.textMuted)
-            .attr('text-anchor', 'middle')
-            .text(pillLabel);
-
-          // Entries + swimlane icon inside capsule (active only)
-          if (isActive) {
-            // Swimlane icon (skip in view mode — non-interactive)
-            let entryX: number;
-            if (!viewMode) {
-              const iconX = pillXOff + pillWidth + 5;
-              const iconY = (LG_HEIGHT - 10) / 2; // vertically centered
-              const iconEl = drawSwimlaneIcon(gEl, iconX, iconY, isSwimActive);
-              iconEl
-                .attr('data-swimlane-toggle', groupKey)
-                .on('click', (event: MouseEvent) => {
-                  event.stopPropagation();
-                  currentSwimlaneGroup =
-                    currentSwimlaneGroup === groupKey ? null : groupKey;
-                  onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-                  relayout();
-                });
-              entryX = pillXOff + pillWidth + LG_ICON_W + 4;
-            } else {
-              entryX = pillXOff + pillWidth + 8;
-            }
-
-            for (const entry of lg.group.entries) {
-              const tagKey = lg.group.name.toLowerCase();
-              const tagVal = entry.value.toLowerCase();
-
-              const entryG = gEl
-                .append('g')
-                .attr('class', 'tl-tag-legend-entry')
-                .attr('data-tag-group', tagKey)
-                .attr('data-legend-entry', tagVal);
-
-              if (!viewMode) {
-                entryG
-                  .style('cursor', 'pointer')
-                  .on('mouseenter', (event: MouseEvent) => {
-                    event.stopPropagation();
-                    fadeToTagValue(mainG, tagKey, tagVal);
-                    mainSvg
-                      .selectAll<SVGGElement, unknown>('.tl-tag-legend-entry')
-                      .each(function () {
-                        const el = d3Selection.select(this);
-                        const ev = el.attr('data-legend-entry');
-                        if (ev === '__group__') return;
-                        const eg = el.attr('data-tag-group');
-                        el.attr(
-                          'opacity',
-                          eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY
-                        );
-                      });
-                  })
-                  .on('mouseleave', (event: MouseEvent) => {
-                    event.stopPropagation();
-                    fadeReset(mainG);
-                    mainSvg
-                      .selectAll<SVGGElement, unknown>('.tl-tag-legend-entry')
-                      .attr('opacity', 1);
-                  })
-                  .on('click', (event: MouseEvent) => {
-                    event.stopPropagation();
-                  });
-              }
-
-              entryG
-                .append('circle')
-                .attr('cx', entryX + LG_DOT_R)
-                .attr('cy', LG_HEIGHT / 2)
-                .attr('r', LG_DOT_R)
-                .attr('fill', entry.color);
-
-              const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
-              entryG
-                .append('text')
-                .attr('x', textX)
-                .attr('y', LG_HEIGHT / 2 + LG_ENTRY_FONT_SIZE / 2 - 1)
-                .attr('font-size', LG_ENTRY_FONT_SIZE)
-                .attr('font-family', FONT_FAMILY)
-                .attr('fill', palette.textMuted)
-                .text(entry.value);
-
-              entryX =
-                textX +
-                measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) +
-                LG_ENTRY_TRAIL;
-            }
-          }
-
-          cx += (isActive ? lg.expandedWidth : lg.minifiedWidth) + LG_GROUP_GAP;
-        }
+        // Render tag groups via centralized legend system
+        const iconAddon = viewMode ? 0 : LG_ICON_W;
+        const centralGroups = visibleGroups.map((lg) => ({
+          name: lg.group.name,
+          entries: lg.group.entries.map((e) => ({
+            value: e.value,
+            color: e.color,
+          })),
+        }));
+
+        // Determine effective active group for centralized renderer
+        const centralActive = viewMode ? effectiveColorKey : currentActiveGroup;
+
+        const centralConfig: LegendConfig = {
+          groups: centralGroups,
+          position: { placement: 'top-center', titleRelation: 'below-title' },
+          mode: 'fixed',
+          capsulePillAddonWidth: iconAddon,
+        };
+        const centralState: LegendState = { activeGroup: centralActive };
+
+        const centralCallbacks: LegendCallbacks = viewMode
+          ? {}
+          : {
+              onGroupToggle: (groupName) => {
+                currentActiveGroup =
+                  currentActiveGroup === groupName.toLowerCase()
+                    ? null
+                    : groupName.toLowerCase();
+                drawLegend();
+                recolorEvents();
+                onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+              },
+              onEntryHover: (groupName, entryValue) => {
+                const tagKey = groupName.toLowerCase();
+                if (entryValue) {
+                  const tagVal = entryValue.toLowerCase();
+                  fadeToTagValue(mainG, tagKey, tagVal);
+                  mainSvg
+                    .selectAll<SVGGElement, unknown>('[data-legend-entry]')
+                    .each(function () {
+                      const el = d3Selection.select(this);
+                      const ev = el.attr('data-legend-entry');
+                      const eg =
+                        el.attr('data-tag-group') ??
+                        (el.node() as Element)
+                          ?.closest?.('[data-tag-group]')
+                          ?.getAttribute('data-tag-group');
+                      el.attr(
+                        'opacity',
+                        eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY
+                      );
+                    });
+                } else {
+                  fadeReset(mainG);
+                  mainSvg
+                    .selectAll<SVGGElement, unknown>('[data-legend-entry]')
+                    .attr('opacity', 1);
+                }
+              },
+              onGroupRendered: (groupName, groupEl, isActive) => {
+                const groupKey = groupName.toLowerCase();
+                groupEl.attr('data-tag-group', groupKey);
+                if (isActive && !viewMode) {
+                  const isSwimActive =
+                    currentSwimlaneGroup != null &&
+                    currentSwimlaneGroup.toLowerCase() === groupKey;
+                  const pillWidth =
+                    measureLegendText(groupName, LG_PILL_FONT_SIZE) +
+                    LG_PILL_PAD;
+                  const pillXOff = LG_CAPSULE_PAD;
+                  const iconX = pillXOff + pillWidth + 5;
+                  const iconY = (LG_HEIGHT - 10) / 2;
+                  const iconEl = drawSwimlaneIcon(
+                    groupEl,
+                    iconX,
+                    iconY,
+                    isSwimActive
+                  );
+                  iconEl
+                    .attr('data-swimlane-toggle', groupKey)
+                    .on('click', (event: MouseEvent) => {
+                      event.stopPropagation();
+                      currentSwimlaneGroup =
+                        currentSwimlaneGroup === groupKey ? null : groupKey;
+                      onTagStateChange?.(
+                        currentActiveGroup,
+                        currentSwimlaneGroup
+                      );
+                      relayout();
+                    });
+                }
+              },
+            };
+
+        const legendInnerG = legendContainer
+          .append('g')
+          .attr('transform', `translate(0, ${legendY})`);
+        renderLegendD3(
+          legendInnerG,
+          centralConfig,
+          centralState,
+          palette,
+          isDark,
+          centralCallbacks,
+          width
+        );
       }
 
       // Build a quick lineNumber→event lookup
@@ -5538,7 +5460,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;
@@ -5616,7 +5538,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(
@@ -5947,7 +5871,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]);
       })
@@ -6003,7 +5927,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);
       })
@@ -6493,40 +6417,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);
@@ -6545,7 +6517,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);