path: root/tools/mq_editor/editor.js

// Partial Editor
// Property panel (right) and amplitude bezier editor (bottom) for selected partials

class PartialEditor {
  constructor() {
    // DOM refs
    this._propPanel = document.getElementById('partialProps');
    this._noSelMsg  = document.getElementById('noSelMsg');
    this._ampPanel  = document.getElementById('ampEditPanel');
    this._ampCanvas = document.getElementById('ampEditCanvas');
    this._ampTitle  = document.getElementById('ampEditTitle');
    this._freqGrid  = document.getElementById('freqCurveGrid');
    this._ampGrid   = document.getElementById('ampCurveGrid');
    this._synthGrid = document.getElementById('synthGrid');
    this._ampCtx    = this._ampCanvas ? this._ampCanvas.getContext('2d') : null;

    // References set by host
    this.viewer   = null;
    this.partials = null;

    // Callback: called after a partial is deleted so the host can update keepCount
    this.onPartialDeleted = null;

    // Private state
    this._selectedIndex  = -1;
    this._dragPointIndex = -1;
    this._amp = { tMin: 0, tMax: 1, ampTop: 1 };

    this._setupButtons();
    this._setupAmpDrag();
  }

  // --- Public API ---

  setViewer(v)   { this.viewer   = v; }
  setPartials(p) { this.partials = p; }

  // Wire to viewer.onPartialSelect
  onPartialSelect(index) {
    this._selectedIndex = index;
    this._updatePropPanel(index);
    this._showAmpEditor(index);
  }

  // Wire to viewer.onRender — keeps amp editor in sync with zoom/scroll
  onRender() {
    this._renderAmpEditor();
  }

  // --- Property panel ---

  _updatePropPanel(index) {
    if (index < 0 || !this.partials || index >= this.partials.length) {
      this._propPanel.style.display = 'none';
      this._noSelMsg.style.display  = 'block';
      return;
    }

    this._propPanel.style.display = 'block';
    this._noSelMsg.style.display  = 'none';

    const partial = this.partials[index];
    const color   = this.viewer ? this.viewer.partialColor(index) : '#888';

    document.getElementById('propTitle').textContent   = 'Partial #' + index;
    document.getElementById('propSwatch').style.background = color;

    let peakAmp = 0, peakIdx = 0;
    for (let i = 0; i < partial.amps.length; ++i) {
      if (partial.amps[i] > peakAmp) { peakAmp = partial.amps[i]; peakIdx = i; }
    }
    document.getElementById('propPeak').textContent =
      partial.freqs[peakIdx].toFixed(1) + ' Hz  ' + peakAmp.toFixed(3);

    const t0 = partial.freqCurve ? partial.freqCurve.t0 : partial.times[0];
    const t3 = partial.freqCurve ? partial.freqCurve.t3 : partial.times[partial.times.length - 1];
    document.getElementById('propTime').textContent =
      t0.toFixed(3) + 's\u2013' + t3.toFixed(3) + 's';

    const muteBtn = document.getElementById('mutePartialBtn');
    muteBtn.textContent  = partial.muted ? 'Unmute' : 'Mute';
    muteBtn.style.color  = partial.muted ? '#fa4' : '';

    this._buildCurveGrid(this._freqGrid, partial, 'freqCurve', 'f', index);
    this._buildCurveGrid(this._ampGrid,  partial, 'ampCurve',  'a', index);
    this._buildSynthGrid(partial, index);
  }

  _buildCurveGrid(grid, partial, curveKey, valueLabel, partialIndex) {
    grid.innerHTML = '';
    const curve = partial[curveKey];
    if (!curve) { grid.style.color = '#444'; grid.textContent = 'none'; return; }

    for (let i = 0; i < 4; ++i) {
      const lbl    = document.createElement('span');
      lbl.textContent = 'P' + i;

      const tInput = document.createElement('input');
      tInput.type  = 'number';
      tInput.value = curve['t' + i].toFixed(4);
      tInput.step  = '0.001';
      tInput.title = 't' + i;
      tInput.addEventListener('change', this._makeCurveUpdater(partialIndex, curveKey, 't', i));

      const vInput = document.createElement('input');
      vInput.type  = 'number';
      vInput.value = curveKey === 'freqCurve' ? curve['v' + i].toFixed(2) : curve['v' + i].toFixed(4);
      vInput.step  = curveKey === 'freqCurve' ? '1' : '0.0001';
      vInput.title = valueLabel + i;
      vInput.addEventListener('change', this._makeCurveUpdater(partialIndex, curveKey, 'v', i));

      grid.appendChild(lbl);
      grid.appendChild(tInput);
      grid.appendChild(vInput);
    }
  }

