Fit the Compressor's tab to any size, make auto-gain a switch (#378)

Two things came up on the new tab. Floated and sized down, it spilled
its knobs out of its window, and sized up it left the window empty.
Auto-gain lifted far too much: it brought 0 dB back to 0 dB, which at
-40 dB, 4:1 and knee 6 is +28.1 dB, so a sound at -24 dB came out at
-6 dB. And as a knob from 0 to 1 it blended between makeup and
auto-gain, so at 1 the makeup knob did nothing.

Layout:

- The knobs stay on the bottom line, centred, with the help line
  above them.
- The levels fill the height left above. The curve is a square at
  their right, centred up and down. It grows with the tab from 180 to
  360 px and takes no more than 40 % of its width (picturesLayout).
- A floated window cannot be sized below what its pane needs. A pane
  says so in its minWidth and minHeight, and the Compressor's is every
  knob and the smallest pictures. Other panes keep 320 x 200.
- A pane put into an open window that is too small grows the window.

Auto-gain, as decided in #378:

- A Compressor's auto-gain gives back what it takes from a sound at
  -18 dB, so that one comes out as loud as it went in. At the numbers
  above that is +14.6 dB.
- Auto-gain is a switch on the Compressor, the Limiter and the
  Saturation alike, a setting and no longer an input. The makeup or
  output is added on top of it instead of being blended with it.
- A project from before reads a number as on above 0. Nodes never
  set keep their defaults: off on the Compressor, on on the other two.
- The tab shows the switch at the right of the knobs, with the dB it
  gives below it. With it on, the curve has a line at -18 dB from the
  curve up to the diagonal.
- Every level reading keeps the gain of its time. Before, the whole
  picture was read by the current makeup, so after a change the
  tinting of the last seconds was wrong or missing.

Findings:

- My first e2e run of the layout clicked Dock where it was before the
  window was sized up, so the window stayed open and the next check
  went red. The check reads the button again.

Tests:

- Gate (melektaus-atx): 282 files, 4344 tests (6 new)
- e2e 34 (melektaus-atx): ALL PASSED, 118 checks (2 new)
- Offline in Chrome: a sine at -18 dB through -24 dB and 4:1 came out
  at -17.92 dB with auto-gain on and -22.42 dB with it off.
- Counter-checks: the curve set at the top instead of the middle, and
  every reading read at a gain of 0, each fail exactly their test.
- Looked at the window in screenshots: at its least every knob and
  the switch show. At 1280 x 797 the levels fill the height, the
  curve is centred at the right and the knobs are at the bottom.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/soundfx/CompressorEditor.ts

@@ -1,6 +1,6 @@
 /**
  * The editor of a Compressor node (#378), in a tab of its own like a Parametric EQ's. A knob for
- * each of its numbers; the curve from level in to level out, whose threshold and ratio are dragged
+ * each of its numbers and a switch for its auto-gain; the curve from level in to level out, whose threshold and ratio are dragged
  * on it; and the level coming in and going out over the last seconds, tinted where it is squeezed.
  * A drag is one undo step. A number fed from a link has its knob greyed: the link decides it.
  */
@@ -9,9 +9,17 @@ import { SetNodeParamCommand } from '../../core/commands/graphCommands';
 import type { GraphNode } from '../../core/graph';
 import { findGraphAsset, type Project } from '../../core/model/Project';
 import type { PropertyValue } from '../../core/model/Properties';
