From 26865df9981eb90cee6eb287a99d6d5663512506 Mon Sep 17 00:00:00 2001 From: Alex Norman Date: Wed, 6 Mar 2024 12:19:32 -0800 Subject: [PATCH 1/3] rename 'device" to "patcher instance" should we also update the URIs? --- src/components/device/messageTab.tsx | 4 ++-- src/components/device/paramTab.tsx | 2 +- src/components/nav/index.tsx | 2 +- src/pages/index.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/device/messageTab.tsx b/src/components/device/messageTab.tsx index 58785dfe..a2b391a1 100644 --- a/src/components/device/messageTab.tsx +++ b/src/components/device/messageTab.tsx @@ -30,7 +30,7 @@ const DeviceMessagesTab: FunctionComponent = memo(functio { device.messageInputs.size ? : (
- This device has no message inputs + This patcher instance has no message inputs
) } @@ -38,7 +38,7 @@ const DeviceMessagesTab: FunctionComponent = memo(functio { !device.messageOutputs.size ? (
- This device has no message outputs + This patcher instance has no message outputs
) : !outputEnabled ? (
diff --git a/src/components/device/paramTab.tsx b/src/components/device/paramTab.tsx index a4ee790b..751b9435 100644 --- a/src/components/device/paramTab.tsx +++ b/src/components/device/paramTab.tsx @@ -26,7 +26,7 @@ const DeviceParameterTab: FunctionComponent = memo(func { !device.parameters.size ? (
- This instance has no parameters + This patcher instance has no parameters
) : (
diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 9edeea06..154375c0 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -41,7 +41,7 @@ const AppNav: FunctionComponent = memo(function WrappedNav() { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fdd37243..dc1eaf3f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -82,7 +82,7 @@ const Index: FunctionComponent> = () => { From aabcec87811c9156f844e89c874696db43aa0317 Mon Sep 17 00:00:00 2001 From: Alex Norman Date: Wed, 6 Mar 2024 12:43:02 -0800 Subject: [PATCH 2/3] change path devices -> instances --- src/actions/instances.ts | 2 +- src/components/editor/index.tsx | 2 +- src/components/editor/patcherNode.tsx | 2 +- src/components/nav/index.tsx | 4 ++-- src/pages/{devices => instances}/[index].tsx | 0 5 files changed, 5 insertions(+), 5 deletions(-) rename src/pages/{devices => instances}/[index].tsx (100%) diff --git a/src/actions/instances.ts b/src/actions/instances.ts index 6ddc94a0..2b1b8d53 100644 --- a/src/actions/instances.ts +++ b/src/actions/instances.ts @@ -255,7 +255,7 @@ export const updateDeviceInstanceMessageOutputValue = (index: number, name: stri if (!enabled) return; // Active Device view?! - if (Router.asPath !== `/devices/${index}`) return; + if (Router.asPath !== `/instances/${index}`) return; const device = getDeviceByIndex(state, index); if (!device) return; diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx index 03de55e1..b59221ac 100644 --- a/src/components/editor/index.tsx +++ b/src/components/editor/index.tsx @@ -58,7 +58,7 @@ const GraphEditor: FunctionComponent = memo(function WrappedFl const onNodeDoubleClick = useCallback((e: React.MouseEvent, node: Node) => { if (node.type !== NodeType.Patcher) return; - push({ pathname: "/devices/[index]", query: { ...query, index: (node.data.node as GraphPatcherNodeRecord).index }}); + push({ pathname: "/instances/[index]", query: { ...query, index: (node.data.node as GraphPatcherNodeRecord).index }}); }, [query, push]); const flowNodes: Node[] = nodes.valueSeq().toArray().map(node => ({ diff --git a/src/components/editor/patcherNode.tsx b/src/components/editor/patcherNode.tsx index 6245902d..d475ac1c 100644 --- a/src/components/editor/patcherNode.tsx +++ b/src/components/editor/patcherNode.tsx @@ -31,7 +31,7 @@ const EditorPatcherNode: FunctionComponent = memo(function Wrap
diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 154375c0..d9e763ed 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -42,8 +42,8 @@ const AppNav: FunctionComponent = memo(function WrappedNav() { disabled={ deviceIndex === undefined } icon={ faVectorSquare } label="Patcher Instance Control" - href={{ pathname: "/devices/[index]", query: { ...restQuery, index: deviceIndex } }} - isActive={ pathname === "/devices/[index]" } + href={{ pathname: "/instances/[index]", query: { ...restQuery, index: deviceIndex } }} + isActive={ pathname === "/instances/[index]" } /> diff --git a/src/pages/devices/[index].tsx b/src/pages/instances/[index].tsx similarity index 100% rename from src/pages/devices/[index].tsx rename to src/pages/instances/[index].tsx From aef77fe98db87de1a76582dd9174ba439e0c3607 Mon Sep 17 00:00:00 2001 From: Alex Norman Date: Wed, 6 Mar 2024 13:40:44 -0800 Subject: [PATCH 3/3] rename 'device' to 'instance' in the code too --- src/actions/graph.ts | 28 ++-- src/actions/instances.ts | 150 +++++++++--------- src/components/device/index.tsx | 56 ------- src/components/device/midiTab.tsx | 34 ---- src/components/device/paramTab.tsx | 41 ----- .../{device => instance}/actions.tsx | 0 src/components/instance/index.tsx | 56 +++++++ .../instance.module.css} | 8 +- .../{device => instance}/messageTab.tsx | 30 ++-- src/components/instance/midiTab.tsx | 34 ++++ src/components/instance/paramTab.tsx | 41 +++++ src/components/messages/inportList.tsx | 4 +- src/components/messages/outportList.tsx | 4 +- src/components/nav/index.tsx | 6 +- src/components/parameter/list.tsx | 4 +- src/components/presets/index.tsx | 8 +- src/controller/oscqueryBridgeController.ts | 24 +-- src/lib/constants.ts | 2 +- src/models/graph.ts | 4 +- src/models/{device.ts => instance.ts} | 14 +- src/pages/instances/[index].tsx | 70 ++++---- src/reducers/instances.ts | 40 ++--- src/selectors/instances.ts | 16 +- 23 files changed, 337 insertions(+), 337 deletions(-) delete mode 100644 src/components/device/index.tsx delete mode 100644 src/components/device/midiTab.tsx delete mode 100644 src/components/device/paramTab.tsx rename src/components/{device => instance}/actions.tsx (100%) create mode 100644 src/components/instance/index.tsx rename src/components/{device/device.module.css => instance/instance.module.css} (87%) rename src/components/{device => instance}/messageTab.tsx (55%) create mode 100644 src/components/instance/midiTab.tsx create mode 100644 src/components/instance/paramTab.tsx rename src/models/{device.ts => instance.ts} (90%) diff --git a/src/actions/graph.ts b/src/actions/graph.ts index d42f9b42..2d4338bf 100644 --- a/src/actions/graph.ts +++ b/src/actions/graph.ts @@ -7,9 +7,9 @@ import { ConnectionType, GraphConnectionRecord, GraphNode, GraphNodeRecord, Grap import { getConnection, getConnectionByNodesAndPorts, getConnectionsForSourceNodeAndPort, getNode, getPatcherNodeByIndex, getNodes, getSystemNodeByJackNameAndDirection, getConnections, getPatcherNodes, getSystemNodes } from "../selectors/graph"; import { showNotification } from "./notifications"; import { NotificationLevel } from "../models/notification"; -import { DeviceStateRecord } from "../models/device"; -import { deleteDevice, setDevice, setDevices } from "./instances"; -import { getDevice } from "../selectors/instances"; +import { InstanceStateRecord } from "../models/instance"; +import { deleteInstance, setInstance, setInstances } from "./instances"; +import { getInstance } from "../selectors/instances"; import { PatcherRecord } from "../models/patcher"; import { Connection, EdgeChange, NodeChange } from "reactflow"; import { isValidConnection } from "../lib/editorUtils"; @@ -205,7 +205,7 @@ export const initNodes = (jackPortsInfo: OSCQueryRNBOJackPortInfo, instanceInfo: const state = getState(); const existingNodes = getNodes(state); - const devices: DeviceStateRecord[] = []; + const instances: InstanceStateRecord[] = []; const patcherNodes: GraphPatcherNodeRecord[] = []; let meta: OSCQuerySetMeta = { nodes: {} }; @@ -228,7 +228,7 @@ export const initNodes = (jackPortsInfo: OSCQueryRNBOJackPortInfo, instanceInfo: } patcherNodes.push(node); - devices.push(DeviceStateRecord.fromDescription(info)); + instances.push(InstanceStateRecord.fromDescription(info)); } // Build a list of all Jack generated names that have not been used for PatcherNodes above @@ -266,7 +266,7 @@ export const initNodes = (jackPortsInfo: OSCQueryRNBOJackPortInfo, instanceInfo: dispatch(deleteNodes(existingNodes.valueSeq().toArray())); dispatch(setNodes([...systemNodes, ...patcherNodes])); - dispatch(setDevices(devices)); + dispatch(setInstances(instances)); }; @@ -399,14 +399,14 @@ export const updateSystemPortInfo = (type: ConnectionType, direction: PortDirect }; // Trigger Updates on remote OSCQuery Runner -export const unloadPatcherNodeByIndexOnRemote = (deviceIndex: number): AppThunk => +export const unloadPatcherNodeByIndexOnRemote = (instanceIndex: number): AppThunk => (dispatch) => { try { const message = { address: "/rnbo/inst/control/unload", args: [ - { type: "i", value: deviceIndex } + { type: "i", value: instanceIndex } ] }; oscQueryBridge.sendPacket(writePacket(message)); @@ -740,9 +740,9 @@ export const addPatcherNode = (desc: OSCQueryRNBOInstance, metaString: string): dispatch(setNode(node)); - // Create Device State - const device = DeviceStateRecord.fromDescription(desc); - dispatch(setDevice(device)); + // Create Instance State + const instance = InstanceStateRecord.fromDescription(desc); + dispatch(setInstance(instance)); }; export const removePatcherNode = (index: number): AppThunk => @@ -754,9 +754,9 @@ export const removePatcherNode = (index: number): AppThunk => if (node?.type !== NodeType.Patcher) return; dispatch(deleteNode(node)); - const device = getDevice(state, node.id); - if (!device) return; - dispatch(deleteDevice(device)); + const instance = getInstance(state, node.id); + if (!instance) return; + dispatch(deleteInstance(instance)); } catch (e) { console.log(e); } diff --git a/src/actions/instances.ts b/src/actions/instances.ts index 2b1b8d53..59fd7be2 100644 --- a/src/actions/instances.ts +++ b/src/actions/instances.ts @@ -1,8 +1,8 @@ import Router from "next/router"; import { ActionBase, AppThunk } from "../lib/store"; import { OSCQueryRNBOInstance, OSCQueryRNBOInstancePresetEntries, OSCValue } from "../lib/types"; -import { DeviceStateRecord } from "../models/device"; -import { getDeviceByIndex } from "../selectors/instances"; +import { InstanceStateRecord } from "../models/instance"; +import { getInstanceByIndex } from "../selectors/instances"; import { getAppSettingValue } from "../selectors/settings"; import { ParameterRecord } from "../models/parameter"; import { OSCArgument, writePacket } from "osc"; @@ -14,76 +14,76 @@ import { PresetRecord } from "../models/preset"; import { AppSetting } from "../models/settings"; export enum InstanceActionType { - SET_DEVICE = "SET_DEVICE", - SET_DEVICES = "SET_DEVICES", - DELETE_DEVICE = "DELETE_DEVICE", - DELETE_DEVICES = "DELETE_DEVICES" + SET_INSTANCE = "SET_INSTANCE", + SET_INSTANCES = "SET_INSTANCES", + DELETE_INSTANCE = "DELETE_INSTANCE", + DELETE_INSTANCES = "DELETE_INSTANCES" } -export interface ISetDevice extends ActionBase { - type: InstanceActionType.SET_DEVICE; +export interface ISetInstance extends ActionBase { + type: InstanceActionType.SET_INSTANCE; payload: { - device: DeviceStateRecord; + instance: InstanceStateRecord; }; } -export interface ISetDevices extends ActionBase { - type: InstanceActionType.SET_DEVICES; +export interface ISetInstances extends ActionBase { + type: InstanceActionType.SET_INSTANCES; payload: { - devices: DeviceStateRecord[]; + instances: InstanceStateRecord[]; }; } -export interface IDeleteDevice extends ActionBase { - type: InstanceActionType.DELETE_DEVICE; +export interface IDeleteInstance extends ActionBase { + type: InstanceActionType.DELETE_INSTANCE; payload: { - device: DeviceStateRecord; + instance: InstanceStateRecord; }; } -export interface IDeleteDevices extends ActionBase { - type: InstanceActionType.DELETE_DEVICES; +export interface IDeleteInstances extends ActionBase { + type: InstanceActionType.DELETE_INSTANCES; payload: { - devices: DeviceStateRecord[]; + instances: InstanceStateRecord[]; }; } -export type InstanceAction = ISetDevice | ISetDevices | IDeleteDevice | IDeleteDevices; +export type InstanceAction = ISetInstance | ISetInstances | IDeleteInstance | IDeleteInstances; -export const setDevice = (device: DeviceStateRecord): ISetDevice => ({ - type: InstanceActionType.SET_DEVICE, +export const setInstance = (instance: InstanceStateRecord): ISetInstance => ({ + type: InstanceActionType.SET_INSTANCE, payload: { - device + instance } }); -export const setDevices = (devices: DeviceStateRecord[]): ISetDevices => ({ - type: InstanceActionType.SET_DEVICES, +export const setInstances = (instances: InstanceStateRecord[]): ISetInstances => ({ + type: InstanceActionType.SET_INSTANCES, payload: { - devices + instances } }); -export const deleteDevice = (device: DeviceStateRecord): IDeleteDevice => ({ - type: InstanceActionType.DELETE_DEVICE, +export const deleteInstance = (instance: InstanceStateRecord): IDeleteInstance => ({ + type: InstanceActionType.DELETE_INSTANCE, payload: { - device + instance } }); -export const deleteDevices = (devices: DeviceStateRecord[]): IDeleteDevices => ({ - type: InstanceActionType.DELETE_DEVICES, +export const deleteInstances = (instances: InstanceStateRecord[]): IDeleteInstances => ({ + type: InstanceActionType.DELETE_INSTANCES, payload: { - devices + instances } }); // Trigger Events on Remote OSCQuery Runner -export const loadPresetOnRemoteDeviceInstance = (device: DeviceStateRecord, preset: PresetRecord): AppThunk => +export const loadPresetOnRemoteInstance = (instance: InstanceStateRecord, preset: PresetRecord): AppThunk => (dispatch) => { try { const message = { - address: `${device.path}/presets/load`, + address: `${instance.path}/presets/load`, args: [ { type: "s", value: preset.name } ] @@ -99,11 +99,11 @@ export const loadPresetOnRemoteDeviceInstance = (device: DeviceStateRecord, pres } }; -export const savePresetToRemoteDeviceInstance = (device: DeviceStateRecord, name: string): AppThunk => +export const savePresetToRemoteInstance = (instance: InstanceStateRecord, name: string): AppThunk => (dispatch) => { try { const message = { - address: `${device.path}/presets/save`, + address: `${instance.path}/presets/save`, args: [ { type: "s", value: name } ] @@ -119,11 +119,11 @@ export const savePresetToRemoteDeviceInstance = (device: DeviceStateRecord, name } }; -export const destroyPresetOnRemoteDeviceInstance = (device: DeviceStateRecord, preset: PresetRecord): AppThunk => +export const destroyPresetOnRemoteInstance = (instance: InstanceStateRecord, preset: PresetRecord): AppThunk => (dispatch) => { try { const message = { - address: `${device.path}/presets/delete`, + address: `${instance.path}/presets/delete`, args: [ { type: "s", value: preset.name } ] @@ -139,7 +139,7 @@ export const destroyPresetOnRemoteDeviceInstance = (device: DeviceStateRecord, p } }; -export const sendDeviceInstanceMessageToRemote = (device: DeviceStateRecord, inportId: string, value: string): AppThunk => +export const sendInstanceMessageToRemote = (instance: InstanceStateRecord, inportId: string, value: string): AppThunk => (dispatch) => { const values = value.split(" ").reduce((values, v) => { const fv = parseFloat(v.replaceAll(",", ".").trim()); @@ -158,13 +158,13 @@ export const sendDeviceInstanceMessageToRemote = (device: DeviceStateRecord, inp const message = { - address: `/rnbo/inst/${device.index}/messages/in/${inportId}`, + address: `/rnbo/inst/${instance.index}/messages/in/${inportId}`, args: values }; oscQueryBridge.sendPacket(writePacket(message)); }; -export const triggerDeviceInstanceMidiNoteOnEventOnRemote = (device: DeviceStateRecord, note: number): AppThunk => +export const triggerInstanceMidiNoteOnEventOnRemote = (instance: InstanceStateRecord, note: number): AppThunk => () => { const midiChannel = 0; @@ -172,14 +172,14 @@ export const triggerDeviceInstanceMidiNoteOnEventOnRemote = (device: DeviceState const velocityByte = 100; const message = { - address: `${device.path}/midi/in`, + address: `${instance.path}/midi/in`, args: [routeByte, note, velocityByte].map(byte => ({ type: "i", value: byte })) }; oscQueryBridge.sendPacket(writePacket(message)); }; -export const triggerDeviceInstanceMidiNoteOffEventOnRemote = (device: DeviceStateRecord, note: number): AppThunk => +export const triggerInstanceMidiNoteOffEventOnRemote = (instance: InstanceStateRecord, note: number): AppThunk => () => { const midiChannel = 0; @@ -187,14 +187,14 @@ export const triggerDeviceInstanceMidiNoteOffEventOnRemote = (device: DeviceStat const velocityByte = 0; const message = { - address: `${device.path}/midi/in`, + address: `${instance.path}/midi/in`, args: [routeByte, note, velocityByte].map(byte => ({ type: "i", value: byte })) }; oscQueryBridge.sendPacket(writePacket(message)); }; -export const setDeviceInstanceParameterValueNormalizedOnRemote = throttle((device: DeviceStateRecord, param: ParameterRecord, value: number): AppThunk => +export const seInstanceParameterValueNormalizedOnRemote = throttle((instance: InstanceStateRecord, param: ParameterRecord, value: number): AppThunk => (dispatch) => { const message = { @@ -207,44 +207,44 @@ export const setDeviceInstanceParameterValueNormalizedOnRemote = throttle((devic oscQueryBridge.sendPacket(writePacket(message)); // optimistic local state update - dispatch(setDevice(device.setParameterNormalizedValue(param.id, value))); + dispatch(setInstance(instance.setParameterNormalizedValue(param.id, value))); }, 100); // Updates in response to remote OSCQuery Updates -export const updateDeviceInstancePresetEntries = (index: number, entries: OSCQueryRNBOInstancePresetEntries): AppThunk => +export const updateInstancePresetEntries = (index: number, entries: OSCQueryRNBOInstancePresetEntries): AppThunk => (dispatch, getState) => { try { const state = getState(); - const device = getDeviceByIndex(state, index); - if (!device) return; + const instance = getInstanceByIndex(state, index); + if (!instance) return; - dispatch(setDevice(device.set("presets", DeviceStateRecord.presetsFromDescription(entries)))); + dispatch(setInstance(instance.set("presets", InstanceStateRecord.presetsFromDescription(entries)))); } catch (e) { console.log(e); } }; -export const updateDeviceInstanceMessages = (index: number, desc: OSCQueryRNBOInstance["CONTENTS"]["messages"]): AppThunk => +export const updateInstanceMessages = (index: number, desc: OSCQueryRNBOInstance["CONTENTS"]["messages"]): AppThunk => (dispatch, getState) => { try { if (!desc) return; const state = getState(); - const device = getDeviceByIndex(state, index); - if (device) return; + const instance = getInstanceByIndex(state, index); + if (instance) return; - dispatch(setDevice( - device - .set("messageInputs", DeviceStateRecord.messageInputsFromDescription(desc)) - .set("messageOutputs", DeviceStateRecord.messageOutputsFromDescription(desc)) + dispatch(setInstance( + instance + .set("messageInputs", InstanceStateRecord.messageInputsFromDescription(desc)) + .set("messageOutputs", InstanceStateRecord.messageOutputsFromDescription(desc)) )); } catch (e) { console.log(e); } }; -export const updateDeviceInstanceMessageOutputValue = (index: number, name: string, value: OSCValue | OSCValue[]): AppThunk => +export const updateInstanceMessageOutputValue = (index: number, name: string, value: OSCValue | OSCValue[]): AppThunk => (dispatch, getState) => { try { @@ -254,58 +254,58 @@ export const updateDeviceInstanceMessageOutputValue = (index: number, name: stri const enabled = getAppSettingValue(state, AppSetting.debugMessageOutput); if (!enabled) return; - // Active Device view?! + // Active Instance view?! if (Router.asPath !== `/instances/${index}`) return; - const device = getDeviceByIndex(state, index); - if (!device) return; + const instance = getInstanceByIndex(state, index); + if (!instance) return; - dispatch(setDevice( - device.setMessageOutportValue(name, Array.isArray(value) ? value.join(", ") : `${value}`) + dispatch(setInstance( + instance.setMessageOutportValue(name, Array.isArray(value) ? value.join(", ") : `${value}`) )); } catch (e) { console.log(e); } }; -export const updateDeviceInstanceParameters = (index: number, desc: OSCQueryRNBOInstance["CONTENTS"]["params"]): AppThunk => +export const updateInstanceParameters = (index: number, desc: OSCQueryRNBOInstance["CONTENTS"]["params"]): AppThunk => (dispatch, getState) => { try { if (!desc) return; const state = getState(); - const device = getDeviceByIndex(state, index); - if (!device) return; + const instance = getInstanceByIndex(state, index); + if (!instance) return; - dispatch(setDevice( - device.set("parameters", DeviceStateRecord.parametersFromDescription(desc)) + dispatch(setInstance( + instance.set("parameters", InstanceStateRecord.parametersFromDescription(desc)) )); } catch (e) { console.log(e); } }; -export const updateDeviceInstanceParameterValue = (index: number, id: ParameterRecord["id"], value: number): AppThunk => +export const updateInstanceParameterValue = (index: number, id: ParameterRecord["id"], value: number): AppThunk => (dispatch, getState) => { try { const state = getState(); - const device = getDeviceByIndex(state, index); - if (!device) return; + const instance = getInstanceByIndex(state, index); + if (!instance) return; - dispatch(setDevice(device.setParameterValue(id, value))); + dispatch(setInstance(instance.setParameterValue(id, value))); } catch (e) { console.log(e); } }; -export const updateDeviceInstanceParameterValueNormalized = (index: number, id: ParameterRecord["id"], value: number): AppThunk => +export const updateInstanceParameterValueNormalized = (index: number, id: ParameterRecord["id"], value: number): AppThunk => (dispatch, getState) => { try { const state = getState(); - const device = getDeviceByIndex(state, index); - if (!device) return; + const instance = getInstanceByIndex(state, index); + if (!instance) return; - dispatch(setDevice(device.setParameterNormalizedValue(id, value))); + dispatch(setInstance(instance.setParameterNormalizedValue(id, value))); } catch (e) { console.log(e); } diff --git a/src/components/device/index.tsx b/src/components/device/index.tsx deleted file mode 100644 index c3e5243c..00000000 --- a/src/components/device/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Tabs } from "@mantine/core"; -import { FunctionComponent, memo, useState } from "react"; -import { faArrowRightArrowLeft, faMusic, faSliders } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classes from "./device.module.css"; -import { DeviceTab } from "../../lib/constants"; -import DeviceParameterTab from "./paramTab"; -import DeviceMessagesTab from "./messageTab"; -import DeviceMIDITab from "./midiTab"; -import { useIsMobileDevice } from "../../hooks/useIsMobileDevice"; -import { DeviceStateRecord } from "../../models/device"; - -const tabs = [ - { icon: faSliders, value: DeviceTab.Parameters, label: "Parameters" }, - { icon: faArrowRightArrowLeft, value: DeviceTab.MessagePorts, label: "Messages" }, - { icon: faMusic, value: DeviceTab.MIDI, label: "MIDI" } -]; - -export type DeviceInstanceProps = { - device: DeviceStateRecord; - enabledMessageOuput: boolean; -} - -const DeviceInstance: FunctionComponent = memo(function WrappedDeviceInstance({ - device, - enabledMessageOuput -}) { - - const [activeTab, setActiveTab] = useState(DeviceTab.Parameters); - const isMobile = useIsMobileDevice(); - - return ( - setActiveTab(t as DeviceTab) } - > - - { - tabs.map(({ icon, label, value }) => ( - } > - { label } - - )) - } - -
- - - -
- - ); -}); - -export default DeviceInstance; diff --git a/src/components/device/midiTab.tsx b/src/components/device/midiTab.tsx deleted file mode 100644 index 7f47b301..00000000 --- a/src/components/device/midiTab.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Tabs } from "@mantine/core"; -import { FunctionComponent, memo, useCallback } from "react"; -import { DeviceTab } from "../../lib/constants"; -import { useAppDispatch } from "../../hooks/useAppDispatch"; -import KeyRoll from "../keyroll"; -import { DeviceStateRecord } from "../../models/device"; -import { triggerDeviceInstanceMidiNoteOffEventOnRemote, triggerDeviceInstanceMidiNoteOnEventOnRemote } from "../../actions/instances"; - -export type DeviceMIDITabProps = { - device: DeviceStateRecord; -} - -const DeviceMIDITab: FunctionComponent = memo(function WrappedDeviceMIDITab({ - device -}) { - - const dispatch = useAppDispatch(); - - const triggerMIDINoteOn = useCallback((p: number) => { - dispatch(triggerDeviceInstanceMidiNoteOnEventOnRemote(device, p)); - }, [dispatch, device]); - - const triggerMIDINoteOff = useCallback((p: number) => { - dispatch(triggerDeviceInstanceMidiNoteOffEventOnRemote(device, p)); - }, [dispatch, device]); - - return ( - - - - ); -}); - -export default DeviceMIDITab; diff --git a/src/components/device/paramTab.tsx b/src/components/device/paramTab.tsx deleted file mode 100644 index 751b9435..00000000 --- a/src/components/device/paramTab.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Tabs } from "@mantine/core"; -import { FunctionComponent, memo, useCallback } from "react"; -import { DeviceTab } from "../../lib/constants"; -import ParameterList from "../parameter/list"; -import { ParameterRecord } from "../../models/parameter"; -import classes from "./device.module.css"; -import { useAppDispatch } from "../../hooks/useAppDispatch"; -import { DeviceStateRecord } from "../../models/device"; -import { setDeviceInstanceParameterValueNormalizedOnRemote } from "../../actions/instances"; - -export type DeviceParameterTabProps = { - device: DeviceStateRecord; -} - -const DeviceParameterTab: FunctionComponent = memo(function WrappedDeviceParameterTab({ - device -}) { - - const dispatch = useAppDispatch(); - const onSetNormalizedParamValue = useCallback((param: ParameterRecord, val: number) => { - dispatch(setDeviceInstanceParameterValueNormalizedOnRemote(device, param, val)); - }, [dispatch, device]); - - return ( - - { - !device.parameters.size ? ( -
- This patcher instance has no parameters -
- ) : ( -
- -
- ) - } - - ); -}); - -export default DeviceParameterTab; diff --git a/src/components/device/actions.tsx b/src/components/instance/actions.tsx similarity index 100% rename from src/components/device/actions.tsx rename to src/components/instance/actions.tsx diff --git a/src/components/instance/index.tsx b/src/components/instance/index.tsx new file mode 100644 index 00000000..f8cebe05 --- /dev/null +++ b/src/components/instance/index.tsx @@ -0,0 +1,56 @@ +import { Tabs } from "@mantine/core"; +import { FunctionComponent, memo, useState } from "react"; +import { faArrowRightArrowLeft, faMusic, faSliders } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classes from "./instance.module.css"; +import { InstanceTab } from "../../lib/constants"; +import InstanceParameterTab from "./paramTab"; +import InstanceMessagesTab from "./messageTab"; +import InstanceMIDITab from "./midiTab"; +import { useIsMobileDevice } from "../../hooks/useIsMobileDevice"; +import { InstanceStateRecord } from "../../models/instance"; + +const tabs = [ + { icon: faSliders, value: InstanceTab.Parameters, label: "Parameters" }, + { icon: faArrowRightArrowLeft, value: InstanceTab.MessagePorts, label: "Messages" }, + { icon: faMusic, value: InstanceTab.MIDI, label: "MIDI" } +]; + +export type InstanceProps = { + instance: InstanceStateRecord; + enabledMessageOuput: boolean; +} + +const Instance: FunctionComponent = memo(function WrappedInstance({ + instance, + enabledMessageOuput +}) { + + const [activeTab, setActiveTab] = useState(InstanceTab.Parameters); + const isMobile = useIsMobileDevice(); + + return ( + setActiveTab(t as InstanceTab) } + > + + { + tabs.map(({ icon, label, value }) => ( + } > + { label } + + )) + } + +
+ + + +
+ + ); +}); + +export default Instance; diff --git a/src/components/device/device.module.css b/src/components/instance/instance.module.css similarity index 87% rename from src/components/device/device.module.css rename to src/components/instance/instance.module.css index 52bd44f3..470d23fd 100644 --- a/src/components/device/device.module.css +++ b/src/components/instance/instance.module.css @@ -1,4 +1,4 @@ -.deviceNotFound { +.instanceNotFound { align-items: center; color: var(--mantine-color-dimmed); display: flex; @@ -7,18 +7,18 @@ height: 100%; } -.deviceInstanceWrap { +.instanceWrap { height: 100%; gap: var(--mantine-spacing-md); } -.deviceTabWrap { +.instanceTabWrap { display: flex; flex: 1; flex-direction: column; } -.deviceTabContentWrap { +.instanceTabContentWrap { flex: 1; padding-top: var(--mantine-spacing-lg); diff --git a/src/components/device/messageTab.tsx b/src/components/instance/messageTab.tsx similarity index 55% rename from src/components/device/messageTab.tsx rename to src/components/instance/messageTab.tsx index a2b391a1..ad5456f5 100644 --- a/src/components/device/messageTab.tsx +++ b/src/components/instance/messageTab.tsx @@ -1,34 +1,34 @@ import { Tabs } from "@mantine/core"; import { FunctionComponent, memo, useCallback } from "react"; -import { DeviceTab } from "../../lib/constants"; +import { InstanceTab } from "../../lib/constants"; import { useAppDispatch } from "../../hooks/useAppDispatch"; import MessageInportList from "../messages/inportList"; import { SectionTitle } from "../page/sectionTitle"; import MessageOutportList from "../messages/outportList"; -import classes from "./device.module.css"; -import { DeviceStateRecord } from "../../models/device"; -import { sendDeviceInstanceMessageToRemote } from "../../actions/instances"; +import classes from "./instance.module.css"; +import { InstanceStateRecord } from "../../models/instance"; +import { sendInstanceMessageToRemote } from "../../actions/instances"; -export type DeviceMessageTabProps = { - device: DeviceStateRecord; +export type InstanceMessageTabProps = { + instance: InstanceStateRecord; outputEnabled: boolean; } -const DeviceMessagesTab: FunctionComponent = memo(function WrappedDeviceMessagesTab({ - device, +const InstanceMessagesTab: FunctionComponent = memo(function WrappedInstanceMessagesTab({ + instance, outputEnabled }) { const dispatch = useAppDispatch(); const onSendInportMessage = useCallback((id: string, value: string) => { - dispatch(sendDeviceInstanceMessageToRemote(device, id, value)); - }, [dispatch, device]); + dispatch(sendInstanceMessageToRemote(instance, id, value)); + }, [dispatch, instance]); return ( - + Inputs { - device.messageInputs.size ? : ( + instance.messageInputs.size ? : (
This patcher instance has no message inputs
@@ -36,7 +36,7 @@ const DeviceMessagesTab: FunctionComponent = memo(functio } Outputs { - !device.messageOutputs.size ? ( + !instance.messageOutputs.size ? (
This patcher instance has no message outputs
@@ -44,10 +44,10 @@ const DeviceMessagesTab: FunctionComponent = memo(functio
Message output monitoring is currently disabled. Enable it in the settings in order to display the output values.
- ) : + ) : } ); }); -export default DeviceMessagesTab; +export default InstanceMessagesTab; diff --git a/src/components/instance/midiTab.tsx b/src/components/instance/midiTab.tsx new file mode 100644 index 00000000..0ef836f0 --- /dev/null +++ b/src/components/instance/midiTab.tsx @@ -0,0 +1,34 @@ +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"; +import { triggerInstanceMidiNoteOffEventOnRemote, triggerInstanceMidiNoteOnEventOnRemote } from "../../actions/instances"; + +export type InstanceMIDITabProps = { + instance: InstanceStateRecord; +} + +const InstanceMIDITab: FunctionComponent = memo(function WrappedInstanceMIDITab({ + instance +}) { + + const dispatch = useAppDispatch(); + + const triggerMIDINoteOn = useCallback((p: number) => { + dispatch(triggerInstanceMidiNoteOnEventOnRemote(instance, p)); + }, [dispatch, instance]); + + const triggerMIDINoteOff = useCallback((p: number) => { + dispatch(triggerInstanceMidiNoteOffEventOnRemote(instance, p)); + }, [dispatch, instance]); + + return ( + + + + ); +}); + +export default InstanceMIDITab; diff --git a/src/components/instance/paramTab.tsx b/src/components/instance/paramTab.tsx new file mode 100644 index 00000000..95f59a6b --- /dev/null +++ b/src/components/instance/paramTab.tsx @@ -0,0 +1,41 @@ +import { Tabs } from "@mantine/core"; +import { FunctionComponent, memo, useCallback } from "react"; +import { InstanceTab } 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 { seInstanceParameterValueNormalizedOnRemote } from "../../actions/instances"; + +export type InstanceParameterTabProps = { + instance: InstanceStateRecord; +} + +const InstanceParameterTab: FunctionComponent = memo(function WrappedInstanceParameterTab({ + instance +}) { + + const dispatch = useAppDispatch(); + const onSetNormalizedParamValue = useCallback((param: ParameterRecord, val: number) => { + dispatch(seInstanceParameterValueNormalizedOnRemote(instance, param, val)); + }, [dispatch, instance]); + + return ( + + { + !instance.parameters.size ? ( +
+ This patcher instance has no parameters +
+ ) : ( +
+ +
+ ) + } + + ); +}); + +export default InstanceParameterTab; diff --git a/src/components/messages/inportList.tsx b/src/components/messages/inportList.tsx index 1acf1180..c14e483e 100644 --- a/src/components/messages/inportList.tsx +++ b/src/components/messages/inportList.tsx @@ -1,10 +1,10 @@ import { FunctionComponent, memo } from "react"; import InportEntry from "./inport"; import classes from "./ports.module.css"; -import { DeviceStateRecord } from "../../models/device"; +import { InstanceStateRecord } from "../../models/instance"; export type MessageInportListProps = { - inports: DeviceStateRecord["messageInputs"]; + inports: InstanceStateRecord["messageInputs"]; onSendMessage: (id: string, value: string) => any; } diff --git a/src/components/messages/outportList.tsx b/src/components/messages/outportList.tsx index a1f38747..1b094ce4 100644 --- a/src/components/messages/outportList.tsx +++ b/src/components/messages/outportList.tsx @@ -1,10 +1,10 @@ import { FunctionComponent, memo } from "react"; import classes from "./ports.module.css"; import MessageOutportEntry from "./outport"; -import { DeviceStateRecord } from "../../models/device"; +import { InstanceStateRecord } from "../../models/instance"; export type MessageOutportListProps = { - outports: DeviceStateRecord["messageOutputs"]; + outports: InstanceStateRecord["messageOutputs"]; } const MessageOutportList: FunctionComponent = memo(function WrappedMessageOutportList({ diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index d9e763ed..c9b7411d 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -19,7 +19,7 @@ const AppNav: FunctionComponent = memo(function WrappedNav() { const onToggleSettings = useCallback(() => dispatch(toggleShowSettings()), [dispatch]); const [ settingsAreShown, - deviceIndex + instanceIndex ] = useAppSelector((state: RootStateType) => [ getShowSettingsModal(state), getFirstPatcherNodeIndex(state) @@ -39,10 +39,10 @@ const AppNav: FunctionComponent = memo(function WrappedNav() { isActive={ pathname === "/" } /> diff --git a/src/components/parameter/list.tsx b/src/components/parameter/list.tsx index 6dd45aff..d915a30e 100644 --- a/src/components/parameter/list.tsx +++ b/src/components/parameter/list.tsx @@ -5,11 +5,11 @@ import { useElementSize, useViewportSize } from "@mantine/hooks"; import { Breakpoints } from "../../lib/constants"; import { clamp } from "../../lib/util"; import { ParameterRecord } from "../../models/parameter"; -import { DeviceStateRecord } from "../../models/device"; +import { InstanceStateRecord } from "../../models/instance"; export type ParameterListProps = { onSetNormalizedValue: (parameter: ParameterRecord, nValue: number) => any; - parameters: DeviceStateRecord["parameters"]; + parameters: InstanceStateRecord["parameters"]; } const ParameterList: FunctionComponent = memo(function WrappedParameterList({ diff --git a/src/components/presets/index.tsx b/src/components/presets/index.tsx index 69c18a3c..febc84e7 100644 --- a/src/components/presets/index.tsx +++ b/src/components/presets/index.tsx @@ -9,7 +9,7 @@ import { modals } from "@mantine/modals"; import { PresetRecord } from "../../models/preset"; import { Seq } from "immutable"; -export type DevicePresetDrawerProps = { +export type InstancePresetDrawerProps = { open: boolean; onClose: () => any; onDeletePreset: (preset: PresetRecord) => any; @@ -18,14 +18,14 @@ export type DevicePresetDrawerProps = { presets: Seq.Indexed; }; -const DevicePresetDrawer: FunctionComponent = memo(function WrappedDevicePresetDrawer({ +const InstancePresetDrawer: FunctionComponent = memo(function WrappedInstancePresetDrawer({ open, onClose, onDeletePreset, onLoadPreset, onSavePreset, presets -}: DevicePresetDrawerProps) { +}: InstancePresetDrawerProps) { const onTriggerDeletePreset = useCallback((preset: PresetRecord) => { modals.openConfirmModal({ @@ -61,4 +61,4 @@ const DevicePresetDrawer: FunctionComponent = memo(func ); }); -export default DevicePresetDrawer; +export default InstancePresetDrawer; diff --git a/src/controller/oscqueryBridgeController.ts b/src/controller/oscqueryBridgeController.ts index a3a187cb..eba490f4 100644 --- a/src/controller/oscqueryBridgeController.ts +++ b/src/controller/oscqueryBridgeController.ts @@ -11,7 +11,7 @@ import { initRunnerConfig, updateRunnerConfig } from "../actions/settings"; import { initSets } from "../actions/sets"; import { sleep } from "../lib/util"; import { getPatcherNodeByIndex } from "../selectors/graph"; -import { updateDeviceInstanceMessageOutputValue, updateDeviceInstanceMessages, updateDeviceInstanceParameterValue, updateDeviceInstanceParameterValueNormalized, updateDeviceInstanceParameters, updateDeviceInstancePresetEntries } from "../actions/instances"; +import { updateInstanceMessageOutputValue, updateInstanceMessages, updateInstanceParameterValue, updateInstanceParameterValueNormalized, updateInstanceParameters, updateInstancePresetEntries } from "../actions/instances"; import { ConnectionType, PortDirection } from "../models/graph"; import { showNotification } from "../actions/notifications"; import { NotificationLevel } from "../models/notification"; @@ -153,7 +153,7 @@ export class OSCQueryBridgeControllerPrivate { // Handle Instances and Patcher Nodes first if (instancePathMatcher.test(path)) { - // New Device Instance Added - slight timeout to let the graph build on the runner first + // New Instance Added - slight timeout to let the graph build on the runner first await sleep(500); const info = await this._requestState(path); const meta = await this._requestState("/rnbo/inst/control/sets/meta"); @@ -183,20 +183,20 @@ export class OSCQueryBridgeControllerPrivate { ) { // Updated Preset Entries const presetInfo = await this._requestState< OSCQueryRNBOInstance["CONTENTS"]["presets"]>(`/rnbo/inst/${index}/presets`); - return void dispatch(updateDeviceInstancePresetEntries(index, presetInfo.CONTENTS.entries)); + return void dispatch(updateInstancePresetEntries(index, presetInfo.CONTENTS.entries)); } else if ( instInfoMatch.groups.content === "params" && !instInfoMatch.groups.rest.endsWith("/normalized") ) { // Add Parameter const paramInfo = await this._requestState< OSCQueryRNBOInstance["CONTENTS"]["params"]>(`/rnbo/inst/${index}/params`); - return void dispatch(updateDeviceInstanceParameters(index, paramInfo)); + return void dispatch(updateInstanceParameters(index, paramInfo)); } else if ( instInfoMatch.groups.content === "messages/in" || instInfoMatch.groups.content === "messages/out" ) { // Add Message Inputs & Outputs const messagesInfo = await this._requestState(`/rnbo/inst/${index}/messages`); - return void dispatch(updateDeviceInstanceMessages(index, messagesInfo)); + return void dispatch(updateInstanceMessages(index, messagesInfo)); } } @@ -230,7 +230,7 @@ export class OSCQueryBridgeControllerPrivate { instInfoMatch.groups.rest === "entries" ) { const presetInfo = await this._requestState< OSCQueryRNBOInstance["CONTENTS"]["presets"]>(`/rnbo/inst/${index}/presets`); - return void dispatch(updateDeviceInstancePresetEntries(index, presetInfo.CONTENTS.entries)); + return void dispatch(updateInstancePresetEntries(index, presetInfo.CONTENTS.entries)); } // Removed Parameter @@ -239,7 +239,7 @@ export class OSCQueryBridgeControllerPrivate { !instInfoMatch.groups.rest.endsWith("/normalized") ) { const paramInfo = await this._requestState< OSCQueryRNBOInstance["CONTENTS"]["params"]>(`/rnbo/inst/${index}/params`); - return void dispatch(updateDeviceInstanceParameters(index, paramInfo)); + return void dispatch(updateInstanceParameters(index, paramInfo)); } // Removed Message Inport @@ -247,7 +247,7 @@ export class OSCQueryBridgeControllerPrivate { instInfoMatch.groups.content === "messages/in" || instInfoMatch.groups.content === "messages/out" ) { const messagesInfo = await this._requestState(`/rnbo/inst/${index}/messages`); - return void dispatch(updateDeviceInstanceMessages(index, messagesInfo)); + return void dispatch(updateInstanceMessages(index, messagesInfo)); } } @@ -331,8 +331,8 @@ export class OSCQueryBridgeControllerPrivate { if (!name || !packet.args.length || typeof packet.args[0] !== "number") return; isNormalized - ? dispatch(updateDeviceInstanceParameterValueNormalized(index, name, packet.args[0])) - : dispatch(updateDeviceInstanceParameterValue(index, name, packet.args[0])); + ? dispatch(updateInstanceParameterValueNormalized(index, name, packet.args[0])) + : dispatch(updateInstanceParameterValue(index, name, packet.args[0])); return; } @@ -343,7 +343,7 @@ export class OSCQueryBridgeControllerPrivate { packetMatch.groups.rest === "entries" ) { const presetInfo = await this._requestState< OSCQueryRNBOInstance["CONTENTS"]["presets"]>(`/rnbo/inst/${index}/presets`); - return void dispatch(updateDeviceInstancePresetEntries(index, presetInfo.CONTENTS.entries)); + return void dispatch(updateInstancePresetEntries(index, presetInfo.CONTENTS.entries)); } // Output Messages @@ -351,7 +351,7 @@ export class OSCQueryBridgeControllerPrivate { packetMatch.groups.content === "messages/out" && packetMatch.groups.rest?.length ) { - return void dispatch(updateDeviceInstanceMessageOutputValue(index, packetMatch.groups.rest, packet.args as any as OSCValue | OSCValue[])); + return void dispatch(updateInstanceMessageOutputValue(index, packetMatch.groups.rest, packet.args as any as OSCValue | OSCValue[])); } } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 65206896..42a5f8a6 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -15,7 +15,7 @@ export enum AppStatus { Error } -export enum DeviceTab { +export enum InstanceTab { MessagePorts = "msg", MIDI = "midi", Parameters = "params" diff --git a/src/models/graph.ts b/src/models/graph.ts index 0b2b1bc8..32ae7743 100644 --- a/src/models/graph.ts +++ b/src/models/graph.ts @@ -302,9 +302,9 @@ export class GraphSystemNodeRecord extends ImmuRecord({ static fromDescription(systemJackNames: ImmuSet, desc: OSCQueryRNBOJackPortInfo): GraphSystemNodeRecord[] { - // We expect systemJackNames to be a Set of all, non device instances jack assigned names + // We expect systemJackNames to be a Set of all, non rnbo instances jack assigned names // in order to be able to filter out the global Jack Port description for creating SystemNodes. - // This is necessary as SystemNodes, in contrast to device instances, don't have a dedicated tree desc + // This is necessary as SystemNodes, in contrast to rnbo instances, don't have a dedicated tree desc const nodes: GraphSystemNodeRecord[] = []; for (const jackName of systemJackNames.valueSeq().toArray()) { diff --git a/src/models/device.ts b/src/models/instance.ts similarity index 90% rename from src/models/device.ts rename to src/models/instance.ts index ce012cda..c2cc8278 100644 --- a/src/models/device.ts +++ b/src/models/instance.ts @@ -3,7 +3,7 @@ import { ParameterRecord } from "./parameter"; import { PresetRecord } from "./preset"; import { OSCQueryRNBOInstance, OSCQueryRNBOInstancePresetEntries } from "../lib/types"; -export type DeviceStateProps = { +export type InstanceStateProps = { index: number; patcher: string; path: string; @@ -16,7 +16,7 @@ export type DeviceStateProps = { const collator = new Intl.Collator("en-US"); -export class DeviceStateRecord extends ImmuRecord({ +export class InstanceStateRecord extends ImmuRecord({ index: 0, name: "", @@ -34,18 +34,18 @@ export class DeviceStateRecord extends ImmuRecord({ return this.name; } - public setMessageOutportValue(id: string, value: string): DeviceStateRecord { + public setMessageOutportValue(id: string, value: string): InstanceStateRecord { return this.set("messageOutputs", this.messageOutputs.set(id, value)); } - public setParameterValue(id: ParameterRecord["id"], value: number): DeviceStateRecord { + public setParameterValue(id: ParameterRecord["id"], value: number): InstanceStateRecord { const param = this.parameters.get(id); if (!param) return this; return this.set("parameters", this.parameters.set(param.id, param.setValue(value))); } - public setParameterNormalizedValue(id: ParameterRecord["id"], value: number): DeviceStateRecord { + public setParameterNormalizedValue(id: ParameterRecord["id"], value: number): InstanceStateRecord { const param = this.parameters.get(id); if (!param) return this; @@ -90,9 +90,9 @@ export class DeviceStateRecord extends ImmuRecord({ return desc.CONTENTS.name.VALUE as string; } - public static fromDescription(desc: OSCQueryRNBOInstance): DeviceStateRecord { + public static fromDescription(desc: OSCQueryRNBOInstance): InstanceStateRecord { - return new DeviceStateRecord({ + return new InstanceStateRecord({ index: parseInt(desc.FULL_PATH.split("/").pop(), 10), name: this.getJackName(desc.CONTENTS.jack), patcher: desc.CONTENTS.name.VALUE, diff --git a/src/pages/instances/[index].tsx b/src/pages/instances/[index].tsx index 77757cd2..5aa7b7df 100644 --- a/src/pages/instances/[index].tsx +++ b/src/pages/instances/[index].tsx @@ -1,78 +1,78 @@ import { ChangeEvent, MouseEvent, useCallback } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch"; import { RootStateType } from "../../lib/store"; -import DeviceInstance from "../../components/device"; +import InstanceComponent from "../../components/instance"; import { useRouter } from "next/router"; import { Button, Group, NativeSelect, Stack } from "@mantine/core"; -import classes from "../../components/device/device.module.css"; +import classes from "../../components/instance/instance.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCamera, faDiagramProject, faTrash, faVectorSquare } from "@fortawesome/free-solid-svg-icons"; import { getAppStatus } from "../../selectors/appStatus"; import { AppStatus } from "../../lib/constants"; import Link from "next/link"; -import { getDeviceByIndex, getDevices } from "../../selectors/instances"; +import { getInstanceByIndex, getInstances } from "../../selectors/instances"; import { unloadPatcherNodeByIndexOnRemote } from "../../actions/graph"; import { getAppSettingValue } from "../../selectors/settings"; import { AppSetting } from "../../models/settings"; -import DevicePresetDrawer from "../../components/presets"; +import InstancePresetDrawer from "../../components/presets"; import { PresetRecord } from "../../models/preset"; -import { destroyPresetOnRemoteDeviceInstance, loadPresetOnRemoteDeviceInstance, savePresetToRemoteDeviceInstance } from "../../actions/instances"; +import { destroyPresetOnRemoteInstance, loadPresetOnRemoteInstance, savePresetToRemoteInstance } from "../../actions/instances"; import { useDisclosure } from "@mantine/hooks"; -export default function Device() { +export default function Instance() { const { query, isReady, pathname, push } = useRouter(); const [presetDrawerIsOpen, { close: closePresetDrawer, toggle: togglePresetDrawer }] = useDisclosure(); const { index, ...restQuery } = query; - const deviceIndex = parseInt(Array.isArray(index) ? index.join("") : index || "0", 10); + const instanceIndex = parseInt(Array.isArray(index) ? index.join("") : index || "0", 10); const dispatch = useAppDispatch(); const [ - currentDevice, + currentInstance, appStatus, - devices, + instances, enabledMessageOuput ] = useAppSelector((state: RootStateType) => { - const currentDevice = getDeviceByIndex(state, deviceIndex); + const currentInstance = getInstanceByIndex(state, instanceIndex); const enabledMessageOuput = getAppSettingValue(state, AppSetting.debugMessageOutput); return [ - currentDevice, + currentInstance, getAppStatus(state), - getDevices(state), + getInstances(state), enabledMessageOuput ]; }); - const onChangeDevice = useCallback((e: ChangeEvent) => { + const onChangeInstance = useCallback((e: ChangeEvent) => { push({ pathname, query: { ...query, index: e.currentTarget.value } }); }, [push, pathname, query]); - const onUnloadDevice = useCallback((e: MouseEvent) => { - dispatch(unloadPatcherNodeByIndexOnRemote(currentDevice.index)); + const onUnloadInstance = useCallback((e: MouseEvent) => { + dispatch(unloadPatcherNodeByIndexOnRemote(currentInstance.index)); push({ pathname: "/", query: restQuery }); - }, [dispatch, currentDevice, push, restQuery]); + }, [dispatch, currentInstance, push, restQuery]); const onLoadPreset = useCallback((preset: PresetRecord) => { - dispatch(loadPresetOnRemoteDeviceInstance(currentDevice, preset)); - }, [dispatch, currentDevice]); + dispatch(loadPresetOnRemoteInstance(currentInstance, preset)); + }, [dispatch, currentInstance]); const onSavePreset = useCallback((name: string) => { - dispatch(savePresetToRemoteDeviceInstance(currentDevice, name)); - }, [dispatch, currentDevice]); + dispatch(savePresetToRemoteInstance(currentInstance, name)); + }, [dispatch, currentInstance]); const onDeletePreset = useCallback((preset: PresetRecord) => { - dispatch(destroyPresetOnRemoteDeviceInstance(currentDevice, preset)); - }, [dispatch, currentDevice]); + dispatch(destroyPresetOnRemoteInstance(currentInstance, preset)); + }, [dispatch, currentInstance]); if (!isReady || appStatus !== AppStatus.Ready) return null; - if (!currentDevice) { - // Device not found / doesn't exist + if (!currentInstance) { + // Instance not found / doesn't exist return ( -
-

Device Not Found

+
+

Instance Not Found

- - ); diff --git a/src/reducers/instances.ts b/src/reducers/instances.ts index 94b4e4be..cfad8caa 100644 --- a/src/reducers/instances.ts +++ b/src/reducers/instances.ts @@ -1,55 +1,55 @@ import { Map as ImmuMap } from "immutable"; -import { DeviceStateRecord } from "../models/device"; +import { InstanceStateRecord } from "../models/instance"; import { InstanceAction, InstanceActionType } from "../actions/instances"; -export interface DeviceInstancesState { - devices: ImmuMap; +export interface InstanceInstancesState { + instances: ImmuMap; } -export const instances = (state: DeviceInstancesState = { +export const instances = (state: InstanceInstancesState = { - devices: ImmuMap() -}, action: InstanceAction): DeviceInstancesState => { + instances: ImmuMap() +}, action: InstanceAction): InstanceInstancesState => { switch(action.type) { - case InstanceActionType.SET_DEVICE: { - const { device } = action.payload; + case InstanceActionType.SET_INSTANCE: { + const { instance } = action.payload; return { ...state, - devices: state.devices.set(device.id, device) + instances: state.instances.set(instance.id, instance) }; } - case InstanceActionType.SET_DEVICES: { - const { devices } = action.payload; + case InstanceActionType.SET_INSTANCES: { + const { instances } = action.payload; return { ...state, - devices: state.devices.withMutations(map => { - for (const device of devices) { - map.set(device.id, device); + instances: state.instances.withMutations(map => { + for (const instance of instances) { + map.set(instance.id, instance); } }) }; } - case InstanceActionType.DELETE_DEVICE: { - const { device } = action.payload; + case InstanceActionType.DELETE_INSTANCE: { + const { instance } = action.payload; return { ...state, - devices: state.devices.delete(device.id) + instances: state.instances.delete(instance.id) }; } - case InstanceActionType.DELETE_DEVICES: { - const { devices } = action.payload; + case InstanceActionType.DELETE_INSTANCES: { + const { instances } = action.payload; return { ...state, - devices: state.devices.deleteAll(devices.map(d => d.id)) + instances: state.instances.deleteAll(instances.map(d => d.id)) }; } diff --git a/src/selectors/instances.ts b/src/selectors/instances.ts index 56ba7aab..c8c1abc2 100644 --- a/src/selectors/instances.ts +++ b/src/selectors/instances.ts @@ -1,19 +1,19 @@ import { Map as ImmuMap } from "immutable"; import { RootStateType } from "../lib/store"; -import { DeviceStateRecord } from "../models/device"; +import { InstanceStateRecord } from "../models/instance"; -export const getDevice = (state: RootStateType, id: DeviceStateRecord["id"]): DeviceStateRecord | undefined => state.instances.devices.get(id); -export const getDevices = (state: RootStateType): ImmuMap => state.instances.devices; +export const getInstance = (state: RootStateType, id: InstanceStateRecord["id"]): InstanceStateRecord | undefined => state.instances.instances.get(id); +export const getInstances = (state: RootStateType): ImmuMap => state.instances.instances; -export const getDeviceByIndex = (state: RootStateType, index: DeviceStateRecord["index"]): DeviceStateRecord | undefined => { +export const getInstanceByIndex = (state: RootStateType, index: InstanceStateRecord["index"]): InstanceStateRecord | undefined => { const id = state.graph.patcherNodeIdByIndex.get(index); - return id ? state.instances.devices.get(id) : undefined; + return id ? state.instances.instances.get(id) : undefined; }; -export const getDevicesByIndex = (state: RootStateType): ImmuMap => { - return ImmuMap().withMutations(map => { +export const getInstancesByIndex = (state: RootStateType): ImmuMap => { + return ImmuMap().withMutations(map => { state.graph.patcherNodeIdByIndex.forEach((id, index) => { - const node = getDevice(state, id); + const node = getInstance(state, id); if (node) map.set(index, node); }); });