@diagrammo/dgmo 0.8.10 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -74,10 +74,10 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^2.0.4",
+    "@dagrejs/dagre": "^3.0.0",
     "@resvg/resvg-js": "^2.6.2",
     "d3-array": "^3.2.4",
-    "d3-cloud": "^1.2.7",
+    "d3-cloud": "^1.2.9",
     "d3-hierarchy": "^3.1.2",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
@@ -85,32 +85,30 @@
     "echarts": "^6.0.0",
     "lz-string": "^1.5.0"
   },
-  "optionalDependencies": {
-    "jsdom": "^28.1.0"
-  },
   "devDependencies": {
     "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
     "@eslint/js": "^10.0.1",
     "@lezer/generator": "^1.8.0",
-    "@types/d3-array": "^3.2.1",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-cloud": "^1.2.9",
     "@types/d3-hierarchy": "^3.1.7",
-    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
-    "@types/d3-shape": "^3.1.7",
-    "@types/jsdom": "^28.0.0",
+    "@types/d3-shape": "^3.1.8",
+    "@types/jsdom": "^28.0.1",
     "cspell": "^9.7.0",
-    "eslint": "^10.1.0",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.2.0",
     "husky": "^9.1.7",
     "jscpd": "^4.0.8",
-    "knip": "^6.0.1",
+    "jsdom": "^29.0.1",
+    "knip": "^6.3.0",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.57.2",
-    "vitest": "^4.0.18"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vitest": "^4.1.2"
   },
   "lint-staged": {
     "*.ts": [
@@ -120,7 +118,6 @@
   },
   "peerDependencies": {
     "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
     "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.8"

package/src/boxes-and-lines/renderer.ts

@@ -292,7 +292,7 @@ function resolveEdgeLabelOverlaps(
 
 // ── Main render function ───────────────────────────────────
 
-export interface BLRenderOptions {
+interface BLRenderOptions {
   onClickItem?: (lineNumber: number) => void;
   exportDims?: { width?: number; height?: number };
   activeTagGroup?: string | null;

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/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;
@@ -4525,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
@@ -4815,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
@@ -5461,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;
@@ -5539,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(
@@ -5870,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]);
       })
@@ -5926,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);
       })
@@ -6416,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);
@@ -6468,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);