Add keyboard markers, shiftable sliders

[rbdr/lissajous] / lib / systems / amplitude_adjuster.js

import { System } from '@serpentity/serpentity';
import Ample from '../nodes/ample';
import { settingsContainer, slider } from '../factories/ui';

const internals = {
  symbols: {
    a: '𝛢',
    b: '𝛣',
    c: '𝛧'
  }
};

export default class AmplitudeAdjuster extends System {

  constructor(container) {

    super();
    this.container = container;
  }

  added(engine){

    this.nodes = engine.getNodes(Ample);
    this.adjusterContainer = settingsContainer({
      id: 'amplitude-adjuster',
      label: 'Amplitude'
    });

    let i = 0;
    for (const node of this.nodes) {
      const nodeElement = settingsContainer({
        id: `amplitude-adjuster-${i}`,
        label: `ɣ${i + 1}`,
        level: 3
      });

      ['a', 'b', 'c'].forEach(key => {
        nodeElement.appendChild(slider({
          id: `amplitude-adjuster-${i}-slider-${key}`,
          min: '0',
          max: '1',
          step: '0.01',
          label: internals.symbols[key],
          className: `amplitude`,
          get: () => node.amplitude[key].toString(),
          set: (value) => (node.amplitude[key] = parseFloat(value))
        }));
      });

      this.adjusterContainer.appendChild(nodeElement);
      ++i;
    }

    this.container.appendChild(this.adjusterContainer);
  }

  removed(){

    this.container.removeChild(this.adjusterContainer);
    delete this.adjusterContainer;
    delete this.nodes;
  }

  update(){}
};