@diagrammo/dgmo 0.8.18 → 0.8.20

package/src/utils/legend-layout.ts

@@ -14,6 +14,8 @@ import {
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
   LEGEND_MAX_ENTRY_ROWS,
+  LEGEND_GEAR_PILL_W,
+  LEGEND_TOGGLE_DOT_R,
   measureLegendText,
 } from './legend-constants';
 
@@ -27,6 +29,8 @@ import type {
   LegendControlLayout,
   LegendEntryLayout,
   LegendControl,
+  ControlsGroupLayout,
+  ControlsGroupToggleLayout,
 } from './legend-types';
 
 // ── Constants ───────────────────────────────────────────────
@@ -140,6 +144,89 @@ function capsuleWidth(
   };
 }
 
+// ── Controls group layout helpers ───────────────────────────
+
+export function controlsGroupCapsuleWidth(
+  toggles: Array<{ label: string }>
+): number {
+  let w = LEGEND_CAPSULE_PAD * 2 + LEGEND_GEAR_PILL_W + 4;
+  for (const t of toggles) {
+    w +=
+      LEGEND_TOGGLE_DOT_R * 2 +
+      LEGEND_ENTRY_DOT_GAP +
+      measureLegendText(t.label, LEGEND_ENTRY_FONT_SIZE) +
+      LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+
+function buildControlsGroupLayout(
+  config: LegendConfig,
+  state: LegendState
+): ControlsGroupLayout | undefined {
+  const cg = config.controlsGroup;
+  if (!cg || cg.toggles.length === 0) return undefined;
+
+  const expanded = !!state.controlsExpanded;
+  const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+
+  if (!expanded) {
+    // Collapsed: just a gear pill
+    return {
+      x: 0,
+      y: 0,
+      width: LEGEND_GEAR_PILL_W,
+      height: LEGEND_HEIGHT,
+      expanded: false,
+      pill: { x: 0, y: 0, width: LEGEND_GEAR_PILL_W, height: LEGEND_HEIGHT },
+      toggles: [],
+    };
+  }
+
+  // Expanded capsule
+  const capsuleW = controlsGroupCapsuleWidth(cg.toggles);
+  const toggleLayouts: ControlsGroupToggleLayout[] = [];
+  let tx = LEGEND_CAPSULE_PAD + LEGEND_GEAR_PILL_W + 4;
+
+  for (const toggle of cg.toggles) {
+    const dotCx = tx + LEGEND_TOGGLE_DOT_R;
+    const dotCy = LEGEND_HEIGHT / 2;
+    const textX = tx + LEGEND_TOGGLE_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+    const textY = LEGEND_HEIGHT / 2;
+
+    toggleLayouts.push({
+      id: toggle.id,
+      label: toggle.label,
+      active: toggle.active,
+      dotCx,
+      dotCy,
+      textX,
+      textY,
+    });
+
+    tx +=
+      LEGEND_TOGGLE_DOT_R * 2 +
+      LEGEND_ENTRY_DOT_GAP +
+      measureLegendText(toggle.label, LEGEND_ENTRY_FONT_SIZE) +
+      LEGEND_ENTRY_TRAIL;
+  }
+
+  return {
+    x: 0,
+    y: 0,
+    width: capsuleW,
+    height: LEGEND_HEIGHT,
+    expanded: true,
+    pill: {
+      x: LEGEND_CAPSULE_PAD,
+      y: LEGEND_CAPSULE_PAD,
+      width: LEGEND_GEAR_PILL_W - LEGEND_CAPSULE_PAD * 2,
+      height: pillH,
+    },
+    toggles: toggleLayouts,
+  };
+}
+
 // ── Main layout computation ─────────────────────────────────
 
 export function computeLegendLayout(
@@ -153,7 +240,7 @@ export function computeLegendLayout(
   // Filter groups for export: only active group shown
   const activeGroupName = state.activeGroup?.toLowerCase() ?? null;
 
-  // In export mode with no active group, no legend
+  // In export mode with no active group and no groups, no legend
   if (isExport && !activeGroupName) {
     return {
       height: 0,
@@ -165,12 +252,18 @@ export function computeLegendLayout(
     };
   }
 
+  // Controls group (strip in export mode)
+  const controlsGroupLayout = isExport
+    ? undefined
+    : buildControlsGroupLayout(config, state);
+
   const visibleGroups = config.showEmptyGroups
     ? groups
     : groups.filter((g) => g.entries.length > 0);
   if (
     visibleGroups.length === 0 &&
-    (!configControls || configControls.length === 0)
+    (!configControls || configControls.length === 0) &&
+    !controlsGroupLayout
   ) {
     return {
       height: 0,
@@ -238,10 +331,13 @@ export function computeLegendLayout(
     if (totalControlsW > 0) totalControlsW -= CONTROL_GAP;
   }
 
-  // Available width for tag groups (controls anchor right)
+  // Available width for tag groups (controls anchor right, gear pill at end of pills)
   const controlsSpace =
     totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0;
-  const groupAvailW = containerWidth - controlsSpace;
+  const gearSpace = controlsGroupLayout
+    ? controlsGroupLayout.width + LEGEND_GROUP_GAP
+    : 0;
+  const groupAvailW = containerWidth - controlsSpace - gearSpace;
 
   // Build pill/capsule layouts
   const pills: LegendPillLayout[] = [];
@@ -256,7 +352,7 @@ export function computeLegendLayout(
     if (isActive) {
       activeCapsule = buildCapsuleLayout(
         g,
-        containerWidth,
+        groupAvailW,
         config.capsulePillAddonWidth ?? 0
       );
     } else {
@@ -281,7 +377,8 @@ export function computeLegendLayout(
     groupAvailW,
     containerWidth,
     totalControlsW,
-    alignLeft
+    alignLeft,
+    controlsGroupLayout
   );
 
   const height = rows.length * LEGEND_HEIGHT;
@@ -294,6 +391,7 @@ export function computeLegendLayout(
     activeCapsule,
     controls: controlLayouts,
     pills,
+    controlsGroup: controlsGroupLayout,
   };
 }
 
@@ -386,7 +484,8 @@ function layoutRows(
   groupAvailW: number,
   containerWidth: number,
   totalControlsW: number,
-  alignLeft = false
+  alignLeft = false,
+  controlsGroup?: ControlsGroupLayout
 ): Array<{
   y: number;
   items: Array<LegendPillLayout | LegendCapsuleLayout | LegendControlLayout>;
@@ -401,6 +500,9 @@ function layoutRows(
   if (activeCapsule) groupItems.push(activeCapsule);
   groupItems.push(...pills);
 
+  // Controls group width for centering offset
+  const gearW = controlsGroup ? controlsGroup.width + LEGEND_GROUP_GAP : 0;
+
   // Compute total group items width
   let currentRowItems: Array<
     LegendPillLayout | LegendCapsuleLayout | LegendControlLayout
@@ -411,9 +513,16 @@ function layoutRows(
   for (const item of groupItems) {
     const itemW = item.width + LEGEND_GROUP_GAP;
     if (currentRowW + item.width > groupAvailW && currentRowItems.length > 0) {
-      // Commit current row
-      if (!alignLeft)
-        centerRowItems(currentRowItems, containerWidth, totalControlsW);
+      // Commit current row (row 0 needs gear space deducted for centering)
+      if (!alignLeft) {
+        const rowGearW = rows.length === 0 ? gearW : 0;
+        centerRowItems(
+          currentRowItems,
+          containerWidth,
+          totalControlsW,
+          rowGearW
+        );
+      }
       rows.push({ y: rowY, items: currentRowItems });
       rowY += LEGEND_HEIGHT;
       currentRowItems = [];
@@ -447,10 +556,26 @@ function layoutRows(
 
   // Commit last row
   if (currentRowItems.length > 0) {
-    centerRowItems(currentRowItems, containerWidth, totalControlsW);
+    centerRowItems(currentRowItems, containerWidth, totalControlsW, gearW);
     rows.push({ y: rowY, items: currentRowItems });
   }
 
+  // Position controls group AFTER centering so it follows the shifted items
+  if (controlsGroup) {
+    const row0Items = rows[0]?.items ?? [];
+    const groupItemsInRow0 = row0Items.filter(
+      (it) => 'groupName' in it
+    ) as Array<LegendPillLayout | LegendCapsuleLayout>;
+    if (groupItemsInRow0.length > 0) {
+      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;
+    }
+    controlsGroup.y = 0;
+  }
+
   // Ensure at least one row height
   if (rows.length === 0) {
     rows.push({ y: 0, items: [] });
@@ -462,7 +587,8 @@ function layoutRows(
 function centerRowItems(
   items: Array<LegendPillLayout | LegendCapsuleLayout | LegendControlLayout>,
   containerWidth: number,
-  totalControlsW: number
+  totalControlsW: number,
+  controlsGroupW = 0
 ): void {
   // Only center group items (pills and capsules), not controls
   const groupItems = items.filter((it) => 'groupName' in it) as Array<
@@ -477,7 +603,8 @@ function centerRowItems(
 
   const availW =
     containerWidth -
-    (totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0);
+    (totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0) -
+    controlsGroupW;
   const offset = Math.max(0, (availW - totalGroupW) / 2);
 
   let x = offset;

package/src/utils/legend-types.ts

@@ -9,6 +9,7 @@ import type { Selection } from 'd3-selection';
 export interface LegendState {
   activeGroup: string | null;
   hiddenAttributes?: Set<string>;
+  controlsExpanded?: boolean;
 }
 
 export interface LegendCallbacks {
@@ -23,6 +24,10 @@ export interface LegendCallbacks {
     groupEl: D3Sel,
     isActive: boolean
   ) => void;
+  /** Called when the controls group gear pill is clicked (expand/collapse) */
+  onControlsExpand?: () => void;
+  /** Called when a controls group toggle entry is clicked */
+  onControlsToggle?: (toggleId: string, active: boolean) => void;
 }
 
 // ── Position & Layout ───────────────────────────────────────
@@ -53,12 +58,28 @@ export interface LegendControlEntry {
   onClick?: () => void;
 }
 
+// ── Controls Group ─────────────────────────────────────────
+
+export interface ControlsGroupToggle {
+  id: string;
+  /** Only 'toggle' is implemented in v1. 'select' and 'action' future-proof for Infra playback etc. */
+  type: 'toggle' | 'select' | 'action';
+  label: string;
+  active: boolean;
+  onToggle: (active: boolean) => void;
+}
+
+export interface ControlsGroupConfig {
+  toggles: ControlsGroupToggle[];
+}
+
 // ── Config ──────────────────────────────────────────────────
 
 export interface LegendConfig {
   groups: import('./legend-svg').LegendGroupData[];
   position: LegendPosition;
   controls?: LegendControl[];
+  controlsGroup?: ControlsGroupConfig;
   mode: LegendMode;
   /** Title width in pixels — used for inline-with-title computation */
   titleWidth?: number;
@@ -131,6 +152,28 @@ export interface LegendControlLayout {
   }>;
 }
 
+export interface ControlsGroupToggleLayout {
+  id: string;
+  label: string;
+  active: boolean;
+  dotCx: number;
+  dotCy: number;
+  textX: number;
+  textY: number;
+}
+
+export interface ControlsGroupLayout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  expanded: boolean;
+  /** The gear pill layout (collapsed or inside capsule) */
+  pill: { x: number; y: number; width: number; height: number };
+  /** Toggle entries (only present when expanded) */
+  toggles: ControlsGroupToggleLayout[];
+}
+
 export interface LegendRowLayout {
   y: number;
   items: Array<LegendPillLayout | LegendCapsuleLayout | LegendControlLayout>;
@@ -149,6 +192,8 @@ export interface LegendLayout {
   controls: LegendControlLayout[];
   /** All pill layouts (collapsed groups) */
   pills: LegendPillLayout[];
+  /** Controls group layout (gear pill / capsule) */
+  controlsGroup?: ControlsGroupLayout;
 }
 
 // ── Handle ──────────────────────────────────────────────────

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/branding.ts

@@ -1,67 +0,0 @@
-import { FONT_FAMILY } from './fonts';
-
-const BRANDING_HEIGHT = 20;
-
-/**
- * Injects `diagrammo.app` branding text into an SVG string.
- * Extends the SVG height by 20px and places the text at the bottom-right.
- */
-export function injectBranding(svgHtml: string, mutedColor: string): string {
-  if (!svgHtml) return svgHtml;
-
-  const brandingText = `<text x="0" y="0" font-size="10" font-family="${FONT_FAMILY}" fill="${mutedColor}" opacity="0.5" text-anchor="end">diagrammo.app</text>`;
-
-  // Parse viewBox
-  const vbMatch = svgHtml.match(/viewBox="([^"]+)"/);
-  const heightAttrMatch = svgHtml.match(/height="([^"]+)"/);
-
-  if (vbMatch) {
-    const parts = vbMatch[1].split(/\s+/).map(Number);
-    if (parts.length === 4) {
-      const [vx, vy, vw, vh] = parts;
-      const newVh = vh + BRANDING_HEIGHT;
-      const textX = vx + vw - 4;
-      const textY = vy + vh + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-
-      let result = svgHtml.replace(
-        /viewBox="[^"]+"/,
-        `viewBox="${vx} ${vy} ${vw} ${newVh}"`
-      );
-
-      // Update height attribute if present
-      if (heightAttrMatch) {
-        const oldH = parseFloat(heightAttrMatch[1]);
-        if (!isNaN(oldH)) {
-          result = result.replace(
-            `height="${heightAttrMatch[1]}"`,
-            `height="${oldH + BRANDING_HEIGHT}"`
-          );
-        }
-      }
-
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  // Fallback: no viewBox, try width/height attributes
-  if (heightAttrMatch) {
-    const widthMatch = svgHtml.match(/width="([^"]+)"/);
-    const w = widthMatch ? parseFloat(widthMatch[1]) : 800;
-    const h = parseFloat(heightAttrMatch[1]);
-    if (!isNaN(h) && !isNaN(w)) {
-      const textX = w - 4;
-      const textY = h + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-      let result = svgHtml.replace(
-        `height="${heightAttrMatch[1]}"`,
-        `height="${h + BRANDING_HEIGHT}"`
-      );
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  return svgHtml;
-}