Skip to content

Commit

Permalink
Add ordering overrides in chord editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArijanJ
ArijanJ committed Aug 25, 2024
1 parent c05e25c commit ff8b3db
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 34 deletions.
28 changes: 8 additions & 20 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,11 +189,12 @@
if(is_chord(chord)) {
let new_notes = []
for (let note of chord.notes) {
let new_note = new Note(note.value, note.playTime, note.ticks, note.tempo, note.BPM, note.delta, settings.pShifts, settings.pOors)
let new_note = new Note(note.value, note.playTime, note.ticks, note.tempo, note.BPM, note.delta, chord.overrides?.shifts ?? settings.pShifts, chord.overrides?.oors ?? settings.pOors)
new_note.original = note.original
new_notes.push(new_note)
}
let new_chord = new ChordObject(new_notes, settings.classicChordOrder, settings.sequentialQuantize)
let new_chord = new ChordObject(new_notes, !chord.overrides?.shifts && settings.classicChordOrder == true, settings.sequentialQuantize)
if(chord.overrides) new_chord.overrides = JSON.parse(JSON.stringify(chord.overrides))
new_chord.index = chord.index
let next_valid_chord = next_not(chords_and_otherwise, not_chord, real_index_of(chord.index+1))
Expand Down Expand Up @@ -530,20 +531,14 @@
let selection = {
left: undefined,
right: undefined,
clear: () => {
selection.left = undefined
selection.right = undefined
updateChords()
renderSelection()
},
}
$: {
has_selection = selection.left != undefined && selection.right != undefined
// print("Selection: ", selection)
}
function resetSelection(e) {
if (!sheetReady || !selection.left && !selection.right) return
if (!sheetReady || selection.left === undefined && !selection.right === undefined) return
for (let i = selection.left; i < chords_and_otherwise.length; i++) {
const chord = chords_and_otherwise[i]
Expand All @@ -557,12 +552,6 @@
selection.left = undefined
selection.right = undefined
// for (let event of chords_and_otherwise) {
// if (is_chord(event)) {
// event.selected = undefined
// }
// }
updateChords()
}
Expand Down Expand Up @@ -669,10 +658,9 @@
}
let chordChanged = (e) => {
if(e.detail.notes.length === 0)
selection.clear()
chords_and_otherwise[real_index_of(chordToEdit.index)].notes = e.detail.notes
let recipient = chord_at(chordToEdit.index)
recipient.notes = e.detail.notes
if(e.detail.overrides) recipient.overrides = e.detail.overrides
softRegen()
autosave()
}
Expand All @@ -691,7 +679,7 @@
<!-- Only shown if needed -->
<ChordEditor chord={chordToEdit} {settings} bind:dialog={editChordDialog}
on:chordChanged={chordChanged}/>
on:chordChanged={chordChanged} on:closed={resetSelection}/>
<svelte:head>
<title>MIDI Converter</title>
Expand Down
85 changes: 73 additions & 12 deletions src/components/ChordEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
// Stores the chord while it's being edited (not saved yet in case the user wants to cancel)
let tempBuffer = undefined
let overrides = {shifts: undefined, oors: undefined}
let hasOverrides = () => {
return !([undefined, 'keep'].includes(overrides.shifts) && [undefined, 'keep'].includes(overrides.oors))
}
export let chord = undefined
$: {
if (chord?.notes?.length > 0) {
Expand All @@ -22,15 +27,16 @@
export let settings = undefined
export let dialog = undefined
let noteToAdd = undefined
let removeNote = (i) => {
if(i.detail) {
// This is now a MIDI note value passed from the Keyboard
i = tempBuffer.notes.findIndex(note => note.original === i.detail)
}
console.log('removing', i, tempBuffer.notes[i])
tempBuffer.notes.splice(i, 1)
tempBuffer = new Chord(tempBuffer) // regen for correct sorting
updateWithOverrides()
}
let addNote = (event) => {
Expand All @@ -41,19 +47,44 @@
clone.value = clone.original + transposition
tempBuffer.notes.push(new Note(clone))
tempBuffer = new Chord(tempBuffer) // regen for correct sorting
updateWithOverrides()
}
let updateWithOverrides = () => {
let newNotes = tempBuffer.notes.map(n => {
let newNote = new Note(n.value, n.playTime, n.ticks,
n.tempo, n.BPM, n.delta,
tempBuffer.overrides?.shifts ?? 'keep',
tempBuffer.overrides?.oors ?? 'keep',
false
)
newNote.original = n.original
return newNote
})
let newChord = new Chord(newNotes, false)
if(hasOverrides()) {
newChord.overrides = overrides
}
tempBuffer = newChord
}
let applyChanges = () => {
let notes = tempBuffer.notes.map(n => new Note(n))
let newChord = new Chord(notes)
let newChord = new Chord(notes, false)
if(hasOverrides()) {
newChord.overrides = tempBuffer.overrides
// console.log('sending overrides:', tempBuffer.overrides)
}
dispatch('chordChanged', newChord)
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog bind:this={dialog} on:click|self={() => {dialog.close()}} class="rounded-lg overflow-hidden p-2">
<dialog bind:this={dialog} on:close={() => {overrides = {shifts: 'keep', oors: 'keep'}; dispatch('closed')}}
on:click|self={() => {dialog.close(); dispatch('closed')}}
class="rounded-lg overflow-hidden p-2">
<div class="flex flex-col items-center gap-2">
<div id="chord" style="background-color: #2D2A32" class="text-2xl p-1 rounded-md">
{@html render_chord(tempBuffer, undefined, settings, false)}
Expand All @@ -80,13 +111,43 @@
on:noteon={addNote}
on:noteoff={removeNote}/>
<!-- Don't really need this I suppose? -->
<!-- <div id="buttons">
<input type="text" class="w-12" bind:value={noteToAdd}>
<button>Add from QWERTY (at {firstNote.transposition} transposition)</button>
</div> -->
{#if tempBuffer.notes.length > 1}
<hr class="my-2 mx-1 border-gray-500 border-1 w-full">
<p>Overrides (optional):</p>
<div class="flex flex-row gap-2">
<div class='select-div'>
<label for='shifts-position'>Shifted notes at:</label>
<select name='shifts-position' id='shifts-position' bind:value={overrides.shifts}
on:change={() => {
if (!('overrides' in tempBuffer))
tempBuffer.overrides = {}
tempBuffer.overrides.shifts = overrides.shifts
updateWithOverrides()
}}>
<option selected value='keep'>Keep</option>
<option value='Start'>Start</option>
<option value='End'>End</option>
</select>
</div>
<hr class="my-2 mx-1 border-black border-1 w-full">
<div class='select-div'>
<label for='oors-position'>Out of range notes at:</label>
<select name='oors-position' id='oors-position' bind:value={overrides.oors}
on:change={() => {
if (!('overrides' in tempBuffer))
tempBuffer.overrides = {}
tempBuffer.overrides.oors = overrides.oors
updateWithOverrides()
}}>
<option selected value='keep'>Keep</option>
<option value='Inorder'>Inorder</option>
<option value='Start'>Start</option>
<option value='End'>End</option>
</select>
</div>
</div>
{/if}
<hr class="my-2 mx-1 border-gray-500 border-1 w-full">
<button on:click={() => { dialog.close(); applyChanges() }}>Apply</button>
</div>
{/if}
Expand Down
5 changes: 3 additions & 2 deletions src/utils/VP.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,20 @@ class Note {
if (capitalNotes.includes(this.char)) {
if (shifts === 'Start') this.displayValue = value - lastPossibleNote
else if (shifts == 'End') this.displayValue = value + lastPossibleNote
else this.displayValue = value
}
else if (this.outOfRange) {
if (oors === 'Start') this.displayValue = value - 1024
else if (oors == 'End') this.displayValue = value + 1024
else {
// Inorder
else if (oors == 'Inorder') {
if (lowerOorScale.includes(this.char)) {
this.displayValue = value - 1024
}
else {
this.displayValue = value + 1024
}
}
else this.displayValue = value
}
else this.displayValue = value
}
Expand Down

0 comments on commit ff8b3db

Please sign in to comment.