Allow selecting tracks while editing

src/App.svelte

@@ -12,7 +12,6 @@
     let chord_at = (x) => chords_and_otherwise[real_index_of(x)]
 
     import SheetOptions from './components/SheetOptions.svelte'
-    import Track from './components/Track.svelte'
     import Chord from './components/Chord.svelte'
     import HistoryEntry from "./components/HistoryEntry.svelte";
 
@@ -94,22 +93,13 @@
         if (fileInput) filename = basename(fileInput.files[0]?.name) ?? existingProject.name
     }
 
-    let trackChooser = {
-        element: undefined,
-        hide: () => { trackChooser.element.style.top = "-110vh" },
-        show: () => { trackChooser.element.style.top = "0px" }
-    }
-
 	let sheetReady = false
 
 	let MIDIObject
     let tracks
 
 	let chords_and_otherwise
 
-    // [true, true, false, true, ...]
-    let selectedTracks
-
     let container
 
     async function onFileChange() {
@@ -148,17 +138,16 @@
                 console.error("No ticksPerBeat in this midi file")
 
             tracks = getTracks(MIDIObject)
-            selectedTracks = tracks.map(() => true)
+            settings.tracks = tracks.map((t) => { t.selected = true; return t }) // initial population
 
             sheetReady = false
-            trackChooser.show()
         })
     }
 
     let saveSheet = () => {
         if (!MIDIObject) { console.log('no midiobject'); return }
         // console.log(MIDIObject.tracks)
-        let events = getEvents(MIDIObject, selectedTracks)
+        let events = getEvents(MIDIObject, settings.tracks.map((t) => t.selected))
 
         let res = generateChords(events, settings, chords_and_otherwise, getTempo(MIDIObject).ticksPerBeat)
 
@@ -241,7 +230,8 @@
             "minSpeedChange",
             "bpmChanges",
             "bpmType",
-            "bpm"].some(changed))
+            "bpm",
+            "tracks"].some(changed))
                 saveSheet() // Full regeneration needed
 
        // Regeneration that doesn't require a MIDIObject
@@ -326,7 +316,9 @@
         // console.log(chords_and_otherwise)
         chords_and_otherwise = chords_and_otherwise.filter(e => { /* console.log(e); */ return e.kind != "transpose" })
 
-        let first_note = next_not(chords_and_otherwise, not_chord, 0).notes[0]
+        let first_note = next_not(chords_and_otherwise, not_chord, 0)?.notes?.[0]
+        if (!first_note) return
+
         let initial_transposition = first_note.transposition
 
         // Add first transpose comment
@@ -822,21 +814,6 @@ Individual sizes are an estimation, the total is correct.">ⓘ</span>
         </a>
     </div>
 
-    <section bind:this={trackChooser.element} id="track-chooser" class="z-40 w-full absolute flex flex-col gap-4 justify-center items-center content-center text-2xl"
-             style="top: -110vh; height: 100vh; background: rgb(45,42,50);
-                    background: linear-gradient(45deg, rgba(45,42,50,1) 0%, rgba(50,40,40,1) 50%, rgba(71,57,37,1) 100%);
-                    transition: all 0.6s ease-in-out;">
-        <div id="tracks" class="flex flex-col gap-2">
-        {#if tracks}
-            {#each tracks as { name, length }, idx}
-                <Track {name} {length} idx={idx+1}
-                bind:selected={selectedTracks[idx]} />
-            {/each}
-        {/if}
-        </div>
-        <button on:click={() => { saveSheet(); trackChooser.hide() }}>Import selected tracks</button>
-    </section>
-
     {#if sheetReady == true}
         <div class="flex flex-col items-start" on:click|self={resetSelection} on:keypress|self={() => {}} on:contextmenu|preventDefault>
             <SheetActions {settings}

src/components/Guide.svelte

@@ -7,7 +7,7 @@
     Double-click on a note to select the whole line<br>
     Middle-click to select everything below the note<br>
     <hr class="my-2 mx-1">
-    Note that <span title="Break every x beats, quantize, and any tempo/BPM changes" class="underline cursor-pointer">some settings</span> must fully regenerate your sheet, so you may lose some manual changes.<br>
+    Note that <span title="Track imports, break every x beats, quantize, and any tempo/BPM changes" class="underline cursor-help">some settings</span> must fully regenerate your sheet, so you may lose some manual changes.<br>
     <hr class="my-2 mx-1">
     Timing:<br>
     <span style="color: {colors.quadruple}">Longer than whole note</span><br>

src/components/SheetOptions.svelte

@@ -1,6 +1,6 @@
 <script>
     import { createEventDispatcher } from 'svelte'
-    import {vpScale} from "../utils/VP";
+    import { vpScale } from "../utils/VP";
 
     let dispatch = createEventDispatcher()
 
@@ -31,18 +31,36 @@
         lineHeight: 135,
         capturingImage: false,
         missingTempo: false,
-        bpm: 120
+        bpm: 120,
+        tracks: [{}] // populated from main, default = all selected
     }
 </script>
 
 {#if show}
 
+{#if settings.tracks.length != 0 && hasMIDI}
+    <hr class="my-2 mx-1">
+
+    {#each settings.tracks as track, idx}
+        <label for="trackbox{idx+1}">
+            <input id="trackbox{idx+1}" type="checkbox"
+                checked={track.selected}
+                on:change={() => { // TODO: use (e)
+                    track.selected = !track.selected;
+                    settings.tracks = settings.tracks.map((track) => ({ ...track }))
+                }}
+            />
+            Track {idx+1} ({track.name || "None"}) - {track.length} events
+        </label>
+    {/each}
+{/if}
+
 <hr class="my-2 mx-1">
 
 <div class="flex flex-col items-start align-middle" style="margin-top: -0.7em">
     <div class="flex flex-row mt-3">
         <label class="flex flex-row items-center"
-               title="Defines how much better a transposition should be than the previous transposition for multi-transpose to act (higher = less transposing)" 
+               title="Defines how much better a transposition should be than the previous transposition for multi-transpose to act (higher = less transposing)"
                for="atleast">Resilience (?):</label>
         <input class="w-32" id="atleast" type="range" min=0 max=12 bind:value={settings.resilience}>
         <span style="display:flex; align-items: center">{settings.resilience}</span>
@@ -143,7 +161,7 @@
 
     <label for='tempo-checkbox'>
         <input type='checkbox' id="tempo-checkbox" bind:checked={settings.tempoMarks}>
-        Show tempo/timing marks 
+        Show tempo/timing marks
     </label>
 
     <label for='oormark-checkbox'>
@@ -190,7 +208,7 @@
             </select>
         </div>
 
-        <div class="beats"> 
+        <div class="beats">
                 <label class='slider-label' for='min-speed-change'>Min. % speed change: </label>
                 <input type='range' id='min-speed-change' min=0 max=100 bind:value={settings.minSpeedChange}>
                 <span>At least {settings.minSpeedChange}%</span>
@@ -245,7 +263,7 @@
         margin-top: 0.2em;
         margin-bottom: 0;
     }
-    
+
     select option {
         background: #2D2A32;
     }
@@ -268,7 +286,7 @@
     input[type="text"] {
         margin-bottom: 0;
     }
-    
+
     .beats, .select-label, .tempo {
         display: flex;
         flex-direction: row;