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

Custom plugin display name. Rename dialog cosmetics.

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-06-24 16:27:53 -04:00
parent 98ee16bb82
commit 2974033128
12 changed files with 631 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/src/pipedal/AppThemed.tsx
+1
View File
@@ -1031,6 +1031,7 @@ export
<RenameDialog
open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
defaultName={this.model_.banks.get().getSelectedEntryName()}
title="Bank Name"
acceptActionName={this.state.renameBankDialogOpen ? "Rename" : "Save as"}
onClose={() => {
this.setState({
vite/src/pipedal/BankDialog.tsx
+2 -1
View File
@@ -458,7 +458,7 @@ const BankDialog = withStyles(
<div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
<Button color="inherit" onClick={(e) => this.handleCopy()}>
Copy
Save as
</Button>
<Button color="inherit" onClick={() => this.handleRenameClick()}>
Rename
@@ -466,6 +466,7 @@ const BankDialog = withStyles(
<RenameDialog
open={this.state.filenameDialogOpen}
defaultName={this.getSelectedName()}
title={this.state.filenameSaveAs ? "Save Bank As" : "Bank Name"}
acceptActionName={this.state.filenameSaveAs ? "SAVE AS" : "RENAME"}
onClose={() => { this.setState({ filenameDialogOpen: false }) }}
onOk={(text: string) => {
vite/src/pipedal/FilePropertyDialog.tsx
+2
View File
@@ -1599,6 +1599,7 @@ export default withStyles(
<RenameDialog open={this.state.newFolderDialogOpen} defaultName=""
onOk={(newName) => { this.setState({ newFolderDialogOpen: false }); this.onExecuteNewFolder(newName) }}
onClose={() => { this.setState({ newFolderDialogOpen: false }); }}
title="New folder"
acceptActionName="OK"
/>
)
@@ -1606,6 +1607,7 @@ export default withStyles(
{
this.state.renameDialogOpen && (
<RenameDialog open={this.state.renameDialogOpen} defaultName={this.renameDefaultName()}
title="Rename"
onOk={(newName) => { this.setState({ renameDialogOpen: false }); this.onExecuteRename(newName) }}
onClose={() => { this.setState({ renameDialogOpen: false }); }}
acceptActionName="OK"
vite/src/pipedal/MainPage.tsx
+62 -14
View File
@@ -23,6 +23,8 @@ import WithStyles, {withTheme} from './WithStyles';
import { withStyles } from "tss-react/mui";
import IconButtonEx from './IconButtonEx';
import ButtonEx from './ButtonEx';
import ButtonBase from '@mui/material/ButtonBase';
import RenameDialog from './RenameDialog';
import ToolTipEx from './ToolTipEx';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
@@ -69,7 +71,8 @@ const HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK = 500;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// const HORIZONTAL_LAYOUT_MQ = "@media (max-height: " + HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK + "px)";
const styles = ({ palette }: Theme) => { return {
const styles = ({ palette }: Theme) => {
return {
frame: css({
position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
@@ -99,8 +102,8 @@ const styles = ({ palette }: Theme) => { return {
controlContentSmall: css({
flex: "0 0 162px", width: "100%", height: 162, overflowY: "hidden",
}),
title: css({ fontSize: "1.1em", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
author: css({ fontWeight: 500, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
title: css({ fontSize: "1.1rem", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
author: css({ fontWeight: 500, fontSize: "0.8rem", marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
}
};
@@ -124,6 +127,8 @@ interface MainState {
horizontalScrollLayout: boolean;
showMidiBindingsDialog: boolean;
screenHeight: number;
displayNameDialogOpen: boolean;
}
@@ -137,10 +142,8 @@ export const MainPage =
getSplitToolbar() {
return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD;
}
getDisplayAuthor()
{
if (this.getSplitToolbar())
{
getDisplayAuthor() {
if (this.getSplitToolbar()) {
return this.windowSize.width >= DISPLAY_AUTHOR_SPLIT_THRESHOLD;
} else {
return this.windowSize.width >= DISPLAY_AUTHOR_THRESHHOLD;
@@ -157,6 +160,7 @@ export const MainPage =
selectedSnapshot: -1,
loadDialogOpen: false,
snapshotDialogOpen: false,
displayNameDialogOpen: false,
pedalboard: pedalboard,
addMenuAnchorEl: null,
splitControlBar: this.getSplitToolbar(),
@@ -177,6 +181,9 @@ export const MainPage =
this.handleEnableCurrentItemChanged = this.handleEnableCurrentItemChanged.bind(this);
}
handleEditPluginDisplayName() {
this.setState({ displayNameDialogOpen: true });
}
onInsertPedal(instanceId: number) {
this.setAddMenuAnchorEl(null);
let newId = this.model.addPedalboardItem(instanceId, false);
@@ -292,8 +299,7 @@ export const MainPage =
this.setSelection(selectedId);
let item = this.getPedalboardItem(selectedId);
if (item != null) {
if (item.isStart() || item.isEnd())
{
if (item.isStart() || item.isEnd()) {
// do nothing.
} else if (item.isSplit()) {
let split = item as PedalboardSplitItem;
@@ -375,6 +381,7 @@ export const MainPage =
let infoPluginUri = "";
let presetsUri = "";
let missing = false;
let canEditTitle = false;
if (pedalboardItem) {
if (pedalboardItem.isEmpty()) {
title = "";
@@ -391,9 +398,15 @@ export const MainPage =
if (!uiPlugin) {
missing = true;
title = pedalboardItem?.pluginName ?? "Missing plugin";
} else {
canEditTitle = this.props.enableStructureEditing;
if (pedalboardItem.title !== "") {
title = pedalboardItem.title;
author = "";
} else {
title = uiPlugin.name;
author = uiPlugin.author_name;
}
presetsUri = uiPlugin.uri;
// if (uiPlugin.description.length > 20) {
// }
@@ -420,15 +433,34 @@ export const MainPage =
} else {
return (
<div style={{
flex: "1 1 auto", minWidth: 0, overflow: "hidden", marginRight: 8,
flex: "1 1 auto", minWidth: 0, overflow: "hidden",
display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
alignItems: "center"
}}>
<div style={{ flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
<div style={{ position: "relative", flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
{canEditTitle ? (
<ButtonBase
style={{ borderRadius: "6px", width: "100%", paddingLeft: 8, paddingRight: 8, height: 48, textTransform: "none" }}
onClick={()=> {
this.handleEditPluginDisplayName();
}}
>
<span>
<span className={classes.title}>{title}</span>
{this.state.displayAuthor && (
<span className={classes.author}>{author}</span>
)}
</span>
</ButtonBase>)
: (
<div style={{ flex: "0 1 auto", paddingLeft: 8, paddingRight: 8,minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
<span className={classes.title}>{title}</span>
{this.state.displayAuthor && (
<span className={classes.author}>{author}</span>
)}
</div>
)}
</div>
<div style={{ flex: "0 0 auto", verticalAlign: "center" }}>
<PluginInfoDialog plugin_uri={infoPluginUri} />
@@ -528,8 +560,8 @@ export const MainPage =
display: "flex", flexFlow: "row nowrap", alignItems: "center", justifyContent: "center", minWidth: 0,
width: "100%", height: 48, paddingLeft: 16, paddingRight: 16
}} >
<div style={{ flex: "0 0 auto", width: this.state.splitControlBar? undefined: 80 }} >
<div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar? undefined: 80 }} >
<div style={{ flex: "0 0 auto", width: this.state.splitControlBar ? undefined : 60 }} >
<div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar ? undefined : 60 }} >
<ToolTipEx title="Bypass"
>
<Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
@@ -537,7 +569,8 @@ export const MainPage =
</div>
</div>
{
(!this.state.splitControlBar || !this.props.enableStructureEditing) && this.titleBar(pedalboardItem)
(!this.state.splitControlBar || !this.props.enableStructureEditing)
&& this.titleBar(pedalboardItem)
}
<div style={{ flex: "1 1 1px" }}>
@@ -642,6 +675,21 @@ export const MainPage =
{(this.state.snapshotDialogOpen) && (
<SnapshotDialog open={this.state.snapshotDialogOpen} onOk={() => this.onSnapshotDialogOk()} />
)}
{(this.state.displayNameDialogOpen) && (
<RenameDialog open={this.state.displayNameDialogOpen}
allowEmpty={true}
defaultName={pedalboardItem?.title ?? ""}
title="Plugin Display Name"
acceptActionName="OK"
onClose={() => this.setState({ displayNameDialogOpen: false })}
onOk={(newName: string) => {
if (pedalboardItem) {
this.model.setPedalboardItemTitle(pedalboardItem.instanceId, newName);
}
this.setState({ displayNameDialogOpen: false });
}}
/>
)}
</div>
);
}
vite/src/pipedal/Pedalboard.tsx
+2
View File
@@ -61,6 +61,7 @@ export class ControlValue implements Deserializable<ControlValue> {
export class PedalboardItem implements Deserializable<PedalboardItem> {
deserializePedalboardItem(input: any): PedalboardItem {
this.instanceId = input.instanceId ?? -1;
this.title = input.title ?? "";
this.uri = input.uri;
this.pluginName = input.pluginName;
this.isEnabled = input.isEnabled;
@@ -199,6 +200,7 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
static EmptyArray: PedalboardItem[] = [];
instanceId: number = -1;
title: string = "";
isEnabled: boolean = false;
uri: string = "";
pluginName?: string;
vite/src/pipedal/PedalboardView.tsx
+3
View File
@@ -329,6 +329,9 @@ class PedalLayout {
this.pluginType = uiPlugin.plugin_type;
this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
this.name = uiPlugin.label;
if (pedalItem.title !== "") {
this.name = pedalItem.title;
}
this.numberOfInputs = Math.min(uiPlugin.audio_inputs, 2);
this.numberOfOutputs = Math.min(uiPlugin.audio_outputs, 2);
} else {
vite/src/pipedal/PiPedalModel.tsx
+16 -1
View File
@@ -3153,7 +3153,22 @@ export class PiPedalModel //implements PiPedalModel
30 * 1000);
}
setPedalboardItemTitle(instanceId: number, title: string): void {
let pedalboard = this.pedalboard.get();
if (!pedalboard) {
throw new PiPedalStateError("Pedalboard not loaded.");
}
let newPedalboard = pedalboard.clone();
this.updateVst3State(newPedalboard);
let item = newPedalboard.getItem(instanceId);
if (item.title === title) {
return;
}
item.title = title;
this.pedalboard.set(newPedalboard);
// notify the server.
// xxx;
}
};
let instance: PiPedalModel | undefined = undefined;
vite/src/pipedal/PluginPresetSelector.tsx
+1
View File
@@ -335,6 +335,7 @@ const PluginPresetSelector =
isEditDialog={this.state.showEditPresetsDialog}
onDialogClose={() => this.handleDialogClose()} />
<RenameDialog open={this.state.renameDialogOpen}
title="Rename"
defaultName={this.state.renameDialogDefaultName}
acceptActionName={this.state.renameDialogActionName}
onClose={() => this.handleRenameDialogClose()}
vite/src/pipedal/PluginPresetsDialog.tsx
+1
View File
@@ -413,6 +413,7 @@ const PluginPresetsDialog = withStyles(
Rename
</Button>
<RenameDialog
title="Rename"
open={this.state.renameOpen}
defaultName={this.getSelectedName()}
acceptActionName={"Rename"}
vite/src/pipedal/PresetDialog.tsx
+1
View File
@@ -395,6 +395,7 @@ const PresetDialog = withStyles(
Rename
</Button>
<RenameDialog
title="Rename"
open={this.state.renameOpen}
defaultName={this.getSelectedName()}
acceptActionName={"Rename"}
vite/src/pipedal/PresetSelector.tsx
+7 -3
View File
@@ -50,6 +50,7 @@ interface PresetSelectorState {
presetsMenuAnchorRef: HTMLElement | null;
renameDialogOpen: boolean;
renameDialogTitle: string;
renameDialogDefaultName: string;
renameDialogActionName: string;
renameDialogOnOk?: (name: string) => void;
@@ -95,6 +96,7 @@ const PresetSelector =
showEditPresetsDialog: false,
presetsMenuAnchorRef: null,
renameDialogOpen: false,
renameDialogTitle: "",
renameDialogDefaultName: "",
renameDialogActionName: "",
renameDialogOnOk: undefined,
@@ -144,7 +146,7 @@ const PresetSelector =
if (item == null) return;
let name = item.name;
this.renameDialogOpen(name, "Save As")
this.renameDialogOpen(name, "Save Preset As", "OK")
.then((newName) => {
return this.model.saveCurrentPresetAs(newName);
})
@@ -167,7 +169,7 @@ const PresetSelector =
if (item == null) return;
let name = item.name;
this.renameDialogOpen(name, "Rename")
this.renameDialogOpen(name, "Rename Preset", "OK")
.then((newName) => {
if (newName === name) return;
return this.model.renamePresetItem(this.model.presets.get().selectedInstanceId, newName);
@@ -196,12 +198,13 @@ const PresetSelector =
showError(error: string) {
this.model.showAlert(error);
}
renameDialogOpen(defaultText: string, acceptButtonText: string): Promise<string> {
renameDialogOpen(defaultText: string, title: string,acceptButtonText: string): Promise<string> {
let result = new Promise<string>(
(resolve, reject) => {
this.setState(
{
renameDialogOpen: true,
renameDialogTitle: title,
renameDialogDefaultName: defaultText,
renameDialogActionName: acceptButtonText,
renameDialogOnOk: (name) => {
@@ -365,6 +368,7 @@ const PresetSelector =
</div>
<PresetDialog show={this.state.showPresetsDialog} isEditDialog={this.state.showEditPresetsDialog} onDialogClose={() => this.handleDialogClose()} />
<RenameDialog open={this.state.renameDialogOpen}
title={this.state.renameDialogTitle}
defaultName={this.state.renameDialogDefaultName}
acceptActionName={this.state.renameDialogActionName}
onClose={() => this.handleRenameDialogClose()}
vite/src/pipedal/RenameDialog.tsx
+12 -5
View File
@@ -20,6 +20,7 @@
import React from 'react';
import Button from '@mui/material/Button';
import DialogEx from './DialogEx';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import { nullCast } from './Utility';
@@ -33,6 +34,9 @@ export interface RenameDialogProps {
open: boolean,
defaultName: string,
acceptActionName: string,
title: string,
allowEmpty?: boolean,
label?: string,
onOk: (text: string) => void,
onClose: () => void
};
@@ -102,7 +106,7 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
model.showAlert(e.toString());
return;
}
if (text.length === 0) return;
if (text.length === 0 && props.allowEmpty !== true) return;
onOk(text);
}
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -119,20 +123,23 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
style={{userSelect: "none"}}
onEnterKey={()=>{}}
>
<DialogContent style={{minHeight: 96}}>
<DialogTitle>
{props.title ?? "Rename"}
</DialogTitle>
<DialogContent >
<TextField
onKeyDown={handleKeyDown}
margin="dense"
variant="outlined"
variant="standard"
slotProps={{
input: {
style: { scrollMargin: 24 }
}
}}
id="name"
label="Name"
type="text"
label={props.label ?? "Name"}
fullWidth
defaultValue={defaultName}
inputRef={this.refText}