add simple midi support with the synth keys

.gitignore

@@ -0,0 +1 @@
+node_modules

src/css/popup.css

@@ -116,6 +116,20 @@
 	padding: 4px;
 }
 
+/* #midiPopupContent -------------------------------------------------------- */
+#midiPopupContent {
+	width: 400px;
+}
+#midiPopupSelect {
+	width: 100%;
+	color: inherit;
+	background-color: transparent;
+}
+#midiChanPopupSelect option {
+	padding: 4px;
+}
+
+
 /* #tempoPopupContent ---------------------------------------------------- */
 #tempoPopupContent {
 	width: 400px;

src/html/head.html

@@ -43,6 +43,7 @@
 		<canvas id="headAnalyser" class="btnMarge"></canvas>
 		<button id="headExport" class="btn btnMarge btnLarge btnBg gsuiIcon" data-icon="export" title="Export the composition"></button>
 		<button id="headSettings" class="btn btnMarge btnLarge btnBg gsuiIcon" data-icon="settings" title="Settings"></button>
+		<button id="headMidi" class="btn btnMarge btnLarge btnBg gsuiIcon" data-icon="midi" title="Midi Devices"></button>
 	</div>
 	<div id="headCurrentTime"></div>
 	<div id="winBtns">

src/html/popups/midi.html

@@ -0,0 +1,21 @@
+<div class="popup" id="midiPopupContent" data-remove>
+	<fieldset>
+		<legend>Midi Devices</legend>
+		<div class="param">
+			<div class="param-title">Midi Devices support</div>
+			<div class="param-values">
+				<label>
+					<input id="midiSupport" name="midiSupportEnabled" type="checkbox"/>
+				</label>
+			</div>
+		</div>
+		<div class="param">
+			<div class="param-title">Midi Devices</div>
+			<div class="param-values">
+				<label>
+					<select id="midiDeviceSelect" name="midiDevices"></select>
+				</label>
+			</div>
+		</div>
+	</fieldset>
+</div>

src/run.js

