From 63bad34a1464af21a745e28b6b8105c799ee58ec Mon Sep 17 00:00:00 2001 From: Kumar Saurabh Raj Date: Sun, 31 Jan 2021 13:01:14 +0530 Subject: [PATCH] piemenu: prettify code --- js/piemenus.js | 1749 ++++++++++++++++++++++-------------------------- 1 file changed, 792 insertions(+), 957 deletions(-) diff --git a/js/piemenus.js b/js/piemenus.js index 6316f98719..826a48144c 100644 --- a/js/piemenus.js +++ b/js/piemenus.js @@ -48,56 +48,65 @@ /*exported piemenuModes ,piemenuPitches, piemenuCustomNotes, piemenuGrid, piemenuBlockContext, piemenuIntervals, piemenuVoices, piemenuBoolean, piemenuBasic, piemenuColor, piemenuNumber, piemenuNthModalPitch, piemenuNoteValue, piemenuAccidentals*/ -const piemenuPitches = function( - block, noteLabels, noteValues, accidentals, note, accidental, custom) { +const piemenuPitches = function ( + block, + noteLabels, + noteValues, + accidentals, + note, + accidental, + custom +) { let prevPitch = null; - + // wheelNav pie menu for pitch selection if (block.blocks.stageClick) { return; } - + if (custom === undefined) { custom = false; } - + // Some blocks have both pitch and octave, so we can modify // both at once. - const hasOctaveWheel = block.connections[0] !== null && + const hasOctaveWheel = + block.connections[0] !== null && ["pitch", "setpitchnumberoffset", "invert1", "tofrequency"].indexOf( - block.blocks.blockList[block.connections[0]].name) !== -1; - + block.blocks.blockList[block.connections[0]].name + ) !== -1; + // If we are attached to a set key block, we want to order // pitch by fifths. - if (block.connections[0] !== null && - ["setkey", "setkey2"].indexOf(block.blocks.blockList[block.connections[0]].name - ) !== -1) { + if ( + block.connections[0] !== null && + ["setkey", "setkey2"].indexOf(block.blocks.blockList[block.connections[0]].name) !== -1 + ) { noteLabels = ["C", "G", "D", "A", "E", "B", "F"]; noteValues = ["C", "G", "D", "A", "E", "B", "F"]; } - + docById("wheelDiv").style.display = ""; - + // the pitch selector block._pitchWheel = new wheelnav("wheelDiv", null, 600, 600); - + if (!custom) { // the accidental selector - block._accidentalsWheel = new wheelnav("_accidentalsWheel", - block._pitchWheel.raphael); + block._accidentalsWheel = new wheelnav("_accidentalsWheel", block._pitchWheel.raphael); } // the octave selector if (hasOctaveWheel) { block._octavesWheel = new wheelnav("_octavesWheel", block._pitchWheel.raphael); } - + // exit button block._exitWheel = new wheelnav("_exitWheel", block._pitchWheel.raphael); - + wheelnav.cssMode = true; - + block._pitchWheel.keynavigateEnabled = false; - + block._pitchWheel.colors = platformColor.pitchWheelcolors; block._pitchWheel.slicePathFunction = slicePath().DonutSlice; block._pitchWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -107,13 +116,13 @@ const piemenuPitches = function( } else { block._pitchWheel.slicePathCustom.maxRadiusPercent = 0.75; } - + block._pitchWheel.sliceSelectedPathCustom = block._pitchWheel.slicePathCustom; block._pitchWheel.sliceInitPathCustom = block._pitchWheel.slicePathCustom; - + block._pitchWheel.animatetime = 0; // 300; block._pitchWheel.createWheel(noteLabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -123,17 +132,15 @@ const piemenuPitches = function( block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + if (!custom) { block._accidentalsWheel.colors = platformColor.accidentalsWheelcolors; block._accidentalsWheel.slicePathFunction = slicePath().DonutSlice; block._accidentalsWheel.slicePathCustom = slicePath().DonutSliceCustomization(); block._accidentalsWheel.slicePathCustom.minRadiusPercent = 0.5; block._accidentalsWheel.slicePathCustom.maxRadiusPercent = 0.75; - block._accidentalsWheel.sliceSelectedPathCustom = - block._accidentalsWheel.slicePathCustom; - block._accidentalsWheel.sliceInitPathCustom = - block._accidentalsWheel.slicePathCustom; + block._accidentalsWheel.sliceSelectedPathCustom = block._accidentalsWheel.slicePathCustom; + block._accidentalsWheel.sliceInitPathCustom = block._accidentalsWheel.slicePathCustom; const accidentalLabels = []; for (let i = 0; i < accidentals.length; i++) { @@ -142,9 +149,7 @@ const piemenuPitches = function( for (let i = 0; i < 9; i++) { accidentalLabels.push(null); - block._accidentalsWheel.colors.push( - platformColor.accidentalsWheelcolorspush - ); + block._accidentalsWheel.colors.push(platformColor.accidentalsWheelcolorspush); } block._accidentalsWheel.animatetime = 0; // 300; @@ -165,31 +170,55 @@ const piemenuPitches = function( block._octavesWheel.slicePathCustom.maxRadiusPercent = 0.95; block._octavesWheel.sliceSelectedPathCustom = block._octavesWheel.slicePathCustom; block._octavesWheel.sliceInitPathCustom = block._octavesWheel.slicePathCustom; - const octaveLabels = ["8", "7", "6", "5", "4", "3", "2", "1", - null, null, null, null, null, null]; + const octaveLabels = [ + "8", + "7", + "6", + "5", + "4", + "3", + "2", + "1", + null, + null, + null, + null, + null, + null + ]; block._octavesWheel.animatetime = 0; // 300; block._octavesWheel.createWheel(octaveLabels); } - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; - docById("wheelDiv").style.left = Math.min( - block.blocks.turtles._canvas.width - 300, Math.max(0, Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - 200) - ) + "px"; - docById("wheelDiv").style.top = Math.min( - block.blocks.turtles._canvas.height - 350, Math.max(0, Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - 200) - ) + "px"; - + docById("wheelDiv").style.left = + Math.min( + block.blocks.turtles._canvas.width - 300, + Math.max( + 0, + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 + ) + ) + "px"; + docById("wheelDiv").style.top = + Math.min( + block.blocks.turtles._canvas.height - 350, + Math.max( + 0, + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 + ) + ) + "px"; + // Navigate to a the current note value. let i = noteValues.indexOf(note); if (i === -1) { @@ -199,24 +228,31 @@ const piemenuPitches = function( i = 4; } } - + prevPitch = i; - + block._pitchWheel.navigateWheel(i); - - const OFFSET = {"major": 1, "dorian": 2, "phrygian": 3, "lydian": 4, - "mixolydian": 5, "minor": 6, "locrian": 7}; - - const ROTATION = {"A" : 2, "B" : 1, "C" : 0, "D" : 6, "E" : 5, "F" : 4, "G" : 3}; - + + const OFFSET = { + major: 1, + dorian: 2, + phrygian: 3, + lydian: 4, + mixolydian: 5, + minor: 6, + locrian: 7 + }; + + const ROTATION = { A: 2, B: 1, C: 0, D: 6, E: 5, F: 4, G: 3 }; + const k = OFFSET[KeySignatureEnv[1]]; - + let key; const attrList = ["", SHARP, FLAT]; for (const j in attrList) { for (const i in NOTENAMES) { const tempScale = _buildScale(NOTENAMES[i] + attrList[j] + " major")[0]; - if (tempScale[k-1] == KeySignatureEnv[0]) { + if (tempScale[k - 1] == KeySignatureEnv[0]) { key = NOTENAMES[i] + attrList[j]; //console.debug(key); break; @@ -228,27 +264,32 @@ const piemenuPitches = function( } let scale = _buildScale(key + " major")[0]; scale = scale.splice(0, scale.length - 1); - + for (let j = 0; j < ROTATION[key[0]]; j++) { scale.push(scale.shift()); } - + // auto selection of sharps and flats in fixed solfege // handles the case of opening the pie-menu, not whilst in the pie-menu - if ((!KeySignatureEnv[2] && block.name === "solfege") || - (block.name === "notename") && - (block.connections[0] != undefined ? ["setkey", "setkey2"].indexOf( - block.blocks.blockList[block.connections[0]].name) === -1: true)) { + if ( + (!KeySignatureEnv[2] && block.name === "solfege") || + (block.name === "notename" && + (block.connections[0] != undefined + ? ["setkey", "setkey2"].indexOf( + block.blocks.blockList[block.connections[0]].name + ) === -1 + : true)) + ) { if (scale[6 - i][0] == FIXEDSOLFEGE[note] || scale[6 - i][0] == note) { accidental = scale[6 - i].substr(1); } else { - accidental = EQUIVALENTACCIDENTALS[scale[6-i]].substr(1); + accidental = EQUIVALENTACCIDENTALS[scale[6 - i]].substr(1); } block.value = block.value.replace(SHARP, "").replace(FLAT, ""); block.value += accidental; block.text.text = block.value; } - + if (!custom) { // Navigate to a the current accidental value. if (accidental === "") { @@ -276,7 +317,7 @@ const piemenuPitches = function( } } } - + if (hasOctaveWheel) { // Use the octave associated with block block, if available. const pitchOctave = block.blocks.findPitchOctave(block.connections[0]); @@ -285,20 +326,20 @@ const piemenuPitches = function( block._octavesWheel.navigateWheel(8 - pitchOctave); // const prevOctave = 8 - pitchOctave; } - + // Set up event handlers const that = block; const selection = { - "note": note, - "attr": accidental + note: note, + attr: accidental }; - + /* * Preview the selected pitch using the synth * @return{void} * @private */ - const __pitchPreview = function() { + const __pitchPreview = function () { const label = that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex].title; const i = noteLabels.indexOf(label); @@ -328,8 +369,8 @@ const piemenuPitches = function( prevPitch = i; let note = noteValues[i]; if (!custom) { - attr = that._accidentalsWheel.navItems[ - that._accidentalsWheel.selectedNavItemIndex].title; + attr = + that._accidentalsWheel.navItems[that._accidentalsWheel.selectedNavItemIndex].title; if (label === " ") { return; } else if (attr !== "♮") { @@ -339,8 +380,9 @@ const piemenuPitches = function( let octave; if (hasOctaveWheel) { - octave = Number(that._octavesWheel.navItems[ - that._octavesWheel.selectedNavItemIndex].title); + octave = Number( + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title + ); } else { octave = 4; } @@ -356,7 +398,7 @@ const piemenuPitches = function( that._octavesWheel.navigateWheel(8 - octave); that.blocks.setPitchOctave(that.connections[0], octave); } - + const keySignature = KeySignatureEnv[0] + " " + KeySignatureEnv[1]; let obj; @@ -364,12 +406,28 @@ const piemenuPitches = function( note = note.replace(attr, ""); note = SOLFEGENAMES[note - 1]; note += attr; - obj = getNote(note, octave, 0, keySignature, true, null, - that.blocks.errorMsg, that.blocks.logo.synth.inTemperament); + obj = getNote( + note, + octave, + 0, + keySignature, + true, + null, + that.blocks.errorMsg, + that.blocks.logo.synth.inTemperament + ); } else { // console.debug(note); - obj = getNote(note, octave, 0, keySignature, KeySignatureEnv[2], null, - that.blocks.errorMsg, that.blocks.logo.synth.inTemperament); + obj = getNote( + note, + octave, + 0, + keySignature, + KeySignatureEnv[2], + null, + that.blocks.errorMsg, + that.blocks.logo.synth.inTemperament + ); } if (!custom) { obj[0] = obj[0].replace(SHARP, "#").replace(FLAT, "b"); @@ -377,8 +435,10 @@ const piemenuPitches = function( const tur = that.blocks.logo.turtles.ithTurtle(0); - if (tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1) { + if ( + tur.singer.instrumentNames.length === 0 || + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); that.blocks.logo.synth.loadSynth(0, DEFAULTVOICE); @@ -389,18 +449,16 @@ const piemenuPitches = function( if (!that._triggerLock) { that._triggerLock = true; - that.blocks.logo.synth.trigger(0, [obj[0] + obj[1]], 1 / 8, DEFAULTVOICE, - null, null); + that.blocks.logo.synth.trigger(0, [obj[0] + obj[1]], 1 / 8, DEFAULTVOICE, null, null); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); }; - const __selectionChangedSolfege = function() { - selection["note"] = - that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex].title; + const __selectionChangedSolfege = function () { + selection["note"] = that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex].title; const i = noteLabels.indexOf(selection["note"]); that.value = noteValues[i]; @@ -409,16 +467,23 @@ const piemenuPitches = function( // FIXEDSOLFEGE converts solfege to alphabet, needed for solfege pie-menu // In case of alphabet, direct comparison is performed - if ((!KeySignatureEnv[2] && that.name == "solfege") || - (that.name == "notename") && - (that.connections[0] != undefined ? ["setkey", "setkey2"].indexOf( - that.blocks.blockList[that.connections[0]].name) === -1: true)) { + if ( + (!KeySignatureEnv[2] && that.name == "solfege") || + (that.name == "notename" && + (that.connections[0] != undefined + ? ["setkey", "setkey2"].indexOf( + that.blocks.blockList[that.connections[0]].name + ) === -1 + : true)) + ) { let i = NOTENAMES.indexOf(FIXEDSOLFEGE[selection["note"]]); if (i == -1) { i = NOTENAMES.indexOf(selection["note"]); } - if (scale[i][0] == FIXEDSOLFEGE[selection["note"]] || - scale[i][0] == selection["note"]) { + if ( + scale[i][0] == FIXEDSOLFEGE[selection["note"]] || + scale[i][0] == selection["note"] + ) { selection["attr"] = scale[i].substr(1); } else { selection["attr"] = EQUIVALENTACCIDENTALS[scale[i]].substr(1); @@ -456,31 +521,32 @@ const piemenuPitches = function( if (hasOctaveWheel) { // Set the octave of the pitch block if available const octave = Number( - that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex - ].title); + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title + ); that.blocks.setPitchOctave(that.connections[0], octave); } - if (that.connections[0] !== null && ["setkey", "setkey2"].indexOf( - that.blocks.blockList[that.connections[0]].name) !== -1) { + if ( + that.connections[0] !== null && + ["setkey", "setkey2"].indexOf(that.blocks.blockList[that.connections[0]].name) !== -1 + ) { // We may need to update the mode widget. that.blocks.logo.modeBlock = that.blocks.blockList.indexOf(that); } __pitchPreview(); }; - + const __selectionChangedOctave = () => { const octave = Number( - that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex - ].title); + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title + ); that.blocks.setPitchOctave(that.connections[0], octave); __pitchPreview(); }; - + const __selectionChangedAccidental = () => { selection["attr"] = - that._accidentalsWheel.navItems[that._accidentalsWheel.selectedNavItemIndex - ].title; + that._accidentalsWheel.navItems[that._accidentalsWheel.selectedNavItemIndex].title; if (selection["attr"] !== "♮") { that.value = selection["note"] + selection["attr"]; } else { @@ -491,27 +557,26 @@ const piemenuPitches = function( that.updateCache(); __pitchPreview(); }; - + // Set up handlers for pitch preview. for (let i = 0; i < noteValues.length; i++) { block._pitchWheel.navItems[i].navigateFunction = __selectionChangedSolfege; } - + if (!custom) { for (let i = 0; i < accidentals.length; i++) { - block._accidentalsWheel.navItems[i].navigateFunction = - __selectionChangedAccidental; + block._accidentalsWheel.navItems[i].navigateFunction = __selectionChangedAccidental; } } - + if (hasOctaveWheel) { for (let i = 0; i < 8; i++) { block._octavesWheel.navItems[i].navigateFunction = __selectionChangedOctave; } } - + // Hide the widget when the exit button is clicked. - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._pitchWheel.removeWheel(); @@ -525,38 +590,44 @@ const piemenuPitches = function( }; }; - -const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCustom, selectedNote) { +const piemenuCustomNotes = function ( + block, + noteLabels, + customLabels, + selectedCustom, + selectedNote +) { // pie menu for customNote selection if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // Some blocks have both pitch and octave, so we can modify // both at once. - const hasOctaveWheel = block.connections[0] !== null && + const hasOctaveWheel = + block.connections[0] !== null && ["pitch", "setpitchnumberoffset", "invert1", "tofrequency"].indexOf( - block.blocks.blockList[block.connections[0]].name) !== -1; - + block.blocks.blockList[block.connections[0]].name + ) !== -1; + // Use advanced constructor for more wheelnav on same div block._customWheel = new wheelnav("wheelDiv", null, 800, 800); - + block._cusNoteWheel = new wheelnav("_cusNoteWheel", block._customWheel.raphael); // exit button block._exitWheel = new wheelnav("_exitWheel", block._customWheel.raphael); - + // the octave selector if (hasOctaveWheel) { block._octavesWheel = new wheelnav("_octavesWheel", block._customWheel.raphael); } - - + wheelnav.cssMode = true; - + block._customWheel.keynavigateEnabled = false; - + //Customize slicePaths for proper size block._customWheel.colors = platformColor.intervalNameWheelcolors; block._customWheel.slicePathFunction = slicePath().DonutSlice; @@ -569,7 +640,7 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus block._customWheel.animatetime = 0; // 300; block._customWheel.clickModeRotate = false; block._customWheel.createWheel(customLabels); - + block._cusNoteWheel.colors = platformColor.intervalWheelcolors; block._cusNoteWheel.slicePathFunction = slicePath().DonutSlice; block._cusNoteWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -579,7 +650,7 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus block._cusNoteWheel.titleFont = "100 24px Impact, sans-serif"; block._cusNoteWheel.sliceSelectedPathCustom = block._cusNoteWheel.slicePathCustom; block._cusNoteWheel.sliceInitPathCustom = block._cusNoteWheel.slicePathCustom; - + if (hasOctaveWheel) { block._octavesWheel.colors = platformColor.octavesWheelcolors; block._octavesWheel.slicePathFunction = slicePath().DonutSlice; @@ -588,37 +659,51 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus block._octavesWheel.slicePathCustom.maxRadiusPercent = 1; block._octavesWheel.sliceSelectedPathCustom = block._octavesWheel.slicePathCustom; block._octavesWheel.sliceInitPathCustom = block._octavesWheel.slicePathCustom; - const octaveLabels = ["8", "7", "6", "5", "4", "3", "2", "1", - null, null, null, null, null, null]; + const octaveLabels = [ + "8", + "7", + "6", + "5", + "4", + "3", + "2", + "1", + null, + null, + null, + null, + null, + null + ]; block._octavesWheel.animatetime = 0; // 300; block._octavesWheel.createWheel(octaveLabels); } - + //Disable rotation, set navAngle and create the menus block._cusNoteWheel.clickModeRotate = false; block._cusNoteWheel.animatetime = 0; // 300; const labels = []; - let blockCustom=0; - let max =0 ; + let blockCustom = 0; + let max = 0; for (const t of customLabels) { - max = max > noteLabels[t]["pitchNumber"] ? max : noteLabels[t]["pitchNumber"] ; + max = max > noteLabels[t]["pitchNumber"] ? max : noteLabels[t]["pitchNumber"]; } for (const t of customLabels) { - for(let k =noteLabels[t].length -1 ; k>=0 ;k--) { + for (let k = noteLabels[t].length - 1; k >= 0; k--) { if (k !== "pitchNumber") { labels.push(noteLabels[t][k][1]); - blockCustom ++ ; + blockCustom++; } } - for (let extra = max - blockCustom ; extra > 0 ;extra--){ + for (let extra = max - blockCustom; extra > 0; extra--) { labels.push(""); } - blockCustom = 0 ; + blockCustom = 0; } - + block._cusNoteWheel.navAngle = -(180 / customLabels.length) + 180 / labels.length; block._cusNoteWheel.createWheel(labels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -628,30 +713,38 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const that = block; - + // position widget const x = block.container.x; const y = block.container.y; - + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "400px"; docById("wheelDiv").style.width = "400px"; - docById("wheelDiv").style.left = Math.min( - block.blocks.turtles._canvas.width - 400, - Math.max(0, Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft - ) - 200)) + "px"; - docById("wheelDiv").style.top = Math.min( - block.blocks.turtles._canvas.height - 450, - Math.max(0, Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop - ) - 200)) + "px"; - + docById("wheelDiv").style.left = + Math.min( + block.blocks.turtles._canvas.width - 400, + Math.max( + 0, + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 + ) + ) + "px"; + docById("wheelDiv").style.top = + Math.min( + block.blocks.turtles._canvas.height - 450, + Math.max( + 0, + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 + ) + ) + "px"; + if (hasOctaveWheel) { // Use the octave associated with block block, if available. const pitchOctave = block.blocks.findPitchOctave(block.connections[0]); @@ -659,14 +752,13 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus // Navigate to current octave block._octavesWheel.navigateWheel(8 - pitchOctave); } - + // Add function to each main menu for show/hide sub menus // FIXME: Add all tabs to each interval - const __setupAction = function(i) { - that._customWheel.navItems[i].navigateFunction = function() { + const __setupAction = function (i) { + that._customWheel.navItems[i].navigateFunction = function () { that.customID = - that._customWheel.navItems[that._customWheel.selectedNavItemIndex - ].title; + that._customWheel.navItems[that._customWheel.selectedNavItemIndex].title; for (let l = 0; l < customLabels.length; l++) { for (let j = 0; j < max; j++) { if (l !== i) { @@ -680,57 +772,57 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus } }; }; - + // Set up action for interval name so number tabs will // initialize on load. for (let ii = 0; ii < customLabels.length; ii++) { __setupAction(ii); } - + // navigate to a specific starting point - + let ii; for (ii = 0; ii < customLabels.length; ii++) { if (selectedCustom === customLabels[ii]) { break; } } - + if (ii === customLabels.length) { ii = 0; } - + block._customWheel.navigateWheel(ii); - - let j = selectedNote ; - for (const x in noteLabels[selectedCustom]){ + + let j = selectedNote; + for (const x in noteLabels[selectedCustom]) { if (x != "pitchNumber" && noteLabels[selectedCustom][x][1] == j) { - j = +x ; break ; + j = +x; + break; } } - - if (typeof j == "number") + + if (typeof j == "number") block._cusNoteWheel.navigateWheel(max * customLabels.indexOf(selectedCustom) + j); - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; }; - - const __selectionChanged = function() { - const label = that._customWheel.navItems[that._customWheel.selectedNavItemIndex - ].title; - const note = that._cusNoteWheel.navItems[that._cusNoteWheel.selectedNavItemIndex - ].title; + + const __selectionChanged = function () { + const label = that._customWheel.navItems[that._customWheel.selectedNavItemIndex].title; + const note = that._cusNoteWheel.navItems[that._cusNoteWheel.selectedNavItemIndex].title; that.value = note; - that.text.text =note; - let octave = 4 ; + that.text.text = note; + let octave = 4; if (hasOctaveWheel) { // Set the octave of the pitch block if available - octave = Number(that._octavesWheel.navItems[ - that._octavesWheel.selectedNavItemIndex].title); + octave = Number( + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title + ); that.blocks.setPitchOctave(that.connections[0], octave); } @@ -738,12 +830,13 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); - const obj = getNote(note, octave, 0, "C major", false, null, - that.blocks.errorMsg, label); + const obj = getNote(note, octave, 0, "C major", false, null, that.blocks.errorMsg, label); const tur = that.blocks.logo.turtles.ithTurtle(0); - if (tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1) { + if ( + tur.singer.instrumentNames.length === 0 || + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); that.blocks.logo.synth.loadSynth(0, DEFAULTVOICE); @@ -755,16 +848,16 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus if (!that._triggerLock) { //preview : that._triggerLock = true; - let no = [obj[0]+obj[1]]; - const notes1 = no ; - no = that.blocks.logo.synth.getCustomFrequency(no,that.customID); + let no = [obj[0] + obj[1]]; + const notes1 = no; + no = that.blocks.logo.synth.getCustomFrequency(no, that.customID); if (no === undefined) { no = notes1; } - instruments[0][DEFAULTVOICE].triggerAttackRelease(no, 1/8); + instruments[0][DEFAULTVOICE].triggerAttackRelease(no, 1 / 8); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); }; @@ -779,44 +872,40 @@ const piemenuCustomNotes = function(block, noteLabels, customLabels, selectedCus for (let i = 0; i < labels.length; i++) { block._cusNoteWheel.navItems[i].navigateFunction = __selectionChanged; } - + block._exitWheel.navItems[0].navigateFunction = __exitMenu; }; - -const piemenuNthModalPitch = function(block, noteValues, note) { +const piemenuNthModalPitch = function (block, noteValues, note) { // wheelNav pie menu for scale degree pitch selection - + // check if a non-integer value is connected to note argument // Pie menu would crash; so in such case navigate to closest integer - + if (note % 1 !== 0) { note = Math.floor(note + 0.5); } - + if (block.blocks.stageClick) { return; } - + const noteLabels = []; for (let i = 0; i < noteValues.length; i++) { noteLabels.push(noteValues[i].toString()); } noteLabels.push(null); - + docById("wheelDiv").style.display = ""; - + block._pitchWheel = new wheelnav("wheelDiv", null, 600, 600); - block._octavesWheel = new wheelnav( - "_octavesWheel", - block._pitchWheel.raphael - ); + block._octavesWheel = new wheelnav("_octavesWheel", block._pitchWheel.raphael); block._exitWheel = new wheelnav("_exitWheel", block._pitchWheel.raphael); - + wheelnav.cssMode = true; - + block._pitchWheel.keynavigateEnabled = false; - + block._pitchWheel.colors = platformColor.pitchWheelcolors; block._pitchWheel.slicePathFunction = slicePath().DonutSlice; block._pitchWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -824,10 +913,10 @@ const piemenuNthModalPitch = function(block, noteValues, note) { block._pitchWheel.slicePathCustom.maxRadiusPercent = 0.72; block._pitchWheel.sliceSelectedPathCustom = block._pitchWheel.slicePathCustom; block._pitchWheel.sliceInitPathCustom = block._pitchWheel.slicePathCustom; - + block._pitchWheel.animatetime = 0; // 300; block._pitchWheel.createWheel(noteLabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -837,12 +926,12 @@ const piemenuNthModalPitch = function(block, noteValues, note) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + block._octavesWheel.colors = platformColor.octavesWheelcolors; block._octavesWheel.slicePathFunction = slicePath().DonutSlice; block._octavesWheel.slicePathCustom = slicePath().DonutSliceCustomization(); - block._octavesWheel.slicePathCustom.minRadiusPercent = 0.80; - block._octavesWheel.slicePathCustom.maxRadiusPercent = 1.00; + block._octavesWheel.slicePathCustom.minRadiusPercent = 0.8; + block._octavesWheel.slicePathCustom.maxRadiusPercent = 1.0; block._octavesWheel.sliceSelectedPathCustom = block._octavesWheel.slicePathCustom; block._octavesWheel.sliceInitPathCustom = block._octavesWheel.slicePathCustom; const octaveLabels = [ @@ -863,7 +952,7 @@ const piemenuNthModalPitch = function(block, noteValues, note) { ]; block._octavesWheel.animatetime = 0; // 300; block._octavesWheel.createWheel(octaveLabels); - + // enable changing values while pie-menu is open const labelElem = docById("labelDiv"); labelElem.innerHTML = @@ -871,74 +960,60 @@ const piemenuNthModalPitch = function(block, noteValues, note) { note + '" />'; labelElem.classList.add("hasKeyboard"); - + block.label = docById("numberLabel"); - block.label.addEventListener( - "keypress", - block._exitKeyPressed.bind(block) - ); - + block.label.addEventListener("keypress", block._exitKeyPressed.bind(block)); + // Position the widget above/below note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; - + const selectorWidth = 150; - const left = Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft - ); - const top = Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop - ); + const left = Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft); + const top = Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop); block.label.style.left = left + "px"; block.label.style.top = top + "px"; - + docById("wheelDiv").style.left = Math.min( Math.max(left - (300 - selectorWidth) / 2, 0), block.blocks.turtles._canvas.width - 300 ) + "px"; - + if (top - 300 < 0) { docById("wheelDiv").style.top = top + 40 + "px"; } else { docById("wheelDiv").style.top = top - 300 + "px"; } - + block.label.style.width = - (Math.round(selectorWidth * block.blocks.blockScale) * - block.protoblock.scale) / - 2 + - "px"; - + (Math.round(selectorWidth * block.blocks.blockScale) * block.protoblock.scale) / 2 + "px"; + block.label.style.fontSize = - Math.round( - (20 * block.blocks.blockScale * block.protoblock.scale) / 2 - ) + "px"; - + Math.round((20 * block.blocks.blockScale * block.protoblock.scale) / 2) + "px"; + // Navigate to a the current note value. const i = noteValues.indexOf(note); - + block._pitchWheel.navigateWheel(i); - + // Use the octave associated with block block, if available. const pitchOctave = block.blocks.findPitchOctave(block.connections[0]); - + // Navigate to current octave block._octavesWheel.navigateWheel(8 - pitchOctave); - + // Set up event handlers const that = block; - - block.label.addEventListener("change", function() { + + block.label.addEventListener("change", function () { that._labelChanged(false, false); }); @@ -947,10 +1022,8 @@ const piemenuNthModalPitch = function(block, noteValues, note) { * @return{void} * @private */ - const __selectionChanged = function() { - const label = - that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex] - .title; + const __selectionChanged = function () { + const label = that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex].title; const i = noteLabels.indexOf(label); that.value = noteValues[i]; that.text.text = label; @@ -961,21 +1034,18 @@ const piemenuNthModalPitch = function(block, noteValues, note) { // Set the octave of the pitch block if available const octave = Number( - that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex - ].title + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title ); that.blocks.setPitchOctave(that.connections[0], octave); }; - + /* * Preview pitch * @return{void} * @private */ - const __pitchPreview = function() { - const label = - that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex] - .title; + const __pitchPreview = function () { + const label = that._pitchWheel.navItems[that._pitchWheel.selectedNavItemIndex].title; const i = noteLabels.indexOf(label); /* We're using a default of C major ==> -7 to -1 should be one octave lower @@ -990,9 +1060,7 @@ const piemenuNthModalPitch = function(block, noteValues, note) { // prevPitch = i; let octave = Number( - that._octavesWheel.navItems[ - that._octavesWheel.selectedNavItemIndex - ].title + that._octavesWheel.navItems[that._octavesWheel.selectedNavItemIndex].title ); octave += deltaOctave; if (octave < 1) { @@ -1015,7 +1083,7 @@ const piemenuNthModalPitch = function(block, noteValues, note) { if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); @@ -1038,7 +1106,7 @@ const piemenuNthModalPitch = function(block, noteValues, note) { ); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); @@ -1048,13 +1116,13 @@ const piemenuNthModalPitch = function(block, noteValues, note) { for (let i = 0; i < noteValues.length; i++) { block._pitchWheel.navItems[i].navigateFunction = __pitchPreview; } - + for (let i = 0; i < 8; i++) { block._octavesWheel.navItems[i].navigateFunction = __pitchPreview; } - + // Hide the widget when the exit button is clicked. - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._pitchWheel.removeWheel(); @@ -1063,36 +1131,31 @@ const piemenuNthModalPitch = function(block, noteValues, note) { }; }; - -const piemenuAccidentals = function( - block, accidentalLabels, accidentalValues, accidental) { +const piemenuAccidentals = function (block, accidentalLabels, accidentalValues, accidental) { // wheelNav pie menu for accidental selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // the accidental selector block._accidentalWheel = new wheelnav("wheelDiv", null, 600, 600); // exit button - block._exitWheel = new wheelnav( - "_exitWheel", - block._accidentalWheel.raphael - ); - + block._exitWheel = new wheelnav("_exitWheel", block._accidentalWheel.raphael); + const labels = []; for (let i = 0; i < accidentalLabels.length; i++) { labels.push(last(accidentalLabels[i].split(" "))); } - + labels.push(null); - + wheelnav.cssMode = true; - + block._accidentalWheel.keynavigateEnabled = false; - + block._accidentalWheel.colors = platformColor.accidentalsWheelcolors; block._accidentalWheel.slicePathFunction = slicePath().DonutSlice; block._accidentalWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1104,7 +1167,7 @@ const piemenuAccidentals = function( block._accidentalWheel.animatetime = 0; // 300; block._accidentalWheel.createWheel(labels); block._accidentalWheel.setTooltips(accidentalLabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1114,14 +1177,12 @@ const piemenuAccidentals = function( block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const that = block; - - const __selectionChanged = function() { + + const __selectionChanged = function () { const label = - that._accidentalWheel.navItems[ - that._accidentalWheel.selectedNavItemIndex - ].title; + that._accidentalWheel.navItems[that._accidentalWheel.selectedNavItemIndex].title; const i = labels.indexOf(label); that.value = accidentalValues[i]; that.text.text = accidentalLabels[i]; @@ -1130,28 +1191,26 @@ const piemenuAccidentals = function( that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - + /* * Exit menu * @return{void} * @private */ - const __exitMenu = function() { + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._accidentalWheel.removeWheel(); that._exitWheel.removeWheel(); }; - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; @@ -1160,11 +1219,8 @@ const piemenuAccidentals = function( block.blocks.turtles._canvas.width - 300, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -1172,46 +1228,42 @@ const piemenuAccidentals = function( block.blocks.turtles._canvas.height - 350, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + // Navigate to a the current accidental value. let i = accidentalValues.indexOf(accidental); if (i === -1) { i = 2; } - + block._accidentalWheel.navigateWheel(i); - + // Hide the widget when the selection is made. for (let i = 0; i < accidentalLabels.length; i++) { - block._accidentalWheel.navItems[i].navigateFunction = function() { + block._accidentalWheel.navItems[i].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; } - + // Or use the exit wheel... - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { __exitMenu(); }; }; - -const piemenuNoteValue = function(block, noteValue) { +const piemenuNoteValue = function (block, noteValue) { // input form and wheelNav pie menu for note value selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // We want powers of two on the bottom, nearest the input box // as it is most common. const WHEELVALUES = [3, 2, 7, 5]; @@ -1221,15 +1273,13 @@ const piemenuNoteValue = function(block, noteValue) { 5: [1, 5, 10, 15, 20, 25], 7: [1, 7, 14, 21, 28, 35] }; - + let cblk = block.connections[0]; if (cblk !== null) { cblk = block.blocks.blockList[cblk].connections[0]; if ( cblk !== null && - ["neighbor", "neighbor2"].indexOf( - block.blocks.blockList[cblk].name - ) !== -1 + ["neighbor", "neighbor2"].indexOf(block.blocks.blockList[cblk].name) !== -1 ) { subWheelValues = { 2: [8, 16, 32, 64], @@ -1239,29 +1289,23 @@ const piemenuNoteValue = function(block, noteValue) { }; } } - + // the noteValue selector block._noteValueWheel = new wheelnav("wheelDiv", null, 600, 600); // exit button - block._exitWheel = new wheelnav( - "_exitWheel", - block._noteValueWheel.raphael - ); + block._exitWheel = new wheelnav("_exitWheel", block._noteValueWheel.raphael); // submenu wheel - block._tabsWheel = new wheelnav( - "_tabsWheel", - block._noteValueWheel.raphael - ); - + block._tabsWheel = new wheelnav("_tabsWheel", block._noteValueWheel.raphael); + const noteValueLabels = []; for (let i = 0; i < WHEELVALUES.length; i++) { noteValueLabels.push(WHEELVALUES[i].toString()); } - + wheelnav.cssMode = true; - + block._noteValueWheel.keynavigateEnabled = false; - + block._noteValueWheel.colors = platformColor.noteValueWheelcolors; block._noteValueWheel.slicePathFunction = slicePath().DonutSlice; block._noteValueWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1272,7 +1316,7 @@ const piemenuNoteValue = function(block, noteValue) { block._noteValueWheel.animatetime = 0; // 300; block._noteValueWheel.clickModeRotate = false; block._noteValueWheel.createWheel(noteValueLabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1282,14 +1326,14 @@ const piemenuNoteValue = function(block, noteValue) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const tabsLabels = []; for (let i = 0; i < WHEELVALUES.length; i++) { for (let j = 0; j < subWheelValues[WHEELVALUES[i]].length; j++) { tabsLabels.push(subWheelValues[WHEELVALUES[i]][j].toString()); } } - + block._tabsWheel.colors = platformColor.tabsWheelcolors; block._tabsWheel.slicePathFunction = slicePath().DonutSlice; block._tabsWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1302,32 +1346,29 @@ const piemenuNoteValue = function(block, noteValue) { -180 / WHEELVALUES.length + 180 / (WHEELVALUES.length * subWheelValues[WHEELVALUES[0]].length); block._tabsWheel.createWheel(tabsLabels); - + const that = block; - + /* * set value to number of text * @return{void} * @private */ - const __selectionChanged = function() { - that.text.text = - that._tabsWheel.navItems[ - that._tabsWheel.selectedNavItemIndex - ].title; + const __selectionChanged = function () { + that.text.text = that._tabsWheel.navItems[that._tabsWheel.selectedNavItemIndex].title; that.value = Number(that.text.text); // Make sure text is on top. that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - + /* * set pie menu's exit time to current time * @return{void} * @public */ - const __exitMenu = function() { + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._noteValueWheel.removeWheel(); @@ -1337,7 +1378,7 @@ const piemenuNoteValue = function(block, noteValue) { that.blocks.meter_block_changed(that._check_meter_block); } }; - + const labelElem = docById("labelDiv"); labelElem.innerHTML = ''; labelElem.classList.add("hasKeyboard"); block.label = docById("numberLabel"); - - block.label.addEventListener( - "keypress", - block._exitKeyPressed.bind(block) - ); - - block.label.addEventListener("change", function() { + + block.label.addEventListener("keypress", block._exitKeyPressed.bind(block)); + + block.label.addEventListener("change", function () { that._labelChanged(false, false); }); - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; - + const selectorWidth = 150; - const left = Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft - ); - const top = Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop - ); + const left = Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft); + const top = Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop); block.label.style.left = left + "px"; block.label.style.top = top + "px"; - + docById("wheelDiv").style.left = Math.min( Math.max(left - (300 - selectorWidth) / 2, 0), @@ -1388,21 +1420,14 @@ const piemenuNoteValue = function(block, noteValue) { } else { docById("wheelDiv").style.top = top - 300 + "px"; } - + block.label.style.width = - (Math.round(selectorWidth * block.blocks.blockScale) * - block.protoblock.scale) / - 2 + - "px"; - - const __showHide = function() { + (Math.round(selectorWidth * block.blocks.blockScale) * block.protoblock.scale) / 2 + "px"; + + const __showHide = function () { // const i = that._noteValueWheel.selectedNavItemIndex; for (let k = 0; k < WHEELVALUES.length; k++) { - for ( - let j = 0; - j < subWheelValues[WHEELVALUES[0]].length; - j++ - ) { + for (let j = 0; j < subWheelValues[WHEELVALUES[0]].length; j++) { const n = k * subWheelValues[WHEELVALUES[0]].length; if (that._noteValueWheel.selectedNavItemIndex === k) { that._tabsWheel.navItems[n + j].navItem.show(); @@ -1412,11 +1437,11 @@ const piemenuNoteValue = function(block, noteValue) { } } }; - + for (let i = 0; i < noteValueLabels.length; i++) { block._noteValueWheel.navItems[i].navigateFunction = __showHide; } - + // Navigate to a the current noteValue value. // Special case 1 to use power of 2. if (noteValue === 1) { @@ -1429,12 +1454,11 @@ const piemenuNoteValue = function(block, noteValue) { for (j = 0; j < subWheelValues[WHEELVALUES[i]].length; j++) { if (subWheelValues[WHEELVALUES[i]][j] === noteValue) { block._noteValueWheel.navigateWheel(i); - block._tabsWheel.navigateWheel( - i * subWheelValues[WHEELVALUES[i]].length + j); + block._tabsWheel.navigateWheel(i * subWheelValues[WHEELVALUES[i]].length + j); break; } } - + if (j < subWheelValues[WHEELVALUES[i]].length) { break; } @@ -1445,54 +1469,52 @@ const piemenuNoteValue = function(block, noteValue) { block._tabsWheel.navigateWheel(2); } } - + block.label.style.fontSize = - Math.round( - (20 * block.blocks.blockScale * block.protoblock.scale) / 2 - ) + "px"; + Math.round((20 * block.blocks.blockScale * block.protoblock.scale) / 2) + "px"; block.label.style.display = ""; block.label.focus(); - + // Hide the widget when the selection is made. for (let i = 0; i < tabsLabels.length; i++) { - block._tabsWheel.navItems[i].navigateFunction = function() { + block._tabsWheel.navItems[i].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; } - + // Or use the exit wheel... - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { __exitMenu(); }; }; -const piemenuNumber = function(block, wheelValues, selectedValue) { +const piemenuNumber = function (block, wheelValues, selectedValue) { // input form and wheelNav pie menu for number selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // the number selector block._numberWheel = new wheelnav("wheelDiv", null, 600, 600); // exit button block._exitWheel = new wheelnav("_exitWheel", block._numberWheel.raphael); - + const wheelLabels = []; for (let i = 0; i < wheelValues.length; i++) { wheelLabels.push(wheelValues[i].toString()); } - + // spacer wheelLabels.push(null); - + wheelnav.cssMode = true; - + block._numberWheel.keynavigateEnabled = false; - + block._numberWheel.colors = platformColor.numberWheelcolors; block._numberWheel.slicePathFunction = slicePath().DonutSlice; block._numberWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1506,13 +1528,13 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { block._numberWheel.slicePathCustom.minRadiusPercent = 0.2; block._numberWheel.slicePathCustom.maxRadiusPercent = 0.6; } - + block._numberWheel.sliceSelectedPathCustom = block._numberWheel.slicePathCustom; block._numberWheel.sliceInitPathCustom = block._numberWheel.slicePathCustom; - if (block.blocks.blockList[ - block.connections[0]].name === "setbpm3" || - block.blocks.blockList[ - block.connections[0]].name === "setmasterbpm2") { + if ( + block.blocks.blockList[block.connections[0]].name === "setbpm3" || + block.blocks.blockList[block.connections[0]].name === "setmasterbpm2" + ) { block._numberWheel.titleRotateAngle = 0; if (selectedValue === 90) { selectedValue = 90; @@ -1531,24 +1553,21 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { } else { selectedValue = 208; } - } else if (block.blocks.blockList[ - block.connections[0]].name === "setheading") { + } else if (block.blocks.blockList[block.connections[0]].name === "setheading") { // Set 0 (north) to the top of the wheel. block._numberWheel.navAngle = -90; } - + block._numberWheel.animatetime = 0; // 300; block._numberWheel.createWheel(wheelLabels); - + if (block._numberWheel.navItems.length > 20) { for (let i = 0; i < block._numberWheel.navItems.length; i++) { - block._numberWheel.navItems[i].titleAttr.font = - "30 30px sans-serif"; - block._numberWheel.navItems[i].titleSelectedAttr.font = - "30 30px sans-serif"; + block._numberWheel.navItems[i].titleAttr.font = "30 30px sans-serif"; + block._numberWheel.navItems[i].titleSelectedAttr.font = "30 30px sans-serif"; } } - + block._exitWheel.colors = platformColor.exitWheelcolors2; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1558,20 +1577,19 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", "-", "+"]); - + const that = block; - - const __selectionChanged = function() { + + const __selectionChanged = function () { that.value = wheelValues[that._numberWheel.selectedNavItemIndex]; - that.text.text = - wheelLabels[that._numberWheel.selectedNavItemIndex]; + that.text.text = wheelLabels[that._numberWheel.selectedNavItemIndex]; // Make sure text is on top. - that.container.setChildIndex(that.text, that.container.children.length - 1); + that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._numberWheel.removeWheel(); @@ -1582,7 +1600,7 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { that.blocks.meter_block_changed(that._check_meter_block); } }; - + const labelElem = docById("labelDiv"); labelElem.innerHTML = ''; labelElem.classList.add("hasKeyboard"); block.label = docById("numberLabel"); - - block.label.addEventListener( - "keypress", - block._exitKeyPressed.bind(block) - ); - - block.label.addEventListener("change", function() { + + block.label.addEventListener("keypress", block._exitKeyPressed.bind(block)); + + block.label.addEventListener("change", function () { that._labelChanged(false, false); }); - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; - + const selectorWidth = 150; - const left = Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft - ); - const top = Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop - ); + const left = Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft); + const top = Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop); block.label.style.left = left + "px"; block.label.style.top = top + "px"; - + docById("wheelDiv").style.left = Math.min( Math.max(left - (300 - selectorWidth) / 2, 0), @@ -1633,52 +1642,53 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { } else { docById("wheelDiv").style.top = top - 300 + "px"; } - + block.label.style.width = - (Math.round(selectorWidth * block.blocks.blockScale) * - block.protoblock.scale) / 2 + "px"; + (Math.round(selectorWidth * block.blocks.blockScale) * block.protoblock.scale) / 2 + "px"; // Navigate to a the current number value. let i = wheelValues.indexOf(selectedValue); if (i === -1) { i = 0; } - + // In case of float value, navigate to the nearest integer if (selectedValue % 1 !== 0) { i = wheelValues.indexOf(Math.floor(selectedValue + 0.5)); } - + if (i !== -1) { block._numberWheel.navigateWheel(i); } - + block.label.style.fontSize = - Math.round( - (20 * block.blocks.blockScale * block.protoblock.scale) / 2 - ) + "px"; - + Math.round((20 * block.blocks.blockScale * block.protoblock.scale) / 2) + "px"; + block.label.style.display = ""; block.label.focus(); - + // Hide the widget when the selection is made. for (let i = 0; i < wheelLabels.length; i++) { - block._numberWheel.navItems[i].navigateFunction = function() { + block._numberWheel.navItems[i].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; } - + // Or use the exit wheel... - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { __exitMenu(); }; - + block._exitWheel.navItems[1].navigateFunction = function () { const cblk1 = that.connections[0]; const cblk2 = that.blocks.blockList[cblk1].connections[0]; // Check if the number block is connected to a note value and prevent the value to go below zero - if ((that.value < 1) && (that.blocks.blockList[cblk1].name === "newnote" || (cblk2 && that.blocks.blockList[cblk2].name == "newnote"))) { + if ( + that.value < 1 && + (that.blocks.blockList[cblk1].name === "newnote" || + (cblk2 && that.blocks.blockList[cblk2].name == "newnote")) + ) { that.value = 0; } else { that.value -= 1; @@ -1692,8 +1702,8 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { that.label.value = that.value; }; - - block._exitWheel.navItems[2].navigateFunction = function() { + + block._exitWheel.navItems[2].navigateFunction = function () { that.value += 1; that.text.text = that.value.toString(); @@ -1703,8 +1713,8 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { that.label.value = that.value; }; - - const __pitchPreviewForNum = function() { + + const __pitchPreviewForNum = function () { const label = that._numberWheel.navItems[that._numberWheel.selectedNavItemIndex].title; const i = wheelLabels.indexOf(label); const actualPitch = numberToPitch(wheelValues[i] + 3); @@ -1713,7 +1723,7 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); @@ -1723,9 +1733,7 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { that.blocks.logo.synth.setMasterVolume(PREVIEWVOLUME); Singer.setSynthVolume(that.blocks.logo, 0, DEFAULTVOICE, PREVIEWVOLUME); - actualPitch[0] = actualPitch[0] - .replace(SHARP, "#") - .replace(FLAT, "b"); + actualPitch[0] = actualPitch[0].replace(SHARP, "#").replace(FLAT, "b"); if (!that._triggerLock) { that._triggerLock = true; that.blocks.logo.synth.trigger( @@ -1738,14 +1746,14 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { ); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); __selectionChanged(); }; - - const __hertzPreview = function() { + + const __hertzPreview = function () { const label = that._numberWheel.navItems[that._numberWheel.selectedNavItemIndex].title; const i = wheelLabels.indexOf(label); const actualPitch = frequencyToPitch(wheelValues[i]); @@ -1754,7 +1762,7 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); @@ -1764,9 +1772,7 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { that.blocks.logo.synth.setMasterVolume(PREVIEWVOLUME); Singer.setSynthVolume(that.blocks.logo, 0, DEFAULTVOICE, PREVIEWVOLUME); - actualPitch[0] = actualPitch[0] - .replace(SHARP, "#") - .replace(FLAT, "b"); + actualPitch[0] = actualPitch[0].replace(SHARP, "#").replace(FLAT, "b"); if (!that._triggerLock) { that._triggerLock = true; that.blocks.logo.synth.trigger( @@ -1779,93 +1785,77 @@ const piemenuNumber = function(block, wheelValues, selectedValue) { ); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); __selectionChanged(); }; - + // Handler for pitchnumber preview. Block is to ensure that // only pitchnumber block's pie menu gets a sound preview if ( block._usePieNumberC1() && - block.blocks.blockList[block.connections[0]].name === "pitchnumber" + block.blocks.blockList[block.connections[0]].name === "pitchnumber" ) { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.navItems[ - i - ].navigateFunction = __pitchPreviewForNum; + block._numberWheel.navItems[i].navigateFunction = __pitchPreviewForNum; } } - + // Handler for Hertz preview. Need to also ensure that // only hertz block gets a different sound preview - if ( - block._usePieNumberC1() && - block.blocks.blockList[block.connections[0]].name === "hertz" - ) { + if (block._usePieNumberC1() && block.blocks.blockList[block.connections[0]].name === "hertz") { for (let i = 0; i < wheelValues.length; i++) { block._numberWheel.navItems[i].navigateFunction = __hertzPreview; } } }; - -const piemenuColor = function(block, wheelValues, selectedValue, mode) { +const piemenuColor = function (block, wheelValues, selectedValue, mode) { // input form and wheelNav pie menu for setcolor selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // the number selector block._numberWheel = new wheelnav("wheelDiv", null, 600, 600); // exit button block._exitWheel = new wheelnav("_exitWheel", block._numberWheel.raphael); - + const wheelLabels = []; for (let i = 0; i < wheelValues.length; i++) { wheelLabels.push(wheelValues[i].toString()); } - + wheelnav.cssMode = true; - + block._numberWheel.keynavigateEnabled = false; - + block._numberWheel.colors = []; if (mode === "setcolor") { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.colors.push( - COLORS40[Math.floor(wheelValues[i] / 2.5)][2] - ); + block._numberWheel.colors.push(COLORS40[Math.floor(wheelValues[i] / 2.5)][2]); } } else if (mode === "sethue") { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.colors.push( - getMunsellColor(wheelValues[i], 50, 50) - ); + block._numberWheel.colors.push(getMunsellColor(wheelValues[i], 50, 50)); } } else { if (mode === "setshade") { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.colors.push( - getMunsellColor(0, wheelValues[i], 0) - ); + block._numberWheel.colors.push(getMunsellColor(0, wheelValues[i], 0)); } } else if (mode === "settranslucency") { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.colors.push( - getMunsellColor(35, 70, 100 - wheelValues[i]) - ); + block._numberWheel.colors.push(getMunsellColor(35, 70, 100 - wheelValues[i])); } } else { for (let i = 0; i < wheelValues.length; i++) { - block._numberWheel.colors.push( - getMunsellColor(60, 60, wheelValues[i]) - ); + block._numberWheel.colors.push(getMunsellColor(60, 60, wheelValues[i])); } } @@ -1873,18 +1863,18 @@ const piemenuColor = function(block, wheelValues, selectedValue, mode) { wheelLabels.push(null); } } - + block._numberWheel.slicePathFunction = slicePath().DonutSlice; block._numberWheel.slicePathCustom = slicePath().DonutSliceCustomization(); block._numberWheel.slicePathCustom.minRadiusPercent = 0.6; block._numberWheel.slicePathCustom.maxRadiusPercent = 1.0; - + block._numberWheel.sliceSelectedPathCustom = block._numberWheel.slicePathCustom; block._numberWheel.sliceInitPathCustom = block._numberWheel.slicePathCustom; // block._numberWheel.titleRotateAngle = 0; block._numberWheel.animatetime = 0; // 300; block._numberWheel.createWheel(wheelLabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -1894,27 +1884,26 @@ const piemenuColor = function(block, wheelValues, selectedValue, mode) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const that = block; - - const __selectionChanged = function() { + + const __selectionChanged = function () { that.value = wheelValues[that._numberWheel.selectedNavItemIndex]; - that.text.text = - wheelLabels[that._numberWheel.selectedNavItemIndex]; + that.text.text = wheelLabels[that._numberWheel.selectedNavItemIndex]; // Make sure text is on top. that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._numberWheel.removeWheel(); that._exitWheel.removeWheel(); that.label.style.display = "none"; }; - + const labelElem = docById("labelDiv"); labelElem.innerHTML = ''; labelElem.classList.add("hasKeyboard"); block.label = docById("numberLabel"); - - block.label.addEventListener( - "keypress", - block._exitKeyPressed.bind(block) - ); - - block.label.addEventListener("change", function() { + + block.label.addEventListener("keypress", block._exitKeyPressed.bind(block)); + + block.label.addEventListener("change", function () { that._labelChanged(false, false); }); - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; - + const selectorWidth = 150; - const left = Math.round( - (x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft - ); - const top = Math.round( - (y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop - ); + const left = Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft); + const top = Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop); block.label.style.left = left + "px"; block.label.style.top = top + "px"; - + docById("wheelDiv").style.left = Math.min( Math.max(left - (300 - selectorWidth) / 2, 0), @@ -1965,65 +1945,58 @@ const piemenuColor = function(block, wheelValues, selectedValue, mode) { } else { docById("wheelDiv").style.top = top - 300 + "px"; } - + block.label.style.width = - (Math.round(selectorWidth * block.blocks.blockScale) * - block.protoblock.scale) / - 2 + - "px"; - + (Math.round(selectorWidth * block.blocks.blockScale) * block.protoblock.scale) / 2 + "px"; + // Navigate to a the current number value. let i = wheelValues.indexOf(selectedValue); if (i === -1) { i = 0; } - + block._numberWheel.navigateWheel(i); // docById('wheelDiv').style.display = ''; - + block.label.style.fontSize = - Math.round( - (20 * block.blocks.blockScale * block.protoblock.scale) / 2 - ) + "px"; + Math.round((20 * block.blocks.blockScale * block.protoblock.scale) / 2) + "px"; block.label.style.display = ""; block.label.focus(); - + // Hide the widget when the selection is made. for (let i = 0; i < wheelLabels.length; i++) { - block._numberWheel.navItems[i].navigateFunction = function() { + block._numberWheel.navItems[i].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; } - + // Or use the exit wheel... - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { __exitMenu(); }; }; - -const piemenuBasic = function( - block, menuLabels, menuValues, selectedValue, colors) { +const piemenuBasic = function (block, menuLabels, menuValues, selectedValue, colors) { // basic wheelNav pie menu - + if (block.blocks.stageClick) { return; } - + if (colors === undefined) { colors = platformColor.piemenuBasicundefined; } - + docById("wheelDiv").style.display = ""; - + // reference to diameter of the basic wheel let size = 800; if (block.name === "outputtools" || block.name === "grid") { // slightly larger menu size = 1000; } - + // the selectedValueh selector block._basicWheel = new wheelnav("wheelDiv", null, size, size); block._exitWheel = new wheelnav("_exitWheel", block._basicWheel.raphael); @@ -2032,11 +2005,11 @@ const piemenuBasic = function( for (let i = 0; i < menuLabels.length; i++) { labels.push(menuLabels[i]); } - + wheelnav.cssMode = true; - + block._basicWheel.keynavigateEnabled = false; - + block._basicWheel.colors = colors; block._basicWheel.slicePathFunction = slicePath().DonutSlice; block._basicWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2047,7 +2020,7 @@ const piemenuBasic = function( block._basicWheel.titleRotateAngle = 0; block._basicWheel.animatetime = 0; // 300; block._basicWheel.createWheel(labels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2059,11 +2032,9 @@ const piemenuBasic = function( block._exitWheel.createWheel(["×", " "]); const that = block; - - const __selectionChanged = function() { - const label = - that._basicWheel.navItems[that._basicWheel.selectedNavItemIndex] - .title; + + const __selectionChanged = function () { + const label = that._basicWheel.navItems[that._basicWheel.selectedNavItemIndex].title; const i = labels.indexOf(label); if (that.name === "outputtools") { that.overrideName = menuValues[i]; @@ -2077,22 +2048,20 @@ const piemenuBasic = function( that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._basicWheel.removeWheel(); }; - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; @@ -2101,11 +2070,8 @@ const piemenuBasic = function( block.blocks.turtles._canvas.width - 300, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -2113,57 +2079,53 @@ const piemenuBasic = function( block.blocks.turtles._canvas.height - 350, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + // Navigate to a the current selectedValue value. let i = menuValues.indexOf(selectedValue); if (i === -1) { i = 1; } - + block._basicWheel.navigateWheel(i); - + // Hide the widget when the selection is made. for (let i = 0; i < menuLabels.length; i++) { - block._basicWheel.navItems[i].navigateFunction = function() { + block._basicWheel.navItems[i].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; } - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { __exitMenu(); }; }; - -const piemenuBoolean = function(block, booleanLabels, booleanValues, boolean) { +const piemenuBoolean = function (block, booleanLabels, booleanValues, boolean) { // wheelNav pie menu for boolean selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // the booleanh selector block._booleanWheel = new wheelnav("wheelDiv", null, 600, 600); - + const labels = []; for (let i = 0; i < booleanLabels.length; i++) { labels.push(booleanLabels[i]); } - + wheelnav.cssMode = true; - + block._booleanWheel.keynavigateEnabled = false; - + block._booleanWheel.colors = platformColor.booleanWheelcolors; block._booleanWheel.slicePathFunction = slicePath().DonutSlice; block._booleanWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2174,14 +2136,11 @@ const piemenuBoolean = function(block, booleanLabels, booleanValues, boolean) { // block._booleanWheel.titleRotateAngle = 0; block._booleanWheel.animatetime = 0; // 300; block._booleanWheel.createWheel(labels); - + const that = block; - - const __selectionChanged = function() { - const label = - that._booleanWheel.navItems[ - that._booleanWheel.selectedNavItemIndex - ].title; + + const __selectionChanged = function () { + const label = that._booleanWheel.navItems[that._booleanWheel.selectedNavItemIndex].title; const i = labels.indexOf(label); that.value = booleanValues[i]; that.text.text = booleanLabels[i]; @@ -2190,22 +2149,20 @@ const piemenuBoolean = function(block, booleanLabels, booleanValues, boolean) { that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; that._booleanWheel.removeWheel(); }; - + // Position the widget over the note block. const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "300px"; docById("wheelDiv").style.width = "300px"; @@ -2214,11 +2171,8 @@ const piemenuBoolean = function(block, booleanLabels, booleanValues, boolean) { block.blocks.turtles._canvas.width - 300, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -2226,66 +2180,61 @@ const piemenuBoolean = function(block, booleanLabels, booleanValues, boolean) { block.blocks.turtles._canvas.height - 350, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + // Navigate to a the current boolean value. let i = booleanValues.indexOf(boolean); if (i === -1) { i = 0; } - + block._booleanWheel.navigateWheel(i); - + // Hide the widget when the selection is made. - block._booleanWheel.navItems[0].navigateFunction = function() { + block._booleanWheel.navItems[0].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; - - block._booleanWheel.navItems[1].navigateFunction = function() { + + block._booleanWheel.navItems[1].navigateFunction = function () { __selectionChanged(); __exitMenu(); }; }; - -const piemenuVoices = function( - block, voiceLabels, voiceValues, categories, voice, rotate) { +const piemenuVoices = function (block, voiceLabels, voiceValues, categories, voice, rotate) { // wheelNav pie menu for voice selection - + if (block.blocks.stageClick) { return; } - + const COLORS = platformColor.piemenuVoicesColors; const colors = []; - + for (let i = 0; i < voiceLabels.length; i++) { colors.push(COLORS[categories[i] % COLORS.length]); } - + docById("wheelDiv").style.display = ""; - + // the voice selector if (localStorage.kanaPreference === "kana") { block._voiceWheel = new wheelnav("wheelDiv", null, 1200, 1200); } else { block._voiceWheel = new wheelnav("wheelDiv", null, 800, 800); } - + // exit button block._exitWheel = new wheelnav("_exitWheel", block._voiceWheel.raphael); - + wheelnav.cssMode = true; - + block._voiceWheel.keynavigateEnabled = false; - + block._voiceWheel.colors = colors; block._voiceWheel.slicePathFunction = slicePath().DonutSlice; block._voiceWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2298,20 +2247,19 @@ const piemenuVoices = function( } else { block._voiceWheel.titleRotateAngle = rotate; } - + block._voiceWheel.animatetime = 0; // 300; block._voiceWheel.createWheel(voiceLabels); - + // Special case for Japanese // const language = localStorage.languagePreference; // if (language === 'ja') { for (let i = 0; i < block._voiceWheel.navItems.length; i++) { block._voiceWheel.navItems[i].titleAttr.font = "30 30px sans-serif"; - block._voiceWheel.navItems[i].titleSelectedAttr.font = - "30 30px sans-serif"; + block._voiceWheel.navItems[i].titleSelectedAttr.font = "30 30px sans-serif"; } // } - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2321,40 +2269,32 @@ const piemenuVoices = function( block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const that = block; - - const __selectionChanged = function() { - const label = - that._voiceWheel.navItems[that._voiceWheel.selectedNavItemIndex] - .title; + + const __selectionChanged = function () { + const label = that._voiceWheel.navItems[that._voiceWheel.selectedNavItemIndex].title; const i = voiceLabels.indexOf(label); that.value = voiceValues[i]; that.text.text = label; if (getDrumName(that.value) === null) { - that.blocks.logo.synth.loadSynth( - 0, - getVoiceSynthName(that.value) - ); + that.blocks.logo.synth.loadSynth(0, getVoiceSynthName(that.value)); } else { - that.blocks.logo.synth.loadSynth( - 0, - getDrumSynthName(that.value) - ); + that.blocks.logo.synth.loadSynth(0, getDrumSynthName(that.value)); } // Make sure text is on top. that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); }; - + /* * Preview voice * @return{void} * @private */ - const __voicePreview = function() { + const __voicePreview = function () { const label = that._voiceWheel.navItems[that._voiceWheel.selectedNavItemIndex].title; const i = voiceLabels.indexOf(label); const voice = voiceValues[i]; @@ -2364,45 +2304,35 @@ const piemenuVoices = function( if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(voice) === -1 + tur.singer.instrumentNames.indexOf(voice) === -1 ) { tur.singer.instrumentNames.push(voice); if (voice === DEFAULTVOICE) { that.blocks.logo.synth.createDefaultSynth(0); } - + that.blocks.logo.synth.loadSynth(0, voice); // give the synth time to load timeout = 500; } - setTimeout(function() { + setTimeout(function () { that.blocks.logo.synth.setMasterVolume(DEFAULTVOLUME); Singer.setSynthVolume(that.blocks.logo, 0, voice, DEFAULTVOLUME); - that.blocks.logo.synth.trigger( - 0, - "G4", - 1 / 4, - voice, - null, - null, - false - ); + that.blocks.logo.synth.trigger(0, "G4", 1 / 4, voice, null, null, false); that.blocks.logo.synth.start(); }, timeout); __selectionChanged(); }; - + // position widget const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "400px"; docById("wheelDiv").style.width = "400px"; @@ -2411,11 +2341,8 @@ const piemenuVoices = function( block.blocks.turtles._canvas.width - 400, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -2423,71 +2350,56 @@ const piemenuVoices = function( block.blocks.turtles._canvas.height - 450, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + // navigate to a specific starting point let i = voiceValues.indexOf(voice); if (i === -1) { i = 0; } - + block._voiceWheel.navigateWheel(i); - + // Set up handlers for voice preview. for (let i = 0; i < voiceValues.length; i++) { block._voiceWheel.navItems[i].navigateFunction = __voicePreview; } - + // Hide the widget when the exit button is clicked. - block._exitWheel.navItems[0].navigateFunction = function() { + block._exitWheel.navItems[0].navigateFunction = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; }; }; - -const piemenuIntervals = function(block, selectedInterval) { +const piemenuIntervals = function (block, selectedInterval) { // pie menu for interval selection - + if (block.blocks.stageClick) { return; } - + docById("wheelDiv").style.display = ""; - + // Use advanced constructor for more wheelnav on same div const language = localStorage.languagePreference; if (language === "ja") { - block._intervalNameWheel = new wheelnav( - "wheelDiv", - null, - 1500, - 1500 - ); + block._intervalNameWheel = new wheelnav("wheelDiv", null, 1500, 1500); } else { block._intervalNameWheel = new wheelnav("wheelDiv", null, 800, 800); } - - block._intervalWheel = new wheelnav( - "block._intervalWheel", - block._intervalNameWheel.raphael - ); + + block._intervalWheel = new wheelnav("block._intervalWheel", block._intervalNameWheel.raphael); // exit button - block._exitWheel = new wheelnav( - "_exitWheel", - block._intervalNameWheel.raphael - ); - + block._exitWheel = new wheelnav("_exitWheel", block._intervalNameWheel.raphael); + wheelnav.cssMode = true; - + block._intervalNameWheel.keynavigateEnabled = false; - + //Customize slicePaths for proper size block._intervalNameWheel.colors = platformColor.intervalNameWheelcolors; block._intervalNameWheel.slicePathFunction = slicePath().DonutSlice; @@ -2503,10 +2415,10 @@ const piemenuIntervals = function(block, selectedInterval) { for (let i = 0; i < INTERVALS.length; i++) { labels.push(_(INTERVALS[i][1])); } - + block._intervalNameWheel.animatetime = 0; // 300; block._intervalNameWheel.createWheel(labels); - + block._intervalWheel.colors = platformColor.intervalWheelcolors; block._intervalWheel.slicePathFunction = slicePath().DonutSlice; block._intervalWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2514,14 +2426,13 @@ const piemenuIntervals = function(block, selectedInterval) { block._intervalWheel.slicePathCustom.maxRadiusPercent = 1; block._intervalWheel.sliceSelectedPathCustom = block._intervalWheel.slicePathCustom; block._intervalWheel.sliceInitPathCustom = block._intervalWheel.slicePathCustom; - + //Disable rotation, set navAngle and create the menus block._intervalWheel.clickModeRotate = false; // Align each set of numbers with its corresponding interval - block._intervalWheel.navAngle = - -(180 / labels.length) + 180 / (8 * labels.length); + block._intervalWheel.navAngle = -(180 / labels.length) + 180 / (8 * labels.length); block._intervalWheel.animatetime = 0; // 300; - + const numbers = []; for (let i = 0; i < INTERVALS.length; i++) { for (let j = 1; j < 9; j++) { @@ -2529,7 +2440,7 @@ const piemenuIntervals = function(block, selectedInterval) { } } block._intervalWheel.createWheel(numbers); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2539,18 +2450,16 @@ const piemenuIntervals = function(block, selectedInterval) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", " "]); - + const that = block; - + // position widget const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "400px"; docById("wheelDiv").style.width = "400px"; @@ -2559,11 +2468,8 @@ const piemenuIntervals = function(block, selectedInterval) { block.blocks.turtles._canvas.width - 400, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -2571,44 +2477,35 @@ const piemenuIntervals = function(block, selectedInterval) { block.blocks.turtles._canvas.height - 450, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + // Add function to each main menu for show/hide sub menus // FIXME: Add all tabs to each interval - const __setupAction = function(i, activeTabs) { - that._intervalNameWheel.navItems[i].navigateFunction = function() { + const __setupAction = function (i, activeTabs) { + that._intervalNameWheel.navItems[i].navigateFunction = function () { for (let l = 0; l < labels.length; l++) { for (let j = 0; j < 8; j++) { if (l !== i) { - that._intervalWheel.navItems[ - l * 8 + j - ].navItem.hide(); + that._intervalWheel.navItems[l * 8 + j].navItem.hide(); } else if (activeTabs.indexOf(j + 1) === -1) { - that._intervalWheel.navItems[ - l * 8 + j - ].navItem.hide(); + that._intervalWheel.navItems[l * 8 + j].navItem.hide(); } else { - that._intervalWheel.navItems[ - l * 8 + j - ].navItem.show(); + that._intervalWheel.navItems[l * 8 + j].navItem.show(); } } } }; }; - + // Set up action for interval name so number tabs will // initialize on load. for (let i = 0; i < INTERVALS.length; i++) { __setupAction(i, INTERVALS[i][2]); } - + // navigate to a specific starting point const obj = selectedInterval.split(" "); let i; @@ -2617,32 +2514,29 @@ const piemenuIntervals = function(block, selectedInterval) { break; } } - + if (i === INTERVALS.length) { i = 0; } - + block._intervalNameWheel.navigateWheel(i); - + const j = Number(obj[1]); if (INTERVALS[i][2].indexOf(j) !== -1) { block._intervalWheel.navigateWheel(j - 1); } else { block._intervalWheel.navigateWheel(INTERVALS[i][2][0] - 1); } - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; }; - - const __selectionChanged = function() { + + const __selectionChanged = function () { const label = - that._intervalNameWheel.navItems[ - that._intervalNameWheel.selectedNavItemIndex - ].title; - const number = - that._intervalWheel.navItems[that._intervalWheel.selectedNavItemIndex].title; + that._intervalNameWheel.navItems[that._intervalNameWheel.selectedNavItemIndex].title; + const number = that._intervalWheel.navItems[that._intervalWheel.selectedNavItemIndex].title; that.value = INTERVALS[that._intervalNameWheel.selectedNavItemIndex][1] + " " + number; if (label === "perfect 1") { @@ -2662,7 +2556,7 @@ const piemenuIntervals = function(block, selectedInterval) { if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); @@ -2674,7 +2568,7 @@ const piemenuIntervals = function(block, selectedInterval) { if (!that._triggerLock) { that._triggerLock = true; - + that.blocks.logo.synth.trigger( 0, ["C4", obj[0] + obj[1]], @@ -2685,34 +2579,31 @@ const piemenuIntervals = function(block, selectedInterval) { ); } - setTimeout(function() { + setTimeout(function () { that._triggerLock = false; }, 1 / 8); }; - + // Set up handlers for preview. for (let i = 0; i < 8 * labels.length; i++) { - block._intervalWheel.navItems[ - i - ].navigateFunction = __selectionChanged; + block._intervalWheel.navItems[i].navigateFunction = __selectionChanged; } - + block._exitWheel.navItems[0].navigateFunction = __exitMenu; }; - -const piemenuModes = function(block, selectedMode) { +const piemenuModes = function (block, selectedMode) { // pie menu for mode selection - + if (block.blocks.stageClick) { return; } - + // Look for a key block let key = "C"; let modeGroup = "7"; // default mode group let octave = false; - + const c = block.connections[0]; if (c !== null) { if (block.blocks.blockList[c].name === "setkey2") { @@ -2724,21 +2615,18 @@ const piemenuModes = function(block, selectedMode) { } } } - + docById("wheelDiv").style.display = ""; - + //Use advanced constructor for more wheelnav on same div block._modeWheel = new wheelnav("wheelDiv", null, 1200, 1200); - block._modeGroupWheel = new wheelnav( - "_modeGroupWheel", - block._modeWheel.raphael - ); + block._modeGroupWheel = new wheelnav("_modeGroupWheel", block._modeWheel.raphael); block._modeNameWheel = null; // We build block wheel based on the group selection. // exit button block._exitWheel = new wheelnav("_exitWheel", block._modeWheel.raphael); - + wheelnav.cssMode = true; - + block._modeWheel.colors = platformColor.modeWheelcolors; block._modeWheel.slicePathFunction = slicePath().DonutSlice; block._modeWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2746,27 +2634,14 @@ const piemenuModes = function(block, selectedMode) { block._modeWheel.slicePathCustom.maxRadiusPercent = 1; block._modeWheel.sliceSelectedPathCustom = block._modeWheel.slicePathCustom; block._modeWheel.sliceInitPathCustom = block._modeWheel.slicePathCustom; - + // Disable rotation, set navAngle and create the menus block._modeWheel.clickModeRotate = false; block._modeWheel.navAngle = -90; // block._modeWheel.selectedNavItemIndex = 2; block._modeWheel.animatetime = 0; // 300; - block._modeWheel.createWheel([ - "0", - "1", - "2", - "3", - "4", - "5", - "6", - "7", - "8", - "9", - "10", - "11" - ]); - + block._modeWheel.createWheel(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]); + block._modeGroupWheel.colors = platformColor.modeGroupWheelcolors; block._modeGroupWheel.slicePathFunction = slicePath().DonutSlice; block._modeGroupWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2774,20 +2649,20 @@ const piemenuModes = function(block, selectedMode) { block._modeGroupWheel.slicePathCustom.maxRadiusPercent = 0.3; block._modeGroupWheel.sliceSelectedPathCustom = block._modeGroupWheel.slicePathCustom; block._modeGroupWheel.sliceInitPathCustom = block._modeGroupWheel.slicePathCustom; - + // Disable rotation, set navAngle and create the menus // block._modeGroupWheel.clickModeRotate = false; block._modeGroupWheel.navAngle = -90; // block._modeGroupWheel.selectedNavItemIndex = 2; block._modeGroupWheel.animatetime = 0; // 300; - + const xlabels = []; for (const modegroup in MODE_PIE_MENUS) { xlabels.push(modegroup); } - + block._modeGroupWheel.createWheel(xlabels); - + block._exitWheel.colors = platformColor.exitWheelcolors; block._exitWheel.slicePathFunction = slicePath().DonutSlice; block._exitWheel.slicePathCustom = slicePath().DonutSliceCustomization(); @@ -2797,52 +2672,43 @@ const piemenuModes = function(block, selectedMode) { block._exitWheel.sliceInitPathCustom = block._exitWheel.slicePathCustom; block._exitWheel.clickModeRotate = false; block._exitWheel.createWheel(["×", "▶"]); // imgsrc:header-icons/play-button.svg']); - + const that = block; - - const __selectionChanged = function() { - const title = - that._modeNameWheel.navItems[ - that._modeNameWheel.selectedNavItemIndex - ].title; + + const __selectionChanged = function () { + const title = that._modeNameWheel.navItems[that._modeNameWheel.selectedNavItemIndex].title; if (title === " ") { that._modeNameWheel.navigateWheel( - (that._modeNameWheel.selectedNavItemIndex + 1) % - that._modeNameWheel.navItems.length + (that._modeNameWheel.selectedNavItemIndex + 1) % that._modeNameWheel.navItems.length ); } else { that.text.text = - that._modeNameWheel.navItems[ - that._modeNameWheel.selectedNavItemIndex - ].title; - + that._modeNameWheel.navItems[that._modeNameWheel.selectedNavItemIndex].title; + if (that.text.text === _("major") + " / " + _("ionian")) { that.value = "major"; - } else if ( - that.text.text === - _("minor") + " / " + _("aeolian") - ) { + } else if (that.text.text === _("minor") + " / " + _("aeolian")) { that.value = "aeolian"; } else { for (let i = 0; i < MODE_PIE_MENUS[modeGroup].length; i++) { const modename = MODE_PIE_MENUS[modeGroup][i]; - + if (_(modename) === that.text.text) { that.value = modename; break; } } } - + // Make sure text is on top. that.container.setChildIndex(that.text, that.container.children.length - 1); that.updateCache(); } }; - + // Add function to each main menu for show/hide sub menus - const __setupAction = function(i, activeTabs) { - that._modeNameWheel.navItems[i].navigateFunction = function() { + const __setupAction = function (i, activeTabs) { + that._modeNameWheel.navItems[i].navigateFunction = function () { for (let j = 0; j < 12; j++) { if (activeTabs.indexOf(j) === -1) { that._modeWheel.navItems[j].navItem.hide(); @@ -2850,19 +2716,16 @@ const piemenuModes = function(block, selectedMode) { that._modeWheel.navItems[j].navItem.show(); } } - + __selectionChanged(); }; }; - + // Build a pie menu of modes based on the current mode group. - const __buildModeNameWheel = function(grp) { + const __buildModeNameWheel = function (grp) { let newWheel = false; if (that._modeNameWheel === null) { - that._modeNameWheel = new wheelnav( - "_modeNameWheel", - that._modeWheel.raphael - ); + that._modeNameWheel = new wheelnav("_modeNameWheel", that._modeWheel.raphael); newWheel = true; } @@ -2884,10 +2747,8 @@ const piemenuModes = function(block, selectedMode) { that._modeNameWheel.slicePathCustom = slicePath().DonutSliceCustomization(); that._modeNameWheel.slicePathCustom.minRadiusPercent = 0.3; //0.15; that._modeNameWheel.slicePathCustom.maxRadiusPercent = 0.85; - that._modeNameWheel.sliceSelectedPathCustom = - that._modeNameWheel.slicePathCustom; - that._modeNameWheel.sliceInitPathCustom = - that._modeNameWheel.slicePathCustom; + that._modeNameWheel.sliceSelectedPathCustom = that._modeNameWheel.slicePathCustom; + that._modeNameWheel.sliceInitPathCustom = that._modeNameWheel.slicePathCustom; that._modeNameWheel.titleRotateAngle = 0; // that._modeNameWheel.clickModeRotate = false; that._modeNameWheel.navAngle = -90; @@ -2920,29 +2781,19 @@ const piemenuModes = function(block, selectedMode) { for (let i = 0; i < that._modeNameWheel.navItems.length; i++) { // Maybe there is a method that does block. that._modeNameWheel.navItems[i].title = labels[i]; - that._modeNameWheel.navItems[i].basicNavTitleMax.title = - labels[i]; - that._modeNameWheel.navItems[i].basicNavTitleMin.title = - labels[i]; - that._modeNameWheel.navItems[i].hoverNavTitleMax.title = - labels[i]; - that._modeNameWheel.navItems[i].hoverNavTitleMin.title = - labels[i]; - that._modeNameWheel.navItems[i].selectedNavTitleMax.title = - labels[i]; - that._modeNameWheel.navItems[i].selectedNavTitleMin.title = - labels[i]; - that._modeNameWheel.navItems[i].initNavTitle.title = - labels[i]; + that._modeNameWheel.navItems[i].basicNavTitleMax.title = labels[i]; + that._modeNameWheel.navItems[i].basicNavTitleMin.title = labels[i]; + that._modeNameWheel.navItems[i].hoverNavTitleMax.title = labels[i]; + that._modeNameWheel.navItems[i].hoverNavTitleMin.title = labels[i]; + that._modeNameWheel.navItems[i].selectedNavTitleMax.title = labels[i]; + that._modeNameWheel.navItems[i].selectedNavTitleMin.title = labels[i]; + that._modeNameWheel.navItems[i].initNavTitle.title = labels[i]; that._modeNameWheel.navItems[i].fillAttr = colors[i]; - that._modeNameWheel.navItems[i].sliceHoverAttr.fill = - colors[i]; - that._modeNameWheel.navItems[i].slicePathAttr.fill = - colors[i]; - that._modeNameWheel.navItems[i].sliceSelectedAttr.fill = - colors[i]; + that._modeNameWheel.navItems[i].sliceHoverAttr.fill = colors[i]; + that._modeNameWheel.navItems[i].slicePathAttr.fill = colors[i]; + that._modeNameWheel.navItems[i].sliceSelectedAttr.fill = colors[i]; } - + that._modeNameWheel.refreshWheel(); } @@ -2950,10 +2801,8 @@ const piemenuModes = function(block, selectedMode) { const language = localStorage.languagePreference; if (language === "ja") { for (let i = 0; i < that._modeNameWheel.navItems.length; i++) { - that._modeNameWheel.navItems[i].titleAttr.font = - "30 30px sans-serif"; - that._modeNameWheel.navItems[i].titleSelectedAttr.font = - "30 30px sans-serif"; + that._modeNameWheel.navItems[i].titleAttr.font = "30 30px sans-serif"; + that._modeNameWheel.navItems[i].titleSelectedAttr.font = "30 30px sans-serif"; } } @@ -2968,7 +2817,7 @@ const piemenuModes = function(block, selectedMode) { activeTabs.push(last(activeTabs) + mode[k]); } } - + __setupAction(i, activeTabs); i += 1; } @@ -2987,16 +2836,16 @@ const piemenuModes = function(block, selectedMode) { that._modeNameWheel.navigateWheel(i); }; - - const __exitMenu = function() { + + const __exitMenu = function () { that._piemenuExitTime = new Date().getTime(); docById("wheelDiv").style.display = "none"; if (that._modeNameWheel !== null) { that._modeNameWheel.removeWheel(); } }; - - const __playNote = function() { + + const __playNote = function () { let o = 0; if (octave) { o = 12; @@ -3011,7 +2860,7 @@ const piemenuModes = function(block, selectedMode) { if ( tur.singer.instrumentNames.length === 0 || - tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 + tur.singer.instrumentNames.indexOf(DEFAULTVOICE) === -1 ) { tur.singer.instrumentNames.push(DEFAULTVOICE); that.blocks.logo.synth.createDefaultSynth(0); @@ -3020,17 +2869,10 @@ const piemenuModes = function(block, selectedMode) { that.blocks.logo.synth.setMasterVolume(DEFAULTVOLUME); Singer.setSynthVolume(that.blocks.logo, 0, DEFAULTVOICE, DEFAULTVOLUME); - that.blocks.logo.synth.trigger( - 0, - [obj[0] + obj[1]], - 1 / 12, - DEFAULTVOICE, - null, - null - ); + that.blocks.logo.synth.trigger(0, [obj[0] + obj[1]], 1 / 12, DEFAULTVOICE, null, null); }; - - const __playScale = function(activeTabs, idx) { + + const __playScale = function (activeTabs, idx) { // loop through selecting modeWheel slices with a delay. if (idx < activeTabs.length) { if (activeTabs[idx] < 12) { @@ -3040,19 +2882,19 @@ const piemenuModes = function(block, selectedMode) { octave = true; that._modeWheel.navigateWheel(0); } - - setTimeout(function() { + + setTimeout(function () { __playScale(activeTabs, idx + 1); }, 1000 / 10); // slight delay between notes } }; - + /* * prepare scale * @return{void} * @private */ - const __prepScale = function() { + const __prepScale = function () { const activeTabs = [0]; const mode = MUSICALMODES[that.value]; for (let k = 0; k < mode.length - 1; k++) { @@ -3068,31 +2910,26 @@ const piemenuModes = function(block, selectedMode) { __playScale(activeTabs, 0); }; - + // position widget const x = block.container.x; const y = block.container.y; - - const canvasLeft = - block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = - block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; - + + const canvasLeft = block.blocks.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.blockScale; + docById("wheelDiv").style.position = "absolute"; docById("wheelDiv").style.height = "600px"; docById("wheelDiv").style.width = "600px"; - + // Block widget is large. Be sure it fits on the screen. docById("wheelDiv").style.left = Math.min( block.blocks.turtles._canvas.width - 600, Math.max( 0, - Math.round( - (x + block.blocks.stage.x) * - block.blocks.getStageScale() + - canvasLeft - ) - 200 + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 200 ) ) + "px"; docById("wheelDiv").style.top = @@ -3100,18 +2937,15 @@ const piemenuModes = function(block, selectedMode) { block.blocks.turtles._canvas.height - 650, Math.max( 0, - Math.round( - (y + block.blocks.stage.y) * - block.blocks.getStageScale() + - canvasTop - ) - 200 + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 200 ) ) + "px"; - + for (let i = 0; i < 12; i++) { that._modeWheel.navItems[i].navigateFunction = __playNote; } - + // navigate to a specific starting point for (modeGroup in MODE_PIE_MENUS) { let j; @@ -3126,39 +2960,36 @@ const piemenuModes = function(block, selectedMode) { break; } } - + if (selectedMode === "major") { modeGroup = "7"; } - - const __buildModeWheel = function() { + + const __buildModeWheel = function () { const i = that._modeGroupWheel.selectedNavItemIndex; const modeGroup = that._modeGroupWheel.navItems[i].title; __buildModeNameWheel(modeGroup); }; - + for (let i = 0; i < block._modeGroupWheel.navItems.length; i++) { - block._modeGroupWheel.navItems[ - i - ].navigateFunction = __buildModeWheel; + block._modeGroupWheel.navItems[i].navigateFunction = __buildModeWheel; } - + for (let i = 0; i < block._modeGroupWheel.navItems.length; i++) { if (block._modeGroupWheel.navItems[i].title === modeGroup) { block._modeGroupWheel.navigateWheel(i); break; } } - + block._exitWheel.navItems[0].navigateFunction = __exitMenu; block._exitWheel.navItems[1].navigateFunction = __prepScale; }; - /* * Sets up context menu for each block */ -const piemenuBlockContext = function(block) { +const piemenuBlockContext = function (block) { if (block.blocks.activeBlock === null) { return; } @@ -3179,11 +3010,13 @@ const piemenuBlockContext = function(block) { const canvasTop = block.blocks.canvas.offsetTop + 6 * block.blocks.getStageScale(); docById("contextWheelDiv").style.left = - Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + - canvasLeft) - 150 + "px"; + Math.round((x + block.blocks.stage.x) * block.blocks.getStageScale() + canvasLeft) - + 150 + + "px"; docById("contextWheelDiv").style.top = - Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + - canvasTop) - 150 + "px"; + Math.round((y + block.blocks.stage.y) * block.blocks.getStageScale() + canvasTop) - + 150 + + "px"; docById("contextWheelDiv").style.display = ""; @@ -3198,8 +3031,7 @@ const piemenuBlockContext = function(block) { if (block.name === "action") { labels.push("imgsrc:header-icons/save-blocks-button.svg"); } - const message = - block.blocks.blockList[block.blocks.activeBlock].protoblock.helpString; + const message = block.blocks.blockList[block.blocks.activeBlock].protoblock.helpString; let helpButton; if (message) { labels.push("imgsrc:header-icons/help-button.svg"); @@ -3234,7 +3066,7 @@ const piemenuBlockContext = function(block) { wheel.navItems[0].selected = false; - wheel.navItems[0].navigateFunction = function() { + wheel.navItems[0].navigateFunction = function () { that.blocks.activeBlock = blockBlock; that.blocks.prepareStackForCopy(); that.blocks.pasteDx = pasteDx; @@ -3245,25 +3077,25 @@ const piemenuBlockContext = function(block) { // docById('contextWheelDiv').style.display = 'none'; }; - wheel.navItems[1].navigateFunction = function() { + wheel.navItems[1].navigateFunction = function () { that.blocks.activeBlock = blockBlock; that.blocks.extract(); docById("contextWheelDiv").style.display = "none"; }; - wheel.navItems[2].navigateFunction = function() { + wheel.navItems[2].navigateFunction = function () { that.blocks.activeBlock = blockBlock; that.blocks.extract(); that.blocks.sendStackToTrash(that.blocks.blockList[blockBlock]); docById("contextWheelDiv").style.display = "none"; }; - wheel.navItems[3].navigateFunction = function() { + wheel.navItems[3].navigateFunction = function () { docById("contextWheelDiv").style.display = "none"; }; if (block.name === "action") { - wheel.navItems[4].navigateFunction = function() { + wheel.navItems[4].navigateFunction = function () { that.blocks.activeBlock = blockBlock; that.blocks.prepareStackForCopy(); that.blocks.saveStack(); @@ -3271,14 +3103,14 @@ const piemenuBlockContext = function(block) { } if (helpButton !== null) { - wheel.navItems[helpButton].navigateFunction = function() { + wheel.navItems[helpButton].navigateFunction = function () { that.blocks.activeBlock = blockBlock; new HelpWidget(blocks); docById("contextWheelDiv").style.display = "none"; }; } - setTimeout(function() { + setTimeout(function () { that.blocks.stageClick = false; }, 500); }; @@ -3288,7 +3120,7 @@ const piemenuBlockContext = function(block) { * * @returns {void} */ -const piemenuGrid = function() { +const piemenuGrid = function () { docById("wheelDivptm").style.display = "none"; const x = turtles.gridButton.getBoundingClientRect().x; const y = turtles.gridButton.getBoundingClientRect().y; @@ -3299,14 +3131,16 @@ const piemenuGrid = function() { Math.min( logo.blocks.turtles._canvas.width - 200, Math.max(0, x * logo.blocks.getStageScale()) - ) - 350 + "px"; + ) - + 350 + + "px"; docById("wheelDivptm").style.top = Math.min( logo.blocks.turtles._canvas.height - 250, Math.max(0, y * logo.blocks.getStageScale()) ) + "px"; docById("wheelDivptm").style.display = ""; - + const grids = [ "imgsrc: images/grid/blank.svg", "imgsrc: images/grid/Cartesian.svg", @@ -3318,8 +3152,9 @@ const piemenuGrid = function() { "imgsrc: images/grid/Alto.svg", "imgsrc: images/grid/Tenor.svg", "imgsrc: images/grid/Bass.svg", - ""]; - + "" + ]; + const gridLabels = [ "Blank", "Cartesian", @@ -3349,12 +3184,12 @@ const piemenuGrid = function() { const { fill, stroke } = platformColor.gridWheelcolors.selected; turtles.gridWheel.sliceHoverAttr = { fill, stroke, "stroke-width": 2 }; turtles.gridWheel.sliceSelectedAttr = { fill, stroke, "stroke-width": 2 }; - + turtles.gridWheel.clockwise = false; turtles.gridWheel.initWheel(grids); turtles.gridWheel.navItems[gridLabels.length - 1].enabled = false; turtles.gridWheel.createWheel(); - turtles.gridWheel.navigateWheel(turtles.currentGrid? turtles.currentGrid: 0); + turtles.gridWheel.navigateWheel(turtles.currentGrid ? turtles.currentGrid : 0); for (let i = 0; i < gridLabels.length; i++) { turtles.gridWheel.navItems[i].navigateFunction = turtles.doGrid; @@ -3370,7 +3205,7 @@ const piemenuGrid = function() { turtles._exitWheel.sliceInitPathCustom = turtles._exitWheel.slicePathCustom; turtles._exitWheel.clickModeRotate = false; turtles._exitWheel.createWheel(["×", " "]); - + turtles._exitWheel.navItems[0].navigateFunction = () => { docById("wheelDivptm").style.display = "none"; turtles.gridWheel.removeWheel();