@diagrammo/dgmo 0.8.10 → 0.8.11

package/src/echarts.ts

@@ -4,6 +4,12 @@ import { FONT_FAMILY } from './fonts';
 import { injectBranding } from './branding';
 import { renderLegendSvg } from './utils/legend-svg';
 import type { LegendGroupData } from './utils/legend-svg';
+import {
+  type LabelRect,
+  type PointCircle,
+  rectsOverlap,
+  rectCircleOverlap,
+} from './label-layout';
 
 // ============================================================
 // Types
@@ -17,14 +23,14 @@ export type ExtendedChartType =
   | 'heatmap'
   | 'funnel';
 
-export interface ExtendedChartDataPoint {
+interface ExtendedChartDataPoint {
   label: string;
   value: number;
   color?: string;
   lineNumber: number;
 }
 
-export interface ParsedSankeyLink {
+interface ParsedSankeyLink {
   source: string;
   target: string;
   value: number;
@@ -33,14 +39,14 @@ export interface ParsedSankeyLink {
   lineNumber: number;
 }
 
-export interface ParsedFunction {
+interface ParsedFunction {
   name: string;
   expression: string;
   color?: string;
   lineNumber: number;
 }
 
-export interface ParsedScatterPoint {
+interface ParsedScatterPoint {
   name: string;
   x: number;
   y: number;
@@ -50,7 +56,7 @@ export interface ParsedScatterPoint {
   lineNumber: number;
 }
 
-export interface ParsedHeatmapRow {
+interface ParsedHeatmapRow {
   label: string;
   values: number[];
   lineNumber: number;
@@ -733,7 +739,8 @@ export function buildExtendedChartOption(
 
   // Sankey chart has different structure
   if (parsed.type === 'sankey') {
-    return buildSankeyOption(parsed, textColor, colors, titleConfig);
+    const bg = isDark ? palette.surface : palette.bg;
+    return buildSankeyOption(parsed, textColor, colors, bg, titleConfig);
   }
 
   // Chord diagram
@@ -794,6 +801,7 @@ function buildSankeyOption(
   parsed: ParsedExtendedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title']
 ): EChartsOption {
   // Extract unique nodes from links
@@ -805,12 +813,18 @@ function buildSankeyOption(
     }
   }
 
-  const nodes = Array.from(nodeSet).map((name, index) => ({
-    name,
-    itemStyle: {
-      color: parsed.nodeColors?.[name] ?? colors[index % colors.length],
-    },
-  }));
+  // Tint colors with background so the diagram feels less saturated.
+  // Nodes get a lighter tint so they stand out; links get more tinting.
+  const tintNode = (c: string) => mix(c, bg, 75);
+  const tintLink = (c: string) => mix(c, bg, 45);
+
+  const nodeColorMap = new Map<string, string>();
+  const nodes = Array.from(nodeSet).map((name, index) => {
+    const raw = parsed.nodeColors?.[name] ?? colors[index % colors.length];
+    const tinted = tintNode(raw);
+    nodeColorMap.set(name, tintLink(raw));
+    return { name, itemStyle: { color: tinted } };
+  });
 
   return {
     ...CHART_BASE,
@@ -834,11 +848,15 @@ function buildSankeyOption(
           source: link.source,
           target: link.target,
           value: link.value,
-          ...(link.color && { lineStyle: { color: link.color } }),
+          lineStyle: {
+            color: link.color
+              ? tintLink(link.color)
+              : nodeColorMap.get(link.source),
+          },
         })),
         lineStyle: {
-          color: 'gradient',
           curveness: 0.5,
+          opacity: 0.6,
         },
         label: {
           color: textColor,
@@ -1182,37 +1200,6 @@ export function getExtendedChartLegendGroups(
 // Scatter label collision avoidance — greedy placement algorithm
 // ---------------------------------------------------------------------------
 
-interface LabelRect {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-interface PointCircle {
-  cx: number;
-  cy: number;
-  r: number;
-}
-
-/** Axis-aligned bounding box overlap test. @internal exported for testing */
-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. @internal exported for testing */
-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;
-}
-
 export interface ScatterLabelPoint {
   name: string;
   px: number;
@@ -1734,12 +1721,22 @@ function buildHeatmapOption(
     });
   });
 
+  // Rotate column labels only when they'd overlap at the default font size.
+  // Estimate: each char ~7px at 12px font; rotate if longest label exceeds
+  // an even share of a ~900px-wide chart.
+  const CHAR_WIDTH = 7;
+  const ESTIMATED_CHART_WIDTH = 900;
+  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const slotWidth =
+    columns.length > 0 ? ESTIMATED_CHART_WIDTH / columns.length : Infinity;
+  const needsRotation = longestCol * CHAR_WIDTH > slotWidth * 0.85;
+
   return {
     ...CHART_BASE,
     title: titleConfig,
     grid: {
       left: '3%',
-      right: '10%',
+      right: '3%',
       bottom: '3%',
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
@@ -1747,6 +1744,7 @@ function buildHeatmapOption(
     xAxis: {
       type: 'category',
       data: columns,
+      position: 'top',
       splitArea: {
         show: true,
       },
@@ -1755,12 +1753,19 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16,
+        fontSize: 12,
+        interval: 0,
+        ...(needsRotation && {
+          rotate: -45,
+          width: 200,
+          overflow: 'none' as const,
+        }),
       },
     },
     yAxis: {
       type: 'category',
       data: rowLabels,
+      inverse: true,
       splitArea: {
         show: true,
       },
@@ -1769,16 +1774,14 @@ function buildHeatmapOption(
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16,
+        fontSize: 12,
+        interval: 0,
       },
     },
     visualMap: {
+      show: false,
       min: minValue,
       max: maxValue,
-      calculable: true,
-      orient: 'vertical',
-      right: '2%',
-      top: 'center',
       inRange: {
         color: [
           mix(palette.primary, bg, 30),
@@ -1787,9 +1790,6 @@ function buildHeatmapOption(
           mix(palette.colors.orange, bg, 30),
         ],
       },
-      textStyle: {
-        color: textColor,
-      },
     },
     series: [
       {
@@ -1806,9 +1806,8 @@ function buildHeatmapOption(
           fontWeight: 'bold' as const,
         },
         emphasis: {
-          ...EMPHASIS_SELF,
+          disabled: true,
         },
-        blur: BLUR_DIM,
       },
     ],
   };

package/src/editor/index.ts

@@ -1,5 +1,4 @@
 import { LRLanguage, LanguageSupport } from '@codemirror/language';
-import type { Extension } from '@codemirror/state';
 import { parser } from './dgmo.grammar.js';
 import { dgmoHighlighting } from './highlight';
 
@@ -25,4 +24,4 @@ export const dgmoLanguageSupport = new LanguageSupport(dgmoLanguage);
  * Consumers should add indentationMarkers() separately if desired
  * (from @replit/codemirror-indentation-markers).
  */
-export const dgmoExtension: Extension = dgmoLanguageSupport;
+export const dgmoExtension = dgmoLanguageSupport;

package/src/gantt/resolver.ts

@@ -7,16 +7,16 @@
 
 import type { GanttTask, GanttNode } from './types';
 
-export interface ResolverMatch {
+interface ResolverMatch {
   task: GanttTask;
 }
 
-export interface ResolverError {
+interface ResolverError {
   kind: 'not_found' | 'ambiguous';
   message: string;
 }
 
-export type ResolverResult = ResolverMatch | ResolverError;
+type ResolverResult = ResolverMatch | ResolverError;
 
 export function isResolverError(r: ResolverResult): r is ResolverError {
   return 'kind' in r;
@@ -53,23 +53,23 @@ export function collectTasks(nodes: GanttNode[]): GanttTask[] {
  */
 export function resolveTaskName(
   name: string,
-  allTasks: GanttTask[],
+  allTasks: GanttTask[]
 ): ResolverResult {
   const trimmed = name.trim();
 
   // 1. Try exact label match (no dots involved)
-  const exactMatches = allTasks.filter(t => t.label === trimmed);
+  const exactMatches = allTasks.filter((t) => t.label === trimmed);
   if (exactMatches.length === 1) {
     return { task: exactMatches[0] };
   }
   if (exactMatches.length > 1) {
     // Multiple tasks with same name — need disambiguation
-    const suggestions = exactMatches.map(t =>
+    const suggestions = exactMatches.map((t) =>
       t.groupPath.length > 0 ? `${t.groupPath.join('.')}.${t.label}` : t.label
     );
     return {
       kind: 'ambiguous',
-      message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map(s => `\`${s}\``).join(' or ')}?`,
+      message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map((s) => `\`${s}\``).join(' or ')}?`,
     };
   }
 
@@ -80,7 +80,7 @@ export function resolveTaskName(
     const taskLabel = trimmed.substring(lastDotIdx + 1);
 
     // Find tasks whose label matches and whose group path ends with the prefix
-    const matches = allTasks.filter(t => {
+    const matches = allTasks.filter((t) => {
       if (t.label !== taskLabel) return false;
       return matchesGroupPath(t.groupPath, groupPrefix);
     });
@@ -89,12 +89,12 @@ export function resolveTaskName(
       return { task: matches[0] };
     }
     if (matches.length > 1) {
-      const suggestions = matches.map(t =>
+      const suggestions = matches.map((t) =>
         t.groupPath.length > 0 ? `${t.groupPath.join('.')}.${t.label}` : t.label
       );
       return {
         kind: 'ambiguous',
-        message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map(s => `\`${s}\``).join(' or ')}?`,
+        message: `Multiple tasks match "${trimmed}". Did you mean ${suggestions.map((s) => `\`${s}\``).join(' or ')}?`,
       };
     }
 
@@ -106,8 +106,8 @@ export function resolveTaskName(
   }
 
   // 3. No match found — try case-insensitive as a fallback for suggestions
-  const caseInsensitive = allTasks.filter(t =>
-    t.label.toLowerCase() === trimmed.toLowerCase()
+  const caseInsensitive = allTasks.filter(
+    (t) => t.label.toLowerCase() === trimmed.toLowerCase()
   );
   if (caseInsensitive.length > 0) {
     return {
@@ -134,11 +134,16 @@ export function resolveTaskName(
 function matchesGroupPath(groupPath: string[], prefix: string): boolean {
   // Simple case: prefix is a single segment
   if (!prefix.includes('.')) {
-    return groupPath.some(g => g === prefix);
+    return groupPath.some((g) => g === prefix);
   }
 
   // Multi-segment prefix: try matching from the start of the group path
   const pathStr = groupPath.join('.');
   // Check if the full prefix matches any contiguous section of the path
-  return pathStr === prefix || pathStr.endsWith('.' + prefix) || pathStr.startsWith(prefix + '.') || pathStr.includes('.' + prefix + '.');
+  return (
+    pathStr === prefix ||
+    pathStr.endsWith('.' + prefix) ||
+    pathStr.startsWith(prefix + '.') ||
+    pathStr.includes('.' + prefix + '.')
+  );
 }

package/src/index.ts

@@ -440,6 +440,8 @@ export {
   tokyoNightPalette,
   oneDarkPalette,
   boldPalette,
+  draculaPalette,
+  monokaiPalette,
   // Mermaid bridge
   buildMermaidThemeVars,
   buildThemeCSS,

package/src/kanban/renderer.ts

@@ -15,7 +15,7 @@ import type {
 } from './types';
 import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
-import { LEGEND_HEIGHT } from '../utils/legend-constants';
+import { LEGEND_HEIGHT, measureLegendText } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
 
@@ -200,8 +200,7 @@ function computeLayout(
   }
 
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING + legendSpace;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING;
 
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
@@ -249,9 +248,13 @@ export function renderKanban(
       .text(parsed.title);
   }
 
-  // Legend (bottom of diagram)
+  // Legend (top-right, inline with title)
   if (parsed.tagGroups.length > 0) {
-    const legendY = height - LEGEND_HEIGHT;
+    const titleTextWidth = parsed.title
+      ? measureLegendText(parsed.title, TITLE_FONT_SIZE) + 16
+      : 0;
+    const legendX = DIAGRAM_PADDING + titleTextWidth;
+    const legendY = DIAGRAM_PADDING + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
@@ -261,7 +264,7 @@ export function renderKanban(
     const legendG = svg
       .append('g')
       .attr('class', 'kanban-legend')
-      .attr('transform', `translate(${DIAGRAM_PADDING},${legendY})`);
+      .attr('transform', `translate(${legendX},${legendY})`);
     renderLegendD3(
       legendG,
       legendConfig,
@@ -269,7 +272,7 @@ export function renderKanban(
       palette,
       isDark,
       undefined,
-      width - DIAGRAM_PADDING * 2
+      width - legendX - DIAGRAM_PADDING
     );
   }
 

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;
+}