@diagrammo/dgmo 0.8.9 → 0.8.11

package/src/c4/layout.ts

@@ -18,6 +18,27 @@ import {
   measureLegendText,
 } from '../utils/legend-constants';
 
+/** dagre node label shape after layout(). */
+interface DagreNodeLabel {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  [key: string]: unknown;
+}
+
+/** dagre edge label shape after layout(). */
+interface DagreEdgeLabel {
+  points: { x: number; y: number }[];
+  [key: string]: unknown;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const gNode = (g: any, name: string): DagreNodeLabel => g.node(name);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const gEdge = (g: any, v: string, w: string): DagreEdgeLabel | undefined =>
+  g.edge(v, w);
+
 // ============================================================
 // Types
 // ============================================================
@@ -213,7 +234,7 @@ function computeEdgePenalty(
  * closer to their neighbors, producing cleaner visual layouts.
  */
 function reduceCrossings(
-  g: dagre.graphlib.Graph,
+  g: InstanceType<typeof dagre.graphlib.Graph>,
   edgeList: { source: string; target: string }[],
   nodeGroupMap?: Map<string, string>
 ): void {
@@ -229,7 +250,7 @@ function reduceCrossings(
   // Build geometry map for edge-node collision scoring
   const nodeGeometry = new Map<string, NodeGeometry>();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (pos)
       nodeGeometry.set(name, {
         y: pos.y,
@@ -241,7 +262,7 @@ function reduceCrossings(
   // Group nodes by rank
   const rankMap = new Map<number, string[]>();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (!pos) continue;
     const rankY = Math.round(pos.y);
     if (!rankMap.has(rankY)) rankMap.set(rankY, []);
@@ -250,7 +271,7 @@ function reduceCrossings(
 
   // Sort each rank by current x position
   for (const [, rankNodes] of rankMap) {
-    rankNodes.sort((a, b) => g.node(a).x - g.node(b).x);
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
   }
 
   let anyMoved = false;
@@ -285,13 +306,13 @@ function reduceCrossings(
 
       // Collect the x-slots for this partition (sorted)
       const xSlots = partition
-        .map((name) => g.node(name).x)
+        .map((name) => gNode(g, name).x)
         .sort((a, b) => a - b);
 
       // Build position map snapshot
       const basePositions = new Map<string, number>();
       for (const name of g.nodes()) {
-        const pos = g.node(name);
+        const pos = gNode(g, name);
         if (pos) basePositions.set(name, pos.x);
       }
 
@@ -379,7 +400,7 @@ function reduceCrossings(
       // Apply best permutation if it differs from current
       if (bestPerm.some((name, i) => name !== partition[i])) {
         for (let i = 0; i < bestPerm.length; i++) {
-          g.node(bestPerm[i]!).x = xSlots[i]!;
+          gNode(g, bestPerm[i]!).x = xSlots[i]!;
           // Update in the original rankNodes too
           const rankIdx = rankNodes.indexOf(partition[i]!);
           if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i]!;
@@ -392,10 +413,10 @@ function reduceCrossings(
   // Recompute edge waypoints if any positions changed
   if (anyMoved) {
     for (const edge of edgeList) {
-      const edgeData = g.edge(edge.source, edge.target);
+      const edgeData = gEdge(g, edge.source, edge.target);
       if (!edgeData) continue;
-      const srcPos = g.node(edge.source);
-      const tgtPos = g.node(edge.target);
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
       if (!srcPos || !tgtPos) continue;
 
       const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };

package/src/c4/renderer.ts

@@ -9,7 +9,7 @@ import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedC4 } from './types';
-import type { C4LayoutResult, C4LayoutEdge, C4LegendGroup } from './layout';
+import type { C4LayoutResult, C4LayoutEdge } from './layout';
 import { parseC4 } from './parser';
 import {
   layoutC4Context,
@@ -18,18 +18,9 @@ import {
   layoutC4Deployment,
   collectCardMetadata,
 } from './layout';
-import {
-  LEGEND_HEIGHT,
-  LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_PAD,
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_DOT_GAP,
-  LEGEND_ENTRY_TRAIL,
-  LEGEND_CAPSULE_PAD,
-  LEGEND_GROUP_GAP,
-  measureLegendText,
-} 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';
 import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 
 // ============================================================
@@ -1251,133 +1242,29 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeTagGroup?: string | null,
-  /** When set, center groups horizontally across this width (fixed overlay mode). */
   fixedWidth?: number | null
 ): void {
-  const visibleGroups =
-    activeTagGroup != null
-      ? layout.legend.filter(
-          (g) => g.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase()
-        )
-      : layout.legend;
-
-  const pillWidthOf = (g: C4LegendGroup) =>
-    measureLegendText(g.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  const effectiveW = (g: C4LegendGroup) =>
-    activeTagGroup != null ? g.width : pillWidthOf(g);
-
-  // In fixed mode, compute centered x-positions
-  let fixedPositions: Map<string, number> | null = null;
-  if (fixedWidth != null && visibleGroups.length > 0) {
-    fixedPositions = new Map();
-    const totalW =
-      visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-      (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-    let cx = Math.max(DIAGRAM_PADDING, (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 &&
-      group.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase();
-
-    const groupBg = isDark
-      ? mix(palette.surface, palette.bg, 50)
-      : mix(palette.surface, palette.bg, 30);
-
-    const pillLabel = group.name;
-    const pillWidth = pillWidthOf(group);
-
-    const gX = fixedPositions?.get(group.name) ?? group.x;
-    const gY = fixedPositions != null ? 0 : group.y;
-
-    const gEl = parent
-      .append('g')
-      .attr('transform', `translate(${gX}, ${gY})`)
-      .attr('class', 'c4-legend-group')
-      .attr('data-legend-group', group.name.toLowerCase())
-      .style('cursor', 'pointer');
-
-    if (isActive) {
-      gEl
-        .append('rect')
-        .attr('width', group.width)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
-
-    const pillX = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillY = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-
-    gEl
-      .append('rect')
-      .attr('x', pillX)
-      .attr('y', pillY)
-      .attr('width', pillWidth)
-      .attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isActive ? palette.bg : groupBg);
-
-    if (isActive) {
-      gEl
-        .append('rect')
-        .attr('x', pillX)
-        .attr('y', pillY)
-        .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);
-    }
-
-    gEl
-      .append('text')
-      .attr('x', pillX + pillWidth / 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(pillLabel);
-
-    if (isActive) {
-      let entryX = pillX + pillWidth + 4;
-      for (const entry of group.entries) {
-        const entryG = gEl
-          .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;
-      }
-    }
-  }
+  const groups = layout.legend.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
+  }));
+  const legendConfig: LegendConfig = {
+    groups,
+    position: { placement: 'top-center', titleRelation: 'below-title' },
+    mode: 'fixed',
+  };
+  const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
+  const containerWidth = fixedWidth ?? layout.width;
+  renderLegendD3(
+    parent,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    undefined,
+    containerWidth
+  );
+  parent.selectAll('[data-legend-group]').classed('c4-legend-group', true);
 }
 
 // ============================================================