Select all MIDI input channels in multichannel mode

Add buttons for select all/none.

refs #271, #650

src/views/MidiView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { Input, Output, WebMidi, type NoteMessageEvent, type MessageEvent } from 'webmidi'
 import MidiPiano from '@/components/MidiPiano.vue'
 import { useMidiStore } from '@/stores/midi'
@@ -142,6 +142,28 @@ onUnmounted(() => {
   stopHighlights.value()
   stopActivations.value()
 })
+
+function selectAllInputChannels() {
+  for (let i = 1; i <= 16; ++i) {
+    props.midiInputChannels.add(i)
+  }
+}
+
+function unselectAllInputChannels() {
+  props.midiInputChannels.clear()
+}
+
+watch(
+  () => midi.multichannelToEquave,
+  (newValue) => {
+    if (newValue) {
+      selectAllInputChannels()
+    } else {
+      unselectAllInputChannels()
+      props.midiInputChannels.add(1)
+    }
+  }
+)
 </script>
 
 <template>
@@ -176,6 +198,10 @@ onUnmounted(() => {
               />
             </span>
           </div>
+          <div class="btn-group">
+            <button @click="selectAllInputChannels">Select all</button>
+            <button @click="unselectAllInputChannels">Select none</button>
+          </div>
           <div class="control checkbox-group">
             <div>
               <input type="checkbox" id="midi-velocity" v-model="midi.velocityOn" />