@diagrammo/dgmo 0.8.9 → 0.8.11

package/src/label-layout.ts

@@ -0,0 +1,286 @@
+// ---------------------------------------------------------------------------
+// Shared label collision detection and placement utilities
+// ---------------------------------------------------------------------------
+
+export interface LabelRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface PointCircle {
+  cx: number;
+  cy: number;
+  r: number;
+}
+
+/** Axis-aligned bounding box overlap test. */
+export function rectsOverlap(a: LabelRect, b: LabelRect): boolean {
+  return (
+    a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
+  );
+}
+
+/** Rect vs circle overlap using nearest-point-on-rect distance check. */
+export function rectCircleOverlap(
+  rect: LabelRect,
+  circle: PointCircle
+): boolean {
+  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
+  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
+  const dx = nearestX - circle.cx;
+  const dy = nearestY - circle.cy;
+  return dx * dx + dy * dy < circle.r * circle.r;
+}
+
+// ---------------------------------------------------------------------------
+// Quadrant chart point label placement
+// ---------------------------------------------------------------------------
+
+const CHAR_WIDTH_RATIO = 0.6;
+
+export interface QuadrantLabelPoint {
+  label: string;
+  cx: number; // pixel x
+  cy: number; // pixel y
+}
+
+interface PlacedQuadrantLabel {
+  label: string;
+  x: number; // text x
+  y: number; // text y (center of label)
+  anchor: 'middle' | 'start' | 'end';
+  connectorLine?: { x1: number; y1: number; x2: number; y2: number };
+}
+
+/**
+ * Greedy label placement for quadrant chart points.
+ * Avoids collisions with other point labels, point circles, and obstacle rects
+ * (quadrant watermark labels). Labels are constrained within chartBounds.
+ *
+ * Pure function — no DOM dependency.
+ */
+export function computeQuadrantPointLabels(
+  points: QuadrantLabelPoint[],
+  chartBounds: { left: number; top: number; right: number; bottom: number },
+  obstacles: LabelRect[],
+  pointRadius: number,
+  fontSize: number
+): PlacedQuadrantLabel[] {
+  const labelHeight = fontSize + 4;
+  const stepSize = labelHeight + 2;
+  const minGap = pointRadius + 4;
+
+  // Build collision circles for all points
+  const pointCircles: PointCircle[] = points.map((p) => ({
+    cx: p.cx,
+    cy: p.cy,
+    r: pointRadius,
+  }));
+
+  const placedLabels: LabelRect[] = [];
+  const results: PlacedQuadrantLabel[] = [];
+
+  for (let i = 0; i < points.length; i++) {
+    const pt = points[i];
+    const labelWidth = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
+
+    // Try 4 directions: above, below, left, right
+    // Each direction generates candidate (labelX, labelY, anchor)
+    type Candidate = {
+      rect: LabelRect;
+      textX: number;
+      textY: number;
+      anchor: 'middle' | 'start' | 'end';
+      dist: number;
+    };
+
+    let best: Candidate | null = null;
+
+    // Direction generators: for a given offset, produce a candidate rect + text position
+    const directions: Array<{
+      gen: (offset: number) => {
+        rect: LabelRect;
+        textX: number;
+        textY: number;
+        anchor: 'middle' | 'start' | 'end';
+      } | null;
+    }> = [
+      {
+        // Above
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy - offset - labelHeight;
+          if (
+            ly < chartBounds.top ||
+            lx < chartBounds.left ||
+            lx + labelWidth > chartBounds.right
+          )
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: 'middle',
+          };
+        },
+      },
+      {
+        // Below
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy + offset;
+          if (
+            ly + labelHeight > chartBounds.bottom ||
+            lx < chartBounds.left ||
+            lx + labelWidth > chartBounds.right
+          )
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: 'middle',
+          };
+        },
+      },
+      {
+        // Right
+        gen: (offset) => {
+          const lx = pt.cx + offset;
+          const ly = pt.cy - labelHeight / 2;
+          if (
+            lx + labelWidth > chartBounds.right ||
+            ly < chartBounds.top ||
+            ly + labelHeight > chartBounds.bottom
+          )
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx,
+            textY: pt.cy,
+            anchor: 'start',
+          };
+        },
+      },
+      {
+        // Left
+        gen: (offset) => {
+          const lx = pt.cx - offset - labelWidth;
+          const ly = pt.cy - labelHeight / 2;
+          if (
+            lx < chartBounds.left ||
+            ly < chartBounds.top ||
+            ly + labelHeight > chartBounds.bottom
+          )
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx + labelWidth,
+            textY: pt.cy,
+            anchor: 'end',
+          };
+        },
+      },
+    ];
+
+    for (const { gen } of directions) {
+      for (let offset = minGap; ; offset += stepSize) {
+        const cand = gen(offset);
+        if (!cand) break; // out of bounds in this direction
+
+        // Check collisions with placed labels
+        let collision = false;
+        for (const pl of placedLabels) {
+          if (rectsOverlap(cand.rect, pl)) {
+            collision = true;
+            break;
+          }
+        }
+
+        // Check collisions with point circles
+        if (!collision) {
+          for (const circle of pointCircles) {
+            if (rectCircleOverlap(cand.rect, circle)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+
+        // Check collisions with obstacle rects (quadrant labels)
+        if (!collision) {
+          for (const obs of obstacles) {
+            if (rectsOverlap(cand.rect, obs)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+
+        if (!collision) {
+          const dist = offset;
+          if (!best || dist < best.dist) {
+            best = {
+              rect: cand.rect,
+              textX: cand.textX,
+              textY: cand.textY,
+              anchor: cand.anchor,
+              dist,
+            };
+          }
+          break; // best for this direction found
+        }
+      }
+    }
+
+    // Fallback: place above at minGap (may overlap, but at least visible)
+    if (!best) {
+      const lx = pt.cx - labelWidth / 2;
+      const ly = pt.cy - minGap - labelHeight;
+      best = {
+        rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+        textX: pt.cx,
+        textY: ly + labelHeight / 2,
+        anchor: 'middle',
+        dist: minGap,
+      };
+    }
+
+    placedLabels.push(best.rect);
+
+    // Connector line when label is pushed beyond immediate adjacency
+    let connectorLine: PlacedQuadrantLabel['connectorLine'];
+    if (best.dist > minGap + stepSize) {
+      // Determine connector endpoints: from point edge to label edge
+      const dx = best.textX - pt.cx;
+      const dy = best.textY - pt.cy;
+      const angle = Math.atan2(dy, dx);
+      const x1 = pt.cx + Math.cos(angle) * pointRadius;
+      const y1 = pt.cy + Math.sin(angle) * pointRadius;
+
+      // Label edge: closest point on label rect to the point
+      const x2 = Math.max(
+        best.rect.x,
+        Math.min(pt.cx, best.rect.x + best.rect.w)
+      );
+      const y2 = Math.max(
+        best.rect.y,
+        Math.min(pt.cy, best.rect.y + best.rect.h)
+      );
+
+      connectorLine = { x1, y1, x2, y2 };
+    }
+
+    results.push({
+      label: pt.label,
+      x: best.textX,
+      y: best.textY,
+      anchor: best.anchor,
+      connectorLine,
+    });
+  }
+
+  return results;
+}

package/src/org/renderer.ts

@@ -16,20 +16,14 @@ import { parseOrg } from './parser';
 import { layoutOrg } 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
@@ -487,33 +481,17 @@ export function renderOrg(
     }
   }
 
-  // Render legend — kanban-style pills.
+  // Render legend — capsule pills.
   // In app mode (fixedLegend): render at native size outside the scaled group.
   // In export mode: skip legend (unless legend-only chart).
   // Legend-only (no nodes): all groups rendered as expanded capsules inside scaled group.
   if (fixedLegend || legendOnly || (exportDims && hasLegend)) {
-    // Determine which groups to render
-    const visibleGroups = layout.legend.filter((group) => {
-      if (legendOnly) return true;
-      if (activeTagGroup == null) return true;
-      return group.name.toLowerCase() === activeTagGroup.toLowerCase();
-    });
+    const groups = layout.legend.map((g) => ({
+      name: g.name,
+      entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
+    }));
 
-    // For fixedLegend: compute positions in pixel space, centered in SVG
-    let fixedPositions: Map<string, number> | undefined;
-    if (fixedLegend && visibleGroups.length > 0) {
-      fixedPositions = new Map();
-      const effectiveW = (g: (typeof visibleGroups)[0]) =>
-        activeTagGroup != null ? g.width : g.minifiedWidth;
-      const totalW =
-        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-      let cx = (width - totalW) / 2;
-      for (const g of visibleGroups) {
-        fixedPositions.set(g.name, cx);
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
-    }
+    const eyeAddonWidth = fixedLegend ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
 
     // Choose parent: unscaled group for fixedLegend, contentG for legend-only
     const legendParentBase = fixedLegend
@@ -521,152 +499,107 @@ export function renderOrg(
           .append('g')
           .attr('class', 'org-legend-fixed')
           .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleReserve})`)
-      : contentG;
-    const legendParent = legendParentBase;
-    if (fixedLegend && activeTagGroup) {
-      legendParentBase.attr('data-legend-active', activeTagGroup.toLowerCase());
-    }
-
-    for (const group of visibleGroups) {
-      const isActive =
-        legendOnly ||
-        (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 =
-        measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-
-      const gX = fixedPositions?.get(group.name) ?? group.x;
-      const gY = fixedPositions ? 0 : group.y;
-
-      const gEl = legendParent
-        .append('g')
-        .attr('transform', `translate(${gX}, ${gY})`)
-        .attr('class', 'org-legend-group')
-        .attr('data-legend-group', group.name.toLowerCase())
-        .style('cursor', legendOnly ? 'default' : '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);
-      }
-
-      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);
+      : contentG.append('g');
+
+    let legendHandle;
+    if (legendOnly) {
+      // Legend-only mode: render each group expanded individually at layout positions
+      for (const lg of layout.legend) {
+        const singleConfig: LegendConfig = {
+          groups: [
+            {
+              name: lg.name,
+              entries: lg.entries.map((e) => ({
+                value: e.value,
+                color: e.color,
+              })),
+            },
+          ],
+          position: { placement: 'top-center', titleRelation: 'below-title' },
+          mode: 'fixed',
+        };
+        const singleState: LegendState = { activeGroup: lg.name };
+        const groupG = legendParentBase
+          .append('g')
+          .attr('transform', `translate(${lg.x}, ${lg.y})`);
+        renderLegendD3(
+          groupG,
+          singleConfig,
+          singleState,
+          palette,
+          isDark,
+          undefined,
+          lg.width
+        );
+        groupG
+          .selectAll('[data-legend-group]')
+          .classed('org-legend-group', true);
       }
+      legendHandle = null;
+    } else {
+      const legendConfig: LegendConfig = {
+        groups,
+        position: { placement: 'top-center', titleRelation: 'below-title' },
+        mode: 'fixed',
+        capsulePillAddonWidth: eyeAddonWidth,
+      };
+      const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
+      legendHandle = renderLegendD3(
+        legendParentBase,
+        legendConfig,
+        legendState,
+        palette,
+        isDark,
+        undefined,
+        fixedLegend ? width : layout.width
+      );
+      legendParentBase
+        .selectAll('[data-legend-group]')
+        .classed('org-legend-group', true);
+    }
 
-      // Pill text
-      gEl
-        .append('text')
-        .attr('x', pillXOff + 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);
-
-      // Eye icon for visibility toggle (active only, app mode)
-      if (isActive && fixedLegend) {
-        const groupKey = group.name.toLowerCase();
+    // Inject eye icons into active group capsules (app mode only)
+    if (fixedLegend && legendHandle) {
+      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 + pillWidth + LEGEND_EYE_GAP;
-        const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
-        const hitPad = 6;
 
-        const eyeG = gEl
-          .append('g')
-          .attr('class', 'org-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');
-      }
+        // Find the rendered active group <g> and append eye icon
+        const activeGroupEl = legendParentBase.select(
+          `[data-legend-group="${groupKey}"]`
+        );
+        if (!activeGroupEl.empty()) {
+          const eyeX = capsule.addonX!;
+          const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
+          const hitPad = 6;
 
-      // Entries inside capsule (active only)
-      if (isActive) {
-        const eyeShift = fixedLegend ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
-        let entryX = pillXOff + pillWidth + 4 + eyeShift;
-        for (const entry of group.entries) {
-          const entryG = gEl
+          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;
-          const entryLabel = entry.value;
-          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(entryLabel);
-
-          entryX =
-            textX +
-            measureLegendText(entryLabel, LEGEND_ENTRY_FONT_SIZE) +
-            LEGEND_ENTRY_TRAIL;
+            .attr('class', 'org-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/render.ts

@@ -15,11 +15,26 @@ async function ensureDom(): Promise<void> {
   const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
   const win = dom.window;
 
-  Object.defineProperty(globalThis, 'document', { value: win.document, configurable: true });
-  Object.defineProperty(globalThis, 'window', { value: win, configurable: true });
-  Object.defineProperty(globalThis, 'navigator', { value: win.navigator, configurable: true });
-  Object.defineProperty(globalThis, 'HTMLElement', { value: win.HTMLElement, configurable: true });
-  Object.defineProperty(globalThis, 'SVGElement', { value: win.SVGElement, configurable: true });
+  Object.defineProperty(globalThis, 'document', {
+    value: win.document,
+    configurable: true,
+  });
+  Object.defineProperty(globalThis, 'window', {
+    value: win,
+    configurable: true,
+  });
+  Object.defineProperty(globalThis, 'navigator', {
+    value: win.navigator,
+    configurable: true,
+  });
+  Object.defineProperty(globalThis, 'HTMLElement', {
+    value: win.HTMLElement,
+    configurable: true,
+  });
+  Object.defineProperty(globalThis, 'SVGElement', {
+    value: win.SVGElement,
+    configurable: true,
+  });
 }
 
 /**
@@ -52,24 +67,39 @@ export async function render(
     c4System?: string;
     c4Container?: string;
     tagGroup?: string;
-  },
+    /** Legend state for export — controls which tag group is shown in exported SVG. */
+    legendState?: { activeGroup?: string; hiddenAttributes?: string[] };
+  }
 ): Promise<string> {
   const theme = options?.theme ?? 'light';
   const paletteName = options?.palette ?? 'nord';
   const branding = options?.branding ?? false;
 
-  const paletteColors = getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];
+  const paletteColors =
+    getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];
 
   const chartType = parseDgmoChartType(content);
   const category = chartType ? getRenderCategory(chartType) : null;
 
+  // Build orgExportState from legendState if provided
+  const legendExportState = options?.legendState
+    ? {
+        activeTagGroup: options.legendState.activeGroup ?? null,
+        hiddenAttributes: options.legendState.hiddenAttributes
+          ? new Set(options.legendState.hiddenAttributes)
+          : undefined,
+      }
+    : undefined;
+
   if (category === 'data-chart') {
-    return renderExtendedChartForExport(content, theme, paletteColors, { branding });
+    return renderExtendedChartForExport(content, theme, paletteColors, {
+      branding,
+    });
   }
 
   // Visualization/diagram and unknown/null types all go through the unified renderer
   await ensureDom();
-  return renderForExport(content, theme, paletteColors, undefined, {
+  return renderForExport(content, theme, paletteColors, legendExportState, {
     branding,
     c4Level: options?.c4Level,
     c4System: options?.c4System,