diff --git a/src/editor/soundfx/crusherView.ts b/src/editor/soundfx/crusherView.ts index d07d81c5..532782ce 100644 --- a/src/editor/soundfx/crusherView.ts +++ b/src/editor/soundfx/crusherView.ts @@ -48,8 +48,8 @@ export const CRUSH_KNOBS: Record = { // --- The plate. --- -/** The plate: as the Flanger's (#398), the panel never takes another size. */ -export const CRUSHER_PANEL = { w: 680, h: 280 }; +/** The plate: as the Flanger's (#398), the panel never takes another size – no taller than its knobs need (#399). */ +export const CRUSHER_PANEL = { w: 680, h: 220 }; /** The extra the strip of text under the screen takes. */ export const TEXT_ROW = 14; @@ -72,11 +72,12 @@ export interface CrusherLayout { } function crusherLayout(): CrusherLayout { - const { w } = CRUSHER_PANEL; - const screen = { x: 34, y: 60, w: 280, h: 176 }; - const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 }; + const { w, h } = CRUSHER_PANEL; + // The screen as tall as the plate leaves, its frame as far from the bottom as from the side. + const bezel = { x: 24, y: 44, w: 300, h: h - 24 - 44 }; + const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 }; // The bits and the rate big, the two edges of a pixel on the screen; the wet small after them. - const dialY = 160; + const dialY = 146; const bits = { x: bezel.x + bezel.w + 20 + BIG_DIAL / 2, y: dialY, size: BIG_DIAL }; const rate = { x: bits.x + BIG_DIAL + 20, y: dialY, size: BIG_DIAL }; const mix = { x: rate.x + BIG_DIAL / 2 + 20 + 30, y: dialY, size: SMALL_DIAL }; diff --git a/src/editor/soundfx/delayView.ts b/src/editor/soundfx/delayView.ts index 63b1ef7f..c892881a 100644 --- a/src/editor/soundfx/delayView.ts +++ b/src/editor/soundfx/delayView.ts @@ -115,8 +115,8 @@ export const DELAY_KNOBS: Record = { // --- The plate. --- -/** The plate: as the Compressor's (#379), the panel never takes another size. */ -export const DELAY_PANEL = { w: 680, h: 280 }; +/** The plate: as the Compressor's (#379), the panel never takes another size – no taller than its knobs need. */ +export const DELAY_PANEL = { w: 680, h: 224 }; const KNOB_SLOT = 64; const GROUP_GAP = 16; @@ -143,15 +143,16 @@ export interface DelayLayout { } function delayLayout(): DelayLayout { - const { w } = DELAY_PANEL; - const screen = { x: 34, y: 60, w: 300, h: 176 }; - const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 }; + const { w, h } = DELAY_PANEL; + // The screen as tall as the plate leaves, its frame as far from the bottom as from the side. + const bezel = { x: 24, y: 44, w: 320, h: h - 24 - 44 }; + const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 }; // The right of the plate: the two levers on top, the knobs below. const left = bezel.x + bezel.w + 24; const right = w - 24; const sync = { x: left, y: 52, ...LEVER }; const pingPong = { x: right - LEVER.w, y: 52, ...LEVER }; - const groupTop = 130; + const groupTop = 114; const dialY = groupTop + GROUP_LINE + KNOB_CAPTION + SMALL_DIAL / 2; const groups: { label: string; box: Box }[] = []; const knobs = {} as Record; diff --git a/tools/e2e/34-sound.mjs b/tools/e2e/34-sound.mjs index 9fd981d0..a09272dc 100644 --- a/tools/e2e/34-sound.mjs +++ b/tools/e2e/34-sound.mjs @@ -1413,7 +1413,7 @@ export async function sound(t) { check( 'a Delay node is a device with its echoes on a screen and a running light; ping-pong, sync and the time knob are one undo step each', dlShown.size.w === 680 && - dlShown.size.h === 280 && + dlShown.size.h === 224 && Object.values(dlShown.inputs).length === 5 && Object.values(dlShown.inputs).every((p) => p.x < dlShown.rect.x) && Object.values(dlShown.outputs).every((p) => p.x > dlShown.rect.x + dlShown.rect.w) && @@ -1659,7 +1659,7 @@ export async function sound(t) { check( 'a Bitcrusher node is a device whose screen draws a sine in the cells of its bits and its rate; both knobs are one undo step each', bcShown.size.w === 680 && - bcShown.size.h === 280 && + bcShown.size.h === 220 && Object.values(bcShown.inputs).length === 4 && Object.values(bcShown.inputs).every((p) => p.x < bcShown.rect.x) && Object.values(bcShown.outputs).every((p) => p.x > bcShown.rect.x + bcShown.rect.w) &&