Feature/midi map

src/actions/instances.ts

@@ -2,7 +2,7 @@ import Router from "next/router";
 import { ActionBase, AppThunk } from "../lib/store";
 import { OSCQueryRNBOInstance, OSCQueryRNBOInstancePresetEntries, OSCValue } from "../lib/types";
 import { InstanceStateRecord } from "../models/instance";
-import { getInstanceByIndex } from "../selectors/instances";
+import { getInstanceByIndex, getInstance } from "../selectors/instances";
 import { getAppSetting } from "../selectors/settings";
 import { ParameterRecord } from "../models/parameter";
 import { MessagePortRecord } from "../models/messageport";
@@ -249,7 +249,6 @@ export const setInstanceParameterValueNormalizedOnRemote = throttle((instance: I
 		};
 
 		oscQueryBridge.sendPacket(writePacket(message));
-
 		// optimistic local state update
 		dispatch(setInstance(instance.setParameterNormalizedValue(param.id, value)));
 	}, 100);
@@ -291,6 +290,34 @@ export const restoreDefaultParameterMetaOnRemote = (_instance: InstanceStateReco
 		oscQueryBridge.sendPacket(writePacket(message));
 	};
 
+export const activateParameterMIDIMappingFocus = (instance: InstanceStateRecord, param: ParameterRecord): AppThunk =>
+	(dispatch) => {
+		dispatch(setInstance(instance.setParameterWaitingForMidiMapping(param.id)));
+	};
+
+export const clearParameterMidiMappingOnRemote = (id: InstanceStateRecord["id"], paramId: ParameterRecord["id"]): AppThunk =>
+	(_dispatch, getState) => {
+		const state = getState();
+		const instance = getInstance(state, id);
+		if (!instance) return;
+
+		const param = instance.parameters.get(paramId);
+		if (!param) return;
+
+		const meta = param.getParsedMeta();
+		if (typeof meta === "object" && !Array.isArray(meta)) {
+			delete meta.midi;
+			const message = {
+				address: `${param.path}/meta`,
+				args: [
+					{ type: "s", value: JSON.stringify(meta) }
+				]
+			};
+
+			oscQueryBridge.sendPacket(writePacket(message));
+		}
+	};
+
 export const setInstanceMessagePortMetaOnRemote = (_instance: InstanceStateRecord, port: MessagePortRecord, value: string): AppThunk =>
 	() => {
 		const message = {
@@ -362,7 +389,7 @@ export const updateInstanceMessages = (index: number, desc: OSCQueryRNBOInstance
 
 			const state = getState();
 			const instance = getInstanceByIndex(state, index);
-			if (instance) return;
+			if (!instance) return;
 
 			dispatch(setInstance(
 				instance
@@ -457,6 +484,85 @@ export const updateInstanceParameterValueNormalized = (index: number, id: Parame
 		}
 	};
 
+export const setInstanceWaitingForMidiMappingOnRemote = (id: InstanceStateRecord["id"], value: boolean): AppThunk =>
+	(dispatch, getState) => {
+		try {
+			const state = getState();
+			const instance = getInstance(state, id);
+			if (!instance) return;
+
+			dispatch(setInstance(instance.setWaitingForMapping(value)));
+
+			try {
+				const message = {
+					address: `${instance.path}/midi/last/report`,
+					args: [
+						{ type: value ? "T" : "F", value: value ? "true" : "false" }
+					]
+				};
+				oscQueryBridge.sendPacket(writePacket(message));
+			} catch (err) {
+				dispatch(showNotification({
+					level: NotificationLevel.error,
+					title: "Error while trying set midi mapping mode on remote",
+					message: "Please check the console for further details."
+				}));
+				console.log(err);
+			}
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+export const updateInstanceMIDIReport = (index: number, value: boolean): AppThunk =>
+	(dispatch, getState) => {
+		try {
+			const state = getState();
+			const instance = getInstanceByIndex(state, index);
+			if (!instance) return;
+			dispatch(setInstance(instance.setWaitingForMapping(value)));
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+export const updateInstanceMIDILastValue = (index: number, value: string): AppThunk =>
+	(dispatch, getState) => {
+		try {
+
+			const state = getState();
+
+			let instance = getInstanceByIndex(state, index);
+			if (!instance?.waitingForMidiMapping) return;
+
+			const midiMeta = JSON.parse(value);
+
+			// find waiting, update their meta, set them no longer waiting and update map
+			instance = instance.set("parameters", instance.parameters.map(param => {
+				if (param.waitingForMidiMapping) {
+					const meta = param.getParsedMetaObject();
+					meta.midi = midiMeta;
+
+					const message = {
+						address: `${param.path}/meta`,
+						args: [
+							{ type: "s", value: JSON.stringify(meta) }
+						]
+					};
+
+					oscQueryBridge.sendPacket(writePacket(message));
+					return param.setWaitingForMidiMapping(false);
+				}
+				return param;
+			}));
+
+			dispatch(setInstance(instance));
+
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
 export const updateInstanceParameterMeta = (index: number, id: ParameterRecord["id"], value: string): AppThunk =>
 	(dispatch, getState) => {
 		try {

src/components/instance/datarefTab.tsx

@@ -1,6 +1,5 @@
-import { Tabs, Text } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import { FunctionComponent, memo, useCallback } from "react";
-import { InstanceTab } from "../../lib/constants";
 import { useAppDispatch } from "../../hooks/useAppDispatch";
 import DataRefList from "../dataref/list";
 import classes from "./instance.module.css";
@@ -43,15 +42,15 @@ const InstanceDataRefsTab: FunctionComponent<InstanceDataRefTabProps> = memo(fun
 	}, [dispatch, instance]);
 
 	return (
-		<Tabs.Panel value={ InstanceTab.DataRefs } >
+		<Stack>
 			{
 				!instance.datarefs.size ? (
 					<div className={ classes.emptySection }>
 						This patcher instance has no buffers.
 					</div>
 				) : <DataRefList datarefs={ instance.datarefs } options={ datafiles } onSetDataRef={ onSetDataRef } onClearDataRef={ onClearDataRef } />
 			}
-		</Tabs.Panel>
+		</Stack>
 	);
 });
 

src/components/instance/index.tsx

@@ -65,10 +65,18 @@ const Instance: FunctionComponent<InstanceProps> = memo(function WrappedInstance
 				}
 			</Tabs.List>
 			<div className={ classes.instanceTabContentWrap } >
-				<InstanceParameterTab instance={ instance } sortAttr={ paramSortAttr } sortOrder={ paramSortOrder } />
-				<InstanceMessagesTab instance={ instance } outputEnabled={ enabledMessageOuput.value as boolean } />
-				<InstanceDataRefsTab instance={ instance } datafiles={ datafiles } />
-				<InstanceMIDITab instance={ instance } keyboardEnabled={ enabledMIDIKeyboard.value as boolean } />
+				<Tabs.Panel value={ InstanceTab.Parameters } >
+					<InstanceParameterTab instance={ instance } sortAttr={ paramSortAttr } sortOrder={ paramSortOrder } />
+				</Tabs.Panel>
+				<Tabs.Panel value={ InstanceTab.MessagePorts } >
+					<InstanceMessagesTab instance={ instance } outputEnabled={ enabledMessageOuput.value as boolean } />
+				</Tabs.Panel>
+				<Tabs.Panel value={ InstanceTab.DataRefs } >
+					<InstanceDataRefsTab instance={ instance } datafiles={ datafiles } />
+				</Tabs.Panel>
+				<Tabs.Panel value={ InstanceTab.MIDI } >
+					<InstanceMIDITab instance={ instance } keyboardEnabled={ enabledMIDIKeyboard.value as boolean } />
+				</Tabs.Panel>
 			</div>
 		</Tabs>
 	);

src/components/instance/messageTab.tsx

@@ -1,6 +1,5 @@
-import { Tabs } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { FunctionComponent, memo, useCallback } from "react";
-import { InstanceTab } from "../../lib/constants";
 import { useAppDispatch } from "../../hooks/useAppDispatch";
 import MessageInportList from "../messages/inportList";
 import { SectionTitle } from "../page/sectionTitle";
@@ -35,7 +34,7 @@ const InstanceMessagesTab: FunctionComponent<InstanceMessageTabProps> = memo(fun
 	}, [dispatch, instance]);
 
 	return (
-		<Tabs.Panel value={ InstanceTab.MessagePorts } >
+		<Stack>
 			<SectionTitle>Input Ports</SectionTitle>
 			{
 				!instance.messageInports.size ? (
@@ -64,7 +63,7 @@ const InstanceMessagesTab: FunctionComponent<InstanceMessageTabProps> = memo(fun
 						onSaveMetadata={ onSavePortMetadata }
 					/>
 			}
-		</Tabs.Panel>
+		</Stack>
 	);
 });
 

src/components/instance/midiTab.tsx

@@ -1,6 +1,4 @@
-import { Tabs } from "@mantine/core";
 import { FunctionComponent, memo, useCallback } from "react";
-import { InstanceTab } from "../../lib/constants";
 import { useAppDispatch } from "../../hooks/useAppDispatch";
 import KeyRoll from "../keyroll";
 import { InstanceStateRecord } from "../../models/instance";
@@ -27,9 +25,7 @@ const InstanceMIDITab: FunctionComponent<InstanceMIDITabProps> = memo(function W
 	}, [dispatch, instance]);
 
 	return (
-		<Tabs.Panel value={ InstanceTab.MIDI } >
-			<KeyRoll onTriggerNoteOn={ triggerMIDINoteOn } onTriggerNoteOff={ triggerMIDINoteOff } keyboardEnabled={ keyboardEnabled } />
-		</Tabs.Panel>
+		<KeyRoll onTriggerNoteOn={ triggerMIDINoteOn } onTriggerNoteOff={ triggerMIDINoteOff } keyboardEnabled={ keyboardEnabled } />
 	);
 });
 

src/components/instance/paramTab.tsx

@@ -1,12 +1,17 @@
-import { ActionIcon, Button, Group, Popover, SegmentedControl, Select, Stack, Tabs, Text, TextInput } from "@mantine/core";
-import { ChangeEvent, FC, FunctionComponent, KeyboardEvent, memo, useCallback, useEffect, useRef, useState } from "react";
-import { InstanceTab, ParameterSortAttr, SortOrder } from "../../lib/constants";
+import { ActionIcon, Button, Group, Popover, SegmentedControl, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { ChangeEvent, FC, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, memo, useCallback, useEffect, useRef, useState } from "react";
+import { ParameterSortAttr, SortOrder } from "../../lib/constants";
 import ParameterList from "../parameter/list";
 import { ParameterRecord } from "../../models/parameter";
 import classes from "./instance.module.css";
 import { useAppDispatch } from "../../hooks/useAppDispatch";
 import { InstanceStateRecord } from "../../models/instance";
-import { restoreDefaultParameterMetaOnRemote, setInstanceParameterMetaOnRemote, setInstanceParameterValueNormalizedOnRemote } from "../../actions/instances";
+import {
+	restoreDefaultParameterMetaOnRemote, setInstanceParameterMetaOnRemote,
+	setInstanceParameterValueNormalizedOnRemote,
+	setInstanceWaitingForMidiMappingOnRemote, clearParameterMidiMappingOnRemote,
+	activateParameterMIDIMappingFocus
+} from "../../actions/instances";
 import { OrderedSet as ImmuOrderedSet } from "immutable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowDownAZ, faArrowUpAZ, faSearch, faSort, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -39,7 +44,7 @@ const ParameterSearchInput: FC<ParameterSearchInputProps> = memo(function Wrappe
 		searchInputRef.current?.focus();
 	}, [setSearchValue]);
 
-	const onKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+	const onKeyDown = useCallback((e: ReactKeyboardEvent<HTMLInputElement>) => {
 		if (e.key === "Escape") {
 			if (searchValue.length) {
 				setSearchValue("");
@@ -142,6 +147,20 @@ const InstanceParameterTab: FunctionComponent<InstanceParameterTabProps> = memo(
 		dispatch(restoreDefaultParameterMetaOnRemote(instance, param));
 	}, [dispatch, instance]);
 
+	const onToggleMIDIMapping = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		e.preventDefault();
+		e.currentTarget.blur();
+		dispatch(setInstanceWaitingForMidiMappingOnRemote(instance.id, e.currentTarget.checked));
+	}, [dispatch, instance]);
+
+	const onActivateParameterMIDIMapping = useCallback((param: ParameterRecord) => {
+		dispatch(activateParameterMIDIMappingFocus(instance, param));
+	}, [dispatch, instance]);
+
+	const onClearParameterMidiMapping = useCallback((param: ParameterRecord) => {
+		dispatch(clearParameterMidiMappingOnRemote(instance.id, param.id));
+	}, [dispatch, instance]);
+
 	const onSearch = useDebouncedCallback((query: string) => {
 		setSearchValue(query);
 	}, 150);
@@ -150,12 +169,32 @@ const InstanceParameterTab: FunctionComponent<InstanceParameterTabProps> = memo(
 		setSortedParamIds(getSortedParameterIds(instance.parameters, sortAttr.value as ParameterSortAttr, sortOrder.value as SortOrder));
 	}, [instance, sortAttr, sortOrder]);
 
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.code === "Escape" && instance.waitingForMidiMapping && document.activeElement instanceof HTMLElement && document.activeElement.nodeName !== "INPUT") {
+				dispatch(setInstanceWaitingForMidiMappingOnRemote(instance.id, false));
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [instance, dispatch]);
+
+	useEffect(() => {
+		return () => {
+			dispatch(setInstanceWaitingForMidiMappingOnRemote(instance.id, false));
+		};
+	}, [instance.id, dispatch]);
+
 	let parameters = sortedParamIds.map(id => instance.parameters.get(id)).filter(p => !!p);
 	if (searchValue?.length) parameters = parameters.filter(p => p.matchesQuery(searchValue));
 
 	return (
-		<Tabs.Panel value={ InstanceTab.Parameters } >
-			<Stack gap="md" h="100%">
+		<Stack gap="md" h="100%">
+			<Group justify="space-between">
+				<Switch size="xs" variant="default" color="violet.4" label="MIDI Map" checked={ instance.waitingForMidiMapping } onChange={ onToggleMIDIMapping } />
 				<Group justify="flex-end" gap="xs">
 					<ParameterSearchInput onSearch={ onSearch } />
 					<Popover position="bottom-end" withArrow>
@@ -188,19 +227,27 @@ const InstanceParameterTab: FunctionComponent<InstanceParameterTabProps> = memo(
 						</Popover.Dropdown>
 					</Popover>
 				</Group>
-				{
-					!instance.parameters.size ? (
-						<div className={ classes.emptySection }>
-							This patcher instance has no parameters
-						</div>
-					) : (
-						<div className={ classes.paramSectionWrap } >
-							<ParameterList parameters={ parameters } onSetNormalizedValue={ onSetNormalizedParamValue } onSaveMetadata={ onSaveParameterMetadata } onRestoreMetadata={ onRestoreDefaultParameterMetadata } />
-						</div>
-					)
-				}
-			</Stack>
-		</Tabs.Panel>
+			</Group>
+			{
+				!instance.parameters.size ? (
+					<div className={ classes.emptySection }>
+						This patcher instance has no parameters
+					</div>
+				) : (
+					<div className={ classes.paramSectionWrap } >
+						<ParameterList
+							parameters={ parameters }
+							isMIDIMapping={ instance.waitingForMidiMapping }
+							onActivateMIDIMapping={ onActivateParameterMIDIMapping }
+							onSetNormalizedValue={ onSetNormalizedParamValue }
+							onSaveMetadata={ onSaveParameterMetadata }
+							onRestoreMetadata={ onRestoreDefaultParameterMetadata }
+							onClearMidiMapping={ onClearParameterMidiMapping }
+						/>
+					</div>
+				)
+			}
+		</Stack>
 	);
 });