@diagrammo/dgmo 0.8.18 → 0.8.19

package/src/utils/legend-d3.ts

@@ -9,6 +9,9 @@ import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_ENTRY_DOT_GAP,
+  LEGEND_TOGGLE_DOT_R,
+  LEGEND_TOGGLE_OFF_OPACITY,
+  CONTROLS_ICON_PATH,
   measureLegendText,
 } from './legend-constants';
 import { computeLegendLayout } from './legend-layout';
@@ -24,6 +27,7 @@ import type {
   LegendPillLayout,
   LegendCapsuleLayout,
   LegendControlLayout,
+  ControlsGroupLayout,
   D3Sel,
 } from './legend-types';
 
@@ -83,6 +87,19 @@ export function renderLegendD3(
       renderPill(legendG, pill, palette, groupBg, callbacks);
     }
 
+    // Render controls group (gear pill / capsule)
+    if (currentLayout.controlsGroup) {
+      renderControlsGroup(
+        legendG,
+        currentLayout.controlsGroup,
+        palette,
+        groupBg,
+        pillBorder,
+        callbacks,
+        config
+      );
+    }
+
     // Render controls
     for (const ctrl of currentLayout.controls) {
       renderControl(
@@ -398,3 +415,157 @@ function renderControl(
     g.on('click', () => onClick());
   }
 }
+
+// ── Controls group (gear pill / capsule) ───────────────────
+
+function renderControlsGroup(
+  parent: D3Sel,
+  layout: ControlsGroupLayout,
+  palette: LegendPalette,
+  groupBg: string,
+  pillBorder: string,
+  callbacks?: LegendCallbacks,
+  config?: LegendConfig
+): void {
+  const g = parent
+    .append('g')
+    .attr('transform', `translate(${layout.x},${layout.y})`)
+    .attr('data-legend-controls', layout.expanded ? 'expanded' : 'collapsed')
+    .attr('data-export-ignore', 'true')
+    .style('cursor', 'pointer');
+
+  if (!layout.expanded) {
+    // Collapsed: gear pill
+    g.append('rect')
+      .attr('width', layout.width)
+      .attr('height', layout.height)
+      .attr('rx', layout.height / 2)
+      .attr('fill', groupBg);
+
+    // Gear icon centered
+    const iconSize = 14;
+    const iconX = (layout.width - iconSize) / 2;
+    const iconY = (layout.height - iconSize) / 2;
+    g.append('path')
+      .attr('d', CONTROLS_ICON_PATH)
+      .attr('transform', `translate(${iconX},${iconY})`)
+      .attr('fill', palette.textMuted)
+      .attr('fill-rule', 'evenodd')
+      .attr('pointer-events', 'none');
+
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      g.on('click', () => cb());
+    }
+  } else {
+    // Expanded: capsule with gear pill + toggle entries
+    const pill = layout.pill;
+
+    // Outer capsule background
+    g.append('rect')
+      .attr('width', layout.width)
+      .attr('height', layout.height)
+      .attr('rx', LEGEND_HEIGHT / 2)
+      .attr('fill', groupBg);
+
+    // Inner gear pill
+    const pillG = g
+      .append('g')
+      .attr('class', 'controls-gear-pill')
+      .style('cursor', 'pointer');
+
+    pillG
+      .append('rect')
+      .attr('x', pill.x)
+      .attr('y', pill.y)
+      .attr('width', pill.width)
+      .attr('height', pill.height)
+      .attr('rx', pill.height / 2)
+      .attr('fill', palette.bg);
+
+    pillG
+      .append('rect')
+      .attr('x', pill.x)
+      .attr('y', pill.y)
+      .attr('width', pill.width)
+      .attr('height', pill.height)
+      .attr('rx', pill.height / 2)
+      .attr('fill', 'none')
+      .attr('stroke', pillBorder)
+      .attr('stroke-width', 0.75);
+
+    // Gear icon inside pill
+    const iconSize = 14;
+    const iconX = pill.x + (pill.width - iconSize) / 2;
+    const iconY = pill.y + (pill.height - iconSize) / 2;
+    pillG
+      .append('path')
+      .attr('d', CONTROLS_ICON_PATH)
+      .attr('transform', `translate(${iconX},${iconY})`)
+      .attr('fill', palette.text)
+      .attr('fill-rule', 'evenodd')
+      .attr('pointer-events', 'none');
+
+    // Click on gear pill collapses
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      pillG.on('click', (event: Event) => {
+        event.stopPropagation();
+        cb();
+      });
+    }
+
+    // Toggle entries
+    const toggles = config?.controlsGroup?.toggles ?? [];
+    for (const tl of layout.toggles) {
+      const toggle = toggles.find((t) => t.id === tl.id);
+      const entryG = g
+        .append('g')
+        .attr('data-controls-toggle', tl.id)
+        .style('cursor', 'pointer');
+
+      if (tl.active) {
+        // Filled dot
+        entryG
+          .append('circle')
+          .attr('cx', tl.dotCx)
+          .attr('cy', tl.dotCy)
+          .attr('r', LEGEND_TOGGLE_DOT_R)
+          .attr('fill', palette.primary ?? palette.text);
+      } else {
+        // Hollow dot
+        entryG
+          .append('circle')
+          .attr('cx', tl.dotCx)
+          .attr('cy', tl.dotCy)
+          .attr('r', LEGEND_TOGGLE_DOT_R)
+          .attr('fill', 'none')
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 1);
+      }
+
+      // Label
+      entryG
+        .append('text')
+        .attr('x', tl.textX)
+        .attr('y', tl.textY)
+        .attr('dominant-baseline', 'central')
+        .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+        .attr('fill', palette.textMuted)
+        .attr('opacity', tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY)
+        .attr('font-family', FONT_FAMILY)
+        .text(tl.label);
+
+      // Click on toggle entry
+      if (callbacks?.onControlsToggle && toggle) {
+        const cb = callbacks.onControlsToggle;
+        const id = tl.id;
+        const newActive = !tl.active;
+        entryG.on('click', (event: Event) => {
+          event.stopPropagation();
+          cb(id, newActive);
+        });
+      }
+    }
+  }
+}

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 ──────────────────────────────────────────────────