@diagrammo/dgmo 0.8.17 → 0.8.19

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 ───────────────────────────────────────────────
@@ -107,14 +111,16 @@ function capsuleWidth(
   }
 
   // Multi-row: compute how many entries fit per row
-  const rowWidth = maxCapsuleW - LEGEND_CAPSULE_PAD * 2;
+  // Right boundary leaves one LEGEND_CAPSULE_PAD for right padding;
+  // left padding is already baked into the starting rowX.
+  const rowWidth = maxCapsuleW - LEGEND_CAPSULE_PAD;
   let row = 1;
-  let rowX = pw + 4;
+  let rowX = LEGEND_CAPSULE_PAD + pw + 4 + addonWidth;
   let visible = 0;
 
   for (let i = 0; i < entries.length; i++) {
     const ew2 = entryWidth(entries[i].value);
-    if (rowX + ew2 > rowWidth && rowX > pw + 4) {
+    if (rowX + ew2 > rowWidth && i > 0) {
       row++;
       rowX = 0;
       if (row > LEGEND_MAX_ENTRY_ROWS) {
@@ -138,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(
@@ -151,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,
@@ -163,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,
@@ -236,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[] = [];
@@ -254,7 +352,7 @@ export function computeLegendLayout(
     if (isActive) {
       activeCapsule = buildCapsuleLayout(
         g,
-        containerWidth,
+        groupAvailW,
         config.capsulePillAddonWidth ?? 0
       );
     } else {
@@ -279,7 +377,8 @@ export function computeLegendLayout(
     groupAvailW,
     containerWidth,
     totalControlsW,
-    alignLeft
+    alignLeft,
+    controlsGroupLayout
   );
 
   const height = rows.length * LEGEND_HEIGHT;
@@ -292,6 +391,7 @@ export function computeLegendLayout(
     activeCapsule,
     controls: controlLayouts,
     pills,
+    controlsGroup: controlsGroupLayout,
   };
 }
 
@@ -323,7 +423,9 @@ function buildCapsuleLayout(
   let ex = LEGEND_CAPSULE_PAD + pw + 4 + addonWidth;
   let ey = 0;
   let rowX = ex;
-  const maxRowW = containerWidth - LEGEND_CAPSULE_PAD * 2;
+  // Right boundary: one LEGEND_CAPSULE_PAD for right padding.
+  // Left padding is already in ex/rowX starting position.
+  const maxRowW = containerWidth - LEGEND_CAPSULE_PAD;
   let currentRow = 0;
 
   for (let i = 0; i < info.visibleEntries; i++) {
@@ -382,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>;
@@ -397,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
@@ -407,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 = [];
@@ -443,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: [] });
@@ -458,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<
@@ -473,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 ──────────────────────────────────────────────────