@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/utils/legend-d3.ts

@@ -274,6 +274,7 @@ function renderPill(
     .append('g')
     .attr('transform', `translate(${pill.x},${pill.y})`)
     .attr('data-legend-group', pill.groupName.toLowerCase())
+    .attr('data-export-ignore', 'true')
     .style('cursor', 'pointer');
 
   g.append('rect')

package/src/utils/legend-layout.ts

@@ -570,8 +570,8 @@ function layoutRows(
       const last = groupItemsInRow0[groupItemsInRow0.length - 1];
       controlsGroup.x = last.x + last.width + LEGEND_GROUP_GAP;
     } else {
-      // No group items — controls group at start
-      controlsGroup.x = 0;
+      // No group items — center the controls group
+      controlsGroup.x = (containerWidth - controlsGroup.width) / 2;
     }
     controlsGroup.y = 0;
   }

package/src/utils/parsing.ts

@@ -47,6 +47,8 @@ export const ALL_CHART_TYPES = new Set([
   'infra',
   'gantt',
   'boxes-and-lines',
+  'mindmap',
+  'wireframe',
 ]);
 
 /** Measure leading whitespace of a line, normalizing tabs to 4 spaces. */

package/src/utils/time-ticks.ts

@@ -0,0 +1,213 @@
+// ============================================================
+// Time axis tick computation — shared by d3.ts and gantt/renderer.ts
+// ============================================================
+
+import * as d3Scale from 'd3-scale';
+
+export const MONTH_ABBR = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+function fractionalYearToDate(frac: number): Date {
+  const year = Math.floor(frac);
+  const remainder = frac - year;
+  // Inverse of: (month-1)/12 + (day-1)/365 + hour/8760 + minute/525600
+  const monthFrac = remainder * 12;
+  const month = Math.floor(monthFrac); // 0-based
+  const monthRemainder = remainder - month / 12;
+  const dayFrac = monthRemainder * 365; // fractional day-of-year offset
+  const day = Math.floor(dayFrac) + 1;
+  const dayRemainder = dayFrac - Math.floor(dayFrac);
+  const hourFrac = dayRemainder * 24;
+  const hour = Math.floor(hourFrac);
+  const minute = Math.round((hourFrac - hour) * 60);
+  return new Date(year, month, day, hour, minute);
+}
+
+/** Convert a Date to a fractional year number. */
+function dateToFractionalYear(d: Date): number {
+  return (
+    d.getFullYear() +
+    d.getMonth() / 12 +
+    (d.getDate() - 1) / 365 +
+    d.getHours() / 8760 +
+    d.getMinutes() / 525600
+  );
+}
+
+/**
+ * Generates adaptive tick marks along a time axis.
+ * Picks the right granularity (years, months, weeks, days, hours, minutes)
+ * based on the domain span.
+ *
+ * Optional boundary parameters add ticks at exact data start/end:
+ * - boundaryStart/boundaryEnd: numeric date values
+ * - boundaryStartLabel/boundaryEndLabel: formatted labels for those dates
+ */
+export function computeTimeTicks(
+  domainMin: number,
+  domainMax: number,
+  scale: d3Scale.ScaleLinear<number, number>,
+  boundaryStart?: number,
+  boundaryEnd?: number,
+  boundaryStartLabel?: string,
+  boundaryEndLabel?: string
+): { pos: number; label: string }[] {
+  const minYear = Math.floor(domainMin);
+  const maxYear = Math.floor(domainMax);
+  const span = domainMax - domainMin;
+
+  let ticks: { pos: number; label: string }[] = [];
+
+  // Year ticks for multi-year spans (need at least 2 boundaries)
+  const firstYear = Math.ceil(domainMin);
+  const lastYear = Math.floor(domainMax);
+  if (lastYear >= firstYear + 1) {
+    // Decimate ticks for long spans so labels don't overlap
+    const yearSpan = lastYear - firstYear;
+    let step = 1;
+    if (yearSpan > 80) step = 20;
+    else if (yearSpan > 40) step = 10;
+    else if (yearSpan > 20) step = 5;
+    else if (yearSpan > 10) step = 2;
+
+    // Align to step boundary so ticks land on round years (1700, 1710, …)
+    const alignedFirst = Math.ceil(firstYear / step) * step;
+    for (let y = alignedFirst; y <= lastYear; y += step) {
+      ticks.push({ pos: scale(y), label: String(y) });
+    }
+  } else if (span > 0.25) {
+    // Month ticks for spans > ~3 months
+    const crossesYear = maxYear > minYear;
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        const val = y + (m - 1) / 12;
+        if (val > domainMax) break;
+        if (val >= domainMin) {
+          ticks.push({
+            pos: scale(val),
+            label: crossesYear
+              ? `${MONTH_ABBR[m - 1]} '${String(y).slice(-2)}`
+              : MONTH_ABBR[m - 1],
+          });
+        }
+      }
+    }
+  } else if (span <= 0.000685) {
+    // Minute ticks for spans ≤ ~6 hours
+    // Adaptive step: >3h → 30min, >1h → 15min, >30min → 10min, else 5min
+    let stepMin = 5;
+    const spanHours = span * 8760;
+    if (spanHours > 3) stepMin = 30;
+    else if (spanHours > 1) stepMin = 15;
+    else if (spanHours > 0.5) stepMin = 10;
+
+    // Iterate from the start hour boundary
+    const startDate = fractionalYearToDate(domainMin);
+    // Round down to nearest step boundary
+    startDate.setMinutes(
+      Math.floor(startDate.getMinutes() / stepMin) * stepMin,
+      0,
+      0
+    );
+
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, '0');
+        const mm = String(startDate.getMinutes()).padStart(2, '0');
+        ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+      }
+      startDate.setMinutes(startDate.getMinutes() + stepMin);
+    }
+  } else if (span <= 0.00822) {
+    // Hour ticks for spans ≤ ~3 days
+    // Adaptive step: >2d → 6h, >1d → 3h, >12h → 2h, else 1h
+    let stepHour = 1;
+    const spanHours = span * 8760;
+    if (spanHours > 48) stepHour = 6;
+    else if (spanHours > 24) stepHour = 3;
+    else if (spanHours > 12) stepHour = 2;
+
+    // For single-day spans, just show HH:MM without the date prefix
+    const singleDay = spanHours <= 24;
+
+    const startDate = fractionalYearToDate(domainMin);
+    // Round down to nearest step boundary
+    startDate.setHours(
+      Math.floor(startDate.getHours() / stepHour) * stepHour,
+      0,
+      0,
+      0
+    );
+
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, '0');
+        const mm = String(startDate.getMinutes()).padStart(2, '0');
+        if (singleDay) {
+          ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+        } else {
+          const mon = MONTH_ABBR[startDate.getMonth()];
+          const d = startDate.getDate();
+          ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
+        }
+      }
+      startDate.setHours(startDate.getHours() + stepHour);
+    }
+  } else {
+    // Week ticks for spans ≤ ~3 months (1st, 8th, 15th, 22nd of each month)
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        for (const d of [1, 8, 15, 22]) {
+          const val = y + (m - 1) / 12 + (d - 1) / 365;
+          if (val > domainMax) break;
+          if (val >= domainMin) {
+            ticks.push({
+              pos: scale(val),
+              label: `${MONTH_ABBR[m - 1]} ${d}`,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  // Add boundary ticks at exact data start/end if provided
+  // When a boundary tick collides with a standard tick, replace the standard tick
+  const collisionThreshold = 40; // pixels
+
+  if (boundaryStart !== undefined && boundaryStartLabel) {
+    const boundaryPos = scale(boundaryStart);
+    // Remove any standard ticks that would collide with the start boundary
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.unshift({ pos: boundaryPos, label: boundaryStartLabel });
+  }
+
+  if (boundaryEnd !== undefined && boundaryEndLabel) {
+    const boundaryPos = scale(boundaryEnd);
+    // Remove any standard ticks that would collide with the end boundary
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.push({ pos: boundaryPos, label: boundaryEndLabel });
+  }
+
+  return ticks;
+}

package/src/wireframe/layout.ts

@@ -0,0 +1,460 @@
+// ============================================================
+// Wireframe Diagram Layout Engine (Document Flow)
+// ============================================================
+
+import type {
+  WireframeElement,
+  ParsedWireframe,
+  WireframeFormFactor,
+} from './types';
+
+// ============================================================
+// Constants
+// ============================================================
+
+const DESKTOP_WIDTH = 1200;
+const MOBILE_WIDTH = 375;
+
+const CHAR_WIDTH = 7.5;
+const LABEL_PADDING = 16;
+
+/** Element type-specific heights */
+const ELEMENT_HEIGHTS: Record<string, number> = {
+  textInput: 36,
+  button: 40,
+  dropdown: 36,
+  checkbox: 24,
+  radio: 24,
+  heading: 48,
+  subheading: 36,
+  divider: 24,
+  text: 22,
+  listItem: 24,
+  image: 120,
+  progress: 28,
+  chart: 160,
+  alert: 40,
+  nav: 44,
+  tabs: 44,
+};
+
+/** Spacing after specific element types */
+const SPACING_AFTER: Record<string, number> = {
+  heading: 16,
+  subheading: 12,
+  divider: 12,
+  textInput: 8,
+  dropdown: 8,
+  checkbox: 8,
+  radio: 8,
+  button: 8,
+  text: 12,
+  listItem: 4,
+  group: 16,
+  image: 12,
+  progress: 12,
+  chart: 16,
+  alert: 12,
+  nav: 12,
+  tabs: 12,
+  table: 16,
+};
+
+const GROUP_PADDING_TOP_WITH_LABEL = 32; // label + top padding
+const GROUP_PADDING_TOP_NO_LABEL = 10; // just content padding
+const GROUP_PADDING_BOTTOM = 12;
+
+/** Resolved at layout time based on showGroupLabels option */
+let GROUP_PADDING_TOP = GROUP_PADDING_TOP_WITH_LABEL;
+const GROUP_PADDING_X = 12;
+const FRAME_PADDING = 20;
+const TITLE_HEIGHT = 40;
+
+/** Smart sizing: recognized region name prefixes → width fraction */
+const REGION_SIZES: Record<string, number> = {
+  sidebar: 0.25,
+  side: 0.25,
+  left: 0.25,
+  right: 0.25,
+  main: 0, // fill remaining
+  content: 0, // fill remaining
+  center: 0, // fill remaining
+};
+
+/** Full-width regions (thin strips) */
+const FULL_WIDTH_REGIONS = new Set(['header', 'top', 'footer', 'bottom']);
+const HEADER_REGION_HEIGHT = 60;
+const FOOTER_REGION_HEIGHT = 40;
+
+// ============================================================
+// Layout Types
+// ============================================================
+
+export interface WireframeLayoutNode {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  element: WireframeElement;
+  children: WireframeLayoutNode[];
+  /** For label-field pairs: the x offset where fields align */
+  fieldAlignX?: number;
+}
+
+export interface WireframeLayout {
+  width: number;
+  height: number;
+  titleHeight: number;
+  nodes: WireframeLayoutNode[];
+  modalNodes: WireframeLayoutNode[];
+}
+
+// ============================================================
+// Layout Engine
+// ============================================================
+
+export function layoutWireframe(
+  parsed: ParsedWireframe,
+  _options?: Record<string, string>,
+  overrideWidth?: number,
+  showGroupLabels = true
+): WireframeLayout {
+  GROUP_PADDING_TOP = showGroupLabels
+    ? GROUP_PADDING_TOP_WITH_LABEL
+    : GROUP_PADDING_TOP_NO_LABEL;
+  const defaultWidth =
+    parsed.formFactor === 'mobile' ? MOBILE_WIDTH : DESKTOP_WIDTH;
+  const frameWidth = overrideWidth ?? defaultWidth;
+  const titleHeight = parsed.title ? TITLE_HEIGHT : 0;
+
+  const contentWidth = frameWidth - FRAME_PADDING * 2;
+
+  // Layout top-level roots
+  const nodes = layoutTopLevel(parsed.roots, contentWidth, parsed.formFactor);
+
+  // Calculate total height from positioned nodes
+  let maxY = 0;
+  for (const n of nodes) {
+    maxY = Math.max(maxY, n.y + n.height);
+  }
+
+  // Layout modals below main content
+  const modalNodes: WireframeLayoutNode[] = [];
+  let modalY = maxY + 24;
+  for (const modal of parsed.modals) {
+    const modalWidth = Math.min(contentWidth * 0.7, 600);
+    const modalX = (contentWidth - modalWidth) / 2;
+    const node = layoutElement(modal, modalX, modalY, modalWidth);
+    modalNodes.push(node);
+    modalY += node.height + 24;
+  }
+
+  const totalHeight =
+    (modalNodes.length > 0
+      ? modalNodes[modalNodes.length - 1].y +
+        modalNodes[modalNodes.length - 1].height
+      : maxY) +
+    FRAME_PADDING * 2 +
+    titleHeight;
+
+  return {
+    width: frameWidth,
+    height: totalHeight,
+    titleHeight,
+    nodes,
+    modalNodes,
+  };
+}
+
+/**
+ * Layout top-level roots: separate into full-width regions (header/footer)
+ * and horizontal siblings, then stack vertically.
+ */
+function layoutTopLevel(
+  roots: WireframeElement[],
+  contentWidth: number,
+  formFactor: WireframeFormFactor
+): WireframeLayoutNode[] {
+  const result: WireframeLayoutNode[] = [];
+  let y = 0;
+
+  // Classify roots into rows
+  const rows: WireframeElement[][] = [];
+  let currentRow: WireframeElement[] = [];
+
+  for (const root of roots) {
+    const regionName = root.label.toLowerCase().split(/\s+/)[0];
+    if (FULL_WIDTH_REGIONS.has(regionName) || formFactor === 'mobile') {
+      // Full-width: flush current row first, then add as its own row
+      if (currentRow.length > 0) {
+        rows.push(currentRow);
+        currentRow = [];
+      }
+      rows.push([root]);
+    } else {
+      currentRow.push(root);
+    }
+  }
+  if (currentRow.length > 0) rows.push(currentRow);
+
+  // Layout each row
+  for (const row of rows) {
+    if (row.length === 1 && formFactor !== 'mobile') {
+      const el = row[0];
+      const regionName = el.label.toLowerCase().split(/\s+/)[0];
+
+      if (FULL_WIDTH_REGIONS.has(regionName)) {
+        // Full-width strip
+        const node = layoutElement(el, 0, y, contentWidth);
+        // Enforce min height for header/footer
+        if (regionName === 'header' || regionName === 'top') {
+          node.height = Math.max(node.height, HEADER_REGION_HEIGHT);
+        } else {
+          node.height = Math.max(node.height, FOOTER_REGION_HEIGHT);
+        }
+        result.push(node);
+        y += node.height + 16;
+        continue;
+      }
+    }
+
+    if (formFactor === 'mobile' || row.length === 1) {
+      // Stack vertically
+      for (const el of row) {
+        const node = layoutElement(el, 0, y, contentWidth);
+        result.push(node);
+        y += node.height + 16;
+      }
+    } else {
+      // Horizontal siblings — smart sizing
+      const allocated = allocateHorizontalWidths(row, contentWidth);
+      let x = 0;
+      let maxHeight = 0;
+      const rowNodes: WireframeLayoutNode[] = [];
+
+      for (let i = 0; i < row.length; i++) {
+        const w = allocated[i];
+        const node = layoutElement(row[i], x, y, w);
+        rowNodes.push(node);
+        maxHeight = Math.max(maxHeight, node.height);
+        x += w + 12; // gap between horizontal siblings
+      }
+
+      // Equalize heights (tallest wins, F4)
+      for (const n of rowNodes) {
+        n.height = maxHeight;
+      }
+
+      result.push(...rowNodes);
+      y += maxHeight + 16;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Allocate horizontal widths for side-by-side regions using smart sizing.
+ */
+function allocateHorizontalWidths(
+  elements: WireframeElement[],
+  totalWidth: number
+): number[] {
+  const gap = 12;
+  const totalGaps = (elements.length - 1) * gap;
+  const available = totalWidth - totalGaps;
+
+  const widths: number[] = new Array(elements.length).fill(0);
+  let allocated = 0;
+  let fillCount = 0;
+
+  for (let i = 0; i < elements.length; i++) {
+    const name = elements[i].label.toLowerCase().split(/\s+/)[0];
+    const fraction = REGION_SIZES[name];
+
+    if (fraction !== undefined && fraction > 0) {
+      widths[i] = available * fraction;
+      allocated += widths[i];
+    } else if (fraction === 0) {
+      // Fill remaining
+      fillCount++;
+    } else {
+      // Unknown — will be equal-split
+      fillCount++;
+    }
+  }
+
+  // Distribute remaining to fill/unknown regions
+  if (fillCount > 0) {
+    const remaining = Math.max(0, available - allocated);
+    const each = remaining / fillCount;
+    for (let i = 0; i < widths.length; i++) {
+      if (widths[i] === 0) widths[i] = Math.max(40, each);
+    }
+  }
+
+  // Clamp all widths to minimum
+  for (let i = 0; i < widths.length; i++) {
+    widths[i] = Math.max(40, widths[i]);
+  }
+
+  return widths;
+}
+
+/**
+ * Layout a single element and its children recursively.
+ */
+function layoutElement(
+  el: WireframeElement,
+  x: number,
+  y: number,
+  width: number
+): WireframeLayoutNode {
+  const node: WireframeLayoutNode = {
+    id: el.id,
+    x,
+    y,
+    width,
+    height: 0,
+    element: el,
+    children: [],
+  };
+
+  // Nav and tabs render children internally as a horizontal bar — treat as leaf for layout
+  const selfRendered = el.type === 'nav' || el.type === 'tabs';
+
+  if (!el.isContainer || el.children.length === 0 || selfRendered) {
+    // Leaf element — use type-specific height
+    node.height = getElementHeight(el);
+    return node;
+  }
+
+  // Container — layout children
+  const isInlineRow =
+    el.metadata._inlineRow === 'true' || el.metadata._labelField === 'true';
+  const padTop = isInlineRow ? 0 : GROUP_PADDING_TOP;
+  const padBottom = isInlineRow ? 0 : GROUP_PADDING_BOTTOM;
+  const padX = isInlineRow ? 0 : GROUP_PADDING_X;
+  const innerWidth = width - padX * 2;
+  const innerX = padX;
+
+  if (el.orientation === 'horizontal') {
+    // Horizontal layout: children in a row
+    const childWidths = allocateEqualWidths(el.children, innerWidth);
+    let cx = innerX;
+    let maxChildHeight = 0;
+
+    for (let i = 0; i < el.children.length; i++) {
+      const child = el.children[i];
+      const cw = childWidths[i];
+      const childNode = layoutElement(child, cx, padTop, cw);
+      node.children.push(childNode);
+      maxChildHeight = Math.max(maxChildHeight, childNode.height);
+      cx += cw + 8;
+    }
+
+    // Equalize child heights
+    for (const cn of node.children) {
+      cn.height = maxChildHeight;
+    }
+
+    node.height = padTop + maxChildHeight + padBottom;
+  } else {
+    // Vertical layout: stack children
+    let cy = padTop;
+
+    // Check for label-field auto-alignment (ADR-4)
+    const fieldAlignX = computeFieldAlignX(el.children);
+    if (fieldAlignX > 0) {
+      node.fieldAlignX = fieldAlignX;
+    }
+
+    for (const child of el.children) {
+      const childNode = layoutElement(child, innerX, cy, innerWidth);
+      node.children.push(childNode);
+      cy += childNode.height + getSpacingAfter(child);
+    }
+
+    node.height = cy + padBottom;
+  }
+
+  // Collapsed state: only show header
+  if (el.states.includes('collapsed')) {
+    node.height = GROUP_PADDING_TOP;
+    node.children = [];
+  }
+
+  return node;
+}
+
+function allocateEqualWidths(
+  children: WireframeElement[],
+  totalWidth: number
+): number[] {
+  const gap = 8;
+  const totalGaps = (children.length - 1) * gap;
+  const each = Math.max(40, (totalWidth - totalGaps) / children.length);
+  return children.map(() => each);
+}
+
+function getElementHeight(el: WireframeElement): number {
+  if (el.type === 'heading') {
+    return el.headingLevel === 2
+      ? (ELEMENT_HEIGHTS.subheading ?? 36)
+      : (ELEMENT_HEIGHTS.heading ?? 48);
+  }
+
+  if (el.type === 'textInput' && el.fieldVariant === 'textarea') {
+    return 80;
+  }
+
+  if (el.type === 'table') {
+    const headerH = 32;
+    const rowH = 28;
+    const rows = el.tableData?.length || el.tableRows || 0;
+    return headerH + rows * rowH + 8;
+  }
+
+  // Image hints affect height
+  if (el.type === 'image') {
+    if (el.imageHint === 'round') return 80;
+    if (el.imageHint === 'wide') return 80;
+    return ELEMENT_HEIGHTS.image ?? 120;
+  }
+
+  // Label-field wrapper
+  if (el.metadata._labelField === 'true') {
+    return 36; // input height
+  }
+
+  return ELEMENT_HEIGHTS[el.type] ?? 24;
+}
+
+function getSpacingAfter(el: WireframeElement): number {
+  if (el.type === 'heading' && el.headingLevel === 2) {
+    return SPACING_AFTER.subheading ?? 12;
+  }
+  return SPACING_AFTER[el.type] ?? 8;
+}
+
+/**
+ * Compute auto-alignment X offset for label-field pairs in a group (ADR-4, EC8).
+ * Returns 0 if no label-field pattern detected.
+ */
+function computeFieldAlignX(children: WireframeElement[]): number {
+  let maxLabelWidth = 0;
+  let labelFieldCount = 0;
+
+  for (const child of children) {
+    if (child.metadata._labelField === 'true' && child.children.length >= 2) {
+      const labelEl = child.children[0];
+      const labelWidth = labelEl.label.length * CHAR_WIDTH;
+      maxLabelWidth = Math.max(maxLabelWidth, labelWidth);
+      labelFieldCount++;
+    }
+  }
+
+  if (labelFieldCount < 2) return 0;
+  return maxLabelWidth + LABEL_PADDING;
+}