@diagrammo/dgmo 0.8.8 → 0.8.10

package/src/index.ts

@@ -356,8 +356,28 @@ export {
   computeScatterLabelGraphics,
 } from './echarts';
 export type { ScatterLabelPoint } from './echarts';
-export { renderLegendSvg, type LegendGroupData } from './utils/legend-svg';
+export {
+  renderLegendSvg,
+  renderLegendSvgFromConfig,
+  type LegendGroupData,
+} from './utils/legend-svg';
 export { LEGEND_HEIGHT } from './utils/legend-constants';
+export { renderLegendD3 } from './utils/legend-d3';
+export {
+  computeLegendLayout,
+  getLegendReservedHeight,
+} from './utils/legend-layout';
+export type {
+  LegendConfig,
+  LegendState,
+  LegendCallbacks,
+  LegendPosition,
+  LegendMode,
+  LegendControl,
+  LegendLayout,
+  LegendHandle,
+  LegendPalette,
+} from './utils/legend-types';
 export { buildMermaidQuadrant } from './dgmo-mermaid';
 
 // ============================================================

package/src/infra/renderer.ts

@@ -33,9 +33,10 @@ import {
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
-  LEGEND_GROUP_GAP,
   measureLegendText,
 } from '../utils/legend-constants';
+import { renderLegendD3 } from '../utils/legend-d3';
+import type { LegendConfig, LegendState } from '../utils/legend-types';
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -1983,26 +1984,6 @@ export function computeInfraLegendGroups(
   return groups;
 }
 
-/** Compute total width for the playback pill (speed only). */
-function computePlaybackWidth(
-  playback: InfraPlaybackState | undefined
-): number {
-  if (!playback) return 0;
-  const pillWidth =
-    measureLegendText('Playback', LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  if (!playback.expanded) return pillWidth;
-
-  let entriesW = 8; // gap after pill
-  entriesW += LEGEND_PILL_FONT_SIZE * 0.8 + 6; // play/pause
-  for (const s of playback.speedOptions) {
-    entriesW +=
-      measureLegendText(`${s}x`, LEGEND_ENTRY_FONT_SIZE) +
-      SPEED_BADGE_H_PAD * 2 +
-      SPEED_BADGE_GAP;
-  }
-  return LEGEND_CAPSULE_PAD * 2 + pillWidth + entriesW;
-}
-
 function renderLegend(
   rootSvg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   legendGroups: InfraLegendGroup[],
@@ -2023,254 +2004,120 @@ function renderLegend(
     legendG.attr('data-legend-active', activeGroup.toLowerCase());
   }
 
-  // Compute centered positions
-  const effectiveW = (g: InfraLegendGroup) =>
-    activeGroup != null && g.name.toLowerCase() === activeGroup.toLowerCase()
-      ? g.width
-      : g.minifiedWidth;
-  const playbackW = computePlaybackWidth(playback);
-  const trailingGaps =
-    legendGroups.length > 0 && playbackW > 0 ? LEGEND_GROUP_GAP : 0;
-  const totalLegendW =
-    legendGroups.reduce((s, g) => s + effectiveW(g), 0) +
-    (legendGroups.length - 1) * LEGEND_GROUP_GAP +
-    trailingGaps +
-    playbackW;
-  let cursorX = (totalWidth - totalLegendW) / 2;
-
-  for (const group of legendGroups) {
-    const isActive =
-      activeGroup != null &&
-      group.name.toLowerCase() === activeGroup.toLowerCase();
-
-    const groupBg = isDark
-      ? mix(palette.surface, palette.bg, 50)
-      : mix(palette.surface, palette.bg, 30);
-
-    const pillLabel = group.name;
-    const pillWidth =
-      measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-
-    const gEl = legendG
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'infra-legend-group')
-      .attr('data-legend-group', group.name.toLowerCase())
-      .style('cursor', 'pointer');
-
-    // Outer capsule background (active only)
-    if (isActive) {
-      gEl
-        .append('rect')
-        .attr('width', group.width)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
+  // Build all groups including Playback as a regular group for consistent rendering
+  const allGroups = legendGroups.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
+  }));
+  // Add Playback as a group with empty entries (collapsed pill) or dummy entries (expanded)
+  if (playback) {
+    allGroups.push({ name: 'Playback', entries: [] });
+  }
 
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_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);
-    }
+  const legendConfig: LegendConfig = {
+    groups: allGroups,
+    position: { placement: 'top-center', titleRelation: 'below-title' },
+    mode: 'fixed',
+    showEmptyGroups: true,
+  };
+  const legendState: LegendState = { activeGroup };
+  renderLegendD3(
+    legendG,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    undefined,
+    totalWidth
+  );
 
