@diagrammo/dgmo 0.2.19 → 0.2.21

package/src/org/layout.ts

@@ -61,6 +61,8 @@ export interface OrgLegendGroup {
   y: number;
   width: number;
   height: number;
+  minifiedWidth: number;
+  minifiedHeight: number;
 }
 
 export interface OrgLayoutResult {
@@ -95,18 +97,17 @@ const CONTAINER_META_LINE_HEIGHT = 16;
 const STACK_V_GAP = 20;
 
 
-// Legend
+// Legend (kanban-style pills)
 const LEGEND_GAP = 30;
-const LEGEND_DOT_R = 5;
-const LEGEND_DOT_TEXT_GAP = 6;
-const LEGEND_ENTRY_GAP = 12;
-const LEGEND_PAD = 10;
-const LEGEND_HEADER_H = 20;
-const LEGEND_ENTRY_H = 18;
-const LEGEND_MAX_PER_ROW = 3;
-const LEGEND_V_GAP = 12;
-const EYE_ICON_WIDTH = 16;
-const EYE_ICON_GAP = 6;
+const LEGEND_HEIGHT = 28;
+const LEGEND_PILL_PAD = 16;
+const LEGEND_PILL_FONT_W = 11 * 0.6;
+const LEGEND_CAPSULE_PAD = 4;
+const LEGEND_DOT_R = 4;
+const LEGEND_ENTRY_FONT_W = 10 * 0.6;
+const LEGEND_ENTRY_DOT_GAP = 4;
+const LEGEND_ENTRY_TRAIL = 8;
+const LEGEND_GROUP_GAP = 12;
 
 // ============================================================
 // Helpers
@@ -269,45 +270,35 @@ function centerHeavyChildren(node: TreeNode): void {
 // Layout
 // ============================================================
 
-function computeLegendGroups(tagGroups: OrgTagGroup[], showEyeIcons: boolean): OrgLegendGroup[] {
+function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean): OrgLegendGroup[] {
   const groups: OrgLegendGroup[] = [];
 
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
 
-    const entryWidths = group.entries.map(
-      (e) =>
-        LEGEND_DOT_R * 2 + LEGEND_DOT_TEXT_GAP + e.value.length * CHAR_WIDTH
-    );
+    const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
 
-    // Compute max width per column so columns align across rows
-    const numRows = Math.ceil(entryWidths.length / LEGEND_MAX_PER_ROW);
-    const colWidths: number[] = [];
-    for (let col = 0; col < LEGEND_MAX_PER_ROW; col++) {
-      let maxW = 0;
-      for (let row = 0; row < numRows; row++) {
-        const idx = row * LEGEND_MAX_PER_ROW + col;
-        if (idx < entryWidths.length && entryWidths[idx] > maxW) {
-          maxW = entryWidths[idx];
-        }
-      }
-      if (maxW > 0) colWidths.push(maxW);
+    // Capsule: pad + pill + gap + entries + pad
+    let entriesWidth = 0;
+    for (const entry of group.entries) {
+      entriesWidth +=
+        LEGEND_DOT_R * 2 +
+        LEGEND_ENTRY_DOT_GAP +
+        entry.value.length * LEGEND_ENTRY_FONT_W +
+        LEGEND_ENTRY_TRAIL;
     }
-
-    const eyeExtra = showEyeIcons ? EYE_ICON_GAP + EYE_ICON_WIDTH : 0;
-    const headerWidth = group.name.length * CHAR_WIDTH + eyeExtra;
-    const totalColumnsWidth =
-      colWidths.reduce((s, w) => s + w, 0) +
-      (colWidths.length - 1) * LEGEND_ENTRY_GAP;
-    const maxRowWidth = Math.max(headerWidth, totalColumnsWidth);
+    const capsuleWidth =
+      LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
 
     groups.push({
       name: group.name,
       entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
       x: 0,
       y: 0,
-      width: maxRowWidth + LEGEND_PAD * 2,
-      height: LEGEND_HEADER_H + numRows * LEGEND_ENTRY_H + LEGEND_PAD,
+      width: capsuleWidth,
+      height: LEGEND_HEIGHT,
+      minifiedWidth: pillWidth,
+      minifiedHeight: LEGEND_HEIGHT,
     });
   }
 
@@ -350,7 +341,28 @@ export function layoutOrg(
   hiddenAttributes?: Set<string>
 ): OrgLayoutResult {
   if (parsed.roots.length === 0) {
-    return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    // Legend-only: compute and position legend groups even without nodes
+    const showEyeIcons = hiddenAttributes !== undefined;
+    const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons);
+    if (legendGroups.length === 0) {
+      return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    }
+
+    // Layout legend groups horizontally (all minified when no nodes)
+    let cx = MARGIN;
+    for (const g of legendGroups) {
+      g.x = cx;
+      g.y = MARGIN;
+      cx += g.minifiedWidth + LEGEND_GROUP_GAP;
+    }
+    return {
+      nodes: [],
+      edges: [],
+      containers: [],
+      legend: legendGroups,
+      width: cx - LEGEND_GROUP_GAP + MARGIN,
+      height: LEGEND_HEIGHT + MARGIN * 2,
+    };
   }
 
   // Inject default tag group values into node metadata for display.
@@ -577,18 +589,26 @@ export function layoutOrg(
   {
     type HNode = (typeof h);
     const subtreeExtent = (node: HNode): { minX: number; maxX: number } => {
-      let min = Infinity;
-      let max = -Infinity;
-      const walk = (n: HNode) => {
-        // Container boxes extend beyond card bounds by padding
-        const pad = n.data.orgNode.isContainer ? CONTAINER_PAD_X : 0;
-        const l = n.x! - n.data.width / 2 - pad;
-        const r = n.x! + n.data.width / 2 + pad;
-        if (l < min) min = l;
-        if (r > max) max = r;
-        if (n.children) n.children.forEach(walk);
-      };
-      walk(node);
+      // Start with this node's own card/header bounds
+      let min = node.x! - node.data.width / 2;
+      let max = node.x! + node.data.width / 2;
+
+      // Include children's subtree extents
+      if (node.children) {
+        for (const child of node.children) {
+          const childExt = subtreeExtent(child);
+          if (childExt.minX < min) min = childExt.minX;
+          if (childExt.maxX > max) max = childExt.maxX;
+        }
+      }
+
+      // Container boxes wrap their content with padding — mirror the
+      // actual bounding-box computation so compaction sees the true width.
+      if (node.data.orgNode.isContainer) {
+        min -= CONTAINER_PAD_X;
+        max += CONTAINER_PAD_X;
+      }
+
       return { minX: min, maxX: max };
     };
 
@@ -1072,12 +1092,22 @@ export function layoutOrg(
 
   const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
 
-  if (legendGroups.length > 0) {
+  // When a tag group is active, only that group is laid out (full size).
+  // When none is active, all groups are laid out minified.
+  const visibleGroups = activeTagGroup != null
+    ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase())
+    : legendGroups;
+  const effectiveW = (g: OrgLegendGroup) =>
+    activeTagGroup != null ? g.width : g.minifiedWidth;
+  const effectiveH = (g: OrgLegendGroup) =>
+    activeTagGroup != null ? g.height : g.minifiedHeight;
+
+  if (visibleGroups.length > 0) {
     if (legendPosition === 'bottom') {
       // Bottom: center legend groups horizontally below diagram content
       const totalGroupsWidth =
-        legendGroups.reduce((s, g) => s + g.width, 0) +
-        (legendGroups.length - 1) * H_GAP;
+        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
 
       if (neededWidth > totalWidth) {
@@ -1095,33 +1125,34 @@ export function layoutOrg(
       const startX = (finalWidth - totalGroupsWidth) / 2;
 
       let cx = startX;
-      let maxH = 0;
-      for (const g of legendGroups) {
+      for (const g of visibleGroups) {
         g.x = cx;
         g.y = legendY;
-        cx += g.width + H_GAP;
-        if (g.height > maxH) maxH = g.height;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
 
-      finalHeight = totalHeight + LEGEND_GAP + maxH;
+      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
-      // Top (default): stack legend groups vertically at top-right
-      const maxLegendWidth = Math.max(...legendGroups.map((g) => g.width));
+      // Top: horizontal row at top-right
+      const totalGroupsWidth =
+        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
       const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
-      let legendY = MARGIN;
+      const legendY = MARGIN;
 
-      for (const g of legendGroups) {
-        g.x = legendStartX;
+      let cx = legendStartX;
+      for (const g of visibleGroups) {
+        g.x = cx;
         g.y = legendY;
-        legendY += g.height + LEGEND_V_GAP;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
 
-      const legendRight = legendStartX + maxLegendWidth + MARGIN;
+      const legendRight = legendStartX + totalGroupsWidth + MARGIN;
       if (legendRight > finalWidth) {
         finalWidth = legendRight;
       }
 
-      const legendBottom = legendY - LEGEND_V_GAP + MARGIN;
+      const legendBottom = legendY + LEGEND_HEIGHT + MARGIN;
       if (legendBottom > finalHeight) {
         finalHeight = legendBottom;
       }

package/src/org/parser.ts

@@ -1,5 +1,7 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
+import type { DgmoError } from '../diagnostics';
+import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 
 // ============================================================
 // Types
@@ -37,6 +39,7 @@ export interface ParsedOrg {
   roots: OrgNode[];
   tagGroups: OrgTagGroup[];
   options: Record<string, string>;
+  diagnostics: DgmoError[];
   error: string | null;
 }
 
@@ -76,6 +79,20 @@ const CHART_TYPE_RE = /^chart\s*:\s*(.+)/i;
 const TITLE_RE = /^title\s*:\s*(.+)/i;
 const OPTION_RE = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
 
+// ============================================================
+// Inference
+// ============================================================
+
+/** Returns true if content contains tag group headings (`## ...`), suggesting an org chart. */
+export function looksLikeOrg(content: string): boolean {
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('//')) continue;
+    if (GROUP_HEADING_RE.test(trimmed)) return true;
+  }
+  return false;
+}
+
 // ============================================================
 // Parser
 // ============================================================
@@ -90,12 +107,26 @@ export function parseOrg(
     roots: [],
     tagGroups: [],
     options: {},
+    diagnostics: [],
     error: null,
   };
 
-  if (!content || !content.trim()) {
-    result.error = 'No content provided';
+  const fail = (line: number, message: string): ParsedOrg => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
     return result;
+  };
+
+  /** Push a recoverable error and continue parsing. */
+  const pushError = (line: number, message: string): void => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    if (!result.error) result.error = formatDgmoError(diag);
+  };
+
+  if (!content || !content.trim()) {
+    return fail(0, 'No content provided');
   }
 
   const lines = content.split('\n');
@@ -138,8 +169,11 @@ export function parseOrg(
       if (chartMatch) {
         const chartType = chartMatch[1].trim().toLowerCase();
         if (chartType !== 'org') {
-          result.error = `Line ${lineNumber}: Expected chart type "org", got "${chartType}"`;
-          return result;
+          const allTypes = ['org', 'class', 'flowchart', 'sequence', 'er', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
+          let msg = `Expected chart type "org", got "${chartType}"`;
+          const hint = suggest(chartType, allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
         }
         continue;
       }
@@ -172,8 +206,8 @@ export function parseOrg(
     const groupMatch = trimmed.match(GROUP_HEADING_RE);
     if (groupMatch) {
       if (contentStarted) {
-        result.error = `Line ${lineNumber}: Tag groups (##) must appear before org content`;
-        return result;
+        pushError(lineNumber, 'Tag groups (##) must appear before org content');
+        continue;
       }
       const groupName = groupMatch[1].trim();
       const alias = groupMatch[2] || undefined;
@@ -201,8 +235,8 @@ export function parseOrg(
           : trimmed;
         const { label, color } = extractColor(entryText, palette);
         if (!color) {
-          result.error = `Line ${lineNumber}: Expected 'Value(color)' in tag group '${currentTagGroup.name}'`;
-          return result;
+          pushError(lineNumber, `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`);
+          continue;
         }
         if (isDefault) {
           currentTagGroup.defaultValue = label;
@@ -259,10 +293,10 @@ export function parseOrg(
       // Find the parent node: top of stack (the most recent node)
       const parent = findMetadataParent(indent, indentStack);
       if (!parent) {
-        result.error = `Line ${lineNumber}: Metadata has no parent node`;
-        return result;
+        pushError(lineNumber, 'Metadata has no parent node');
+      } else {
+        parent.metadata[key] = value;
       }
-      parent.metadata[key] = value;
     } else if (metadataMatch && indentStack.length === 0) {
       // Metadata with no parent — could be a node label that happens to contain ':'
       // Treat it as a node if it's at indent 0 and no nodes exist yet
@@ -272,8 +306,7 @@ export function parseOrg(
         const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap);
         attachNode(node, indent, indentStack, result);
       } else {
-        result.error = `Line ${lineNumber}: Metadata has no parent node`;
-        return result;
+        pushError(lineNumber, 'Metadata has no parent node');
       }
     } else {
       // It's a node label — possibly with single-line pipe-delimited metadata
@@ -282,8 +315,10 @@ export function parseOrg(
     }
   }
 
-  if (result.roots.length === 0 && !result.error) {
-    result.error = 'No nodes found in org chart';
+  if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
+    const diag = makeDgmoError(1, 'No nodes found in org chart');
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
   }
 
   return result;