  _buildSynthGrid(partial, index) {
    const grid = this._synthGrid;
    grid.innerHTML = '';
    const defaults = { decay_alpha: 0.1, jitter: 0.05, spread_above: 0.02, spread_below: 0.02 };
    const rep = partial.replicas || {};
    const params = [
      { key: 'decay_alpha',  label: 'decay',    step: '0.001' },
      { key: 'jitter',       label: 'jitter',   step: '0.001' },
      { key: 'spread_above', label: 'spread ↑', step: '0.001' },
      { key: 'spread_below', label: 'spread ↓', step: '0.001' },
    ];
    const inputs = {};
    for (const p of params) {
      const val = rep[p.key] != null ? rep[p.key] : defaults[p.key];
      const lbl = document.createElement('span');
      lbl.textContent = p.label;
      const inp = document.createElement('input');
      inp.type  = 'number';
      inp.value = val.toFixed(3);
      inp.step  = p.step;
      inp.min   = '0';
      inp.addEventListener('change', (e) => {
        if (!this.partials) return;
        const v = parseFloat(e.target.value);
        if (isNaN(v)) return;
        if (!this.partials[index].replicas)
          this.partials[index].replicas = { ...defaults };
        this.partials[index].replicas[p.key] = v;
        if (this.viewer) this.viewer.render();
      });
      inputs[p.key] = inp;
      grid.appendChild(lbl);
      grid.appendChild(inp);
    }

    // Auto-detect spread button
    const autoLbl = document.createElement('span');
    autoLbl.textContent = 'spread';
    const autoBtn = document.createElement('button');
    autoBtn.textContent = 'Auto';
    autoBtn.title = 'Infer spread_above/below from frequency variance around the bezier curve';
    autoBtn.addEventListener('click', () => {
      if (!this.partials) return;
      const p = this.partials[index];
      const sc = this.viewer ? this.viewer.stftCache : null;
      const sr = this.viewer ? this.viewer.audioBuffer.sampleRate : 44100;
      const fs = sc ? sc.fftSize : 2048;
      const {spread_above, spread_below} = autodetectSpread(p, sc, fs, sr);
      if (!p.replicas) p.replicas = { ...defaults };
      p.replicas.spread_above = spread_above;
      p.replicas.spread_below = spread_below;
      inputs['spread_above'].value = spread_above.toFixed(4);
      inputs['spread_below'].value = spread_below.toFixed(4);
    });
    grid.appendChild(autoLbl);
    grid.appendChild(autoBtn);
  }

  _makeCurveUpdater(partialIndex, curveKey, field, pointIndex) {
    return (e) => {
      if (!this.partials) return;
      const val = parseFloat(e.target.value);
      if (isNaN(val)) return;
      this.partials[partialIndex][curveKey][field + pointIndex] = val;
      if (this.viewer) this.viewer.render();
    };
  }

  _setupButtons() {
    document.getElementById('mutePartialBtn').addEventListener('click', () => {
      if (this._selectedIndex < 0 || !this.partials) return;
      const p = this.partials[this._selectedIndex];
      p.muted = !p.muted;
      if (this.viewer) this.viewer.render();
      this._updatePropPanel(this._selectedIndex);
    });

    document.getElementById('deletePartialBtn').addEventListener('click', () => {
      if (this._selectedIndex < 0 || !this.partials || !this.viewer) return;
      this.partials.splice(this._selectedIndex, 1);
      this.viewer.selectPartial(-1);
      if (this.onPartialDeleted) this.onPartialDeleted();
    });
  }

  // --- Amplitude bezier editor ---

  _showAmpEditor(index) {
    if (index < 0 || !this.partials || index >= this.partials.length) {
      this._ampPanel.style.display = 'none';
      return;
    }
    this._ampPanel.style.display = 'block';
    const color = this.viewer ? this.viewer.partialColor(index) : '#888';
    this._ampTitle.textContent   = 'Partial #' + index;
    this._ampTitle.style.color   = color;
    this._renderAmpEditor();
  }