@@ -38,6 +38,7 @@ function UIrun() {
 	UIpatternrollInit();
 	UIrenderPopupInit();
 	UImainAnalyserInit();
+	UImidiPopupInit();
 	UIcompositionsInit();
 	UIsettingsPopupInit();
 	UIshortcutsPopupInit();

src/ui/midiPopup.js

@@ -0,0 +1,106 @@
+"use strict";
+
+function UImidiPopupInit() {
+  DOM.midiSupport.onchange = UImidiSelectToggle;
+  DOM.midiDeviceSelect.onchange = UImidiInSelect;
+  DOM.headMidi.onclick = UImidiPopupShow;
+  midiApiSupport();
+  midiAccess(UimidiSelectAddDevicesIn);
+}
+
+function midiApiSupport(success) {
+  // check for the support of web midi api
+  if (!navigator.requestMIDIAccess) {
+    DOM.midiSupport.checked = false;
+    DOM.midiSupport.disabled = true;
+    DOM.midiDeviceSelect.disabled = true;
+  } else {
+    DOM.midiSupport.checked = true;
+    DOM.midiSupport.disabled = false;
+    DOM.midiDeviceSelect.disabled = false;
+  }
+}
+
+function midiAccess(success) {
+  navigator.requestMIDIAccess().then(success, function () {
+    //error handeling no web midi api
+    DOM.midiSupport.checked = false;
+    DOM.midiSupport.disabled = true;
+    DOM.midiDeviceSelect.disabled = true;
+  });
+}
+
+function UimidiSelectAddDevicesIn(midi) {
+  //update the select when disconnect and connect devices
+  UImidiSelectPopulateDevices(midi);
+  midi.onstatechange = function (e) {
+    for (var i = DOM.midiDeviceSelect.options.length - 1; i >= 0; i--) {
+      DOM.midiDeviceSelect.remove(i);
+    }
+    UImidiSelectPopulateDevices(midi);
+  };
+  //default midi devices is the first one
+  midi.inputs.get("input-0").onmidimessage = midiMessageReceived;
+}
+
+function UImidiSelectPopulateDevices(midi) {
+  //populate the select with the midi devices
+  for (var input of midi.inputs.values()) {
+    const opt = document.createElement("option");
+    opt.value = input.id;
+    opt.text = input.name;
+    opt.defaultSelected = true;
+    DOM.midiDeviceSelect.append(opt);
+  }
+}
+
+function UImidiInSelect(e) {
+  midiAccess(function (midi) {
+    var connectedMidi = midi.inputs.get(e.target.id);
+    connectedMidi.onmidimessage = midiMessageReceived;
+  });
+}
+
+function parseMidiMessage(message) {
+  // Parse basic information out of a MIDI message
+  return {
+    command: message.data[0] >> 4,
+    channel: message.data[0] & 0xf,
+    note: message.data[1],
+    velocity: message.data[2] / 127,
+  };
+}
+
+function midiMessageReceived(e) {
+  if (!!DOM.midiSupport.checked) {
+    var midiMessage = parseMidiMessage(e);
+    if (midiMessage.velocity > 0) {
+      DAW.pianoroll.liveKeydown(midiMessage.note);
+      UIkeys.midiKeyDown(midiMessage.note);
+    } else {
+      DAW.pianoroll.liveKeyup(midiMessage.note);
+      UIkeys.midiKeyUp(midiMessage.note);
+    }
+  }
+}
+
+function UImidiSelectToggle(e) {
+  // toggle midi support for the app
+  if (DOM.midiSupport.checked) {
+    DOM.midiDeviceSelect.disabled = false;
+  } else {
+    DOM.midiDeviceSelect.disabled = true;
+  }
+}
+
+function UImidiPopupShow() {
+  gsuiPopup
+    .custom({
+      title: "Midi Devices",
+      submit: UImidiPopupSubmit,
+      element: DOM.midiPopupContent,
+    })
+    .then();
+}
+
+function UImidiPopupSubmit(form) {}

src/ui/patterns.js

@@ -16,9 +16,24 @@ window.UIpatternsClickFns = new Map( [
 ] );
 
 function UIpatternsInit() {
-	const orderBuff = new gsuiReorder(),
-		orderDrums = new gsuiReorder(),
-		orderKeys = new gsuiReorder();
+	const orderBuff = new gsuiReorder({
+		rootElement: DOM.buffPatterns,
+		itemSelector: "#buffPatterns .pattern",
+		handleSelector: "#buffPatterns .pattern-grip",
+		parentSelector: "#buffPatterns"
+	}),
+		orderDrums = new gsuiReorder({
+			rootElement: DOM.keysPatterns,
+			itemSelector: "#drumsPatterns .pattern",
+			handleSelector: "#drumsPatterns .pattern-grip",
+			parentSelector: "#drumsPatterns"
+		}),
+		orderKeys = new gsuiReorder({
+			rootElement: DOM.drumsPatterns,
+			itemSelector: "#keysPatterns .pattern",
+			handleSelector: "#keysPatterns .pattern-grip",
+			parentSelector: ".synth-patterns"
+		});
 
 	window.UIsvgForms.bufferHD.hdMode( true );
 	window.UIsvgForms.bufferHD.setDefaultViewbox( 260, 48 );
@@ -29,30 +44,12 @@ function UIpatternsInit() {
 	document.addEventListener( "drop", e => {
 		DAW.dropAudioFiles( e.dataTransfer.files );
 	} );
-	orderBuff.setRootElement( DOM.buffPatterns );
-	orderKeys.setRootElement( DOM.keysPatterns );
-	orderDrums.setRootElement( DOM.drumsPatterns );
-	orderBuff.setSelectors( {
-		item: "#buffPatterns .pattern",
-		handle: "#buffPatterns .pattern-grip",
-		parent: "#buffPatterns"
-	} );
-	orderDrums.setSelectors( {
-		item: "#drumsPatterns .pattern",
-		handle: "#drumsPatterns .pattern-grip",
-		parent: "#drumsPatterns"
-	} );
-	orderKeys.setSelectors( {
-		item: "#keysPatterns .pattern",
-		handle: "#keysPatterns .pattern-grip",
-		parent: ".synth-patterns"
-	} );
-	orderBuff.onchange = UIpatternsReorderChange.bind( null, DOM.buffPatterns );
-	orderDrums.onchange = UIpatternsReorderChange.bind( null, DOM.drumsPatterns );
-	orderKeys.onchange = UIpatternsKeysReorderChange;
-	orderBuff.setDataTransfert =
-	orderKeys.setDataTransfert =
-	orderDrums.setDataTransfert = UIpatternsDataTransfert;
+	// orderBuff.onchange = UIpatternsReorderChange.bind( null, DOM.buffPatterns );
+	// orderDrums.onchange = UIpatternsReorderChange.bind( null, DOM.drumsPatterns );
+	// orderKeys.onchange = UIpatternsKeysReorderChange;
+	// orderBuff.setDataTransfert =
+	// orderKeys.setDataTransfert =
+	// orderDrums.setDataTransfert = UIpatternsDataTransfert;
 }
 
 function UIpatternsDataTransfert( elPat ) {