feuerwerk/src/editor/soundfx/EqEditor.ts

/**
 * The tab of a Parametric EQ node (#370): the panel of `EqPanel.ts` under a header, pointed at the
 * node whose tab is showing. While the tab is seen, the spectrum of what passes the node is drawn
 * behind the curve (#374).
 */
import { findGraphAsset, type Project } from '../../core/model/Project';
import { SoundFxParametricEq, tapId } from '../../core/soundfx/nodes';
import { soundLibrary } from '../../viewport/SoundLibrary';
import { Label, Spacer, VStack } from '../../ui';
import type { EditorState } from '../state';
import { TabHeader } from '../TabHeader';
import { EqPanel } from './EqPanel';

/** One editor, pointed at the node whose tab is showing; once the node is gone the tab row is told. */
export class EqEditor extends VStack {
  readonly panel: EqPanel;
  private readonly title = new Label('Parametric EQ', { style: 'bodyBold' });
  private readonly header = new TabHeader();
  /** Whether the tab holds the node's tap; the node in the graph listens to the same one (#381). */
  private listening = false;

  constructor(private readonly state: EditorState) {
    super();
    this.panel = new EqPanel(state);
    this.header.add(this.title);
    this.header.add(new Spacer(), 1);
    this.add(this.header);
    this.add(this.panel, 1);
    state.on('project', () => this.sync());
  }

  show(assetId: string, nodeId: string): void {
    const shown = this.panel.shownFor;
    if (shown && (shown.assetId !== assetId || shown.nodeId !== nodeId)) this.hideSpectrum();
    this.panel.show(assetId, nodeId);
    this.sync();
  }

  /** The tab is closed: the editor lets go of its node. */
  close(): void {
    this.hideSpectrum();
    this.panel.close();
  }

  get shownFor(): { assetId: string; nodeId: string } | null {
    return this.panel.shownFor;
  }

  /** Only called while the tab is seen: the spectrum of what passes the node, a frame on (#374). */
  tick(): void {
    const shown = this.panel.shownFor;
    if (!shown) return;
    const id = tapId(shown.assetId, shown.nodeId);
    soundLibrary.listen(id);
    this.listening = true;
    this.panel.curve.showSpectrum(soundLibrary.spectrum(id));
  }

  /** The tab is not seen: it lets go of the tap once, so the node in the graph keeps it. */
  hideSpectrum(): void {
    const shown = this.panel.shownFor;
    if (this.listening && shown) soundLibrary.unlisten(tapId(shown.assetId, shown.nodeId));
    this.listening = false;
    this.panel.curve.showSpectrum(null);
  }

  /** Whether the spectrum is moving, so the tab has to be drawn every frame. */
  get hasSpectrum(): boolean {
    return this.panel.curve.hasSpectrum;
  }

  /** Delete in the tab takes the picked band – never the node the tab is about. */
  removePicked(): void {
    this.panel.removePicked();
  }

  private sync(): void {
    const shown = this.panel.shownFor;
    if (!shown) return;
    this.panel.sync();
    const title = `Parametric EQ – ${findGraphAsset(this.state.project, shown.assetId)?.name ?? ''}`;
    if (title === this.title.text) return;
    this.title.setText(title);
    this.relayout();
  }
}

/**
 * What an EQ's tab says: its asset's name, and which EQ it is when the asset has more than one.
 */
export function eqTabLabel(project: Project, assetId: string, nodeId: string): string {
  const asset = findGraphAsset(project, assetId);
  if (!asset) return '';
  const eqs = asset.graph.nodes.filter((n) => n.type === SoundFxParametricEq.type);
  const index = eqs.findIndex((n) => n.id === nodeId);
  return eqs.length > 1 ? `${asset.name} · EQ ${index + 1}` : `${asset.name} · EQ`;
}