-import { COMPRESS_ROWS, SoundFxCompressor, tapId } from '../../core/soundfx/nodes';
+import { AUTO_GAIN_REFERENCE_DB, compressorAutoGain } from '../../core/soundfx/dynamics';
+import {
+  autoGainOn,
+  COMPRESS_AUTO_GAIN,
+  COMPRESS_ROWS,
+  SoundFxCompressor,
+  tapId,
+} from '../../core/soundfx/nodes';
 import { soundLibrary } from '../../viewport/SoundLibrary';
 import {
+  Checkbox,
   clamp,
   crispText,
   HStack,
@@ -42,6 +50,9 @@ import {
   LEVEL_WINDOW,
   LevelHistory,
   levelY,
+  MIN_CURVE,
+  MIN_LEVELS_WIDTH,
+  picturesLayout,
   ratioFor,
   ratioHandle,
   reductionShapes,
@@ -66,12 +77,8 @@ const KNOBS: Record<Key, { label: string; taper: number; decimals: number }> = {
   attack: { label: 'Attack s', taper: 3, decimals: 3 },
   release: { label: 'Release s', taper: 2, decimals: 3 },
   makeup: { label: 'Makeup dB', taper: 1, decimals: 1 },
-  autoGain: { label: 'Auto-gain', taper: 1, decimals: 2 },
 };
 
-const MIN_LEVELS_WIDTH = 240;
-/** The side of the curve's square, and the height of the level picture beside it. */
-const PICTURE_SIZE = 240;
 const HANDLE_RADIUS = 6;
 const GRAB_RADIUS = HANDLE_RADIUS + 4;
 const CURVE_STEPS = 120;
@@ -114,14 +121,14 @@ class LevelPicture extends Widget {
   constructor(private readonly host: CompressorHost) {
     super();
     this.minWidth = MIN_LEVELS_WIDTH;
-    this.minHeight = PICTURE_SIZE;
+    this.minHeight = MIN_CURVE;
     this.addChild(this.bg, this.lines);
     this.labels = gridLabels(this, GRID_DB.length);
   }
 
   read(now: number, levels: Parameters<LevelHistory['push']>[1]): void {
     this.now = now;
-    this.history.push(now, levels);
+    this.history.push(now, levels, compressorGainDb(this.host.numbers()));
     this.redraw();
   }
 
@@ -149,7 +156,7 @@ class LevelPicture extends Widget {
     this.lines.clear();
     const points = this.history.all;
     if (points.length < 2) return;
-    for (const shape of reductionShapes(points, compressorGainDb(numbers), this.now, w, h))
+    for (const shape of reductionShapes(points, this.now, w, h))
       this.lines.poly(shape).fill({ color: c.accent, alpha: 0.25 });
     for (const [side, color, width] of [
       ['in', c.textMuted, 1],
@@ -179,8 +186,8 @@ class CurvePicture extends Widget {
 
   constructor(private readonly host: CompressorHost) {
     super();
-    this.minWidth = PICTURE_SIZE;
-    this.minHeight = PICTURE_SIZE;
+    this.minWidth = MIN_CURVE;
+    this.minHeight = MIN_CURVE;
     this.cursor = 'crosshair';
     this.square.position.set(GRAB_RADIUS, GRAB_RADIUS);
     this.square.addChild(this.bg, this.lines);
@@ -274,6 +281,14 @@ class CurvePicture extends Widget {
       if (this.drag === key)
         this.lines.circle(at.x, at.y, HANDLE_RADIUS + 3).stroke({ color: c.symbol, width: 2 });
     }
+    // The level auto-gain keeps as loud as it came in, and how far it is lifted to it.
+    if (n.autoGain) {
+      const x = curveX(AUTO_GAIN_REFERENCE_DB, size);
+      const y = curveY(curveOutDb(AUTO_GAIN_REFERENCE_DB, n.threshold, n.knee, n.ratio), size);
+      const to = curveY(AUTO_GAIN_REFERENCE_DB, size);
+      this.lines.moveTo(x, y).lineTo(x, to).stroke({ color: c.symbol, width: 1, alpha: 0.6 });
+      this.lines.circle(x, to, 3).stroke({ color: c.symbol, width: 1 });
+    }
     if (this.heard > CURVE_FLOOR_DB) {
       const x = curveX(this.heard, size);
       const y = curveY(curveOutDb(this.heard, n.threshold, n.knee, n.ratio), size);
@@ -282,6 +297,29 @@ class CurvePicture extends Widget {
   }
 }
 
+/** The levels and the curve side by side, as `picturesLayout` places them. */
+class Pictures extends Widget {
+  constructor(
+    private readonly levels: LevelPicture,
+    private readonly curve: CurvePicture,
+  ) {
+    super();
+    this.addChild(levels, curve);
+  }
+
+  override measure(): { w: number; h: number } {
+    return { w: MIN_LEVELS_WIDTH + Theme.padding + MIN_CURVE, h: MIN_CURVE };
+  }
+
+  override layout(): void {
+    const at = picturesLayout(this.w, this.h, Theme.padding);
+    this.levels.position.set(0, 0);
+    this.levels.resize(at.levels.w, at.levels.h);
+    this.curve.position.set(at.curve.x, at.curve.y);
+    this.curve.resize(at.curve.side, at.curve.side);
+  }
+}
+
 /**
  * The tab of a Compressor node (#378): one editor, pointed at the node whose tab is showing, as
  * the EQ's is (#370).
@@ -290,6 +328,10 @@ export class CompressorEditor extends VStack implements CompressorHost {
   readonly levels: LevelPicture;
   readonly curve: CurvePicture;
   readonly knobs = {} as Record<Key, Knob>;
+  /** Auto-gain: a switch, with the dB it gives below it where a knob has its number. */
+  readonly autoGain = new Checkbox(false);
+  readonly autoGainDb = new Label('', { style: 'small' });
+  private readonly autoColumn = new VStack({ gap: 2, align: 'center' });
   private assetId = '';
   private nodeId = '';
   /** The value a drag began with – its undo step's other side; undefined when none was typed in. */
@@ -309,10 +351,9 @@ export class CompressorEditor extends VStack implements CompressorHost {
     this.header.add(this.title);
     this.header.add(new Spacer(), 1);
 
-    const pictures = new HStack({ gap: Theme.padding });
-    pictures.add(this.levels, 1);
-    pictures.add(this.curve);
+    // The knobs in the middle of the bottom line, whatever the tab's width.
     const knobs = new HStack({ gap: Theme.padding * 2, align: 'center' });
+    knobs.add(new Spacer(), 1);
     for (const key of KEYS) {
       const row = ROWS[key];
       const look = KNOBS[key];
@@ -329,16 +370,33 @@ export class CompressorEditor extends VStack implements CompressorHost {
       this.knobs[key] = knob;
       knobs.add(knob);
     }
-    this.body.add(pictures);
-    this.body.add(knobs);
+    // As tall as a knob, the switch where its dial is.
+    const auto = this.autoColumn;
+    auto.add(new Label(COMPRESS_AUTO_GAIN.label, { style: 'small' }));
+    auto.add(new Spacer(), 1);
+    auto.add(this.autoGain);
+    auto.add(new Spacer(), 1);
+    auto.add(this.autoGainDb);
+    auto.minHeight = this.knobs.threshold.measure().h;
+    auto.minWidth = this.knobs.threshold.measure().w;
+    this.autoGain.onChange = (on) => this.switchAutoGain(on);
+    knobs.add(auto);
+    knobs.add(new Spacer(), 1);
+    // The pictures take what height there is; the knobs stay on the bottom line.
+    const pictures = new Pictures(this.levels, this.curve);
+    this.body.add(pictures, 1);
     this.body.add(
       new Label('Knob: drag (Shift: fine), wheel, double-click: default. Curve: drag threshold and ratio.', {
         style: 'muted',
       }),
     );
-    this.body.add(new Spacer(), 1);
+    this.body.add(knobs);
     this.add(this.header);
     this.add(this.body, 1);
+    // What a window of the tab needs at the least: every knob and the smallest pictures. The help
+    // line is left out of the width: it is cut short instead.
+    this.minWidth = Math.max(knobs.measure().w, pictures.measure().w) + this.body.padding * 2;
+    this.minHeight = this.measure().h;
     state.on('project', () => this.sync());
   }
 
@@ -409,9 +467,25 @@ export class CompressorEditor extends VStack implements CompressorHost {
       const value = params[key];
       numbers[key] = typeof value === 'number' && Number.isFinite(value) ? value : ROWS[key].default;
     }
+    numbers.autoGain = autoGainOn(params, COMPRESS_AUTO_GAIN);
     return numbers;
   }
 
+  /** The dB auto-gain gives at these numbers, or that it is off. */
+  private showAutoGainDb(n: CompressorNumbers): void {
+    const db = compressorAutoGain(n.threshold, n.knee, n.ratio);
+    const text = n.autoGain ? `+${db.toFixed(1)} dB` : 'off';
+    if (text === this.autoGainDb.text) return;
+    this.autoGainDb.setText(text);
+    this.autoColumn.relayout();
+  }
+
+  /** Auto-gain on or off: one undo step, as a click on a knob is. */
+  private switchAutoGain(on: boolean): void {
+    if (!this.node()) return;
+    this.state.execute(new SetNodeParamCommand(this.assetId, this.nodeId, COMPRESS_AUTO_GAIN.key, on));
+  }
+
   wired(key: Key): boolean {
     const graph = findGraphAsset(this.state.project, this.assetId)?.graph;
     return Boolean(graph?.edges.some((e) => e.to.node === this.nodeId && e.to.port === key));
@@ -427,6 +501,7 @@ export class CompressorEditor extends VStack implements CompressorHost {
     }
     node.params[key] = value;
     this.perFrame.request();
+    this.showAutoGainDb(this.numbers());
     this.levels.invalidate();
     this.curve.invalidate();
   }
@@ -458,6 +533,8 @@ export class CompressorEditor extends VStack implements CompressorHost {
       this.knobs[key].setValue(numbers[key]);
       this.knobs[key].setEnabled(!this.wired(key));
     }
+    this.autoGain.setChecked(numbers.autoGain);
+    this.showAutoGainDb(numbers);
     const title = `Compressor – ${findGraphAsset(this.state.project, this.assetId)?.name ?? ''}`;
     if (title !== this.title.text) {
       this.title.setText(title);