From efac5f62dde9508d71b5dc86818b0647f06db882 Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Thu, 18 Apr 2024 15:34:20 +0200
Subject: [PATCH] Make multichannel-to-equave settings and color mapping
 dependent on mode

PR #657
---
 src/App.vue                  |   8 ++-
 src/components/MidiPiano.vue |   3 +-
 src/views/MidiView.vue       | 116 +++++++++++++++++++----------------
 3 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1d49371a..e408f6a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,8 +72,10 @@ function sendNoteOn(frequency: number, rawAttack: number) {
 }
 
 function midiNoteOn(index: number, rawAttack?: number, channel?: number) {
+  const multichannel = midi.multichannelToEquave
+
   // in multichannel-to-equave mode calculate an offset based on the incoming channel
-  if (midi.multichannelToEquave && channel !== undefined) {
+  if (multichannel && channel !== undefined) {
     let offset =
       mmod(
         channel - midi.multichannelCenter + midi.multichannelEquavesDown,
@@ -99,7 +101,7 @@ function midiNoteOn(index: number, rawAttack?: number, channel?: number) {
   const whiteMode = midi.whiteMode
   const indices = scale.whiteIndices
 
-  if (whiteMode === 'off') {
+  if (whiteMode === 'off' || multichannel) {
     tuningTableKeyOn(index)
   } else if (whiteMode === 'simple') {
     if (info.whiteNumber === undefined) {
@@ -156,7 +158,7 @@ function midiNoteOn(index: number, rawAttack?: number, channel?: number) {
     if (!midi.velocityOn) {
       rawRelease = 80
     }
-    if (whiteMode === 'simple') {
+    if (whiteMode === 'simple' || multichannel) {
       if (info.whiteNumber !== undefined) {
         tuningTableKeyOff(info.whiteNumber)
       }
diff --git a/src/components/MidiPiano.vue b/src/components/MidiPiano.vue
index 37f4f99c..ce69d352 100644
--- a/src/components/MidiPiano.vue
+++ b/src/components/MidiPiano.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   baseMidiNote: number
   whiteModeOffset: number
   midiWhiteMode: 'off' | 'simple' | 'blackAverage' | 'keyColors'
+  multichannel: boolean
   keyColors: string[]
   activeKeys: Set<number>
 }>()
@@ -30,7 +31,7 @@ const whiteIndices = computed(() => computeWhiteIndices(props.baseMidiNote, prop
 
 function keyLabel(chromaticNumber: number) {
   const info = midiKeyInfo(chromaticNumber)
-  if (props.midiWhiteMode === 'off') {
+  if (props.midiWhiteMode === 'off' || props.multichannel) {
     return [(chromaticNumber - props.baseMidiNote).toString()]
   } else if (props.midiWhiteMode === 'simple') {
     if (info.whiteNumber !== undefined) {
diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index c1f72127..ae497a72 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -186,67 +186,77 @@ onUnmounted(() => {
               <label for="multichannel">Multichannel-to-equave</label>
             </div>
           </div>
-          <label>Settings for multichannel-to-equave mode</label>
-          <div class="control multichannel-input-container">
-            <div>
-              Center channel
-              <input
-                id="multichannel-center"
-                class="control"
-                type="number"
-                min="1"
-                max="16"
-                v-model="midi.multichannelCenter"
-              />
-            </div>
-            <div>
-              Total equaves
-              <input
-                id="multichannel-num-equaves"
-                class="control"
-                type="number"
-                min="1"
-                max="16"
-                v-model="midi.multichannelNumEquaves"
-              />
+          <template v-if="midi.multichannelToEquave">
+            <label>Settings for multichannel-to-equave mode</label>
+            <div class="control multichannel-input-container">
+              <div>
+                Center channel
+                <input
+                  id="multichannel-center"
+                  class="control"
+                  type="number"
+                  min="1"
+                  max="16"
+                  v-model="midi.multichannelCenter"
+                />
+              </div>
+              <div>
+                Total equaves
+                <input
+                  id="multichannel-num-equaves"
+                  class="control"
+                  type="number"
+                  min="1"
+                  max="16"
+                  v-model="midi.multichannelNumEquaves"
+                />
+              </div>
+              <div>
+                Equaves down
+                <input
+                  id="multichannel-equaves-down"
+                  class="control"
+                  type="number"
+                  min="0"
+                  max="15"
+                  v-model="midi.multichannelEquavesDown"
+                />
+              </div>
             </div>
-            <div>
-              Equaves down
-              <input
-                id="multichannel-equaves-down"
-                class="control"
-                type="number"
-                min="0"
-                max="15"
-                v-model="midi.multichannelEquavesDown"
-              />
+          </template>
+          <template v-if="!midi.multichannelToEquave">
+            <div class="control radio-group">
+              <label>Color mapping</label>
+              <span>
+                <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
+                <label for="white-off">Chromatic</label>
+              </span>
+              <span>
+                <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
+                <label for="white-simple">White only</label>
+              </span>
+              <span>
+                <input
+                  type="radio"
+                  id="white-black"
+                  value="blackAverage"
+                  v-model="midi.whiteMode"
+                />
+                <label for="white-black">White w/ interpolation</label>
+              </span>
+              <span>
+                <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
+                <label for="white-color">White key to white color</label>
+              </span>
             </div>
-          </div>
-          <div class="control radio-group">
-            <label>Color mapping</label>
-            <span>
-              <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
-              <label for="white-off">Chromatic</label>
-            </span>
-            <span>
-              <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
-              <label for="white-simple">White only</label>
-            </span>
-            <span>
-              <input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
-              <label for="white-black">White w/ interpolation</label>
-            </span>
-            <span>
-              <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
-              <label for="white-color">White key to white color</label>
-            </span>
-          </div>
+          </template>
         </div>
         <div class="piano-container">
           <MidiPiano
             :whiteModeOffset="scale.whiteModeOffset"
             :baseMidiNote="scale.baseMidiNote"
             :midiWhiteMode="midi.whiteMode"
+            :multichannel="midi.multichannelToEquave"
             :keyColors="scale.colors"
             :activeKeys="activeKeys"
           />