Source

vendors/P5/Drawer.js

  1. // File imports
  2. import { getNumberOfLedgerLines, getOctave } from "../AlphaTab/ledgerLines";
  4. /**
  5.  * @class
  6.  * @classdesc Keeps track of current note and where to draw it on the screen along with special information such as number of extra ledger lines
  7.  * @category P5
  8.  * @author Daniel Griessler <dgriessler20@gmail.com>
  9.  */
  10. class Drawer {
  11.     /**
  12.      * Creates a new Drawer setting up storage of the most recent midi note and information about how to draw it on the screen
  13.      * @param {Number} topLine Height of the top line of the selected part to sing
  14.      * @param {Number} distanceBetweenLines Distance between lines in the staff
  15.      */
  16.     constructor(topLine, distanceBetweenLines, baseOctave) {
  17.         this.topLine = topLine;
  18.         this.distanceBetweenLines = distanceBetweenLines;
  19.         // stores the height of the lowest line of the staff being sung
  20.         this.firstLine = this.topLine + this.distanceBetweenLines * 5;
  21.         // Values >= selected lower limit and <= selected upper limit don't need extra ledger lines
  22.         this.lowerLimit = 61; // 61 = C4#
  23.         this.upperLimit = 81; // 81 = A5
  24.         this.lowerLimit2 = 40; // 40 = E2
  25.         this.upperLimit2 = 60; // 60 = C4
  26.         this.note = new Note(60);
  27.         this.belowOrAbove = 0;
  28.         this.noteHeight = 0;
  29.         this.baseOctave = baseOctave;
  30.         this.updateNote(this.note.midiVal);
  31.     }
  33.     /**
  34.      * Sets the stored height of the top line, the distance between ledger lines, and the base octave
  35.      * @param {number} topLine The height of the top ledger line
  36.      * @param {number} distanceBetweenLines The y distance between ledger lines
  37.      * @param {number} baseOctave The base octave of the current clef
  38.      */
  39.     setTopLineAndDistanceBetween(topLine, distanceBetweenLines, baseOctave) {
  40.         this.topLine = topLine + 1;
  41.         this.distanceBetweenLines = distanceBetweenLines;
  42.         // stores the height of the lowest line of the staff being sung
  43.         this.firstLine =
  44.             this.topLine +
  45.             this.distanceBetweenLines * (baseOctave === 4 ? 5 : 6);
  46.         this.baseOctave = baseOctave;
  47.     }
  49.     /**
  50.      * Sets the base octave
  51.      * @param {number} baseOctave The base octave of the current clef
  52.      */
  53.     setBaseOctave(baseOctave) {
  54.         this.baseOctave = baseOctave;
  55.     }
  57.     /**
  58.      * Updates the Drawer to the new provided note
  59.      * @param {Number} note New midi value to store. Provide a -1 as a sentinel value for silence
  60.      */
  61.     updateNote(note) {
  62.         this.note.updateNote(note);
  63.         this.getHeightOfNote();
  64.         this.getExtraFeatures();
  65.     }
  67.     /**
  68.      * Updates the height of the note based on its midi value
  69.      */
  70.     getHeightOfNote() {
  71.         // -1 is a sentinel value for silence which is assigned a default height
  72.         if (this.note.midiVal === -1) {
  73.             this.noteHeight = this.firstLine;
  74.             return;
  75.         }
  76.         // Calculating the height of a note relies on the cycle in musical notes that occurs between octaves
  77.         // This calculates what the height of the note should be based on the first line
  78.         const heightMod = [0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6];
  80.         // based on the starting note subtract the base octave since the start note is in that given octave
  81.         let octaveMod = this.note.octave - this.baseOctave;
  82.         let value = heightMod[this.note.midiVal % heightMod.length];
  84.         // Includes bump to jump between octaves
  85.         let totalMod = value + octaveMod * 7;
  87.         // final height includes division by 2 because each value in the totalMod is distanceBetweenLines/2
  88.         this.noteHeight =
  89.             this.firstLine - (totalMod * this.distanceBetweenLines) / 2;
  90.     }
  92.     /**
  93.      * Gets the extra features of a note including how many ledger lines to add
  94.      */
  95.     getExtraFeatures() {
  96.         // -1 is a sentinel value for silence which has no ledger lines
  97.         if (this.note.midiVal === -1) {
  98.             this.belowOrAbove = 0;
  99.             return;
  100.         }
  102.         // // similar to note height, there's a cycle between octaves for ledger lines
  103.         // const aboveBelowMod = [1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4];
  105.         // sets up base if ledger lines are even needed. base == 0 means no ledger lines
  106.         // base < 0 means they go below the staff, base > 0 means they go above the staff
  107.         let base = 0;
  108.         let actualUpperLimit;
  109.         let actualLowerLimit;
  110.         if (this.baseOctave === 4) {
  111.             actualUpperLimit = this.upperLimit;
  112.             actualLowerLimit = this.lowerLimit;
  113.         } else {
  114.             actualUpperLimit = this.upperLimit2;
  115.             actualLowerLimit = this.lowerLimit2;
  116.         }
  117.         if (this.note.midiVal >= actualUpperLimit) {
  118.             base = actualUpperLimit;
  119.         } else if (this.note.midiVal <= actualLowerLimit) {
  120.             base = -1 * actualLowerLimit;
  121.         }
  123.         // If need ledger lines, then calculate how many are required
  124.         if (base !== 0) {
  125.             let direction;
  126.             let start;
  127.             if (base > 0) {
  128.                 direction = "up";
  129.                 start = this.baseOctave === 4 ? "a" : "c";
  130.             } else {
  131.                 direction = "down";
  132.                 start = this.baseOctave === 4 ? "c" : "e";
  133.             }
  135.             // LedgerLines loop every 24 notes so if more than 24 then add 7 octaves
  136.             let difference = Math.abs(Math.abs(base) - this.note.midiVal);
  137.             let loopAdd = 7 * Math.floor(difference / 24);
  138.             this.belowOrAbove =
  139.                 getNumberOfLedgerLines(this.note.midiVal, direction, start) +
  140.                 loopAdd;
  142.             // Signals to draw ledger lines below staff
  143.             if (base < 0) {
  144.                 this.belowOrAbove *= -1;
  145.             }
  146.         } else {
  147.             this.belowOrAbove = 0;
  148.         }
  149.     }
  150. }
  152. /**
  153.  * @class
  154.  * @category P5
  155.  * @classdesc Stores midi value as its character representation including its octave and if it is sharp
  156.  */
  157. class Note {
  158.     /**
  159.      * Constructs a Note from a provided a given midiVal and converts it to a string which can be accessed
  160.      * @param {Number} midiVal Midi value of note to store
  161.      */
  162.     constructor(midiVal) {
  163.         this.updateNote(midiVal);
  164.     }
  166.     /**
  167.      * Updates the note stored to the new note
  168.      * @param {Number} note New midi value to store
  169.      */
  170.     updateNote(note) {
  171.         // No point in updating if the midi value matches the current one
  172.         if (this.midiVal && note === this.midiVal) {
  173.             return;
  174.         }
  176.         this.midiVal = note;
  177.         const noteText = this.numToNote();
  178.         this.charPart = noteText.charPart;
  179.         this.octave = noteText.octave;
  181.         // relies on the char part with being a single letter like G or two letters which is the note and # for sharp
  182.         this.isSharp = this.charPart.length === 2;
  183.     }
  185.     /**
  186.      * @typedef {object} NotePackage
  187.      * @memberof Drawer
  188.      * @property {string} charPart The character part of the note
  189.      * @property {number} octave The octave of the note
  190.      */
  192.     /**
  193.      * Converts the stored midi value to its character representation
  194.      * @returns {NotePackage} A tuple with the character part and the octave
  195.      */
  196.     numToNote() {
  197.         let charPart;
  198.         let octave;
  200.         // -1 is a sentinel value for silence which has no char part or octave
  201.         if (this.midiVal === -1) {
  202.             charPart = "-";
  203.             octave = "";
  204.         } else {
  205.             const letters = [
  206.                 "C",
  207.                 "C#",
  208.                 "D",
  209.                 "D#",
  210.                 "E",
  211.                 "F",
  212.                 "F#",
  213.                 "G",
  214.                 "G#",
  215.                 "A",
  216.                 "A#",
  217.                 "B",
  218.             ];
  219.             charPart = letters[this.midiVal % letters.length];
  220.             octave = getOctave(this.midiVal);
  221.         }
  222.         return { charPart, octave };
  223.     }
  224. }
  226. export default Drawer;