From 2cc1271660c842dea871794763cf70d785b5fe61 Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Mon, 8 Feb 2021 12:03:25 +0530 Subject: [PATCH 1/4] ES6 port --- js/widgets/musickeyboard.js | 620 +++++++++++++++++++----------------- 1 file changed, 331 insertions(+), 289 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 66f3011b48..a83863ee4d 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -11,51 +11,62 @@ // License along with this library; if not, write to the Free Software // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA -function MusicKeyboard() { - const FAKEBLOCKNUMBER = 100000; - const BUTTONDIVWIDTH = 535; // 5 buttons - const OUTERWINDOWWIDTH = 758; - const INNERWINDOWWIDTH = 50; - const BUTTONSIZE = 53; - const ICONSIZE = 32; +/* + global docById, platformColor, FIXEDSOLFEGE1, SHARP, FLAT, last, Singer, _, + noteToFrequency, EIGHTHNOTEWIDTH, MATRIXSOLFEHEIGHT, MATRIXSOLFEWIDTH, + i18nSolfege, toFraction, wheelnav, slicePath, blocks, getNote, PREVIEWVOLUME, + DEFAULTVOICE, PITCHES3, SOLFEGENAMES, SOLFEGECONVERSIONTABLE, NOTESSHARP, + NOTESFLAT, logo, convertFromSolfege, PITCHES2, PITCHES + */ + +/* exported MusicKeyboard */ + +class MusicKeyboard { + static FAKEBLOCKNUMBER = 100000; + static BUTTONDIVWIDTH = 535; // 5 buttons + static OUTERWINDOWWIDTH = 758; + static INNERWINDOWWIDTH = 50; + static BUTTONSIZE = 53; + static ICONSIZE = 32; // Mapping between keycodes and virtual keyboard - const BLACKKEYS = [87, 69, 82, 84, 89, 85, 73, 79]; - const WHITEKEYS = [65, 83, 68, 70, 71, 72, 74, 75, 76]; - const SPACE = 32; - - const saveOnKeyDown = document.onkeydown; - const saveOnKeyUp = document.onkeyup; - - const w = window.innerWidth; - this._cellScale = w / 1200; - - const beginnerMode = localStorage.beginnerMode; + static BLACKKEYS = [87, 69, 82, 84, 89, 85, 73, 79]; + static WHITEKEYS = [65, 83, 68, 70, 71, 72, 74, 75, 76]; + static SPACE = 32; + + static saveOnKeyDown = document.onkeydown; + static saveOnKeyUp = document.onkeyup; + static beginnerMode = localStorage.beginnerMode; + static unit = MusicKeyboard.beginnerMode === "true" ? 8 : 16; + static selectedNotes = []; + + constructor() { + const w = window.innerWidth; + this._cellScale = w / 1200; - const unit = beginnerMode === "true" ? 8 : 16; - this._stopOrCloseClicked = false; - this.playingNow = false; + this._stopOrCloseClicked = false; + this.playingNow = false; - this.instruments = []; - this.noteNames = []; - this.octaves = []; - this.keyboardShown = true; - this.layout = []; - this.idContainer = []; - this.tick = false; - this.meterArgs = [4, 1 / 4]; + this.instruments = []; + this.noteNames = []; + this.octaves = []; + this.keyboardShown = true; + this.layout = []; + this.idContainer = []; + this.tick = false; + this.meterArgs = [4, 1 / 4]; - // Map between keyboard element ids and the note associated with the key. - this.noteMapper = {}; - this.blockNumberMapper = {}; - this.instrumentMapper = {}; - let selectedNotes = []; + // Map between keyboard element ids and the note associated with the key. + this.noteMapper = {}; + this.blockNumberMapper = {}; + this.instrumentMapper = {}; - this._rowBlocks = []; + this._rowBlocks = []; - // Each element in the array is [start time, note, id, duration, voice]. - this._notesPlayed = []; + // Each element in the array is [start time, note, id, duration, voice]. + this._notesPlayed = []; + } - this.addRowBlock = (rowBlock) => { + addRowBlock(rowBlock) { // In case there is a repeat block, use a unique block number // for each instance. while (this._rowBlocks.indexOf(rowBlock) !== -1) { @@ -63,11 +74,11 @@ function MusicKeyboard() { } this._rowBlocks.push(rowBlock); - }; + } - this.processSelected = () => { + processSelected() { if (this._notesPlayed.length === 0) { - selectedNotes = []; + MusicKeyboard.selectedNotes = []; return; } @@ -79,7 +90,7 @@ function MusicKeyboard() { // selectedNotes is used for playback. Coincident notes are // grouped together. It is built from notesPlayed. - selectedNotes = [ + MusicKeyboard.selectedNotes = [ { noteOctave: [this._notesPlayed[0].noteOctave], objId: [this._notesPlayed[0].objId], @@ -96,17 +107,17 @@ function MusicKeyboard() { i < this._notesPlayed.length && this._notesPlayed[i].startTime === this._notesPlayed[i - 1].startTime ) { - selectedNotes[j].noteOctave.push(this._notesPlayed[i].noteOctave); - selectedNotes[j].objId.push(this._notesPlayed[i].objId); - selectedNotes[j].duration.push(this._notesPlayed[i].duration); - selectedNotes[j].voice.push(this._notesPlayed[i].voice); - selectedNotes[j].blockNumber.push(this._notesPlayed[i].blockNumber); + MusicKeyboard.selectedNotes[j].noteOctave.push(this._notesPlayed[i].noteOctave); + MusicKeyboard.selectedNotes[j].objId.push(this._notesPlayed[i].objId); + MusicKeyboard.selectedNotes[j].duration.push(this._notesPlayed[i].duration); + MusicKeyboard.selectedNotes[j].voice.push(this._notesPlayed[i].voice); + MusicKeyboard.selectedNotes[j].blockNumber.push(this._notesPlayed[i].blockNumber); i++; } j++; if (i < this._notesPlayed.length) { - selectedNotes.push({ + MusicKeyboard.selectedNotes.push({ noteOctave: [this._notesPlayed[i].noteOctave], objId: [this._notesPlayed[i].objId], duration: [this._notesPlayed[i].duration], @@ -116,10 +127,9 @@ function MusicKeyboard() { }); } } - }; + } - this.addKeyboardShortcuts = function () { - // ; + addKeyboardShortcuts() { let duration = 0; const startTime = {}; const temp1 = {}; @@ -127,20 +137,20 @@ function MusicKeyboard() { const current = new Set(); const __startNote = (event) => { - let i, id, ele; - if (WHITEKEYS.indexOf(event.keyCode) !== -1) { - i = WHITEKEYS.indexOf(event.keyCode); + let i, id; + if (MusicKeyboard.WHITEKEYS.indexOf(event.keyCode) !== -1) { + i = MusicKeyboard.WHITEKEYS.indexOf(event.keyCode); id = "whiteRow" + i.toString(); - } else if (BLACKKEYS.indexOf(event.keyCode) !== -1) { - i = BLACKKEYS.indexOf(event.keyCode); + } else if (MusicKeyboard.BLACKKEYS.indexOf(event.keyCode) !== -1) { + i = MusicKeyboard.BLACKKEYS.indexOf(event.keyCode); id = "blackRow" + i.toString(); - } else if (SPACE == event.keyCode) { + } else if (MusicKeyboard.SPACE == event.keyCode) { id = "rest"; } - ele = docById(id); + const ele = docById(id); if (!(id in startTime)) { - startDate = new Date(); + const startDate = new Date(); startTime[id] = startDate.getTime(); } @@ -167,13 +177,17 @@ function MusicKeyboard() { this._logo.synth.trigger(0, temp2[id], 1, this.instrumentMapper[id], null, null); if (this.tick) { - restDuration = (startTime[id] - this.endTime) / 1000.0; + let restDuration = (startTime[id] - this.endTime) / 1000.0; restDuration /= 60; // time in minutes restDuration *= this.bpm; restDuration *= this.meterArgs[1]; - restDuration = parseFloat((Math.round(restDuration * unit) / unit).toFixed(4)); + restDuration = parseFloat( + ( + Math.round(restDuration * MusicKeyboard.unit) / MusicKeyboard.unit + ).toFixed(4) + ); if (restDuration === 0) { restDuration = 0; @@ -191,7 +205,7 @@ function MusicKeyboard() { } }; - const __keyboarddown = function (event) { + const __keyboarddown = (event) => { if (current.has(event.keyCode)) return; __startNote(event); @@ -201,19 +215,19 @@ function MusicKeyboard() { }; const __endNote = (event) => { - let i, id, ele, no; - if (WHITEKEYS.indexOf(event.keyCode) !== -1) { - i = WHITEKEYS.indexOf(event.keyCode); + let i, id; + if (MusicKeyboard.WHITEKEYS.indexOf(event.keyCode) !== -1) { + i = MusicKeyboard.WHITEKEYS.indexOf(event.keyCode); id = "whiteRow" + i.toString(); - } else if (BLACKKEYS.indexOf(event.keyCode) !== -1) { - i = BLACKKEYS.indexOf(event.keyCode); + } else if (MusicKeyboard.BLACKKEYS.indexOf(event.keyCode) !== -1) { + i = MusicKeyboard.BLACKKEYS.indexOf(event.keyCode); id = "blackRow" + i.toString(); - } else if (SPACE == event.keyCode) { + } else if (MusicKeyboard.SPACE == event.keyCode) { id = "rest"; } - ele = docById(id); - newDate = new Date(); + const ele = docById(id); + const newDate = new Date(); this.endTime = newDate.getTime(); duration = (this.endTime - startTime[id]) / 1000.0; @@ -224,16 +238,16 @@ function MusicKeyboard() { ele.style.backgroundColor = "white"; } - no = ele.getAttribute("alt").split("__")[2]; - duration /= 60; duration *= this.bpm; duration *= this.meterArgs[1]; - duration = parseFloat((Math.round(duration * unit) / unit).toFixed(4)); + duration = parseFloat( + (Math.round(duration * MusicKeyboard.unit) / MusicKeyboard.unit).toFixed(4) + ); if (duration === 0) { - duration = 1 / unit; + duration = 1 / MusicKeyboard.unit; } else if (duration < 0) { duration = -duration; } @@ -263,7 +277,7 @@ function MusicKeyboard() { } }; - const __keyboardup = function (event) { + const __keyboardup = (event) => { current.delete(event.keyCode); __endNote(event); //event.preventDefault(); @@ -271,9 +285,9 @@ function MusicKeyboard() { document.onkeydown = __keyboarddown; document.onkeyup = __keyboardup; - }; + } - this.loadHandler = function (element, i, blockNumber) { + loadHandler(element, i, blockNumber) { const temp1 = this.layout[i].noteName; let temp2; if (temp1 === "hertz") { @@ -308,8 +322,8 @@ function MusicKeyboard() { ); }; - element.onmousedown = function () { - __startNote(this); + element.onmousedown = () => { + __startNote(element); }; const __endNote = (element) => { @@ -328,7 +342,7 @@ function MusicKeyboard() { this.instrumentMapper[element.id], this.noteMapper[element.id] ); - if (beginnerMode === "true") { + if (MusicKeyboard.beginnerMode === "true") { duration = parseFloat((Math.round(duration * 8) / 8).toFixed(3)); } else { duration = parseFloat((Math.round(duration * 16) / 16).toFixed(4)); @@ -351,22 +365,21 @@ function MusicKeyboard() { this._createTable(); }; - element.onmouseout = function () { + element.onmouseout = () => { // __endNote(); }; - element.onmouseup = function () { - __endNote(this); + element.onmouseup = () => { + __endNote(element); }; - }; + } - this.init = function (logo) { + init(logo) { this._logo = logo; this.tick = false; this.playingNow = false; let w = window.innerWidth; this._cellScale = w / 1200; - const iconSize = ICONSIZE * this._cellScale; const widgetWindow = window.widgetWindows.windowFor(this, "music keyboard"); this.widgetWindow = widgetWindow; @@ -378,8 +391,8 @@ function MusicKeyboard() { widgetWindow.onclose = () => { let myNode; - document.onkeydown = saveOnKeyDown; - document.onkeyup = saveOnKeyUp; + document.onkeydown = MusicKeyboard.saveOnKeyDown; + document.onkeyup = MusicKeyboard.saveOnKeyUp; if (document.getElementById("keyboardHolder2")) { document.getElementById("keyboardHolder2").style.display = "none"; @@ -395,13 +408,16 @@ function MusicKeyboard() { myNode.innerHTML = ""; } - selected = []; - selectedNotes = []; + MusicKeyboard.selectedNotes = []; if (this.loopTick) this.loopTick.stop(); widgetWindow.destroy(); }; - this.playButton = widgetWindow.addButton("play-button.svg", ICONSIZE, _("Play")); + this.playButton = widgetWindow.addButton( + "play-button.svg", + MusicKeyboard.ICONSIZE, + _("Play") + ); this.playButton.onclick = () => { this._logo.turtleDelay = 0; @@ -409,28 +425,40 @@ function MusicKeyboard() { this.playAll(); }; - widgetWindow.addButton("export-chunk.svg", ICONSIZE, _("Save")).onclick = () => { + widgetWindow.addButton( + "export-chunk.svg", + MusicKeyboard.ICONSIZE, + _("Save") + ).onclick = () => { this._save(); }; - widgetWindow.addButton("erase-button.svg", ICONSIZE, _("Clear")).onclick = () => { + widgetWindow.addButton( + "erase-button.svg", + MusicKeyboard.ICONSIZE, + _("Clear") + ).onclick = () => { this._notesPlayed = []; - selectedNotes = []; + MusicKeyboard.selectedNotes = []; // if (!that.keyboardShown) { this._createTable(); // } }; - widgetWindow.addButton("add2.svg", ICONSIZE, _("Add note")).onclick = () => { + widgetWindow.addButton("add2.svg", MusicKeyboard.ICONSIZE, _("Add note")).onclick = () => { this._createAddRowPieSubmenu(); }; - this.midiButton = widgetWindow.addButton("midi.svg", ICONSIZE, _("MIDI")); + this.midiButton = widgetWindow.addButton("midi.svg", MusicKeyboard.ICONSIZE, _("MIDI")); this.midiButton.onclick = () => { this.doMIDI(); }; - this.tickButton = widgetWindow.addButton("metronome.svg", ICONSIZE, _("Metronome")); + this.tickButton = widgetWindow.addButton( + "metronome.svg", + MusicKeyboard.ICONSIZE, + _("Metronome") + ); this.tickButton.onclick = () => { if (this.tick) { this.tick = false; @@ -469,13 +497,13 @@ function MusicKeyboard() { this._createTable(); w = Math.max( - Math.min(window.innerWidth, this._cellScale * OUTERWINDOWWIDTH - 20), - BUTTONDIVWIDTH + Math.min(window.innerWidth, this._cellScale * MusicKeyboard.OUTERWINDOWWIDTH - 20), + MusicKeyboard.BUTTONDIVWIDTH ); //Change widget size on fullscreen mode, else //revert back to original size on unfullscreen mode - widgetWindow.onmaximize = function () { + widgetWindow.onmaximize = () => { if (widgetWindow._maximized) { widgetWindow.getWidgetBody().style.position = "absolute"; widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; @@ -486,7 +514,7 @@ function MusicKeyboard() { docById("mkbInnerDiv").style.width = "calc(200vh - 64px)"; } catch (e) { // Does this happen? - console.debug("Error calculating InnerDiv width"); + // console.debug("Error calculating InnerDiv width"); } widgetWindow.getWidgetBody().style.left = "70px"; @@ -500,10 +528,10 @@ function MusicKeyboard() { }; widgetWindow.sendToCenter(); - }; + } - this.playAll = function () { - if (selectedNotes.length <= 0) { + playAll() { + if (MusicKeyboard.selectedNotes.length <= 0) { return; } @@ -519,26 +547,26 @@ function MusicKeyboard() { '" alt="' + _("stop") + '" height="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" width="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" vertical-align="middle" align-content="center">  '; - if (selectedNotes.length < 1) { + if (MusicKeyboard.selectedNotes.length < 1) { return; } const notes = []; - let ele, zx, res, cell, maxWidth; - for (let i = 0; i < selectedNotes[0].noteOctave.length; i++) { - if (this.keyboardShown && selectedNotes[0].objId[0] !== null) { - ele = docById(selectedNotes[0].objId[i]); + let ele, zx, res, cell; + for (let i = 0; i < MusicKeyboard.selectedNotes[0].noteOctave.length; i++) { + if (this.keyboardShown && MusicKeyboard.selectedNotes[0].objId[0] !== null) { + ele = docById(MusicKeyboard.selectedNotes[0].objId[i]); if (ele !== null) { ele.style.backgroundColor = "lightgrey"; } } - zx = selectedNotes[0].noteOctave[i]; + zx = MusicKeyboard.selectedNotes[0].noteOctave[i]; res = zx; if (typeof zx === "string") { res = zx.replace(SHARP, "#").replace(FLAT, "b"); @@ -553,8 +581,12 @@ function MusicKeyboard() { } this._stopOrCloseClicked = false; - this._playChord(notes, selectedNotes[0].duration, selectedNotes[0].voice); - maxWidth = Math.max.apply(Math, selectedNotes[0].duration); + this._playChord( + notes, + MusicKeyboard.selectedNotes[0].duration, + MusicKeyboard.selectedNotes[0].voice + ); + const maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[0].duration); this.playOne(1, maxWidth, playButtonCell); } else { if (!this.keyboardShown) { @@ -572,17 +604,17 @@ function MusicKeyboard() { '" alt="' + _("Play") + '" height="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" width="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" vertical-align="middle" align-content="center">  '; } - }; + } - this.playOne = function (counter, time, playButtonCell) { + playOne(counter, time, playButtonCell) { setTimeout(() => { - let cell, eleid, ele, notes, id, zx, res, maxWidth; - if (counter < selectedNotes.length) { + let cell, eleid, ele, notes, zx, res, maxWidth; + if (counter < MusicKeyboard.selectedNotes.length) { if (this._stopOrCloseClicked) { return; } @@ -592,9 +624,16 @@ function MusicKeyboard() { cell.style.backgroundColor = platformColor.selectorBackground; } - if (this.keyboardShown && selectedNotes[counter - 1].objId[0] !== null) { - for (let i = 0; i < selectedNotes[counter - 1].noteOctave.length; i++) { - eleid = selectedNotes[counter - 1].objId[i]; + if ( + this.keyboardShown && + MusicKeyboard.selectedNotes[counter - 1].objId[0] !== null + ) { + for ( + let i = 0; + i < MusicKeyboard.selectedNotes[counter - 1].noteOctave.length; + i++ + ) { + eleid = MusicKeyboard.selectedNotes[counter - 1].objId[i]; ele = docById(eleid); if (eleid.includes("blackRow")) { ele.style.backgroundColor = "black"; @@ -605,19 +644,18 @@ function MusicKeyboard() { } notes = []; - for (let i = 0; i < selectedNotes[counter].noteOctave.length; i++) { - if (this.keyboardShown && selectedNotes[counter].objId[0] !== null) { - id = this.idContainer.findIndex((ele) => { - return ele[1] === selectedNotes[counter].objId[i]; - }); - - ele = docById(selectedNotes[counter].objId[i]); + for (let i = 0; i < MusicKeyboard.selectedNotes[counter].noteOctave.length; i++) { + if ( + this.keyboardShown && + MusicKeyboard.selectedNotes[counter].objId[0] !== null + ) { + ele = docById(MusicKeyboard.selectedNotes[counter].objId[i]); if (ele !== null) { ele.style.backgroundColor = "lightgrey"; } } - zx = selectedNotes[counter].noteOctave[i]; + zx = MusicKeyboard.selectedNotes[counter].noteOctave[i]; res = zx; if (typeof zx === "string") { res = zx.replace(SHARP, "#").replace(FLAT, "b"); @@ -628,12 +666,12 @@ function MusicKeyboard() { if (this.playingNow) { this._playChord( notes, - selectedNotes[counter].duration, - selectedNotes[counter].voice + MusicKeyboard.selectedNotes[counter].duration, + MusicKeyboard.selectedNotes[counter].voice ); } - maxWidth = Math.max.apply(Math, selectedNotes[counter].duration); + maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[counter].duration); this.playOne(counter + 1, maxWidth, playButtonCell); } else { playButtonCell.innerHTML = @@ -644,9 +682,9 @@ function MusicKeyboard() { '" alt="' + _("Play") + '" height="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" width="' + - ICONSIZE + + MusicKeyboard.ICONSIZE + '" vertical-align="middle" align-content="center">  '; this.playingNow = false; if (!this.keyboardShown) { @@ -656,9 +694,9 @@ function MusicKeyboard() { } } }, time * 1000 + 125); - }; + } - this._playChord = (notes, noteValue, instruments) => { + _playChord(notes, noteValue, instruments) { if (notes[0] === "R") { return; } @@ -684,9 +722,9 @@ function MusicKeyboard() { this._logo.synth.trigger(0, notes[3], noteValue[0], instruments[3], null, null); }, 1); } - }; + } - this._keysLayout = function () { + _keysLayout() { this.layout = []; const sortableList = []; for (let i = 0; i < this.noteNames.length; i++) { @@ -720,7 +758,7 @@ function MusicKeyboard() { } } - let sortedList = sortableList.sort(function (a, b) { + let sortedList = sortableList.sort((a, b) => { return a.frequency - b.frequency; }); @@ -747,7 +785,7 @@ function MusicKeyboard() { removeBlock(i); } - const newList = fillChromaticGaps(sortedList); + const newList = this.fillChromaticGaps(sortedList); for (let i = 0; i < newList.length; i++) { this.layout.push({ @@ -757,17 +795,17 @@ function MusicKeyboard() { voice: newList[i].voice }); } - }; + } - this._setNotes = function (colIndex, playNote) { + _setNotes(colIndex, playNote) { const start = docById("cells-" + colIndex).getAttribute("start"); - this._notesPlayed = this._notesPlayed.filter(function (ele) { + this._notesPlayed = this._notesPlayed.filter((ele) => { return ele.startTime != parseInt(start); }); // Look for each cell that is marked in this column. - silence = true; + let silence = true; let row, cell, ele, dur; for (let j = 0; j < this.layout.length; j++) { row = docById("mkb" + j); @@ -787,16 +825,16 @@ function MusicKeyboard() { objId: null, duration: parseFloat(dur) }); - this._notesPlayed.sort(function (a, b) { + this._notesPlayed.sort((a, b) => { return a.startTime - b.startTime; }); } - }; + } - this._setNoteCell = function (j, colIndex, start, playNote) { + _setNoteCell(j, colIndex, start, playNote) { const n = this.layout.length; const temp1 = this.layout[n - j - 1].noteName; - let temp2, ele; + let temp2; if (temp1 === "hertz") { temp2 = this.layout[n - j - 1].noteOctave; } else if (temp1 in FIXEDSOLFEGE1) { @@ -808,7 +846,7 @@ function MusicKeyboard() { temp1.replace(SHARP, "#").replace(FLAT, "b") + this.layout[n - j - 1].noteOctave; } - ele = docById(j + ":" + colIndex); + const ele = docById(j + ":" + colIndex); this._notesPlayed.push({ startTime: parseInt(start), noteOctave: temp2, @@ -818,7 +856,7 @@ function MusicKeyboard() { voice: this.layout[n - j - 1].voice }); - this._notesPlayed.sort(function (a, b) { + this._notesPlayed.sort((a, b) => { return a.startTime - b.startTime; }); @@ -832,13 +870,13 @@ function MusicKeyboard() { null ); } - }; + } - this.makeClickable = function () { + makeClickable() { const rowNote = docById("mkbNoteDurationRow"); let cell; - for (let i = 0; i < selectedNotes.length; i++) { + for (let i = 0; i < MusicKeyboard.selectedNotes.length; i++) { cell = rowNote.cells[i]; cell.onclick = (event) => { @@ -864,11 +902,10 @@ function MusicKeyboard() { cell.onmousedown = (e) => { cell = e.target; - let obj, i, j; isMouseDown = true; - obj = cell.id.split(":"); - i = Number(obj[0]); - j = Number(obj[1]); + const obj = cell.id.split(":"); + // const i = Number(obj[0]); + const j = Number(obj[1]); if (cell.style.backgroundColor === "black") { cell.style.backgroundColor = cell.getAttribute("cellColor"); this._setNotes(j, false); @@ -879,10 +916,9 @@ function MusicKeyboard() { }; cell.onmouseover = () => { - let obj, i, j; - obj = cell.id.split(":"); - i = Number(obj[0]); - j = Number(obj[1]); + const obj = cell.id.split(":"); + // const i = Number(obj[0]); + const j = Number(obj[1]); if (isMouseDown) { if (cell.style.backgroundColor === "black") { cell.style.backgroundColor = cell.getAttribute("cellColor"); @@ -894,18 +930,18 @@ function MusicKeyboard() { } }; - cell.onmouseup = function () { + cell.onmouseup = () => { isMouseDown = false; }; } } - }; + } - this._noteWidth = function (noteValue) { + _noteWidth(noteValue) { return Math.max(Math.floor(EIGHTHNOTEWIDTH * (8 * noteValue) * this._cellScale), 15); - }; + } - this._createTable = function () { + _createTable() { this.processSelected(); const mkbTableDiv = this.keyTable; mkbTableDiv.style.display = "inline"; @@ -934,7 +970,7 @@ function MusicKeyboard() { docById("mkbInnerDiv").style.marginLeft = 0; const mkbTable = docById("mkbTable"); - if (selectedNotes.length < 1) { + if (MusicKeyboard.selectedNotes.length < 1) { outerDiv.innerHTML = ""; return; } @@ -1010,10 +1046,11 @@ function MusicKeyboard() { '
'; const cellColor = "lightgrey"; let maxWidth, noteMaxWidth, row, ind, dur; - for (let j = 0; j < selectedNotes.length; j++) { - maxWidth = Math.max.apply(Math, selectedNotes[j].duration); + for (let j = 0; j < MusicKeyboard.selectedNotes.length; j++) { + maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration); noteMaxWidth = - this._noteWidth(Math.max.apply(Math, selectedNotes[j].duration)) * 2 + "px"; + this._noteWidth(Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration)) * 2 + + "px"; n = this.layout.length; for (let i = 0; i < this.layout.length; i++) { row = docById("mkb" + i); @@ -1024,10 +1061,14 @@ function MusicKeyboard() { cell.style.maxWidth = cell.style.width; if ( - selectedNotes[j].blockNumber.indexOf(this.layout[n - i - 1].blockNumber) !== -1 + MusicKeyboard.selectedNotes[j].blockNumber.indexOf( + this.layout[n - i - 1].blockNumber + ) !== -1 ) { - ind = selectedNotes[j].blockNumber.indexOf(this.layout[n - i - 1].blockNumber); - cell.setAttribute("alt", selectedNotes[j].duration[ind]); + ind = MusicKeyboard.selectedNotes[j].blockNumber.indexOf( + this.layout[n - i - 1].blockNumber + ); + cell.setAttribute("alt", MusicKeyboard.selectedNotes[j].duration[ind]); cell.style.backgroundColor = "black"; cell.style.border = "2px solid white"; cell.style.borderRadius = "10px"; @@ -1041,7 +1082,7 @@ function MusicKeyboard() { cell.setAttribute("cellColor", cellColor); } - dur = toFraction(Math.max.apply(Math, selectedNotes[j].duration)); + dur = toFraction(Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration)); row = docById("mkbNoteDurationRow"); cell = row.insertCell(); cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + 1 + "px"; @@ -1052,7 +1093,7 @@ function MusicKeyboard() { cell.style.textAlign = "center"; cell.innerHTML = dur[0].toString() + "/" + dur[1].toString(); cell.setAttribute("id", "cells-" + j); - cell.setAttribute("start", selectedNotes[j].startTime); + cell.setAttribute("start", MusicKeyboard.selectedNotes[j].startTime); cell.setAttribute("dur", maxWidth); cell.style.backgroundColor = platformColor.rhythmcellcolor; } @@ -1060,9 +1101,9 @@ function MusicKeyboard() { const innerDiv = docById("mkbInnerDiv"); innerDiv.scrollLeft = innerDiv.scrollWidth; // Force to the right. this.makeClickable(); - }; + } - this._createpiesubmenu = function (cellId, start) { + _createpiesubmenu(cellId, start) { docById("wheelDivptm").style.display = ""; this._menuWheel = new wheelnav("wheelDivptm", null, 600, 600); @@ -1226,13 +1267,13 @@ function MusicKeyboard() { docById("wheelnav-wheelDivptm-title-3").children[0].textContent = tabsLabels[j]; }; } - }; + } - this._updateDuration = function (start, duration) { + _updateDuration(start, duration) { start = parseInt(start); duration = parseInt(duration[0]) / parseInt(duration[1]); const newduration = parseFloat((Math.round(duration * 8) / 8).toFixed(3)); - this._notesPlayed = this._notesPlayed.map(function (item) { + this._notesPlayed = this._notesPlayed.map((item) => { if (item.startTime === start) { item.duration = newduration; } @@ -1240,14 +1281,14 @@ function MusicKeyboard() { return item; }); this._createTable(); - }; + } - this._addNotes = function (cellId, start, divideNoteBy) { + _addNotes(cellId, start, divideNoteBy) { start = parseInt(start); const cell = docById(cellId); const dur = cell.getAttribute("dur"); - this._notesPlayed = this._notesPlayed.reduce(function (prevValue, curValue) { + this._notesPlayed = this._notesPlayed.reduce((prevValue, curValue) => { let oldcurValue, newcurValue; if (parseInt(curValue.startTime) === start) { prevValue = prevValue.concat([curValue]); @@ -1269,25 +1310,24 @@ function MusicKeyboard() { }, []); this._createTable(); - }; + } - this._deleteNotes = function (start) { + _deleteNotes(start) { start = parseInt(start); - this._notesPlayed = this._notesPlayed.filter(function (ele) { + this._notesPlayed = this._notesPlayed.filter((ele) => { return parseInt(ele.startTime) !== start; }); this._createTable(); - }; + } - this._divideNotes = function (start, divideNoteBy) { + _divideNotes(start, divideNoteBy) { start = parseInt(start); - this._notesPlayed = this._notesPlayed.reduce(function (prevValue, curValue) { - let newcurValue, newcurValue2, oldcrValue; + this._notesPlayed = this._notesPlayed.reduce((prevValue, curValue) => { if (parseInt(curValue.startTime) === start) { - if (beginnerMode === "true") { + if (MusicKeyboard.beginnerMode === "true") { if (curValue.duration / divideNoteBy < 0.125) { return prevValue.concat([curValue]); } @@ -1297,12 +1337,12 @@ function MusicKeyboard() { } } - newcurValue = JSON.parse(JSON.stringify(curValue)); + const newcurValue = JSON.parse(JSON.stringify(curValue)); newcurValue.duration = curValue.duration / divideNoteBy; prevValue = prevValue.concat([newcurValue]); - oldcurValue = newcurValue; + let oldcurValue = newcurValue; for (let i = 0; i < divideNoteBy - 1; i++) { - newcurValue2 = JSON.parse(JSON.stringify(oldcurValue)); + const newcurValue2 = JSON.parse(JSON.stringify(oldcurValue)); newcurValue2.startTime = parseInt( newcurValue2.startTime + newcurValue2.duration * 1000 ); @@ -1317,9 +1357,9 @@ function MusicKeyboard() { }, []); this._createTable(); - }; + } - this._createAddRowPieSubmenu = function () { + _createAddRowPieSubmenu() { docById("wheelDivptm").style.display = ""; docById("wheelDivptm").style.zIndex = "300"; const pitchLabels = ["do", "re", "mi", "fa", "sol", "la", "ti"]; @@ -1403,7 +1443,8 @@ function MusicKeyboard() { const newBlock = this._logo.blocks.blockList.length; if (label === "pitch") { - for (let i = 0; i < pitchLabels.length; i++) { + let i; + for (i = 0; i < pitchLabels.length; i++) { if ( pitchLabels[i].indexOf(last(this.layout).noteName) !== -1 || last(this.layout).noteName.indexOf(pitchLabels[i]) !== -1 @@ -1464,12 +1505,12 @@ function MusicKeyboard() { ]); break; default: - console.log("Nothing to do for " + label); + // console.log("Nothing to do for " + label); } let aboveBlock = -1; for (let i = this.layout.length; i > 0; i--) { - if (this.layout[i - 1].blockNumber < FAKEBLOCKNUMBER) { + if (this.layout[i - 1].blockNumber < MusicKeyboard.FAKEBLOCKNUMBER) { aboveBlock = this.layout[i - 1].blockNumber; break; } @@ -1489,16 +1530,16 @@ function MusicKeyboard() { this._createTable(); }, 500); } else { - console.log("Could not find anywhere to insert new block."); + // console.log("Could not find anywhere to insert new block."); } }; for (let i = 0; i < valueLabel.length; i++) { this._menuWheel.navItems[i].navigateFunction = __selectionChanged; } - }; + } - this._addNotesBlockBetween = function (aboveBlock, block) { + _addNotesBlockBetween(aboveBlock, block) { const belowBlock = last(this._logo.blocks.blockList[aboveBlock].connections); this._logo.blocks.blockList[aboveBlock].connections[ this._logo.blocks.blockList[aboveBlock].connections.length - 1 @@ -1517,9 +1558,9 @@ function MusicKeyboard() { this._logo.blocks.adjustDocks(this.blockNo, true); this._logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); this._logo.blocks.refreshCanvas(); - }; + } - this._sortLayout = function () { + _sortLayout() { this.layout.sort((a, b) => { let aValue, bValue; if (a.noteName == "hertz") { @@ -1571,9 +1612,9 @@ function MusicKeyboard() { } else { this._createTable(); } - }; + } - this._removePitchBlock = function (blockNo) { + _removePitchBlock(blockNo) { const c0 = this._logo.blocks.blockList[blockNo].connections[0]; const c1 = last(this._logo.blocks.blockList[blockNo].connections); if (this._logo.blocks.blockList[c0].name === "musickeyboard") { @@ -1595,9 +1636,9 @@ function MusicKeyboard() { this._logo.blocks.adjustDocks(this.blockNo, true); this._logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); this._logo.blocks.refreshCanvas(); - }; + } - this._createColumnPieSubmenu = function (index, condition) { + _createColumnPieSubmenu(index, condition) { index = parseInt(index); if ( blocks.blockList[this.layout[this.layout.length - index - 1].blockNumber] === undefined @@ -1779,7 +1820,8 @@ function MusicKeyboard() { }; const __hertzSelectionChanged = () => { - blockValue = this._pitchWheel.navItems[this._pitchWheel.selectedNavItemIndex].title; + const blockValue = this._pitchWheel.navItems[this._pitchWheel.selectedNavItemIndex] + .title; const argBlock = this._logo.blocks.blockList[block].connections[1]; this._logo.blocks.blockList[argBlock].text.text = blockValue; this._logo.blocks.blockList[argBlock].value = parseInt(blockValue); @@ -1794,7 +1836,7 @@ function MusicKeyboard() { const cell = docById("labelcol" + (this.layout.length - index - 1)); this.layout[index].noteOctave = parseInt(blockValue); cell.innerHTML = this.layout[index].noteName + this.layout[index].noteOctave.toString(); - this._notesPlayed.map(function (item) { + this._notesPlayed.map((item) => { if (item.objId == this.layout[index].blockNumber) { item.noteOctave = parseInt(blockValue); } @@ -1810,16 +1852,14 @@ function MusicKeyboard() { const __selectionChanged = () => { let label = this._pitchWheel.navItems[this._pitchWheel.selectedNavItemIndex].title; - let labelValue, i, attr, flag; + let labelValue, i, attr; if (condition === "pitchblocks") { i = noteLabelsI18n.indexOf(label); labelValue = noteLabels[i]; attr = this._accidentalsWheel.navItems[this._accidentalsWheel.selectedNavItemIndex] .title; - flag = false; if (attr !== "♮") { label += attr; - flag = true; } } else { i = noteLabels.indexOf(label); @@ -1853,7 +1893,7 @@ function MusicKeyboard() { this.layout[index].noteOctave = octave; cell.innerHTML = this.layout[index].noteName + this.layout[index].noteOctave.toString(); const temp1 = label; - let temp3; + let temp2; if (temp1 in FIXEDSOLFEGE1) { temp2 = FIXEDSOLFEGE1[temp1].replace(SHARP, "#").replace(FLAT, "b") + octave; } else { @@ -1873,8 +1913,9 @@ function MusicKeyboard() { const i = noteLabelsI18n.indexOf(label); let labelValue = noteLabels[i]; - const attr = this._accidentalsWheel.navItems[this._accidentalsWheel.selectedNavItemIndex] - .title; + const attr = this._accidentalsWheel.navItems[ + this._accidentalsWheel.selectedNavItemIndex + ].title; if (attr !== "♮") { labelValue += attr; } @@ -1912,9 +1953,9 @@ function MusicKeyboard() { this._octavesWheel.navItems[i].navigateFunction = __pitchPreview; } } - }; + } - this._createKeyboard = function () { + _createKeyboard() { document.onkeydown = null; const mkbKeyboardDiv = this.keyboardDiv; mkbKeyboardDiv.style.display = "flex"; @@ -1962,10 +2003,10 @@ function MusicKeyboard() { let myrowId = 0; let myrow2Id = 0; - let parentbl, parentbl2, el, newel, newel2, nname, elementid, elementid2; + let parenttbl, parenttbl2, el, newel, newel2, nname; for (let p = 0; p < this.layout.length; p++) { // If the blockNumber is null, don't add a label. - if (this.layout[p].noteName > FAKEBLOCKNUMBER) { + if (this.layout[p].noteName > MusicKeyboard.FAKEBLOCKNUMBER) { parenttbl2 = document.getElementById("myrow2"); newel2 = document.createElement("td"); newel2.setAttribute("id", "blackRow" + myrow2Id.toString()); @@ -1984,10 +2025,10 @@ function MusicKeyboard() { newel2.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].noteOctave + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].noteOctave + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "blackRow" + myrow2Id.toString(), @@ -2008,10 +2049,10 @@ function MusicKeyboard() { newel.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].voice + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].voice + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "whiteRow" + myrowId.toString(), @@ -2019,7 +2060,7 @@ function MusicKeyboard() { ]); newel.innerHTML = "(" + - String.fromCharCode(WHITEKEYS[myrowId]) + + String.fromCharCode(MusicKeyboard.WHITEKEYS[myrowId]) + ")
" + this.layout[p].voice; @@ -2037,10 +2078,10 @@ function MusicKeyboard() { newel.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].noteOctave + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].noteOctave + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "whiteRow" + myrowId.toString(), @@ -2048,7 +2089,7 @@ function MusicKeyboard() { ]); newel.innerHTML = "(" + - String.fromCharCode(WHITEKEYS[myrowId]) + + String.fromCharCode(MusicKeyboard.WHITEKEYS[myrowId]) + ")
" + this.layout[p].noteOctave; @@ -2081,10 +2122,10 @@ function MusicKeyboard() { newel2.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].noteOctave + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].noteOctave + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "blackRow" + myrow2Id.toString(), @@ -2092,11 +2133,12 @@ function MusicKeyboard() { ]); nname = this.layout[p].noteName.replace(SHARP, "").replace("#", ""); - if (this.layout[p].blockNumber > FAKEBLOCKNUMBER) { + if (this.layout[p].blockNumber > MusicKeyboard.FAKEBLOCKNUMBER) { + // } else if (SOLFEGENAMES.indexOf(nname) !== -1) { newel2.innerHTML = "(" + - String.fromCharCode(BLACKKEYS[myrow2Id]) + + String.fromCharCode(MusicKeyboard.BLACKKEYS[myrow2Id]) + ")
" + i18nSolfege(nname) + SHARP + @@ -2104,7 +2146,7 @@ function MusicKeyboard() { } else { newel2.innerHTML = "(" + - String.fromCharCode(BLACKKEYS[myrow2Id]) + + String.fromCharCode(MusicKeyboard.BLACKKEYS[myrow2Id]) + ")
" + this.layout[p].noteName + this.layout[p].noteOctave; @@ -2122,7 +2164,6 @@ function MusicKeyboard() { ) { parenttbl2 = document.getElementById("myrow2"); newel2 = document.createElement("td"); - elementid2 = document.getElementsByTagName("td").length; newel2.setAttribute("id", "blackRow" + myrow2Id.toString()); newel2.style.textAlign = "center"; if ([2, 6, 9, 13, 16, 20].indexOf(myrow2Id) !== -1) { @@ -2140,21 +2181,22 @@ function MusicKeyboard() { newel2.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].noteOctave + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].noteOctave + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "blackRow" + myrow2Id.toString(), this.layout[p].blockNumber ]); nname = this.layout[p].noteName.replace(FLAT, "").replace("b", ""); - if (this.layout[p].blockNumber > FAKEBLOCKNUMBER) { + if (this.layout[p].blockNumber > MusicKeyboard.FAKEBLOCKNUMBER) { + // } else if (SOLFEGENAMES.indexOf(nname) !== -1) { newel2.innerHTML = "(" + - String.fromCharCode(BLACKKEYS[myrow2Id]) + + String.fromCharCode(MusicKeyboard.BLACKKEYS[myrow2Id]) + ")
" + i18nSolfege(nname) + FLAT + @@ -2162,7 +2204,7 @@ function MusicKeyboard() { } else { newel2.innerHTML = "(" + - String.fromCharCode(BLACKKEYS[myrow2Id]) + + String.fromCharCode(MusicKeyboard.BLACKKEYS[myrow2Id]) + ")
" + this.layout[p].noteName + this.layout[p].noteOctave; @@ -2177,35 +2219,35 @@ function MusicKeyboard() { } else { parenttbl = document.getElementById("myrow"); newel = document.createElement("td"); - elementid = document.getElementsByTagName("td").length; newel.setAttribute("id", "whiteRow" + myrowId.toString()); newel.style.textAlign = "center"; newel.setAttribute( "alt", this.layout[p].noteName + - "__" + - this.layout[p].noteOctave + - "__" + - this.layout[p].blockNumber + "__" + + this.layout[p].noteOctave + + "__" + + this.layout[p].blockNumber ); this.idContainer.push([ "whiteRow" + myrowId.toString(), this.layout[p].blockNumber ]); - if (this.layout[p].blockNumber > FAKEBLOCKNUMBER) { + if (this.layout[p].blockNumber > MusicKeyboard.FAKEBLOCKNUMBER) { + // } else if (SOLFEGENAMES.indexOf(this.layout[p].noteName) !== -1) { newel.innerHTML = "(" + - String.fromCharCode(WHITEKEYS[myrowId]) + + String.fromCharCode(MusicKeyboard.WHITEKEYS[myrowId]) + ")
" + i18nSolfege(this.layout[p].noteName) + this.layout[p].noteOctave; } else { newel.innerHTML = "(" + - String.fromCharCode(WHITEKEYS[myrowId]) + + String.fromCharCode(MusicKeyboard.WHITEKEYS[myrowId]) + ")
" + this.layout[p].noteName + this.layout[p].noteOctave; @@ -2236,7 +2278,7 @@ function MusicKeyboard() { for (let i = 0; i < this.idContainer.length; i++) { // If the blockNumber is null, don't make the key clickable. if (this.layout[i].blockNumber === null) { - console.log("skipping " + i); + // console.log("skipping " + i); continue; } this.loadHandler( @@ -2247,16 +2289,16 @@ function MusicKeyboard() { } this.addKeyboardShortcuts(); - }; + } - this._save = function () { + _save() { this.processSelected(); - console.debug("Generating action stack for: "); - console.debug(selectedNotes); + // console.debug("Generating action stack for: "); + // console.debug(MusicKeyboard.selectedNotes); const newStack = [ [0, ["action", { collapsed: false }], 100, 100, [null, 1, 2, null]], [1, ["text", { value: _("action") }], 0, 0, [0]], - [2, "hidden", 0, 0, [0, selectedNotes.length == 0 ? null : 3]] + [2, "hidden", 0, 0, [0, MusicKeyboard.selectedNotes.length == 0 ? null : 3]] ]; // This function organizes notes into groups with same voices. @@ -2293,7 +2335,7 @@ function MusicKeyboard() { this.findLen = (selectedNotesGrp, selectedNotes) => { let ans = 0; for (let i = 0; i < selectedNotesGrp.length; i++) { - note = selectedNotes[selectedNotesGrp[i]]; + const note = selectedNotes[selectedNotesGrp[i]]; if (note.noteOctave[0] === "R") { ans += 6; // rest note uses 6 } else if (note.noteOctave[0] === null) { @@ -2305,7 +2347,7 @@ function MusicKeyboard() { return ans; }; - newNotes = this._clusterNotes(selectedNotes); + const newNotes = this._clusterNotes(MusicKeyboard.selectedNotes); let prevId = 2; let endOfStackIdx, id; @@ -2314,8 +2356,10 @@ function MusicKeyboard() { const selectedNotesGrp = newNotes[noteGrp]; const isLast = noteGrp == newNotes.length - 1; id = newStack.length; - const voice = selectedNotes[selectedNotesGrp[0]].voice[0] || DEFAULTVOICE; - const next = isLast ? null : id + 3 + this.findLen(selectedNotesGrp, selectedNotes); + const voice = MusicKeyboard.selectedNotes[selectedNotesGrp[0]].voice[0] || DEFAULTVOICE; + const next = isLast + ? null + : id + 3 + this.findLen(selectedNotesGrp, MusicKeyboard.selectedNotes); newStack.push( [id, "settimbre", 0, 0, [prevId, id + 1, id + 3, id + 2]], @@ -2327,7 +2371,7 @@ function MusicKeyboard() { endOfStackIdx = id; for (let i = 0; i < selectedNotesGrp.length; i++) { - note = selectedNotes[selectedNotesGrp[i]]; + const note = MusicKeyboard.selectedNotes[selectedNotesGrp[i]]; // Add the Note block and its value const idx = newStack.length; @@ -2482,17 +2526,17 @@ function MusicKeyboard() { this._logo.blocks.loadNewBlocks(newStack); this._logo.textMsg(_("New action block generated!")); - }; + } - this.clearBlocks = function () { + clearBlocks() { this.noteNames = []; this.octaves = []; - }; + } /** * @deprecated */ - this._addButton = function (row, icon, iconSize, label) { + _addButton(row, icon, iconSize, label) { const cell = row.insertCell(-1); cell.innerHTML = '    '; - cell.style.width = BUTTONSIZE + "px"; + cell.style.width = MusicKeyboard.BUTTONSIZE + "px"; cell.style.minWidth = cell.style.width; cell.style.maxWidth = cell.style.width; cell.style.height = cell.style.width; @@ -2514,25 +2558,25 @@ function MusicKeyboard() { cell.style.maxHeight = cell.style.height; cell.style.backgroundColor = platformColor.selectorBackground; - cell.onmouseover = function () { + cell.onmouseover = () => { this.style.backgroundColor = platformColor.selectorBackgroundHOVER; }; - cell.onmouseout = function () { + cell.onmouseout = () => { this.style.backgroundColor = platformColor.selectorBackground; }; return cell; - }; + } - this.doMIDI = () => { + doMIDI() { let duration = 0; let startTime = 0; this.getElement = {}; for (let idx = 0; idx < this.layout.length; idx++) { - key = this.layout[idx]; + const key = this.layout[idx]; this.getElement[key.noteName.toString() + key.noteOctave.toString()] = key.objId; this.getElement[FIXEDSOLFEGE1[key.noteName.toString()] + "" + key.noteOctave] = key.objId; //convet solfege to alphabetic. @@ -2570,7 +2614,7 @@ function MusicKeyboard() { this.instrumentMapper[element.id], this.noteMapper[element.id] ); - if (beginnerMode === "true") { + if (MusicKeyboard.beginnerMode === "true") { duration = parseFloat((Math.round(duration * 8) / 8).toFixed(3)); } else { duration = parseFloat((Math.round(duration * 16) / 16).toFixed(4)); @@ -2645,13 +2689,11 @@ function MusicKeyboard() { }; if (navigator.requestMIDIAccess) - navigator.requestMIDIAccess({ sysex: true }) - .then(onMIDISuccess, onMIDIFailure); - else - logo.errorMsg(_("Failed to get MIDI access in browser.")); - }; + navigator.requestMIDIAccess({ sysex: true }).then(onMIDISuccess, onMIDIFailure); + else logo.errorMsg(_("Failed to get MIDI access in browser.")); + } - function fillChromaticGaps(noteList) { + fillChromaticGaps(noteList) { // Assuming list of either solfege or letter class of the form // sol4 or G4. Each entry is a dictionary with noteName and // noteOctave. @@ -2661,7 +2703,7 @@ function MusicKeyboard() { const hertzList = []; const drumList = []; let obj = null; - let fakeBlockNumber = FAKEBLOCKNUMBER + 1; + let fakeBlockNumber = MusicKeyboard.FAKEBLOCKNUMBER + 1; // Find the first non-Hertz note. for (let i = 0; i < noteList.length; i++) { @@ -2790,4 +2832,4 @@ function MusicKeyboard() { return newList; } -} +} \ No newline at end of file From 69588fc70671fd62c753d05448a8999a7ba103e5 Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Mon, 8 Feb 2021 12:07:07 +0530 Subject: [PATCH 2/4] moving init to top, JSDoc and linting --- js/widgets/musickeyboard.js | 697 +++++++++++++++++++++++------------- 1 file changed, 445 insertions(+), 252 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index a83863ee4d..4ba5e23890 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -1,26 +1,37 @@ -// Copyright (c) 2015 Jefferson Lee -// Copyright (c) 2018 Ritwik Abhishek -// Copyright (c) 2018,20 Walter Bender -// -// This program is free software; you can redistribute it and/or -// modify it under the terms of the The GNU Affero General Public -// License as published by the Free Software Foundation; either -// version 3 of the License, or (at your option) any later version. -// -// You should have received a copy of the GNU Affero General Public -// License along with this library; if not, write to the Free Software -// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA +/** + * @file This contains the prototype of the MusicKeyboard Widget. + * + * @copyright 2015 Jefferson Lee + * @copyright 2018 Ritwik Abhishek + * @copyright 2018,20 Walter Bender + * + * @license + * This program is free software; you can redistribute it and/or modify it under the terms of the + * The GNU Affero General Public License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * You should have received a copy of the GNU Affero General Public License along with this + * library; if not, write to the Free Software Foundation, 51 Franklin Street, Suite 500 Boston, + * MA 02110-1335 USA. + */ /* - global docById, platformColor, FIXEDSOLFEGE1, SHARP, FLAT, last, Singer, _, - noteToFrequency, EIGHTHNOTEWIDTH, MATRIXSOLFEHEIGHT, MATRIXSOLFEWIDTH, - i18nSolfege, toFraction, wheelnav, slicePath, blocks, getNote, PREVIEWVOLUME, - DEFAULTVOICE, PITCHES3, SOLFEGENAMES, SOLFEGECONVERSIONTABLE, NOTESSHARP, - NOTESFLAT, logo, convertFromSolfege, PITCHES2, PITCHES + global platformColor, docById, wheelnav, slicePath, logo, Singer, last, _, FIXEDSOLFEGE1 + SHARP, FLAT, noteToFrequency, EIGHTHNOTEWIDTH, MATRIXSOLFEHEIGHT, MATRIXSOLFEWIDTH, + i18nSolfege, toFraction, blocks, getNote, PREVIEWVOLUME, DEFAULTVOICE, PITCHES3, + SOLFEGENAMES, PITCHES2, PITCHES, NOTESSHARP, NOTESFLAT, convertFromSolfege, SOLFEGECONVERSIONTABLE + + */ /* exported MusicKeyboard */ +/** + * @class + * @classdesc pertains to setting up all features of the musickeyboard widget and its UI features. + * + * Private members' names begin with underscore '_". + */ class MusicKeyboard { static FAKEBLOCKNUMBER = 100000; static BUTTONDIVWIDTH = 535; // 5 buttons @@ -39,6 +50,10 @@ class MusicKeyboard { static unit = MusicKeyboard.beginnerMode === "true" ? 8 : 16; static selectedNotes = []; + /** + * @constructor + */ + constructor() { const w = window.innerWidth; this._cellScale = w / 1200; @@ -66,6 +81,173 @@ class MusicKeyboard { this._notesPlayed = []; } + /** + * Initialises the MusicKeyboard widget. + * @returns {void} + */ + + init() { + this.tick = false; + this.playingNow = false; + let w = window.innerWidth; + this._cellScale = w / 1200; + + const widgetWindow = window.widgetWindows.windowFor(this, "music keyboard"); + this.widgetWindow = widgetWindow; + widgetWindow.clear(); + widgetWindow.show(); + this._keysLayout(); + const tur = logo.turtles.ithTurtle(0); + this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM; + + widgetWindow.onclose = () => { + let myNode; + document.onkeydown = MusicKeyboard.saveOnKeyDown; + document.onkeyup = MusicKeyboard.saveOnKeyUp; + + if (document.getElementById("keyboardHolder2")) { + document.getElementById("keyboardHolder2").style.display = "none"; + } + + myNode = document.getElementById("myrow"); + if (myNode != null) { + myNode.innerHTML = ""; + } + + myNode = document.getElementById("myrow2"); + if (myNode != null) { + myNode.innerHTML = ""; + } + + MusicKeyboard.selectedNotes = []; + if (this.loopTick) this.loopTick.stop(); + widgetWindow.destroy(); + }; + + this.playButton = widgetWindow.addButton( + "play-button.svg", + MusicKeyboard.ICONSIZE, + _("Play") + ); + + this.playButton.onclick = () => { + logo.turtleDelay = 0; + this.processSelected(); + this.playAll(); + }; + + widgetWindow.addButton( + "export-chunk.svg", + MusicKeyboard.ICONSIZE, + _("Save") + ).onclick = () => { + this._save(); + }; + + widgetWindow.addButton( + "erase-button.svg", + MusicKeyboard.ICONSIZE, + _("Clear") + ).onclick = () => { + this._notesPlayed = []; + MusicKeyboard.selectedNotes = []; + // if (!that.keyboardShown) { + this._createTable(); + // } + }; + + widgetWindow.addButton("add2.svg", MusicKeyboard.ICONSIZE, _("Add note")).onclick = () => { + this._createAddRowPieSubmenu(); + }; + + this.midiButton = widgetWindow.addButton("midi.svg", MusicKeyboard.ICONSIZE, _("MIDI")); + this.midiButton.onclick = () => { + this.doMIDI(); + }; + + this.tickButton = widgetWindow.addButton( + "metronome.svg", + MusicKeyboard.ICONSIZE, + _("Metronome") + ); + this.tickButton.onclick = () => { + if (this.tick) { + this.tick = false; + this.loopTick.stop(); + } else { + this.tick = true; + logo.synth.loadSynth(0, "cow bell"); + this.loopTick = logo.synth.loop( + 0, + "cow bell", + "C5", + 1 / 64, + 0, + this.bpm || 90, + 0.07 + ); + setTimeout(() => { + logo.synth.start(); + }, 500); + } + }; + + // Append keyboard and div on widget windows + this.keyboardDiv = document.createElement("div"); + const attr = document.createAttribute("id"); + attr.value = "mkbKeyboardDiv"; + this.keyboardDiv.setAttributeNode(attr); + this.keyTable = document.createElement("div"); + widgetWindow.getWidgetBody().append(this.keyboardDiv); + widgetWindow.getWidgetBody().append(this.keyTable); + widgetWindow.getWidgetBody().style.height = "550px"; + widgetWindow.getWidgetBody().style.width = "1000px"; + + this._createKeyboard(); + + this._createTable(); + + w = Math.max( + Math.min(window.innerWidth, this._cellScale * MusicKeyboard.OUTERWINDOWWIDTH - 20), + MusicKeyboard.BUTTONDIVWIDTH + ); + + //Change widget size on fullscreen mode, else + //revert back to original size on unfullscreen mode + widgetWindow.onmaximize = () => { + if (widgetWindow._maximized) { + widgetWindow.getWidgetBody().style.position = "absolute"; + widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; + widgetWindow.getWidgetBody().style.width = "200vh"; + docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; + try { + docById("mkbInnerDiv").style.width = "calc(200vh - 64px)"; + } catch (e) { + // Does this happen? + // console.debug("Error calculating InnerDiv width"); + } + + widgetWindow.getWidgetBody().style.left = "70px"; + } else { + widgetWindow.getWidgetBody().style.position = "relative"; + widgetWindow.getWidgetBody().style.left = "0px"; + widgetWindow.getWidgetBody().style.height = "550px"; + widgetWindow.getWidgetBody().style.width = "1000px"; + docById("mkbOuterDiv").style.width = w + "px"; + } + }; + + widgetWindow.sendToCenter(); + } + + /** + * @public + * @param {number} rowBlock + * @returns {void} + */ + + addRowBlock(rowBlock) { // In case there is a repeat block, use a unique block number // for each instance. @@ -76,6 +258,10 @@ class MusicKeyboard { this._rowBlocks.push(rowBlock); } + /** + * @public + * @returns {void} + */ processSelected() { if (this._notesPlayed.length === 0) { MusicKeyboard.selectedNotes = []; @@ -129,6 +315,11 @@ class MusicKeyboard { } } + /** + * @public + * @returns {void} + */ + addKeyboardShortcuts() { let duration = 0; const startTime = {}; @@ -174,7 +365,7 @@ class MusicKeyboard { return; } - this._logo.synth.trigger(0, temp2[id], 1, this.instrumentMapper[id], null, null); + logo.synth.trigger(0, temp2[id], 1, this.instrumentMapper[id], null, null); if (this.tick) { let restDuration = (startTime[id] - this.endTime) / 1000.0; @@ -259,7 +450,7 @@ class MusicKeyboard { duration: parseFloat(duration) }); } else { - this._logo.synth.stopSound(0, this.instrumentMapper[id], temp2[id]); + logo.synth.stopSound(0, this.instrumentMapper[id], temp2[id]); this._notesPlayed.push({ startTime: startTime[id], noteOctave: temp2[id], @@ -287,6 +478,14 @@ class MusicKeyboard { document.onkeyup = __keyboardup; } + /** + * @public + * @param {HTMLElement} element + * @param {number} i + * @param {number} blockNumber + * @returns {void} + */ + loadHandler(element, i, blockNumber) { const temp1 = this.layout[i].noteName; let temp2; @@ -312,7 +511,7 @@ class MusicKeyboard { startDate = new Date(); startTime = startDate.getTime(); // Milliseconds(); element.style.backgroundColor = platformColor.orange; - this._logo.synth.trigger( + logo.synth.trigger( 0, this.noteMapper[element.id], 1, @@ -337,7 +536,7 @@ class MusicKeyboard { const now = new Date(); duration = now.getTime() - startTime; duration /= 1000; - this._logo.synth.stopSound( + logo.synth.stopSound( 0, this.instrumentMapper[element.id], this.noteMapper[element.id] @@ -374,161 +573,10 @@ class MusicKeyboard { }; } - init(logo) { - this._logo = logo; - this.tick = false; - this.playingNow = false; - let w = window.innerWidth; - this._cellScale = w / 1200; - - const widgetWindow = window.widgetWindows.windowFor(this, "music keyboard"); - this.widgetWindow = widgetWindow; - widgetWindow.clear(); - widgetWindow.show(); - this._keysLayout(); - const tur = logo.turtles.ithTurtle(0); - this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM; - - widgetWindow.onclose = () => { - let myNode; - document.onkeydown = MusicKeyboard.saveOnKeyDown; - document.onkeyup = MusicKeyboard.saveOnKeyUp; - - if (document.getElementById("keyboardHolder2")) { - document.getElementById("keyboardHolder2").style.display = "none"; - } - - myNode = document.getElementById("myrow"); - if (myNode != null) { - myNode.innerHTML = ""; - } - - myNode = document.getElementById("myrow2"); - if (myNode != null) { - myNode.innerHTML = ""; - } - - MusicKeyboard.selectedNotes = []; - if (this.loopTick) this.loopTick.stop(); - widgetWindow.destroy(); - }; - - this.playButton = widgetWindow.addButton( - "play-button.svg", - MusicKeyboard.ICONSIZE, - _("Play") - ); - - this.playButton.onclick = () => { - this._logo.turtleDelay = 0; - this.processSelected(); - this.playAll(); - }; - - widgetWindow.addButton( - "export-chunk.svg", - MusicKeyboard.ICONSIZE, - _("Save") - ).onclick = () => { - this._save(); - }; - - widgetWindow.addButton( - "erase-button.svg", - MusicKeyboard.ICONSIZE, - _("Clear") - ).onclick = () => { - this._notesPlayed = []; - MusicKeyboard.selectedNotes = []; - // if (!that.keyboardShown) { - this._createTable(); - // } - }; - - widgetWindow.addButton("add2.svg", MusicKeyboard.ICONSIZE, _("Add note")).onclick = () => { - this._createAddRowPieSubmenu(); - }; - - this.midiButton = widgetWindow.addButton("midi.svg", MusicKeyboard.ICONSIZE, _("MIDI")); - this.midiButton.onclick = () => { - this.doMIDI(); - }; - - this.tickButton = widgetWindow.addButton( - "metronome.svg", - MusicKeyboard.ICONSIZE, - _("Metronome") - ); - this.tickButton.onclick = () => { - if (this.tick) { - this.tick = false; - this.loopTick.stop(); - } else { - this.tick = true; - this._logo.synth.loadSynth(0, "cow bell"); - this.loopTick = this._logo.synth.loop( - 0, - "cow bell", - "C5", - 1 / 64, - 0, - this.bpm || 90, - 0.07 - ); - setTimeout(() => { - this._logo.synth.start(); - }, 500); - } - }; - - // Append keyboard and div on widget windows - this.keyboardDiv = document.createElement("div"); - const attr = document.createAttribute("id"); - attr.value = "mkbKeyboardDiv"; - this.keyboardDiv.setAttributeNode(attr); - this.keyTable = document.createElement("div"); - widgetWindow.getWidgetBody().append(this.keyboardDiv); - widgetWindow.getWidgetBody().append(this.keyTable); - widgetWindow.getWidgetBody().style.height = "550px"; - widgetWindow.getWidgetBody().style.width = "1000px"; - - this._createKeyboard(); - - this._createTable(); - - w = Math.max( - Math.min(window.innerWidth, this._cellScale * MusicKeyboard.OUTERWINDOWWIDTH - 20), - MusicKeyboard.BUTTONDIVWIDTH - ); - - //Change widget size on fullscreen mode, else - //revert back to original size on unfullscreen mode - widgetWindow.onmaximize = () => { - if (widgetWindow._maximized) { - widgetWindow.getWidgetBody().style.position = "absolute"; - widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; - widgetWindow.getWidgetBody().style.width = "200vh"; - docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; - docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; - try { - docById("mkbInnerDiv").style.width = "calc(200vh - 64px)"; - } catch (e) { - // Does this happen? - // console.debug("Error calculating InnerDiv width"); - } - - widgetWindow.getWidgetBody().style.left = "70px"; - } else { - widgetWindow.getWidgetBody().style.position = "relative"; - widgetWindow.getWidgetBody().style.left = "0px"; - widgetWindow.getWidgetBody().style.height = "550px"; - widgetWindow.getWidgetBody().style.width = "1000px"; - docById("mkbOuterDiv").style.width = w + "px"; - } - }; - - widgetWindow.sendToCenter(); - } + /** + * @public + * @returns {void} + */ playAll() { if (MusicKeyboard.selectedNotes.length <= 0) { @@ -611,6 +659,13 @@ class MusicKeyboard { } } + /** + * @public + * @param {number} counter + * @param {string} time + * @param {HTMLElement} playButtonCell + * @returns {void} + */ playOne(counter, time, playButtonCell) { setTimeout(() => { let cell, eleid, ele, notes, zx, res, maxWidth; @@ -696,34 +751,47 @@ class MusicKeyboard { }, time * 1000 + 125); } + /** + * @private + * @param {Array} notes + * @param {Array} noteValue + * @param {Array} instruments + * @returns {void} + */ + _playChord(notes, noteValue, instruments) { if (notes[0] === "R") { return; } setTimeout(() => { - this._logo.synth.trigger(0, notes[0], noteValue[0], instruments[0], null, null); + logo.synth.trigger(0, notes[0], noteValue[0], instruments[0], null, null); }, 1); if (notes.length > 1) { setTimeout(() => { - this._logo.synth.trigger(0, notes[1], noteValue[0], instruments[1], null, null); + logo.synth.trigger(0, notes[1], noteValue[0], instruments[1], null, null); }, 1); } if (notes.length > 2) { setTimeout(() => { - this._logo.synth.trigger(0, notes[2], noteValue[0], instruments[2], null, null); + logo.synth.trigger(0, notes[2], noteValue[0], instruments[2], null, null); }, 1); } if (notes.length > 3) { setTimeout(() => { - this._logo.synth.trigger(0, notes[3], noteValue[0], instruments[3], null, null); + logo.synth.trigger(0, notes[3], noteValue[0], instruments[3], null, null); }, 1); } } + /** + * @private + * @returns {void} + */ + _keysLayout() { this.layout = []; const sortableList = []; @@ -748,7 +816,7 @@ class MusicKeyboard { sortableList.push({ frequency: noteToFrequency( this.noteNames[i] + this.octaves[i], - this._logo.turtles.ithTurtle(0).singer.keySignature + logo.turtles.ithTurtle(0).singer.keySignature ), noteName: this.noteNames[i], noteOctave: this.octaves[i], @@ -797,6 +865,13 @@ class MusicKeyboard { } } + /** + * @private + * @param {number} colIndex + * @param {boolean} playNote + * @returns {void} + */ + _setNotes(colIndex, playNote) { const start = docById("cells-" + colIndex).getAttribute("start"); @@ -831,6 +906,15 @@ class MusicKeyboard { } } + /** + * @private + * @param {number} j + * @param {number} colIndex + * @param {string} start + * @param {boolean} playNote + * @returns {void} + */ + _setNoteCell(j, colIndex, start, playNote) { const n = this.layout.length; const temp1 = this.layout[n - j - 1].noteName; @@ -861,7 +945,7 @@ class MusicKeyboard { }); if (playNote) { - this._logo.synth.trigger( + logo.synth.trigger( 0, temp2, ele.getAttribute("alt"), @@ -872,6 +956,11 @@ class MusicKeyboard { } } + /** + * @public + * @returns {void} + */ + makeClickable() { const rowNote = docById("mkbNoteDurationRow"); let cell; @@ -937,10 +1026,21 @@ class MusicKeyboard { } } + /** + * @private + * @param {number} noteValue + * @returns {number} + */ + _noteWidth(noteValue) { return Math.max(Math.floor(EIGHTHNOTEWIDTH * (8 * noteValue) * this._cellScale), 15); } + /** + * @private + * @returns {void} + */ + _createTable() { this.processSelected(); const mkbTableDiv = this.keyTable; @@ -1103,6 +1203,13 @@ class MusicKeyboard { this.makeClickable(); } + /** + * @private + * @param {string} cellId + * @param {string} start + * @returns {void} + */ + _createpiesubmenu(cellId, start) { docById("wheelDivptm").style.display = ""; @@ -1199,13 +1306,13 @@ class MusicKeyboard { docById("wheelDivptm").style.left = Math.min( - this._logo.blocks.turtles._canvas.width - 200, - Math.max(0, x * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.width - 200, + Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - this._logo.blocks.turtles._canvas.height - 250, - Math.max(0, y * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.height - 250, + Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; this._exitWheel.navItems[0].navigateFunction = () => { @@ -1269,6 +1376,13 @@ class MusicKeyboard { } } + /** + * @private + * @param {string} start + * @param {number} duration + * @returns {void} + */ + _updateDuration(start, duration) { start = parseInt(start); duration = parseInt(duration[0]) / parseInt(duration[1]); @@ -1283,6 +1397,14 @@ class MusicKeyboard { this._createTable(); } + + /** + * @private + * @param {string} cellId + * @param {string} start + * @param {number} divideNoteBy + * @returns {void} + */ _addNotes(cellId, start, divideNoteBy) { start = parseInt(start); const cell = docById(cellId); @@ -1312,6 +1434,12 @@ class MusicKeyboard { this._createTable(); } + /** + * @private + * @param {string} start + * @returns {void} + */ + _deleteNotes(start) { start = parseInt(start); @@ -1322,6 +1450,13 @@ class MusicKeyboard { this._createTable(); } + /** + * @private + * @param {string} start + * @param {number} divideNoteBy + * @returns {void} + */ + _divideNotes(start, divideNoteBy) { start = parseInt(start); @@ -1359,6 +1494,11 @@ class MusicKeyboard { this._createTable(); } + /** + * @private + * @returns {void} + */ + _createAddRowPieSubmenu() { docById("wheelDivptm").style.display = ""; docById("wheelDivptm").style.zIndex = "300"; @@ -1416,13 +1556,13 @@ class MusicKeyboard { docById("wheelDivptm").style.width = "300px"; docById("wheelDivptm").style.left = Math.min( - this._logo.blocks.turtles._canvas.width - 200, - Math.max(0, x * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.width - 200, + Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - this._logo.blocks.turtles._canvas.height - 250, - Math.max(0, y * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.height - 250, + Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; this._exitWheel.navItems[0].navigateFunction = () => { @@ -1440,7 +1580,7 @@ class MusicKeyboard { return; } const label = VALUESLABEL[this._menuWheel.selectedNavItemIndex]; - const newBlock = this._logo.blocks.blockList.length; + const newBlock = logo.blocks.blockList.length; if (label === "pitch") { let i; @@ -1492,14 +1632,14 @@ class MusicKeyboard { switch (label) { case "pitch": - this._logo.blocks.loadNewBlocks([ + logo.blocks.loadNewBlocks([ [0, ["pitch", {}], 0, 0, [null, 1, 2, null]], [1, ["solfege", { value: rLabel }], 0, 0, [0]], [2, ["number", { value: rArg }], 0, 0, [0]] ]); break; case "hertz": - this._logo.blocks.loadNewBlocks([ + logo.blocks.loadNewBlocks([ [0, ["hertz", {}], 0, 0, [null, 1, null]], [1, ["number", { value: rArg }], 0, 0, [0]] ]); @@ -1539,27 +1679,39 @@ class MusicKeyboard { } } + /** + * @private + * @param {number} aboveBlock + * @param {number} block + * @returns {void} + */ + _addNotesBlockBetween(aboveBlock, block) { - const belowBlock = last(this._logo.blocks.blockList[aboveBlock].connections); - this._logo.blocks.blockList[aboveBlock].connections[ - this._logo.blocks.blockList[aboveBlock].connections.length - 1 + const belowBlock = last(logo.blocks.blockList[aboveBlock].connections); + logo.blocks.blockList[aboveBlock].connections[ + logo.blocks.blockList[aboveBlock].connections.length - 1 ] = block; if (belowBlock !== null) { - this._logo.blocks.blockList[belowBlock].connections[0] = block; + logo.blocks.blockList[belowBlock].connections[0] = block; } - this._logo.blocks.blockList[block].connections[0] = aboveBlock; + logo.blocks.blockList[block].connections[0] = aboveBlock; - this._logo.blocks.blockList[block].connections[ - this._logo.blocks.blockList[block].connections.length - 1 + logo.blocks.blockList[block].connections[ + logo.blocks.blockList[block].connections.length - 1 ] = belowBlock; - this._logo.blocks.adjustDocks(this.blockNo, true); - this._logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); - this._logo.blocks.refreshCanvas(); + logo.blocks.adjustDocks(this.blockNo, true); + logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); + logo.blocks.refreshCanvas(); } + /** + * @private + * @returns {void} + */ + _sortLayout() { this.layout.sort((a, b) => { let aValue, bValue; @@ -1568,7 +1720,7 @@ class MusicKeyboard { } else { aValue = noteToFrequency( a.noteName + a.noteOctave, - this._logo.turtles.ithTurtle(0).singer.keySignature + logo.turtles.ithTurtle(0).singer.keySignature ); } if (b.noteName == "hertz") { @@ -1576,7 +1728,7 @@ class MusicKeyboard { } else { bValue = noteToFrequency( b.noteName + b.noteOctave, - this._logo.turtles.ithTurtle(0).singer.keySignature + logo.turtles.ithTurtle(0).singer.keySignature ); } @@ -1614,30 +1766,43 @@ class MusicKeyboard { } } + /** + * @private + * @param {number} blockNo + * @returns {void} + */ + _removePitchBlock(blockNo) { - const c0 = this._logo.blocks.blockList[blockNo].connections[0]; - const c1 = last(this._logo.blocks.blockList[blockNo].connections); - if (this._logo.blocks.blockList[c0].name === "musickeyboard") { - this._logo.blocks.blockList[c0].connections[1] = c1; + const c0 = logo.blocks.blockList[blockNo].connections[0]; + const c1 = last(logo.blocks.blockList[blockNo].connections); + if (logo.blocks.blockList[c0].name === "musickeyboard") { + logo.blocks.blockList[c0].connections[1] = c1; } else { - this._logo.blocks.blockList[c0].connections[ - this._logo.blocks.blockList[c0].connections.length - 1 + logo.blocks.blockList[c0].connections[ + logo.blocks.blockList[c0].connections.length - 1 ] = c1; } if (c1) { - this._logo.blocks.blockList[c1].connections[0] = c0; + logo.blocks.blockList[c1].connections[0] = c0; } - this._logo.blocks.blockList[blockNo].connections[ - this._logo.blocks.blockList[blockNo].connections.length - 1 + logo.blocks.blockList[blockNo].connections[ + logo.blocks.blockList[blockNo].connections.length - 1 ] = null; - this._logo.blocks.sendStackToTrash(this._logo.blocks.blockList[blockNo]); - this._logo.blocks.adjustDocks(this.blockNo, true); - this._logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); - this._logo.blocks.refreshCanvas(); + logo.blocks.sendStackToTrash(logo.blocks.blockList[blockNo]); + logo.blocks.adjustDocks(this.blockNo, true); + logo.blocks.clampBlocksToCheck.push([this.blockNo, 0]); + logo.blocks.refreshCanvas(); } + /** + * @private + * @param {string} index + * @param {string} condition + * @returns {void} + */ + _createColumnPieSubmenu(index, condition) { index = parseInt(index); if ( @@ -1771,25 +1936,25 @@ class MusicKeyboard { docById("wheelDivptm").style.width = "300px"; docById("wheelDivptm").style.left = Math.min( - this._logo.blocks.turtles._canvas.width - 200, - Math.max(0, x * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.width - 200, + Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - this._logo.blocks.turtles._canvas.height - 250, - Math.max(0, y * this._logo.blocks.getStageScale()) + logo.blocks.turtles._canvas.height - 250, + Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; index = this.layout.length - index - 1; const block = this.layout[index].blockNumber; - let noteValue = this._logo.blocks.blockList[ - this._logo.blocks.blockList[block].connections[1] + let noteValue = logo.blocks.blockList[ + logo.blocks.blockList[block].connections[1] ].value; if (condition === "pitchblocks") { - const octaveValue = this._logo.blocks.blockList[ - this._logo.blocks.blockList[block].connections[2] + const octaveValue = logo.blocks.blockList[ + logo.blocks.blockList[block].connections[2] ].value; let accidentalsValue = 2; @@ -1822,16 +1987,16 @@ class MusicKeyboard { const __hertzSelectionChanged = () => { const blockValue = this._pitchWheel.navItems[this._pitchWheel.selectedNavItemIndex] .title; - const argBlock = this._logo.blocks.blockList[block].connections[1]; - this._logo.blocks.blockList[argBlock].text.text = blockValue; - this._logo.blocks.blockList[argBlock].value = parseInt(blockValue); + const argBlock = logo.blocks.blockList[block].connections[1]; + logo.blocks.blockList[argBlock].text.text = blockValue; + logo.blocks.blockList[argBlock].value = parseInt(blockValue); - const z = this._logo.blocks.blockList[argBlock].container.children.length - 1; - this._logo.blocks.blockList[argBlock].container.setChildIndex( - this._logo.blocks.blockList[argBlock].text, + const z = logo.blocks.blockList[argBlock].container.children.length - 1; + logo.blocks.blockList[argBlock].container.setChildIndex( + logo.blocks.blockList[argBlock].text, z ); - this._logo.blocks.blockList[argBlock].updateCache(); + logo.blocks.blockList[argBlock].updateCache(); const cell = docById("labelcol" + (this.layout.length - index - 1)); this.layout[index].noteOctave = parseInt(blockValue); @@ -1866,24 +2031,24 @@ class MusicKeyboard { labelValue = label; } - const noteLabelBlock = this._logo.blocks.blockList[block].connections[1]; - this._logo.blocks.blockList[noteLabelBlock].text.text = label; - this._logo.blocks.blockList[noteLabelBlock].value = labelValue; + const noteLabelBlock = logo.blocks.blockList[block].connections[1]; + logo.blocks.blockList[noteLabelBlock].text.text = label; + logo.blocks.blockList[noteLabelBlock].value = labelValue; - const z = this._logo.blocks.blockList[noteLabelBlock].container.children.length - 1; - this._logo.blocks.blockList[noteLabelBlock].container.setChildIndex( - this._logo.blocks.blockList[noteLabelBlock].text, + const z = logo.blocks.blockList[noteLabelBlock].container.children.length - 1; + logo.blocks.blockList[noteLabelBlock].container.setChildIndex( + logo.blocks.blockList[noteLabelBlock].text, z ); - this._logo.blocks.blockList[noteLabelBlock].updateCache(); + logo.blocks.blockList[noteLabelBlock].updateCache(); let octave; if (condition === "pitchblocks") { octave = Number( this._octavesWheel.navItems[this._octavesWheel.selectedNavItemIndex].title ); - this._logo.blocks.blockList[noteLabelBlock].blocks.setPitchOctave( - this._logo.blocks.blockList[noteLabelBlock].connections[0], + logo.blocks.blockList[noteLabelBlock].blocks.setPitchOctave( + logo.blocks.blockList[noteLabelBlock].connections[0], octave ); } @@ -1927,15 +2092,15 @@ class MusicKeyboard { labelValue, octave, 0, - this._logo.turtles.ithTurtle(0).singer.keySignature, + logo.turtles.ithTurtle(0).singer.keySignature, false, null, - this._logo.errorMsg, - this._logo.synth.inTemperament + logo.errorMsg, + logo.synth.inTemperament ); - this._logo.synth.setMasterVolume(PREVIEWVOLUME); - Singer.setSynthVolume(this._logo, 0, DEFAULTVOICE, PREVIEWVOLUME); - this._logo.synth.trigger(0, [obj[0] + obj[1]], 1 / 8, DEFAULTVOICE, null, null); + logo.synth.setMasterVolume(PREVIEWVOLUME); + Singer.setSynthVolume(logo, 0, DEFAULTVOICE, PREVIEWVOLUME); + logo.synth.trigger(0, [obj[0] + obj[1]], 1 / 8, DEFAULTVOICE, null, null); __selectionChanged(); }; @@ -1955,6 +2120,11 @@ class MusicKeyboard { } } + /** + * @private + * @returns {void} + */ + _createKeyboard() { document.onkeydown = null; const mkbKeyboardDiv = this.keyboardDiv; @@ -2291,6 +2461,11 @@ class MusicKeyboard { this.addKeyboardShortcuts(); } + /** + * @private + * @returns {void} + */ + _save() { this.processSelected(); // console.debug("Generating action stack for: "); @@ -2524,10 +2699,15 @@ class MusicKeyboard { } } - this._logo.blocks.loadNewBlocks(newStack); - this._logo.textMsg(_("New action block generated!")); + logo.blocks.loadNewBlocks(newStack); + logo.textMsg(_("New action block generated!")); } + /** + * @private + * @returns {void} + */ + clearBlocks() { this.noteNames = []; this.octaves = []; @@ -2569,6 +2749,13 @@ class MusicKeyboard { return cell; } + /** + * @private + * @param {string} index + * @param {string} condition + * @returns {void} + */ + doMIDI() { let duration = 0; let startTime = 0; @@ -2586,7 +2773,7 @@ class MusicKeyboard { if (!element) return; startTime = event.timeStamp; // Milliseconds(); element.style.backgroundColor = platformColor.orange; - this._logo.synth.trigger( + logo.synth.trigger( 0, this.noteMapper[element.id], 1, @@ -2609,7 +2796,7 @@ class MusicKeyboard { const now = event.timeStamp; duration = now - startTime; duration /= 1000; - this._logo.synth.stopSound( + logo.synth.stopSound( 0, this.instrumentMapper[element.id], this.noteMapper[element.id] @@ -2693,6 +2880,12 @@ class MusicKeyboard { else logo.errorMsg(_("Failed to get MIDI access in browser.")); } + /** + * @private + * @param {Array} noteList + * @returns {Array} + */ + fillChromaticGaps(noteList) { // Assuming list of either solfege or letter class of the form // sol4 or G4. Each entry is a dictionary with noteName and From 6dde7ad29d04b245a01c50c352b12897a305942a Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Mon, 8 Feb 2021 12:15:04 +0530 Subject: [PATCH 3/4] Keyboard UI enhancements --- js/widgets/musickeyboard.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 4ba5e23890..f751e10753 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -1199,6 +1199,7 @@ class MusicKeyboard { } const innerDiv = docById("mkbInnerDiv"); + innerDiv.style.cursor = "pointer"; innerDiv.scrollLeft = innerDiv.scrollWidth; // Force to the right. this.makeClickable(); } @@ -2143,6 +2144,7 @@ class MusicKeyboard { keyboardHolder2.style.left = "0px"; keyboardHolder2.style.height = "145px"; keyboardHolder2.style.backgroundColor = "white"; + keyboardHolder2.style.cursor = "pointer"; const blackRow = document.getElementsByClassName("black"); blackRow[0].style.top = "1px"; blackRow[0].style.borderSpacing = "0px 0px 20px"; From 5304cae603833e73e4917266c0111c65d21d667d Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Wed, 10 Feb 2021 00:50:48 +0530 Subject: [PATCH 4/4] instantiating selectedNotes and accessing turtles as a global --- js/widgets/musickeyboard.js | 118 ++++++++++++++++++------------------ 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index f751e10753..8cc1d684ec 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -16,7 +16,7 @@ */ /* - global platformColor, docById, wheelnav, slicePath, logo, Singer, last, _, FIXEDSOLFEGE1 + global platformColor, docById, wheelnav, slicePath, logo, Singer, last, _, FIXEDSOLFEGE1, turtles SHARP, FLAT, noteToFrequency, EIGHTHNOTEWIDTH, MATRIXSOLFEHEIGHT, MATRIXSOLFEWIDTH, i18nSolfege, toFraction, blocks, getNote, PREVIEWVOLUME, DEFAULTVOICE, PITCHES3, SOLFEGENAMES, PITCHES2, PITCHES, NOTESSHARP, NOTESFLAT, convertFromSolfege, SOLFEGECONVERSIONTABLE @@ -48,13 +48,13 @@ class MusicKeyboard { static saveOnKeyUp = document.onkeyup; static beginnerMode = localStorage.beginnerMode; static unit = MusicKeyboard.beginnerMode === "true" ? 8 : 16; - static selectedNotes = []; /** * @constructor */ constructor() { + this.selectedNotes = []; const w = window.innerWidth; this._cellScale = w / 1200; @@ -97,7 +97,7 @@ class MusicKeyboard { widgetWindow.clear(); widgetWindow.show(); this._keysLayout(); - const tur = logo.turtles.ithTurtle(0); + const tur = turtles.ithTurtle(0); this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM; widgetWindow.onclose = () => { @@ -119,7 +119,7 @@ class MusicKeyboard { myNode.innerHTML = ""; } - MusicKeyboard.selectedNotes = []; + this.selectedNotes = []; if (this.loopTick) this.loopTick.stop(); widgetWindow.destroy(); }; @@ -150,7 +150,7 @@ class MusicKeyboard { _("Clear") ).onclick = () => { this._notesPlayed = []; - MusicKeyboard.selectedNotes = []; + this.selectedNotes = []; // if (!that.keyboardShown) { this._createTable(); // } @@ -264,7 +264,7 @@ class MusicKeyboard { */ processSelected() { if (this._notesPlayed.length === 0) { - MusicKeyboard.selectedNotes = []; + this.selectedNotes = []; return; } @@ -276,7 +276,7 @@ class MusicKeyboard { // selectedNotes is used for playback. Coincident notes are // grouped together. It is built from notesPlayed. - MusicKeyboard.selectedNotes = [ + this.selectedNotes = [ { noteOctave: [this._notesPlayed[0].noteOctave], objId: [this._notesPlayed[0].objId], @@ -293,17 +293,17 @@ class MusicKeyboard { i < this._notesPlayed.length && this._notesPlayed[i].startTime === this._notesPlayed[i - 1].startTime ) { - MusicKeyboard.selectedNotes[j].noteOctave.push(this._notesPlayed[i].noteOctave); - MusicKeyboard.selectedNotes[j].objId.push(this._notesPlayed[i].objId); - MusicKeyboard.selectedNotes[j].duration.push(this._notesPlayed[i].duration); - MusicKeyboard.selectedNotes[j].voice.push(this._notesPlayed[i].voice); - MusicKeyboard.selectedNotes[j].blockNumber.push(this._notesPlayed[i].blockNumber); + this.selectedNotes[j].noteOctave.push(this._notesPlayed[i].noteOctave); + this.selectedNotes[j].objId.push(this._notesPlayed[i].objId); + this.selectedNotes[j].duration.push(this._notesPlayed[i].duration); + this.selectedNotes[j].voice.push(this._notesPlayed[i].voice); + this.selectedNotes[j].blockNumber.push(this._notesPlayed[i].blockNumber); i++; } j++; if (i < this._notesPlayed.length) { - MusicKeyboard.selectedNotes.push({ + this.selectedNotes.push({ noteOctave: [this._notesPlayed[i].noteOctave], objId: [this._notesPlayed[i].objId], duration: [this._notesPlayed[i].duration], @@ -579,7 +579,7 @@ class MusicKeyboard { */ playAll() { - if (MusicKeyboard.selectedNotes.length <= 0) { + if (this.selectedNotes.length <= 0) { return; } @@ -600,21 +600,21 @@ class MusicKeyboard { MusicKeyboard.ICONSIZE + '" vertical-align="middle" align-content="center">  '; - if (MusicKeyboard.selectedNotes.length < 1) { + if (this.selectedNotes.length < 1) { return; } const notes = []; let ele, zx, res, cell; - for (let i = 0; i < MusicKeyboard.selectedNotes[0].noteOctave.length; i++) { - if (this.keyboardShown && MusicKeyboard.selectedNotes[0].objId[0] !== null) { - ele = docById(MusicKeyboard.selectedNotes[0].objId[i]); + for (let i = 0; i < this.selectedNotes[0].noteOctave.length; i++) { + if (this.keyboardShown && this.selectedNotes[0].objId[0] !== null) { + ele = docById(this.selectedNotes[0].objId[i]); if (ele !== null) { ele.style.backgroundColor = "lightgrey"; } } - zx = MusicKeyboard.selectedNotes[0].noteOctave[i]; + zx = this.selectedNotes[0].noteOctave[i]; res = zx; if (typeof zx === "string") { res = zx.replace(SHARP, "#").replace(FLAT, "b"); @@ -631,10 +631,10 @@ class MusicKeyboard { this._stopOrCloseClicked = false; this._playChord( notes, - MusicKeyboard.selectedNotes[0].duration, - MusicKeyboard.selectedNotes[0].voice + this.selectedNotes[0].duration, + this.selectedNotes[0].voice ); - const maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[0].duration); + const maxWidth = Math.max.apply(Math, this.selectedNotes[0].duration); this.playOne(1, maxWidth, playButtonCell); } else { if (!this.keyboardShown) { @@ -669,7 +669,7 @@ class MusicKeyboard { playOne(counter, time, playButtonCell) { setTimeout(() => { let cell, eleid, ele, notes, zx, res, maxWidth; - if (counter < MusicKeyboard.selectedNotes.length) { + if (counter < this.selectedNotes.length) { if (this._stopOrCloseClicked) { return; } @@ -681,14 +681,14 @@ class MusicKeyboard { if ( this.keyboardShown && - MusicKeyboard.selectedNotes[counter - 1].objId[0] !== null + this.selectedNotes[counter - 1].objId[0] !== null ) { for ( let i = 0; - i < MusicKeyboard.selectedNotes[counter - 1].noteOctave.length; + i < this.selectedNotes[counter - 1].noteOctave.length; i++ ) { - eleid = MusicKeyboard.selectedNotes[counter - 1].objId[i]; + eleid = this.selectedNotes[counter - 1].objId[i]; ele = docById(eleid); if (eleid.includes("blackRow")) { ele.style.backgroundColor = "black"; @@ -699,18 +699,18 @@ class MusicKeyboard { } notes = []; - for (let i = 0; i < MusicKeyboard.selectedNotes[counter].noteOctave.length; i++) { + for (let i = 0; i < this.selectedNotes[counter].noteOctave.length; i++) { if ( this.keyboardShown && - MusicKeyboard.selectedNotes[counter].objId[0] !== null + this.selectedNotes[counter].objId[0] !== null ) { - ele = docById(MusicKeyboard.selectedNotes[counter].objId[i]); + ele = docById(this.selectedNotes[counter].objId[i]); if (ele !== null) { ele.style.backgroundColor = "lightgrey"; } } - zx = MusicKeyboard.selectedNotes[counter].noteOctave[i]; + zx = this.selectedNotes[counter].noteOctave[i]; res = zx; if (typeof zx === "string") { res = zx.replace(SHARP, "#").replace(FLAT, "b"); @@ -721,12 +721,12 @@ class MusicKeyboard { if (this.playingNow) { this._playChord( notes, - MusicKeyboard.selectedNotes[counter].duration, - MusicKeyboard.selectedNotes[counter].voice + this.selectedNotes[counter].duration, + this.selectedNotes[counter].voice ); } - maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[counter].duration); + maxWidth = Math.max.apply(Math, this.selectedNotes[counter].duration); this.playOne(counter + 1, maxWidth, playButtonCell); } else { playButtonCell.innerHTML = @@ -816,7 +816,7 @@ class MusicKeyboard { sortableList.push({ frequency: noteToFrequency( this.noteNames[i] + this.octaves[i], - logo.turtles.ithTurtle(0).singer.keySignature + turtles.ithTurtle(0).singer.keySignature ), noteName: this.noteNames[i], noteOctave: this.octaves[i], @@ -965,7 +965,7 @@ class MusicKeyboard { const rowNote = docById("mkbNoteDurationRow"); let cell; - for (let i = 0; i < MusicKeyboard.selectedNotes.length; i++) { + for (let i = 0; i < this.selectedNotes.length; i++) { cell = rowNote.cells[i]; cell.onclick = (event) => { @@ -1070,7 +1070,7 @@ class MusicKeyboard { docById("mkbInnerDiv").style.marginLeft = 0; const mkbTable = docById("mkbTable"); - if (MusicKeyboard.selectedNotes.length < 1) { + if (this.selectedNotes.length < 1) { outerDiv.innerHTML = ""; return; } @@ -1146,10 +1146,10 @@ class MusicKeyboard { '
'; const cellColor = "lightgrey"; let maxWidth, noteMaxWidth, row, ind, dur; - for (let j = 0; j < MusicKeyboard.selectedNotes.length; j++) { - maxWidth = Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration); + for (let j = 0; j < this.selectedNotes.length; j++) { + maxWidth = Math.max.apply(Math, this.selectedNotes[j].duration); noteMaxWidth = - this._noteWidth(Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration)) * 2 + + this._noteWidth(Math.max.apply(Math, this.selectedNotes[j].duration)) * 2 + "px"; n = this.layout.length; for (let i = 0; i < this.layout.length; i++) { @@ -1161,14 +1161,14 @@ class MusicKeyboard { cell.style.maxWidth = cell.style.width; if ( - MusicKeyboard.selectedNotes[j].blockNumber.indexOf( + this.selectedNotes[j].blockNumber.indexOf( this.layout[n - i - 1].blockNumber ) !== -1 ) { - ind = MusicKeyboard.selectedNotes[j].blockNumber.indexOf( + ind = this.selectedNotes[j].blockNumber.indexOf( this.layout[n - i - 1].blockNumber ); - cell.setAttribute("alt", MusicKeyboard.selectedNotes[j].duration[ind]); + cell.setAttribute("alt", this.selectedNotes[j].duration[ind]); cell.style.backgroundColor = "black"; cell.style.border = "2px solid white"; cell.style.borderRadius = "10px"; @@ -1182,7 +1182,7 @@ class MusicKeyboard { cell.setAttribute("cellColor", cellColor); } - dur = toFraction(Math.max.apply(Math, MusicKeyboard.selectedNotes[j].duration)); + dur = toFraction(Math.max.apply(Math, this.selectedNotes[j].duration)); row = docById("mkbNoteDurationRow"); cell = row.insertCell(); cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + 1 + "px"; @@ -1193,7 +1193,7 @@ class MusicKeyboard { cell.style.textAlign = "center"; cell.innerHTML = dur[0].toString() + "/" + dur[1].toString(); cell.setAttribute("id", "cells-" + j); - cell.setAttribute("start", MusicKeyboard.selectedNotes[j].startTime); + cell.setAttribute("start", this.selectedNotes[j].startTime); cell.setAttribute("dur", maxWidth); cell.style.backgroundColor = platformColor.rhythmcellcolor; } @@ -1307,12 +1307,12 @@ class MusicKeyboard { docById("wheelDivptm").style.left = Math.min( - logo.blocks.turtles._canvas.width - 200, + turtles._canvas.width - 200, Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - logo.blocks.turtles._canvas.height - 250, + turtles._canvas.height - 250, Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; @@ -1557,12 +1557,12 @@ class MusicKeyboard { docById("wheelDivptm").style.width = "300px"; docById("wheelDivptm").style.left = Math.min( - logo.blocks.turtles._canvas.width - 200, + turtles._canvas.width - 200, Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - logo.blocks.turtles._canvas.height - 250, + turtles._canvas.height - 250, Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; @@ -1721,7 +1721,7 @@ class MusicKeyboard { } else { aValue = noteToFrequency( a.noteName + a.noteOctave, - logo.turtles.ithTurtle(0).singer.keySignature + turtles.ithTurtle(0).singer.keySignature ); } if (b.noteName == "hertz") { @@ -1729,7 +1729,7 @@ class MusicKeyboard { } else { bValue = noteToFrequency( b.noteName + b.noteOctave, - logo.turtles.ithTurtle(0).singer.keySignature + turtles.ithTurtle(0).singer.keySignature ); } @@ -1937,12 +1937,12 @@ class MusicKeyboard { docById("wheelDivptm").style.width = "300px"; docById("wheelDivptm").style.left = Math.min( - logo.blocks.turtles._canvas.width - 200, + turtles._canvas.width - 200, Math.max(0, x * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.top = Math.min( - logo.blocks.turtles._canvas.height - 250, + turtles._canvas.height - 250, Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; @@ -2093,7 +2093,7 @@ class MusicKeyboard { labelValue, octave, 0, - logo.turtles.ithTurtle(0).singer.keySignature, + turtles.ithTurtle(0).singer.keySignature, false, null, logo.errorMsg, @@ -2471,11 +2471,11 @@ class MusicKeyboard { _save() { this.processSelected(); // console.debug("Generating action stack for: "); - // console.debug(MusicKeyboard.selectedNotes); + // console.debug(selectedNotes); const newStack = [ [0, ["action", { collapsed: false }], 100, 100, [null, 1, 2, null]], [1, ["text", { value: _("action") }], 0, 0, [0]], - [2, "hidden", 0, 0, [0, MusicKeyboard.selectedNotes.length == 0 ? null : 3]] + [2, "hidden", 0, 0, [0, this.selectedNotes.length == 0 ? null : 3]] ]; // This function organizes notes into groups with same voices. @@ -2524,7 +2524,7 @@ class MusicKeyboard { return ans; }; - const newNotes = this._clusterNotes(MusicKeyboard.selectedNotes); + const newNotes = this._clusterNotes(this.selectedNotes); let prevId = 2; let endOfStackIdx, id; @@ -2533,10 +2533,10 @@ class MusicKeyboard { const selectedNotesGrp = newNotes[noteGrp]; const isLast = noteGrp == newNotes.length - 1; id = newStack.length; - const voice = MusicKeyboard.selectedNotes[selectedNotesGrp[0]].voice[0] || DEFAULTVOICE; + const voice = this.selectedNotes[selectedNotesGrp[0]].voice[0] || DEFAULTVOICE; const next = isLast ? null - : id + 3 + this.findLen(selectedNotesGrp, MusicKeyboard.selectedNotes); + : id + 3 + this.findLen(selectedNotesGrp, this.selectedNotes); newStack.push( [id, "settimbre", 0, 0, [prevId, id + 1, id + 3, id + 2]], @@ -2548,7 +2548,7 @@ class MusicKeyboard { endOfStackIdx = id; for (let i = 0; i < selectedNotesGrp.length; i++) { - const note = MusicKeyboard.selectedNotes[selectedNotesGrp[i]]; + const note = this.selectedNotes[selectedNotesGrp[i]]; // Add the Note block and its value const idx = newStack.length;