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

@@ -1,6 +1,6 @@
 import { type Container, type FederatedPointerEvent, Graphics, Rectangle } from 'pixi.js';
 import { Button, crisp, drawFloatingBox, Icon, Label, Spacer, Theme, ui, Widget } from '../ui';
-import { onScreen, sized, type WindowBox } from './floating';
+import { leastBox, onScreen, sized, type WindowBox } from './floating';
 import { TabHeader } from './TabHeader';
 
 /** The corner taken hold of to size the window. */
@@ -93,6 +93,8 @@ export class FloatWindow extends Widget {
     content.visible = true;
     this.addChildAt(content, this.getChildIndex(this.bar));
     this.layout();
+    // A pane that needs more than the window has grows the window.
+    if (this.isOpen) this.place(this.box);
   }
 
   /** The name and the icon of the document shown, as its tab had them. */
@@ -139,15 +141,22 @@ export class FloatWindow extends Widget {
     const screen = ui().app.screen;
     const dx = e.global.x - g.x;
     const dy = e.global.y - g.y;
-    if (g.kind === 'size') this.place(sized(g.box, dx, dy, screen.width, screen.height));
+    if (g.kind === 'size') this.place(sized(g.box, dx, dy, screen.width, screen.height, this.least()));
     else this.place({ ...g.box, x: g.box.x + dx, y: g.box.y + dy });
   }
 
   private readonly keepOnScreen = () => this.place(this.box);
 
+  /** The window's least size: the usual one, or more where the pane in it says it needs more. */
+  least(): { w: number; h: number } {
+    const content = this.content;
+    if (!content) return leastBox(0, 0);
+    return leastBox(content.minWidth + 2, content.minHeight + this.bar.measure().h + 2);
+  }
+
   private place(box: WindowBox): void {
     const screen = ui().app.screen;
-    const fit = onScreen(box, screen.width, screen.height);
+    const fit = onScreen(box, screen.width, screen.height, this.least());
     this.position.set(fit.x, fit.y);
     this.resize(fit.w, fit.h);
   }

src/editor/debug/graphHooks.ts

