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