@diagrammo/dgmo 0.8.9 → 0.8.10

package/src/sitemap/renderer.ts

@@ -11,20 +11,14 @@ import type { ParsedSitemap } from './types';
 import type { SitemapLayoutResult, SitemapLegendGroup } from './layout';
 import {
   LEGEND_HEIGHT,
-  LEGEND_PILL_PAD,
-  LEGEND_PILL_FONT_SIZE,
-  LEGEND_CAPSULE_PAD,
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_DOT_GAP,
-  LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
   LEGEND_EYE_SIZE,
   LEGEND_EYE_GAP,
   EYE_OPEN_PATH,
   EYE_CLOSED_PATH,
-  measureLegendText,
 } from '../utils/legend-constants';
+import { renderLegendD3 } from '../utils/legend-d3';
+import type { LegendConfig, LegendState } from '../utils/legend-types';
 
 // ============================================================
 // Constants
@@ -98,6 +92,12 @@ const lineGenerator = d3Shape
   .y((d) => d.y)
   .curve(d3Shape.curveBasis);
 
+const lineGeneratorLinear = d3Shape
+  .line<{ x: number; y: number }>()
+  .x((d) => d.x)
+  .y((d) => d.y)
+  .curve(d3Shape.curveLinear);
+
 // ============================================================
 // Main Renderer
 // ============================================================