@@ -164,8 +164,19 @@ export function graphHooks({ state, editor }: HookContext) {
         editor.compressorEditor.knobs[key].dialGlobal(),
       fieldAt: (key: keyof typeof editor.compressorEditor.knobs) =>
         centreOf(editor.compressorEditor.knobs[key].field),
+      /** The auto-gain switch: on or off, what it says it gives, and where to click it. */
+      autoGain: () => ({
+        on: editor.compressorEditor.autoGain.checked,
+        says: editor.compressorEditor.autoGainDb.text,
+        at: centreOf(editor.compressorEditor.autoGain),
+      }),
       handleAt: (key: 'threshold' | 'ratio') => editor.compressorEditor.curve.handleGlobal(key),
       pointAt: (inDb: number, outDb: number) => editor.compressorEditor.curve.pointGlobal(inDb, outDb),
+      /** Where the level picture and the curve are on screen (#378 layout). */
+      pictures: () => ({
+        levels: rectOf(editor.compressorEditor.levels),
+        curve: rectOf(editor.compressorEditor.curve),
+      }),
       /**
        * The levels read so far (#378): how many readings with something coming in, the loudest on
        * either side, the most taken away in one, and the taps as for the EQ.

src/editor/debugHook.ts

@@ -7,6 +7,7 @@ import { Music } from '../viewport/music';
 import { bothAtCenter, envelopeDriver, followCurve, releaseEnvelope, stageNodes } from '../viewport/fxNodes';
 import { soundLibrary } from '../viewport/SoundLibrary';
 import { saturationAutoGain } from '../core/soundfx/saturation';
+import { compressorMakeup } from '../core/soundfx/dynamics';
 import { bakeHooks } from './debug/bakeHooks';
 import { curveHooks } from './debug/curveHooks';
 import { soundHooks } from './debug/soundHooks';
@@ -88,6 +89,8 @@ export function installDebugHook(app: Application, state: EditorState, editor: E
         stageNodes(context, stage, undefined, at, impulse),
       /** The gain in dB a Saturation's auto-gain gives at a drive (#323). */
       saturationAutoGain,
+      /** The gain after a Compressor as a factor, from its makeup and auto-gain (#326, #378). */
+      compressorMakeup,
       /** What drives the two shares of a Mix "Both at center", in any context (unstarted). */
       bothAtCenter: (context: BaseAudioContext, mix: number, a: GainNode, b: GainNode) =>
         bothAtCenter(context, mix, a, b),

src/editor/floating.ts

@@ -12,6 +12,13 @@ export interface WindowBox {
 /** Below this a tab's controls no longer fit in a row, and the title bar loses its buttons. */
 export const MIN_WINDOW_WIDTH = 320;
 export const MIN_WINDOW_HEIGHT = 200;
+/** The least a window is sized to; a pane that needs more says so (#378). */
+const LEAST = { w: MIN_WINDOW_WIDTH, h: MIN_WINDOW_HEIGHT };
+
+/** The least size of a window around a pane that needs `w` by `h`, never below the usual least. */
+export function leastBox(w: number, h: number): { w: number; h: number } {
+  return { w: Math.max(MIN_WINDOW_WIDTH, Math.ceil(w)), h: Math.max(MIN_WINDOW_HEIGHT, Math.ceil(h)) };
+}
 /** How far each further window opens down and to the right, so it does not hide the one before. */
 const WINDOW_STEP = 24;
 
@@ -28,17 +35,24 @@ export function openingBox(screenW: number, screenH: number, count: number): Win
 }
 
 /** `box` whole on the screen: no larger than it, and moved in where it sticks out. */
-export function onScreen(box: WindowBox, screenW: number, screenH: number): WindowBox {
-  const w = Math.max(Math.min(box.w, screenW), Math.min(MIN_WINDOW_WIDTH, screenW));
-  const h = Math.max(Math.min(box.h, screenH), Math.min(MIN_WINDOW_HEIGHT, screenH));
+export function onScreen(box: WindowBox, screenW: number, screenH: number, least = LEAST): WindowBox {
+  const w = Math.min(Math.max(box.w, least.w), screenW);
+  const h = Math.min(Math.max(box.h, least.h), screenH);
   const x = Math.max(0, Math.min(box.x, screenW - w));
   const y = Math.max(0, Math.min(box.y, screenH - h));
   return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
 }
 
 /** `box` with its lower right corner pulled by `dx`, `dy`: at least the minimum, at most to the screen's edge. */
-export function sized(box: WindowBox, dx: number, dy: number, screenW: number, screenH: number): WindowBox {
-  const w = Math.max(MIN_WINDOW_WIDTH, Math.min(box.w + dx, screenW - box.x));
-  const h = Math.max(MIN_WINDOW_HEIGHT, Math.min(box.h + dy, screenH - box.y));
+export function sized(
+  box: WindowBox,
+  dx: number,
+  dy: number,
+  screenW: number,
+  screenH: number,
+  least = LEAST,
+): WindowBox {
+  const w = Math.max(least.w, Math.min(box.w + dx, screenW - box.x));
+  const h = Math.max(least.h, Math.min(box.h + dy, screenH - box.y));
   return { ...box, w: Math.round(w), h: Math.round(h) };
 }

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);

src/editor/soundfx/compressorView.ts

@@ -26,16 +26,15 @@ export interface CompressorNumbers {
   attack: number;
   release: number;
   makeup: number;
-  autoGain: number;
+  autoGain: boolean;
 }
 
 const dbToLinear = (db: number) => 10 ** (db / 20);
 const linearToDb = (value: number) => (value <= 0 ? -Infinity : 20 * Math.log10(value));
 
-/** What the gain after the compressing adds, in dB: makeup and auto-gain blended. */
+/** What the gain after the compressing adds, in dB: the makeup, and the auto-gain where it is on. */
 export function compressorGainDb(n: CompressorNumbers): number {
-  const w = clamp(n.autoGain, 0, 1);
-  return (1 - w) * n.makeup + w * compressorAutoGain(n.threshold, n.knee, n.ratio);
+  return n.makeup + (n.autoGain ? compressorAutoGain(n.threshold, n.knee, n.ratio) : 0);
 }
 
 /** The level a steady one of `inDb` comes out at, before the gain after it. */
@@ -94,6 +93,31 @@ export function ratioFor(
   return clamp(snapToStep((low + high) / 2, range.step), range.min, range.max);
 }
 
+// --- Where the two pictures go in the space the tab leaves them. ---
+
+export const MIN_LEVELS_WIDTH = 240;
+/** The side of the curve's square: it grows with the tab up to the largest, then stays centred. */
+export const MIN_CURVE = 180;
+export const MAX_CURVE = 360;
+/** The most of the width the curve takes, so the levels keep the larger part. */
+const CURVE_SHARE = 0.4;
+
+/**
+ * The levels fill the height on the left; the curve's square is on the right, centred up and
+ * down, as large as the height, the largest and its share of the width allow.
+ */
+export function picturesLayout(
+  w: number,
+  h: number,
+  gap: number,
+): { levels: { w: number; h: number }; curve: { x: number; y: number; side: number } } {
+  const side = Math.round(Math.max(MIN_CURVE, Math.min(h, MAX_CURVE, w * CURVE_SHARE)));
+  return {
+    levels: { w: Math.max(0, w - side - gap), h },
+    curve: { x: w - side, y: Math.round(Math.max(0, h - side) / 2), side },
+  };
+}
+
 // --- The level picture: time across, the newest at the right edge; dB up. ---
 
 export const levelY = (db: number, h: number): number =>
@@ -101,18 +125,22 @@ export const levelY = (db: number, h: number): number =>
 
 export const historyX = (t: number, now: number, w: number): number => w - ((now - t) / HISTORY_SECONDS) * w;
 
-/** One reading of both sides. */
+/** One reading of both sides, and the gain after the compressing as it was then, in dB. */
 export interface LevelPoint extends Levels {
   t: number;
+  gain: number;
 }
 
 /** The readings of the last seconds, oldest first. */
 export class LevelHistory {
   private points: LevelPoint[] = [];
 
-  /** A reading at `t` seconds; none heard counts as silence on both sides. */
-  push(t: number, levels: Levels | null): void {
-    this.points.push({ t, in: levels?.in ?? -Infinity, out: levels?.out ?? -Infinity });
+  /**
+   * A reading at `t` seconds, with the gain after the compressing at the time: a reading from
+   * before the makeup or the auto-gain changed is read by what it was. None heard is silence.
+   */
+  push(t: number, levels: Levels | null, gain: number): void {
+    this.points.push({ t, in: levels?.in ?? -Infinity, out: levels?.out ?? -Infinity, gain });
     const old = this.points.findIndex((p) => p.t >= t - HISTORY_SECONDS);
     if (old > 0) this.points.splice(0, old);
   }
@@ -147,7 +175,6 @@ export function reductionOf(point: Levels, gainDb: number): number {
  */
 export function reductionShapes(
   points: readonly LevelPoint[],
-  gainDb: number,
   now: number,
   w: number,
   h: number,
@@ -165,7 +192,7 @@ export function reductionShapes(
     bottom = [];
   };
   for (const point of points) {
-    const reduction = reductionOf(point, gainDb);
+    const reduction = reductionOf(point, point.gain);
     if (reduction < REDUCTION_SHOWN_DB) {
       close();
       continue;