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

NueralPi bug fixes.

Browse Source
This commit is contained in:
Robin Davies
2022-02-13 18:13:59 -05:00
parent 5cf10b0154
commit dd4d883b0b
46 changed files with 679 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/package.json
+6 -3
View File
@@ -1,10 +1,13 @@
{
"name": "my-app",
"name": "pipedal",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.4.1",
"@mui/material": "^5.4.1",
"@mui/styles": "^5.4.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
react/src/App.tsx
+263 -243
View File
@@ -18,31 +18,31 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { SyntheticEvent } from 'react';
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider, WithStyles } from '@mui/styles';
import { createTheme, StyledEngineProvider, adaptV4Theme, Theme } from '@mui/material/styles';
import './App.css';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import MenuButton from '@material-ui/icons/Menu';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import CssBaseline from '@mui/material/CssBaseline';
import Typography from '@mui/material/Typography';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IconButton from '@mui/material/IconButton';
import MenuButton from '@mui/icons-material/Menu';
import { TemporaryDrawer } from './TemporaryDrawer';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import FullscreenIcon from '@material-ui/icons/Fullscreen';
import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import CircularProgress from '@material-ui/core/CircularProgress';
import FullscreenIcon from '@mui/icons-material/Fullscreen';
import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import CircularProgress from '@mui/material/CircularProgress';
import { OnChangedHandler } from './ObservableProperty';
import ErrorOutlineIcon from '@material-ui/icons/Error';
import ErrorOutlineIcon from '@mui/icons-material/Error';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import PresetSelector from './PresetSelector';
import SettingsDialog from './SettingsDialog';
import AboutDialog from './AboutDialog';
@@ -51,18 +51,27 @@ import BankDialog from './BankDialog';
import { PiPedalModelFactory, PiPedalModel, State, ZoomedControlInfo } from './PiPedalModel';
import ZoomedUiControl from './ZoomedUiControl'
import MainPage from './MainPage';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import ListSubheader from '@material-ui/core/ListSubheader';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import ListSubheader from '@mui/material/ListSubheader';
import { BankIndex, BankIndexEntry } from './Banks';
import RenameDialog from './RenameDialog';
import JackStatusView from './JackStatusView';
const theme = createMuiTheme({
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const theme = createTheme(adaptV4Theme({
palette: {
primary: {
main: "#324c6c"
@@ -71,7 +80,7 @@ const theme = createMuiTheme({
main: "#FF6060"
}
}
});
}));
const appStyles = ({ palette, spacing, mixins }: Theme) => createStyles({
loadingContent: {
@@ -619,37 +628,68 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
return (
<ThemeProvider theme={theme}>
<div style={{
minHeight: 345, minWidth: 390,
position: "absolute", width: "100%", height: "100%", background: "#F88", userSelect: "none",
display: "flex", flexDirection: "column", flexWrap: "nowrap",
overscrollBehavior: this.state.isDebug ? "auto" : "none"
}}
onContextMenu={(e) => {
if (!this.model_.serverVersion?.debug ?? false) {
e.preventDefault(); e.stopPropagation();
}
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div style={{
minHeight: 345, minWidth: 390,
position: "absolute", width: "100%", height: "100%", background: "#F88", userSelect: "none",
display: "flex", flexDirection: "column", flexWrap: "nowrap",
overscrollBehavior: this.state.isDebug ? "auto" : "none"
}}
>
<CssBaseline />
{(!this.state.tinyToolBar) ?
(
<AppBar position="absolute" style={{background: "white"}}>
<Toolbar variant="dense" >
<IconButton edge="start"
aria-label="menu" onClick={() => { this.showDrawer() }}
>
onContextMenu={(e) => {
if (!this.model_.serverVersion?.debug ?? false) {
e.preventDefault(); e.stopPropagation();
}
}}
>
<CssBaseline />
{(!this.state.tinyToolBar) ?
(
<AppBar position="absolute" style={{background: "white"}}>
<Toolbar variant="dense" >
<IconButton
edge="start"
aria-label="menu"
onClick={() => { this.showDrawer() }}
size="large">
<MenuButton />
</IconButton>
<div style={{ flex: "1 1 1px" }} />
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
<PresetSelector />
</div>
<div style={{ flex: "2 2 30px" }} />
{this.state.canFullScreen &&
<IconButton
aria-label="menu"
onClick={() => { this.toggleFullScreen(); }}
size="large">
{this.state.isFullScreen ? (
<FullscreenExitIcon />
) : (
<FullscreenIcon />
)}
</IconButton>
}
</Toolbar>
</AppBar>
) : (
<div className={classes.toolBarContent} >
<IconButton
style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
aria-label="menu"
onClick={() => { this.showDrawer() }}
size="large">
<MenuButton />
</IconButton>
<div style={{ flex: "1 1 1px" }} />
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
<PresetSelector />
</div>
<div style={{ flex: "2 2 30px" }} />
{this.state.canFullScreen &&
{this.state.canFullScreen && (
<IconButton
aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
aria-label="menu"
onClick={() => { this.toggleFullScreen(); }}
size="large">
{this.state.isFullScreen ? (
<FullscreenExitIcon />
) : (
@@ -658,213 +698,193 @@ const App = withStyles(appStyles)(class extends ResizeResponsiveComponent<AppPro
)}
</IconButton>
}
</Toolbar>
</AppBar>
) : (
<div className={classes.toolBarContent} >
<IconButton style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
aria-label="menu" onClick={() => { this.showDrawer() }}
>
<MenuButton />
</IconButton>
{this.state.canFullScreen && (
<IconButton style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
aria-label="menu" onClick={() => { this.toggleFullScreen(); }}>
{this.state.isFullScreen ? (
<FullscreenExitIcon />
) : (
<FullscreenIcon />
)}
</div>
)}
<TemporaryDrawer position='left' title="PiPedal"
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
<List subheader={
<ListSubheader component="div" id="nested-list-subheader">Banks</ListSubheader>
}>
{
shortBankList.map((bank) => {
return (
<ListItem button key={'bank' + bank.instanceId} selected={bank.instanceId === this.state.banks.selectedBank}
onClick={() => this.onOpenBank(bank.instanceId)}
>
)}
<ListItemText primary={bank.name} />
</ListItem>
</IconButton>
)}
</div>
)}
<TemporaryDrawer position='left' title="PiPedal"
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
<List subheader={
<ListSubheader component="div" id="nested-list-subheader">Banks</ListSubheader>
}>
{
shortBankList.map((bank) => {
return (
<ListItem button key={'bank' + bank.instanceId} selected={bank.instanceId === this.state.banks.selectedBank}
onClick={() => this.onOpenBank(bank.instanceId)}
);
})
}
{
showBankSelectDialog && (
<ListItem button key={'bankDOTDOTDOT'} selected={false}
onClick={() => this.handleDrawerSelectBank()}
>
<ListItemText primary={bank.name} />
<ListItemText primary={"..."} />
</ListItem>
);
})
}
{
showBankSelectDialog && (
<ListItem button key={'bankDOTDOTDOT'} selected={false}
onClick={() => this.handleDrawerSelectBank()}
>
<ListItemText primary={"..."} />
</ListItem>
)
}
</List>
<Divider />
<List>
<ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
<ListItemIcon><img src="img/drive_file_rename_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} /></ListItemIcon>
<ListItemText primary='Rename Bank' />
</ListItem>
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
<ListItemIcon>
<img src="img/save_bank_as.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Save As New Bank' />
</ListItem>
<ListItem button key='CreateBank' onClick={() => { this.handleDrawerManageBanks(); }}>
<ListItemIcon>
<img src="img/edit_banks.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Manage Banks...' />
</ListItem>
</List>
<Divider />
<List>
<ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
<ListItemIcon>
<img src="img/settings_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Settings' />
</ListItem>
<ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
<ListItemIcon>
<img src="img/help_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='About' />
</ListItem>
</List>
</TemporaryDrawer>
{!this.state.tinyToolBar && (
<Toolbar className={classes.toolBarSpacer} variant="dense" />
)}
<main className={classes.mainFrame} >
<div className={classes.mainSizingPosition}>
<div className={classes.heroContent}>
{(this.state.displayState !== State.Loading) && (
<MainPage hasTinyToolBar={this.state.tinyToolBar} />
)}
</div>
</div>
</main>
<BankDialog show={this.state.bankDialogOpen} isEditDialog={this.state.editBankDialogOpen} onDialogClose={() => this.setState({ bankDialogOpen: false })} />
<AboutDialog open={this.state.aboutDialogOpen} onClose={() => this.setState({ aboutDialogOpen: false })} />
<SettingsDialog open={this.state.isSettingsDialogOpen} onClose={() => this.handleSettingsDialogClose()} />
<RenameDialog
open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
defaultName={this.model_.banks.get().getSelectedEntryName()}
acceptActionName={"Rename"}
onClose={() => {
this.setState({
renameBankDialogOpen: false,
saveBankAsDialogOpen: false
})
}}
onOk={(text: string) => {
if (this.state.renameBankDialogOpen) {
this.handleBankRenameOk(text);
} else if (this.state.saveBankAsDialogOpen) {
this.handleSaveBankAsOk(text);
}
}
}
/>
<ZoomedUiControl
dialogOpen={this.state.zoomedControlOpen}
controlInfo={this.state.zoomedControlInfo}
onDialogClose={() => { this.setState({ zoomedControlOpen: false }); }}
onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); }
}
/>
<Dialog
open={this.state.alertDialogOpen}
onClose={this.handleCloseAlert}
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{
this.model_.alertMessage.get()
)
}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleCloseAlert} color="primary" autoFocus>
OK
</Button>
</DialogActions>
</Dialog>
<JackStatusView />
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Reconnecting ? "block" : "none" }}
>
<div className={classes.errorContentMask} />
</List>
<Divider />
<List>
<ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
<ListItemIcon><img src="img/drive_file_rename_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} /></ListItemIcon>
<ListItemText primary='Rename Bank' />
</ListItem>
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
<ListItemIcon>
<img src="img/save_bank_as.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Save As New Bank' />
</ListItem>
<ListItem button key='CreateBank' onClick={() => { this.handleDrawerManageBanks(); }}>
<ListItemIcon>
<img src="img/edit_banks.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Manage Banks...' />
</ListItem>
</List>
<Divider />
<List>
<ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
<ListItemIcon>
<img src="img/settings_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='Settings' />
</ListItem>
<ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
<ListItemIcon>
<img src="img/help_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
</ListItemIcon>
<ListItemText primary='About' />
</ListItem>
</List>
</TemporaryDrawer>
{!this.state.tinyToolBar && (
<Toolbar className={classes.toolBarSpacer} variant="dense" />
)}
<main className={classes.mainFrame} >
<div className={classes.mainSizingPosition}>
<div className={classes.heroContent}>
{(this.state.displayState !== State.Loading) && (
<MainPage hasTinyToolBar={this.state.tinyToolBar} />
)}
</div>
<div className={classes.loadingBox}>
<div className={classes.loadingBoxItem}>
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
</div>
<Typography variant="body2" className={classes.progressText}>
Reconnecting...
</Typography>
</div>
</div>
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Error ? "flex" : "none" }}
onMouseDown={preventDefault} onKeyDown={preventDefault}
>
<div className={classes.errorContentMask} />
<div style={{ flex: "2 2 3px", height: 20 }} >&nbsp;</div>
<div className={classes.errorMessageBox} style={{ position: "relative" }} >
<div style={{ fontSize: "30px", position: "absolute", left: 0, top: 0, color: "#A00" }}>
<ErrorOutlineIcon color="inherit" fontSize="inherit" style={{ float: "left", marginRight: "12px" }} />
</div>
<div style={{ marginLeft: 40, marginTop: 3 }}>
<p className={classes.errorText}>
Error: {this.state.errorMessage}
</p>
</div>
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
<Button variant='contained' color="primary" component='button'
onClick={() => window.location.reload()} >
Reload
</main>
<BankDialog show={this.state.bankDialogOpen} isEditDialog={this.state.editBankDialogOpen} onDialogClose={() => this.setState({ bankDialogOpen: false })} />
<AboutDialog open={this.state.aboutDialogOpen} onClose={() => this.setState({ aboutDialogOpen: false })} />
<SettingsDialog open={this.state.isSettingsDialogOpen} onClose={() => this.handleSettingsDialogClose()} />
<RenameDialog
open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
defaultName={this.model_.banks.get().getSelectedEntryName()}
acceptActionName={"Rename"}
onClose={() => {
this.setState({
renameBankDialogOpen: false,
saveBankAsDialogOpen: false
})
}}
onOk={(text: string) => {
if (this.state.renameBankDialogOpen) {
this.handleBankRenameOk(text);
} else if (this.state.saveBankAsDialogOpen) {
this.handleSaveBankAsOk(text);
}
}
}
/>
<ZoomedUiControl
dialogOpen={this.state.zoomedControlOpen}
controlInfo={this.state.zoomedControlInfo}
onDialogClose={() => { this.setState({ zoomedControlOpen: false }); }}
onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); }
}
/>
<Dialog
open={this.state.alertDialogOpen}
onClose={this.handleCloseAlert}
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{
this.model_.alertMessage.get()
}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleCloseAlert} color="primary" autoFocus>
OK
</Button>
</DialogActions>
</Dialog>
<JackStatusView />
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Reconnecting ? "block" : "none" }}
>
<div className={classes.errorContentMask} />
<div className={classes.loadingBox}>
<div className={classes.loadingBoxItem}>
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
</div>
<Typography variant="body2" className={classes.progressText}>
Reconnecting...
</Typography>
</div>
</div>
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Error ? "flex" : "none" }}
onMouseDown={preventDefault} onKeyDown={preventDefault}
>
<div className={classes.errorContentMask} />
<div style={{ flex: "2 2 3px", height: 20 }} >&nbsp;</div>
<div className={classes.errorMessageBox} style={{ position: "relative" }} >
<div style={{ fontSize: "30px", position: "absolute", left: 0, top: 0, color: "#A00" }}>
<ErrorOutlineIcon color="inherit" fontSize="inherit" style={{ float: "left", marginRight: "12px" }} />
</div>
<div style={{ marginLeft: 40, marginTop: 3 }}>
<p className={classes.errorText}>
Error: {this.state.errorMessage}
</p>
</div>
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
<Button variant='contained' color="primary" component='button'
onClick={() => window.location.reload()} >
Reload
</Button>
</div>
</div>
<div style={{ flex: "5 5 auto", height: 20 }} >&nbsp;</div>
</div>
<div style={{ flex: "5 5 auto", height: 20 }} >&nbsp;</div>
</div>
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Loading ? "block" : "none" }}>
<div className={classes.errorContentMask} />
<div className={classes.loadingBox}>
<div className={classes.loadingBoxItem}>
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Loading ? "block" : "none" }}>
<div className={classes.errorContentMask} />
<div className={classes.loadingBox}>
<div className={classes.loadingBoxItem}>
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
</div>
<Typography variant="body2" className={classes.loadingBoxItem}>
Loading...
</Typography>
</div>
<Typography variant="body2" className={classes.loadingBoxItem}>
Loading...
</Typography>
</div>
</div>
</div >
</ThemeProvider>
</div >
</ThemeProvider>
</StyledEngineProvider>
);
}
}
react/src/ControlViewFactory.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import {PedalBoardItem, PedalBoardSplitItem} from './PedalBoard';
import PluginControlView from './PluginControlView';
import SplitControlView from './SplitControlView';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
import IControlViewFactory from './IControlViewFactory';
import ToobInputStageViewFactory from './ToobInputStageView';
import ToobToneStackViewFactory from './ToobToneStackView';
react/src/DialogEx.tsx
+1 -1
View File
@@ -19,7 +19,7 @@
import React from 'react';
import Dialog, {DialogProps} from '@material-ui/core/Dialog';
import Dialog, {DialogProps} from '@mui/material/Dialog';
interface DialogExProps extends DialogProps {
react/src/Draggable.tsx
+5 -2
View File
@@ -18,7 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { MouseEvent, PointerEvent, ReactNode, Component } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalStateError } from './PiPedalError';
@@ -51,7 +54,7 @@ export interface DraggableProps extends WithStyles<typeof styles> {
draggable?: boolean;
};
}
type DraggableState = {
};
react/src/DraggableGrid.tsx
+4 -3
View File
@@ -17,7 +17,8 @@
// 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, { MouseEvent, PointerEvent, Component } from 'react';
import { createStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import createStyles from '@mui/styles/createStyles';
import { Property } from "csstype";
import { nullCast} from './Utility'
@@ -63,7 +64,7 @@ class AnimationData {
this.animating = true;
}
};
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const styles = (theme: Theme) => createStyles({
@@ -99,7 +100,7 @@ export interface DraggableGridProps
moveElement: (from: number, to: number) => void;
scroll: ScrollDirection;
};
}
type DraggableGridState = {
indexToSelect?: number;
react/src/FullScreenIME.tsx
+8 -5
View File
@@ -18,14 +18,17 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { ReactNode } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import { UiControl } from './Lv2Plugin';
import Dialog from '@material-ui/core/Dialog';
import Input from '@material-ui/core/Input';
import Dialog from '@mui/material/Dialog';
import Input from '@mui/material/Input';
import { nullCast } from './Utility';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
const styles = (theme: Theme) => createStyles({
@@ -51,7 +54,7 @@ interface FullScreenIMEProps extends WithStyles<typeof styles> {
onChange: (key: string, value: number) => void;
onClose: () => void;
initialHeight: number;
};
}
type FullScreenIMEState = {
error: boolean;
};
react/src/GxTunerControl.tsx
+7 -4
View File
@@ -18,7 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, {Component} from 'react';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel";
import SvgPathBuilder from './SvgPathBuilder'
@@ -55,7 +58,7 @@ interface PitchInfo {
fraction: number;
semitoneCents: number
};
}
const FLAT = "\u{266d}";
const SHARP = "#";
@@ -64,7 +67,7 @@ const DOUBLE_SHARP = "\uD834\uDD2A";
const HALF_FLAT = "\uD834\uDD33";
const HALF_SHARP = "\uD834\uDD32";
const NOTES_12TET: string[] = [
"C", "C" + SHARP, "D", "E"+FLAT,"E", "F", "F" + SHARP, "G", "A"+FLAT,"A","B"+FLAT,"B"
];
@@ -86,7 +89,7 @@ const NOTES_53TET = ["la","laa","lo","law","ta","teh","te","tu","tuh","ti","tih"
interface GxTunerControlProps extends WithStyles<typeof styles> {
theme: Theme;
instanceId: number;
};
}
type GxTunerControlState = {
pitchInfo: PitchInfo
tet: number;
react/src/JackHostStatus.tsx
+1 -1
View File
@@ -18,7 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
const RED_COLOR = "#C00";
react/src/JackServerSettingsDialog.tsx
+15 -11
View File
@@ -20,20 +20,24 @@
import React, { Component } from 'react';
import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import Button from '@material-ui/core/Button';
import DialogActions from '@material-ui/core/DialogActions';
import Dialog from '@material-ui/core/Dialog';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import Button from '@mui/material/Button';
import DialogActions from '@mui/material/DialogActions';
import Dialog from '@mui/material/Dialog';
import JackServerSettings from './JackServerSettings';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import DialogContent from '@material-ui/core/DialogContent';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import DialogContent from '@mui/material/DialogContent';
import MenuItem from '@mui/material/MenuItem';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
@@ -43,7 +47,7 @@ interface JackServerSettingsDialogState {
latencyText: string;
jackServerSettings: JackServerSettings;
alsaDevices?: AlsaDeviceInfo[];
};
}
const styles = (theme: Theme) =>
createStyles({
react/src/LoadPluginDialog.tsx
+5 -3
View File
@@ -500,7 +500,6 @@ export const LoadPluginDialog =
let gridColumnCount = this.state.grid_cell_columns;
this.gridColumnCount = gridColumnCount;
return (
<React.Fragment>
<Dialog
onKeyPress={(e) => { this.handleKeyPress(e); }}
@@ -546,9 +545,12 @@ export const LoadPluginDialog =
}}
/>
</div>
<Select defaultValue={this.state.filterType} key={this.state.filterType} onChange={(e) => { this.onFilterChange(e); }}
<Select
defaultValue={this.state.filterType}
key={this.state.filterType}
onChange={(e) => { this.onFilterChange(e); }}
style={{ flex: "0 0 160px" }}
>
variant="standard">
{this.createFilterOptions()}
</Select>
<div style={{ flex: "0 0 auto", marginRight: 24, visibility: this.state.filterType === PluginType.Plugin ? "hidden" : "visible" }} >
react/src/LoadPluginDialogBackup.tsx
+5 -3
View File
@@ -372,7 +372,6 @@ export const LoadPluginDialog =
}
return (
<React.Fragment>
<Dialog
TransitionComponent={Transition}
@@ -394,9 +393,12 @@ export const LoadPluginDialog =
{ this.state.client_width > 520 ? "Select Plugin" : "" }
</Typography>
<div style={{ flex: "1 1 auto" }} />
<Select defaultValue={this.state.filterType} key={this.state.filterType} onChange={(e) => { this.onFilterChange(e); }}
<Select
defaultValue={this.state.filterType}
key={this.state.filterType}
onChange={(e) => { this.onFilterChange(e); }}
style={{ flex: "0 0 160px" }}
>
variant="standard">
{this.createFilterOptions()}
</Select>
<div style={{ flex: "0 0 auto", marginRight: 24, visibility: this.state.filterType === PluginType.Plugin? "hidden": "visible" }} >
react/src/MainPage.tsx
+22 -16
View File
@@ -18,24 +18,27 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { SyntheticEvent } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import {
PedalBoard, PedalBoardItem, PedalBoardSplitItem, SplitType
} from './PedalBoard';
import Button from '@material-ui/core/Button';
import InputIcon from '@material-ui/icons/Input';
import Button from '@mui/material/Button';
import InputIcon from '@mui/icons-material/Input';
import LoadPluginDialog from './LoadPluginDialog';
import Switch from '@material-ui/core/Switch';
import Switch from '@mui/material/Switch';
import PedalBoardView from './PedalBoardView';
import { PiPedalStateError } from './PiPedalError';
import IconButton from '@material-ui/core/IconButton';
import AddIcon from '@material-ui/icons/Add';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Fade from '@material-ui/core/Fade';
import Divider from '@material-ui/core/Divider';
import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Fade from '@mui/material/Fade';
import Divider from '@mui/material/Divider';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import PluginInfoDialog from './PluginInfoDialog';
import { GetControlView } from './ControlViewFactory';
@@ -88,7 +91,7 @@ const styles = ({ palette }: Theme) => createStyles({
interface MainProps extends WithStyles<typeof styles> {
hasTinyToolBar: boolean;
theme: Theme;
};
}
interface MainState {
selectedPedal: number;
@@ -99,7 +102,7 @@ interface MainState {
horizontalScrollLayout: boolean;
showMidiBindingsDialog: boolean;
screenHeight: number;
};
}
export const MainPage =
@@ -392,7 +395,7 @@ export const MainPage =
</div>
<div style={{ flex: "0 0 auto", display: canAdd ? "block" : "none", paddingRight: 8 }}>
<IconButton onClick={(e) => { this.onAddClick(e) }} >
<IconButton onClick={(e) => { this.onAddClick(e) }} size="large">
<AddIcon />
</IconButton>
<Menu
@@ -411,7 +414,9 @@ export const MainPage =
</Menu>
</div>
<div style={{ flex: "0 0 auto", display: canDelete ? "block" : "none", paddingRight: 8 }}>
<IconButton onClick={() => { this.onDeletePedal(pedalBoardItem?.instanceId ?? -1) }} >
<IconButton
onClick={() => { this.onDeletePedal(pedalBoardItem?.instanceId ?? -1) }}
size="large">
<img src="/img/old_delete_outline_black_24dp.svg" alt="Delete" style={{ width: 24, height: 24, opacity: 0.6 }} />
</IconButton>
</div>
@@ -428,7 +433,9 @@ export const MainPage =
</Button>
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton onClick={(e) => { this.handleMidiConfiguration(instanceId); }}>
<IconButton
onClick={(e) => { this.handleMidiConfiguration(instanceId); }}
size="large">
<img src="img/ic_midi.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="Midi configuration" />
</IconButton>
@@ -462,7 +469,6 @@ export const MainPage =
)
}
</div>
);
}
}
react/src/MidiBindingView.tsx
+33 -26
View File
@@ -19,15 +19,18 @@
import { Component } from 'react';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import MidiBinding from './MidiBinding';
import Utility, { nullCast } from './Utility';
import Typography from '@material-ui/core/Typography';
import MicNoneOutlinedIcon from '@material-ui/icons/MicNoneOutlined';
import MicOutlinedIcon from '@material-ui/icons/MicOutlined';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@mui/material/Typography';
import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
import MicOutlinedIcon from '@mui/icons-material/MicOutlined';
import IconButton from '@mui/material/IconButton';
import NumericInput from './NumericInput';
@@ -44,11 +47,11 @@ interface MidiBindingViewProps extends WithStyles<typeof styles> {
midiBinding: MidiBinding;
onChange: (instanceId: number, newBinding: MidiBinding) => void;
onListen: (instanceId: number, key: string, listenForControl: boolean) => void;
};
}
interface MidiBindingViewState {
};
}
@@ -191,14 +194,16 @@ const MidiBindingView =
this.generateMidiSelects()
}
</Select>
<IconButton onClick={()=> {
if (this.props.listen)
{
this.props.onListen(-2, "", false)
} else {
this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, false)
}
}}>
<IconButton
onClick={()=> {
if (this.props.listen)
{
this.props.onListen(-2, "", false)
} else {
this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, false)
}
}}
size="large">
{ this.props.listen ? (
<MicOutlinedIcon />
) : (
@@ -223,14 +228,16 @@ const MidiBindingView =
this.generateControlSelects()
}
</Select>
<IconButton onClick={()=> {
if (this.props.listen)
{
this.props.onListen(-2, "", false)
} else {
this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, true)
}
}}>
<IconButton
onClick={()=> {
if (this.props.listen)
{
this.props.onListen(-2, "", false)
} else {
this.props.onListen(this.props.instanceId, this.props.midiBinding.symbol, true)
}
}}
size="large">
{ this.props.listen ? (
<MicOutlinedIcon />
) : (
@@ -310,7 +317,7 @@ const MidiBindingView =
)
}
</div>
)
);
}
});
react/src/MidiBindingsDialog.tsx
+18 -11
View File
@@ -21,15 +21,18 @@ import React, { SyntheticEvent } from 'react';
import DialogEx from './DialogEx';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import { PiPedalModel, PiPedalModelFactory, ListenHandle } from './PiPedalModel';
import Typography from '@material-ui/core/Typography';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@mui/material/Typography';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import MidiBinding from './MidiBinding';
import MidiBindingView from './MidiBindingView';
import Snackbar from '@material-ui/core/Snackbar';
import Snackbar from '@mui/material/Snackbar';
const styles = (theme: Theme) => createStyles({
dialogAppBar: {
@@ -63,14 +66,14 @@ const styles = (theme: Theme) => createStyles({
export interface MidiBindingDialogProps extends WithStyles<typeof styles> {
open: boolean,
onClose: () => void
};
}
export interface MidiBindingDialogState {
listenInstanceId: number;
listenSymbol: string;
listenSnackbarOpen: boolean;
};
}
export const MidiBindingDialog =
withStyles(styles, { withTheme: true })(
@@ -274,8 +277,12 @@ export const MidiBindingDialog =
<div style={{ flex: "0 0 auto" }}>
<AppBar className={classes.dialogAppBar} >
<Toolbar>
<IconButton edge="start" color="inherit" onClick={this.handleClose} aria-label="back"
>
<IconButton
edge="start"
color="inherit"
onClick={this.handleClose}
aria-label="back"
size="large">
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" className={classes.dialogTitle}>
react/src/NoChangePassword.tsx
+9 -9
View File
@@ -18,15 +18,15 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import InputLabel from '@mui/material/InputLabel';
import Input from '@mui/material/Input';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -124,7 +124,7 @@ class NoChangePassword extends React.Component<NoChangePasswordProps, NoChangePa
aria-label="toggle password visibility"
onClick={(e) => this.handleShowPassword()}
onMouseDown={(e) => e.preventDefault()}
>
size="large">
{this.state.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
react/src/NumericInput.tsx
+7 -4
View File
@@ -18,8 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { Component } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import Input from '@mui/material/Input';
@@ -35,11 +38,11 @@ interface NumericInputProps extends WithStyles<typeof styles> {
min: number;
max: number;
onChange: (value: number) => void;
};
}
interface NumericInputState {
error: boolean;
};
}
export const NumericInput =
withStyles(styles, { withTheme: true })(
react/src/Pedal.tsx
+5 -3
View File
@@ -18,8 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { Component, ReactNode } from 'react';
import { withStyles, createStyles, WithStyles } from '@material-ui/core';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import { Theme } from '@mui/material/styles';
import { Lv2Plugin } from './Lv2Plugin'
@@ -31,7 +33,7 @@ interface PedalProps extends WithStyles<typeof pedalStyles> {
plugin: Lv2Plugin;
children?: React.ReactChild | React.ReactChild[];
};
}
type PedalState = {
react/src/PedalBoardView.tsx
+8 -5
View File
@@ -18,11 +18,14 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { ReactNode, Component, SyntheticEvent } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { PluginType } from './Lv2Plugin';
import ButtonBase from '@material-ui/core/ButtonBase';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
import { SelectIcon } from './PluginIcon';
import { SelectHoverBackground } from './SelectHoverBackground';
import SvgPathBuilder from './SvgPathBuilder';
@@ -174,11 +177,11 @@ interface PedalBoardProps extends WithStyles<typeof pedalBoardStyles> {
onDoubleClick?: OnSelectHandler;
hasTinyToolBar: boolean;
};
}
interface LayoutSize {
width: number;
height: number;
};
}
type PedalBoardState = {
pedalBoard?: PedalBoard;
react/src/PluginControl.tsx
+11 -8
View File
@@ -18,14 +18,17 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { TouchEvent, PointerEvent, ReactNode, Component, SyntheticEvent } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { UiControl, ScalePoint } from './Lv2Plugin';
import Typography from '@material-ui/core/Typography';
import Input from '@material-ui/core/Input';
import Select from '@material-ui/core/Select';
import Switch from '@material-ui/core/Switch';
import Typography from '@mui/material/Typography';
import Input from '@mui/material/Input';
import Select from '@mui/material/Select';
import Switch from '@mui/material/Switch';
import Utility, {nullCast} from './Utility';
import MenuItem from '@material-ui/core/MenuItem';
import MenuItem from '@mui/material/MenuItem';
import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel';
@@ -60,7 +63,7 @@ const styles = (theme: Theme) => createStyles({
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.secondary.main,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
},
displayValue: {
position: "absolute",
@@ -84,7 +87,7 @@ export interface PluginControlProps extends WithStyles<typeof styles> {
onChange: (value: number) => void;
theme: Theme;
requestIMEEdit: (uiControl: UiControl, value: number) => void;
};
}
type PluginControlState = {
error: boolean;
};
react/src/PluginControlView.tsx
+7 -4
View File
@@ -18,7 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { ReactNode } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { UiPlugin, UiControl } from './Lv2Plugin';
import {
@@ -30,7 +33,7 @@ import VuMeter from './VuMeter';
import { nullCast } from './Utility'
import GxTunerControl from './GxTunerControl';
import { PiPedalStateError } from './PiPedalError';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
import FullScreenIME from './FullScreenIME';
@@ -181,7 +184,7 @@ export type ControlNodes = (ReactNode | ControlGroup)[];
export interface ControlViewCustomization {
ModifyControls(controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[];
};
}
export interface PluginControlViewProps extends WithStyles<typeof styles> {
theme: Theme;
@@ -189,7 +192,7 @@ export interface PluginControlViewProps extends WithStyles<typeof styles> {
item: PedalBoardItem;
customization?: ControlViewCustomization;
customizationId?: number;
};
}
type PluginControlViewState = {
landscapeGrid: boolean;
imeUiControl?: UiControl;
react/src/PluginIcon.tsx
+4 -1
View File
@@ -17,7 +17,10 @@
// 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 { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModelFactory } from "./PiPedalModel";
import { PluginType } from './Lv2Plugin';
react/src/PluginInfoDialog.tsx
+25 -17
View File
@@ -18,18 +18,21 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import MuiDialogTitle from '@mui/material/DialogTitle';
import MuiDialogContent from '@mui/material/DialogContent';
import MuiDialogActions from '@mui/material/DialogActions';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import { PiPedalModelFactory } from "./PiPedalModel";
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { UiPlugin, UiControl } from './Lv2Plugin';
import PluginIcon from './PluginIcon';
@@ -132,7 +135,7 @@ function makeParagraphs(description: string) {
}
function makeControls(controls: UiControl[]) {
return (
<Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1} style={{ paddingLeft: "24px" }}>
<Grid container direction="row" justifyContent="flex-start" alignItems="flex-start" spacing={1} style={{ paddingLeft: "24px" }}>
{
controls.map((control) => (
<Grid item spacing={2} xs={6} sm={4} key={control.symbol} >
@@ -143,7 +146,6 @@ function makeControls(controls: UiControl[]) {
))
}
</Grid>
);
}
@@ -176,8 +178,10 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
return (
<div>
<IconButton style={{ display: (props.plugin_uri !== "") ? "block" : "none" }} onClick={handleClickOpen}
>
<IconButton
style={{ display: (props.plugin_uri !== "") ? "block" : "none" }}
onClick={handleClickOpen}
size="large">
<InfoOutlinedIcon />
</IconButton>
{open && (
@@ -190,8 +194,12 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
<div style={{ flex: "1 1 auto" }}>
<Typography variant="h6">{plugin.name}</Typography>
</div>
<IconButton aria-label="close" className={classes.closeButton} onClick={() => handleClose()}
style={{ flex: "0 0 auto" }}>
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={() => handleClose()}
style={{ flex: "0 0 auto" }}
size="large">
<CloseIcon />
</IconButton>
</div>
react/src/PluginPresetSelector.tsx
+13 -10
View File
@@ -18,14 +18,17 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { SyntheticEvent, Component } from 'react';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import PresetDialog from './PresetDialog';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Fade from '@material-ui/core/Fade';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Fade from '@mui/material/Fade';
import RenameDialog from './RenameDialog'
import PluginPreset from './PluginPreset';
@@ -34,7 +37,7 @@ interface PluginPresetSelectorProps extends WithStyles<typeof styles> {
pluginUri?: string;
onSelectPreset: (presetName: string) => void;
};
}
interface PluginPresetSelectorState {
@@ -49,7 +52,7 @@ interface PluginPresetSelectorState {
renameDialogActionName: string;
renameDialogOnOk?: (name: string) => void;
};
}
const styles = (theme: Theme) => createStyles({
@@ -257,7 +260,7 @@ const PluginPresetSelector =
}
return (
<div >
<IconButton onClick={(e)=> this.handlePresetMenuClick(e)}>
<IconButton onClick={(e)=> this.handlePresetMenuClick(e)} size="large">
<img src="img/ic_pluginpreset.svg" style={{ width: 24, height: 24,opacity: 0.6 }} alt="Plugin Presets" />
</IconButton>
<Menu
@@ -295,7 +298,7 @@ const PluginPresetSelector =
onClose={() => this.handleRenameDialogClose()}
onOk={(name: string) => this.handleRenameDialogOk(name)} />
</div>
)
);
}
});
react/src/PresetSelector.tsx
+26 -18
View File
@@ -18,27 +18,30 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { SyntheticEvent, Component } from 'react';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
import SaveIconOutline from '@material-ui/icons/Save';
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import ButtonBase from "@material-ui/core/ButtonBase";
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import SaveIconOutline from '@mui/icons-material/Save';
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ButtonBase from "@mui/material/ButtonBase";
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import PresetDialog from './PresetDialog';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Fade from '@material-ui/core/Fade';
import Divider from '@material-ui/core/Divider';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Fade from '@mui/material/Fade';
import Divider from '@mui/material/Divider';
import RenameDialog from './RenameDialog'
import Select from '@material-ui/core/Select';
import Select from '@mui/material/Select';
import UploadDialog from './UploadDialog';
interface PresetSelectorProps extends WithStyles<typeof styles> {
};
}
interface PresetSelectorState {
@@ -54,7 +57,7 @@ interface PresetSelectorState {
renameDialogOnOk?: (name: string) => void;
openUploadDialog: boolean;
};
}
const selectColor = "black";
@@ -329,13 +332,18 @@ const PresetSelector =
)}
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0 }}
onClick={(e) => { this.handleSave(); }} >
<IconButton
style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0 }}
onClick={(e) => { this.handleSave(); }}
size="large">
<SaveIconOutline style={{ opacity: 0.75 }} />
</IconButton>
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton style={{ flex: "0 0 auto" }} onClick={(e) => this.handlePresetMenuClick(e)}>
<IconButton
style={{ flex: "0 0 auto" }}
onClick={(e) => this.handlePresetMenuClick(e)}
size="large">
<MoreVertIcon style={{ opacity: 0.75 }} />
</IconButton>
<Menu
@@ -367,7 +375,7 @@ const PresetSelector =
onClose={() => { this.setState({ openUploadDialog: false }) }} />
</div>
)
);
}
});
react/src/RenameDialog.tsx
+4 -4
View File
@@ -18,11 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import DialogEx from './DialogEx';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import { nullCast } from './Utility';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
react/src/SearchControl.tsx
+13 -11
View File
@@ -18,12 +18,15 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';
import ClearIcon from '@material-ui/icons/Clear';
import InputAdornment from '@material-ui/core/InputAdornment';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import Input from '@mui/material/Input';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import InputAdornment from '@mui/material/InputAdornment';
const styles = (theme: Theme) => createStyles({
});
@@ -39,10 +42,10 @@ interface SearchControlProps extends WithStyles<typeof styles> {
inputRef?: React.RefObject<HTMLInputElement>;
showSearchIcon?: boolean
};
}
interface SearchControlState {
};
}
const SearchControl = withStyles(styles, { withTheme: true })(
@@ -87,8 +90,7 @@ const SearchControl = withStyles(styles, { withTheme: true })(
return (
<div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-end", alignItems: "center" }}>
{(this.props.showSearchIcon ?? true) && (
<IconButton onClick={() => { this.props.onClick(); }}
>
<IconButton onClick={() => { this.props.onClick(); }} size="large">
<SearchIcon />
</IconButton>
)
@@ -112,7 +114,7 @@ const SearchControl = withStyles(styles, { withTheme: true })(
}
}}
edge="end"
>
size="large">
<ClearIcon fontSize='small' style={{ opacity: 0.6 }} />
</IconButton>
</InputAdornment>
react/src/SelectChannelsDialog.tsx
+9 -9
View File
@@ -18,16 +18,16 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { useState } from 'react';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import Dialog from '@material-ui/core/Dialog';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import Dialog from '@mui/material/Dialog';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Checkbox from '@mui/material/Checkbox';
react/src/SelectHoverBackground.tsx
+8 -3
View File
@@ -18,7 +18,12 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { Component, SyntheticEvent } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
const styles = ({ palette }: Theme) => createStyles({
@@ -50,11 +55,11 @@ interface HoverProps extends WithStyles<typeof styles> {
selected: boolean;
showHover?: boolean;
theme: Theme;
};
}
interface HoverState {
hovering: boolean;
};
}
export const SelectHoverBackground =
react/src/SelectMidiChannelsDialog.tsx
+8 -8
View File
@@ -18,15 +18,15 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { useState } from 'react';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import Dialog from '@material-ui/core/Dialog';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import Dialog from '@mui/material/Dialog';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Checkbox from '@mui/material/Checkbox';
react/src/SplitControlView.tsx
+5 -2
View File
@@ -18,7 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { ReactNode } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { UiPlugin } from './Lv2Plugin';
import {
@@ -95,7 +98,7 @@ interface SplitControlViewProps extends WithStyles<typeof styles> {
theme: Theme;
instanceId: number;
item: PedalBoardSplitItem;
};
}
type SplitControlViewState = {
landscapeGrid: boolean;
};
react/src/TemporaryDrawer.tsx
+10 -9
View File
@@ -18,13 +18,15 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { Component } from 'react';
import { withStyles, createStyles, WithStyles } from '@material-ui/core';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/Toolbar';
import Drawer from '@material-ui/core/Drawer';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/Toolbar';
import Drawer from '@mui/material/Drawer';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Theme } from '@mui/material/styles';
const drawerStyles = ({ palette }: Theme) => createStyles({
@@ -55,7 +57,7 @@ interface DrawerProps extends WithStyles<typeof drawerStyles> {
onClose?: CloseEventHandler;
children?: React.ReactChild | React.ReactChild[];
};
}
type DrawerState = {
is_open: boolean;
}
@@ -98,8 +100,7 @@ export const TemporaryDrawer = withStyles(drawerStyles)(
<Toolbar className={classes.drawer_header}
style={{backgroundImage: 'url("img/ic_drawer_2.png")', border: "red solid", borderWidth: "0px 0px 3px 0px" }}
>
<IconButton style={{ marginLeft: -24 }}
>
<IconButton style={{ marginLeft: -24 }} >
<ArrowBackIcon style={{ fill: '#666' }} />
</IconButton>
</Toolbar>
react/src/ToobCabSimView.tsx
+8 -4
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel";
@@ -35,10 +39,10 @@ interface ToobCabSimProps extends WithStyles<typeof styles> {
instanceId: number;
item: PedalBoardItem;
};
}
interface ToobCabSimState {
};
}
const ToobCabSimView =
withStyles(styles, { withTheme: true })(
@@ -84,5 +88,5 @@ class ToobCabSimViewFactory implements IControlViewFactory {
}
};
}
export default ToobCabSimViewFactory;
react/src/ToobFrequencyResponseView.tsx
+7 -3
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel";
import { StandardItemSize } from './PluginControlView';
@@ -43,10 +47,10 @@ const styles = (theme: Theme) => createStyles({
interface ToobFrequencyResponseProps extends WithStyles<typeof styles> {
instanceId: number;
};
}
interface ToobFrequencyResponseState {
path: string;
};
}
const ToobFrequencyResponseView =
withStyles(styles, { withTheme: true })(
react/src/ToobInputStageView.tsx
+8 -4
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel";
@@ -35,10 +39,10 @@ interface ToobInputStageProps extends WithStyles<typeof styles> {
instanceId: number;
item: PedalBoardItem;
};
}
interface ToobInputStageState {
};
}
const ToobInputStageView =
withStyles(styles, { withTheme: true })(
@@ -85,5 +89,5 @@ class ToobInputStageViewFactory implements IControlViewFactory {
}
};
}
export default ToobInputStageViewFactory;
react/src/ToobPowerStage2View.tsx
+8 -4
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel, State,ListenHandle } from "./PiPedalModel";
@@ -35,10 +39,10 @@ interface ToobPowerstage2Props extends WithStyles<typeof styles> {
instanceId: number;
item: PedalBoardItem;
};
}
interface ToobPowerstage2State {
uiState: number[];
};
}
const ToobPowerstage2View =
withStyles(styles, { withTheme: true })(
@@ -181,5 +185,5 @@ class ToobPowerstage2ViewFactory implements IControlViewFactory {
}
};
}
export default ToobPowerstage2ViewFactory;
react/src/ToobSpectrumAnalyzerView.tsx
+8 -4
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel";
@@ -36,10 +40,10 @@ interface ToobSpectrumAnalyzerProps extends WithStyles<typeof styles> {
instanceId: number;
item: PedalBoardItem;
};
}
interface ToobSpectrumAnalyzerState {
};
}
const ToobSpectrumAnalyzerView =
withStyles(styles, { withTheme: true })(
@@ -85,5 +89,5 @@ class ToobSpectrumAnalyzerViewFactory implements IControlViewFactory {
}
};
}
export default ToobSpectrumAnalyzerViewFactory;
react/src/ToobSpectrumResponseView.tsx
+7 -3
View File
@@ -19,7 +19,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModelFactory, PiPedalModel, State,ListenHandle } from "./PiPedalModel";
import { StandardItemSize } from './PluginControlView';
@@ -44,12 +48,12 @@ const styles = (theme: Theme) => createStyles({
interface ToobSpectrumResponseProps extends WithStyles<typeof styles> {
instanceId: number;
};
}
interface ToobSpectrumResponseState {
path: string;
minF: number;
maxF: number;
};
}
const ToobSpectrumResponseView =
withStyles(styles, { withTheme: true })(
react/src/ToobToneStackView.tsx
+8 -4
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import IControlViewFactory from './IControlViewFactory';
import { PiPedalModelFactory, PiPedalModel } from "./PiPedalModel";
@@ -35,10 +39,10 @@ interface ToobToneStackProps extends WithStyles<typeof styles> {
instanceId: number;
item: PedalBoardItem;
};
}
interface ToobToneStackState {
};
}
const ToobToneStackView =
withStyles(styles, { withTheme: true })(
@@ -84,5 +88,5 @@ class ToobToneStackViewFactory implements IControlViewFactory {
}
};
}
export default ToobToneStackViewFactory;
react/src/ToobWaveShapeView.tsx
+7 -3
View File
@@ -18,7 +18,11 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModelFactory, PiPedalModel, State, ControlValueChangedHandle } from "./PiPedalModel";
import { StandardItemSize } from './PluginControlView';
@@ -55,10 +59,10 @@ interface ToobWaveShapeProps extends WithStyles<typeof styles> {
vuOutMinPeak: number;
vuOutMaxPeak: number;
};
}
interface ToobWaveShapeState {
data: number[];
};
}
const HOLD_TIME: number = 1.6; // seconds.
const DECAY_RATE = 1.0; // full range/second.
react/src/UploadDialog.tsx
+5 -5
View File
@@ -18,15 +18,15 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel';
import DialogEx from './DialogEx';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
const PRESET_EXTENSION = ".piPreset";
react/src/VuMeter.tsx
+8 -5
View File
@@ -18,7 +18,10 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { Component } from 'react';
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, State,PiPedalModelFactory, VuUpdateInfo, VuSubscriptionHandle } from './PiPedalModel';
@@ -46,7 +49,7 @@ interface VuChannelData {
greenDiv: HTMLDivElement;
telltaleDiv: HTMLDivElement;
};
}
class TelltaleState {
telltaleDb: number = MIN_DB;
@@ -85,7 +88,7 @@ class TelltaleState {
}
}
};
}
const LEFT_X = BORDER_THICKNESS;
const RIGHT_X = BORDER_THICKNESS + + CHANNEL_WIDTH + BORDER_THICKNESS;
@@ -186,11 +189,11 @@ interface VuMeterProps extends WithStyles<typeof styles> {
instanceId: number;
display: "input" | "output";
theme: Theme;
};
}
interface VuMeterState {
isStereo: boolean;
};
}
function aToDb(value: number): number {
if (value === 0) return -96;
react/src/WifiConfigDialog.tsx
+18 -15
View File
@@ -18,23 +18,26 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import DialogEx from './DialogEx';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import WifiConfigSettings from './WifiConfigSettings';
import NoChangePassword from './NoChangePassword';
import Typography from '@material-ui/core/Typography';
import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@mui/material/Typography';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import Select from '@mui/material/Select';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import WifiChannel from './WifiChannel';
import {PiPedalModel, PiPedalModelFactory} from './PiPedalModel';
@@ -51,7 +54,7 @@ export interface WifiConfigProps extends WithStyles<typeof styles> {
wifiConfigSettings: WifiConfigSettings,
onOk: (wifiConfigSettings: WifiConfigSettings) => void,
onClose: () => void
};
}
export interface WifiConfigState {
fullScreen: boolean;
@@ -67,7 +70,7 @@ export interface WifiConfigState {
countryCode: string;
channel: string;
wifiChannels: WifiChannel[];
};
}
react/src/XxxSnippet.tsx
+8 -3
View File
@@ -18,7 +18,12 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
const styles = (theme: Theme) => createStyles({
@@ -27,11 +32,11 @@ const styles = (theme: Theme) => createStyles({
interface XxxProps extends WithStyles<typeof styles> {
theme: Theme,
};
}
interface XxxState {
};
}
const Xxx = withStyles(styles, { withTheme: true })(
react/src/ZoomedDial.tsx
+6 -3
View File
@@ -17,7 +17,10 @@
// 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, { TouchEvent, PointerEvent, SyntheticEvent } from 'react'; import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import React, { TouchEvent, PointerEvent, SyntheticEvent } from 'react';import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import { PiPedalModel, PiPedalModelFactory, ZoomedControlInfo } from './PiPedalModel';
const SELECTED_OPACITY = 0.8;
@@ -42,11 +45,11 @@ interface ZoomedDialProps extends WithStyles<typeof styles> {
onPreviewValue(value: number): void,
onSetValue(value: number): void
};
}
interface ZoomedDialState {
};
}
const ZoomedDial = withStyles(styles, { withTheme: true })(
react/src/ZoomedUiControl.tsx
+7 -8
View File
@@ -18,10 +18,13 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, {SyntheticEvent} from 'react';
import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import { ZoomedControlInfo } from './PiPedalModel';
import DialogEx from './DialogEx';
import Typography from '@material-ui/core/Typography';
import Typography from '@mui/material/Typography';
import { PiPedalModelFactory,PiPedalModel } from './PiPedalModel';
import ZoomedDial from './ZoomedDial';
@@ -35,11 +38,11 @@ interface ZoomedUiControlProps extends WithStyles<typeof styles> {
onDialogClose: () => void;
onDialogClosed: () => void;
controlInfo: ZoomedControlInfo | undefined
};
}
interface ZoomedUiControlState {
value: number
};
}
/*
const Transition = React.forwardRef(function Transition(
@@ -120,10 +123,6 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
<DialogEx tag="zoomedControlDlg" open={this.props.dialogOpen}
onClose={()=> { this.props.onDialogClose()}}
onAbort={()=> { this.props.onDialogClose()}}
onExited={ () => {
this.props.onDialogClosed()
}
}
>
<div style={{ width: 300, height: 300, background: "#FFF",
display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center"