Edit a Parametric EQ in its node, let the wheel only zoom graphs (#381)

The small curve below the EQ node's rows (#375) only showed the bands.
Like the Compressor since #380, the node now shows the editor of its
tab between its inputs and its output, and is worked right there. A
double-click on the node still opens the same editor in a tab.

Two wishes for the nodes with a panel came on top and share the same
files, so they are in this commit as well: the numbers below the
Compressor's knobs read as plain labels (#382), and the wheel over a
node zooms the graph instead of turning a value (#383).

#381, the EQ in its node:
- EqPanel holds the curve, the band's numbers and the help line, taken
  out of EqEditor. The tab puts its one panel under a header, each EQ
  node has a panel of its own at 720 x 360 (EqFace).
- A press on the curve neither picks nor moves the node. A
  double-click on the curve adds a band, one on the title or the edge
  opens the tab.
- In the node a press on the Type or Slope button stays with the
  button, so the node is not picked or moved.
- The spectrum runs in the node while it is in the picture. The tab
  lets go of the tap once, like the Compressor's, and Editor.tick lets
  every unseen tab and graph go before any seen one listens.
- The count of bands moved from the tab's header into the band row,
  so the node shows it as well.
- The node picture of #375 is gone with its only user: NodePicture,
  EQ_PICTURE and NodeView's drawing of it.

#382, the numbers below the Compressor's knobs in its node:
- A Knob with typed: false shows its number as a centred Label without
  a box, in the panel's ink. The ratio reads 4:1 (ratioText).
- The label is as high as its text and sits up in the dial's open
  bottom, right under the ends of the scale.
- Label takes a colour of its own.

#383, the wheel in a graph:
- GraphCanvas takes the wheel on the way down and stops it there. It
  zooms over a node too, and no knob or curve in a node sees it.
- The tabs keep their wheel: a knob's step, a band's Q and the zoom
  of the EQ's dB.

Found on the way:
- A Menu opened below a button in the zoomed graph would have been
  placed by the button's own height. openBelow now takes the bottom
  edge as drawn.
- The band row did not lay out its labels after a text change when
  its own size stayed. In the tab a later resize hid it, in the node
  "Band 1" and the count were missing. The row now lays out itself.
- Handle and point positions for the checks were unscaled. They now
  go through toGlobal and hold at the graph's zoom.

Tests:
- Unit parametric-eq: 16 tests. The #375 tests now check
  eqCurvePoints and eqRangeOf directly. compressor-view: ratioText.
- e2e 34 (atx): ALL PASSED, 125 checks (3 new: the EQ panel and its
  ports, editing in the node, the spectrum in the node with the tab
  open). The Compressor node's check reads its numbers as labels and
  8:1. Both node checks now expect the wheel to zoom the graph and
  leave the ratio, the Q and the dB zoom alone.
- The unseen-tab check now leaves for the Scene tab, since the node
  in the graph listens to the same tap.
- Counter-check: the tab letting go of the tap every unseen frame
  stalls the node's spectrum with the tab open (1 frame against 22,
  probe on stein2).
- Gate (atx): CHECK EXIT 0, 283 files, 4357 tests.

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

src/editor/debug/graphHooks.ts

@@ -1,8 +1,10 @@
 import type { Container } from 'pixi.js';
 import { NameTransitionCommand } from '../../core/commands/graphCommands';
 import { soundLibrary } from '../../viewport/SoundLibrary';
+import type { Widget } from '../../ui';
 import { currentNodePalette } from '../graph/NodePalette';
 import { CompressorPanel } from '../soundfx/CompressorPanel';
+import { EqPanel } from '../soundfx/EqPanel';
 import { rectOf } from '../textProbe';
 import { centreOf, snapButton, type HookContext } from './hookHelpers';
 
@@ -125,31 +127,54 @@ export function graphHooks({ state, editor }: HookContext) {
     /** The Parametric EQ's tab (#367, #370): for which node it is showing, its bands and where to aim. */
     eq: {
       shown: () => (editor.tab === 'eq' ? editor.eqEditor.shownFor : null),
-      bands: () => editor.eqEditor.bands(),
-      picked: () => editor.eqEditor.picked,
+      bands: () => editor.eqEditor.panel.bands(),
+      picked: () => editor.eqEditor.panel.picked,
       /** The dB the curve is zoomed to, above and below 0 (#376). */
-      range: () => editor.eqEditor.range(),
+      range: () => editor.eqEditor.panel.range(),
       /** The dB the curve draws right now, and whether a zoom is on its way (#377). */
-      zoomShown: () => editor.eqEditor.curve.zoomShown,
-      handleAt: (index: number) => editor.eqEditor.curve.handleGlobal(index),
-      pointAt: (hz: number, db: number) => editor.eqEditor.curve.pointGlobal(hz, db),
-      fields: () => {
-        const eq = editor.eqEditor;
-        return {
-          type: eq.typeButton.text,
-          slope: eq.slopeButton.enabled ? eq.slopeButton.text : null,
-          gain: eq.gainField.enabled ? eq.gainField.value : null,
-          q: eq.qField.enabled ? eq.qField.value : null,
-          frequency: eq.frequencyField.value,
-        };
-      },
-      typeAt: () => centreOf(editor.eqEditor.typeButton),
+      zoomShown: () => editor.eqEditor.panel.curve.zoomShown,
+      handleAt: (index: number) => editor.eqEditor.panel.curve.handleGlobal(index),
+      pointAt: (hz: number, db: number) => editor.eqEditor.panel.curve.pointGlobal(hz, db),
+      fields: () => eqFields(editor.eqEditor.panel),
+      typeAt: () => centreOf(editor.eqEditor.panel.typeButton),
       /**
        * The spectra drawn behind the curve (#374): how many, the loudest bin in front of the node and
        * behind it in the last one, and the taps – which node is listened to, how many play, how many
        * of them feed an analyser.
        */
-      spectrum: () => ({ ...editor.eqEditor.curve.seen, taps: soundLibrary.spectrumTaps() }),
+      spectrum: () => ({ ...editor.eqEditor.panel.curve.seen, taps: soundLibrary.spectrumTaps() }),
+      /**
+       * The panel a Parametric EQ node shows in the sound FX graph (#381): whether it is shown and
+       * where, the node's ports, its bands and fields, where to aim on its curve, and its spectra.
+       */
+      panel: (nodeId: string) => {
+        const canvas = editor.soundFxEditor.canvas;
+        const panel = canvas.faceOf(nodeId)?.widget;
+        if (!(panel instanceof EqPanel)) return null;
+        const node = canvas.nodeScreen(nodeId);
+        const ports = (keys: string[], isOutput: boolean) =>
+          Object.fromEntries(keys.map((key) => [key, canvas.portGlobal(nodeId, key, isOutput)]));
+        return {
+          shown: shownOnScreen(panel),
+          rect: screenRect(panel),
+          size: { w: panel.w, h: panel.h },
+          curve: screenRect(panel.curve),
+          node: node?.rect ?? null,
+          inputs: ports(node?.inputs ?? [], false),
+          outputs: ports(node?.outputs ?? [], true),
+          bands: panel.bands(),
+          picked: panel.picked,
+          fields: eqFields(panel),
+          handles: panel.bands().map((_, i) => panel.curve.handleGlobal(i)),
+          type: screenRect(panel.typeButton),
+          spectrum: panel.curve.seen,
+        };
+      },
+      /** Where a frequency and a gain are on the curve of a node's panel, on screen. */
+      panelPointAt: (nodeId: string, hz: number, db: number) => {
+        const panel = editor.soundFxEditor.canvas.faceOf(nodeId)?.widget;
+        return panel instanceof EqPanel ? panel.curve.pointGlobal(hz, db) : null;
+      },
     },
     /** The Compressor's tab (#378): its node, its numbers and knobs, and where to aim on the curve. */
     compressor: {
@@ -160,7 +185,7 @@ export function graphHooks({ state, editor }: HookContext) {
         Object.fromEntries(
           Object.entries(editor.compressorEditor.knobs).map(([key, knob]) => [
             key,
-            { value: knob.value, enabled: knob.enabled, field: knob.field.value },
+            { value: knob.value, enabled: knob.enabled, field: knob.shown },
           ]),
         ),
       dialAt: (key: keyof typeof editor.compressorEditor.knobs) =>
@@ -194,18 +219,13 @@ export function graphHooks({ state, editor }: HookContext) {
         const canvas = editor.soundFxEditor.canvas;
         const panel = canvas.faceOf(nodeId)?.widget;
         if (!(panel instanceof CompressorPanel)) return null;
-        const seen = (node: Container | null): boolean => !node || (node.visible && seen(node.parent));
         const node = canvas.nodeScreen(nodeId);
         const ports = (keys: string[], isOutput: boolean) =>
           Object.fromEntries(keys.map((key) => [key, canvas.portGlobal(nodeId, key, isOutput)]));
         return {
-          shown: seen(panel),
+          shown: shownOnScreen(panel),
           /** On screen, at the graph's zoom; `size` is the panel's own. */
-          rect: (() => {
-            const from = panel.toGlobal({ x: 0, y: 0 });
-            const to = panel.toGlobal({ x: panel.w, y: panel.h });
-            return { x: from.x, y: from.y, w: to.x - from.x, h: to.y - from.y };
-          })(),
+          rect: screenRect(panel),
           size: { w: panel.w, h: panel.h },
           node: node?.rect ?? null,
           inputs: ports(node?.inputs ?? [], false),
@@ -213,9 +233,8 @@ export function graphHooks({ state, editor }: HookContext) {
           dials: Object.fromEntries(
             Object.entries(panel.knobs).map(([key, knob]) => [key, knob.dialGlobal()]),
           ),
-          fields: Object.fromEntries(
-            Object.entries(panel.knobs).map(([key, knob]) => [key, centreOf(knob.field)]),
-          ),
+          /** The numbers below the knobs, as they read (#382). */
+          numbers: Object.fromEntries(Object.entries(panel.knobs).map(([key, knob]) => [key, knob.shown])),
           needle: { shown: panel.meter.shown, target: panel.meter.target },
           leds: panel.leds.litCount,
           seen: panel.seen,
@@ -319,3 +338,26 @@ export function graphHooks({ state, editor }: HookContext) {
     },
   };
 }
+
+/** Whether a widget and all it sits in are visible. */
+function shownOnScreen(node: Container | null): boolean {
+  return !node || (node.visible && shownOnScreen(node.parent));
+}
+
+/** A widget's box on screen, scaled with whatever it sits in – a node at the graph's zoom. */
+function screenRect(widget: Widget): { x: number; y: number; w: number; h: number } {
+  const from = widget.toGlobal({ x: 0, y: 0 });
+  const to = widget.toGlobal({ x: widget.w, y: widget.h });
+  return { x: from.x, y: from.y, w: to.x - from.x, h: to.y - from.y };
+}
+
+/** The picked band's numbers as an EQ panel shows them; null for one its band type has not. */
+function eqFields(panel: EqPanel) {
+  return {
+    type: panel.typeButton.text,
+    slope: panel.slopeButton.enabled ? panel.slopeButton.text : null,
+    gain: panel.gainField.enabled ? panel.gainField.value : null,
+    q: panel.qField.enabled ? panel.qField.value : null,
+    frequency: panel.frequencyField.value,
+  };
+}