  _renderAmpEditor() {
    if (this._selectedIndex < 0 || !this.partials || !this._ampCtx) return;
    const partial = this.partials[this._selectedIndex];
    if (!partial) return;

    const canvas = this._ampCanvas;
    const ctx    = this._ampCtx;
    const W = canvas.width, H = canvas.height;
    const PADY = 10;

    // Sync time range with viewer
    const amp  = this._amp;
    amp.tMin   = this.viewer ? this.viewer.t_view_min : 0;
    amp.tMax   = this.viewer ? this.viewer.t_view_max : 1;
    amp.ampTop = Math.max(partial.amps.reduce((m, v) => Math.max(m, v), 0), 0.001) * 1.3;

    ctx.fillStyle = '#0e0e0e';
    ctx.fillRect(0, 0, W, H);

    // Horizontal grid (0, 25, 50, 75, 100% of ampTop)
    ctx.lineWidth = 1;
    ctx.font = '9px monospace';
    for (let k = 0; k <= 4; ++k) {
      const a = amp.ampTop * k / 4;
      const y = this._ampToY(a);
      ctx.strokeStyle = k === 0 ? '#2a2a2a' : '#1a1a1a';
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
      ctx.fillStyle = '#383838';
      ctx.fillText(a.toFixed(3), W - 40, y - 2);
    }

    // Vertical time grid (matching main view step)
    if (this.viewer) {
      const step = this.viewer.getAxisStep(amp.tMax - amp.tMin);
      let t = Math.ceil(amp.tMin / step) * step;
      ctx.strokeStyle = '#1a1a1a';
      ctx.fillStyle   = '#383838';
      while (t <= amp.tMax) {
        const x = this._tToX(t);
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
        ctx.fillText(t.toFixed(2) + 's', x + 2, H - 2);
        t += step;
      }
    }

    // Raw amp data (faint dots)
    ctx.fillStyle = '#2e2e2e';
    for (let i = 0; i < partial.times.length; ++i) {
      const x = this._tToX(partial.times[i]);
      if (x < -2 || x > W + 2) continue;
      ctx.fillRect(x - 1, this._ampToY(partial.amps[i]) - 1, 2, 2);
    }

    // Bezier curve
    const curve = partial.ampCurve;
    if (!curve) return;

    const color = this.viewer ? this.viewer.partialColor(this._selectedIndex) : '#f44';
    ctx.strokeStyle = color;
    ctx.lineWidth   = 2;
    ctx.beginPath();
    let started = false;
    for (let i = 0; i <= 120; ++i) {
      const t = curve.t0 + (curve.t3 - curve.t0) * i / 120;
      const x = this._tToX(t);
      if (x < -1 || x > W + 1) { started = false; continue; }
      const y = this._ampToY(evalBezier(curve, t));
      if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
    }
    ctx.stroke();

    // Control points
    for (let i = 0; i < 4; ++i) {
      const x = this._tToX(curve['t' + i]);
      const y = this._ampToY(curve['v' + i]);
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, 6, 0, 2 * Math.PI);
      ctx.fill();
      ctx.strokeStyle = '#fff';
      ctx.lineWidth   = 1.5;
      ctx.stroke();
      ctx.fillStyle = '#888';
      ctx.font      = '9px monospace';
      ctx.fillText('P' + i, x + 8, y - 4);
    }
  }

  _setupAmpDrag() {
    const canvas = this._ampCanvas;
    if (!canvas) return;

    canvas.addEventListener('mousedown', (e) => {
      if (this._selectedIndex < 0 || !this.partials) return;
      const partial = this.partials[this._selectedIndex];
      if (!partial || !partial.ampCurve) return;
      const rect  = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left, y = e.clientY - rect.top;
      const curve = partial.ampCurve;
      for (let i = 0; i < 4; ++i) {
        if (Math.hypot(this._tToX(curve['t' + i]) - x, this._ampToY(curve['v' + i]) - y) <= 8) {
          this._dragPointIndex = i;
          canvas.style.cursor  = 'grabbing';
          e.preventDefault();
          return;
        }
      }
    });

    canvas.addEventListener('mousemove', (e) => {
      const rect  = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left, y = e.clientY - rect.top;

      if (this._dragPointIndex >= 0) {
        const curve = this.partials[this._selectedIndex].ampCurve;
        const i     = this._dragPointIndex;
        curve['t' + i] = Math.max(0, Math.min(this.viewer ? this.viewer.t_max : 1e6, this._xToT(x)));
        curve['v' + i] = Math.max(0, this._yToAmp(y));
        this._renderAmpEditor();
        if (this.viewer) this.viewer.render();
        e.preventDefault();
        return;
      }

      // Cursor hint
      if (this._selectedIndex >= 0 && this.partials) {
        const curve = this.partials[this._selectedIndex]?.ampCurve;
        if (curve) {
          let near = false;
          for (let i = 0; i < 4; ++i) {
            if (Math.hypot(this._tToX(curve['t' + i]) - x, this._ampToY(curve['v' + i]) - y) <= 8) {
              near = true; break;
            }
          }
          canvas.style.cursor = near ? 'grab' : 'crosshair';
        }
      }
    });

    canvas.addEventListener('mouseup', () => {
      if (this._dragPointIndex >= 0) {
        this._dragPointIndex = -1;
        canvas.style.cursor  = 'crosshair';
        this._updatePropPanel(this._selectedIndex); // sync text inputs
      }
    });
  }

  // --- Coordinate helpers (amp canvas) ---

  _tToX(t) {
    return (t - this._amp.tMin) / (this._amp.tMax - this._amp.tMin) * this._ampCanvas.width;
  }

  _xToT(x) {
    return this._amp.tMin + (x / this._ampCanvas.width) * (this._amp.tMax - this._amp.tMin);
  }

  _ampToY(a) {
    const PADY = 10, H = this._ampCanvas.height;
    return PADY + (1 - a / this._amp.ampTop) * (H - 2 * PADY);
  }

  _yToAmp(y) {
    const PADY = 10, H = this._ampCanvas.height;
    return (1 - (y - PADY) / (H - 2 * PADY)) * this._amp.ampTop;
  }
}