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

Snapshot file model, Hotspot restart on config change.

Browse Source
This commit is contained in:
Robin Davies
2024-10-08 02:40:05 -04:00
parent 94b2072783
commit ebe56f4df9
19 changed files with 651 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/ObservableEvent.tsx
+54
View File
@@ -0,0 +1,54 @@
// Copyright (c) 2022 Robin Davies
//
// 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
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO `EVENT` SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
export type ObservableEventHandler<VALUE_TYPE> = (newValue: VALUE_TYPE) => void;
export default class ObservableEvent<VALUE_TYPE> {
private _on_event_handlers: ObservableEventHandler<VALUE_TYPE>[] = [];
addEventHandler(handler: ObservableEventHandler<VALUE_TYPE> ) : void
{
this._on_event_handlers.push(handler);
}
removeEventHandler(handler: ObservableEventHandler<VALUE_TYPE> ) : void
{
let newArray: ObservableEventHandler<VALUE_TYPE>[] = [];
for (let myHandler of this._on_event_handlers)
{
if (myHandler !== handler)
{
newArray.push(myHandler);
}
}
this._on_event_handlers = newArray;
}
fire(value: VALUE_TYPE)
{
for (let handler of this._on_event_handlers)
{
handler(value);
}
}
};
react/src/ObservableProperty.tsx
+1 -1
View File
@@ -12,7 +12,7 @@
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO `EVENT` SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
react/src/PerformanceView.tsx
+44 -5
View File
@@ -19,6 +19,7 @@
import { Theme } from '@mui/material/styles';
import SaveIconOutline from '@mui/icons-material/Save';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
@@ -78,6 +79,7 @@ interface PerformanceViewState {
banks: BankIndex;
showSnapshotEditor: boolean;
snapshotEditorIndex: number;
presetModified: boolean;
}
@@ -97,11 +99,13 @@ export const PerformanceView =
banks: this.model.banks.get(),
wrapSelects: false,
showSnapshotEditor: false,
snapshotEditorIndex: 0
snapshotEditorIndex: 0,
presetModified: this.model.presetChanged.get()
};
this.onPresetsChanged = this.onPresetsChanged.bind(this);
this.onBanksChanged = this.onBanksChanged.bind(this);
this.handlePopState = this.handlePopState.bind(this);
this.onPresetChangedChanged = this.onPresetChangedChanged.bind(this);
}
@@ -181,6 +185,9 @@ export const PerformanceView =
onBanksChanged(newValue: BankIndex) {
this.setState({ banks: this.model.banks.get() })
}
onPresetChangedChanged(newValue: boolean) {
this.setState({ presetModified:newValue});
}
private mounted: boolean = false;
componentDidMount(): void {
@@ -188,9 +195,12 @@ export const PerformanceView =
this.mounted = true;
this.model.presets.addOnChangedHandler(this.onPresetsChanged);
this.model.banks.addOnChangedHandler(this.onBanksChanged);
this.model.presetChanged.addOnChangedHandler(this.onPresetChangedChanged)
this.setState({
presets: this.model.presets.get(),
banks: this.model.banks.get()
banks: this.model.banks.get(),
presetModified: this.model.presetChanged.get()
});
this.updateHooks();
@@ -200,7 +210,7 @@ export const PerformanceView =
componentWillUnmount(): void {
this.model.presetChanged.removeOnChangedHandler(this.onPresetChangedChanged)
this.model.presets.removeOnChangedHandler(this.onPresetsChanged);
this.model.banks.removeOnChangedHandler(this.onBanksChanged);
@@ -332,13 +342,27 @@ export const PerformanceView =
<IconButton
aria-label="next-bank"
onClick={() => { this.handleNextBank(); }}
size="large"
color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
{/** spacer */}
<IconButton
aria-label="next-bank"
onClick={() => { this.handleNextBank(); }}
size="medium"
color="inherit"
style={{visibility: "hidden"}}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</div>
{/********* PRESETS *******************/}
<div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}>
@@ -367,9 +391,14 @@ export const PerformanceView =
>
{
presets.presets.map((preset) => {
let name = preset.name;
if (this.state.presets.selectedInstanceId === preset.instanceId && this.state.presetModified)
{
name += "*";
}
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{preset.name}
{name}
</MenuItem>
);
})
@@ -385,6 +414,16 @@ export const PerformanceView =
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
<IconButton
aria-label="save-preset"
onClick={() => { this.model.saveCurrentPreset(); }}
size="medium"
color="inherit"
style={{flexShrink: 0,visibility: this.state.presetModified? "visible": "hidden"}}
>
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" />
</IconButton>
</div>
</div>
</div>
react/src/PiPedalModel.tsx
+26 -16
View File
@@ -21,6 +21,7 @@ import { UiPlugin, UiControl, PluginType, UiFileProperty } from './Lv2Plugin';
import { PiPedalArgumentError, PiPedalStateError } from './PiPedalError';
import { UpdateStatus, UpdatePolicyT } from './Updater';
import ObservableEvent from './ObservableEvent';
import { ObservableProperty } from './ObservableProperty';
import { Pedalboard, PedalboardItem, ControlValue, Snapshot } from './Pedalboard'
import PluginClass from './PluginClass';
@@ -362,6 +363,11 @@ export interface FavoritesList {
[url: string]: boolean;
};
export interface SnapshotModifiedEvent {
snapshotIndex: number;
modified: boolean;
};
export class PiPedalModel //implements PiPedalModel
{
@@ -376,6 +382,9 @@ export class PiPedalModel //implements PiPedalModel
webSocket?: PiPedalSocket;
onSnapshotModified: ObservableEvent<SnapshotModifiedEvent> = new ObservableEvent<SnapshotModifiedEvent>();
ui_plugins: ObservableProperty<UiPlugin[]>
= new ObservableProperty<UiPlugin[]>([]);
state: ObservableProperty<State> = new ObservableProperty<State>(State.Loading);
@@ -503,6 +512,7 @@ export class PiPedalModel //implements PiPedalModel
private setModelPedalboard(pedalboard: Pedalboard) {
this.pedalboard.set(pedalboard);
this.selectedSnapshot.set(pedalboard.selectedSnapshot);
}
onSocketMessage(header: PiPedalMessageHeader, body?: any) {
if (this.visibilityState.get() === VisibilityState.Hidden) return;
@@ -564,6 +574,21 @@ export class PiPedalModel //implements PiPedalModel
let channelSelectionBody = body as ChannelSelectionChangedBody;
let channelSelection = new JackChannelSelection().deserialize(channelSelectionBody.jackChannelSelection);
this.jackSettings.set(channelSelection);
} else if (message === "onSnapshotModified") {
let {snapshotIndex,modified} = (body as {snapshotIndex: number, modified: boolean});
let snapshots = this.pedalboard.get().snapshots;
if (snapshotIndex >= 0 && snapshotIndex < snapshots.length)
{
let snapshot = snapshots[snapshotIndex]
if (snapshot)
{
if (snapshot.isModified !== modified)
{
snapshot.isModified = modified;
this.onSnapshotModified.fire({snapshotIndex: snapshotIndex,modified: modified});
}
}
}
} else if (message === "onSelectedSnapshotChanged") {
let selectedSnapshot = body as number;
this.pedalboard.get().selectedSnapshot = selectedSnapshot;
@@ -581,6 +606,7 @@ export class PiPedalModel //implements PiPedalModel
let presetsChangedBody = body as PresetsChangedBody;
let presets = new PresetIndex().deserialize(presetsChangedBody.presets);
this.presets.set(presets);
this.presetChanged.set(presets.presetChanged);
} else if (message === "onPluginPresetsChanged") {
let pluginUri = body as string;
this.handlePluginPresetsChanged(pluginUri);
@@ -1286,7 +1312,6 @@ export class PiPedalModel //implements PiPedalModel
changed = item.setControlValue(controlValue.key, controlValue.value) || changed;
}
if (changed) {
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
}
}
@@ -1428,7 +1453,6 @@ export class PiPedalModel //implements PiPedalModel
if (pedalboard.input_volume_db !== volume_db) {
let newPedalboard = pedalboard.clone();
newPedalboard.input_volume_db = volume_db;
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
changed = true;
}
@@ -1457,7 +1481,6 @@ export class PiPedalModel //implements PiPedalModel
if (pedalboard.output_volume_db !== volume_db) {
let newPedalboard = pedalboard.clone();
newPedalboard.output_volume_db = volume_db;
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
changed = true;
}
@@ -1494,7 +1517,6 @@ export class PiPedalModel //implements PiPedalModel
if (notifyServer) {
this._setServerControl("setControl", instanceId, key, value);
}
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
for (let i = 0; i < this._controlValueChangeItems.length; ++i) {
let item = this._controlValueChangeItems[i];
@@ -1547,7 +1569,6 @@ export class PiPedalModel //implements PiPedalModel
let changed = value !== item.isEnabled;
if (changed) {
item.isEnabled = value;
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
if (notifyServer) {
let body: PedalboardItemEnableBody = {
@@ -1605,7 +1626,6 @@ export class PiPedalModel //implements PiPedalModel
// null -> we've never seen a value.
item.pathProperties[fileProperty.patchProperty] = "null";
}
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard()
return item.instanceId;
@@ -1646,7 +1666,6 @@ export class PiPedalModel //implements PiPedalModel
let result = newPedalboard.deleteItem(instanceId);
if (result !== null) {
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
}
@@ -1669,7 +1688,6 @@ export class PiPedalModel //implements PiPedalModel
newPedalboard.deleteItem(fromInstanceId);
newPedalboard.addBefore(fromItem, toInstanceId);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
@@ -1690,7 +1708,6 @@ export class PiPedalModel //implements PiPedalModel
newPedalboard.addAfter(fromItem, toInstanceId);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
}
@@ -1712,7 +1729,6 @@ export class PiPedalModel //implements PiPedalModel
newPedalboard.addToStart(fromItem);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
}
@@ -1732,7 +1748,6 @@ export class PiPedalModel //implements PiPedalModel
newPedalboard.addToEnd(fromItem);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
@@ -1761,7 +1776,6 @@ export class PiPedalModel //implements PiPedalModel
newPedalboard.replaceItem(fromInstanceId, emptyItem);
newPedalboard.replaceItem(toInstanceId, fromItem);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
@@ -1785,7 +1799,6 @@ export class PiPedalModel //implements PiPedalModel
}
let newItem = newPedalboard.createEmptyItem();
newPedalboard.addItem(newItem, instanceId, append);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
return newItem.instanceId;
@@ -1811,7 +1824,6 @@ export class PiPedalModel //implements PiPedalModel
}
let newItem = newPedalboard.createEmptySplit();
newPedalboard.addItem(newItem, instanceId, append);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
return newItem.instanceId;
@@ -1829,7 +1841,6 @@ export class PiPedalModel //implements PiPedalModel
}
newPedalboard.setItemEmpty(item);
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
this.updateServerPedalboard();
return item.instanceId;
@@ -2332,7 +2343,6 @@ export class PiPedalModel //implements PiPedalModel
let newPedalboard = pedalboard.clone();
this.updateVst3State(newPedalboard);
if (newPedalboard.setMidiBinding(instanceId, midiBinding)) {
newPedalboard.selectedSnapshot = -1;
this.setModelPedalboard(newPedalboard);
react/src/SnapshotButton.tsx
+212
View File
@@ -0,0 +1,212 @@
/*
* MIT License
*
* Copyright (c) 2024 Robin E. R. Davies
*
* 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
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is furnished to do
* so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from 'react';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import ButtonBase from '@mui/material/ButtonBase';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SaveIconOutline from '@mui/icons-material/Save';
import Button from "@mui/material/Button";
import EditIconOutline from '@mui/icons-material/Edit';
import { Snapshot } from './Pedalboard';
import { colorKeys, getBackgroundColor, getBorderColor } from './MaterialColors';
import { PiPedalModel, PiPedalModelFactory, SnapshotModifiedEvent } from './PiPedalModel';
export interface SnapshotButtonProps {
snapshot: Snapshot | null;
snapshotIndex: number;
selected: boolean;
largeText: boolean;
collapseButtons: boolean;
onEditSnapshot: (index: number) => void;
onSaveSnapshot: (index: number) => void;
onSelectSnapshot: (index: number) => void;
};
export interface SnapshotButtonState {
modified: boolean;
};
export default class SnapshotButton extends ResizeResponsiveComponent<SnapshotButtonProps, SnapshotButtonState> {
private model: PiPedalModel;
constructor(props: SnapshotButtonProps) {
super(props);
this.state = {
modified: this.props.snapshot?.isModified ?? false,
};
this.model = PiPedalModelFactory.getInstance();
this.onSnapshotModified = this.onSnapshotModified.bind(this);
}
onWindowSizeChanged(width: number, height: number): void {
}
onSnapshotModified(event: SnapshotModifiedEvent) {
if (event.snapshotIndex === this.props.snapshotIndex) {
this.setState({ modified: event.modified });
}
}
componentDidMount(): void {
super.componentDidMount?.();
this.model.onSnapshotModified.addEventHandler(this.onSnapshotModified);
}
componentWillUnmount(): void {
this.model.onSnapshotModified.removeEventHandler(this.onSnapshotModified);
super.componentWillUnmount();
}
componentDidUpdate(
prevProps: Readonly<SnapshotButtonProps>,
prevState: Readonly<SnapshotButtonState>): void {
super.componentDidUpdate?.(prevProps, prevState);
if (this.props.snapshot !== prevProps.snapshot) {
this.setState({
modified: this.props.snapshot?.isModified ?? false
})
}
}
render() {
let { snapshot, snapshotIndex, selected } = this.props;
let { modified } = this.state;
// (snapshot: Snapshot | null, index: number) {
//let state = this.state;
let color: string;
let bordercolor: string;
if (snapshot) {
if (colorKeys.indexOf(snapshot.color) === -1) {
bordercolor = color = snapshot.color;
} else {
color = getBackgroundColor(snapshot.color);
bordercolor = getBorderColor(snapshot.color);
}
} else {
bordercolor = color = getBackgroundColor("grey");
}
let title = snapshot ? snapshot.name : "<unassigned>";
if (modified) {
title = title + "*";
}
let disabled = snapshot === null;
return (
<div style={{ display: "flex", position: "relative", flexGrow: 1, flexBasis: 1, flexFlow: "column nowrap", alignItems: "stretch", borderRadius: 16 }}>
<ButtonBase style={{
display: "flex", flexGrow: 1, flexBasis: 1, flexFlow: "column nowrap", alignItems: "stretch", borderRadius: 16,
background: color,
boxShadow: "1px 3px 6px #00000090"
}}
onMouseDown={(ev) => {
if (!selected) ev.stopPropagation();
}}
onClick={() => { if (snapshot) this.props.onSelectSnapshot(snapshotIndex); }}
>
<div
style={{ flexGrow: 1, flexShrink: 1, display: "flex", flexFlow: "column nowrap", alignItems: "stretch" }}
onMouseDown={(ev) => {
if (disabled) ev.stopPropagation();
}}
>
<div style={{
flexGrow: 1, flexShrink: 1, display: "flex", flexFlow: "column nowrap", alignItems: "stretch", justifyContent: "center", margin: 6,
borderColor: selected ? bordercolor : "transparent", borderStyle: "solid", borderWidth: 3, borderRadius: 10
}}
>
<div style={{ flexGrow: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography display="block" color="textPrimary" align="center" variant="body1"
style={{ fontSize: this.props.largeText ? "30px" : undefined }}
>{title}</Typography>
</div>
<Typography variant="h3"
style={{
position: "absolute",bottom: 0, left: 0, paddingBottom: 12, paddingLeft: 16, paddingRight: 12,
pointerEvents: "none", opacity: 0.15, fontSize: "44px", fontWeight: 900, fontFamily: "Arial Black", fontStyle: "italic"
}}
>
{(snapshotIndex + 1).toString()}
</Typography>
<div style={{ height: 54, flexGrow: 0, flexShrink: 0 }}>
{/* placeholder where we will float the buttons, which can't be witin another button (tons of DOM validation warning messages in chrome) */}
</div>
</div>
</div>
</ButtonBase >
<div style={{ flexGrow: 0, position: "absolute", bottom: 0, right: 0, paddingBottom: 12, marginRight: 12 }} >
{!this.props.collapseButtons ? (
<div style={{ marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<Button variant="dialogSecondary" startIcon={<SaveIconOutline />} color="inherit" style={{ textTransform: "none" }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onMouseUp={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
disabled={false}
onClick={(ev) => { ev.stopPropagation(); this.props.onSaveSnapshot(snapshotIndex); }}
>
Save
</Button>
<Button variant="dialogSecondary" color="inherit" startIcon={<EditIconOutline />} style={{ textTransform: "none" }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onMouseUp={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
disabled={disabled}
onClick={(ev) => { ev.stopPropagation(); this.props.onEditSnapshot(snapshotIndex); }}
>
Edit
</Button>
</div>
) : (
<div style={{ marginLeft: "auto", marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<div style={{ flexGrow: 1, flexBasis: 1 }} >&nbsp;</div>
<IconButton color="inherit" style={{ opacity: 0.66 }} disabled={false}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onSaveSnapshot(snapshotIndex); }}
>
<SaveIconOutline />
</IconButton>
<IconButton color="inherit" disabled={disabled} style={{ opacity: 0.66 }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onEditSnapshot(snapshotIndex); }}
>
<EditIconOutline />
</IconButton>
</div>
)}
</div>
</div >
);
}
}
react/src/SnapshotEditor.tsx
+16 -1
View File
@@ -216,8 +216,23 @@ const SnapshotEditor = withStyles(appStyles)(class extends ResizeResponsiveCompo
}
handleOk() {
let selectedSnapshot = this.props.snapshotIndex;
let currentPedalboard = this.model_.pedalboard.get();
let selectedSnapshot = this.props.snapshotIndex;
let currentSnapshot: Snapshot | null = currentPedalboard.snapshots[selectedSnapshot];
if (!currentSnapshot)
{
this.props.onClose();
return;
}
let changed = this.state.name !== currentSnapshot.name
|| this.state.color !== currentSnapshot.color
|| currentSnapshot.isModified;
if (!changed)
{
this.props.onClose();
return;
}
let newSnapshots = Snapshot.cloneSnapshots(currentPedalboard.snapshots);
let newSnapshot = this.model_.pedalboard.get().makeSnapshot();
newSnapshot.name = this.state.name;
react/src/SnapshotPanel.tsx
+12 -111
View File
@@ -22,18 +22,12 @@
* SOFTWARE.
*/
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import ButtonBase from '@mui/material/ButtonBase';
import SnapshotButton from './SnapshotButton';
import { Pedalboard, Snapshot } from './Pedalboard';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SaveIconOutline from '@mui/icons-material/Save';
import Button from "@mui/material/Button";
import EditIconOutline from '@mui/icons-material/Edit';
import SnapshotPropertiesDialog from './SnapshotPropertiesDialog';
import { colorKeys, getBackgroundColor, getBorderColor } from './MaterialColors';
@@ -100,7 +94,7 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
}
onSelectedSnapshotChanged(value: number) {
this.setState({ selectedSnapshot: this.getSelectedSnapshot() })
this.setState({ selectedSnapshot: value })
}
onPedalboardChanged(value: Pedalboard) {
// boofs our current edit, oh well. we can't track property across a structural change.
@@ -193,110 +187,17 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
this.model.selectSnapshot(index);
}
renderSnapshot(snapshot: Snapshot | null, index: number) {
//let state = this.state;
let color: string;
let bordercolor: string;
if (snapshot) {
if (colorKeys.indexOf(snapshot.color) === -1) {
bordercolor = color = snapshot.color;
} else {
color = getBackgroundColor(snapshot.color);
bordercolor = getBorderColor(snapshot.color);
}
} else {
bordercolor = color = getBackgroundColor("grey");
}
let title = snapshot ? snapshot.name : "<unassigned>";
let disabled = snapshot === null;
let selected = this.state.selectedSnapshot === index;
return (
<div style={{ display: "flex", position: "relative",flexGrow: 1, flexBasis: 1, flexFlow: "column nowrap", alignItems: "stretch", borderRadius: 16 }}>
<ButtonBase style={{
display: "flex", flexGrow: 1, flexBasis: 1, flexFlow: "column nowrap", alignItems: "stretch", borderRadius: 16,
background: color,
boxShadow: "1px 3px 6px #00000090"
}}
onMouseDown={(ev) => {
if (!selected) ev.stopPropagation();
}}
onClick={() => { if (snapshot) this.selectSnapshot(index); }}
>
<div
style={{ flexGrow: 1, flexShrink: 1, display: "flex", flexFlow: "column nowrap", alignItems: "stretch" }}
onMouseDown={(ev) => {
if (disabled) ev.stopPropagation();
}}
>
<div style={{
flexGrow: 1, flexShrink: 1, display: "flex", flexFlow: "column nowrap", alignItems: "stretch", justifyContent: "center", margin: 6,
borderColor: selected ? bordercolor : "transparent", borderStyle: "solid", borderWidth: 3, borderRadius: 10
}}
>
<div style={{ flexGrow: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography display="block" color="textPrimary" align="center" variant="body1"
style={{ fontSize: this.state.largeText ? "30px" : undefined }}
>{title}</Typography>
</div>
<div style={{ height: 54,flexGrow: 0,flexShrink: 0 }}>
{/* placeholder where we will float the buttons, which can't be witin another button (tons of DOM validation warning messages in chrome) */}
</div>
</div>
</div>
</ButtonBase >
<div style={{ flexGrow: 0, position: "absolute", bottom:0,left:0,right:0,paddingBottom:10,paddingLeft: 16, paddingRight:12 }} >
<Typography variant="h3" style={{opacity: 0.15,fontSize: "44px",fontWeight:900,fontFamily: "Arial Black",fontStyle: "italic"}} >{(index+1).toString()}</Typography>
</div>
<div style={{ flexGrow: 0, position: "absolute", bottom:0,left:0,right:0,paddingBottom:12,paddingLeft: 12, paddingRight:12 }} >
{!this.state.collapseButtons ? (
<div style={{ marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<div style={{ flexGrow: 1, flexBasis: 1 }} >&nbsp;</div>
<Button variant="dialogSecondary" startIcon={<SaveIconOutline />} color="inherit" style={{ textTransform: "none" }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onMouseUp={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
disabled={false}
onClick={(ev) => { ev.stopPropagation(); this.onSaveSnapshot(index); }}
>
Save
</Button>
<Button variant="dialogSecondary" color="inherit" startIcon={<EditIconOutline />} style={{ textTransform: "none" }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onMouseUp={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
disabled={disabled}
onClick={(ev) => { ev.stopPropagation(); this.onEditSnapshot(index); }}
>
Edit
</Button>
</div>
) : (
<div style={{ marginLeft: "auto", marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<div style={{ flexGrow: 1, flexBasis: 1 }} >&nbsp;</div>
<IconButton color="inherit" style={{ opacity: 0.66 }} disabled={false}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.onSaveSnapshot(index); }}
>
<SaveIconOutline />
</IconButton>
<IconButton color="inherit" disabled={disabled} style={{ opacity: 0.66 }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.onEditSnapshot(index); }}
>
<EditIconOutline />
</IconButton>
</div>
)}
</div>
</div >
<SnapshotButton key={"s"+index}
snapshot={snapshot}
snapshotIndex={index}
collapseButtons={this.state.collapseButtons}
selected={this.state.selectedSnapshot === index}
largeText={this.state.largeText}
onEditSnapshot={(index)=>{this.onEditSnapshot(index)}}
onSaveSnapshot={(index)=>{ this.onSaveSnapshot(index); }}
onSelectSnapshot={(index)=>{this.model.selectSnapshot(index);}}
/>
);
}