shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/rerdavies/pipedal

Browse Source
This commit is contained in:
Robin E.R. Davies
2026-06-17 14:11:24 -04:00
parent a752eac22c 321fc792bb
commit 4522200b3b
85 changed files with 1702 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/CMakeLists.txt
+1 -1
View File
@@ -293,7 +293,7 @@ add_custom_command(
src/pipedal/IconColorDropdownButton.tsx
src/pipedal/PluginOutputControl.tsx
src/pipedal/PluginPresetsDialog.tsx
src/pipedal/JackServerSettingsDialog.tsx
src/pipedal/AudioDeviceDialog.tsx
src/pipedal/TextInfo_RewriteT3kUrls.ts
src/pipedal/MidiBindingsDialog.tsx
src/pipedal/DialogStack.tsx
vite/src/pipedal/AlsaDeviceInfo.tsx
+8
View File
@@ -83,6 +83,14 @@ export default class AlsaDeviceInfo {
}
return result;
}
shortDeviceName() : string {
// The best device names for USB devices are buried in the long name, so we try to extract them if we can.
let pos = this.longName.indexOf(" at usb-");
if (pos > 0) {
return this.longName.substring(0, pos);
}
return this.name;
}
cardId: number = -1;
id: string = "";
vite/src/pipedal/JackServerSettingsDialog.tsx → vite/src/pipedal/AudioDeviceDialog.tsx
+11 -11
View File
@@ -67,7 +67,7 @@ function sortDevices(devices: AlsaDeviceInfo[]): AlsaDeviceInfo[] {
let ca = category(a);
let cb = category(b);
if (ca !== cb) return ca - cb;
return a.name.localeCompare(b.name);
return a.shortDeviceName().localeCompare(b.shortDeviceName());
});
return copy;
}
@@ -91,7 +91,7 @@ enum WarningDialogType {
Apply,
Ok,
};
interface JackServerSettingsDialogState {
interface AudioDeviceDialogState {
latencyText: string;
jackServerSettings: JackServerSettings;
jackHostStatus?: JackHostStatus;
@@ -117,7 +117,7 @@ const styles = (theme: Theme) =>
whiteSpace: "nowrap"
}
});
export interface JackServerSettingsDialogProps extends WithStyles<typeof styles> {
export interface AudioDeviceDialogProps extends WithStyles<typeof styles> {
open: boolean;
jackServerSettings: JackServerSettings;
onClose: () => void;
@@ -287,12 +287,12 @@ function isOkEnabled(jackServerSettings: JackServerSettings, alsaDevices?: AlsaD
}
const JackServerSettingsDialog = withStyles(
class extends ResizeResponsiveComponent<JackServerSettingsDialogProps, JackServerSettingsDialogState> {
const AudioDeviceDialog = withStyles(
class extends ResizeResponsiveComponent<AudioDeviceDialogProps, AudioDeviceDialogState> {
model: PiPedalModel;
constructor(props: JackServerSettingsDialogProps) {
constructor(props: AudioDeviceDialogProps) {
super(props);
this.model = PiPedalModelFactory.getInstance();
@@ -456,7 +456,7 @@ const JackServerSettingsDialog = withStyles(
}
componentDidUpdate(oldProps: JackServerSettingsDialogProps) {
componentDidUpdate(oldProps: AudioDeviceDialogProps) {
this.updateActive();
}
@@ -584,7 +584,7 @@ const JackServerSettingsDialog = withStyles(
if (!this.state.alsaDevices) return deviceId;
for (let i = 0; i < this.state.alsaDevices.length; ++i) {
if (this.state.alsaDevices[i].id === deviceId) {
return this.state.alsaDevices[i].name;
return this.state.alsaDevices[i].shortDeviceName();
}
}
return deviceId;
@@ -673,7 +673,7 @@ const JackServerSettingsDialog = withStyles(
<MenuItem key={d.id} disabled={d.captureBusy}
value={d.id}
style={{ opacity: d.captureBusy ? 0.3 : 1 }}
>{d.name}</MenuItem>
>{d.shortDeviceName()}</MenuItem>
))}
</Select>
</FormControl>
@@ -695,7 +695,7 @@ const JackServerSettingsDialog = withStyles(
<MenuItem key={d.id} value={d.id}
style={{ opacity: d.playbackBusy ? 0.3 : 1.0 }}
disabled={d.playbackBusy}
>{d.name}</MenuItem>
>{d.shortDeviceName()}</MenuItem>
))}
</Select>
</FormControl>
@@ -819,4 +819,4 @@ const JackServerSettingsDialog = withStyles(
},
styles);
export default JackServerSettingsDialog;
export default AudioDeviceDialog;
vite/src/pipedal/Draggable.tsx
+2
View File
@@ -251,6 +251,7 @@ const Draggable =
if (this.pointerType !== "touch") {
this.dragTarget.style.transform = "scale(" + SELECT_SCALE + ")";
this.dragTarget.style.zIndex = "3";
this.dragTarget.style.position = "absolute";
}
}
}
@@ -259,6 +260,7 @@ const Draggable =
element.style.transform = "";
element.style.zIndex = this.savedIndex;
element.style.opacity = this.savedOpacity;
element.style.position = "relative";
}
onPointerCancel(e: PointerEvent<HTMLDivElement>) {
vite/src/pipedal/Lv2Plugin.tsx
+90 -57
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -835,15 +836,44 @@ export class UiControl implements Deserializable<UiControl> {
valueToRange(value: number): number {
if (this.toggled_property) return value === 0 ? 0 : 1;
if (this.integer_property || this.enumeration_property) {
value = Math.round(value);
}
let range = (value - this.min_value) / (this.max_value - this.min_value);
let range: number;
if (this.is_logarithmic) {
let minValue = this.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(this.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
if (this.range_steps > 1) {
range = Math.round(range * (this.range_steps - 1)) / (this.range_steps - 1);
}
} else {
range = (value - this.min_value) / (this.max_value - this.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
@@ -852,17 +882,67 @@ export class UiControl implements Deserializable<UiControl> {
if (range > 1) range = 1;
if (this.toggled_property) return range === 0 ? 0 : 1;
if (this.range_steps > 1) {
range = Math.round(range * (this.range_steps - 1)) / (this.range_steps - 1);
}
let value: number;
let value = range * (this.max_value - this.min_value) + this.min_value;
if (this.integer_property || this.enumeration_property) {
value = Math.round(value);
if (this.min_value === this.max_value) {
value = this.min_value;
} else {
if (this.is_logarithmic) {
let minValue = this.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(this.max_value / minValue, range);
if (!isFinite(value)) {
value = this.max_value;
} else if (isNaN(value)) {
value = this.min_value;
}
} else {
value = range * (this.max_value - this.min_value) + this.min_value;
}
if (this.integer_property) {
value = Math.round(value);
}
}
return value;
}
clampValue(value: number): number {
return this.rangeToValue(this.valueToRange(value));
}
getDisplayUnits(): string {
if (this.custom_units !== "") {
return this.custom_units.replace("%f", "");
}
switch (this.units) {
case Units.bar: return "bar";
case Units.beat: return "beats";
case Units.bpm: return "bpm";
case Units.cent: return "cents";
case Units.cm: return "cm";
case Units.db: return "dB";
case Units.hz: return "Hz";
case Units.khz: return "kHz";
case Units.km: return "km";
case Units.m: return "m";
case Units.mhz: return "MHz";
case Units.midiNote: return "MIDI note";
case Units.min: return "min";
case Units.ms: return "ms";
case Units.pc: return "%";
case Units.s: return "s";
case Units.semitone12TET: return "st";
default: return "";
}
}
formatDisplayValue(value: number): string {
if (this.integer_property) {
value = Math.round(value);
@@ -893,56 +973,9 @@ export class UiControl implements Deserializable<UiControl> {
return semitone12TETValue(value);
}
let text = this.formatShortValue(value);
switch (this.units) {
case Units.bpm:
text += "bpm";
break;
case Units.cent:
text += "cents";
break;
case Units.cm:
text += "cm";
break;
case Units.db:
text += "dB";
break;
case Units.hz:
text += "Hz";
break;
case Units.khz:
text += "kHz";
break;
case Units.km:
text += "km";
break;
case Units.m:
text += "m";
break;
case Units.mhz:
text += "MHz";
break;
case Units.min:
text += "min";
break;
case Units.ms:
text += "ms";
break;
case Units.pc:
text += "%";
break;
case Units.unknown:
if (this.custom_units !== "") {
text = this.custom_units.replace("%f", text);
}
break;
default:
break;
}
return text;
return this.formatShortValue(value) + this.getDisplayUnits();
}
formatShortValue(value: number): string {
if (this.enumeration_property) {
for (let i = 0; i < this.scale_points.length; ++i) {
vite/src/pipedal/MidiBindingView.tsx
+40 -10
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -25,7 +26,7 @@ import { withStyles } from "tss-react/mui";
import { createStyles } from './WithStyles';
import Snackbar from '@mui/material/Snackbar';
import { UiPlugin } from './Lv2Plugin';
import { UiPlugin, UiControl } from './Lv2Plugin';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
@@ -96,6 +97,7 @@ interface MidiBindingViewProps extends WithStyles<typeof styles> {
midiBinding: MidiBinding;
midiControlType: MidiControlType;
canDoTapTempo: boolean;
uiControl?: UiControl;
onChange: (instanceId: number, newBinding: MidiBinding) => void;
}
@@ -188,15 +190,28 @@ const MidiBindingView =
this.props.onChange(this.props.instanceId, newBinding);
}
handleMinChange(value: number): void {
if (!this.props.uiControl) return;
let newBinding = this.props.midiBinding.clone();
newBinding.minValue = value;
newBinding.minValue = this.props.uiControl.valueToRange(value) ;
this.props.onChange(this.props.instanceId, newBinding);
}
handleMaxChange(value: number): void {
if (!this.props.uiControl) return;
let newBinding = this.props.midiBinding.clone();
newBinding.maxValue = value;
newBinding.maxValue = this.props.uiControl.valueToRange(value);
console.log(value, newBinding.maxValue)
this.props.onChange(this.props.instanceId, newBinding);
}
private getDisplayUnit(): string {
let control = this.props.uiControl;
if (!control) return "";
if (control.custom_units !== "") {
return control.custom_units.replace("%f", "");
}
return ` ${control.getDisplayUnits()}`
}
handleCtlMinChange(value: number): void {
let newBinding = this.props.midiBinding.clone();
newBinding.minControlValue = Math.round(value);
@@ -638,21 +653,36 @@ const MidiBindingView =
)
}
{
showLinearRange && (
showLinearRange && (() => {
let uiControl = this.props.uiControl;
let displayMin = uiControl ? uiControl.min_value : 0;
let displayMax = uiControl ? uiControl.max_value : 1;
let unit = this.getDisplayUnit();
let isInteger = uiControl?.integer_property ?? false;
return (
<div style={{ display: "flex", flexFlow: "row wrap", alignItems: "center" }}>
<div className={classes.controlDiv}>
<Typography noWrap display="inline">Min Val:&nbsp;</Typography>
<NumericInput value={midiBinding.minValue} ariaLabel='min'
min={0} max={1} onChange={(value) => { this.handleMinChange(value); }}
<NumericInput value={this.props.uiControl?.rangeToValue(midiBinding.minValue) ?? 0} ariaLabel='min'
min={displayMin} max={displayMax} integer={isInteger}
onChange={(value) => { this.handleMinChange(value); }}
/>
{unit !== "" && (
<Typography noWrap display="inline">&nbsp;{unit.trim()}</Typography>
)}
</div>
<div className={classes.controlDiv}>
<Typography noWrap display="inline">Max Val:&nbsp;</Typography>
<NumericInput value={midiBinding.maxValue} ariaLabel='max'
min={0} max={1} onChange={(value) => { this.handleMaxChange(value); }} />
<NumericInput value={this.props.uiControl?.rangeToValue(midiBinding.maxValue) ?? 0} ariaLabel='max'
min={displayMin} max={displayMax} integer={isInteger}
onChange={(value) => { this.handleMaxChange(value); }} />
{unit !== "" && (
<Typography noWrap display="inline">&nbsp;{unit.trim()}</Typography>
)}
</div>
</div>
)
);
})()
}
{
canRotaryScale && (
vite/src/pipedal/MidiBindingsDialog.tsx
+2
View File
@@ -214,6 +214,7 @@ export const MidiBindingDialog =
midiControlType={ getMidiControlType(plugin, "__bypass")
}
canDoTapTempo={false }
uiControl={plugin.getControl("__bypass")}
onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
/>
</td>
@@ -258,6 +259,7 @@ export const MidiBindingDialog =
midiControlType={getMidiControlType(plugin, symbol)}
midiBinding={item.getMidiBinding(symbol)}
canDoTapTempo={canDoTapTempo(plugin, symbol)}
uiControl={control}
onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
/>
</td>
vite/src/pipedal/ModGuiHost.tsx
+8 -103
View File
@@ -862,7 +862,7 @@ class FilmstripControl implements ModGuiControl {
console.error("pipedal: Invalid mod-widget-rotation value: " + rotationAttr);
return;
}
let range = this.valueToRange(this.value);
let range = this.props.pluginControl.valueToRange(this.value);
this.frameElement.style.transform = `rotate(${rotation * range - rotation / 2}deg)`;
return;
@@ -926,13 +926,13 @@ class FilmstripControl implements ModGuiControl {
let pluginControl = this.props.pluginControl;
let value = this.isPointerDown ? this.pointerDownValue : this.value;
value = this.clampValue(value);
value = this.props.pluginControl.clampValue(value);
let isHorizontalStrip =
this.filmstripInfo.frameWidth / this.filmstripInfo.frameHeight
< this.filmstripInfo.width / this.filmstripInfo.height;
if (isHorizontalStrip) {
let range = this.valueToRange(value);
let range = this.props.pluginControl.valueToRange(value);
if (range < 0) {
range = 0;
@@ -1045,101 +1045,6 @@ class FilmstripControl implements ModGuiControl {
this.pointerDownValue = this.value;
}
valueToRange(value: number): number {
let uiControl = this.props.pluginControl;
if (uiControl) {
let range: number;
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(uiControl.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
} else {
range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
return 0;
}
rangeToValue(range: number): number {
if (range < 0) range = 0;
if (range > 1) range = 1;
let uiControl = this.props.pluginControl;
if (uiControl) {
let value: number;
if (uiControl.min_value === uiControl.max_value) {
value = uiControl.min_value;
} else {
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(uiControl.max_value / minValue, range);
if (!isFinite(value)) {
value = uiControl.max_value;
} else if (isNaN(value)) {
value = uiControl.min_value;
}
} else {
value = range * (uiControl.max_value - uiControl.min_value) + uiControl.min_value;
}
}
return value;
}
return 0;
}
clampValue(value: number): number {
let control = this.props.pluginControl;
if (control.enumeration_property) {
value = control.clampSelectValue(value);
} else if (control.toggled_property) {
if (value < (control.min_value + control.max_value) / 2) {
value = control.min_value;
} else {
value = control.max_value;
}
} else if (control.integer_property) {
value = Math.round(value);
} else if (control.range_steps != 0) {
let step = (control.max_value - control.min_value) / control.range_steps;
value = Math.round((value - control.min_value) / step) * step + control.min_value;
}
if (value < control.min_value) {
value = control.min_value;
}
if (value > control.max_value) {
value = control.max_value;
}
return value;
}
handlePointerMove(event: PointerEvent) {
if (!this.frameElement) {
return; // Not mounted yet
@@ -1167,14 +1072,14 @@ class FilmstripControl implements ModGuiControl {
let dRange = -dy / rate;
let range = this.valueToRange(this.pointerDownValue);
let range = this.props.pluginControl.valueToRange(this.pointerDownValue);
range += dRange;
if (range < 0) range = 0;
if (range > 1) range = 1;
let newValue = this.rangeToValue(range);
let newValue = this.props.pluginControl.rangeToValue(range);
this.pointerDownValue = newValue;
this.setControlValue(newValue);
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, this.clampValue(newValue));
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, this.props.pluginControl.clampValue(newValue));
}
handlePointerUp(event: PointerEvent) {
let index = this.pointerIds.indexOf(event.pointerId);
@@ -1229,11 +1134,11 @@ class FilmstripControl implements ModGuiControl {
}
let dRange = event.deltaY / rate;
let range = this.valueToRange(this.value);
let range = this.props.pluginControl.valueToRange(this.value);
range += dRange;
if (range < 0) range = 0;
if (range > 1) range = 1;
let newValue = this.rangeToValue(range);
let newValue = this.props.pluginControl.rangeToValue(range);
this.setControlValue(newValue);
this.props.onValueChanged(this.props.instanceId, this.props.pluginControl.symbol, newValue);
}
vite/src/pipedal/Pedalboard.tsx
+45 -2
View File
@@ -59,7 +59,13 @@ export class ControlValue implements Deserializable<ControlValue> {
}
export class PedalboardItem implements Deserializable<PedalboardItem> {
clone() {
clone(): PedalboardItem {
if (this.isSplit())
{
let result = new PedalboardSplitItem();
result.deserialize(this);
return result as PedalboardItem;;
}
return new PedalboardItem().deserialize(this);
}
deserializePedalboardItem(input: any): PedalboardItem {
@@ -144,6 +150,23 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
}
isChild(instanceId: number): boolean {
if (this.instanceId === instanceId) return true;
if (this.isSplit())
{
let splitItem = this as unknown as PedalboardSplitItem;
for (let topItem of splitItem.topChain)
{
if (topItem.isChild(instanceId)) return true;
}
for (let bottomItem of splitItem.bottomChain)
{
if (bottomItem.isChild(instanceId)) return true;
}
}
return false;
}
getControlValue(key: string): number {
for (let i = 0; i < this.controlValues.length; ++i) {
let v = this.controlValues[i];
@@ -753,7 +776,20 @@ export class Pedalboard implements Deserializable<Pedalboard> {
}
return false;
}
assignNewInstanceIds(items: PedalboardItem[])
{
for (let i = 0; i < items.length; ++i)
{
items[i].instanceId = ++this.nextInstanceId;
if (items[i].isSplit())
{
let splitItem = items[i] as PedalboardSplitItem;
this.assignNewInstanceIds(splitItem.topChain);
this.assignNewInstanceIds(splitItem.bottomChain);
}
}
}
replaceItem(instanceId: number, newItem: PedalboardItem)
{
newItem.instanceId = ++this.nextInstanceId;
@@ -763,6 +799,13 @@ export class Pedalboard implements Deserializable<Pedalboard> {
{
throw new PiPedalArgumentError("instanceId not found.");
}
if (newItem.isSplit())
{
// Generate new instance ids for all children, to avoid conflicts.
let splitItem = newItem as PedalboardSplitItem;
this.assignNewInstanceIds(splitItem.topChain);
this.assignNewInstanceIds(splitItem.bottomChain);
}
return newItem.instanceId;
}
private _addItem(items: PedalboardItem[], newItem: PedalboardItem, instanceId: number, append: boolean)
vite/src/pipedal/PedalboardView.tsx
+93 -45
View File
@@ -147,24 +147,36 @@ const pedalboardStyles = (theme: Theme) => createStyles({
top: -6,
fill: theme.palette.text.secondary
}),
iconFrame: css({
display: "flex",
alignItems: "center",
justifyContent: "center",
pedalButton: css({
position: "relative",
background: theme.palette.background.default,
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2,
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
width: FRAME_SIZE,
height: FRAME_SIZE,
padding: 0,
borderRadius: 8
}),
iconFrame: css({
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
background: theme.palette.background.paper,
width: FRAME_SIZE,
height: FRAME_SIZE,
borderColor: "#777",
borderWidth: 2,
borderStyle: "solid",
padding: 1,
overflow: "hidden",
padding: 0,
borderRadius: 8
}),
selectedIconFrame: css({
@@ -173,12 +185,7 @@ const pedalboardStyles = (theme: Theme) => createStyles({
alignItems: "center",
justifyContent: "center",
position: "relative",
background: theme.palette.background.default,
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2,
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
background: theme.palette.background.paper,
width: FRAME_SIZE,
height: FRAME_SIZE,
borderColor: theme.palette.primary.main,
@@ -195,10 +202,6 @@ const pedalboardStyles = (theme: Theme) => createStyles({
justifyContent: "center",
background: "transparent",
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2,
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
width: FRAME_SIZE,
height: FRAME_SIZE,
border: "0px #666 solid",
@@ -458,6 +461,20 @@ const PedalboardView =
// touchyMove. :-/
}
isSplitterChild(item: PedalboardItem, splitterInstanceId: number) {
if (item.instanceId === splitterInstanceId) {
return true;
}
let pedalboard: Pedalboard | undefined = this.state.pedalboard;
if (!pedalboard) return false;
let splitter = pedalboard.maybeGetItem(splitterInstanceId);
if (splitter === null) {
return false;
}
return splitter.isChild(item.instanceId);
}
onDragEnd(instanceId: number, clientX: number, clientY: number) {
if (!this.props.enableStructureEditing) {
return;
@@ -483,10 +500,18 @@ const PedalboardView =
if (item.isSplitter() && item.pedalItem) {
if (item.bounds.contains(clientX, clientY)) {
if (clientX < item.bounds.x + CELL_WIDTH / 2) {
if (this.isSplitterChild(item.pedalItem, instanceId))
{
return;
}
this.model.movePedalboardItemBefore(instanceId, item.pedalItem.instanceId);
this.setSelection(instanceId);
return;
} else if (clientX > item.bounds.right - CELL_WIDTH / 2) {
if (this.isSplitterChild(item.pedalItem, instanceId))
{
return;
}
this.model.movePedalboardItemAfter(instanceId, item.pedalItem.instanceId);
this.setSelection(instanceId);
return;
@@ -501,6 +526,11 @@ const PedalboardView =
if (clientX < item.topChildren[0].bounds.x) {
let topPedalItem = item.topChildren[0].pedalItem;
if (topPedalItem) {
if (this.isSplitterChild(topPedalItem, instanceId))
{
return;
}
this.model.movePedalboardItemBefore(instanceId, topPedalItem.instanceId);
this.setSelection(instanceId);
return;
@@ -509,6 +539,9 @@ const PedalboardView =
let lastTop = item.topChildren[item.topChildren.length - 1];
if (clientX >= lastTop.bounds.right && clientX < item.bounds.right - CELL_WIDTH / 2) {
if (lastTop.pedalItem) {
if (this.isSplitterChild(lastTop.pedalItem, instanceId)) {
return;
}
this.model.movePedalboardItemAfter(instanceId, lastTop.pedalItem.instanceId);
this.setSelection(instanceId);
return;
@@ -522,6 +555,9 @@ const PedalboardView =
if (clientX < item.bottomChildren[0].bounds.x) {
let bottomPedalItem = item.bottomChildren[0].pedalItem;
if (bottomPedalItem) {
if (this.isSplitterChild(bottomPedalItem, instanceId)) {
return;
}
this.model.movePedalboardItemBefore(instanceId, bottomPedalItem.instanceId);
this.setSelection(instanceId);
return;
@@ -530,6 +566,9 @@ const PedalboardView =
let lastBottom = item.bottomChildren[item.bottomChildren.length - 1];
if (clientX >= lastBottom.bounds.right && clientX < item.bounds.right - CELL_WIDTH / 2) {
if (lastBottom.pedalItem) {
if (this.isSplitterChild(lastBottom.pedalItem, instanceId)) {
return;
}
this.model.movePedalboardItemAfter(instanceId, lastBottom.pedalItem.instanceId);
this.setSelection(instanceId);
return;
@@ -552,10 +591,22 @@ const PedalboardView =
if (item.pedalItem) {
let margin = (CELL_WIDTH - FRAME_SIZE) / 2;
if (clientX < item.bounds.x + margin) {
if (this.isSplitterChild(item.pedalItem,instanceId))
{
return;
}
this.model.movePedalboardItemBefore(instanceId, item.pedalItem.instanceId);
} else if (clientX > item.bounds.right - margin) {
if (this.isSplitterChild(item.pedalItem,instanceId))
{
return;
}
this.model.movePedalboardItemAfter(instanceId, item.pedalItem.instanceId);
} else {
if (this.isSplitterChild(item.pedalItem,instanceId))
{
return;
}
this.model.movePedalboardItem(instanceId, item.pedalItem.instanceId);
}
this.setSelection(instanceId);
@@ -1036,39 +1087,35 @@ const PedalboardView =
}
return (
<div className={frameStyle} onContextMenu={(e) => { e.preventDefault(); }}
>
{/* {!enabled && (
<div className={classes.midiConnectorDecoration} >
<CloseIcon style={{ width: 16, height: 16, opacity: 0.6, fill: this.props.theme.palette.text.secondary }} />
</div>
)} */}
<ButtonBase style={{ width: "100%", height: "100%" }}
<div style={{ width: "100%", height: "100%" }}>
<ButtonBase className={classes.pedalButton}
onClick={(e) => { this.onItemClick(e, instanceId); }}
onDoubleClick={(e: SyntheticEvent) => { this.onItemDoubleClick(e, instanceId); }}
onContextMenu={(e: SyntheticEvent) => { this.onItemLongClick(e, instanceId); }}
>
<SelectHoverBackground selected={instanceId === this.props.selectedId} showHover={true}
clipChildren={true}
<div className={frameStyle} style={{ position: "absolute" }} onContextMenu={(e) => { e.preventDefault(); }}
>
<Draggable draggable={draggable && (this.props.enableStructureEditing)} getScrollContainer={() => this.getScrollContainer()}
onDragEnd={(x, y) => { this.onDragEnd(instanceId, x, y) }}
style={{ opacity: enabled ? 0.99 : 0.3 }}
<SelectHoverBackground selected={instanceId === this.props.selectedId} showHover={true}
clipChildren={false}
>
<div id="childIcon" style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center" }} >
<PluginIcon pluginType={iconType}
size={24}
color={getIconColor(iconColor)}
pluginMissing={pluginNotFound}
/>
</div>
</SelectHoverBackground>
</div>
<Draggable draggable={draggable && (this.props.enableStructureEditing)} getScrollContainer={() => this.getScrollContainer()}
onDragEnd={(x, y) => { this.onDragEnd(instanceId, x, y) }}
style={{ opacity: enabled ? 0.99 : 0.3 }}
</Draggable>
</SelectHoverBackground>
>
<div id="childIcon" style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center" }} >
<PluginIcon pluginType={iconType}
size={24}
color={getIconColor(iconColor)}
pluginMissing={pluginNotFound}
/>
</div>
</Draggable>
</ButtonBase>
</div>
);
@@ -1146,7 +1193,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(item.pedalItem?.instanceId ?? -1, this.getSplitterIcon(item), "", false, true, true, false, false)}
{this.pedalButton(item.pedalItem?.instanceId ?? -1, this.getSplitterIcon(item), "", true, true, true, false, false)}
</div>
</div>);
@@ -1157,9 +1204,10 @@ const PedalboardView =
position: "absolute", left: item.bounds.x, width: CELL_WIDTH, top: item.bounds.bottom - 12, paddingLeft: 2, paddingRight: 2
}}>
<Typography variant="caption" display="block" noWrap={true}
style={{ width: CELL_WIDTH - 4, textAlign: "center", flex: "0 1 auto",
opacity: item.pedalItem?.isEnabled??true ? 1.0 : 0.4
}}
style={{
width: CELL_WIDTH - 4, textAlign: "center", flex: "0 1 auto",
opacity: item.pedalItem?.isEnabled ?? true ? 1.0 : 0.4
}}
>{item.name}</Typography>
</div>
)
vite/src/pipedal/PiPedalModel.tsx
+3 -1
View File
@@ -602,7 +602,9 @@ export class PiPedalModel //implements PiPedalModel
(
[
MidiBinding.systemBinding("prevProgram"),
MidiBinding.systemBinding("nextProgram")
MidiBinding.systemBinding("nextProgram"),
MidiBinding.systemBinding("prevSnapshot"),
MidiBinding.systemBinding("nextSnapshot")
]
);
zoomedUiControl: ObservableProperty<ZoomedControlInfo | undefined> = new ObservableProperty<ZoomedControlInfo | undefined>(undefined);
vite/src/pipedal/PluginControl.tsx
+12 -106
View File
@@ -1,4 +1,5 @@
// Copyright (c) Robin E.R. Davies
// Copyright (c) 2022 Robin Davies
// Copyright (c) Fulgencio Ruiz Rubio.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -203,7 +204,6 @@ const CustomPluginControl =
</div>
);
return (<div />);
}
},
@@ -342,8 +342,9 @@ const PluginControl =
result = this.currentValue; // reset the value!
}
// clamp and quantize.
let range = this.valueToRange(result);
result = this.rangeToValue(range);
let range = this.props.uiControl?.valueToRange(result) ?? 0;
result = this.props.uiControl?.rangeToValue(range) ?? 0;
let displayVal = this.props.uiControl?.formatShortValue(result) ?? "";
if (event.currentTarget) {
event.currentTarget.value = displayVal;
@@ -682,8 +683,8 @@ const PluginControl =
this.setState({ previewValue: undefined });
}
previewInputValue(value: number, commitValue: boolean) {
let range = this.valueToRange(value);
value = this.rangeToValue(range);
let range = this.props.uiControl?.valueToRange(value) ?? 0;
value = this.props.uiControl?.rangeToValue(range) ?? 0;
let imgElement = this.imgRef.current
if (imgElement) {
@@ -712,13 +713,13 @@ const PluginControl =
}
previewRange(dRange: number, commitValue: boolean): void {
let range = this.valueToRange(this.currentValue) + dRange;
let range = (this.props.uiControl?.valueToRange(this.currentValue) ?? 0) + dRange;
if (range > 1) range = 1;
if (range < 0) range = 0;
let value = this.rangeToValue(range);
let value = this.props.uiControl?.rangeToValue(range) ?? 0;
// apply value quantization and clipping.
range = this.valueToRange(value);
range = this.props.uiControl?.valueToRange(value) ?? 0;
if (this.props.uiControl?.isGraphicEq()) {
let imgElement = this.imgRef.current
@@ -835,89 +836,6 @@ const PluginControl =
if (!uiControl) return "";
return uiControl.formatDisplayValue(value);
}
valueToRange(value: number): number {
let uiControl = this.props.uiControl;
if (uiControl) {
if (uiControl.integer_property) {
value = Math.round(value);
}
let range: number;
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP plugins do this.
{
minValue = 0.0001;
}
range = Math.log(value / minValue) / Math.log(uiControl.max_value / minValue);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
if (uiControl.range_steps > 1) {
range = Math.round(range * (uiControl.range_steps - 1)) / (uiControl.range_steps - 1);
}
} else {
range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
if (!isFinite(range)) {
if (range < 0) {
range = 0;
} else {
range = 1.0;
}
} else if (isNaN(range)) {
range = 0;
}
}
if (range > 1) range = 1;
if (range < 0) range = 0;
return range;
}
return 0;
}
rangeToValue(range: number): number {
if (range < 0) range = 0;
if (range > 1) range = 1;
let uiControl = this.props.uiControl;
if (uiControl) {
if (uiControl.range_steps > 1) {
range = Math.round(range * (uiControl.range_steps - 1)) / (uiControl.range_steps - 1);
}
let value: number;
if (uiControl.min_value === uiControl.max_value) {
value = uiControl.min_value;
} else {
if (uiControl.is_logarithmic) {
let minValue = uiControl.min_value;
if (minValue === 0) // LSP controls.
{
minValue = 0.0001;
}
value = minValue * Math.pow(uiControl.max_value / minValue, range);
if (!isFinite(value)) {
value = uiControl.max_value;
} else if (isNaN(value)) {
value = uiControl.min_value;
}
} else {
value = range * (uiControl.max_value - uiControl.min_value) + uiControl.min_value;
}
if (uiControl.integer_property) {
value = Math.round(value);
}
}
return value;
}
return 0;
}
rangeToRotationTransform(range: number): string {
@@ -926,22 +844,10 @@ const PluginControl =
}
getEqPosition(): number {
let range = 0;
let uiControl = this.props.uiControl;
if (uiControl) {
let value = this.props.value;
range = this.valueToRange(value);
}
return range;
return this.props.uiControl?.valueToRange(this.props.value) ?? 0;
}
getRotationTransform(): string {
let range = 0;
let uiControl = this.props.uiControl;
if (uiControl) {
let value = this.props.value;
range = this.valueToRange(value);
}
let range = this.props.uiControl?.valueToRange(this.props.value) ?? 0;
return this.rangeToRotationTransform(range);
}
vite/src/pipedal/PluginPresetSelector.tsx
+22 -23
View File
@@ -114,7 +114,7 @@ const PluginPresetSelector =
hasPresets(pedalboardItem: PedalboardItem | null): boolean {
if (pedalboardItem === null) return false;
if (!pedalboardItem.uri) return false;
if (pedalboardItem.isStart() || pedalboardItem.isEnd()
if (pedalboardItem.isStart() || pedalboardItem.isEnd()
|| pedalboardItem.isEmpty() || pedalboardItem.isSplit()) {
return false;
}
@@ -123,8 +123,8 @@ const PluginPresetSelector =
isVisible(pedalboardItem: PedalboardItem | null): boolean {
if (pedalboardItem === null) return false;
if (!pedalboardItem.uri) return false;
if (pedalboardItem.isStart() || pedalboardItem.isEnd()
|| pedalboardItem.isSplit()) {
if (pedalboardItem.isStart() || pedalboardItem.isEnd()
) {
return false;
}
return true;
@@ -197,7 +197,7 @@ const PluginPresetSelector =
loadPresets(): void {
if (this.props.pedalboardItem === null) return;
if (!this.hasPresets(this.props.pedalboardItem)) return;
if (!this.hasPresets(this.props.pedalboardItem)) return;
let captureUri: string = this.props.pedalboardItem.uri;
this.model.getPluginPresets(captureUri)
.then((presets: PluginUiPresets) => {
@@ -235,20 +235,18 @@ const PluginPresetSelector =
currentPedalboard?: PedalboardItem;
componentDidUpdate(
prevProps: Readonly<PluginPresetSelectorProps>,
prevState: Readonly<PluginPresetSelectorState>,
snapshot?: any): void
{
prevProps: Readonly<PluginPresetSelectorProps>,
prevState: Readonly<PluginPresetSelectorState>,
snapshot?: any): void {
if (this.props.pedalboardItem !== prevProps.pedalboardItem) {
this.setState({
this.setState({
isVisible: this.isVisible(this.props.pedalboardItem),
hasPresets: this.hasPresets(this.props.pedalboardItem) });
hasPresets: this.hasPresets(this.props.pedalboardItem)
});
if (this.props.pedalboardItem) {
if (this.props.pedalboardItem.isEmpty())
{
if (this.props.pedalboardItem.isEmpty()) {
this.setState({ presets: new PluginUiPresets() });
} else
{
} else {
this.loadPresets();
}
}
@@ -272,7 +270,8 @@ const PluginPresetSelector =
}
isMenuCopyPluginEnabled(): boolean {
return this.state.hasPresets;
if (this.props.pedalboardItem === null) return false;
return !this.props.pedalboardItem.isEmpty();
}
handleMenuCopyPlugin(): void {
this.handlePresetsMenuClose();
@@ -340,7 +339,7 @@ const PluginPresetSelector =
}
buildMenuItems() {
let result : React.ReactNode[] = [];
let result: React.ReactNode[] = [];
if (this.state.hasPresets) {
result.push((<MenuItem key="menuSaveAs" onClick={(e) => this.handlePluginPresetsMenuSaveAs(e)}>Save plugin preset...</MenuItem>));
result.push((<MenuItem key="menuEdit" onClick={(e) => this.handleMenuEditPluginPresets()}>Manage plugin presets...</MenuItem>));
@@ -355,7 +354,7 @@ const PluginPresetSelector =
<PluginPresetIcon className={this.props.classes?.pluginMenuIcon ?? ""} />
{preset.label}</MenuItem>
));
));
hasPresets = true;
}
if (hasPresets) {
@@ -402,12 +401,12 @@ const PluginPresetSelector =
}
</Menu>
{this.state.hasPresets && this.state.showPresetsDialog && (
<PluginPresetsDialog
instanceId={this.props.instanceId}
presets={this.state.presets}
show={this.state.showPresetsDialog}
isEditDialog={this.state.showEditPresetsDialog}
onDialogClose={() => this.handleDialogClose()} />
<PluginPresetsDialog
instanceId={this.props.instanceId}
presets={this.state.presets}
show={this.state.showPresetsDialog}
isEditDialog={this.state.showEditPresetsDialog}
onDialogClose={() => this.handleDialogClose()} />
)}
<RenameDialog open={this.state.renameDialogOpen}
title="Rename"
vite/src/pipedal/SettingsDialog.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ import SelectChannelsDialog from './SelectChannelsDialog';
import SelectMidiChannelsDialog from './SelectMidiChannelsDialog';
import SelectHoverBackground from './SelectHoverBackground';
import JackServerSettings from './JackServerSettings';
import JackServerSettingsDialog from './JackServerSettingsDialog';
import AudioDeviceDialog from './AudioDeviceDialog';
import JackHostStatus from './JackHostStatus';
import WifiConfigSettings from './WifiConfigSettings';
import WifiDirectConfigSettings from './WifiDirectConfigSettings';
@@ -711,7 +711,7 @@ const SettingsDialog = withStyles(
)}
{this.state.showJackServerSettingsDialog && (
<JackServerSettingsDialog
<AudioDeviceDialog
open={this.state.showJackServerSettingsDialog}
jackServerSettings={this.state.jackServerSettings}
onClose={() => this.setState({ showJackServerSettingsDialog: false })}
vite/src/pipedal/SystemMidiBindingsDialog.tsx
+5
View File
@@ -159,6 +159,11 @@ export const SystemMidiBindingDialog =
}
else if (item.symbol === "snapshot6") {
displayName = "Snapshot 6";
}
else if (item.symbol === "nextSnapshot") {
displayName = "Next Snapshot";
} else if (item.symbol === "prevSnapshot") {
displayName = "Previous Snapshot";
} else if (item.symbol === "startHotspot") {
displayName = "Enable Hotspot";
} else if (item.symbol === "stopHotspot") {
vite/vite.config.ts
+1 -1
View File
@@ -20,7 +20,7 @@ export default defineConfig({
target: 'http://localhost:8080',
changeOrigin: false,
},
'^/var/(?!config\\.json$).*': {
'^/var/.*': {
target: 'http://localhost:8080',
changeOrigin: false,
},