feat(midi): Support for NoteOn and CC buttons (#507)

* feat(midi): Support for NoteOn and CC buttons

fix #506

* feat(midi): Renamed ccAsNoteOn into ccLatch and added noteOnLatch

* chore(midi): Remove unused console.log

* fix(midi): changes spread operator to foreach loop to replace state

The spread was causing the store module's state to lose the Vuex Observer, this forEach loop retains
the Observer.

fix #523

Co-authored-by: Sam Wray <sam@wray.pro>

src/application/setup-midi.js

@@ -3,6 +3,8 @@ let store;
 const clockHistory = [];
 const diffHistory = [];
 let nextBpmUpdate = 0;
+const TYPE_NOTEON = 144;
+const TYPE_CC = 176;
 
 // create a new audioContext to use intead of modV's
 // existing context - we get timing jitters otherwise
@@ -30,7 +32,7 @@ function handleInput(message) {
     return;
   }
 
-  const { listenForClock, listenForInput } = device;
+  const { listenForClock, listenForInput, ccLatch, noteOnLatch } = device;
 
   // clock
   if (type === 248 && listenForClock) {
@@ -78,14 +80,52 @@ function handleInput(message) {
       }
     }
   } else if (listenForInput) {
-    store.commit("midi/WRITE_DATA", {
-      id: `${id}-${name}-${manufacturer}`,
-      type,
-      channel,
-      data: type === 176 ? data / 127 : data
-    });
+    let commitValue = true;
+    let _data = data;
+    let _type = type;
+
+    // Overwrite the default behavior for ControlChange messages so that they
+    // behave like NoteOn
+    if (_type === TYPE_CC && ccLatch) {
+      _type = TYPE_NOTEON;
+    }
+
+    if (_type === TYPE_NOTEON) {
+      // We want to know when the button was pressed
+      if (data > 0) {
+        if (device.channelData !== undefined && device.channelData[channel]) {
+          _data = device.channelData[channel][_type] === 1 ? 0 : 1;
+
+          // Set the inital value if no value exists yet
+        } else {
+          _data = 1;
+        }
+
+        // Don't commit the value as this is "NoteOff" and we want
+        // to make sure that the button is not deactivated when it's
+        // released by the user
+      } else if (noteOnLatch) {
+        commitValue = false;
+      }
+    }
+
+    if (_type === TYPE_CC) {
+      _data = _data / 127;
+    }
+
+    if (commitValue) {
+      store.commit("midi/WRITE_DATA", {
+        id: `${id}-${name}-${manufacturer}`,
+        type: _type,
+        channel,
+        data: _data
+      });
+    }
 
     if (store.state.midi.learning) {
+      // Make sure to use the overwritten type
+      message.data[0] = _type;
+
       store.state.midi.learning(message);
     }
   }

src/application/worker/store/modules/midi.js

@@ -37,7 +37,9 @@ const mutations = {
       manufacturer,
       channelData: {},
       listenForInput: true,
-      listenForClock: false
+      listenForClock: false,
+      ccLatch: false,
+      noteOnLatch: false
     });
   },
 
@@ -58,7 +60,13 @@ const mutations = {
   },
 
   SET_STATE(state, newState) {
-    state = { ...newState };
+    const keys = Object.keys(newState);
+
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+
+      state[key] = newState[key];
+    }
   }
 };
 

src/components/InputDeviceConfig/MIDI.vue

@@ -11,14 +11,16 @@
   >
     <c span="1">MIDI Inputs</c>
     <c span="1..">
-      <grid columns="4">
+      <grid columns="5">
         <c>Name</c>
         <c>Input</c>
         <c>Clock</c>
+        <c>CC Latch</c>
+        <c>NoteOn Latch</c>
       </grid>
     </c>
     <c span="1.." v-for="(device, deviceId) in devices" :key="deviceId">
-      <grid columns="4">
+      <grid columns="5">
         <c>{{ device.name }}</c>
         <c>
           <Button
@@ -36,6 +38,22 @@
             {{ device.listenForClock ? "On" : "Off" }}
           </Button>
         </c>
+        <c>
+          <Button
+            class="light"
+            @click="toggleCcLatch(deviceId, !device.ccLatch)"
+          >
+            {{ device.ccLatch ? "On" : "Off" }}
+          </Button>
+        </c>
+        <c>
+          <Button
+            class="light"
+            @click="toggleNoteOnLatch(deviceId, !device.noteOnLatch)"
+          >
+            {{ device.noteOnLatch ? "On" : "Off" }}
+          </Button>
+        </c>
       </grid>
     </c>
   </grid>
@@ -72,6 +90,22 @@ export default {
         key: "listenForClock",
         value
       });
+    },
+
+    toggleCcLatch(id, value) {
+      this.$modV.store.commit("midi/UPDATE_DEVICE", {
+        id,
+        key: "ccLatch",
+        value
+      });
+    },
+
+    toggleNoteOnLatch(id, value) {
+      this.$modV.store.commit("midi/UPDATE_DEVICE", {
+        id,
+        key: "noteOnLatch",
+        value
+      });
     }
   }
 };