-    // Pill text
-    gEl
-      .append('text')
-      .attr('x', pillXOff + pillWidth / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-      .attr('font-family', FONT_FAMILY)
-      .attr('font-size', LEGEND_PILL_FONT_SIZE)
-      .attr('font-weight', '500')
-      .attr('fill', isActive ? palette.text : palette.textMuted)
-      .attr('text-anchor', 'middle')
-      .text(pillLabel);
-
-    // Entries inside capsule (active only)
-    if (isActive) {
-      let entryX = pillXOff + pillWidth + 4;
-      for (const entry of group.entries) {
-        const entryG = gEl
-          .append('g')
-          .attr('class', 'infra-legend-entry')
+  // Add infra-specific classes and data attributes for app interactivity
+  legendG.selectAll('[data-legend-group]').classed('infra-legend-group', true);
+  for (const group of legendGroups) {
+    const groupKey = group.name.toLowerCase();
+    for (const entry of group.entries) {
+      const entryEl = legendG.select(
+        `[data-legend-group="${groupKey}"] [data-legend-entry="${entry.value.toLowerCase()}"]`
+      );
+      if (!entryEl.empty()) {
+        entryEl
           .attr('data-legend-entry', entry.key.toLowerCase())
           .attr('data-legend-color', entry.color)
           .attr('data-legend-type', group.type)
           .attr(
             'data-legend-tag-group',
             group.type === 'tag' ? (group.tagKey ?? '') : null
-          )
-          .style('cursor', 'pointer');
-
-        entryG
-          .append('circle')
-          .attr('cx', entryX + LEGEND_DOT_R)
-          .attr('cy', LEGEND_HEIGHT / 2)
-          .attr('r', LEGEND_DOT_R)
-          .attr('fill', entry.color);
-
-        const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-        entryG
-          .append('text')
-          .attr('x', textX)
-          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
-          .attr('font-family', FONT_FAMILY)
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('fill', palette.textMuted)
-          .text(entry.value);
-
-        entryX =
-          textX +
-          measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
-          LEGEND_ENTRY_TRAIL;
+          );
       }
     }
+  }
 
-    cursorX += effectiveW(group) + LEGEND_GROUP_GAP;
+  // Mark the Playback pill with infra-playback-pill class for app interactivity
+  const playbackEl = legendG.select('[data-legend-group="playback"]');
+  if (!playbackEl.empty()) {
+    playbackEl.classed('infra-playback-pill', true);
   }
 
-  // Playback pill — speed + pause only
-  if (playback) {
-    const isExpanded = playback.expanded;
-    const groupBg = isDark
-      ? mix(palette.bg, palette.text, 85)
-      : mix(palette.bg, palette.text, 92);
+  // Inject speed badges into the Playback pill when expanded
+  // Speed badges are injected into the Playback pill below
 
-    const pillLabel = 'Playback';
+  // Inject speed badges into the Playback pill when expanded
+  if (playback && playback.expanded && !playbackEl.empty()) {
     const pillWidth =
-      measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    const fullW = computePlaybackWidth(playback);
+      measureLegendText('Playback', LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
 
-    const pbG = legendG
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'infra-legend-group infra-playback-pill')
-      .style('cursor', 'pointer');
-
-    if (isExpanded) {
-      pbG
-        .append('rect')
-        .attr('width', fullW)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
-
-    const pillXOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillH = LEGEND_HEIGHT - (isExpanded ? LEGEND_CAPSULE_PAD * 2 : 0);
-
-    pbG
-      .append('rect')
-      .attr('x', pillXOff)
-      .attr('y', pillYOff)
-      .attr('width', pillWidth)
-      .attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isExpanded ? palette.bg : groupBg);
-
-    if (isExpanded) {
-      pbG
-        .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);
-    }
+    let entryX = pillWidth + 8;
+    const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
 
-    pbG
+    const ppLabel = playback.paused ? '▶' : '⏸';
+    playbackEl
       .append('text')
-      .attr('x', pillXOff + pillWidth / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+      .attr('x', entryX)
+      .attr('y', entryY)
       .attr('font-family', FONT_FAMILY)
       .attr('font-size', LEGEND_PILL_FONT_SIZE)
-      .attr('font-weight', '500')
-      .attr('fill', isExpanded ? palette.text : palette.textMuted)
-      .attr('text-anchor', 'middle')
-      .text(pillLabel);
-
-    if (isExpanded) {
-      let entryX = pillXOff + pillWidth + 8;
-      const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
+      .attr('fill', palette.textMuted)
+      .attr('data-playback-action', 'toggle-pause')
+      .style('cursor', 'pointer')
+      .text(ppLabel);
+    entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
+
+    for (const s of playback.speedOptions) {
+      const label = `${s}x`;
+      const isSpeedActive = playback.speed === s;
+      const slotW =
+        measureLegendText(label, LEGEND_ENTRY_FONT_SIZE) +
+        SPEED_BADGE_H_PAD * 2;
+      const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
+      const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
+
+      const speedG = playbackEl
+        .append('g')
+        .attr('data-playback-action', 'set-speed')
+        .attr('data-playback-value', String(s))
+        .style('cursor', 'pointer');
+
+      speedG
+        .append('rect')
+        .attr('x', entryX)
+        .attr('y', badgeY)
+        .attr('width', slotW)
+        .attr('height', badgeH)
+        .attr('rx', badgeH / 2)
+        .attr('fill', isSpeedActive ? palette.primary : 'transparent');
 
-      const ppLabel = playback.paused ? '▶' : '⏸';
-      pbG
+      speedG
         .append('text')
-        .attr('x', entryX)
+        .attr('x', entryX + slotW / 2)
         .attr('y', entryY)
         .attr('font-family', FONT_FAMILY)
-        .attr('font-size', LEGEND_PILL_FONT_SIZE)
-        .attr('fill', palette.textMuted)
-        .attr('data-playback-action', 'toggle-pause')
-        .style('cursor', 'pointer')
-        .text(ppLabel);
-      entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
-
-      for (const s of playback.speedOptions) {
-        const label = `${s}x`;
-        const isActive = playback.speed === s;
-        const slotW =
-          measureLegendText(label, LEGEND_ENTRY_FONT_SIZE) +
-          SPEED_BADGE_H_PAD * 2;
-        const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
-        const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
-
-        const speedG = pbG
-          .append('g')
-          .attr('data-playback-action', 'set-speed')
-          .attr('data-playback-value', String(s))
-          .style('cursor', 'pointer');
-
-        speedG
-          .append('rect')
-          .attr('x', entryX)
-          .attr('y', badgeY)
-          .attr('width', slotW)
-          .attr('height', badgeH)
-          .attr('rx', badgeH / 2)
-          .attr('fill', isActive ? palette.primary : 'transparent');
-
-        speedG
-          .append('text')
-          .attr('x', entryX + slotW / 2)
-          .attr('y', entryY)
-          .attr('font-family', FONT_FAMILY)
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('font-weight', isActive ? '600' : '400')
-          .attr('fill', isActive ? palette.bg : palette.textMuted)
-          .attr('text-anchor', 'middle')
-          .text(label);
-        entryX += slotW + SPEED_BADGE_GAP;
-      }
+        .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+        .attr('font-weight', isSpeedActive ? '600' : '400')
+        .attr('fill', isSpeedActive ? palette.bg : palette.textMuted)
+        .attr('text-anchor', 'middle')
+        .text(label);
+      entryX += slotW + SPEED_BADGE_GAP;
     }
-
-    cursorX += fullW + LEGEND_GROUP_GAP; // eslint-disable-line no-useless-assignment
   }
 }
 

package/src/kanban/renderer.ts

@@ -15,13 +15,9 @@ import type {
 } from './types';
 import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
-import {
-  LEGEND_HEIGHT,
-  LEGEND_PILL_FONT_SIZE,
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_CAPSULE_PAD,
-} from '../utils/legend-constants';
+import { LEGEND_HEIGHT } from '../utils/legend-constants';
+import { renderLegendD3 } from '../utils/legend-d3';
+import type { LegendConfig, LegendState } from '../utils/legend-types';
 
 // ============================================================
 // Constants
@@ -256,128 +252,25 @@ export function renderKanban(
   // Legend (bottom of diagram)
   if (parsed.tagGroups.length > 0) {
     const legendY = height - LEGEND_HEIGHT;
-    let legendX = DIAGRAM_PADDING;
-    const groupBg = isDark
-      ? mix(palette.surface, palette.bg, 50)
-      : mix(palette.surface, palette.bg, 30);
-    const capsulePad = LEGEND_CAPSULE_PAD;
-
-    const legendContainer = svg.append('g').attr('class', 'kanban-legend');
-    if (activeTagGroup) {
-      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
-    }
-
-    for (const group of parsed.tagGroups) {
-      const isActive =
-        activeTagGroup?.toLowerCase() === group.name.toLowerCase();
-
-      // When a group is active, skip all other groups entirely
-      if (activeTagGroup != null && !isActive) continue;
-
-      const pillTextWidth = group.name.length * LEGEND_PILL_FONT_SIZE * 0.6;
-      const pillWidth = pillTextWidth + 16;
-
-      // Measure total capsule width for active groups (pill + entries)
-      let capsuleContentWidth = pillWidth;
-      if (isActive) {
-        capsuleContentWidth += 4; // gap after pill
-        for (const entry of group.entries) {
-          capsuleContentWidth +=
-            LEGEND_DOT_R * 2 +
-            4 +
-            entry.value.length * LEGEND_ENTRY_FONT_SIZE * 0.6 +
-            8;
-        }
-      }
-      const capsuleWidth = capsuleContentWidth + capsulePad * 2;
-
-      // Outer capsule background for active group
-      if (isActive) {
-        legendContainer
-          .append('rect')
-          .attr('x', legendX)
-          .attr('y', legendY)
-          .attr('width', capsuleWidth)
-          .attr('height', LEGEND_HEIGHT)
-          .attr('rx', LEGEND_HEIGHT / 2)
-          .attr('fill', groupBg);
-      }
-
-      const pillX = legendX + (isActive ? capsulePad : 0);
-
-      // Pill background
-      const pillBg = isActive ? palette.bg : groupBg;
-      legendContainer
-        .append('rect')
-        .attr('x', pillX)
-        .attr('y', legendY + capsulePad)
-        .attr('width', pillWidth)
-        .attr('height', LEGEND_HEIGHT - capsulePad * 2)
-        .attr('rx', (LEGEND_HEIGHT - capsulePad * 2) / 2)
-        .attr('fill', pillBg)
-        .attr('class', 'kanban-legend-group')
-        .attr('data-legend-group', group.name.toLowerCase());
-
-      if (isActive) {
-        legendContainer
-          .append('rect')
-          .attr('x', pillX)
-          .attr('y', legendY + capsulePad)
-          .attr('width', pillWidth)
-          .attr('height', LEGEND_HEIGHT - capsulePad * 2)
-          .attr('rx', (LEGEND_HEIGHT - capsulePad * 2) / 2)
-          .attr('fill', 'none')
-          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-          .attr('stroke-width', 0.75);
-      }
-
-      // Pill text
-      legendContainer
-        .append('text')
-        .attr('x', pillX + pillWidth / 2)
-        .attr('y', legendY + LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-        .attr('font-size', LEGEND_PILL_FONT_SIZE)
-        .attr('font-weight', '500')
-        .attr('fill', isActive ? palette.text : palette.textMuted)
-        .attr('text-anchor', 'middle')
-        .text(group.name);
-
-      // Show entries inside capsule when active
-      if (isActive) {
-        let entryX = pillX + pillWidth + 4;
-        for (const entry of group.entries) {
-          const entryG = legendContainer
-            .append('g')
-            .attr('data-legend-entry', entry.value.toLowerCase())
-            .style('cursor', 'pointer');
-
-          entryG
-            .append('circle')
-            .attr('cx', entryX + LEGEND_DOT_R)
-            .attr('cy', legendY + LEGEND_HEIGHT / 2)
-            .attr('r', LEGEND_DOT_R)
-            .attr('fill', entry.color);
-
-          const entryTextX = entryX + LEGEND_DOT_R * 2 + 4;
-          entryG
-            .append('text')
-            .attr('x', entryTextX)
-            .attr(
-              'y',
-              legendY + LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1
-            )
-            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-            .attr('fill', palette.textMuted)
-            .text(entry.value);
-
-          entryX =
-            entryTextX + entry.value.length * LEGEND_ENTRY_FONT_SIZE * 0.6 + 8;
-        }
-        legendX += capsuleWidth + 12;
-      } else {
-        legendX += pillWidth + 12;
-      }
-    }
+    const legendConfig: LegendConfig = {
+      groups: parsed.tagGroups,
+      position: { placement: 'top-center', titleRelation: 'below-title' },
+      mode: exportDims ? 'inline' : 'fixed',
+    };
+    const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
+    const legendG = svg
+      .append('g')
+      .attr('class', 'kanban-legend')
+      .attr('transform', `translate(${DIAGRAM_PADDING},${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      undefined,
+      width - DIAGRAM_PADDING * 2
+    );
   }
 
   // Columns