_keyboard.svg

_vex_note_main.js

import "./_vexflow-4_2_6.js";

export function main () {
  runVex();
}

export function runVex() {
  const {
    Factory,
    Renderer,
    Stave,
    Voice,
    Formatter,
    EasyScore,
  } = Vex.Flow;
  
  const SIZE       = 120;
  const SCALE      = 2;
  const STAVE_VPAD = 0;
  const STAVE_HPAD = 24;
  const HSIZE      = SIZE - 2 * STAVE_HPAD;
  // Create an SVG renderer and attach it to the DIV element named "boo".
  const div       = document.getElementById("output");
  const back      = document.querySelector('.back');
  const hide      = document.querySelector('.hidenote');


  // needs to be run before Vex for card type 2
  const octave = note_string == "" ? "??" : note_string[1];

  const octaveElem = document.querySelector("#octave");

  if (octaveElem) {
    octaveElem.innerText = !octaveElem.classList.contains('hide')
                         || (back && back.contains(octaveElem))
                         ? octave
                         : "??";
  }

  if (div == null) { return; }

  const renderer  = new Renderer(div, Renderer.Backends.SVG);
  const vf        = new Factory({renderer:renderer});
  const score     = vf.EasyScore();
  var   formatter = new Formatter();

  const show = !div.classList.contains('hidenote')
       || (back && back.contains(div))
       && note_string != "";
  
  const clef = note_string == ""  ? "treble" :
               note_string[1] > 3 ? "treble" :
              "bass";

  const context = renderer.getContext();
  
  // Configure the rendering context.
  
  renderer.resize(SCALE * SIZE, SCALE * SIZE + 2 * STAVE_VPAD);
  context.scale(SCALE, SCALE);

  const notes = score.notes(note_string, {clef: clef});
  
  notes.forEach(n => n.setCenterAlignment(true));
  
  const voices = [
    score.voice(notes)
  ];

  const stave = new Stave(STAVE_HPAD, STAVE_VPAD, HSIZE);
  if (show) { stave.setClef(clef); };
  stave.setContext(context).draw();

  if (show) {
    formatter = formatter.joinVoices(voices);
    formatter.format(voices, STAVE_HPAD / 2);
    voices.forEach(v => v.draw(context, stave));
  }
}

export function changeRectColor() {
  const img_obj = document.getElementById("keyboard_obj");
  const color = window.getComputedStyle(img_obj)
                    .getPropertyValue('color');
  const notes = img_obj.contentDocument.querySelectorAll(".note_" + note_letter);
  notes.forEach( (note) => { note.style.fill = color; } );
}

export function debug(str) {
  let el = document.getElementById("debug");
  if (el) {el.innerText = "debug: " + str;}
}