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>

tests/editor/compressor-view.test.ts

@@ -14,6 +14,9 @@ import {
   HISTORY_SECONDS,
   LevelHistory,
   levelY,
+  MAX_CURVE,
+  MIN_CURVE,
+  picturesLayout,
   ratioFor,
   ratioHandle,
   reductionOf,
@@ -28,7 +31,7 @@ const numbers: CompressorNumbers = {
   attack: 0.003,
   release: 0.25,
   makeup: 0,
-  autoGain: 0,
+  autoGain: false,
 };
 const RATIO = { min: 1, max: 20, step: 0.1 };
 
@@ -65,10 +68,10 @@ describe('the curve of a Compressor', () => {
     expect(curveOutDb(0, -24, 6, ratio)).toBeCloseTo(-16, 0);
   });
 
-  it('counts the makeup, the auto-gain or a blend of both as the gain after it', () => {
+  it('counts the makeup, and the auto-gain on top of it where it is on, as the gain after it', () => {
     expect(compressorGainDb({ ...numbers, makeup: 6 })).toBe(6);
-    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: 1 })).toBeCloseTo(18, 1);
-    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: 0.5 })).toBeCloseTo(12, 1);
+    // -18 dB in comes out at -22.5: auto-gain gives the 4.5 dB back.
+    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: true })).toBeCloseTo(10.5, 3);
   });
 });
 
@@ -82,10 +85,10 @@ describe('the level picture of a Compressor', () => {
 
   it('keeps the readings of the last seconds and knows when all of them are silent', () => {
     const history = new LevelHistory();
-    history.push(0, { in: -6, out: -9 });
-    history.push(1, null);
+    history.push(0, { in: -6, out: -9 }, 0);
+    history.push(1, null, 0);
     expect(history.heard).toBe(true);
-    history.push(1 + HISTORY_SECONDS, null);
+    history.push(1 + HISTORY_SECONDS, null, 0);
     expect(history.all.map((p) => p.t)).toEqual([1, 1 + HISTORY_SECONDS]);
     expect(history.heard).toBe(false);
   });
@@ -99,16 +102,43 @@ describe('the level picture of a Compressor', () => {
 
   it('tints from the level coming in down by what is taken away, one shape per stretch', () => {
     const points = [
-      { t: 0, in: -6, out: -12 },
-      { t: 1, in: -6, out: -12 },
-      { t: 2, in: -30, out: -30 },
-      { t: 3, in: 0, out: -3 },
-      { t: 4, in: 0, out: -3 },
+      { t: 0, in: -6, out: -12, gain: 0 },
+      { t: 1, in: -6, out: -12, gain: 0 },
+      { t: 2, in: -30, out: -30, gain: 0 },
+      { t: 3, in: 0, out: -3, gain: 0 },
+      { t: 4, in: 0, out: -3, gain: 0 },
     ];
-    const shapes = reductionShapes(points, 0, 4, 400, 660);
+    const shapes = reductionShapes(points, 4, 400, 660);
     expect(shapes).toHaveLength(2);
     // Along the level coming in, then back along it less what is taken away.
     expect(shapes[0]).toEqual([0, 120, 100, 120, 100, 180, 0, 180]);
     expect(shapes[1]).toEqual([300, 60, 400, 60, 400, 90, 300, 90]);
   });
+
+  it('reads every reading by the gain after the compressing as it was then', () => {
+    // Raised by 20 dB until a second ago, by 0 since: the same 6 dB taken away both times.
+    const history = new LevelHistory();
+    history.push(0, { in: -24, out: -10 }, 20);
+    history.push(1, { in: -24, out: -10 }, 20);
+    history.push(2, { in: -24, out: -30 }, 0);
+    history.push(3, { in: -24, out: -30 }, 0);
+    const shapes = reductionShapes(history.all, 3, 300, 660);
+    expect(shapes).toHaveLength(1);
+    expect(shapes[0]).toHaveLength(16);
+    expect(shapes[0]!.filter((_, i) => i % 2 === 1)).toEqual([300, 300, 300, 300, 360, 360, 360, 360]);
+  });
+});
+
+describe('the pictures in the space of the tab', () => {
+  it('lets the levels fill the height and keeps the curve square, centred up and down', () => {
+    const at = picturesLayout(1600, 1000, 8);
+    expect(at.curve).toEqual({ x: 1600 - MAX_CURVE, y: (1000 - MAX_CURVE) / 2, side: MAX_CURVE });
+    expect(at.levels).toEqual({ w: 1600 - MAX_CURVE - 8, h: 1000 });
+  });
+
+  it('grows the curve with a lower tab, and holds it at its least in a narrow one', () => {
+    expect(picturesLayout(1600, 250, 8).curve).toEqual({ x: 1350, y: 0, side: 250 });
+    expect(picturesLayout(500, 400, 8).curve.side).toBe(200);
+    expect(picturesLayout(300, 400, 8).curve.side).toBe(MIN_CURVE);
+  });
 });

tests/editor/documents.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from 'vitest';
 import { closeDocument, neighbourOf, openDocument, replaceDocument } from '../../src/editor/documents';
-import { MIN_WINDOW_HEIGHT, MIN_WINDOW_WIDTH, onScreen, openingBox, sized } from '../../src/editor/floating';
+import {
+  leastBox,
+  MIN_WINDOW_HEIGHT,
+  MIN_WINDOW_WIDTH,
+  onScreen,
+  openingBox,
+  sized,
+} from '../../src/editor/floating';
 import { tabRowLayout } from '../../src/editor/tabRow';
 
 const row = (docs: string[], active: string | null) => ({ docs, active });
@@ -87,6 +94,16 @@ describe('a tab in a window (#371)', () => {
     expect(sized(box, -500, -500, 1280, 800)).toEqual({ ...box, w: MIN_WINDOW_WIDTH, h: MIN_WINDOW_HEIGHT });
     expect(sized(box, 900, 900, 1280, 800)).toEqual({ ...box, w: 680, h: 500 });
   });
+
+  it('is held at the least its pane needs, but never larger than the screen (#378)', () => {
+    const least = leastBox(700.4, 450);
+    expect(least).toEqual({ w: 701, h: 450 });
+    expect(leastBox(100, 100)).toEqual({ w: MIN_WINDOW_WIDTH, h: MIN_WINDOW_HEIGHT });
+    const box = { x: 100, y: 100, w: 800, h: 600 };
+    expect(sized(box, -500, -500, 1280, 800, least)).toEqual({ ...box, w: 701, h: 450 });
+    expect(onScreen({ ...box, w: 400, h: 300 }, 1280, 800, least)).toEqual({ ...box, w: 701, h: 450 });
+    expect(onScreen({ ...box, w: 400, h: 300 }, 600, 400, least)).toEqual({ x: 0, y: 0, w: 600, h: 400 });
+  });
 });
 
 describe('tab row without an active tab', () => {