@@ -380,7 +380,8 @@ export function renderSitemap(
       ? `sm-arrow-${edge.color.replace('#', '')}`
       : 'sm-arrow';
 
-    const pathD = lineGenerator(edge.points);
+    const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
+    const pathD = gen(edge.points);
     if (pathD) {
       edgeG
         .append('path')
@@ -617,164 +618,75 @@ function renderLegend(
 ): void {
   if (legendGroups.length === 0) return;
 
-  const visibleGroups =
-    activeTagGroup != null
-      ? legendGroups.filter(
-          (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
-        )
-      : legendGroups;
-
-  const groupBg = isDark
-    ? mix(palette.surface, palette.bg, 50)
-    : mix(palette.surface, palette.bg, 30);
-
-  // For fixed legend: compute pixel-space positions centered in SVG width
-  let fixedPositions: Map<string, number> | undefined;
-  if (fixedWidth != null && visibleGroups.length > 0) {
-    fixedPositions = new Map();
-    const effectiveW = (g: SitemapLegendGroup) =>
-      activeTagGroup != null ? g.width : g.minifiedWidth;
-    const totalW =
-      visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-      (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-    let cx = (fixedWidth - totalW) / 2;
-    for (const g of visibleGroups) {
-      fixedPositions.set(g.name, cx);
-      cx += effectiveW(g) + LEGEND_GROUP_GAP;
-    }
-  }
-
-  for (const group of visibleGroups) {
-    const isActive = activeTagGroup != null;
-    const pillW =
-      measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-
-    const gX = fixedPositions?.get(group.name) ?? group.x;
-    const gY = fixedPositions ? 0 : group.y;
-
-    const legendG = parent
-      .append('g')
-      .attr('transform', `translate(${gX}, ${gY})`)
-      .attr('class', 'sitemap-legend-group')
-      .attr('data-legend-group', group.name.toLowerCase())
-      .style('cursor', 'pointer');
-
-    // Outer capsule background (active/expanded only)
-    if (isActive) {
-      legendG
-        .append('rect')
-        .attr('width', group.width)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
-
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-
-    // Pill background
-    legendG
-      .append('rect')
-      .attr('x', pillXOff)
-      .attr('y', pillYOff)
-      .attr('width', pillW)
-      .attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isActive ? palette.bg : groupBg);
-
-    // Active pill border
-    if (isActive) {
-      legendG
-        .append('rect')
-        .attr('x', pillXOff)
-        .attr('y', pillYOff)
-        .attr('width', pillW)
-        .attr('height', pillH)
-        .attr('rx', pillH / 2)
-        .attr('fill', 'none')
-        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-        .attr('stroke-width', 0.75);
-    }
+  const groups = legendGroups.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
+  }));
+
+  const isFixedMode = fixedWidth != null;
+  const eyeAddonWidth = isFixedMode ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
+
+  const legendConfig: LegendConfig = {
+    groups,
+    position: { placement: 'top-center', titleRelation: 'below-title' },
+    mode: 'fixed',
+    capsulePillAddonWidth: eyeAddonWidth,
+  };
+  const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
+  const containerWidth =
+    fixedWidth ?? legendGroups[0]?.x + (legendGroups[0]?.width ?? 200);
+
+  const legendHandle = renderLegendD3(
+    parent,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    undefined,
+    containerWidth
+  );
 
-    // Pill text
-    legendG
-      .append('text')
-      .attr('x', pillXOff + pillW / 2)
-      .attr('y', 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);
+  parent.selectAll('[data-legend-group]').classed('sitemap-legend-group', true);
 
-    // Eye icon for visibility toggle (active only, app mode)
-    if (isActive && fixedWidth != null) {
-      const groupKey = group.name.toLowerCase();
+  // Inject eye icons into active group capsules (fixed/app mode only)
+  if (isFixedMode) {
+    const computedLayout = legendHandle.getLayout();
+    if (computedLayout.activeCapsule?.addonX != null) {
+      const capsule = computedLayout.activeCapsule;
+      const groupKey = capsule.groupName.toLowerCase();
       const isHidden = hiddenAttributes?.has(groupKey) ?? false;
-      const eyeX = pillXOff + pillW + LEGEND_EYE_GAP;
-      const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
-      const hitPad = 6;
-
-      const eyeG = legendG
-        .append('g')
-        .attr('class', 'sitemap-legend-eye')
-        .attr('data-legend-visibility', groupKey)
-        .style('cursor', 'pointer')
-        .attr('opacity', isHidden ? 0.4 : 0.7);
 
-      // Transparent hit area for easier clicking
-      eyeG
-        .append('rect')
-        .attr('x', eyeX - hitPad)
-        .attr('y', eyeY - hitPad)
-        .attr('width', LEGEND_EYE_SIZE + hitPad * 2)
-        .attr('height', LEGEND_EYE_SIZE + hitPad * 2)
-        .attr('fill', 'transparent')
-        .attr('pointer-events', 'all');
-
-      eyeG
-        .append('path')
-        .attr('d', isHidden ? EYE_CLOSED_PATH : EYE_OPEN_PATH)
-        .attr('transform', `translate(${eyeX}, ${eyeY})`)
-        .attr('fill', 'none')
-        .attr('stroke', palette.textMuted)
-        .attr('stroke-width', 1.2)
-        .attr('stroke-linecap', 'round')
-        .attr('stroke-linejoin', 'round');
-    }
+      const activeGroupEl = parent.select(`[data-legend-group="${groupKey}"]`);
+      if (!activeGroupEl.empty()) {
+        const eyeX = capsule.addonX!;
+        const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
+        const hitPad = 6;
 
-    // Entries (active/expanded only)
-    if (isActive) {
-      const eyeShift =
-        fixedWidth != null ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
-      let entryX = pillXOff + pillW + 4 + eyeShift;
-      for (const entry of group.entries) {
-        const entryG = legendG
+        const eyeG = activeGroupEl
           .append('g')
-          .attr('data-legend-entry', entry.value.toLowerCase())
-          .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-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('fill', palette.textMuted)
-          .text(entry.value);
-
-        entryX =
-          textX +
-          measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
-          LEGEND_ENTRY_TRAIL;
+          .attr('class', 'sitemap-legend-eye')
+          .attr('data-legend-visibility', groupKey)
+          .style('cursor', 'pointer')
+          .attr('opacity', isHidden ? 0.4 : 0.7);
+
+        eyeG
+          .append('rect')
+          .attr('x', eyeX - hitPad)
+          .attr('y', eyeY - hitPad)
+          .attr('width', LEGEND_EYE_SIZE + hitPad * 2)
+          .attr('height', LEGEND_EYE_SIZE + hitPad * 2)
+          .attr('fill', 'transparent')
+          .attr('pointer-events', 'all');
+
+        eyeG
+          .append('path')
+          .attr('d', isHidden ? EYE_CLOSED_PATH : EYE_OPEN_PATH)
+          .attr('transform', `translate(${eyeX}, ${eyeY})`)
+          .attr('fill', 'none')
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 1.2)
+          .attr('stroke-linecap', 'round')
+          .attr('stroke-linejoin', 'round');
       }
     }
   }

package/src/utils/legend-constants.ts

@@ -16,6 +16,12 @@ export const LEGEND_EYE_SIZE = 14;
 export const LEGEND_EYE_GAP = 6;
 export const LEGEND_ICON_W = 20;
 
+// ── Spacing constants (centralized legend system) ───────────
+export const LEGEND_TOP_PAD = 12;
+export const LEGEND_TITLE_GAP = 8;
+export const LEGEND_CONTENT_GAP = 12;
+export const LEGEND_MAX_ENTRY_ROWS = 3;
+
 // ── Proportional text measurement ────────────────────────────
 // Helvetica character width ratios (fraction of fontSize).
 // Replaces the naive `chars * 0.6 * fontSize` estimate with

package/src/utils/legend-d3.ts

@@ -0,0 +1,400 @@
+// ============================================================
+// Centralized legend D3 renderer
+// Thin adapter: layout engine → D3 DOM
+// ============================================================
+
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_DOT_GAP,
+  measureLegendText,
+} from './legend-constants';
+import { computeLegendLayout } from './legend-layout';
+import { mix } from '../palettes/color-utils';
+import { FONT_FAMILY } from '../fonts';
+import type {
+  LegendConfig,
+  LegendState,
+  LegendCallbacks,
+  LegendHandle,
+  LegendPalette,
+  LegendLayout,
+  LegendPillLayout,
+  LegendCapsuleLayout,
+  LegendControlLayout,
+  D3Sel,
+} from './legend-types';
+
+// ── Main renderer ───────────────────────────────────────────
+
+export function renderLegendD3(
+  container: D3Sel,
+  config: LegendConfig,
+  state: LegendState,
+  palette: LegendPalette,
+  isDark: boolean,
+  callbacks?: LegendCallbacks,
+  containerWidth?: number
+): LegendHandle {
+  const width = containerWidth ?? parseFloat(container.attr('width') || '800');
+  let currentState = { ...state };
+  let currentLayout: LegendLayout;
+
+  const legendG = container.append('g').attr('class', 'dgmo-legend');
+
+  function render() {
+    currentLayout = computeLegendLayout(config, currentState, width);
+    legendG.selectAll('*').remove();
+
+    if (currentLayout.height === 0) return;
+
+    // Set active attribute on container
+    if (currentState.activeGroup) {
+      legendG.attr(
+        'data-legend-active',
+        currentState.activeGroup.toLowerCase()
+      );
+    } else {
+      legendG.attr('data-legend-active', null);
+    }
+
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
+    const pillBorder = mix(palette.textMuted, palette.bg, 50);
+
+    // Render active capsule
+    if (currentLayout.activeCapsule) {
+      renderCapsule(
+        legendG,
+        currentLayout.activeCapsule,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        callbacks
+      );
+    }
+
+    // Render collapsed pills
+    for (const pill of currentLayout.pills) {
+      renderPill(legendG, pill, palette, groupBg, callbacks);
+    }
+
+    // Render controls
+    for (const ctrl of currentLayout.controls) {
+      renderControl(
+        legendG,
+        ctrl,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        config.controls
+      );
+    }
+  }
+
+  render();
+
+  return {
+    setState(newState: LegendState) {
+      currentState = { ...newState };
+      render();
+    },
+    destroy() {
+      legendG.remove();
+    },
+    getHeight() {
+      return currentLayout?.height ?? 0;
+    },
+    getLayout() {
+      return currentLayout;
+    },
+  };
+}
+
+// ── Capsule (active group) ──────────────────────────────────
+
+function renderCapsule(
+  parent: D3Sel,
+  capsule: LegendCapsuleLayout,
+  palette: LegendPalette,
+  groupBg: string,
+  pillBorder: string,
+  _isDark: boolean,
+  callbacks?: LegendCallbacks
+): void {
+  const g = parent
+    .append('g')
+    .attr('transform', `translate(${capsule.x},${capsule.y})`)
+    .attr('data-legend-group', capsule.groupName.toLowerCase())
+    .style('cursor', 'pointer');
+
+  // Outer capsule background
+  g.append('rect')
+    .attr('width', capsule.width)
+    .attr('height', capsule.height)
+    .attr('rx', LEGEND_HEIGHT / 2)
+    .attr('fill', groupBg);
+
+  // Inner pill
+  const pill = capsule.pill;
+  g.append('rect')
+    .attr('x', pill.x)
+    .attr('y', pill.y)
+    .attr('width', pill.width)
+    .attr('height', pill.height)
+    .attr('rx', pill.height / 2)
+    .attr('fill', palette.bg);
+
+  // Pill border
+  g.append('rect')
+    .attr('x', pill.x)
+    .attr('y', pill.y)
+    .attr('width', pill.width)
+    .attr('height', pill.height)
+    .attr('rx', pill.height / 2)
+    .attr('fill', 'none')
+    .attr('stroke', pillBorder)
+    .attr('stroke-width', 0.75);
+
+  // Pill text
+  g.append('text')
+    .attr('x', pill.x + pill.width / 2)
+    .attr('y', LEGEND_HEIGHT / 2)
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-size', LEGEND_PILL_FONT_SIZE)
+    .attr('font-weight', 500)
+    .attr('fill', palette.text)
+    .attr('pointer-events', 'none')
+    .attr('font-family', FONT_FAMILY)
+    .text(capsule.groupName);
+
+  // Entry dots + labels
+  for (const entry of capsule.entries) {
+    const entryG = g
+      .append('g')
+      .attr('data-legend-entry', entry.value.toLowerCase())
+      .attr('data-series-name', entry.value)
+      .style('cursor', 'pointer');
+
+    entryG
+      .append('circle')
+      .attr('cx', entry.dotCx)
+      .attr('cy', entry.dotCy)
+      .attr('r', LEGEND_DOT_R)
+      .attr('fill', entry.color);
+
+    entryG
+      .append('text')
+      .attr('x', entry.textX)
+      .attr('y', entry.textY)
+      .attr('dominant-baseline', 'central')
+      .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+      .attr('fill', palette.textMuted)
+      .attr('font-family', FONT_FAMILY)
+      .text(entry.value);
+
+    // Entry hover callback for chart-level highlighting
+    if (callbacks?.onEntryHover) {
+      const groupName = capsule.groupName;
+      const entryValue = entry.value;
+      const onHover = callbacks.onEntryHover;
+      entryG
+        .on('mouseenter', () => onHover(groupName, entryValue))
+        .on('mouseleave', () => onHover(groupName, null));
+    }
+  }
+
+  // "+N more" indicator
+  if (capsule.moreCount) {
+    const lastEntry = capsule.entries[capsule.entries.length - 1];
+    const moreX = lastEntry
+      ? lastEntry.textX +
+        measureLegendText(lastEntry.value, LEGEND_ENTRY_FONT_SIZE) +
+        LEGEND_ENTRY_DOT_GAP * 2
+      : pill.x + pill.width + 8;
+    const moreY = lastEntry?.textY ?? LEGEND_HEIGHT / 2;
+
+    g.append('text')
+      .attr('x', moreX)
+      .attr('y', moreY)
+      .attr('dominant-baseline', 'central')
+      .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+      .attr('font-style', 'italic')
+      .attr('fill', palette.textMuted)
+      .attr('font-family', FONT_FAMILY)
+      .text(`+${capsule.moreCount} more`);
+  }
+
+  // Click handler on pill
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = capsule.groupName;
+    g.on('click', () => cb(name));
+  }
+
+  // Post-render callback for chart-specific addons
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(capsule.groupName, g, true);
+  }
+}
+
+// ── Collapsed pill ──────────────────────────────────────────
+
+function renderPill(
+  parent: D3Sel,
+  pill: LegendPillLayout,
+  palette: LegendPalette,
+  groupBg: string,
+  callbacks?: LegendCallbacks
+): void {
+  const g = parent
+    .append('g')
+    .attr('transform', `translate(${pill.x},${pill.y})`)
+    .attr('data-legend-group', pill.groupName.toLowerCase())
+    .style('cursor', 'pointer');
+
+  g.append('rect')
+    .attr('width', pill.width)
+    .attr('height', pill.height)
+    .attr('rx', pill.height / 2)
+    .attr('fill', groupBg);
+
+  g.append('text')
+    .attr('x', pill.width / 2)
+    .attr('y', pill.height / 2)
+    .attr('text-anchor', 'middle')
+    .attr('dominant-baseline', 'central')
+    .attr('font-size', LEGEND_PILL_FONT_SIZE)
+    .attr('font-weight', 500)
+    .attr('fill', palette.textMuted)
+    .attr('pointer-events', 'none')
+    .attr('font-family', FONT_FAMILY)
+    .text(pill.groupName);
+
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = pill.groupName;
+    g.on('click', () => cb(name));
+  }
+
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(pill.groupName, g, false);
+  }
+}
+
+// ── Control (right-aligned) ─────────────────────────────────
+
+function renderControl(
+  parent: D3Sel,
+  ctrl: LegendControlLayout,
+  palette: LegendPalette,
+  _groupBg: string,
+  pillBorder: string,
+  _isDark: boolean,
+  configControls?: LegendConfig['controls']
+): void {
+  const g = parent
+    .append('g')
+    .attr('transform', `translate(${ctrl.x},${ctrl.y})`)
+    .attr('data-legend-control', ctrl.id)
+    .style('cursor', 'pointer');
+
+  if (ctrl.exportBehavior === 'strip') {
+    g.attr('data-export-ignore', 'true');
+  }
+
+  // Outline pill style for controls
+  g.append('rect')
+    .attr('width', ctrl.width)
+    .attr('height', ctrl.height)
+    .attr('rx', ctrl.height / 2)
+    .attr('fill', 'none')
+    .attr('stroke', pillBorder)
+    .attr('stroke-width', 0.75);
+
+  // Icon + label
+  let textX = ctrl.width / 2;
+  if (ctrl.icon && ctrl.label) {
+    // Icon on left, label on right
+    const iconG = g
+      .append('g')
+      .attr('transform', `translate(8,${(ctrl.height - 14) / 2})`);
+    iconG.html(ctrl.icon);
+    textX =
+      8 +
+      14 +
+      LEGEND_ENTRY_DOT_GAP +
+      measureLegendText(ctrl.label, LEGEND_PILL_FONT_SIZE) / 2;
+  }
+
+  if (ctrl.label) {
+    g.append('text')
+      .attr('x', textX)
+      .attr('y', ctrl.height / 2)
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'central')
+      .attr('font-size', LEGEND_PILL_FONT_SIZE)
+      .attr('font-weight', 500)
+      .attr('fill', palette.textMuted)
+      .attr('pointer-events', 'none')
+      .attr('font-family', FONT_FAMILY)
+      .text(ctrl.label);
+  }
+
+  // Children (e.g., speed badges)
+  if (ctrl.children) {
+    let cx = ctrl.width + 4;
+    for (const child of ctrl.children) {
+      const childG = g
+        .append('g')
+        .attr('transform', `translate(${cx},0)`)
+        .style('cursor', 'pointer');
+
+      childG
+        .append('rect')
+        .attr('width', child.width)
+        .attr('height', ctrl.height)
+        .attr('rx', ctrl.height / 2)
+        .attr(
+          'fill',
+          child.isActive ? (palette.primary ?? palette.text) : 'none'
+        )
+        .attr('stroke', pillBorder)
+        .attr('stroke-width', 0.75);
+
+      childG
+        .append('text')
+        .attr('x', child.width / 2)
+        .attr('y', ctrl.height / 2)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+        .attr('fill', child.isActive ? palette.bg : palette.textMuted)
+        .attr('font-family', FONT_FAMILY)
+        .text(child.label);
+
+      // Click handler for child
+      const configCtrl = configControls?.find((c) => c.id === ctrl.id);
+      const configChild = configCtrl?.children?.find((c) => c.id === child.id);
+      if (configChild?.onClick) {
+        const onClick = configChild.onClick;
+        childG.on('click', () => onClick());
+      }
+
+      cx += child.width + 4;
+    }
+  }
+
+  // Click handler
+  const configCtrl = configControls?.find((c) => c.id === ctrl.id);
+  if (configCtrl?.onClick) {
+    const onClick = configCtrl.onClick;
+    g.on('click', () => onClick());
+  }
+}